@remotion/studio 4.0.474 → 4.0.476

package/dist/components/SelectedOutlineOverlay.js

@@ -33,9 +33,9 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineOverlay = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineDragValues = exports.getSequencesWithSelectableOutlines = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSelectedSequenceKeys = exports.getUvCoordinateForPoint = exports.getUvHandleConnectionLines = exports.getUvHandlePosition = void 0;
-exports.constrainUv = constrainUv;
+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");
@@ -45,19 +45,34 @@ 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");
+const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
+const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+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 save_effect_prop_1 = require("./Timeline/save-effect-prop");
+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");
 const get_stack_1 = require("./Timeline/TimelineStack/get-stack");
+const transform_origin_utils_1 = require("./Timeline/transform-origin-utils");
 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,
@@ -66,188 +81,93 @@ const outlineContainer = {
 };
 const emptyContextMenuValues = [];
 const pointToString = (point) => `${point.x},${point.y}`;
-const parseUvCoordinate = (value) => {
-    if (Array.isArray(value) &&
-        value.length === 2 &&
-        value.every((item) => typeof item === 'number' && Number.isFinite(item))) {
-        return [value[0], value[1]];
-    }
-    return null;
-};
-const tuplesEqual = (left, right) => {
-    if (!Array.isArray(left) || left.length !== 2) {
-        return false;
-    }
-    return left[0] === right[0] && left[1] === right[1];
-};
-const mix = (from, to, progress) => {
-    return from + (to - from) * progress;
+const midpoint = (from, to) => {
+    return (0, selected_outline_geometry_1.mixPoint)(from, to, 0.5);
 };
-const mixPoint = (from, to, progress) => {
+const getOutlineCenter = (points) => {
+    const [tl, tr, br, bl] = points;
     return {
-        x: mix(from.x, to.x, progress),
-        y: mix(from.y, to.y, progress),
+        x: (tl.x + tr.x + br.x + bl.x) / 4,
+        y: (tl.y + tr.y + br.y + bl.y) / 4,
     };
 };
-const midpoint = (from, to) => {
-    return mixPoint(from, to, 0.5);
-};
 const dot = (left, right) => {
     return left.x * right.x + left.y * right.y;
 };
 const vectorLength = (vector) => {
     return Math.hypot(vector.x, vector.y);
 };
-const getBilinearUvHandlePosition = (points, uv) => {
-    const [tl, tr, br, bl] = points;
-    const top = mixPoint(tl, tr, uv[0]);
-    const bottom = mixPoint(bl, br, uv[0]);
-    return mixPoint(top, bottom, uv[1]);
+const vectorBetween = (from, to) => {
+    return { x: to.x - from.x, y: to.y - from.y };
 };
-const projectiveEpsilon = 0.000001;
-const getProjectiveTransform = (points) => {
-    const [tl, tr, br, bl] = points;
-    const dx1 = tr.x - br.x;
-    const dx2 = bl.x - br.x;
-    const dx3 = tl.x - tr.x + br.x - bl.x;
-    const dy1 = tr.y - br.y;
-    const dy2 = bl.y - br.y;
-    const dy3 = tl.y - tr.y + br.y - bl.y;
-    let g = 0;
-    let h = 0;
-    if (Math.abs(dx3) > projectiveEpsilon || Math.abs(dy3) > projectiveEpsilon) {
-        const determinant = dx1 * dy2 - dx2 * dy1;
-        if (Math.abs(determinant) < projectiveEpsilon) {
-            return null;
-        }
-        g = (dx3 * dy2 - dx2 * dy3) / determinant;
-        h = (dx1 * dy3 - dx3 * dy1) / determinant;
-    }
-    return {
-        a: tr.x - tl.x + g * tr.x,
-        b: bl.x - tl.x + h * bl.x,
-        c: tl.x,
-        d: tr.y - tl.y + g * tr.y,
-        e: bl.y - tl.y + h * bl.y,
-        f: tl.y,
-        g,
-        h,
-    };
+const getAngleDegrees = (from, to) => {
+    return Math.atan2(to.y - from.y, to.x - from.x) * (180 / Math.PI);
 };
-const applyProjectiveTransform = (transform, uv) => {
-    const denominator = transform.g * uv[0] + transform.h * uv[1] + 1;
-    return {
-        x: (transform.a * uv[0] + transform.b * uv[1] + transform.c) / denominator,
-        y: (transform.d * uv[0] + transform.e * uv[1] + transform.f) / denominator,
-    };
+const getSelectedOutlineRotationDeltaDegrees = ({ from, to, }) => {
+    return ((((to - from) % 360) + 540) % 360) - 180;
 };
-const getUvHandlePosition = (points, uv) => {
-    const transform = getProjectiveTransform(points);
-    return transform === null
-        ? getBilinearUvHandlePosition(points, uv)
-        : applyProjectiveTransform(transform, uv);
+exports.getSelectedOutlineRotationDeltaDegrees = getSelectedOutlineRotationDeltaDegrees;
+const normalizeRotationCursorDegrees = (rotation) => {
+    const normalizedRotation = ((rotation % 360) + 360) % 360;
+    return Number(normalizedRotation.toFixed(3));
 };
-exports.getUvHandlePosition = getUvHandlePosition;
-const getUvHandleConnectionLines = ({ handles, points, }) => {
-    const handlesByField = new Map(handles.map((handle) => [
-        `${handle.effectIndex}\u0000${handle.fieldKey}`,
-        handle,
-    ]));
-    const seenPairs = new Set();
-    const lines = [];
-    for (const handle of handles) {
-        const targetFieldKey = handle.fieldSchema.lineTo;
-        if (targetFieldKey === undefined || targetFieldKey === handle.fieldKey) {
-            continue;
-        }
-        const target = handlesByField.get(`${handle.effectIndex}\u0000${targetFieldKey}`);
-        if (target === undefined) {
-            continue;
-        }
-        const pairKey = [
-            handle.effectIndex,
-            ...[handle.fieldKey, targetFieldKey].sort(),
-        ].join('\u0000');
-        if (seenPairs.has(pairKey)) {
-            continue;
-        }
-        seenPairs.add(pairKey);
-        lines.push({
-            key: `${handle.effectIndex}-${handle.fieldKey}-${targetFieldKey}`,
-            from: (0, exports.getUvHandlePosition)(points, handle.value),
-            to: (0, exports.getUvHandlePosition)(points, target.value),
-        });
-    }
-    return lines;
+const getRotationCursor = (rotation) => {
+    const normalizedRotation = normalizeRotationCursorDegrees(rotation);
+    const transform = normalizedRotation === 0
+        ? ''
+        : `<g transform="rotate(${normalizedRotation} 32 32)">`;
+    const transformEnd = normalizedRotation === 0 ? '' : '</g>';
+    const svg = `<svg width="24" height="24" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">${transform}<g transform="scale(0.876712329)" filter="url(#filter0_d_1_14)"><path d="M10.9111 17.7687C10.3413 18.3701 10.367 19.3195 10.9684 19.8893L20.7687 29.1738C21.3701 29.7436 22.3195 29.7179 22.8893 29.1165C23.459 28.5151 23.4334 27.5657 22.832 26.996L14.1206 18.7431L22.3735 10.0316C22.9432 9.43022 22.9176 8.48082 22.3162 7.91107C21.7148 7.34133 20.7654 7.36699 20.1956 7.96839L10.9111 17.7687ZM49.3923 58.3118C49.9509 58.9235 50.8996 58.9667 51.5114 58.4081L61.481 49.3055C62.0927 48.7469 62.1359 47.7981 61.5773 47.1863C61.0187 46.5745 60.0699 46.5314 59.4581 47.09L50.5963 55.1812L42.5051 46.3194C41.9465 45.7076 40.9977 45.6645 40.386 46.2231C39.7742 46.7817 39.7311 47.7304 40.2896 48.3422L49.3923 58.3118ZM12.6747 18.7431L13 19.8893C22.1283 19.6426 30.7584 21.4283 37.8564 26.6927C44.8518 31.8809 49.734 39.8538 49 56H50.5963H51.5114C52.2774 39.1461 47.6482 30.2198 39.6436 24.2831C31.7416 18.4224 22.3717 17.2467 13 17.5L12.6747 18.7431Z" fill="black"/><path d="M19.1064 6.93652C20.2459 5.73379 22.1448 5.68278 23.3477 6.82227C24.5505 7.96181 24.6022 9.86076 23.4629 11.0635L18.7373 16.0508C26.3487 16.4239 33.9128 18.1651 40.5371 23.0781C44.7339 26.1907 48.0794 30.1189 50.2568 35.4834C51.9666 39.6958 52.9327 44.7395 53.0742 50.8867L58.4463 45.9824C59.6697 44.8654 61.5673 44.9514 62.6846 46.1748C63.8018 47.3985 63.7155 49.296 62.4922 50.4131L52.5225 59.5156C51.337 60.5979 49.5196 60.5507 48.3916 59.4346L48.2842 59.3232L39.1816 49.3535C38.0648 48.1301 38.1507 46.2324 39.374 45.1152C40.5975 43.9979 42.4961 44.0841 43.6133 45.3076L47.4756 49.5381C47.1908 44.7613 46.2876 40.9448 44.9482 37.8291C43.0666 33.4521 40.2851 30.3614 36.9629 27.8975C31.8259 24.0875 25.8071 22.1663 19.2891 21.5732L23.8633 25.9072C25.0662 27.0468 25.1178 28.9457 23.9785 30.1484C22.8746 31.3135 21.0576 31.3982 19.8516 30.3662L19.7373 30.2627L9.93652 20.9785C8.73384 19.839 8.6828 17.9401 9.82227 16.7373L19.1064 6.93652Z" stroke="white" stroke-width="3"/></g>${transformEnd}<defs><filter id="filter0_d_1_14" x="0" y="0" width="72.4696" height="72.3004" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="3.75"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_14"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_14" result="shape"/></filter></defs></svg>`;
+    return `url("data:image/svg+xml,${encodeURIComponent(svg)}") 12 12, alias`;
 };
-exports.getUvHandleConnectionLines = getUvHandleConnectionLines;
-const vectorBetween = (from, to) => {
-    return { x: to.x - from.x, y: to.y - from.y };
+const rotationCursorBaseDegrees = {
+    'top-left': 270,
+    'top-right': 0,
+    'bottom-right': 90,
+    'bottom-left': 180,
+};
+const getOutlineRotationDegrees = (points) => {
+    const [tl, tr] = points;
+    return getAngleDegrees(tl, tr);
 };
-const getBilinearUvCoordinateForPoint = (points, point) => {
+const getRotationCursorDegrees = (points, corner) => normalizeRotationCursorDegrees(getOutlineRotationDegrees(points) + rotationCursorBaseDegrees[corner]);
+const getSelectedOutlineRotationCornerInfo = (points, corner) => {
     const [tl, tr, br, bl] = points;
-    let u = 0.5;
-    let v = 0.5;
-    for (let i = 0; i < 8; i++) {
-        const current = getBilinearUvHandlePosition(points, [u, v]);
-        const errorX = current.x - point.x;
-        const errorY = current.y - point.y;
-        if (Math.abs(errorX) + Math.abs(errorY) < 0.001) {
-            break;
-        }
-        const du = {
-            x: mix(tr.x - tl.x, br.x - bl.x, v),
-            y: mix(tr.y - tl.y, br.y - bl.y, v),
-        };
-        const dv = vectorBetween(mixPoint(tl, tr, u), mixPoint(bl, br, u));
-        const determinant = du.x * dv.y - du.y * dv.x;
-        if (Math.abs(determinant) < 0.000001) {
-            break;
-        }
-        u -= (errorX * dv.y - errorY * dv.x) / determinant;
-        v -= (du.x * errorY - du.y * errorX) / determinant;
-    }
-    return [u, v];
+    const point = {
+        'top-left': tl,
+        'top-right': tr,
+        'bottom-right': br,
+        'bottom-left': bl,
+    }[corner];
+    const center = getOutlineCenter(points);
+    const cursorDegrees = getRotationCursorDegrees(points, corner);
+    return {
+        center,
+        cursor: getRotationCursor(cursorDegrees),
+        cursorDegrees,
+        point,
+    };
 };
-const getUvCoordinateForPoint = (points, point) => {
-    const transform = getProjectiveTransform(points);
-    if (transform === null) {
-        return getBilinearUvCoordinateForPoint(points, point);
+exports.getSelectedOutlineRotationCornerInfo = getSelectedOutlineRotationCornerInfo;
+const getSelectedOutlineRotationPivot = ({ dimensions, points, transformOriginValue, }) => {
+    if (dimensions === null) {
+        return getOutlineCenter(points);
     }
-    const determinant = transform.a * (transform.e - transform.f * transform.h) -
-        transform.b * (transform.d - transform.f * transform.g) +
-        transform.c * (transform.d * transform.h - transform.e * transform.g);
-    if (Math.abs(determinant) < projectiveEpsilon) {
-        return getBilinearUvCoordinateForPoint(points, point);
+    const parsed = (0, transform_origin_utils_1.parseTransformOrigin)(transformOriginValue);
+    if (parsed === null) {
+        return getOutlineCenter(points);
     }
-    const inverseA = transform.e - transform.f * transform.h;
-    const inverseB = transform.c * transform.h - transform.b;
-    const inverseC = transform.b * transform.f - transform.c * transform.e;
-    const inverseD = transform.f * transform.g - transform.d;
-    const inverseE = transform.a - transform.c * transform.g;
-    const inverseF = transform.c * transform.d - transform.a * transform.f;
-    const inverseG = transform.d * transform.h - transform.e * transform.g;
-    const inverseH = transform.b * transform.g - transform.a * transform.h;
-    const inverseI = transform.a * transform.e - transform.b * transform.d;
-    const denominator = inverseG * point.x + inverseH * point.y + inverseI;
-    if (Math.abs(denominator) < projectiveEpsilon) {
-        return getBilinearUvCoordinateForPoint(points, point);
+    const uv = (0, transform_origin_utils_1.parsedTransformOriginToUv)({
+        parsed,
+        width: dimensions.width,
+        height: dimensions.height,
+    });
+    if (uv === null) {
+        return getOutlineCenter(points);
     }
-    return [
-        (inverseA * point.x + inverseB * point.y + inverseC) / denominator,
-        (inverseD * point.x + inverseE * point.y + inverseF) / denominator,
-    ];
-};
-exports.getUvCoordinateForPoint = getUvCoordinateForPoint;
-const clamp = (value, min, max) => {
-    return Math.min(max, Math.max(min, value));
+    return (0, selected_outline_uv_1.getUvHandlePosition)(points, uv);
 };
-function constrainUv(value, schema) {
-    var _a, _b;
-    const min = (_a = schema.min) !== null && _a !== void 0 ? _a : -Infinity;
-    const max = (_b = schema.max) !== null && _b !== void 0 ? _b : Infinity;
-    return [clamp(value[0], min, max), clamp(value[1], min, max)];
-}
+exports.getSelectedOutlineRotationPivot = getSelectedOutlineRotationPivot;
 const rectToPoints = (elementRect, containerRect) => {
     const left = elementRect.left - containerRect.left;
     const top = elementRect.top - containerRect.top;
@@ -260,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
@@ -275,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',
     });
@@ -329,6 +305,31 @@ const getSelectedEffectFieldsBySequenceKey = (selectedItems) => {
     return selectedEffects;
 };
 exports.getSelectedEffectFieldsBySequenceKey = getSelectedEffectFieldsBySequenceKey;
+const getSelectedTransformOriginInfo = (selectedItems) => {
+    if (selectedItems.length !== 1) {
+        return null;
+    }
+    const [selectedItem] = selectedItems;
+    if (selectedItem.type === 'sequence-prop' &&
+        selectedItem.key === transformOriginFieldKey) {
+        return {
+            sequenceKey: (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(selectedItem.nodePathInfo),
+            displayFrame: null,
+        };
+    }
+    if (selectedItem.type !== 'keyframe') {
+        return null;
+    }
+    const field = (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(selectedItem.nodePathInfo.auxiliaryKeys);
+    if ((field === null || field === void 0 ? void 0 : field.type) !== 'sequence' ||
+        field.fieldKey !== transformOriginFieldKey) {
+        return null;
+    }
+    return {
+        sequenceKey: (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(selectedItem.nodePathInfo),
+        displayFrame: selectedItem.frame,
+    };
+};
 const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths, }) => {
     return (0, calculate_timeline_1.calculateTimeline)({
         sequences: [...sequences],
@@ -338,7 +339,8 @@ const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths,
         if (track.nodePathInfo === null) {
             return false;
         }
-        return track.nodePathInfo.auxiliaryKeys.length === 0;
+        return (track.sequence.showInTimeline &&
+            track.nodePathInfo.auxiliaryKeys.length === 0);
     })
         .filter((track) => track.sequence.refForOutline !== null)
         .sort((a, b) => a.depth - b.depth)
@@ -356,71 +358,6 @@ const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths,
     });
 };
 exports.getSequencesWithSelectableOutlines = getSequencesWithSelectableOutlines;
-const getSelectedUvHandles = ({ propStatuses, clientId, getEffectDragOverrides, nodePath, selectedEffects, sequence, }) => {
-    if (clientId === null || selectedEffects === undefined) {
-        return [];
-    }
-    const handles = [];
-    for (const [effectIndex, selectedFields] of selectedEffects) {
-        const effect = sequence.effects[effectIndex];
-        if (!effect) {
-            continue;
-        }
-        const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
-            propStatuses,
-            nodePath,
-            effectIndex,
-        });
-        if (effectStatus.type !== 'can-update-effect') {
-            continue;
-        }
-        const dragOverrides = getEffectDragOverrides(nodePath, effectIndex);
-        const activeSchema = remotion_1.Internals.flattenActiveSchema(effect.schema, (key) => {
-            const dragOverride = remotion_1.Internals.getStaticDragOverrideValue(dragOverrides[key]);
-            if (dragOverride !== undefined) {
-                return dragOverride;
-            }
-            const propStatus = effectStatus.props[key];
-            if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'static') {
-                return undefined;
-            }
-            return propStatus.codeValue;
-        });
-        for (const [fieldKey, fieldSchema] of Object.entries(activeSchema)) {
-            if (fieldSchema.type !== 'uv-coordinate' ||
-                (!selectedFields.allFields && !selectedFields.fieldKeys.has(fieldKey))) {
-                continue;
-            }
-            const propStatus = effectStatus.props[fieldKey];
-            if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'static') {
-                continue;
-            }
-            const dragOverrideValue = dragOverrides[fieldKey];
-            const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
-                propStatus,
-                dragOverrideValue,
-                defaultValue: fieldSchema.default,
-                shouldResortToDefaultValueIfUndefined: true,
-            });
-            const value = parseUvCoordinate(effectiveValue);
-            if (value === null) {
-                continue;
-            }
-            handles.push({
-                clientId,
-                propStatus,
-                effectIndex,
-                fieldDefault: fieldSchema.default,
-                fieldKey,
-                fieldSchema,
-                nodePath,
-                schema: effect.schema,
-                value,
-            });
-        }
-    }
-    return handles;
-};
 const measureOutlines = (container, targets) => {
     const containerRect = container.getBoundingClientRect();
     const outlines = [];
@@ -433,11 +370,26 @@ const measureOutlines = (container, targets) => {
         if (points === null) {
             continue;
         }
-        outlines.push({ key: target.key, points });
+        outlines.push({
+            key: target.key,
+            dimensions: element instanceof HTMLElement
+                ? {
+                    width: element.offsetWidth,
+                    height: element.offsetHeight,
+                }
+                : element instanceof SVGSVGElement
+                    ? {
+                        width: element.width.baseVal.value,
+                        height: element.height.baseVal.value,
+                    }
+                    : null,
+            points,
+        });
     }
     return outlines;
 };
 const outlinesAreEqual = (a, b) => {
+    var _a, _b, _c, _d;
     if (a.length !== b.length) {
         return false;
     }
@@ -445,6 +397,10 @@ const outlinesAreEqual = (a, b) => {
         if (a[i].key !== b[i].key) {
             return false;
         }
+        if (((_a = a[i].dimensions) === null || _a === void 0 ? void 0 : _a.width) !== ((_b = b[i].dimensions) === null || _b === void 0 ? void 0 : _b.width) ||
+            ((_c = a[i].dimensions) === null || _c === void 0 ? void 0 : _c.height) !== ((_d = b[i].dimensions) === null || _d === void 0 ? void 0 : _d.height)) {
+            return false;
+        }
         for (let j = 0; j < a[i].points.length; j++) {
             if (Math.abs(a[i].points[j].x - b[i].points[j].x) > 0.01 ||
                 Math.abs(a[i].points[j].y - b[i].points[j].y) > 0.01) {
@@ -486,6 +442,20 @@ const getSelectedOutlineDragValues = ({ dragStates, deltaX, deltaY, }) => {
     ]));
 };
 exports.getSelectedOutlineDragValues = getSelectedOutlineDragValues;
+const applySelectedOutlineDragAxisLock = ({ deltaX, deltaY, axisLocked, }) => {
+    if (!axisLocked) {
+        return { deltaX, deltaY };
+    }
+    if (Math.abs(deltaX) >= Math.abs(deltaY)) {
+        return { deltaX, deltaY: 0 };
+    }
+    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) {
@@ -530,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 = {
@@ -555,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);
@@ -571,6 +559,7 @@ const getSelectedOutlineScaleDragStates = ({ dragTargets, getDragOverrides, }) =
                 ? JSON.stringify(target.fieldDefault)
                 : null,
             key: remotion_1.Internals.makeSequencePropsSubscriptionKey(target.nodePath),
+            sourceFrame,
             startX,
             startY,
             startZ,
@@ -584,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,
@@ -597,8 +590,10 @@ const getSelectedOutlineScaleDragValues = ({ axis, dragStates, scaleFactor, }) =
                 max,
             })
             : axis === 'x'
-                ? [clamp(newValue, min, max), baseY]
-                : [baseX, clamp(newValue, min, max)];
+                ? [(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]),
@@ -607,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 !==
@@ -618,33 +635,375 @@ const getSelectedOutlineScaleDragChanges = ({ dragStates, lastValues, }) => {
             !(dragState.defaultValue === stringifiedValue &&
                 dragState.target.propStatus.codeValue === undefined);
         if (!shouldSave) {
-            return [];
+            continue;
         }
+        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, }) => {
+    return dragTargets.map((target) => {
+        var _a;
+        const dragOverrideValue = ((_a = getDragOverrides(target.nodePath)) !== null && _a !== void 0 ? _a : {})[rotateFieldKey];
+        const sourceFrame = timelinePosition - target.keyframeDisplayOffset;
+        const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
+            propStatus: target.propStatus,
+            dragOverrideValue,
+            defaultValue: target.fieldDefault,
+            frame: sourceFrame,
+            shouldResortToDefaultValueIfUndefined: true,
+        });
+        return {
+            defaultValue: target.fieldDefault !== undefined
+                ? JSON.stringify(target.fieldDefault)
+                : null,
+            key: remotion_1.Internals.makeSequencePropsSubscriptionKey(target.nodePath),
+            sourceFrame,
+            startDegrees: (0, timeline_rotation_utils_1.parseCssRotationToDegrees)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0deg')),
+            target,
+        };
+    });
+};
+exports.getSelectedOutlineRotationDragStates = getSelectedOutlineRotationDragStates;
+const getSelectedOutlineRotationDragValues = ({ dragStates, 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, }) => {
+    const changes = [];
+    for (const dragState of dragStates) {
+        const value = lastValues.get(dragState.key);
+        if (value === undefined) {
+            continue;
+        }
+        if (dragState.target.propStatus.status === 'keyframed') {
+            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;
+            }
+            changes.push({
+                type: 'keyframed',
                 fileName: dragState.target.nodePath.absolutePath,
                 nodePath: dragState.target.nodePath,
-                fieldKey: scaleFieldKey,
+                fieldKey: rotateFieldKey,
+                sourceFrame: dragState.sourceFrame,
                 value,
-                defaultValue: dragState.defaultValue,
                 schema: dragState.target.schema,
-            },
-        ];
-    });
+                clientId: dragState.target.clientId,
+            });
+            continue;
+        }
+        const stringifiedValue = JSON.stringify(value);
+        const shouldSave = value !== dragState.target.propStatus.codeValue &&
+            !(dragState.defaultValue === stringifiedValue &&
+                dragState.target.propStatus.codeValue === undefined);
+        if (!shouldSave) {
+            continue;
+        }
+        changes.push({
+            type: 'static',
+            fileName: dragState.target.nodePath.absolutePath,
+            nodePath: dragState.target.nodePath,
+            fieldKey: rotateFieldKey,
+            value,
+            defaultValue: dragState.defaultValue,
+            schema: dragState.target.schema,
+        });
+    }
+    return changes;
 };
