@remotion/studio 4.0.506 → 4.0.508

package/dist/components/SelectedOutlineOverlay.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineOverlay = exports.orderOutlinesForRendering = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getSelectedCropInfo = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineTransformOriginDragChanges = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineCropFollowingTransformOrigin = exports.getSelectedOutlineCropDragValues = exports.getSelectedOutlineCropDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
+exports.SelectedOutlineOverlay = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getSelectedCropInfo = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineTransformOriginDragChanges = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineCropFollowingTransformOrigin = exports.getSelectedOutlineCropDragValues = exports.getSelectedOutlineCropDragChanges = exports.getSelectedOutlineActiveSchema = exports.getSelectedOutline3DRotationDragValues = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = exports.orderOutlinesForRendering = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
@@ -41,30 +41,27 @@ const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../helpers/client-id");
 const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
+const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const use_is_fullscreen_1 = require("../helpers/use-is-fullscreen");
-const use_keybinding_1 = require("../helpers/use-keybinding");
 const use_runtime_values_1 = require("../helpers/use-runtime-values");
-const editor_guides_1 = require("../state/editor-guides");
 const editor_outlines_1 = require("../state/editor-outlines");
 const scale_lock_1 = require("../state/scale-lock");
 const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const transform_3d_mode_1 = require("../state/transform-3d-mode");
 const selected_outline_drag_1 = require("./selected-outline-drag");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
-const selected_outline_snap_1 = require("./selected-outline-snap");
+const selected_outline_order_1 = require("./selected-outline-order");
+Object.defineProperty(exports, "orderOutlinesForRendering", { enumerable: true, get: function () { return selected_outline_order_1.orderOutlinesForRendering; } });
 const selected_outline_types_1 = require("./selected-outline-types");
-const selected_outline_uv_1 = require("./selected-outline-uv");
-const SelectedOutlineElement_1 = require("./SelectedOutlineElement");
-const SelectedOutlineUvControls_1 = require("./SelectedOutlineUvControls");
-const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
-const imperative_state_1 = require("./Timeline/imperative-state");
-const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
-const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
+const SelectedOutlineKeyboardControls_1 = require("./SelectedOutlineKeyboardControls");
+const SelectedOutlineRenderer_1 = require("./SelectedOutlineRenderer");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
+const transform_3d_mode_2 = require("./Timeline/transform-3d-mode");
 const selected_outline_drag_2 = require("./selected-outline-drag");
 Object.defineProperty(exports, "applySelectedOutlineDragAxisLock", { enumerable: true, get: function () { return selected_outline_drag_2.applySelectedOutlineDragAxisLock; } });
 Object.defineProperty(exports, "applySelectedOutlineTransformOriginAxisLock", { enumerable: true, get: function () { return selected_outline_drag_2.applySelectedOutlineTransformOriginAxisLock; } });
 Object.defineProperty(exports, "compensateTranslateForTransformOrigin", { enumerable: true, get: function () { return selected_outline_drag_2.compensateTranslateForTransformOrigin; } });
+Object.defineProperty(exports, "getSelectedOutline3DRotationDragValues", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutline3DRotationDragValues; } });
 Object.defineProperty(exports, "getSelectedOutlineActiveSchema", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineActiveSchema; } });
 Object.defineProperty(exports, "getSelectedOutlineCropDragChanges", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineCropDragChanges; } });
 Object.defineProperty(exports, "getSelectedOutlineCropDragValues", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineCropDragValues; } });
@@ -144,518 +141,210 @@ const getCropDragFields = ({ activeSchema, cropValues, propStatuses, }) => {
     }
     return fields;
 };
