@remotion/studio 4.0.475 → 4.0.476

package/dist/components/SelectedOutlineOverlay.js

@@ -33,8 +33,9 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineOverlay = exports.compensateTranslateForTransformOrigin = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineDragChanges = exports.applySelectedOutlineDragAxisLock = exports.getSelectedOutlineDragValues = exports.getSequencesWithSelectableOutlines = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedOutlineRotationDeltaDegrees = void 0;
+exports.SelectedOutlineOverlay = exports.compensateTranslateForTransformOrigin = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragChanges = exports.isSelectedOutlineDragPastThreshold = exports.applySelectedOutlineDragAxisLock = exports.getSelectedOutlineDragValues = exports.getSequencesWithSelectableOutlines = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSelectedSequenceKeys = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineDragThresholdPx = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
@@ -44,6 +45,7 @@ const colors_1 = require("../helpers/colors");
 const format_file_location_1 = require("../helpers/format-file-location");
 const get_box_quads_ponyfill_1 = require("../helpers/get-box-quads-ponyfill");
 const open_in_editor_1 = require("../helpers/open-in-editor");
+const use_keybinding_1 = require("../helpers/use-keybinding");
 const editor_outlines_1 = require("../state/editor-outlines");
 const scale_lock_1 = require("../state/scale-lock");
 const ContextMenu_1 = require("./ContextMenu");
@@ -54,9 +56,13 @@ const selected_outline_geometry_1 = require("./selected-outline-geometry");
 const selected_outline_uv_1 = require("./selected-outline-uv");
 const SelectedOutlineUvControls_1 = require("./SelectedOutlineUvControls");
 const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
+const disable_sequence_interactivity_1 = require("./Timeline/disable-sequence-interactivity");
+const imperative_state_1 = require("./Timeline/imperative-state");
 const parse_keyframe_field_from_node_path_1 = require("./Timeline/parse-keyframe-field-from-node-path");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
+const timeline_field_utils_1 = require("./Timeline/timeline-field-utils");
 const timeline_rotation_utils_1 = require("./Timeline/timeline-rotation-utils");
+const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
 const timeline_translate_utils_1 = require("./Timeline/timeline-translate-utils");
 const TimelineScaleField_1 = require("./Timeline/TimelineScaleField");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
@@ -66,6 +72,7 @@ const translateFieldKey = 'style.translate';
 const scaleFieldKey = 'style.scale';
 const rotateFieldKey = 'style.rotate';
 const transformOriginFieldKey = 'style.transformOrigin';
+exports.selectedOutlineDragThresholdPx = 4;
 const outlineContainer = {
     position: 'absolute',
     inset: 0,
@@ -142,6 +149,25 @@ const getSelectedOutlineRotationCornerInfo = (points, corner) => {
     };
 };
 exports.getSelectedOutlineRotationCornerInfo = getSelectedOutlineRotationCornerInfo;
+const getSelectedOutlineRotationPivot = ({ dimensions, points, transformOriginValue, }) => {
+    if (dimensions === null) {
+        return getOutlineCenter(points);
+    }
+    const parsed = (0, transform_origin_utils_1.parseTransformOrigin)(transformOriginValue);
+    if (parsed === null) {
+        return getOutlineCenter(points);
+    }
+    const uv = (0, transform_origin_utils_1.parsedTransformOriginToUv)({
+        parsed,
+        width: dimensions.width,
+        height: dimensions.height,
+    });
+    if (uv === null) {
+        return getOutlineCenter(points);
+    }
+    return (0, selected_outline_uv_1.getUvHandlePosition)(points, uv);
+};
+exports.getSelectedOutlineRotationPivot = getSelectedOutlineRotationPivot;
 const rectToPoints = (elementRect, containerRect) => {
     const left = elementRect.left - containerRect.left;
     const top = elementRect.top - containerRect.top;
@@ -154,6 +180,23 @@ const rectToPoints = (elementRect, containerRect) => {
         { x: left, y: bottom },
     ];
 };
+const getTransformedSvgViewportPoints = ({ viewport, ctm, containerRect, }) => {
+    const transformPoint = (x, y) => ({
+        x: ctm.a * x + ctm.c * y + ctm.e - containerRect.left,
+        y: ctm.b * x + ctm.d * y + ctm.f - containerRect.top,
+    });
+    const left = viewport.x;
+    const top = viewport.y;
+    const right = viewport.x + viewport.width;
+    const bottom = viewport.y + viewport.height;
+    return [
+        transformPoint(left, top),
+        transformPoint(right, top),
+        transformPoint(right, bottom),
+        transformPoint(left, bottom),
+    ];
+};
+exports.getTransformedSvgViewportPoints = getTransformedSvgViewportPoints;
 const quadToPoints = (quad, containerRect) => {
     // `getBoxQuads`/the ponyfill returns the quad in viewport coordinates.
     // The overlay <svg> is unscaled (the canvas `scale()`/pan live on a sibling
@@ -169,11 +212,50 @@ const quadToPoints = (quad, containerRect) => {
         { x: quad.p4.x - containerRect.left, y: quad.p4.y - containerRect.top },
     ];
 };