-exports.getSelectedOutlineScaleDragChanges = getSelectedOutlineScaleDragChanges;
+exports.getSelectedOutlineRotationDragChanges = getSelectedOutlineRotationDragChanges;
 const clearSelectedOutlineDragOverrides = ({ clearDragOverrides, dragStates, }) => {
     for (const dragState of 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);
     }
 };
+const clearSelectedOutlineRotationDragOverrides = ({ clearDragOverrides, dragStates, }) => {
+    for (const dragState of dragStates) {
+        clearDragOverrides(dragState.target.nodePath);
+    }
+};
+const parseCssRotationToRadians = (value) => {
+    const match = value
+        .trim()
+        .match(/^([+-]?(?:\d+\.?\d*|\.\d+))(deg|rad|turn|grad)$/);
+    if (!match) {
+        return null;
+    }
+    const number = Number(match[1]);
+    if (!Number.isFinite(number)) {
+        return null;
+    }
+    if (match[2] === 'rad') {
+        return number;
+    }
+    if (match[2] === 'turn') {
+        return number * Math.PI * 2;
+    }
+    if (match[2] === 'grad') {
+        return (number / 400) * Math.PI * 2;
+    }
+    return (number / 180) * Math.PI;
+};
+const compensateTranslateForTransformOrigin = ({ startTranslate, deltaOrigin, rotate, scale, }) => {
+    const cos = Math.cos(rotate);
+    const sin = Math.sin(rotate);
+    const matrixA = cos * scale[0];
+    const matrixB = sin * scale[0];
+    const matrixC = -sin * scale[1];
+    const matrixD = cos * scale[1];
+    const transformedDeltaX = matrixA * deltaOrigin[0] + matrixC * deltaOrigin[1];
+    const transformedDeltaY = matrixB * deltaOrigin[0] + matrixD * deltaOrigin[1];
+    const compensationX = deltaOrigin[0] - transformedDeltaX;
+    const compensationY = deltaOrigin[1] - transformedDeltaY;
+    return [startTranslate[0] - compensationX, startTranslate[1] - compensationY];
+};
+exports.compensateTranslateForTransformOrigin = compensateTranslateForTransformOrigin;
+const uvsEqual = (left, right) => Math.abs(left[0] - right[0]) < 0.000001 &&
+    Math.abs(left[1] - right[1]) < 0.000001;
+const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, target }) => {
+    var _a;
+    const { setDragOverrides, clearDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const transformOriginDrag = (_a = target === null || target === void 0 ? void 0 : target.transformOriginDrag) !== null && _a !== void 0 ? _a : null;
+    const parsed = (0, react_1.useMemo)(() => transformOriginDrag === null
+        ? null
+        : (0, transform_origin_utils_1.parseTransformOrigin)(transformOriginDrag.originValue), [transformOriginDrag]);
+    const uv = (0, react_1.useMemo)(() => {
+        if (parsed === null || outline.dimensions === null) {
+            return null;
+        }
+        return (0, transform_origin_utils_1.parsedTransformOriginToUv)({
+            parsed,
+            width: outline.dimensions.width,
+            height: outline.dimensions.height,
+        });
+    }, [outline.dimensions, parsed]);
+    const position = (0, react_1.useMemo)(() => (uv === null ? null : (0, selected_outline_uv_1.getUvHandlePosition)(outline.points, uv)), [outline.points, uv]);
+    const onPointerDown = react_1.default.useCallback((event) => {
+        if (event.button !== 0 ||
+            transformOriginDrag === null ||
+            parsed === null ||
+            uv === null ||
+            outline.dimensions === null) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const svg = event.currentTarget.ownerSVGElement;
+        if (svg === null) {
+            return;
+        }
+        const rotation = parseCssRotationToRadians(transformOriginDrag.rotateValue);
+        if (rotation === null) {
+            return;
+        }
+        const { dimensions } = outline;
+        if (dimensions === null) {
+            return;
+        }
+        const [scaleX, scaleY] = no_react_1.NoReactInternals.parseScaleValue(transformOriginDrag.scaleValue);
+        const startTranslate = (0, timeline_translate_utils_1.parseTranslate)(transformOriginDrag.translateValue);
+        const svgRect = svg.getBoundingClientRect();
+        const defaultOrigin = transformOriginDrag.originDefault !== undefined
+            ? JSON.stringify(transformOriginDrag.originDefault)
+            : null;
+        const defaultTranslate = transformOriginDrag.translateDefault !== undefined
+            ? JSON.stringify(transformOriginDrag.translateDefault)
+            : null;
+        let last = null;
+        onDraggingChange(true);
+        (0, ForceSpecificCursor_1.forceSpecificCursor)('crosshair');
+        const updateFromPointerEvent = (pointerEvent) => {
+            const point = {
+                x: pointerEvent.clientX - svgRect.left,
+                y: pointerEvent.clientY - svgRect.top,
+            };
+            const nextUv = (0, selected_outline_uv_1.getUvCoordinateForPoint)(outline.points, point);
+            const deltaOrigin = [
+                (nextUv[0] - uv[0]) * dimensions.width,
+                (nextUv[1] - uv[1]) * dimensions.height,
+            ];
+            const [nextTranslateX, nextTranslateY] = (0, exports.compensateTranslateForTransformOrigin)({
+                startTranslate,
+                deltaOrigin,
+                rotate: rotation,
+                scale: [scaleX, scaleY],
+            });
+            const origin = (0, transform_origin_utils_1.serializeTransformOrigin)({
+                uv: nextUv,
+                z: parsed.z,
+            });
+            const translate = (0, timeline_translate_utils_1.serializeTranslate)(nextTranslateX, nextTranslateY);
+            last = { uv: nextUv, origin, translate };
+            setDragOverrides(transformOriginDrag.nodePath, transformOriginFieldKey, transformOriginDrag.originPropStatus.status === 'keyframed'
+                ? remotion_1.Internals.makeKeyframedDragOverride({
+                    status: transformOriginDrag.originPropStatus,
+                    frame: transformOriginDrag.sourceFrame,
+                    value: origin,
+                })
+                : remotion_1.Internals.makeStaticDragOverride(origin));
+            setDragOverrides(transformOriginDrag.nodePath, translateFieldKey, transformOriginDrag.translatePropStatus.status === 'keyframed'
+                ? remotion_1.Internals.makeKeyframedDragOverride({
+                    status: transformOriginDrag.translatePropStatus,
+                    frame: transformOriginDrag.sourceFrame,
+                    value: translate,
+                })
+                : remotion_1.Internals.makeStaticDragOverride(translate));
+        };
+        updateFromPointerEvent(event);
+        const onPointerMove = (moveEvent) => {
+            moveEvent.preventDefault();
+            updateFromPointerEvent(moveEvent);
+        };
+        const onPointerUp = () => {
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+            window.removeEventListener('pointercancel', onPointerUp);
+            (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+            onDraggingChange(false);
+            if (last === null || uvsEqual(last.uv, uv)) {
+                clearDragOverrides(transformOriginDrag.nodePath);
+                return;
+            }
+            const originChanged = last.origin !== transformOriginDrag.originValue;
+            const translateChanged = last.translate !== transformOriginDrag.translateValue;
+            if (!originChanged && !translateChanged) {
+                clearDragOverrides(transformOriginDrag.nodePath);
+                return;
+            }
+            const shouldSaveAsKeyframes = transformOriginDrag.originPropStatus.status === 'keyframed' ||
+                transformOriginDrag.translatePropStatus.status === 'keyframed';
+            const promise = shouldSaveAsKeyframes
+                ? (0, call_add_keyframe_1.callAddKeyframes)({
+                    sequenceKeyframes: [
+                        originChanged
+                            ? {
+                                fileName: transformOriginDrag.nodePath.absolutePath,
+                                nodePath: transformOriginDrag.nodePath,
+                                fieldKey: transformOriginFieldKey,
+                                sourceFrame: transformOriginDrag.sourceFrame,
+                                value: last.origin,
+                                schema: transformOriginDrag.schema,
+                            }
+                            : null,
+                        translateChanged
+                            ? {
+                                fileName: transformOriginDrag.nodePath.absolutePath,
+                                nodePath: transformOriginDrag.nodePath,
+                                fieldKey: translateFieldKey,
+                                sourceFrame: transformOriginDrag.sourceFrame,
+                                value: last.translate,
+                                schema: transformOriginDrag.schema,
+                            }
+                            : null,
+                    ].filter(no_react_1.NoReactInternals.truthy),
+                    effectKeyframes: [],
+                    setPropStatuses,
+                    clientId: transformOriginDrag.clientId,
+                })
+                : (0, save_sequence_prop_1.saveSequenceProps)({
+                    changes: [
+                        originChanged
+                            ? {
+                                fileName: transformOriginDrag.nodePath.absolutePath,
+                                nodePath: transformOriginDrag.nodePath,
+                                fieldKey: transformOriginFieldKey,
+                                value: last.origin,
+                                defaultValue: defaultOrigin,
+                                schema: transformOriginDrag.schema,
+                            }
+                            : null,
+                        translateChanged
+                            ? {
+                                fileName: transformOriginDrag.nodePath.absolutePath,
+                                nodePath: transformOriginDrag.nodePath,
+                                fieldKey: translateFieldKey,
+                                value: last.translate,
+                                defaultValue: defaultTranslate,
+                                schema: transformOriginDrag.schema,
+                            }
+                            : null,
+                    ].filter(no_react_1.NoReactInternals.truthy),
+                    setPropStatuses,
+                    clientId: transformOriginDrag.clientId,
+                    undoLabel: 'Move transform origin',
+                    redoLabel: 'Move transform origin back',
+                });
+            promise
+                .catch((err) => {
+                (0, NotificationCenter_1.showNotification)(`Could not save transform origin: ${err instanceof Error ? err.message : String(err)}`, 4000);
+            })
+                .finally(() => {
+                clearDragOverrides(transformOriginDrag.nodePath);
+            });
+        };
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerUp);
+    }, [
+        clearDragOverrides,
+        onDraggingChange,
+        outline,
+        parsed,
+        setDragOverrides,
+        setPropStatuses,
+        transformOriginDrag,
+        uv,
+    ]);
+    if (transformOriginDrag === null ||
+        parsed === null ||
+        uv === null ||
+        position === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs("g", { pointerEvents: "all", cursor: "crosshair", onPointerDown: onPointerDown, "aria-hidden": "true", children: [
+            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, }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     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();
@@ -655,6 +1014,8 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
     const drag = (_a = target === null || target === void 0 ? void 0 : target.drag) !== 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 containsSelection = (_c = target === null || target === void 0 ? void 0 : target.containsSelection) !== null && _c !== void 0 ? _c : false;
+    const effectDrop = (_d = target === null || target === void 0 ? void 0 : target.effectDrop) !== null && _d !== void 0 ? _d : null;
+    const [effectDropHovered, setEffectDropHovered] = (0, react_1.useState)(false);
     const visible = containsSelection || hovered;
     const onPointerDown = react_1.default.useCallback((event) => {
         if (event.button !== 0 || target === undefined) {
@@ -670,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({
@@ -679,12 +1039,32 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
             timelinePosition: timelinePositionRef.current,
         });
         let lastValues = new Map();
-        const onPointerMove = (moveEvent) => {
-            moveEvent.preventDefault();
+        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: screenDeltaX / scale,
+                deltaY: screenDeltaY / scale,
+                axisLocked,
+            });
             lastValues = (0, exports.getSelectedOutlineDragValues)({
                 dragStates,
-                deltaX: (moveEvent.clientX - startPointerX) / scale,
-                deltaY: (moveEvent.clientY - startPointerY) / scale,
+                deltaX: dragDelta.deltaX,
+                deltaY: dragDelta.deltaY,
             });
             for (const dragState of dragStates) {
                 const value = lastValues.get(dragState.key);
@@ -703,11 +1083,33 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
                 }
             }
         };
+        const onPointerMove = (moveEvent) => {
+            moveEvent.preventDefault();
+            currentPointerX = moveEvent.clientX;
+            currentPointerY = moveEvent.clientY;
+            axisLocked = moveEvent.shiftKey;
+            updateDragOverrides();
+        };
+        const onKeyChange = (keyEvent) => {
+            if (keyEvent.key !== 'Shift') {
+                return;
+            }
+            const nextAxisLocked = keyEvent.type === 'keydown';
+            if (nextAxisLocked === axisLocked) {
+                return;
+            }
+            axisLocked = nextAxisLocked;
+            updateDragOverrides();
+        };
         const onPointerUp = () => {
             window.removeEventListener('pointermove', onPointerMove);
             window.removeEventListener('pointerup', onPointerUp);
             window.removeEventListener('pointercancel', onPointerUp);
-            onDraggingChange(false);
+            window.removeEventListener('keydown', onKeyChange);
+            window.removeEventListener('keyup', onKeyChange);
+            if (dragStarted) {
+                onDraggingChange(false);
+            }
             const changes = (0, exports.getSelectedOutlineDragChanges)({
                 dragStates,
                 lastValues,
@@ -753,6 +1155,8 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
         window.addEventListener('pointermove', onPointerMove);
         window.addEventListener('pointerup', onPointerUp);
         window.addEventListener('pointercancel', onPointerUp);
+        window.addEventListener('keydown', onKeyChange);
+        window.addEventListener('keyup', onKeyChange);
     }, [
         allDragTargets,
         clearDragOverrides,
@@ -766,8 +1170,47 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
         setDragOverrides,
         target,
     ]);
+    const onEffectDragOver = react_1.default.useCallback((event) => {
+        if (effectDrop === null || !(0, effect_drag_and_drop_1.hasEffectDragType)(event.dataTransfer)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        event.dataTransfer.dropEffect = 'copy';
+        setEffectDropHovered(true);
+    }, [effectDrop]);
+    const onEffectDragLeave = react_1.default.useCallback((event) => {
+        if (event.currentTarget.contains(event.relatedTarget)) {
+            return;
+        }
+        setEffectDropHovered(false);
+    }, []);
+    const onEffectDrop = react_1.default.useCallback(async (event) => {
+        if (effectDrop === null || !(0, effect_drag_and_drop_1.hasEffectDragType)(event.dataTransfer)) {
+            return;
+        }
+        const dragData = (0, effect_drag_and_drop_1.getEffectDragData)(event.dataTransfer);
+        if (!dragData) {
+            if ((0, effect_drag_and_drop_1.hasExplicitEffectDragType)(event.dataTransfer)) {
+                event.preventDefault();
+                event.stopPropagation();
+                setEffectDropHovered(false);
+                (0, NotificationCenter_1.showNotification)('Could not read effect drag data', 3000);
+            }
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        setEffectDropHovered(false);
+        await (0, effect_drag_and_drop_1.addEffectFromDragData)({
+            dragData,
+            fileName: effectDrop.fileName,
+            nodePath: effectDrop.nodePath,
+            clientId: effectDrop.clientId,
+        });
+    }, [effectDrop]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("polygon", { ref: polygonRef, points: points, fill: "transparent", stroke: colors_1.BLUE, strokeOpacity: visible ? 1 : 0, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: target === undefined ? undefined : 'all', onPointerEnter: () => {
+            jsx_runtime_1.jsx("polygon", { ref: polygonRef, points: points, fill: effectDropHovered ? 'rgba(0, 155, 255, 0.12)' : 'transparent', stroke: colors_1.BLUE, strokeOpacity: visible || effectDropHovered ? 1 : 0, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: target === undefined ? undefined : 'all', onPointerEnter: () => {
                     if (!dragging) {
                         onHoverChange(outline.key);
                     }
@@ -775,13 +1218,16 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
                     if (!dragging) {
                         onHoverChange(null);
                     }
-                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: polygonRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
+                }, onPointerDown: onPointerDown, onDragOver: effectDrop === null ? undefined : onEffectDragOver, onDragLeave: effectDrop === null ? undefined : onEffectDragLeave, onDrop: effectDrop === null ? undefined : onEffectDrop }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: polygonRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
         ] }));
 };
 const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues, dragging, edge, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
     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);
@@ -801,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) => {
@@ -825,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,
@@ -844,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);
             })
@@ -894,21 +1370,25 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
                 }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: lineRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
         ] }));
 };
