@remotion/studio 4.0.506 → 4.0.507

package/dist/components/SelectedOutlineElement.js

@@ -33,923 +33,40 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineElement = exports.SelectedOutlineTransformOriginHandle = void 0;
+exports.SelectedOutlineElement = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
-const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../helpers/client-id");
-const colors_1 = require("../helpers/colors");
-const format_file_location_1 = require("../helpers/format-file-location");
 const get_connected_compositions_1 = require("../helpers/get-connected-compositions");
 const get_sequence_double_click_action_1 = require("../helpers/get-sequence-double-click-action");
 const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
 const open_in_editor_1 = require("../helpers/open-in-editor");
-const pointer_session_1 = require("../helpers/pointer-session");
-const editor_snapping_1 = require("../state/editor-snapping");
+const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const modals_1 = require("../state/modals");
+const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
 const call_api_1 = require("./call-api");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
-const ContextMenu_1 = require("./ContextMenu");
-const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
-const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-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_types_1 = require("./selected-outline-types");
-const selected_outline_uv_1 = require("./selected-outline-uv");
 const SelectedOutlineCropControls_1 = require("./SelectedOutlineCropControls");
-const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
+const SelectedOutlinePolygon_1 = require("./SelectedOutlinePolygon");
+const SelectedOutlineRotationCornerHandle_1 = require("./SelectedOutlineRotationCornerHandle");
+const SelectedOutlineScaleEdgeLine_1 = require("./SelectedOutlineScaleEdgeLine");
 const disable_sequence_interactivity_1 = require("./Timeline/disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./Timeline/duplicate-selected-timeline-item");
-const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
 const get_sequence_context_menu_items_1 = require("./Timeline/get-sequence-context-menu-items");
-const imperative_state_1 = require("./Timeline/imperative-state");
-const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const timeline_asset_link_1 = require("./Timeline/timeline-asset-link");
-const timeline_translate_utils_1 = require("./Timeline/timeline-translate-utils");
 const get_stack_1 = require("./Timeline/TimelineStack/get-stack");
-const transform_origin_utils_1 = require("./Timeline/transform-origin-utils");
+const use_default_editor_info_1 = require("./use-default-editor-info");
 const use_select_asset_1 = require("./use-select-asset");