+const isSvgSvgElement = (element) => {
+    var _a;
+    const ownerSvgSvgElement = (_a = element.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.SVGSVGElement;
+    return ((typeof SVGSVGElement !== 'undefined' &&
+        element instanceof SVGSVGElement) ||
+        (ownerSvgSvgElement !== undefined && element instanceof ownerSvgSvgElement));
+};
+const getSvgSvgElementViewport = (element) => {
+    const viewBox = element.viewBox.baseVal;
+    if (viewBox.width > 0 && viewBox.height > 0) {
+        return {
+            x: viewBox.x,
+            y: viewBox.y,
+            width: viewBox.width,
+            height: viewBox.height,
+        };
+    }
+    return {
+        x: 0,
+        y: 0,
+        width: element.width.baseVal.value,
+        height: element.height.baseVal.value,
+    };
+};
+const getSvgSvgElementOutlinePoints = (element, containerRect) => {
+    const ctm = element.getScreenCTM();
+    const viewport = getSvgSvgElementViewport(element);
+    if (ctm === null || (viewport.width === 0 && viewport.height === 0)) {
+        return null;
+    }
+    return (0, exports.getTransformedSvgViewportPoints)({
+        viewport,
+        ctm,
+        containerRect,
+    });
+};
 const getElementOutlinePoints = (element, containerRect) => {
     const elementRect = element.getBoundingClientRect();
     if (elementRect.width === 0 && elementRect.height === 0) {
         return null;
     }
+    if (isSvgSvgElement(element)) {
+        return getSvgSvgElementOutlinePoints(element, containerRect);
+    }
     const quads = (0, get_box_quads_ponyfill_1.getBoxQuadsPonyfill)(element, {
         box: 'border',
     });
@@ -295,7 +377,12 @@ const measureOutlines = (container, targets) => {
                     width: element.offsetWidth,
                     height: element.offsetHeight,
                 }
-                : null,
+                : element instanceof SVGSVGElement
+                    ? {
+                        width: element.width.baseVal.value,
+                        height: element.height.baseVal.value,
+                    }
+                    : null,
             points,
         });
     }
@@ -365,6 +452,10 @@ const applySelectedOutlineDragAxisLock = ({ deltaX, deltaY, axisLocked, }) => {
     return { deltaX: 0, deltaY };
 };
 exports.applySelectedOutlineDragAxisLock = applySelectedOutlineDragAxisLock;