-const getSvgPointFromPointerEvent = ({ event, rect, }) => {
+const svgPointToClientPoint = (point, rect) => {
     return {
-        x: event.clientX - rect.left,
-        y: event.clientY - rect.top,
+        x: point.x + rect.left,
+        y: point.y + rect.top,
     };
 };
-const SelectedUvHandleConnectionLines = ({ handles, outline }) => {
-    const lines = (0, react_1.useMemo)(() => (0, exports.getUvHandleConnectionLines)({ handles, points: outline.points }), [handles, outline.points]);
-    return (jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: lines.map((line) => (jsx_runtime_1.jsx("line", { x1: line.from.x, y1: line.from.y, x2: line.to.x, y2: line.to.y, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: "none" }, line.key))) }));
-};
-const SelectedUvHandleCircle = ({ handle, onDraggingChange, outline }) => {
-    const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const position = (0, react_1.useMemo)(() => (0, exports.getUvHandlePosition)(outline.points, handle.value), [handle.value, outline.points]);
+const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMenuValues, corner, dragging, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
+    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 rotationDrag = (_a = target === null || target === void 0 ? void 0 : target.rotationDrag) !== 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 circleRef = (0, react_1.useRef)(null);
+    const cornerInfo = (0, react_1.useMemo)(() => (0, exports.getSelectedOutlineRotationCornerInfo)(outline.points, corner), [corner, outline.points]);
     const onPointerDown = react_1.default.useCallback((event) => {
-        if (event.button !== 0) {
+        if (event.button !== 0 || rotationDrag === null) {
             return;
         }
         event.preventDefault();
@@ -917,70 +1397,156 @@ const SelectedUvHandleCircle = ({ handle, onDraggingChange, outline }) => {
         if (svg === null) {
             return;
         }
-        const svgRect = svg.getBoundingClientRect();
-        let lastValue = null;
+        const interaction = (0, exports.getOutlineSelectionInteraction)(event);
+        const shouldUpdateSelection = !selected || interaction.shiftKey || interaction.toggleKey;
+        if (shouldUpdateSelection && target !== undefined) {
+            onSelect(target.selection, interaction);
+        }
+        if (interaction.shiftKey || interaction.toggleKey) {
+            return;
+        }
         onDraggingChange(true);
-        const defaultValue = handle.fieldDefault !== undefined
-            ? JSON.stringify(handle.fieldDefault)
-            : null;
-        const updateFromPointerEvent = (pointerEvent) => {
-            const point = getSvgPointFromPointerEvent({
-                event: pointerEvent,
-                rect: svgRect,
-            });
-            const nextValue = constrainUv((0, exports.getUvCoordinateForPoint)(outline.points, point), handle.fieldSchema);
-            lastValue = nextValue;
-            setEffectDragOverrides(handle.nodePath, handle.effectIndex, handle.fieldKey, remotion_1.Internals.makeStaticDragOverride(nextValue));
-        };
-        updateFromPointerEvent(event);
+        (0, ForceSpecificCursor_1.forceSpecificCursor)(cornerInfo.cursor);
+        const svgRect = svg.getBoundingClientRect();
+        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,
+            timelinePosition: timelinePositionRef.current,
+        });
+        let previousAngle = getAngleDegrees(center, {
+            x: event.clientX,
+            y: event.clientY,
+        });
+        let accumulatedDelta = 0;
+        let lastValues = new Map();
         const onPointerMove = (moveEvent) => {
             moveEvent.preventDefault();
-            updateFromPointerEvent(moveEvent);
+            const nextAngle = getAngleDegrees(center, {
+                x: moveEvent.clientX,
+                y: moveEvent.clientY,
+            });
+            accumulatedDelta += (0, exports.getSelectedOutlineRotationDeltaDegrees)({
+                from: previousAngle,
+                to: nextAngle,
+            });
+            previousAngle = nextAngle;
+            lastValues = (0, exports.getSelectedOutlineRotationDragValues)({
+                dragStates,
+                rotationDeltaDegrees: accumulatedDelta,
+            });
+            (0, ForceSpecificCursor_1.forceSpecificCursor)(getRotationCursor(cornerInfo.cursorDegrees + accumulatedDelta));
+            for (const dragState of dragStates) {
+                const value = lastValues.get(dragState.key);
+                if (value === undefined) {
+                    throw new Error('Expected rotation drag value to be available');
+                }
+                if (dragState.target.propStatus.status === 'keyframed') {
+                    setDragOverrides(dragState.target.nodePath, rotateFieldKey, remotion_1.Internals.makeKeyframedDragOverride({
+                        status: dragState.target.propStatus,
+                        frame: dragState.sourceFrame,
+                        value,
+                    }));
+                }
+                else {
+                    setDragOverrides(dragState.target.nodePath, rotateFieldKey, 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 stringifiedValue = lastValue === null ? null : JSON.stringify(lastValue);
-            const shouldSave = lastValue !== null &&
-                !tuplesEqual(handle.propStatus.codeValue, lastValue) &&
-                !(defaultValue === stringifiedValue &&
-                    handle.propStatus.codeValue === undefined);
-            if (!shouldSave) {
-                clearEffectDragOverrides(handle.nodePath, handle.effectIndex);
+            const changes = (0, exports.getSelectedOutlineRotationDragChanges)({
+                dragStates,
+                lastValues,
+            });
+            if (changes.length === 0) {
+                clearSelectedOutlineRotationDragOverrides({
+                    clearDragOverrides,
+                    dragStates,
+                });
                 return;
             }
-            (0, save_effect_prop_1.saveEffectProp)({
-                type: 'value',
-                fileName: handle.nodePath.absolutePath,
-                nodePath: handle.nodePath,
-                effectIndex: handle.effectIndex,
-                fieldKey: handle.fieldKey,
-                value: lastValue,
-                defaultValue,
-                schema: handle.schema,
-                setPropStatuses,
-                clientId: handle.clientId,
-            }).finally(() => {
-                clearEffectDragOverrides(handle.nodePath, handle.effectIndex);
+            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: rotationDrag.clientId,
+                        undoLabel: changes.length > 1
+                            ? 'Rotate selected sequences'
+                            : 'Rotate sequence',
+                        redoLabel: changes.length > 1
+                            ? 'Rotate selected sequences back'
+                            : 'Rotate 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(() => {
+                clearSelectedOutlineRotationDragOverrides({
+                    clearDragOverrides,
+                    dragStates,
+                });
             });
         };
         window.addEventListener('pointermove', onPointerMove);
         window.addEventListener('pointerup', onPointerUp);
         window.addEventListener('pointercancel', onPointerUp);
     }, [
-        clearEffectDragOverrides,
-        handle,
+        allRotationDragTargets,
+        clearDragOverrides,
+        cornerInfo,
+        getDragOverrides,
         onDraggingChange,
+        outline.dimensions,
         outline.points,
+        onSelect,
+        rotationDrag,
+        selected,
         setPropStatuses,
-        setEffectDragOverrides,
+        setDragOverrides,
+        target,
     ]);
-    return (jsx_runtime_1.jsx("circle", { cx: position.x, cy: position.y, r: 6, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: "default", onPointerDown: onPointerDown }));
+    if (rotationDrag === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("circle", { ref: circleRef, cx: cornerInfo.point.x, cy: cornerInfo.point.y, r: 12, fill: "transparent", stroke: "transparent", vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: cornerInfo.cursor, onPointerEnter: () => {
+                    if (!dragging) {
+                        onHoverChange(outline.key);
+                    }
+                }, onPointerLeave: () => {
+                    if (!dragging) {
+                        onHoverChange(null);
+                    }
+                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: circleRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
+        ] }));
 };
-const SelectedOutlineElement = ({ allDragTargets, allScaleDragTargets, dragging, hovered, outline, onDraggingChange, onHoverChange, onSelect, scale, target, }) => {
+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') {
@@ -1007,6 +1573,7 @@ const SelectedOutlineElement = ({ allDragTargets, allScaleDragTargets, dragging,
             root: window.remotion_cwd,
         });
         const editorName = window.remotion_editorName;
+        const disableInteractivityDisabled = !target.sequence.showInTimeline;
         return [
             editorName
                 ? {
@@ -1053,24 +1620,45 @@ const SelectedOutlineElement = ({ allDragTargets, allScaleDragTargets, dragging,
                 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)))
-                : null] }));
-};
-const SelectedOutlineUvHandleConnectionLayer = ({ outline, target }) => {
-    if (!(target === null || target === void 0 ? void 0 : target.containsSelection) || target.uvHandles.length === 0) {
-        return null;
-    }
-    return (jsx_runtime_1.jsx(SelectedUvHandleConnectionLines, { handles: target.uvHandles, outline: outline }));
-};
-const SelectedOutlineUvHandleCircleLayer = ({ onDraggingChange, outline, target }) => {
-    if (!(target === null || target === void 0 ? void 0 : target.containsSelection) || target.uvHandles.length === 0) {
-        return null;
-    }
-    return (jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: target.uvHandles.map((handle) => (jsx_runtime_1.jsx(SelectedUvHandleCircle, { handle: handle, onDraggingChange: onDraggingChange, outline: outline }, `${handle.effectIndex}-${handle.fieldKey}`))) }));
+                : null, (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
+                ? ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle, { allRotationDragTargets: allRotationDragTargets, contextMenuValues: emptyContextMenuValues, corner: corner, dragging: dragging, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, corner)))
+                : null, jsx_runtime_1.jsx(SelectedOutlineTransformOriginHandle, { outline: outline, onDraggingChange: onDraggingChange, target: target })
+        ] }));
 };
 const SelectedOutlineOverlay = ({ scale }) => {
     const { selectedItems, selectItem } = (0, TimelineSelection_1.useTimelineSelection)();
@@ -1079,12 +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) {
@@ -1092,12 +1686,13 @@ const SelectedOutlineOverlay = ({ scale }) => {
         }
     }, []);
     const outlineTargets = (0, react_1.useMemo)(() => {
-        if (!TimelineSelection_1.ENABLE_OUTLINES || !editorShowOutlines) {
+        if (!editorShowOutlines) {
             return [];
         }
         const selectedSequenceKeys = (0, exports.getSelectedSequenceKeys)(selectedItems);
         const sequenceKeysContainingSelection = getSequenceKeysContainingSelection(selectedItems);
         const selectedEffectsBySequenceKey = (0, exports.getSelectedEffectFieldsBySequenceKey)(selectedItems);
+        const selectedTransformOriginInfo = getSelectedTransformOriginInfo(selectedItems);
         const clientId = previewServerState.type === 'connected'
             ? previewServerState.clientId
             : null;
@@ -1105,7 +1700,8 @@ const SelectedOutlineOverlay = ({ scale }) => {
             sequences,
             overrideIdsToNodePaths: overrideIdToNodePathMappings,
         }).map(({ key, keyframeDisplayOffset, nodePathInfo, sequence }) => {
-            var _a, _b;
+            var _a;
+            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');
             }
@@ -1114,23 +1710,77 @@ const SelectedOutlineOverlay = ({ scale }) => {
             const nodePath = nodePathInfo.sequenceSubscriptionKey;
             const { controls } = sequence;
             const fieldSchema = controls === null || controls === void 0 ? void 0 : controls.schema[translateFieldKey];
-            const propStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[translateFieldKey];
+            const nodePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath);
+            const propStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[translateFieldKey];
             const scaleFieldSchema = controls === null || controls === void 0 ? void 0 : controls.schema[scaleFieldKey];
-            const scalePropStatus = (_b = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _b === void 0 ? void 0 : _b[scaleFieldKey];
+            const scalePropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[scaleFieldKey];
+            const rotationFieldSchema = controls === null || controls === void 0 ? void 0 : controls.schema[rotateFieldKey];
+            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');
+            const canRotationDragStatus = (rotationPropStatus === null || rotationPropStatus === void 0 ? void 0 : rotationPropStatus.status) === 'static' ||
+                ((rotationPropStatus === null || rotationPropStatus === void 0 ? void 0 : rotationPropStatus.status) === 'keyframed' &&
+                    rotationPropStatus.interpolationFunction === 'interpolate');
             const canDrag = previewServerState.type === 'connected' &&
                 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' &&
+                canRotationDragStatus;
+            const selectedForTransformOrigin = (selectedTransformOriginInfo === null || selectedTransformOriginInfo === void 0 ? void 0 : selectedTransformOriginInfo.sequenceKey) === key;
+            const transformOriginSourceFrame = (selectedTransformOriginInfo === null || selectedTransformOriginInfo === void 0 ? void 0 : selectedTransformOriginInfo.displayFrame) === null ||
+                (selectedTransformOriginInfo === null || selectedTransformOriginInfo === void 0 ? void 0 : selectedTransformOriginInfo.displayFrame) === undefined
+                ? timelinePosition - keyframeDisplayOffset
+                : selectedTransformOriginInfo.displayFrame - keyframeDisplayOffset;
+            const canTransformOriginStatus = (transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'static' ||
+                ((transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'keyframed' &&
+                    transformOriginPropStatus.interpolationFunction === 'interpolate');
+            const canTransformOriginTranslateStatus = (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'static' ||
+                ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'keyframed' &&
+                    propStatus.interpolationFunction === 'interpolate');
+            const canTransformOriginDrag = previewServerState.type === 'connected' &&
+                selectedForTransformOrigin &&
+                controls !== null &&
+                (transformOriginFieldSchema === null || transformOriginFieldSchema === void 0 ? void 0 : transformOriginFieldSchema.type) === 'transform-origin' &&
+                (fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) === 'translate' &&
+                canTransformOriginStatus &&
+                canTransformOriginTranslateStatus;
+            const canDropEffect = previewServerState.type === 'connected' &&
+                (controls === null || controls === void 0 ? void 0 : controls.supportsEffects) === true;
             return {
                 key,
                 containsSelection,
+                effectDrop: canDropEffect
+                    ? {
+                        clientId: previewServerState.clientId,
+                        fileName: nodePath.absolutePath,
+                        nodePath,
+                    }
+                    : null,
                 nodePathInfo,
                 ref: sequence.refForOutline,
                 selected,
@@ -1152,6 +1802,7 @@ const SelectedOutlineOverlay = ({ scale }) => {
                         clientId: previewServerState.clientId,
                         fieldDefault: scaleFieldSchema.default,
                         fieldSchema: scaleFieldSchema,
+                        keyframeDisplayOffset,
                         linked: getScaleLockState({
                             nodePath,
                             fieldKey: scaleFieldKey,
@@ -1172,14 +1823,78 @@ const SelectedOutlineOverlay = ({ scale }) => {
                         schema: controls.schema,
                     }
                     : null,
+                rotationDrag: canRotationDrag
+                    ? {
+                        propStatus: rotationPropStatus,
+                        clientId: previewServerState.clientId,
+                        fieldDefault: rotationFieldSchema.default,
+                        fieldSchema: rotationFieldSchema,
+                        keyframeDisplayOffset,
+                        nodePath,
+                        schema: controls.schema,
+                        transformOriginValue: transformOriginValueForRotation,
+                    }
+                    : null,
+                transformOriginDrag: canTransformOriginDrag
+                    ? {
+                        clientId: previewServerState.clientId,
+                        keyframeDisplayOffset,
+                        nodePath,
+                        originDefault: transformOriginFieldSchema.default,
+                        originPropStatus: transformOriginPropStatus,
+                        originValue: String((_e = remotion_1.Internals.getEffectiveVisualModeValue({
+                            propStatus: transformOriginPropStatus,
+                            dragOverrideValue: ((_d = getDragOverrides(nodePath)) !== null && _d !== void 0 ? _d : {})[transformOriginFieldKey],
+                            defaultValue: transformOriginFieldSchema.default,
+                            frame: transformOriginSourceFrame,
+                            shouldResortToDefaultValueIfUndefined: true,
+                        })) !== 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'
+                            ? ((_g = remotion_1.Internals.getEffectiveVisualModeValue({
+                                propStatus: rotationPropStatus,
+                                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 && _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((_j = remotion_1.Internals.getEffectiveVisualModeValue({
+                                propStatus: scalePropStatus,
+                                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 && _j !== void 0 ? _j : 1)
+                            : '1',
+                        schema: controls.schema,
+                        sourceFrame: transformOriginSourceFrame,
+                        translateDefault: fieldSchema.default,
+                        translatePropStatus: propStatus,
+                        translateValue: String((_l = remotion_1.Internals.getEffectiveVisualModeValue({
+                            propStatus,
+                            dragOverrideValue: ((_k = getDragOverrides(nodePath)) !== null && _k !== void 0 ? _k : {})[translateFieldKey],
+                            defaultValue: fieldSchema.default,
+                            frame: transformOriginSourceFrame,
+                            shouldResortToDefaultValueIfUndefined: true,
+                        })) !== null && _l !== void 0 ? _l : fieldSchema.default),
+                    }
+                    : null,
                 uvHandles: containsSelection
-                    ? getSelectedUvHandles({
+                    ? (0, selected_outline_uv_1.getSelectedUvHandles)({
                         propStatuses,
                         clientId,
                         getEffectDragOverrides,
                         nodePath,
                         selectedEffects: selectedEffectsBySequenceKey.get(key),
                         sequence,
+                        sourceFrame: timelinePosition - keyframeDisplayOffset,
                     })
                     : [],
             };
@@ -1194,6 +1909,7 @@ const SelectedOutlineOverlay = ({ scale }) => {
         previewServerState,
         selectedItems,
         sequences,
+        timelinePosition,
     ]);
     (0, react_1.useEffect)(() => {
         if (hoveredOutlineKey !== null &&
@@ -1210,6 +1926,232 @@ const SelectedOutlineOverlay = ({ scale }) => {
     const allScaleDragTargets = (0, react_1.useMemo)(() => {
         return outlineTargets.flatMap((target) => target.selected && target.scaleDrag !== null ? [target.scaleDrag] : []);
     }, [outlineTargets]);
+    const allRotationDragTargets = (0, react_1.useMemo)(() => {
+        return outlineTargets.flatMap((target) => target.selected && target.rotationDrag !== null
+            ? [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 : []);
@@ -1235,6 +2177,6 @@ const SelectedOutlineOverlay = ({ scale }) => {
     if (outlineTargets.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: [outlines.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement, { allDragTargets: allDragTargets, allScaleDragTargets: allScaleDragTargets, dragging: draggingOutline, hovered: hoveredOutlineKey === outline.key, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: setHoveredOutlineKey, onSelect: selectItem, scale: scale, target: targetsByKey.get(outline.key) }, outline.key))), outlines.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvHandleConnectionLayer, { outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlines.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`)))] }));
+    return (jsx_runtime_1.jsxs("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: [outlines.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement, { allDragTargets: allDragTargets, allRotationDragTargets: allRotationDragTargets, allScaleDragTargets: allScaleDragTargets, dragging: draggingOutline, hovered: hoveredOutlineKey === outline.key, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: setHoveredOutlineKey, onSelect: selectItem, scale: scale, target: targetsByKey.get(outline.key) }, outline.key))), outlines.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlines.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`)))] }));
 };
 exports.SelectedOutlineOverlay = SelectedOutlineOverlay;