@remotion/studio 4.0.489 → 4.0.491

package/dist/components/SelectedOutlineElement.js

@@ -36,7 +36,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectedOutlineElement = exports.SelectedOutlineTransformOriginHandle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const react_dom_1 = require("react-dom");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../helpers/client-id");
@@ -51,7 +50,6 @@ const ContextMenu_1 = require("./ContextMenu");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const options_sidebar_tabs_1 = require("./options-sidebar-tabs");
 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");
@@ -320,7 +318,7 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
         ] }));
 };
 exports.SelectedOutlineTransformOriginHandle = SelectedOutlineTransformOriginHandle;
-const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuValues, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onTextEditStart, scale, snapTargets, target, }) => {
+const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuValues, 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);
@@ -532,10 +530,12 @@ const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuVa
         if (target === undefined) {
             return;
         }
+        if (!onDoubleClickTarget(target, event.button)) {
+            return;
+        }
         event.preventDefault();
         event.stopPropagation();
-        onTextEditStart(target);
-    }, [onTextEditStart, target]);
+    }, [onDoubleClickTarget, target]);
     const onEffectDragOver = react_1.default.useCallback((event) => {
         if (effectDrop === null || !(0, effect_drag_and_drop_1.hasEffectDragType)(event.dataTransfer)) {
             return;
@@ -982,28 +982,42 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const onTextEditStart = react_1.default.useCallback((editTarget) => {
-        const { textEdit } = editTarget;
-        if (textEdit === null) {
-            return;
+    const resolveOriginalLocation = react_1.default.useCallback(async (resolveTarget) => {
+        const stack = resolveTarget.sequence.getStack();
+        if (!stack) {
+            return null;
         }
-        if (textEdit.propStatus.status !== 'static' ||
-            typeof textEdit.propStatus.codeValue !== 'string') {
-            (0, NotificationCenter_1.showNotification)('This text is computed and cannot be edited visually', 3000);
-            return;
+        let originalLocation = null;
+        try {
+            originalLocation = await (0, get_stack_1.getOriginalLocationFromStack)(stack, 'sequence');
         }
-        (0, react_dom_1.flushSync)(() => {
-            var _a;
-            if (!editTarget.selected) {
-                onSelect(editTarget.selection, { shiftKey: false, toggleKey: false });
-            }
-            (_a = options_sidebar_tabs_1.optionsSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectInspectorPanel();
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        }
+        updateResolvedStackTrace(stack, originalLocation);
+        return originalLocation;
+    }, [updateResolvedStackTrace]);
+    const onDoubleClickTarget = react_1.default.useCallback((doubleClickTarget, button) => {
+        const action = (0, selected_outline_measurement_1.getOutlineDoubleClickAction)({
+            button,
+            canOpenInEditor: previewServerState.type === 'connected' &&
+                Boolean(window.remotion_editorName),
         });
-        (0, focus_inspector_field_1.requestFocusInspectorField)({
-            fieldKey: 'children',
-            nodePath: textEdit.nodePath,
+        if (action === null) {
+            return false;
+        }
+        const openTargetInEditor = async () => {
+            const originalLocation = await resolveOriginalLocation(doubleClickTarget);
+            if (originalLocation === null) {
+                return;
+            }
+            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation);
+        };
+        openTargetInEditor().catch((err) => {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
         });
-    }, [onSelect]);
+        return true;
+    }, [previewServerState.type, resolveOriginalLocation]);
     const onContextMenuOpen = react_1.default.useCallback(async () => {
         if (target === undefined || previewServerState.type !== 'connected') {
             return false;
@@ -1011,19 +1025,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
         if (!target.selected) {
             onSelect(target.selection, { shiftKey: false, toggleKey: false });
         }
-        const stack = target.sequence.getStack();
-        let originalLocation = null;
-        if (stack) {
-            try {
-                originalLocation = await (0, get_stack_1.getOriginalLocationFromStack)(stack, 'sequence');
-            }
-            catch (err) {
-                (0, NotificationCenter_1.showNotification)(err.message, 2000);
-            }
-        }
-        if (stack) {
-            updateResolvedStackTrace(stack, originalLocation);
-        }
+        const originalLocation = await resolveOriginalLocation(target);
         const fileLocation = (0, format_file_location_1.formatFileLocation)({
             location: originalLocation,
             root: window.remotion_cwd,
@@ -1152,14 +1154,14 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
         confirm,
         onSelect,
         previewServerState,
+        resolveOriginalLocation,
         selectAsset,
         setSelectedModal,
         setPropStatuses,
         target,
-        updateResolvedStackTrace,
     ]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, contextMenuValues: emptyContextMenuValues, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onTextEditStart: onTextEditStart, scale: scale, snapTargets: snapTargets, target: target }), (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
+            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, contextMenuValues: emptyContextMenuValues, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, snapTargets: snapTargets, target: target }), (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
                 ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine, { allScaleDragTargets: allScaleDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, edge: edge, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, edge)))
                 : null, (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
                 ? ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle, { allRotationDragTargets: allRotationDragTargets, contextMenuValues: emptyContextMenuValues, corner: corner, dragging: dragging, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, corner)))

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -2,11 +2,16 @@ import React from 'react';
 import { type SelectedOutline } from './selected-outline-geometry';
 import { type SelectedOutlineTarget } from './selected-outline-types';
 export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineActiveSchema, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineTransformOriginSnapThresholdPx, selectedOutlineUvSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineTransformOriginUv, snapSelectedOutlineUv, } from './selected-outline-drag';
-export { getOutlineSelectionInteraction, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
+export { getOutlineDoubleClickAction, getOutlineSelectionInteraction, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
 export { selectedOutlineDragThresholdPx } from './selected-outline-types';
 export type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineScaleDragState, } from './selected-outline-types';
-export declare const orderOutlinesForRendering: ({ outlines, targetsByKey, }: {
+type OutlineSequenceParent = {
+    readonly id: string;
+    readonly parent: string | null;
+};
+export declare const orderOutlinesForRendering: ({ outlines, sequences, targetsByKey, }: {
     readonly outlines: readonly SelectedOutline[];
+    readonly sequences: readonly OutlineSequenceParent[];
     readonly targetsByKey: ReadonlyMap<string, SelectedOutlineTarget>;
 }) => readonly SelectedOutline[];
 export declare const SelectedOutlineOverlay: React.FC<{

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.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
+exports.SelectedOutlineOverlay = exports.orderOutlinesForRendering = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getOutlineDoubleClickAction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
@@ -82,6 +82,7 @@ Object.defineProperty(exports, "snapSelectedOutlineRotationDeltaDegrees", { enum
 Object.defineProperty(exports, "snapSelectedOutlineTransformOriginUv", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineTransformOriginUv; } });
 Object.defineProperty(exports, "snapSelectedOutlineUv", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineUv; } });
 const selected_outline_measurement_2 = require("./selected-outline-measurement");
+Object.defineProperty(exports, "getOutlineDoubleClickAction", { enumerable: true, get: function () { return selected_outline_measurement_2.getOutlineDoubleClickAction; } });
 Object.defineProperty(exports, "getOutlineSelectionInteraction", { enumerable: true, get: function () { return selected_outline_measurement_2.getOutlineSelectionInteraction; } });
 Object.defineProperty(exports, "getSelectedEffectFieldsBySequenceKey", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedEffectFieldsBySequenceKey; } });
 Object.defineProperty(exports, "getSelectedOutlineRotationCornerInfo", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedOutlineRotationCornerInfo; } });
@@ -111,13 +112,251 @@ const SelectedOutlineSnapIndicators = ({ activeSnapPoints, compositionHeight, co
             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 orderOutlinesForRendering = ({ outlines, targetsByKey, }) => {
-    return [...outlines].sort((a, b) => {
-        var _a, _b;
-        var _c, _d;
-        const aSelected = (_c = (_a = targetsByKey.get(a.key)) === null || _a === void 0 ? void 0 : _a.selected) !== null && _c !== void 0 ? _c : false;
-        const bSelected = (_d = (_b = targetsByKey.get(b.key)) === null || _b === void 0 ? void 0 : _b.selected) !== null && _d !== void 0 ? _d : false;
-        return Number(aSelected) - Number(bSelected);
+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 emitted = new Set();
+    const visiting = new Set();
+    const ordered = [];
+    const visit = (outline) => {
+        var _a;
+        if (emitted.has(outline.key)) {
+            return;
+        }
+        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;
@@ -201,8 +440,6 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
             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 textContentFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema.children;
-            const textContentPropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses.children;
             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')
@@ -255,10 +492,6 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
                 canTransformOriginTranslateStatus;
             const canDropEffect = previewServerState.type === 'connected' &&
                 (controls === null || controls === void 0 ? void 0 : controls.supportsEffects) === true;
-            const canTextEdit = previewServerState.type === 'connected' &&
-                controls !== null &&
-                (textContentFieldSchema === null || textContentFieldSchema === void 0 ? void 0 : textContentFieldSchema.type) === 'text-content' &&
-                textContentPropStatus !== undefined;
             return {
                 key,
                 containsSelection,
@@ -373,12 +606,6 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
                         })) !== null && _f !== void 0 ? _f : fieldSchema.default),
                     }
                     : null,
-                textEdit: canTextEdit
-                    ? {
-                        nodePath,
-                        propStatus: textContentPropStatus,
-                    }
-                    : null,
                 uvHandles: containsSelection
                     ? (0, selected_outline_uv_1.getSelectedUvHandles)({
                         propStatuses,
@@ -414,8 +641,8 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         return new Map(outlineTargets.map((target) => [target.key, target]));
     }, [outlineTargets]);
     const outlinesForRendering = (0, react_1.useMemo)(() => {
-        return (0, exports.orderOutlinesForRendering)({ outlines, targetsByKey });
-    }, [outlines, targetsByKey]);
+        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]);

package/dist/components/SnappingToggle.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const SnappingToggle: React.FC;
+export declare const SnappingToggle: React.FC<{
+    readonly disabled: boolean;
+}>;

package/dist/components/SnappingToggle.js

@@ -9,7 +9,7 @@ const use_keybinding_1 = require("../helpers/use-keybinding");
 const magnet_1 = require("../icons/magnet");
 const editor_snapping_1 = require("../state/editor-snapping");
 const ControlButton_1 = require("./ControlButton");
-const SnappingToggle = () => {
+const SnappingToggle = ({ disabled }) => {
     const { editorSnapping, setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const onClick = (0, react_1.useCallback)(() => {
         setEditorSnapping((current) => !current);
@@ -21,6 +21,6 @@ const SnappingToggle = () => {
     ]
         .filter(no_react_1.NoReactInternals.truthy)
         .join(' ');
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": "Shift+M", onClick: onClick, children: jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 17, height: 17 }, fill: color, "aria-hidden": "true", focusable: "false" }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": "Shift+M", disabled: disabled, onClick: onClick, children: jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 17, height: 17 }, fill: color, "aria-hidden": "true", focusable: "false" }) }));
 };
 exports.SnappingToggle = SnappingToggle;

package/dist/components/Timeline/TimelineClipboardKeybindings.d.ts

@@ -1,7 +1,8 @@
-import { type EasingClipboardData, type EffectClipboardSnapshot, type EffectPropClipboardData } from '@remotion/studio-shared';
+import { type EasingClipboardData, type EffectClipboardData, type EffectClipboardSnapshot, type EffectPropClipboardData } from '@remotion/studio-shared';
 import type React from 'react';
 import { type OverrideIdToNodePaths, type PropStatuses, type SequencePropsSubscriptionKey, type InteractivitySchema, type TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import { type EffectsClipboardEnvelope } from './effects-clipboard';
 import { type TimelineSelection } from './TimelineSelection';
 export type PasteEffectsTarget = {
     readonly type: 'valid';
@@ -29,6 +30,24 @@ export declare const getSnapshotsFromSelection: ({ selection, propStatuses, }: {
     selection: TimelineSelection;
     propStatuses: PropStatuses;
 }) => EffectClipboardSnapshot[] | null;
+export type EffectClipboardDataFromSelections = {
+    readonly type: 'valid';
+    readonly payload: EffectClipboardData;
+} | {
+    readonly type: 'none';
+} | {
+    readonly type: 'mixed';
+} | {
+    readonly type: 'uncopyable';
+};
+export declare const getEffectClipboardDataFromSelections: ({ selectedItems, propStatuses, }: {
+    selectedItems: readonly TimelineSelection[];
+    propStatuses: PropStatuses;
+}) => EffectClipboardDataFromSelections;
+export declare const getEffectsClipboardEnvelopeFromSelections: ({ selectedItems, payload, }: {
+    selectedItems: readonly TimelineSelection[];
+    payload: EffectClipboardData;
+}) => EffectsClipboardEnvelope;
 export declare const getEffectPropClipboardDataFromSelection: ({ selection, propStatuses, }: {
     selection: TimelineSelection;
     propStatuses: PropStatuses;