+const isSelectedOutlineDragPastThreshold = ({ deltaX, deltaY, }) => {
+    return Math.hypot(deltaX, deltaY) >= exports.selectedOutlineDragThresholdPx;
+};
+exports.isSelectedOutlineDragPastThreshold = isSelectedOutlineDragPastThreshold;
 const getSelectedOutlineDragChanges = ({ dragStates, lastValues, }) => {
     const changes = [];
     for (const dragState of dragStates) {
@@ -409,6 +500,22 @@ const getSelectedOutlineDragChanges = ({ dragStates, lastValues, }) => {
     return changes;
 };
 exports.getSelectedOutlineDragChanges = getSelectedOutlineDragChanges;
+const getSelectedOutlineKeyboardNudgeDelta = ({ direction, shiftKey, }) => {
+    const increment = shiftKey ? 10 : 1;
+    return direction === 'left' || direction === 'up' ? -increment : increment;
+};
+exports.getSelectedOutlineKeyboardNudgeDelta = getSelectedOutlineKeyboardNudgeDelta;
+const getSelectedOutlineKeyboardNudgeDeltas = ({ deltaX, deltaY, direction, shiftKey, }) => {
+    const delta = (0, exports.getSelectedOutlineKeyboardNudgeDelta)({
+        direction,
+        shiftKey,
+    });
+    if (direction === 'left' || direction === 'right') {
+        return { deltaX: deltaX + delta, deltaY };
+    }
+    return { deltaX, deltaY: deltaY + delta };
+};
+exports.getSelectedOutlineKeyboardNudgeDeltas = getSelectedOutlineKeyboardNudgeDeltas;
 const getSelectedOutlineScaleEdgeInfo = (points, edge) => {
     const [tl, tr, br, bl] = points;
     const edgePoints = {
@@ -434,14 +541,16 @@ const getSelectedOutlineScaleEdgeInfo = (points, edge) => {
     };
 };
 exports.getSelectedOutlineScaleEdgeInfo = getSelectedOutlineScaleEdgeInfo;
-const getSelectedOutlineScaleDragStates = ({ dragTargets, getDragOverrides, }) => {
+const getSelectedOutlineScaleDragStates = ({ dragTargets, getDragOverrides, timelinePosition, }) => {
     return dragTargets.map((target) => {
         var _a;
         const dragOverrideValue = ((_a = getDragOverrides(target.nodePath)) !== null && _a !== void 0 ? _a : {})[scaleFieldKey];
+        const sourceFrame = timelinePosition - target.keyframeDisplayOffset;
         const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
             propStatus: target.propStatus,
             dragOverrideValue,
             defaultValue: target.fieldDefault,
+            frame: sourceFrame,
             shouldResortToDefaultValueIfUndefined: true,
         });
         const [startX, startY, startZ] = no_react_1.NoReactInternals.parseScaleValue(effectiveValue);
@@ -450,6 +559,7 @@ const getSelectedOutlineScaleDragStates = ({ dragTargets, getDragOverrides, }) =
                 ? JSON.stringify(target.fieldDefault)
                 : null,
             key: remotion_1.Internals.makeSequencePropsSubscriptionKey(target.nodePath),
+            sourceFrame,
             startX,
             startY,
             startZ,
@@ -463,10 +573,14 @@ const getSelectedOutlineScaleDragValues = ({ axis, dragStates, scaleFactor, }) =
         var _a, _b;
         const min = (_a = dragState.target.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity;
         const max = (_b = dragState.target.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity;
+        const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+            defaultDecimalPlaces: 3,
+            step: dragState.target.fieldSchema.step,
+        });
         const baseX = dragState.startX;
         const baseY = dragState.startY;
         const newValue = (axis === 'x' ? baseX : baseY) * scaleFactor;
-        const [x, y] = dragState.target.linked
+        const [rawX, rawY] = dragState.target.linked
             ? (0, TimelineScaleField_1.getLinkedScale)({
                 axis,
                 newValue,
@@ -478,6 +592,8 @@ const getSelectedOutlineScaleDragValues = ({ axis, dragStates, scaleFactor, }) =
             : axis === 'x'
                 ? [(0, selected_outline_geometry_1.clamp)(newValue, min, max), baseY]
                 : [baseX, (0, selected_outline_geometry_1.clamp)(newValue, min, max)];
+        const x = (0, timeline_field_utils_1.roundToDecimalPlaces)(rawX, decimalPlaces);
+        const y = (0, timeline_field_utils_1.roundToDecimalPlaces)(rawY, decimalPlaces);
         return [
             dragState.key,
             no_react_1.NoReactInternals.serializeScaleValue([x, y, dragState.startZ]),
@@ -486,10 +602,32 @@ const getSelectedOutlineScaleDragValues = ({ axis, dragStates, scaleFactor, }) =
 };
 exports.getSelectedOutlineScaleDragValues = getSelectedOutlineScaleDragValues;
 const getSelectedOutlineScaleDragChanges = ({ dragStates, lastValues, }) => {
-    return dragStates.flatMap((dragState) => {
+    const changes = [];
+    for (const dragState of dragStates) {
         const value = lastValues.get(dragState.key);
         if (value === undefined) {
-            return [];
+            continue;
+        }
+        if (dragState.target.propStatus.status === 'keyframed') {
+            const startValue = no_react_1.NoReactInternals.serializeScaleValue([
+                dragState.startX,
+                dragState.startY,
+                dragState.startZ,
+            ]);
+            if (value === startValue) {
+                continue;
+            }
+            changes.push({
+                type: 'keyframed',
+                fileName: dragState.target.nodePath.absolutePath,
+                nodePath: dragState.target.nodePath,
+                fieldKey: scaleFieldKey,
+                sourceFrame: dragState.sourceFrame,
+                value,
+                schema: dragState.target.schema,
+                clientId: dragState.target.clientId,
+            });
+            continue;
         }
         const stringifiedValue = JSON.stringify(value);
         const shouldSave = stringifiedValue !==
@@ -497,19 +635,19 @@ const getSelectedOutlineScaleDragChanges = ({ dragStates, lastValues, }) => {
             !(dragState.defaultValue === stringifiedValue &&
                 dragState.target.propStatus.codeValue === undefined);
         if (!shouldSave) {
-            return [];
+            continue;
         }
-        return [
-            {
-                fileName: dragState.target.nodePath.absolutePath,
-                nodePath: dragState.target.nodePath,
-                fieldKey: scaleFieldKey,
-                value,
-                defaultValue: dragState.defaultValue,
-                schema: dragState.target.schema,
-            },
-        ];
-    });
+        changes.push({
+            type: 'static',
+            fileName: dragState.target.nodePath.absolutePath,
+            nodePath: dragState.target.nodePath,
+            fieldKey: scaleFieldKey,
+            value,
+            defaultValue: dragState.defaultValue,
+            schema: dragState.target.schema,
+        });
+    }
+    return changes;
 };
 exports.getSelectedOutlineScaleDragChanges = getSelectedOutlineScaleDragChanges;
 const getSelectedOutlineRotationDragStates = ({ dragTargets, getDragOverrides, timelinePosition, }) => {
@@ -537,10 +675,16 @@ const getSelectedOutlineRotationDragStates = ({ dragTargets, getDragOverrides, t
 };
 exports.getSelectedOutlineRotationDragStates = getSelectedOutlineRotationDragStates;
 const getSelectedOutlineRotationDragValues = ({ dragStates, rotationDeltaDegrees, }) => {
-    return new Map(dragStates.map((dragState) => [
-        dragState.key,
-        (0, timeline_rotation_utils_1.serializeCssRotation)(dragState.startDegrees + rotationDeltaDegrees),
-    ]));
+    return new Map(dragStates.map((dragState) => {
+        const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+            defaultDecimalPlaces: 1,
+            step: dragState.target.fieldSchema.step,
+        });
+        return [
+            dragState.key,
+            (0, timeline_rotation_utils_1.serializeCssRotation)(dragState.startDegrees + rotationDeltaDegrees, decimalPlaces),
+        ];
+    }));
 };
 exports.getSelectedOutlineRotationDragValues = getSelectedOutlineRotationDragValues;
 const getSelectedOutlineRotationDragChanges = ({ dragStates, lastValues, }) => {
@@ -551,7 +695,11 @@ const getSelectedOutlineRotationDragChanges = ({ dragStates, lastValues, }) => {
             continue;
         }
         if (dragState.target.propStatus.status === 'keyframed') {
-            const startValue = (0, timeline_rotation_utils_1.serializeCssRotation)(dragState.startDegrees);
+            const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+                defaultDecimalPlaces: 1,
+                step: dragState.target.fieldSchema.step,
+            });
+            const startValue = (0, timeline_rotation_utils_1.serializeCssRotation)(dragState.startDegrees, decimalPlaces);
             if (value === startValue) {
                 continue;
             }
@@ -592,6 +740,21 @@ const clearSelectedOutlineDragOverrides = ({ clearDragOverrides, dragStates, })
         clearDragOverrides(dragState.target.nodePath);
     }
 };
+const getSelectedOutlineKeyboardNudgeDirection = (key) => {
+    if (key === 'ArrowLeft') {
+        return 'left';
+    }
+    if (key === 'ArrowRight') {
+        return 'right';
+    }
+    if (key === 'ArrowUp') {
+        return 'up';
+    }
+    if (key === 'ArrowDown') {
+        return 'down';
+    }
+    return null;
+};
 const clearSelectedOutlineScaleDragOverrides = ({ clearDragOverrides, dragStates, }) => {
     for (const dragState of dragStates) {
         clearDragOverrides(dragState.target.nodePath);
@@ -836,7 +999,7 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
         return null;
     }
     return (jsx_runtime_1.jsxs("g", { pointerEvents: "all", cursor: "crosshair", onPointerDown: onPointerDown, "aria-hidden": "true", children: [
-            jsx_runtime_1.jsx("line", { x1: position.x - 8, y1: position.y, x2: position.x + 8, y2: position.y, stroke: "white", strokeWidth: 4, vectorEffect: "non-scaling-stroke" }), jsx_runtime_1.jsx("line", { x1: position.x, y1: position.y - 8, x2: position.x, y2: position.y + 8, stroke: "white", strokeWidth: 4, vectorEffect: "non-scaling-stroke" }), jsx_runtime_1.jsx("circle", { cx: position.x, cy: position.y, r: 4, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke" }), jsx_runtime_1.jsx("line", { x1: position.x - 8, y1: position.y, x2: position.x + 8, y2: position.y, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke" }), jsx_runtime_1.jsx("line", { x1: position.x, y1: position.y - 8, x2: position.x, y2: position.y + 8, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke" })
+            jsx_runtime_1.jsx("circle", { cx: position.x, cy: position.y, r: 4, stroke: colors_1.BLUE, fill: "none", strokeWidth: 2, vectorEffect: "non-scaling-stroke" }), jsx_runtime_1.jsx("line", { x1: position.x - 8, y1: position.y, x2: position.x + 8, y2: position.y, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke" }), jsx_runtime_1.jsx("line", { x1: position.x, y1: position.y - 8, x2: position.x, y2: position.y + 8, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke" })
         ] }));
 };
 const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSelect, scale, target, }) => {
@@ -868,7 +1031,6 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
         if (drag === null || interaction.shiftKey || interaction.toggleKey) {
             return;
         }
-        onDraggingChange(true);
         const startPointerX = event.clientX;
         const startPointerY = event.clientY;
         const dragStates = getSelectedOutlineDragStates({
@@ -880,10 +1042,23 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
         let currentPointerX = startPointerX;
         let currentPointerY = startPointerY;
         let axisLocked = false;
+        let dragStarted = false;
         const updateDragOverrides = () => {
+            const screenDeltaX = currentPointerX - startPointerX;
+            const screenDeltaY = currentPointerY - startPointerY;
+            if (!dragStarted) {
+                if (!(0, exports.isSelectedOutlineDragPastThreshold)({
+                    deltaX: screenDeltaX,
+                    deltaY: screenDeltaY,
+                })) {
+                    return;
+                }
+                dragStarted = true;
+                onDraggingChange(true);
+            }
             const dragDelta = (0, exports.applySelectedOutlineDragAxisLock)({
-                deltaX: (currentPointerX - startPointerX) / scale,
-                deltaY: (currentPointerY - startPointerY) / scale,
+                deltaX: screenDeltaX / scale,
+                deltaY: screenDeltaY / scale,
                 axisLocked,
             });
             lastValues = (0, exports.getSelectedOutlineDragValues)({
@@ -932,7 +1107,9 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
             window.removeEventListener('pointercancel', onPointerUp);
             window.removeEventListener('keydown', onKeyChange);
             window.removeEventListener('keyup', onKeyChange);
-            onDraggingChange(false);
+            if (dragStarted) {
+                onDraggingChange(false);
+            }
             const changes = (0, exports.getSelectedOutlineDragChanges)({
                 dragStates,
                 lastValues,
@@ -1048,6 +1225,9 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
     var _a, _b;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
+    timelinePositionRef.current = timelinePosition;
     const scaleDrag = (_a = target === null || target === void 0 ? void 0 : target.scaleDrag) !== null && _a !== void 0 ? _a : null;
     const selected = (_b = target === null || target === void 0 ? void 0 : target.selected) !== null && _b !== void 0 ? _b : false;
     const lineRef = (0, react_1.useRef)(null);
@@ -1067,10 +1247,12 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
             return;
         }
         onDraggingChange(true);
+        (0, ForceSpecificCursor_1.forceSpecificCursor)(edgeInfo.cursor);
         const startPointer = { x: event.clientX, y: event.clientY };
         const dragStates = (0, exports.getSelectedOutlineScaleDragStates)({
             dragTargets: selected ? allScaleDragTargets : [scaleDrag],
             getDragOverrides,
+            timelinePosition: timelinePositionRef.current,
         });
         let lastValues = new Map();
         const onPointerMove = (moveEvent) => {
@@ -1091,13 +1273,23 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
                 if (value === undefined) {
                     throw new Error('Expected scale drag value to be available');
                 }
-                setDragOverrides(dragState.target.nodePath, scaleFieldKey, remotion_1.Internals.makeStaticDragOverride(value));
+                if (dragState.target.propStatus.status === 'keyframed') {
+                    setDragOverrides(dragState.target.nodePath, scaleFieldKey, remotion_1.Internals.makeKeyframedDragOverride({
+                        status: dragState.target.propStatus,
+                        frame: dragState.sourceFrame,
+                        value,
+                    }));
+                }
+                else {
+                    setDragOverrides(dragState.target.nodePath, scaleFieldKey, remotion_1.Internals.makeStaticDragOverride(value));
+                }
             }
         };
         const onPointerUp = () => {
             window.removeEventListener('pointermove', onPointerMove);
             window.removeEventListener('pointerup', onPointerUp);
             window.removeEventListener('pointercancel', onPointerUp);
+            (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
             onDraggingChange(false);
             const changes = (0, exports.getSelectedOutlineScaleDragChanges)({
                 dragStates,
@@ -1110,15 +1302,33 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
                 });
                 return;
             }
-            (0, save_sequence_prop_1.saveSequenceProps)({
-                changes,
-                setPropStatuses,
-                clientId: scaleDrag.clientId,
-                undoLabel: changes.length > 1 ? 'Scale selected sequences' : 'Scale sequence',
-                redoLabel: changes.length > 1
-                    ? 'Scale selected sequences back'
-                    : 'Scale sequence back',
-            })
+            const staticChanges = changes.filter((change) => change.type === 'static');
+            const keyframedChanges = changes.filter((change) => change.type === 'keyframed');
+            Promise.all([
+                staticChanges.length > 0
+                    ? (0, save_sequence_prop_1.saveSequenceProps)({
+                        changes: staticChanges,
+                        setPropStatuses,
+                        clientId: scaleDrag.clientId,
+                        undoLabel: changes.length > 1
+                            ? 'Scale selected sequences'
+                            : 'Scale sequence',
+                        redoLabel: changes.length > 1
+                            ? 'Scale selected sequences back'
+                            : 'Scale sequence back',
+                    })
+                    : Promise.resolve(),
+                ...keyframedChanges.map((change) => (0, call_add_keyframe_1.callAddSequenceKeyframe)({
+                    fileName: change.fileName,
+                    nodePath: change.nodePath,
+                    fieldKey: change.fieldKey,
+                    sourceFrame: change.sourceFrame,
+                    value: change.value,
+                    schema: change.schema,
+                    setPropStatuses,
+                    clientId: change.clientId,
+                })),
+            ])
                 .catch((err) => {
                 (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${err instanceof Error ? err.message : String(err)}`, 4000);
             })
@@ -1198,7 +1408,11 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         onDraggingChange(true);
         (0, ForceSpecificCursor_1.forceSpecificCursor)(cornerInfo.cursor);
         const svgRect = svg.getBoundingClientRect();
-        const center = svgPointToClientPoint(cornerInfo.center, svgRect);
+        const center = svgPointToClientPoint((0, exports.getSelectedOutlineRotationPivot)({
+            dimensions: outline.dimensions,
+            points: outline.points,
+            transformOriginValue: rotationDrag.transformOriginValue,
+        }), svgRect);
         const dragStates = (0, exports.getSelectedOutlineRotationDragStates)({
             dragTargets: selected ? allRotationDragTargets : [rotationDrag],
             getDragOverrides,
@@ -1306,6 +1520,8 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         cornerInfo,
         getDragOverrides,
         onDraggingChange,
+        outline.dimensions,
+        outline.points,
         onSelect,
         rotationDrag,
         selected,
@@ -1330,6 +1546,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
 };
 const SelectedOutlineElement = ({ allDragTargets, allRotationDragTargets, allScaleDragTargets, dragging, hovered, outline, onDraggingChange, onHoverChange, onSelect, scale, target, }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const updateResolvedStackTrace = (0, react_1.useContext)(remotion_1.Internals.SequenceStackTracesUpdateContext);
     const onContextMenuOpen = react_1.default.useCallback(async () => {
         if (target === undefined || previewServerState.type !== 'connected') {
@@ -1356,6 +1573,7 @@ const SelectedOutlineElement = ({ allDragTargets, allRotationDragTargets, allSca
             root: window.remotion_cwd,
         });
         const editorName = window.remotion_editorName;
+        const disableInteractivityDisabled = !target.sequence.showInTimeline;
         return [
             editorName
                 ? {
@@ -1402,8 +1620,38 @@ const SelectedOutlineElement = ({ allDragTargets, allRotationDragTargets, allSca
                 subMenu: null,
                 value: 'copy-outline-file-location',
             },
+            {
+                type: 'item',
+                id: 'disable-outline-interactivity',
+                keyHint: null,
+                label: 'Disable interactivity',
+                leftItem: null,
+                disabled: disableInteractivityDisabled,
+                onClick: () => {
+                    if (disableInteractivityDisabled ||
+                        previewServerState.type !== 'connected') {
+                        return;
+                    }
+                    const nodePath = target.nodePathInfo.sequenceSubscriptionKey;
+                    (0, disable_sequence_interactivity_1.disableSequenceInteractivity)({
+                        fileName: nodePath.absolutePath,
+                        nodePath,
+                        setPropStatuses,
+                        clientId: previewServerState.clientId,
+                    });
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'disable-outline-interactivity',
+            },
         ].filter(no_react_1.NoReactInternals.truthy);
-    }, [onSelect, previewServerState.type, target, updateResolvedStackTrace]);
+    }, [
+        onSelect,
+        previewServerState,
+        setPropStatuses,
+        target,
+        updateResolvedStackTrace,
+    ]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, scale: scale, target: target }), (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
                 ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine, { allScaleDragTargets: allScaleDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, edge: edge, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, edge)))
@@ -1419,13 +1667,18 @@ const SelectedOutlineOverlay = ({ scale }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { getScaleLockState } = (0, react_1.useContext)(scale_lock_1.ScaleLockContext);
     const { editorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
+    const { frameBack, frameForward, getCurrentFrame, seek } = player_1.PlayerInternals.usePlayer();
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const [outlines, setOutlines] = (0, react_1.useState)([]);
     const [hoveredOutlineKey, setHoveredOutlineKey] = (0, react_1.useState)(null);
     const [draggingOutline, setDraggingOutline] = (0, react_1.useState)(false);
     const overlayRef = (0, react_1.useRef)(null);
+    const keyboardNudgeSessionRef = (0, react_1.useRef)(null);
+    const saveKeyboardNudgeSessionRef = (0, react_1.useRef)(() => undefined);
     const onDraggingChange = react_1.default.useCallback((dragging) => {
         setDraggingOutline(dragging);
         if (dragging) {
@@ -1448,7 +1701,7 @@ const SelectedOutlineOverlay = ({ scale }) => {
             overrideIdsToNodePaths: overrideIdToNodePathMappings,
         }).map(({ key, keyframeDisplayOffset, nodePathInfo, sequence }) => {
             var _a;
-            var _b, _c, _d, _e, _f, _g, _h, _j;
+            var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             if (sequence.refForOutline === null) {
                 throw new Error('Expected sequence to have a ref for outline');
             }
@@ -1465,6 +1718,18 @@ const SelectedOutlineOverlay = ({ scale }) => {
             const rotationPropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[rotateFieldKey];
             const transformOriginFieldSchema = controls === null || controls === void 0 ? void 0 : controls.schema[transformOriginFieldKey];
             const transformOriginPropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[transformOriginFieldKey];
+            const rotationSourceFrame = timelinePosition - keyframeDisplayOffset;
+            const transformOriginValueForRotation = (transformOriginFieldSchema === null || transformOriginFieldSchema === void 0 ? void 0 : transformOriginFieldSchema.type) === 'transform-origin' &&
+                ((transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'static' ||
+                    (transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'keyframed')
+                ? String((_c = remotion_1.Internals.getEffectiveVisualModeValue({
+                    propStatus: transformOriginPropStatus,
+                    dragOverrideValue: ((_b = getDragOverrides(nodePath)) !== null && _b !== void 0 ? _b : {})[transformOriginFieldKey],
+                    defaultValue: transformOriginFieldSchema.default,
+                    frame: rotationSourceFrame,
+                    shouldResortToDefaultValueIfUndefined: true,
+                })) !== null && _c !== void 0 ? _c : transformOriginFieldSchema.default)
+                : '50% 50%';
             const canDragStatus = (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'static' ||
                 ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'keyframed' &&
                     propStatus.interpolationFunction === 'interpolate');
@@ -1475,10 +1740,13 @@ const SelectedOutlineOverlay = ({ scale }) => {
                 controls !== null &&
                 (fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) === 'translate' &&
                 canDragStatus;
+            const canScaleDragStatus = (scalePropStatus === null || scalePropStatus === void 0 ? void 0 : scalePropStatus.status) === 'static' ||
+                ((scalePropStatus === null || scalePropStatus === void 0 ? void 0 : scalePropStatus.status) === 'keyframed' &&
+                    scalePropStatus.interpolationFunction === 'interpolate');
             const canScaleDrag = previewServerState.type === 'connected' &&
                 controls !== null &&
                 (scaleFieldSchema === null || scaleFieldSchema === void 0 ? void 0 : scaleFieldSchema.type) === 'scale' &&
-                (scalePropStatus === null || scalePropStatus === void 0 ? void 0 : scalePropStatus.status) === 'static';
+                canScaleDragStatus;
             const canRotationDrag = previewServerState.type === 'connected' &&
                 controls !== null &&
                 (rotationFieldSchema === null || rotationFieldSchema === void 0 ? void 0 : rotationFieldSchema.type) === 'rotation-css' &&
@@ -1534,6 +1802,7 @@ const SelectedOutlineOverlay = ({ scale }) => {
                         clientId: previewServerState.clientId,
                         fieldDefault: scaleFieldSchema.default,
                         fieldSchema: scaleFieldSchema,
+                        keyframeDisplayOffset,
                         linked: getScaleLockState({
                             nodePath,
                             fieldKey: scaleFieldKey,
@@ -1563,6 +1832,7 @@ const SelectedOutlineOverlay = ({ scale }) => {
                         keyframeDisplayOffset,
                         nodePath,
                         schema: controls.schema,
+                        transformOriginValue: transformOriginValueForRotation,
                     }
                     : null,
                 transformOriginDrag: canTransformOriginDrag
@@ -1572,48 +1842,48 @@ const SelectedOutlineOverlay = ({ scale }) => {
                         nodePath,
                         originDefault: transformOriginFieldSchema.default,
                         originPropStatus: transformOriginPropStatus,
-                        originValue: String((_c = remotion_1.Internals.getEffectiveVisualModeValue({
+                        originValue: String((_e = remotion_1.Internals.getEffectiveVisualModeValue({
                             propStatus: transformOriginPropStatus,
-                            dragOverrideValue: ((_b = getDragOverrides(nodePath)) !== null && _b !== void 0 ? _b : {})[transformOriginFieldKey],
+                            dragOverrideValue: ((_d = getDragOverrides(nodePath)) !== null && _d !== void 0 ? _d : {})[transformOriginFieldKey],
                             defaultValue: transformOriginFieldSchema.default,
                             frame: transformOriginSourceFrame,
                             shouldResortToDefaultValueIfUndefined: true,
-                        })) !== null && _c !== void 0 ? _c : transformOriginFieldSchema.default),
+                        })) !== null && _e !== void 0 ? _e : transformOriginFieldSchema.default),
                         rotateValue: String((rotationPropStatus === null || rotationPropStatus === void 0 ? void 0 : rotationPropStatus.status) === 'static' ||
                             (rotationPropStatus === null || rotationPropStatus === void 0 ? void 0 : rotationPropStatus.status) === 'keyframed'
-                            ? ((_e = remotion_1.Internals.getEffectiveVisualModeValue({
+                            ? ((_g = remotion_1.Internals.getEffectiveVisualModeValue({
                                 propStatus: rotationPropStatus,
-                                dragOverrideValue: ((_d = getDragOverrides(nodePath)) !== null && _d !== void 0 ? _d : {})[rotateFieldKey],
+                                dragOverrideValue: ((_f = getDragOverrides(nodePath)) !== null && _f !== void 0 ? _f : {})[rotateFieldKey],
                                 defaultValue: (rotationFieldSchema === null || rotationFieldSchema === void 0 ? void 0 : rotationFieldSchema.type) === 'rotation-css'
                                     ? rotationFieldSchema.default
                                     : '0deg',
                                 frame: transformOriginSourceFrame,
                                 shouldResortToDefaultValueIfUndefined: true,
-                            })) !== null && _e !== void 0 ? _e : '0deg')
+                            })) !== null && _g !== void 0 ? _g : '0deg')
                             : '0deg'),
                         scaleValue: (scalePropStatus === null || scalePropStatus === void 0 ? void 0 : scalePropStatus.status) === 'static' ||
                             (scalePropStatus === null || scalePropStatus === void 0 ? void 0 : scalePropStatus.status) === 'keyframed'
-                            ? String((_g = remotion_1.Internals.getEffectiveVisualModeValue({
+                            ? String((_j = remotion_1.Internals.getEffectiveVisualModeValue({
                                 propStatus: scalePropStatus,
-                                dragOverrideValue: ((_f = getDragOverrides(nodePath)) !== null && _f !== void 0 ? _f : {})[scaleFieldKey],
+                                dragOverrideValue: ((_h = getDragOverrides(nodePath)) !== null && _h !== void 0 ? _h : {})[scaleFieldKey],
                                 defaultValue: (scaleFieldSchema === null || scaleFieldSchema === void 0 ? void 0 : scaleFieldSchema.type) === 'scale'
                                     ? scaleFieldSchema.default
                                     : 1,
                                 frame: transformOriginSourceFrame,
                                 shouldResortToDefaultValueIfUndefined: true,
-                            })) !== null && _g !== void 0 ? _g : 1)
+                            })) !== null && _j !== void 0 ? _j : 1)
                             : '1',
                         schema: controls.schema,
                         sourceFrame: transformOriginSourceFrame,
                         translateDefault: fieldSchema.default,
                         translatePropStatus: propStatus,
-                        translateValue: String((_j = remotion_1.Internals.getEffectiveVisualModeValue({
+                        translateValue: String((_l = remotion_1.Internals.getEffectiveVisualModeValue({
                             propStatus,
-                            dragOverrideValue: ((_h = getDragOverrides(nodePath)) !== null && _h !== void 0 ? _h : {})[translateFieldKey],
+                            dragOverrideValue: ((_k = getDragOverrides(nodePath)) !== null && _k !== void 0 ? _k : {})[translateFieldKey],
                             defaultValue: fieldSchema.default,
                             frame: transformOriginSourceFrame,
                             shouldResortToDefaultValueIfUndefined: true,
-                        })) !== null && _j !== void 0 ? _j : fieldSchema.default),
+                        })) !== null && _l !== void 0 ? _l : fieldSchema.default),
                     }
                     : null,
                 uvHandles: containsSelection
@@ -1661,6 +1931,227 @@ const SelectedOutlineOverlay = ({ scale }) => {
             ? [target.rotationDrag]
             : []);
     }, [outlineTargets]);
+    const saveKeyboardNudgeSession = (0, react_1.useCallback)(() => {
+        const session = keyboardNudgeSessionRef.current;
+        if (session === null) {
+            return;
+        }
+        keyboardNudgeSessionRef.current = null;
+        const changes = (0, exports.getSelectedOutlineDragChanges)({
+            dragStates: session.dragStates,
+            lastValues: session.lastValues,
+        });
+        if (changes.length === 0) {
+            clearSelectedOutlineDragOverrides({
+                clearDragOverrides,
+                dragStates: session.dragStates,
+            });
+            return;
+        }
+        const staticChanges = changes.filter((change) => change.type === 'static');
+        const keyframedChanges = changes.filter((change) => change.type === 'keyframed');
+        Promise.all([
+            staticChanges.length > 0
+                ? (0, save_sequence_prop_1.saveSequenceProps)({
+                    changes: staticChanges,
+                    setPropStatuses,
+                    clientId: session.clientId,
+                    undoLabel: changes.length > 1 ? 'Move selected sequences' : 'Move sequence',
+                    redoLabel: changes.length > 1
+                        ? 'Move selected sequences back'
+                        : 'Move sequence back',
+                })
+                : Promise.resolve(),
+            ...keyframedChanges.map((change) => (0, call_add_keyframe_1.callAddSequenceKeyframe)({
+                fileName: change.fileName,
+                nodePath: change.nodePath,
+                fieldKey: change.fieldKey,
+                sourceFrame: change.sourceFrame,
+                value: change.value,
+                schema: change.schema,
+                setPropStatuses,
+                clientId: change.clientId,
+            })),
+        ])
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${err instanceof Error ? err.message : String(err)}`, 4000);
+        })
+            .finally(() => {
+            clearSelectedOutlineDragOverrides({
+                clearDragOverrides,
+                dragStates: session.dragStates,
+            });
+        });
+    }, [clearDragOverrides, setPropStatuses]);
+    (0, react_1.useEffect)(() => {
+        saveKeyboardNudgeSessionRef.current = saveKeyboardNudgeSession;
+    }, [saveKeyboardNudgeSession]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            saveKeyboardNudgeSessionRef.current();
+        };
+    }, []);
+    const seekWithArrowKey = (0, react_1.useCallback)((event, direction) => {
+        if (direction === 'up' || direction === 'down') {
+            return;
+        }
+        event.preventDefault();
+        if (direction === 'left') {
+            if (event.altKey) {
+                seek(0);
+                (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                    direction: 'fit-left',
+                    durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                    frame: 0,
+                });
+            }
+            else if (event.shiftKey) {
+                frameBack((0, imperative_state_1.getCurrentFps)());
+                (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                    direction: 'fit-left',
+                    durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                    frame: Math.max(0, getCurrentFrame() - (0, imperative_state_1.getCurrentFps)()),
+                });
+            }
+            else {
+                frameBack(1);
+                (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                    direction: 'fit-left',
+                    durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                    frame: Math.max(0, getCurrentFrame() - 1),
+                });
+            }
+            return;
+        }
+        if (event.altKey) {
+            seek((0, imperative_state_1.getCurrentDuration)() - 1);
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-right',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)() - 1,
+                frame: (0, imperative_state_1.getCurrentDuration)() - 1,
+            });
+        }
+        else if (event.shiftKey) {
+            frameForward((0, imperative_state_1.getCurrentFps)());
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-right',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, getCurrentFrame() + (0, imperative_state_1.getCurrentFps)()),
+            });
+        }
+        else {
+            frameForward(1);
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-right',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, getCurrentFrame() + 1),
+            });
+        }
+    }, [frameBack, frameForward, getCurrentFrame, seek]);
+    const onArrowKeyDown = (0, react_1.useCallback)((event) => {
+        var _a;
+        const direction = getSelectedOutlineKeyboardNudgeDirection(event.key);
+        if (direction === null) {
+            return;
+        }
+        if (selectedItems.length === 0 || allDragTargets.length === 0) {
+            seekWithArrowKey(event, direction);
+            return;
+        }
+        if (event.altKey) {
+            seekWithArrowKey(event, direction);
+            return;
+        }
+        event.preventDefault();
+        const activeSession = (_a = keyboardNudgeSessionRef.current) !== null && _a !== void 0 ? _a : (() => {
+            const [firstDragTarget] = allDragTargets;
+            if (firstDragTarget === undefined) {
+                throw new Error('Expected a drag target');
+            }
+            return {
+                clientId: firstDragTarget.clientId,
+                deltaX: 0,
+                deltaY: 0,
+                dragStates: getSelectedOutlineDragStates({
+                    dragTargets: allDragTargets,
+                    getDragOverrides,
+                    timelinePosition,
+                }),
+                lastValues: new Map(),
+            };
+        })();
+        keyboardNudgeSessionRef.current = activeSession;
+        const nextDeltas = (0, exports.getSelectedOutlineKeyboardNudgeDeltas)({
+            deltaX: activeSession.deltaX,
+            deltaY: activeSession.deltaY,
+            direction,
+            shiftKey: event.shiftKey,
+        });
+        activeSession.deltaX = nextDeltas.deltaX;
+        activeSession.deltaY = nextDeltas.deltaY;
+        const lastValues = (0, exports.getSelectedOutlineDragValues)({
+            dragStates: activeSession.dragStates,
+            deltaX: activeSession.deltaX,
+            deltaY: activeSession.deltaY,
+        });
+        activeSession.lastValues = lastValues;
+        for (const dragState of activeSession.dragStates) {
+            const value = lastValues.get(dragState.key);
+            if (value === undefined) {
+                throw new Error('Expected drag value to be available');
+            }
+            if (dragState.target.propStatus.status === 'keyframed') {
+                setDragOverrides(dragState.target.nodePath, translateFieldKey, remotion_1.Internals.makeKeyframedDragOverride({
+                    status: dragState.target.propStatus,
+                    frame: dragState.sourceFrame,
+                    value,
+                }));
+            }
+            else {
+                setDragOverrides(dragState.target.nodePath, translateFieldKey, remotion_1.Internals.makeStaticDragOverride(value));
+            }
+        }
+    }, [
+        allDragTargets,
+        getDragOverrides,
+        seekWithArrowKey,
+        selectedItems.length,
+        setDragOverrides,
+        timelinePosition,
+    ]);
+    const onArrowKeyUp = (0, react_1.useCallback)((event) => {
+        const direction = getSelectedOutlineKeyboardNudgeDirection(event.key);
+        if (direction === null || keyboardNudgeSessionRef.current === null) {
+            return;
+        }
+        event.preventDefault();
+        saveKeyboardNudgeSession();
+    }, [saveKeyboardNudgeSession]);
+    (0, react_1.useEffect)(() => {
+        const keyDownBindings = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].map((key) => keybindings.registerKeybinding({
+            event: 'keydown',
+            key,
+            callback: onArrowKeyDown,
+            commandCtrlKey: false,
+            preventDefault: false,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        }));
+        const keyUpBindings = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].map((key) => keybindings.registerKeybinding({
+            event: 'keyup',
+            key,
+            callback: onArrowKeyUp,
+            commandCtrlKey: false,
+            preventDefault: false,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        }));
+        return () => {
+            for (const binding of [...keyDownBindings, ...keyUpBindings]) {
+                binding.unregister();
+            }
+        };
+    }, [keybindings, onArrowKeyDown, onArrowKeyUp, saveKeyboardNudgeSession]);
     (0, react_1.useEffect)(() => {
         if (outlineTargets.length === 0) {
             setOutlines((prevOutlines) => prevOutlines.length === 0 ? prevOutlines : []);