-const outlineContainer = {
-    position: 'absolute',
-    inset: 0,
-    pointerEvents: 'none',
-    overflow: 'visible',
-};
-const SelectedOutlineSnapIndicators = ({ activeSnapPoints, compositionHeight, compositionWidth, scale }) => {
-    if (activeSnapPoints.length === 0) {
-        return null;
-    }
-    return (jsx_runtime_1.jsx("g", { pointerEvents: "none", children: activeSnapPoints.map((snapPoint) => {
-            if (snapPoint.target.axis === 'x') {
-                const x = snapPoint.target.position * scale;
-                return (jsx_runtime_1.jsx("line", { x1: x, x2: x, y1: 0, y2: compositionHeight * scale, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
-            }
-            const y = snapPoint.target.position * scale;
-            return (jsx_runtime_1.jsx("line", { x1: 0, x2: compositionWidth * scale, y1: y, y2: y, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
-        }) }));
-};
-const outlinePointEqualityTolerance = 0.5;
-const outlineAreaEqualityTolerance = 0.5;
-const outlineBoundsOverlapTolerance = 0.5;
-const outlinePointsAreEquivalent = (a, b) => {
-    return (Math.abs(a.x - b.x) <= outlinePointEqualityTolerance &&
-        Math.abs(a.y - b.y) <= outlinePointEqualityTolerance);
-};
-const outlinesHaveEquivalentHitArea = (a, b) => {
-    if (a.points.length !== b.points.length) {
-        return false;
-    }
-    for (let startIndex = 0; startIndex < b.points.length; startIndex++) {
-        for (const direction of [1, -1]) {
-            const pointsMatch = a.points.every((point, index) => {
-                const bIndex = (startIndex + direction * index + b.points.length) % b.points.length;
-                return outlinePointsAreEquivalent(point, b.points[bIndex]);
-            });
-            if (pointsMatch) {
-                return true;
-            }
-        }
-    }
-    return false;
-};
-const getOutlineHitArea = (outline) => {
-    let area = 0;
-    for (let i = 0; i < outline.points.length; i++) {
-        const current = outline.points[i];
-        const next = outline.points[(i + 1) % outline.points.length];
-        area += current.x * next.y - next.x * current.y;
-    }
-    return Math.abs(area) / 2;
-};
-const getOutlineBounds = (outline) => {
-    const xs = outline.points.map((point) => point.x);
-    const ys = outline.points.map((point) => point.y);
-    return {
-        maxX: Math.max(...xs),
-        maxY: Math.max(...ys),
-        minX: Math.min(...xs),
-        minY: Math.min(...ys),
-    };
-};
-const outlineBoundsOverlap = (a, b) => {
-    const aBounds = getOutlineBounds(a);
-    const bBounds = getOutlineBounds(b);
-    return (aBounds.minX <= bBounds.maxX + outlineBoundsOverlapTolerance &&
-        aBounds.maxX + outlineBoundsOverlapTolerance >= bBounds.minX &&
-        aBounds.minY <= bBounds.maxY + outlineBoundsOverlapTolerance &&
-        aBounds.maxY + outlineBoundsOverlapTolerance >= bBounds.minY);
-};
-const getSequenceId = (target) => {
-    var _a;
-    var _b;
-    return (_b = (_a = target === null || target === void 0 ? void 0 : target.sequence) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null;
-};
-const getParentBySequenceId = ({ sequences, targetsByKey, }) => {
-    const parentBySequenceId = new Map();
-    for (const sequence of sequences) {
-        parentBySequenceId.set(sequence.id, sequence.parent);
-    }
-    for (const target of targetsByKey.values()) {
-        const sequenceId = getSequenceId(target);
-        if (sequenceId !== null && !parentBySequenceId.has(sequenceId)) {
-            parentBySequenceId.set(sequenceId, target.sequence.parent);
-        }
-    }
-    return parentBySequenceId;
-};
-const isAncestorTarget = ({ ancestor, descendant, parentBySequenceId, }) => {
-    var _a;
-    var _b, _c;
-    const ancestorId = getSequenceId(ancestor);
-    if (ancestorId === null) {
-        return false;
-    }
-    let parentId = (_b = (_a = descendant.sequence) === null || _a === void 0 ? void 0 : _a.parent) !== null && _b !== void 0 ? _b : null;
-    while (parentId !== null) {
-        if (parentId === ancestorId) {
-            return true;
-        }
-        parentId = (_c = parentBySequenceId.get(parentId)) !== null && _c !== void 0 ? _c : null;
-    }
-    return false;
-};
-const orderOutlineGroup = ({ outlines, parentBySequenceId, targetsByKey, }) => {
-    var _a;
-    var _b, _c, _d, _e;
-    const incomingEdges = new Map();
-    const outgoingEdges = new Map();
-    const outlinesByKey = new Map(outlines.map((outline) => [outline.key, outline]));
-    for (const outline of outlines) {
-        incomingEdges.set(outline.key, new Set());
-        outgoingEdges.set(outline.key, new Set());
-    }
-    const hasPath = ({ fromKey, seen, toKey, }) => {
-        var _a;
-        if (fromKey === toKey) {
-            return true;
-        }
-        if (seen.has(fromKey)) {
-            return false;
-        }
-        seen.add(fromKey);
-        for (const nextKey of (_a = outgoingEdges.get(fromKey)) !== null && _a !== void 0 ? _a : []) {
-            if (hasPath({ fromKey: nextKey, seen, toKey })) {
-                return true;
-            }
-        }
-        return false;
-    };
-    const addEdge = (before, after, options) => {
-        if (before.key === after.key) {
-            return;
-        }
-        const incoming = incomingEdges.get(after.key);
-        const outgoing = outgoingEdges.get(before.key);
-        if (incoming === undefined || outgoing === undefined) {
-            throw new Error('Expected outline to be registered before adding edge');
-        }
-        if (outgoing.has(after.key)) {
-            return;
-        }
-        if (hasPath({ fromKey: after.key, seen: new Set(), toKey: before.key })) {
-            if (options === null || options === void 0 ? void 0 : options.skipIfCycle) {
-                return;
-            }
-            throw new Error('Could not determine a stable outline rendering order');
-        }
-        incoming.add(before.key);
-        outgoing.add(after.key);
-    };
-    const addAncestorConstraint = ({ ancestor, descendant, descendantContainsSelection, equivalentHitArea, }) => {
-        // Usually, children should be above parents so nested elements are directly
-        // selectable. If an unselected child has the same hit area as its parent, put
-        // it below the parent so the wrapper can be selected. Once the child or
-        // one of its properties is selected, keep it above the parent so it remains
-        // directly draggable.
-        if (equivalentHitArea && !descendantContainsSelection) {
-            addEdge(descendant, ancestor);
-        }
-        else {
-            addEdge(ancestor, descendant);
-        }
-    };
-    const outlineBySequenceId = new Map();
-    for (const outline of outlines) {
-        const sequenceId = getSequenceId(targetsByKey.get(outline.key));
-        if (sequenceId !== null) {
-            outlineBySequenceId.set(sequenceId, outline);
-        }
-    }
-    // Only constrain each outline against its nearest rendered ancestor. The
-    // resulting graph follows the sequence tree, so pairwise subpixel equivalence
-    // cannot introduce contradictory edges across three nested outlines.
-    for (const descendant of outlines) {
-        const descendantTarget = targetsByKey.get(descendant.key);
-        let parentId = (_b = (_a = descendantTarget === null || descendantTarget === void 0 ? void 0 : descendantTarget.sequence) === null || _a === void 0 ? void 0 : _a.parent) !== null && _b !== void 0 ? _b : null;
-        while (parentId !== null) {
-            const ancestor = outlineBySequenceId.get(parentId);
-            if (ancestor !== undefined) {
-                addAncestorConstraint({
-                    ancestor,
-                    descendant,
-                    descendantContainsSelection: ((_c = descendantTarget === null || descendantTarget === void 0 ? void 0 : descendantTarget.selected) !== null && _c !== void 0 ? _c : false) ||
-                        ((_d = descendantTarget === null || descendantTarget === void 0 ? void 0 : descendantTarget.containsSelection) !== null && _d !== void 0 ? _d : false),
-                    equivalentHitArea: outlinesHaveEquivalentHitArea(ancestor, descendant),
-                });
-                break;
-            }
-            parentId = (_e = parentBySequenceId.get(parentId)) !== null && _e !== void 0 ? _e : null;
-        }
-    }
-    // For unrelated overlapping outlines, put broader hit targets below
-    // smaller ones so a large selected sequence cannot swallow clicks on
-    // a more specific element in the same canvas area.
-    for (let i = 0; i < outlines.length; i++) {
-        for (let j = i + 1; j < outlines.length; j++) {
-            const a = outlines[i];
-            const b = outlines[j];
-            const aTarget = targetsByKey.get(a.key);
-            const bTarget = targetsByKey.get(b.key);
-            if (aTarget === undefined || bTarget === undefined) {
-                continue;
-            }
-            const aAncestorOfB = isAncestorTarget({
-                ancestor: aTarget,
-                descendant: bTarget,
-                parentBySequenceId,
-            });
-            const bAncestorOfA = isAncestorTarget({
-                ancestor: bTarget,
-                descendant: aTarget,
-                parentBySequenceId,
-            });
-            if (aAncestorOfB || bAncestorOfA || !outlineBoundsOverlap(a, b)) {
-                continue;
-            }
-            const aArea = getOutlineHitArea(a);
-            const bArea = getOutlineHitArea(b);
-            if (Math.abs(aArea - bArea) <= outlineAreaEqualityTolerance) {
-                continue;
-            }
-            if (aArea > bArea) {
-                addEdge(a, b, { skipIfCycle: true });
-            }
-            else {
-                addEdge(b, a, { skipIfCycle: true });
-            }
-        }
+const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDragOverrides, getScaleLockState, isFullscreen, manuallyEnabled3DTransformSequenceKeys, mode, previewSelectionAvailable, propStatuses, runtimeValuesByStore, selectableOutlines, selectedCropInfo, selectedEffectsBySequenceKey, selectedRotationInfo, selectedSequenceKeys, selectedTransformOriginInfo, sequenceKeysContainingSelection, studioInteractivityEnabled, targetKey, targetTimelinePosition, }) => {
+    if (isFullscreen ||
+        !(0, interactivity_enabled_1.isStudioSelectionEnabled)() ||
+        !previewSelectionAvailable ||
+        !editorShowOutlines) {
+        return [];
     }
-    const emitted = new Set();
-    const visiting = new Set();
-    const ordered = [];
-    const visit = (outline) => {
-        var _a;
-        if (emitted.has(outline.key)) {
-            return;
+    const previewInteractive = connectedClientId !== null && studioInteractivityEnabled;
+    const firstNodePathInfoBySourceNode = new Map();
+    const selectedSourceNodeKeys = new Set();
+    for (const { key, nodePathInfo } of selectableOutlines) {
+        const sourceNodeKey = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(nodePathInfo.sequenceSubscriptionKey);
+        if (selectedSequenceKeys.has(key)) {
+            selectedSourceNodeKeys.add(sourceNodeKey);
+        }
+        const currentFirst = firstNodePathInfoBySourceNode.get(sourceNodeKey);
+        if (currentFirst === undefined || nodePathInfo.index < currentFirst.index) {
+            firstNodePathInfoBySourceNode.set(sourceNodeKey, nodePathInfo);
         }
-        if (visiting.has(outline.key)) {
-            throw new Error('Could not determine a stable outline rendering order');
-        }
-        visiting.add(outline.key);
-        for (const dependencyKey of (_a = incomingEdges.get(outline.key)) !== null && _a !== void 0 ? _a : []) {
-            const dependency = outlinesByKey.get(dependencyKey);
-            if (dependency === undefined) {
-                throw new Error('Expected outline dependency to exist');
-            }
-            visit(dependency);
-        }
-        visiting.delete(outline.key);
-        emitted.add(outline.key);
-        ordered.push(outline);
-    };
-    for (const outline of outlines) {
-        visit(outline);
     }
-    return ordered;
-};
-const orderOutlinesForRendering = ({ outlines, sequences, targetsByKey, }) => {
-    const parentBySequenceId = getParentBySequenceId({ sequences, targetsByKey });
-    return orderOutlineGroup({
-        outlines,
-        parentBySequenceId,
-        targetsByKey,
-    });
-};
-exports.orderOutlinesForRendering = orderOutlinesForRendering;
-const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, translationX, translationY, }) => {
-    const { selectedItems, selectItem } = (0, TimelineSelection_1.useTimelineSelection)();
-    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
-    const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
-    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 { hoveredSequence, setHoveredSequence } = (0, react_1.useContext)(timeline_sequence_hover_1.TimelineSequenceHoverContext);
-    const { editorShowGuides, guidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
-    const isFullscreen = (0, use_is_fullscreen_1.useIsFullscreen)();
-    const { frameBack, frameForward, getCurrentFrame, seek } = player_1.PlayerInternals.usePlayerMethods();
-    const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const [outlines, setOutlines] = (0, react_1.useState)([]);
-    const [draggingOutline, setDraggingOutline] = (0, react_1.useState)(false);
-    const [activeSnapPoints, setActiveSnapPoints] = (0, react_1.useState)([]);
-    const overlayRef = (0, react_1.useRef)(null);
-    const keyboardNudgeSessionRef = (0, react_1.useRef)(null);
-    const saveKeyboardNudgeSessionRef = (0, react_1.useRef)(() => undefined);
-    const previewInteractive = previewServerState.type === 'connected' && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
-    const previewSelectionAvailable = previewServerState.type === 'connected' || window.remotion_isReadOnlyStudio;
-    const onDraggingChange = react_1.default.useCallback((dragging) => {
-        setDraggingOutline(dragging);
-        if (dragging) {
-            setHoveredSequence((currentHover) => (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover);
-        }
-        else {
-            setActiveSnapPoints([]);
-        }
-    }, [setHoveredSequence]);
-    const onHoverChange = (0, react_1.useCallback)((key) => {
-        setHoveredSequence((currentHover) => {
-            if (key !== null) {
-                return { key, source: 'canvas' };
-            }
-            return (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover;
-        });
-    }, [setHoveredSequence]);
-    const onSnapPointsChange = (0, react_1.useCallback)((snapPoints) => {
-        setActiveSnapPoints(snapPoints);
-    }, []);
-    const selectOutlineItem = (0, react_1.useCallback)((item, interaction) => {
-        selectItem(item, interaction, undefined, { reveal: true });
-    }, [selectItem]);
-    const outlineRuntimeControls = (0, react_1.useMemo)(() => {
-        if (isFullscreen ||
-            !(0, interactivity_enabled_1.isStudioSelectionEnabled)() ||
-            !previewSelectionAvailable ||
-            !editorShowOutlines) {
+    return selectableOutlines.flatMap((selectableOutline) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const { key, keyframeDisplayOffset, nodePathInfo, sequence } = selectableOutline;
+        if (targetKey !== null && targetKey !== key) {
             return [];
         }
-        const selectedSequenceKeys = (0, selected_outline_measurement_1.getSelectedSequenceKeys)(selectedItems);
-        const sequenceKeysContainingSelection = (0, selected_outline_measurement_1.getSequenceKeysContainingSelection)(selectedItems);
-        return (0, selected_outline_measurement_1.getSequencesWithSelectableOutlines)({
-            sequences,
-            overrideIdsToNodePaths: overrideIdToNodePathMappings,
-            compositions,
-            timelinePosition,
-        }).flatMap(({ key, sequence }) => {
-            if (!selectedSequenceKeys.has(key) &&
-                !sequenceKeysContainingSelection.has(key) &&
-                (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.key) !== key) {
-                return [];
-            }
-            return sequence.controls ? [sequence.controls] : [];
-        });
-    }, [
-        compositions,
-        editorShowOutlines,
-        hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.key,
-        isFullscreen,
-        overrideIdToNodePathMappings,
-        previewSelectionAvailable,
-        selectedItems,
-        sequences,
-        timelinePosition,
-    ]);
-    const outlineRuntimeSnapshots = (0, use_runtime_values_1.useRuntimeValueSnapshots)(outlineRuntimeControls);
-    const outlineRuntimeValuesByStore = (0, react_1.useMemo)(() => new Map(outlineRuntimeControls.map((controls, index) => [
-        controls.runtimeValues,
-        outlineRuntimeSnapshots[index],
-    ])), [outlineRuntimeControls, outlineRuntimeSnapshots]);
-    const outlineTargets = (0, react_1.useMemo)(() => {
-        if (isFullscreen ||
-            !(0, interactivity_enabled_1.isStudioSelectionEnabled)() ||
-            !previewSelectionAvailable ||
-            !editorShowOutlines) {
-            return [];
-        }
-        const selectedSequenceKeys = (0, selected_outline_measurement_1.getSelectedSequenceKeys)(selectedItems);
-        const sequenceKeysContainingSelection = (0, selected_outline_measurement_1.getSequenceKeysContainingSelection)(selectedItems);
-        const selectedEffectsBySequenceKey = (0, selected_outline_measurement_1.getSelectedEffectFieldsBySequenceKey)(selectedItems);
-        const selectedTransformOriginInfo = (0, selected_outline_measurement_1.getSelectedTransformOriginInfo)(selectedItems);
-        const selectedCropInfo = (0, selected_outline_measurement_1.getSelectedCropInfo)(selectedItems);
-        const clientId = previewServerState.type === 'connected'
-            ? previewServerState.clientId
+        if (sequence.refForOutline === null) {
+            throw new Error('Expected sequence to have a ref for outline');
+        }
+        const selected = selectedSequenceKeys.has(key);
+        const containsSelection = sequenceKeysContainingSelection.has(key);
+        const nodePath = nodePathInfo.sequenceSubscriptionKey;
+        const sourceNodeKey = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(nodePath);
+        const showSelectedOutline = containsSelection || selectedSourceNodeKeys.has(sourceNodeKey);
+        const selectionNodePathInfo = firstNodePathInfoBySourceNode.get(sourceNodeKey);
+        if (selectionNodePathInfo === undefined) {
+            throw new Error('Expected a first sequence for the source node');
+        }
+        const { controls } = sequence;
+        const nodePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath);
+        const sourceFrame = targetTimelinePosition - keyframeDisplayOffset;
+        const dragOverrides = (_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {};
+        const runtimeValues = controls
+            ? ((_b = runtimeValuesByStore.get(controls.runtimeValues)) !== null && _b !== void 0 ? _b : controls.runtimeValues.getSnapshot())
+            : {};
+        const activeSchema = controls
+            ? (0, selected_outline_drag_1.getSelectedOutlineActiveSchema)({
+                schema: controls.schema,
+                currentRuntimeValueDotNotation: runtimeValues,
+                dragOverrides,
+                propStatus: nodePropStatuses,
+                frame: sourceFrame,
+            })
             : null;
-        return (0, selected_outline_measurement_1.getSequencesWithSelectableOutlines)({
-            sequences,
-            overrideIdsToNodePaths: overrideIdToNodePathMappings,
-            compositions,
-            timelinePosition,
-        }).map(({ key, keyframeDisplayOffset, nodePathInfo, sequence }) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            if (sequence.refForOutline === null) {
-                throw new Error('Expected sequence to have a ref for outline');
-            }
-            const selected = selectedSequenceKeys.has(key);
-            const containsSelection = sequenceKeysContainingSelection.has(key);
-            const nodePath = nodePathInfo.sequenceSubscriptionKey;
-            const { controls } = sequence;
-            const nodePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath);
-            const sourceFrame = timelinePosition - keyframeDisplayOffset;
-            const dragOverrides = (_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {};
-            const runtimeValues = controls
-                ? ((_b = outlineRuntimeValuesByStore.get(controls.runtimeValues)) !== null && _b !== void 0 ? _b : controls.runtimeValues.getSnapshot())
-                : {};
-            const activeSchema = controls
-                ? (0, selected_outline_drag_1.getSelectedOutlineActiveSchema)({
-                    schema: controls.schema,
-                    currentRuntimeValueDotNotation: runtimeValues,
-                    dragOverrides,
-                    propStatus: nodePropStatuses,
-                    frame: sourceFrame,
-                })
-                : null;
-            const cropValues = {
-                cropLeft: getEffectiveCropValue({
-                    activeSchema,
-                    dragOverrides,
-                    fieldKey: selected_outline_types_1.cropFieldKeys.left,
-                    frame: sourceFrame,
-                    propStatuses: nodePropStatuses,
-                    runtimeValues,
-                }),
-                cropRight: getEffectiveCropValue({
-                    activeSchema,
-                    dragOverrides,
-                    fieldKey: selected_outline_types_1.cropFieldKeys.right,
-                    frame: sourceFrame,
-                    propStatuses: nodePropStatuses,
-                    runtimeValues,
-                }),
-                cropTop: getEffectiveCropValue({
-                    activeSchema,
-                    dragOverrides,
-                    fieldKey: selected_outline_types_1.cropFieldKeys.top,
-                    frame: sourceFrame,
-                    propStatuses: nodePropStatuses,
-                    runtimeValues,
-                }),
-                cropBottom: getEffectiveCropValue({
-                    activeSchema,
-                    dragOverrides,
-                    fieldKey: selected_outline_types_1.cropFieldKeys.bottom,
-                    frame: sourceFrame,
-                    propStatuses: nodePropStatuses,
-                    runtimeValues,
-                }),
-            };
-            const crop = remotion_1.Internals.resolveSequenceCrop(cropValues);
-            const cropFields = getCropDragFields({
+        const cropValues = {
+            cropLeft: getEffectiveCropValue({
                 activeSchema,
-                cropValues,
+                dragOverrides,
+                fieldKey: selected_outline_types_1.cropFieldKeys.left,
+                frame: sourceFrame,
                 propStatuses: nodePropStatuses,
-            });
-            const fieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.translateFieldKey];
-            const propStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.translateFieldKey];
-            const scaleFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.scaleFieldKey];
-            const scalePropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.scaleFieldKey];
-            const rotationFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.rotateFieldKey];
-            const rotationPropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.rotateFieldKey];
-            const transformOriginFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.transformOriginFieldKey];
-            const transformOriginPropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.transformOriginFieldKey];
-            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: dragOverrides[selected_outline_types_1.transformOriginFieldKey],
-                    defaultValue: transformOriginFieldSchema.default,
-                    frame: sourceFrame,
-                    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 = previewInteractive &&
-                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 = previewInteractive &&
-                controls !== null &&
-                (scaleFieldSchema === null || scaleFieldSchema === void 0 ? void 0 : scaleFieldSchema.type) === 'scale' &&
-                canScaleDragStatus;
-            const canRotationDrag = previewInteractive &&
-                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
-                ? sourceFrame
-                : 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 = previewInteractive &&
-                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 selectedForCrop = (selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.sequenceKey) === key;
-            const cropSourceFrame = (selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.displayFrame) === null ||
-                (selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.displayFrame) === undefined
-                ? sourceFrame
-                : selectedCropInfo.displayFrame - keyframeDisplayOffset;
-            const canCropDrag = previewInteractive &&
-                selectedForCrop &&
-                controls !== null &&
-                cropFields !== null;
-            const canDropEffect = previewInteractive && (controls === null || controls === void 0 ? void 0 : controls.supportsEffects) === true;
-            return {
-                key,
+                runtimeValues,
+            }),
+            cropRight: getEffectiveCropValue({
+                activeSchema,
+                dragOverrides,
+                fieldKey: selected_outline_types_1.cropFieldKeys.right,
+                frame: sourceFrame,
+                propStatuses: nodePropStatuses,
+                runtimeValues,
+            }),
+            cropTop: getEffectiveCropValue({
+                activeSchema,
+                dragOverrides,
+                fieldKey: selected_outline_types_1.cropFieldKeys.top,
+                frame: sourceFrame,
+                propStatuses: nodePropStatuses,
+                runtimeValues,
+            }),
+            cropBottom: getEffectiveCropValue({
+                activeSchema,
+                dragOverrides,
+                fieldKey: selected_outline_types_1.cropFieldKeys.bottom,
+                frame: sourceFrame,
+                propStatuses: nodePropStatuses,
+                runtimeValues,
+            }),
+        };
+        const crop = remotion_1.Internals.resolveSequenceCrop(cropValues);
+        const selectedForTransformOrigin = (selectedTransformOriginInfo === null || selectedTransformOriginInfo === void 0 ? void 0 : selectedTransformOriginInfo.sequenceKey) === key;
+        const selectedForCrop = (selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.sequenceKey) === key;
+        const selectedForRotation = (selectedRotationInfo === null || selectedRotationInfo === void 0 ? void 0 : selectedRotationInfo.sequenceKey) === key;
+        const selectedForUvHandles = selectedEffectsBySequenceKey.has(key);
+        const fieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.translateFieldKey];
+        const propStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.translateFieldKey];
+        const scaleFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.scaleFieldKey];
+        const scalePropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.scaleFieldKey];
+        const rotationFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.rotateFieldKey];
+        const rotationPropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.rotateFieldKey];
+        const transformOriginFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.transformOriginFieldKey];
+        const transformOriginPropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.transformOriginFieldKey];
+        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: dragOverrides[selected_outline_types_1.transformOriginFieldKey],
+                defaultValue: transformOriginFieldSchema.default,
+                frame: sourceFrame,
+                shouldResortToDefaultValueIfUndefined: true,
+            })) !== null && _c !== void 0 ? _c : transformOriginFieldSchema.default)
+            : '50% 50%';
+        const layoutTarget = {
+            key,
+            containsSelection,
+            crop,
+            keyframeDisplayOffset,
+            nodePathInfo,
+            ref: sequence.refForOutline,
+            selected,
+            selectedForCrop,
+            selectedForRotation,
+            selectedForTransformOrigin,
+            selectedForUvHandles,
+            showSelectedOutline,
+            transformOriginValue: transformOriginValueForRotation,
+            selection: {
+                type: 'sequence',
+                nodePathInfo: selectionNodePathInfo,
+            },
+            sequence,
+        };
+        if (mode === 'layout') {
+            return [layoutTarget];
+        }
+        const cropFields = getCropDragFields({
+            activeSchema,
+            cropValues,
+            propStatuses: nodePropStatuses,
+        });
+        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 = previewInteractive &&
+            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 = previewInteractive &&
+            controls !== null &&
+            (scaleFieldSchema === null || scaleFieldSchema === void 0 ? void 0 : scaleFieldSchema.type) === 'scale' &&
+            canScaleDragStatus;
+        const canRotationDrag = previewInteractive &&
+            controls !== null &&
+            (rotationFieldSchema === null || rotationFieldSchema === void 0 ? void 0 : rotationFieldSchema.type) === 'rotation-css' &&
+            canRotationDragStatus;
+        const transform3DMode = manuallyEnabled3DTransformSequenceKeys.has(key) ||
+            [
+                'style.translate',
+                'style.scale',
+                'style.rotate',
+                'style.transformOrigin',
+            ].some((fieldKey) => (0, transform_3d_mode_2.propStatusHas3DTransformValue)({
+                fieldKey,
+                propStatus: nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[fieldKey],
+                runtimeValue: runtimeValues[fieldKey],
+            }));
+        const transformOriginSourceFrame = (selectedTransformOriginInfo === null || selectedTransformOriginInfo === void 0 ? void 0 : selectedTransformOriginInfo.displayFrame) === null ||
+            (selectedTransformOriginInfo === null || selectedTransformOriginInfo === void 0 ? void 0 : selectedTransformOriginInfo.displayFrame) === undefined
+            ? sourceFrame
+            : 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 = previewInteractive &&
+            (selectedForTransformOrigin || selectedForRotation) &&
+            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 cropSourceFrame = (selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.displayFrame) === null ||
+            (selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.displayFrame) === undefined
+            ? sourceFrame
+            : selectedCropInfo.displayFrame - keyframeDisplayOffset;
+        const canCropDrag = previewInteractive &&
+            selectedForCrop &&
+            controls !== null &&
+            cropFields !== null;
+        return [
+            {
+                ...layoutTarget,
                 canCrop: previewInteractive && controls !== null && cropFields !== null,
-                crop,
                 cropDrag: canCropDrag
                     ? {
-                        clientId: previewServerState.clientId,
+                        clientId: connectedClientId,
                         fields: cropFields,
                         nodePath,
                         schema: controls.schema,
@@ -670,23 +359,10 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
                             : null,
                     }
                     : null,
-                containsSelection,
-                effectDrop: canDropEffect
-                    ? {
-                        clientId: previewServerState.clientId,
-                        fileName: nodePath.absolutePath,
-                        nodePath,
-                    }
-                    : null,
-                nodePathInfo,
-                ref: sequence.refForOutline,
-                selected,
-                selection: { type: 'sequence', nodePathInfo },
-                sequence,
                 drag: canDrag
                     ? {
                         propStatus,
-                        clientId: previewServerState.clientId,
+                        clientId: connectedClientId,
                         fieldDefault: fieldSchema.default,
                         keyframeDisplayOffset,
                         nodePath,
@@ -696,7 +372,7 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
                 scaleDrag: canScaleDrag
                     ? {
                         propStatus: scalePropStatus,
-                        clientId: previewServerState.clientId,
+                        clientId: connectedClientId,
                         fieldDefault: scaleFieldSchema.default,
                         fieldSchema: scaleFieldSchema,
                         keyframeDisplayOffset,
@@ -722,18 +398,19 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
                 rotationDrag: canRotationDrag
                     ? {
                         propStatus: rotationPropStatus,
-                        clientId: previewServerState.clientId,
+                        clientId: connectedClientId,
                         fieldDefault: rotationFieldSchema.default,
                         fieldSchema: rotationFieldSchema,
                         keyframeDisplayOffset,
                         nodePath,
                         schema: controls.schema,
+                        transform3DMode,
                         transformOriginValue: transformOriginValueForRotation,
                     }
                     : null,
                 transformOriginDrag: canTransformOriginDrag
                     ? {
-                        clientId: previewServerState.clientId,
+                        clientId: connectedClientId,
                         keyframeDisplayOffset,
                         nodePath,
                         originDefault: transformOriginFieldSchema.default,
@@ -782,353 +459,190 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
                         })) !== null && _g !== void 0 ? _g : fieldSchema.default),
                     }
                     : null,