-const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, target }) => {
-    var _a, _b;
-    const { setDragOverrides, clearDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
-    const transformOriginDrag = (_a = target === null || target === void 0 ? void 0 : target.transformOriginDrag) !== null && _a !== void 0 ? _a : null;
-    const crop = target === null || target === void 0 ? void 0 : target.crop;
-    const transformOriginPoints = (_b = outline.uncroppedPoints) !== null && _b !== void 0 ? _b : outline.points;
-    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)(transformOriginPoints, uv)), [transformOriginPoints, 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 = (0, selected_outline_drag_1.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();
-        let last = null;
-        let currentPointerX = event.clientX;
-        let currentPointerY = event.clientY;
-        let axisLocked = event.shiftKey;
-        onDraggingChange(true);
-        (0, ForceSpecificCursor_1.forceSpecificCursor)('crosshair');
-        const updateFromPointerPosition = () => {
-            const point = {
-                x: currentPointerX - svgRect.left,
-                y: currentPointerY - svgRect.top,
-            };
-            const rawUv = (0, selected_outline_uv_1.getUvCoordinateForPoint)(transformOriginPoints, point);
-            const lockedAxis = (0, selected_outline_drag_1.getSelectedOutlineTransformOriginLockedAxis)({
-                axisLocked,
-                dimensions,
-                startUv: uv,
-                uv: rawUv,
-            });
-            const axisLockedUv = (0, selected_outline_drag_1.applySelectedOutlineTransformOriginAxisLock)({
-                lockedAxis,
-                startUv: uv,
-                uv: rawUv,
-            });
-            const snapPoint = lockedAxis === null
-                ? point
-                : (0, selected_outline_uv_1.getUvHandlePosition)(transformOriginPoints, axisLockedUv);
-            const snappedUv = editorSnapping
-                ? (0, selected_outline_drag_1.snapSelectedOutlineTransformOriginUv)({
-                    crop: crop !== null && crop !== void 0 ? crop : null,
-                    point: snapPoint,
-                    points: transformOriginPoints,
-                    thresholdPx: null,
-                    uv: axisLockedUv,
-                })
-                : axisLockedUv;
-            const nextUv = (0, selected_outline_drag_1.applySelectedOutlineTransformOriginAxisLock)({
-                lockedAxis,
-                startUv: uv,
-                uv: snappedUv,
-            });
-            const deltaOrigin = [
-                (nextUv[0] - uv[0]) * dimensions.width,
-                (nextUv[1] - uv[1]) * dimensions.height,
-            ];
-            const [nextTranslateX, nextTranslateY] = (0, selected_outline_drag_1.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, selected_outline_types_1.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, selected_outline_types_1.translateFieldKey, transformOriginDrag.translatePropStatus.status === 'keyframed'
-                ? transformOriginDrag.originPropStatus.status === 'keyframed'
-                    ? remotion_1.Internals.makeKeyframedDragOverride({
-                        status: transformOriginDrag.translatePropStatus,
-                        frame: transformOriginDrag.sourceFrame,
-                        value: translate,
-                    })
-                    : {
-                        type: 'keyframed',
-                        status: {
-                            ...transformOriginDrag.translatePropStatus,
-                            keyframes: transformOriginDrag.translatePropStatus.keyframes.map((keyframe) => {
-                                const keyframeTranslate = (0, timeline_translate_utils_1.parseTranslate)(String(keyframe.value));
-                                return {
-                                    ...keyframe,
-                                    value: (0, timeline_translate_utils_1.serializeTranslate)(keyframeTranslate[0] +
-                                        nextTranslateX -
-                                        startTranslate[0], keyframeTranslate[1] +
-                                        nextTranslateY -
-                                        startTranslate[1]),
-                                };
-                            }),
-                        },
-                    }
-                : remotion_1.Internals.makeStaticDragOverride(translate));
-        };
-        updateFromPointerPosition();
-        const onPointerMove = (moveEvent) => {
-            moveEvent.preventDefault();
-            currentPointerX = moveEvent.clientX;
-            currentPointerY = moveEvent.clientY;
-            axisLocked = moveEvent.shiftKey;
-            updateFromPointerPosition();
-        };
-        const onKeyChange = (keyEvent) => {
-            if (keyEvent.key !== 'Shift') {
-                return;
-            }
-            const nextAxisLocked = keyEvent.type === 'keydown';
-            if (nextAxisLocked === axisLocked) {
-                return;
-            }
-            axisLocked = nextAxisLocked;
-            updateFromPointerPosition();
-        };
-        const onPointerUp = () => {
-            window.removeEventListener('keydown', onKeyChange);
-            window.removeEventListener('keyup', onKeyChange);
-            (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-            onDraggingChange(false);
-            if (last === null || (0, selected_outline_drag_1.uvsEqual)(last.uv, uv)) {
-                clearDragOverrides(transformOriginDrag.nodePath);
-                return;
-            }
-            const { staticChanges, keyframedChanges } = (0, selected_outline_drag_1.getSelectedOutlineTransformOriginDragChanges)({
-                target: transformOriginDrag,
-                startTranslate,
-                origin: last.origin,
-                translate: last.translate,
-            });
-            if (staticChanges.length === 0 && keyframedChanges.length === 0) {
-                clearDragOverrides(transformOriginDrag.nodePath);
-                return;
-            }
-            const promise = staticChanges.length === 0
-                ? (0, call_add_keyframe_1.callAddKeyframes)({
-                    sequenceKeyframes: keyframedChanges,
-                    effectKeyframes: [],
-                    setPropStatuses,
-                    clientId: transformOriginDrag.clientId,
-                })
-                : (0, save_sequence_prop_1.saveSequenceProps)({
-                    changes: staticChanges,
-                    addedKeyframes: keyframedChanges,
-                    movedKeyframes: null,
-                    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);
-            });
-        };
-        (0, pointer_session_1.startPointerSession)({
-            event,
-            target: event.currentTarget,
-            onMove: onPointerMove,
-            onEnd: onPointerUp,
-        });
-        window.addEventListener('keydown', onKeyChange);
-        window.addEventListener('keyup', onKeyChange);
-    }, [
-        clearDragOverrides,
-        crop,
-        editorSnapping,
-        onDraggingChange,
-        outline,
-        parsed,
-        setDragOverrides,
-        setPropStatuses,
-        transformOriginDrag,
-        transformOriginPoints,
-        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", style: {
-            filter: colors_1.SELECTED_OUTLINE_DROP_SHADOW,
-        }, 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" })
-        ] }));
-};
-exports.SelectedOutlineTransformOriginHandle = SelectedOutlineTransformOriginHandle;
-const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, snapTargets, target, }) => {
-    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 { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
-    const polygonRef = (0, react_1.useRef)(null);
-    const points = (0, react_1.useMemo)(() => outline.points.map(selected_outline_measurement_1.pointToString).join(' '), [outline.points]);
-    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) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        const interaction = (0, selected_outline_measurement_1.getOutlineSelectionInteraction)(event);
-        const shouldUpdateSelection = !selected || interaction.shiftKey || interaction.toggleKey;
-        if (shouldUpdateSelection) {
-            onSelect(target.selection, interaction);
-        }
-        if (drag === null || interaction.shiftKey || interaction.toggleKey) {
-            return;
-        }
-        if ((0, focus_inspector_field_1.commitPendingInspectorFields)()) {
-            return;
-        }
-        const startPointerX = event.clientX;
-        const startPointerY = event.clientY;
-        const dragStates = (0, selected_outline_drag_1.getSelectedOutlineDragStates)({
-            dragTargets: selected ? allDragTargets : [drag],
-            getDragOverrides,
-            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
-        });
-        let lastValues = new Map();
-        let currentPointerX = startPointerX;
-        let currentPointerY = startPointerY;
-        let axisLocked = false;
-        let dragStarted = false;
-        let snappingDisabled = event.metaKey || event.ctrlKey;
-        const updateDragOverrides = () => {
-            const screenDeltaX = currentPointerX - startPointerX;
-            const screenDeltaY = currentPointerY - startPointerY;
-            if (!dragStarted) {
-                if (!(0, selected_outline_drag_1.isSelectedOutlineDragPastThreshold)({
-                    deltaX: screenDeltaX,
-                    deltaY: screenDeltaY,
-                })) {
-                    return;
-                }
-                dragStarted = true;
-                onDraggingChange(true);
-                (0, ForceSpecificCursor_1.forceSpecificCursor)('default');
-            }
-            const axisLockedDirection = axisLocked
-                ? Math.abs(screenDeltaX) >= Math.abs(screenDeltaY)
-                    ? 'horizontal'
-                    : 'vertical'
-                : null;
-            const dragDelta = (0, selected_outline_drag_1.applySelectedOutlineDragAxisLock)({
-                deltaX: screenDeltaX / scale,
-                deltaY: screenDeltaY / scale,
-                axisLocked,
-            });
-            let { deltaX, deltaY } = dragDelta;
-            if (editorSnapping && !snappingDisabled) {
-                const snapResult = (0, selected_outline_snap_1.findSelectedOutlineSnap)({
-                    allowX: axisLockedDirection !== 'vertical',
-                    allowY: axisLockedDirection !== 'horizontal',
-                    deltaX,
-                    deltaY,
-                    outlines: selected ? allDragOutlines : [outline],
-                    scale,
-                    targets: snapTargets,
-                });
-                if (snapResult.snapOffsetX !== null) {
-                    deltaX += snapResult.snapOffsetX;
-                }
-                if (snapResult.snapOffsetY !== null) {
-                    deltaY += snapResult.snapOffsetY;
-                }
-                onSnapPointsChange(snapResult.activeSnapPoints);
-            }
-            else {
-                onSnapPointsChange([]);
-            }
-            lastValues = (0, selected_outline_drag_1.getSelectedOutlineDragValues)({
-                dragStates,
-                deltaX,
-                deltaY,
-            });
-            for (const dragState of 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));
-                }
-            }
-        };
-        const onPointerMove = (moveEvent) => {
-            moveEvent.preventDefault();
-            currentPointerX = moveEvent.clientX;
-            currentPointerY = moveEvent.clientY;
-            axisLocked = moveEvent.shiftKey;
-            snappingDisabled = moveEvent.metaKey || moveEvent.ctrlKey;
-            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('keydown', onKeyChange);
-            window.removeEventListener('keyup', onKeyChange);
-            if (dragStarted) {
-                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-                onDraggingChange(false);
-            }
-            const changes = (0, selected_outline_drag_1.getSelectedOutlineDragChanges)({
-                dragStates,
-                lastValues,
-            });
-            if (changes.length === 0) {
-                (0, selected_outline_drag_1.clearSelectedOutlineDragOverrides)({ clearDragOverrides, 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: drag.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: drag.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 });
-            });
-        };
-        (0, pointer_session_1.startPointerSession)({
-            event,
-            target: event.currentTarget,
-            onMove: onPointerMove,
-            onEnd: onPointerUp,
-        });
-        window.addEventListener('keydown', onKeyChange);
-        window.addEventListener('keyup', onKeyChange);
-    }, [
-        allDragTargets,
-        allDragOutlines,
-        clearDragOverrides,
-        drag,
-        editorSnapping,
-        getDragOverrides,
-        onDraggingChange,
-        onSelect,
-        onSnapPointsChange,
-        outline,
-        scale,
-        selected,
-        setPropStatuses,
-        setDragOverrides,
-        snapTargets,
-        target,
-    ]);
-    const onDoubleClick = react_1.default.useCallback((event) => {
-        if (target === undefined) {
-            return;
-        }
-        if (!onDoubleClickTarget(target, event.button)) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-    }, [onDoubleClickTarget, 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: effectDropHovered ? colors_1.TIMELINE_DROP_BLUE_ALPHA_12 : colors_1.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);
-                    }
-                }, onPointerLeave: () => {
-                    if (!dragging) {
-                        onHoverChange(null);
-                    }
-                }, onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onDragOver: effectDrop === null ? undefined : onEffectDragOver, onDragLeave: effectDrop === null ? undefined : onEffectDragLeave, onDrop: effectDrop === null ? undefined : onEffectDrop }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: polygonRef, getItems: onContextMenuOpen })
-        ] }));
-};
-const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, 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 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);
-    const edgeInfo = (0, react_1.useMemo)(() => (0, selected_outline_drag_1.getSelectedOutlineScaleEdgeInfo)(outline.points, edge), [edge, outline.points]);
-    const onPointerDown = react_1.default.useCallback((event) => {
-        if (event.button !== 0 || scaleDrag === null || edgeInfo === null) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        const interaction = (0, selected_outline_measurement_1.getOutlineSelectionInteraction)(event);
-        const shouldUpdateSelection = !selected || interaction.shiftKey || interaction.toggleKey;
-        if (shouldUpdateSelection && target !== undefined) {
-            onSelect(target.selection, interaction);
-        }
-        if (interaction.shiftKey || interaction.toggleKey) {
-            return;
-        }
-        if ((0, focus_inspector_field_1.commitPendingInspectorFields)()) {
-            return;
-        }
-        const startPointer = { x: event.clientX, y: event.clientY };
-        const dragStates = (0, selected_outline_drag_1.getSelectedOutlineScaleDragStates)({
-            dragTargets: selected ? allScaleDragTargets : [scaleDrag],
-            getDragOverrides,
-            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
-        });
-        let lastValues = new Map();
-        let dragStarted = false;
-        const onPointerMove = (moveEvent) => {
-            moveEvent.preventDefault();
-            const delta = {
-                x: moveEvent.clientX - startPointer.x,
-                y: moveEvent.clientY - startPointer.y,
-            };
-            if (!dragStarted) {
-                if (!(0, selected_outline_drag_1.isSelectedOutlineDragPastThreshold)({
-                    deltaX: delta.x,
-                    deltaY: delta.y,
-                })) {
-                    return;
-                }
-                dragStarted = true;
-                onDraggingChange(true);
-                (0, ForceSpecificCursor_1.forceSpecificCursor)(edgeInfo.cursor);
-            }
-            const projectedDelta = (0, selected_outline_measurement_1.dot)(delta, edgeInfo.normal);
-            const scaleFactor = Math.max(0.001, 1 + projectedDelta / edgeInfo.extent);
-            lastValues = (0, selected_outline_drag_1.getSelectedOutlineScaleDragValues)({
-                dragStates,
-                axis: edgeInfo.axis,
-                scaleFactor,
-            });
-            for (const dragState of dragStates) {
-                const value = lastValues.get(dragState.key);
-                if (value === undefined) {
-                    throw new Error('Expected scale drag value to be available');
-                }
-                if (dragState.target.propStatus.status === 'keyframed') {
-                    setDragOverrides(dragState.target.nodePath, selected_outline_types_1.scaleFieldKey, remotion_1.Internals.makeKeyframedDragOverride({
-                        status: dragState.target.propStatus,
-                        frame: dragState.sourceFrame,
-                        value,
-                    }));
-                }
-                else {
-                    setDragOverrides(dragState.target.nodePath, selected_outline_types_1.scaleFieldKey, remotion_1.Internals.makeStaticDragOverride(value));
-                }
-            }
-        };
-        const onPointerUp = () => {
-            if (dragStarted) {
-                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-                onDraggingChange(false);
-            }
-            const changes = (0, selected_outline_drag_1.getSelectedOutlineScaleDragChanges)({
-                dragStates,
-                lastValues,
-            });
-            if (changes.length === 0) {
-                (0, selected_outline_drag_1.clearSelectedOutlineScaleDragOverrides)({
-                    clearDragOverrides,
-                    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: scaleDrag.clientId,
-                        undoLabel: changes.length > 1
-                            ? 'Scale selected sequences'
-                            : 'Scale sequence',
-                        redoLabel: changes.length > 1
-                            ? 'Scale selected sequences back'
-                            : 'Scale sequence back',
-                    })
-                    : Promise.resolve(),
-                (0, call_add_keyframe_1.callAddKeyframes)({
-                    sequenceKeyframes: keyframedChanges,
-                    effectKeyframes: [],
-                    setPropStatuses,
-                    clientId: scaleDrag.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.clearSelectedOutlineScaleDragOverrides)({
-                    clearDragOverrides,
-                    dragStates,
-                });
-            });
-        };
-        (0, pointer_session_1.startPointerSession)({
-            event,
-            target: event.currentTarget,
-            onMove: onPointerMove,
-            onEnd: onPointerUp,
-        });
-    }, [
-        allScaleDragTargets,
-        clearDragOverrides,
-        edgeInfo,
-        getDragOverrides,
-        onDraggingChange,
-        onSelect,
-        scaleDrag,
-        selected,
-        setPropStatuses,
-        setDragOverrides,
-        target,
-    ]);
-    if (scaleDrag === null || edgeInfo === null) {
-        return null;
-    }
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("line", { ref: lineRef, x1: edgeInfo.start.x, y1: edgeInfo.start.y, x2: edgeInfo.end.x, y2: edgeInfo.end.y, stroke: colors_1.TRANSPARENT, strokeWidth: 12, vectorEffect: "non-scaling-stroke", pointerEvents: "stroke", cursor: edgeInfo.cursor, onPointerEnter: () => {
-                    if (!dragging) {
-                        onHoverChange(outline.key);
-                    }
-                }, onPointerLeave: () => {
-                    if (!dragging) {
-                        onHoverChange(null);
-                    }
-                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: lineRef, getItems: onContextMenuOpen })
-        ] }));
-};
-const svgPointToClientPoint = (point, rect) => {
-    return {
-        x: point.x + rect.left,
-        y: point.y + rect.top,
-    };
-};
-const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, 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 { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
-    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, selected_outline_measurement_1.getSelectedOutlineRotationCornerInfo)(outline.points, corner), [corner, outline.points]);
-    const onPointerDown = react_1.default.useCallback((event) => {
-        var _a;
-        if (event.button !== 0 || rotationDrag === null) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        const svg = event.currentTarget.ownerSVGElement;
-        if (svg === null) {
-            return;
-        }
-        const interaction = (0, selected_outline_measurement_1.getOutlineSelectionInteraction)(event);
-        const shouldUpdateSelection = !selected || interaction.toggleKey;
-        if (shouldUpdateSelection && target !== undefined) {
-            onSelect(target.selection, {
-                shiftKey: false,
-                toggleKey: interaction.toggleKey,
-            });
-        }
-        if (interaction.toggleKey) {
-            return;
-        }
-        if ((0, focus_inspector_field_1.commitPendingInspectorFields)()) {
-            return;
-        }
-        const startPointer = { x: event.clientX, y: event.clientY };
-        const svgRect = svg.getBoundingClientRect();
-        const center = svgPointToClientPoint((0, selected_outline_measurement_1.getSelectedOutlineRotationPivot)({
-            dimensions: outline.dimensions,
-            points: (_a = outline.uncroppedPoints) !== null && _a !== void 0 ? _a : outline.points,
-            transformOriginValue: rotationDrag.transformOriginValue,
-        }), svgRect);
-        const dragStates = (0, selected_outline_drag_1.getSelectedOutlineRotationDragStates)({
-            dragTargets: selected ? allRotationDragTargets : [rotationDrag],
-            getDragOverrides,
-            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
-        });
-        let previousAngle = (0, selected_outline_measurement_1.getAngleDegrees)(center, {
-            x: event.clientX,
-            y: event.clientY,
-        });
-        let accumulatedDelta = 0;
-        let rotationLocked = event.shiftKey;
-        let lastValues = new Map();
-        let dragStarted = false;
-        const updateRotationDragOverrides = () => {
-            const rotationDeltaDegrees = rotationLocked && editorSnapping
-                ? (0, selected_outline_drag_1.snapSelectedOutlineRotationDeltaDegrees)({
-                    dragStates,
-                    rotationDeltaDegrees: accumulatedDelta,
-                })
-                : accumulatedDelta;
-            lastValues = (0, selected_outline_drag_1.getSelectedOutlineRotationDragValues)({
-                dragStates,
-                rotationDeltaDegrees,
-            });
-            (0, ForceSpecificCursor_1.forceSpecificCursor)((0, selected_outline_measurement_1.getRotationCursor)(cornerInfo.cursorDegrees + rotationDeltaDegrees));
-            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, selected_outline_types_1.rotateFieldKey, remotion_1.Internals.makeKeyframedDragOverride({
-                        status: dragState.target.propStatus,
-                        frame: dragState.sourceFrame,
-                        value,
-                    }));
-                }
-                else {
-                    setDragOverrides(dragState.target.nodePath, selected_outline_types_1.rotateFieldKey, remotion_1.Internals.makeStaticDragOverride(value));
-                }
-            }
-        };
-        const onPointerMove = (moveEvent) => {
-            moveEvent.preventDefault();
-            const screenDeltaX = moveEvent.clientX - startPointer.x;
-            const screenDeltaY = moveEvent.clientY - startPointer.y;
-            if (!dragStarted) {
-                if (!(0, selected_outline_drag_1.isSelectedOutlineDragPastThreshold)({
-                    deltaX: screenDeltaX,
-                    deltaY: screenDeltaY,
-                })) {
-                    return;
-                }
-                dragStarted = true;
-                onDraggingChange(true);
-            }
-            const nextAngle = (0, selected_outline_measurement_1.getAngleDegrees)(center, {
-                x: moveEvent.clientX,
-                y: moveEvent.clientY,
-            });
-            accumulatedDelta += (0, selected_outline_measurement_1.getSelectedOutlineRotationDeltaDegrees)({
-                from: previousAngle,
-                to: nextAngle,
-            });
-            previousAngle = nextAngle;
-            rotationLocked = moveEvent.shiftKey;
-            updateRotationDragOverrides();
-        };
-        const onKeyChange = (keyEvent) => {
-            if (keyEvent.key !== 'Shift') {
-                return;
-            }
-            const nextRotationLocked = keyEvent.type === 'keydown';
-            if (nextRotationLocked === rotationLocked) {
-                return;
-            }
-            rotationLocked = nextRotationLocked;
-            if (dragStarted) {
-                updateRotationDragOverrides();
-            }
-        };
-        const onPointerUp = () => {
-            window.removeEventListener('keydown', onKeyChange);
-            window.removeEventListener('keyup', onKeyChange);
-            if (dragStarted) {
-                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-                onDraggingChange(false);
-            }
-            const changes = (0, selected_outline_drag_1.getSelectedOutlineRotationDragChanges)({
-                dragStates,
-                lastValues,
-            });
-            if (changes.length === 0) {
-                (0, selected_outline_drag_1.clearSelectedOutlineRotationDragOverrides)({
-                    clearDragOverrides,
-                    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: rotationDrag.clientId,
-                        undoLabel: changes.length > 1
-                            ? 'Rotate selected sequences'
-                            : 'Rotate sequence',
-                        redoLabel: changes.length > 1
-                            ? 'Rotate selected sequences back'
-                            : 'Rotate sequence back',
-                    })
-                    : Promise.resolve(),
-                (0, call_add_keyframe_1.callAddKeyframes)({
-                    sequenceKeyframes: keyframedChanges,
-                    effectKeyframes: [],
-                    setPropStatuses,
-                    clientId: rotationDrag.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.clearSelectedOutlineRotationDragOverrides)({
-                    clearDragOverrides,
-                    dragStates,
-                });
-            });
-        };
-        (0, pointer_session_1.startPointerSession)({
-            event,
-            target: event.currentTarget,
-            onMove: onPointerMove,
-            onEnd: onPointerUp,
-        });
-        window.addEventListener('keydown', onKeyChange);
-        window.addEventListener('keyup', onKeyChange);
-    }, [
-        allRotationDragTargets,
-        clearDragOverrides,
-        cornerInfo,
-        editorSnapping,
-        getDragOverrides,
-        onDraggingChange,
-        outline.dimensions,
-        outline.points,
-        outline.uncroppedPoints,
-        onSelect,
-        rotationDrag,
-        selected,
-        setPropStatuses,
-        setDragOverrides,
-        target,
-    ]);
-    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: colors_1.TRANSPARENT, stroke: colors_1.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, getItems: onContextMenuOpen })
-        ] }));
-};
-const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDragTargets, allScaleDragTargets, dragging, hovered, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, scale, snapTargets, target, }) => {
+const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth, dragging, getAllDragOutlines, getAllDragTargets, getAllRotationDragTargets, getAllScaleDragTargets, getLatestTargetByKey, layoutTarget, outline, onDraggingChange, onSnapPointsChange, onSelect, scale, }) => {
+    var _a;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const canConfigureApps = (0, use_default_editor_info_1.canUseEditorPicker)(previewServerState.type === 'connected');
+    const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)(canConfigureApps);
+    const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(canConfigureApps);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const updateResolvedStackTrace = (0, react_1.useContext)(remotion_1.Internals.SequenceStackTracesUpdateContext);
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
@@ -957,6 +74,42 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const setHoveredSequence = (0, timeline_sequence_hover_1.useSetTimelineSequenceHover)();
+    const targetRef = (0, react_1.useRef)(layoutTarget);
+    (0, react_1.useLayoutEffect)(() => {
+        targetRef.current = layoutTarget;
+    }, [layoutTarget]);
+    const getTarget = react_1.default.useCallback(() => {
+        const currentTarget = targetRef.current;
+        if (currentTarget === undefined) {
+            return undefined;
+        }
+        return getLatestTargetByKey(currentTarget.key);
+    }, [getLatestTargetByKey]);
+    const getLayoutTarget = react_1.default.useCallback(() => targetRef.current, []);
+    const hoveredNodePathKey = (0, react_1.useMemo)(() => layoutTarget === undefined
+        ? null
+        : (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(layoutTarget.nodePathInfo.sequenceSubscriptionKey), [layoutTarget]);
+    const hovered = (0, timeline_sequence_hover_1.useIsTimelineSequenceHovered)(hoveredNodePathKey);
+    const controlTarget = layoutTarget !== undefined && (layoutTarget.containsSelection || hovered)
+        ? getLatestTargetByKey(layoutTarget.key)
+        : undefined;
+    const onHoverChange = react_1.default.useCallback((key) => {
+        setHoveredSequence((currentHover) => {
+            if (key !== null) {
+                const hoverTarget = targetRef.current;
+                if (hoverTarget === undefined || hoverTarget.key !== key) {
+                    return currentHover;
+                }
+                return {
+                    key,
+                    nodePathKey: (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(hoverTarget.nodePathInfo.sequenceSubscriptionKey),
+                    source: 'canvas',
+                };
+            }
+            return (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover;
+        });
+    }, [setHoveredSequence]);
     const resolveOriginalLocation = react_1.default.useCallback(async (resolveTarget) => {
         const stack = resolveTarget.sequence.getStack();
         if (!stack) {
@@ -1008,52 +161,65 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
         selectComposition,
     ]);
     const onContextMenuOpen = react_1.default.useCallback(async () => {
-        if (target === undefined) {
+        const contextMenuTarget = getTarget();
+        if (contextMenuTarget === undefined) {
             return false;
         }
-        if (!target.selected) {
-            onSelect(target.selection, { shiftKey: false, toggleKey: false });
+        if (!contextMenuTarget.selected) {
+            onSelect(contextMenuTarget.selection, {
+                shiftKey: false,
+                toggleKey: false,
+            });
         }
-        const originalLocation = await resolveOriginalLocation(target);
-        const fileLocation = (0, format_file_location_1.formatFileLocation)({
-            location: originalLocation,
-            root: window.remotion_cwd,
-        });
-        const nodePath = target.nodePathInfo.sequenceSubscriptionKey;
-        const mediaSrc = target.sequence.type === 'audio' ||
-            target.sequence.type === 'video' ||
-            target.sequence.type === 'image'
-            ? target.sequence.src
+        const originalLocation = await resolveOriginalLocation(contextMenuTarget);
+        const nodePath = contextMenuTarget.nodePathInfo.sequenceSubscriptionKey;
+        const mediaSrc = contextMenuTarget.sequence.type === 'audio' ||
+            contextMenuTarget.sequence.type === 'video' ||
+            contextMenuTarget.sequence.type === 'image'
+            ? contextMenuTarget.sequence.src
             : null;
         const assetLinkInfo = mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null;
         const canOpenInEditor = Boolean(window.remotion_editorName && originalLocation);
         const sourceEditingEnabled = (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
-        const disableInteractivityDisabled = !sourceEditingEnabled || !target.sequence.showInTimeline;
+        const disableInteractivityDisabled = !sourceEditingEnabled || !contextMenuTarget.sequence.showInTimeline;
         const sourceEditDisabled = !sourceEditingEnabled ||
-            !target.sequence.controls ||
+            !contextMenuTarget.sequence.controls ||
             !nodePath.absolutePath;
-        const canAddEffect = target.nodePathInfo.supportsEffects &&
+        const isProgrammaticallyDuplicated = contextMenuTarget.nodePathInfo.numberOfSequencesWithThisNodePath > 1;
+        const canAddEffect = contextMenuTarget.nodePathInfo.supportsEffects &&
             !sourceEditDisabled &&
             previewServerState.type === 'connected';
-        const canCrop = target.canCrop && !sourceEditDisabled;
+        const canCrop = contextMenuTarget.canCrop && !sourceEditDisabled;
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
             assetLinkInfo,
             canOpenInEditor,
+            codingAgentInfo,
             deleteDisabled: sourceEditDisabled,
             disableInteractivityDisabled,
-            duplicateDisabled: sourceEditDisabled,
-            editorInfo: null,
-            fileLocation,
+            duplicateDisabled: sourceEditDisabled || isProgrammaticallyDuplicated,
+            editorInfo,
             includeSourceEditItems: sourceEditingEnabled,
+            isProgrammaticallyDuplicated,
+            onConfigureApps: canConfigureApps
+                ? () => {
+                    var _a;
+                    var _b;
+                    setSelectedModal({
+                        type: 'settings',
+                        initialTab: 'apps',
+                        initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
+                    });
+                }
+                : null,
             onDeleteSequenceFromSource: async () => {
                 if (sourceEditDisabled || previewServerState.type !== 'connected') {
                     return;
                 }
-                if (target.nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
+                if (contextMenuTarget.nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
                     const shouldDelete = await confirm({
                         title: 'Delete sequence?',
                         message: 'This sequence is programmatically duplicated ' +
-                            target.nodePathInfo.numberOfSequencesWithThisNodePath +
+                            contextMenuTarget.nodePathInfo.numberOfSequencesWithThisNodePath +
                             ' times in the code. Deleting removes all instances. Continue?',
                         confirmLabel: 'Delete',
                     });
@@ -1094,22 +260,33 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
                 if (sourceEditDisabled) {
                     return;
                 }
-                (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)([target.nodePathInfo], confirm).catch(() => undefined);
+                (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)([contextMenuTarget.nodePathInfo], confirm).catch(() => undefined);
+            },
+            openInCodingAgent: (codingAgentId, codingAgentName, contextForAgents) => {
+                (0, open_in_editor_1.openInCodingAgent)(codingAgentId, contextForAgents)
+                    .then((response) => {
+                    if (!response.success) {
+                        (0, NotificationCenter_1.showNotification)(`Could not open ${codingAgentName}`, 2000);
+                    }
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(err.message, 2000);
+                });
             },
-            openInEditor: () => {
+            openInEditor: (editorId) => {
                 if (!originalLocation) {
                     return;
                 }
-                (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, null).catch((err) => {
+                (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, editorId).catch((err) => {
                     (0, NotificationCenter_1.showNotification)(err.message, 2000);
                 });
             },
             originalLocation,
             selectAsset,
-            sequence: target.sequence,
+            sequence: contextMenuTarget.sequence,
             sourceActions: sourceEditingEnabled
                 ? [
-                    ...(target.nodePathInfo.supportsEffects
+                    ...(contextMenuTarget.nodePathInfo.supportsEffects
                         ? [
                             {
                                 type: 'item',
@@ -1140,7 +317,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
                         type: 'item',
                         id: 'crop',
                         keyHint: null,
-                        label: 'Crop',
+                        label: isProgrammaticallyDuplicated ? 'Crop all' : 'Crop',
                         leftItem: null,
                         disabled: !canCrop,
                         onClick: () => {
@@ -1150,7 +327,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
                             onSelect({
                                 type: 'sequence-prop',
                                 nodePathInfo: {
-                                    ...target.nodePathInfo,
+                                    ...contextMenuTarget.nodePathInfo,
                                     auxiliaryKeys: ['controls', selected_outline_types_1.cropFieldKeys.left],
                                 },
                                 key: selected_outline_types_1.cropFieldKeys.left,
@@ -1168,20 +345,25 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
                 : [],
         });
     }, [
+        canConfigureApps,
+        codingAgentInfo,
         confirm,
+        editorInfo,
+        getTarget,
         onSelect,
         previewServerState,
         resolveOriginalLocation,
         selectAsset,
         setSelectedModal,
         setPropStatuses,
-        target,
     ]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, snapTargets: snapTargets, target: target }), jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: target }), (target === null || target === void 0 ? void 0 : target.cropDrag) === null && (target.containsSelection || hovered)
-                ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine, { allScaleDragTargets: allScaleDragTargets, dragging: dragging, edge: edge, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, edge)))
-                : null, (target === null || target === void 0 ? void 0 : target.cropDrag) === null && (target.containsSelection || hovered)
-                ? ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle, { allRotationDragTargets: allRotationDragTargets, corner: corner, dragging: dragging, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, corner)))
+            jsx_runtime_1.jsx(SelectedOutlinePolygon_1.SelectedOutlinePolygon, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getLayoutTarget: getLayoutTarget, getTarget: getTarget, hasTarget: layoutTarget !== undefined, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, showSelectedOutline: (_a = layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.showSelectedOutline) !== null && _a !== void 0 ? _a : false }), jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: controlTarget }), (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
+                ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
+                ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine_1.SelectedOutlineScaleEdgeLine, { getAllScaleDragTargets: getAllScaleDragTargets, dragging: dragging, edge: edge, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: controlTarget }, edge)))
+                : null, (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
+                ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
+                ? ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle_1.SelectedOutlineRotationCornerHandle, { getAllRotationDragTargets: getAllRotationDragTargets, corner: corner, dragging: dragging, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: controlTarget }, corner)))
                 : null] }));
 };
-exports.SelectedOutlineElement = SelectedOutlineElement;
+exports.SelectedOutlineElement = react_1.default.memo(SelectedOutlineElementUnmemoized);