-                uvHandles: containsSelection
-                    ? (0, selected_outline_uv_1.getSelectedUvHandles)({
-                        propStatuses,
-                        clientId,
-                        getEffectDragOverrides,
-                        nodePath,
-                        selectedEffects: selectedEffectsBySequenceKey.get(key),
-                        sequence,
-                        sourceFrame: timelinePosition - keyframeDisplayOffset,
-                    })
-                    : [],
-            };
+            },
+        ];
+    });
+};
+const ActiveSelectedOutlineOverlayUnmemoized = ({ calculateOutlineTargetsForCurrentState, compositionHeight, compositionWidth, draggingOutline, getLatestOutlineTargetByKey, getSelectableOutlines, onDraggingChange, onContextMenuOpenChange, onSelect, scale, selectedSequenceKeys, sequenceKeysContainingSelection, sequences, translationX, translationY, }) => {
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const updateOutlinesRef = (0, react_1.useRef)(() => undefined);
+    const selectableOutlines = (0, react_1.useMemo)(() => {
+        return getSelectableOutlines(timelinePosition);
+    }, [getSelectableOutlines, timelinePosition]);
+    const outlineRuntimeControls = (0, react_1.useMemo)(() => {
+        return selectableOutlines.flatMap(({ key, sequence }) => {
+            if (!selectedSequenceKeys.has(key) &&
+                !sequenceKeysContainingSelection.has(key)) {
+                return [];
+            }
+            return sequence.controls ? [sequence.controls] : [];
         });
     }, [
-        propStatuses,
-        getDragOverrides,
-        getEffectDragOverrides,
-        getScaleLockState,
-        editorShowOutlines,
-        isFullscreen,
-        overrideIdToNodePathMappings,
-        previewInteractive,
-        previewSelectionAvailable,
-        previewServerState,
-        selectedItems,
-        sequences,
-        compositions,
-        timelinePosition,
+        selectableOutlines,
+        selectedSequenceKeys,
+        sequenceKeysContainingSelection,
+    ]);
+    const outlineRuntimeSnapshots = (0, use_runtime_values_1.useRuntimeValueSnapshots)(outlineRuntimeControls);
+    const outlineRuntimeValuesByStore = (0, react_1.useMemo)(() => new Map(outlineRuntimeControls.map((controls, index) => [
+        controls.runtimeValues,
+        outlineRuntimeSnapshots[index],
+    ])), [outlineRuntimeControls, outlineRuntimeSnapshots]);
+    const outlineTargets = (0, react_1.useMemo)(() => calculateOutlineTargetsForCurrentState({
+        mode: 'layout',
+        runtimeValuesByStore: outlineRuntimeValuesByStore,
+        selectableOutlines,
+        targetKey: null,
+        targetTimelinePosition: timelinePosition,
+    }), [
+        calculateOutlineTargetsForCurrentState,
         outlineRuntimeValuesByStore,
+        selectableOutlines,
+        timelinePosition,
     ]);
-    (0, react_1.useEffect)(() => {
-        if ((hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'canvas' &&
-            !outlineTargets.some((target) => target.key === hoveredSequence.key)) {
-            setHoveredSequence((currentHover) => (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover);
-        }
-    }, [hoveredSequence, outlineTargets, setHoveredSequence]);
-    const targetsByKey = (0, react_1.useMemo)(() => {
-        return new Map(outlineTargets.map((target) => [target.key, target]));
-    }, [outlineTargets]);
-    const outlinesForRendering = (0, react_1.useMemo)(() => {
-        return (0, exports.orderOutlinesForRendering)({ outlines, sequences, targetsByKey });
-    }, [outlines, sequences, targetsByKey]);
-    const outlinesByKey = (0, react_1.useMemo)(() => {
-        return new Map(outlines.map((outline) => [outline.key, outline]));
-    }, [outlines]);
-    const allDragTargets = (0, react_1.useMemo)(() => {
-        return outlineTargets.flatMap((target) => (target.selected || target.containsSelection) && target.drag !== null
-            ? [target.drag]
-            : []);
-    }, [outlineTargets]);
-    const allDragOutlines = (0, react_1.useMemo)(() => {
-        return outlineTargets.flatMap((target) => {
-            if ((!target.selected && !target.containsSelection) ||
-                target.drag === null) {
-                return [];
-            }
-            const outline = outlinesByKey.get(target.key);
-            return outline === undefined ? [] : [outline];
-        });
-    }, [outlineTargets, outlinesByKey]);
-    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 guidesForSnap = (0, react_1.useMemo)(() => {
-        if (!editorShowGuides || (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) !== 'composition') {
+    const outlineTargetsRef = (0, react_1.useRef)(outlineTargets);
+    const getOutlineTargets = (0, react_1.useCallback)(() => outlineTargetsRef.current, []);
+    (0, react_1.useLayoutEffect)(() => {
+        outlineTargetsRef.current = outlineTargets;
+        updateOutlinesRef.current();
+    }, [outlineTargets, scale, translationX, translationY]);
+    return (jsx_runtime_1.jsx(SelectedOutlineRenderer_1.SelectedOutlineRenderer, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: draggingOutline, getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getOutlineTargets: getOutlineTargets, onDraggingChange: onDraggingChange, onContextMenuOpenChange: onContextMenuOpenChange, onSelect: onSelect, scale: scale, sequences: sequences, updateOutlinesRef: updateOutlinesRef }));
+};
+const ActiveSelectedOutlineOverlay = react_1.default.memo(ActiveSelectedOutlineOverlayUnmemoized);
+const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, compositionWidth, scale, translationX, translationY, }) => {
+    const { selectedItems, selectItem } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { getScaleLockState } = (0, react_1.useContext)(scale_lock_1.ScaleLockContext);
+    const { manuallyEnabledSequenceKeys } = (0, react_1.useContext)(transform_3d_mode_1.Transform3DModeStateContext);
+    const { editorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
+    const setHoveredSequence = (0, timeline_sequence_hover_1.useSetTimelineSequenceHover)();
+    const hoveredSequence = (0, timeline_sequence_hover_1.useTimelineSequenceHoverState)();
+    const isFullscreen = (0, use_is_fullscreen_1.useIsFullscreen)();
+    const { getCurrentFrame } = player_1.PlayerInternals.usePlayerMethods();
+    const [draggingOutline, setDraggingOutline] = (0, react_1.useState)(false);
+    const [canvasContextMenuOpen, setCanvasContextMenuOpen] = (0, react_1.useState)(false);
+    const previewSelectionAvailable = previewServerState.type === 'connected' || window.remotion_isReadOnlyStudio;
+    const selectedSequenceKeys = (0, react_1.useMemo)(() => (0, selected_outline_measurement_1.getSelectedSequenceKeys)(selectedItems), [selectedItems]);
+    const sequenceKeysContainingSelection = (0, react_1.useMemo)(() => (0, selected_outline_measurement_1.getSequenceKeysContainingSelection)(selectedItems), [selectedItems]);
+    const selectedEffectsBySequenceKey = (0, react_1.useMemo)(() => (0, selected_outline_measurement_1.getSelectedEffectFieldsBySequenceKey)(selectedItems), [selectedItems]);
+    const selectedTransformOriginInfo = (0, react_1.useMemo)(() => (0, selected_outline_measurement_1.getSelectedTransformOriginInfo)(selectedItems), [selectedItems]);
+    const selectedRotationInfo = (0, react_1.useMemo)(() => (0, selected_outline_measurement_1.getSelectedRotationInfo)(selectedItems), [selectedItems]);
+    const selectedCropInfo = (0, react_1.useMemo)(() => (0, selected_outline_measurement_1.getSelectedCropInfo)(selectedItems), [selectedItems]);
+    const getSelectableOutlines = (0, react_1.useCallback)((timelinePosition) => {
+        if (isFullscreen ||
+            !(0, interactivity_enabled_1.isStudioSelectionEnabled)() ||
+            !previewSelectionAvailable ||
+            !editorShowOutlines) {
             return [];
         }
-        return guidesList.filter((guide) => guide.compositionId === canvasContent.compositionId);
-    }, [canvasContent, editorShowGuides, guidesList]);
-    const snapTargets = (0, react_1.useMemo)(() => {
-        return (0, selected_outline_snap_1.getSelectedOutlineSnapTargets)({
-            compositionHeight,
-            compositionWidth,
-            guides: guidesForSnap,
-        });
-    }, [compositionHeight, compositionWidth, guidesForSnap]);
-    const saveKeyboardNudgeSession = (0, react_1.useCallback)(() => {
-        const session = keyboardNudgeSessionRef.current;
-        if (session === null) {
-            return;
-        }
-        keyboardNudgeSessionRef.current = null;
-        const changes = (0, selected_outline_drag_1.getSelectedOutlineDragChanges)({
-            dragStates: session.dragStates,
-            lastValues: session.lastValues,
-        });
-        if (changes.length === 0) {
-            (0, selected_outline_drag_1.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,
-                    addedKeyframes: null,
-                    movedKeyframes: null,
-                    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(),
-            (0, call_add_keyframe_1.callAddKeyframes)({
-                sequenceKeyframes: keyframedChanges,
-                effectKeyframes: [],
-                setPropStatuses,
-                clientId: session.clientId,
-            }),
-        ])
-            .catch((err) => {
-            (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${err instanceof Error ? err.message : String(err)}`, 4000);
-        })
-            .finally(() => {
-            (0, selected_outline_drag_1.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 = (0, selected_outline_drag_1.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: (0, selected_outline_drag_1.getSelectedOutlineDragStates)({
-                    dragTargets: allDragTargets,
-                    getDragOverrides,
-                    timelinePosition,
-                }),
-                lastValues: new Map(),
-            };
-        })();
-        keyboardNudgeSessionRef.current = activeSession;
-        const nextDeltas = (0, selected_outline_drag_1.getSelectedOutlineKeyboardNudgeDeltas)({
-            deltaX: activeSession.deltaX,
-            deltaY: activeSession.deltaY,
-            direction,
-            shiftKey: event.shiftKey,
-        });
-        activeSession.deltaX = nextDeltas.deltaX;
-        activeSession.deltaY = nextDeltas.deltaY;
-        const lastValues = (0, selected_outline_drag_1.getSelectedOutlineDragValues)({
-            dragStates: activeSession.dragStates,
-            deltaX: activeSession.deltaX,
-            deltaY: activeSession.deltaY,
+        return (0, selected_outline_measurement_1.getSequencesWithSelectableOutlines)({
+            sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            compositions,
+            timelinePosition,
         });
-        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, selected_outline_types_1.translateFieldKey, remotion_1.Internals.makeKeyframedDragOverride({
-                    status: dragState.target.propStatus,
-                    frame: dragState.sourceFrame,
-                    value,
-                }));
-            }
-            else {
-                setDragOverrides(dragState.target.nodePath, selected_outline_types_1.translateFieldKey, remotion_1.Internals.makeStaticDragOverride(value));
-            }
-        }
     }, [
-        allDragTargets,
+        compositions,
+        editorShowOutlines,
+        isFullscreen,
+        overrideIdToNodePathMappings,
+        previewSelectionAvailable,
+        sequences,
+    ]);
+    const calculateOutlineTargetsForCurrentState = (0, react_1.useCallback)((options) => calculateOutlineTargets({
+        ...options,
+        connectedClientId: previewServerState.type === 'connected'
+            ? previewServerState.clientId
+            : null,
+        editorShowOutlines,
         getDragOverrides,
-        seekWithArrowKey,
-        selectedItems.length,
-        setDragOverrides,
-        timelinePosition,
+        getScaleLockState,
+        isFullscreen,
+        manuallyEnabled3DTransformSequenceKeys: manuallyEnabledSequenceKeys,
+        previewSelectionAvailable,
+        propStatuses,
+        selectedCropInfo,
+        selectedEffectsBySequenceKey,
+        selectedRotationInfo,
+        selectedSequenceKeys,
+        selectedTransformOriginInfo,
+        sequenceKeysContainingSelection,
+        studioInteractivityEnabled: (0, interactivity_enabled_1.isStudioInteractivityEnabled)(),
+    }), [
+        editorShowOutlines,
+        getDragOverrides,
+        getScaleLockState,
+        isFullscreen,
+        manuallyEnabledSequenceKeys,
+        previewSelectionAvailable,
+        previewServerState,
+        propStatuses,
+        selectedCropInfo,
+        selectedEffectsBySequenceKey,
+        selectedRotationInfo,
+        selectedSequenceKeys,
+        selectedTransformOriginInfo,
+        sequenceKeysContainingSelection,
     ]);
-    const onArrowKeyUp = (0, react_1.useCallback)((event) => {
-        const direction = (0, selected_outline_drag_1.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();
-            }
+    const calculateOutlineTargetsRef = (0, react_1.useRef)(calculateOutlineTargetsForCurrentState);
+    const getSelectableOutlinesRef = (0, react_1.useRef)(getSelectableOutlines);
+    const selectableOutlinesCacheRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        calculateOutlineTargetsRef.current = calculateOutlineTargetsForCurrentState;
+        getSelectableOutlinesRef.current = getSelectableOutlines;
+    }, [calculateOutlineTargetsForCurrentState, getSelectableOutlines]);
+    const getSelectableOutlinesAtFrame = (0, react_1.useCallback)((timelinePosition) => {
+        const currentGetSelectableOutlines = getSelectableOutlinesRef.current;
+        const cached = selectableOutlinesCacheRef.current;
+        if ((cached === null || cached === void 0 ? void 0 : cached.timelinePosition) === timelinePosition &&
+            cached.getSelectableOutlines === currentGetSelectableOutlines) {
+            return cached.selectableOutlines;
+        }
+        const selectableOutlines = currentGetSelectableOutlines(timelinePosition);
+        selectableOutlinesCacheRef.current = {
+            getSelectableOutlines: currentGetSelectableOutlines,
+            selectableOutlines,
+            timelinePosition,
         };
-    }, [keybindings, onArrowKeyDown, onArrowKeyUp, saveKeyboardNudgeSession]);
-    const updateOutlines = (0, react_1.useCallback)(() => {
-        if (overlayRef.current === null || outlineTargets.length === 0) {
-            setOutlines((prevOutlines) => prevOutlines.length === 0 ? prevOutlines : []);
-            return;
+        return selectableOutlines;
+    }, []);
+    const getLatestOutlineTargetByKey = (0, react_1.useCallback)((key) => {
+        const timelinePosition = getCurrentFrame();
+        const target = calculateOutlineTargetsRef.current({
+            mode: 'controls',
+            runtimeValuesByStore: new Map(),
+            selectableOutlines: getSelectableOutlinesAtFrame(timelinePosition),
+            targetKey: key,
+            targetTimelinePosition: timelinePosition,
+        })[0];
+        return target;
+    }, [getCurrentFrame, getSelectableOutlinesAtFrame]);
+    const getCurrentSelectableOutlines = (0, react_1.useCallback)(() => getSelectableOutlinesAtFrame(getCurrentFrame()), [getCurrentFrame, getSelectableOutlinesAtFrame]);
+    const onDraggingChange = (0, react_1.useCallback)((dragging) => {
+        setDraggingOutline(dragging);
+        if (dragging) {
+            setHoveredSequence((currentHover) => (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover);
         }
-        const nextOutlines = (0, selected_outline_measurement_1.measureOutlines)(overlayRef.current, outlineTargets);
-        setOutlines((prevOutlines) => (0, selected_outline_measurement_1.outlinesAreEqual)(prevOutlines, nextOutlines)
-            ? prevOutlines
-            : nextOutlines);
-    }, [outlineTargets]);
-    (0, react_1.useLayoutEffect)(() => {
-        updateOutlines();
-    }, [outlineTargets, scale, translationX, translationY, updateOutlines]);
+    }, [setHoveredSequence]);
+    const selectOutlineItem = (0, react_1.useCallback)((item, interaction) => {
+        selectItem(item, interaction, undefined, { reveal: true });
+    }, [selectItem]);
+    const measurementActive = canvasHovered ||
+        draggingOutline ||
+        canvasContextMenuOpen ||
+        sequenceKeysContainingSelection.size > 0 ||
+        (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'timeline';
     (0, react_1.useLayoutEffect)(() => {
-        if (outlineTargets.length === 0 || typeof ResizeObserver === 'undefined') {
+        if (measurementActive) {
             return;
         }
-        let animationFrame = null;
-        const scheduleUpdate = () => {
-            if (animationFrame !== null) {
-                return;
-            }
-            animationFrame = requestAnimationFrame(() => {
-                animationFrame = null;
-                updateOutlines();
-            });
-        };
-        const resizeObserver = new ResizeObserver(scheduleUpdate);
-        if (overlayRef.current !== null) {
-            resizeObserver.observe(overlayRef.current);
-        }
-        for (const target of outlineTargets) {
-            if (target.ref.current !== null) {
-                resizeObserver.observe(target.ref.current);
-            }
-        }
-        return () => {
-            if (animationFrame !== null) {
-                cancelAnimationFrame(animationFrame);
-            }
-            resizeObserver.disconnect();
-        };
-    }, [outlineTargets, updateOutlines]);
-    if (outlineTargets.length === 0) {
-        return null;
-    }
-    return (jsx_runtime_1.jsxs("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: [
-            jsx_runtime_1.jsx(SelectedOutlineSnapIndicators, { activeSnapPoints: activeSnapPoints, compositionHeight: compositionHeight, compositionWidth: compositionWidth, scale: scale }), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineElement, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, allRotationDragTargets: allRotationDragTargets, allScaleDragTargets: allScaleDragTargets, dragging: draggingOutline, hovered: (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.key) === outline.key, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: selectOutlineItem, scale: scale, snapTargets: snapTargets, target: targetsByKey.get(outline.key) }, outline.key))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineTransformOriginHandle, { outline: outline, onDraggingChange: onDraggingChange, target: targetsByKey.get(outline.key) }, `${outline.key}-transform-origin`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: selectOutlineItem, outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`)))] }));
+        setHoveredSequence((currentHover) => (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover);
+    }, [measurementActive, setHoveredSequence]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(SelectedOutlineKeyboardControls_1.SelectedOutlineKeyboardControls, { getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getSelectableOutlines: getCurrentSelectableOutlines }), measurementActive ? (jsx_runtime_1.jsx(ActiveSelectedOutlineOverlay, { calculateOutlineTargetsForCurrentState: calculateOutlineTargetsForCurrentState, compositionHeight: compositionHeight, compositionWidth: compositionWidth, draggingOutline: draggingOutline, getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getSelectableOutlines: getSelectableOutlines, onDraggingChange: onDraggingChange, onContextMenuOpenChange: setCanvasContextMenuOpen, onSelect: selectOutlineItem, scale: scale, selectedSequenceKeys: selectedSequenceKeys, sequenceKeysContainingSelection: sequenceKeysContainingSelection, sequences: sequences, translationX: translationX, translationY: translationY })) : null] }));
 };
-exports.SelectedOutlineOverlay = SelectedOutlineOverlay;
+exports.SelectedOutlineOverlay = react_1.default.memo(SelectedOutlineOverlayUnmemoized);