@remotion/studio 4.0.506 → 4.0.508

package/dist/components/selected-outline-drag.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.snapSelectedOutlineTransformOriginUv = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.snapSelectedOutlineUv = exports.selectedOutlineUvSnapThresholdPx = exports.applySelectedOutlineTransformOriginAxisLock = exports.getSelectedOutlineTransformOriginLockedAxis = exports.uvsEqual = exports.getSelectedOutlineTransformOriginDragChanges = exports.compensateTranslateForTransformOrigin = exports.parseCssRotationToRadians = exports.clearSelectedOutlineRotationDragOverrides = exports.clearSelectedOutlineScaleDragOverrides = exports.getSelectedOutlineKeyboardNudgeDirection = exports.clearSelectedOutlineDragOverrides = exports.getSelectedOutlineRotationDragChanges = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineRotationSnapStepDegrees = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineCropDragChanges = exports.getSelectedOutlineCropDragValues = exports.getSelectedOutlineCropFollowingTransformOrigin = exports.getSelectedOutlineDragChanges = exports.isSelectedOutlineDragPastThreshold = exports.applySelectedOutlineDragAxisLock = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragStates = exports.getSelectedOutlineActiveSchema = void 0;
+exports.snapSelectedOutlineTransformOriginUv = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.snapSelectedOutlineUv = exports.selectedOutlineUvSnapThresholdPx = exports.applySelectedOutlineTransformOriginAxisLock = exports.getSelectedOutlineTransformOriginLockedAxis = exports.uvsEqual = exports.getSelectedOutlineTransformOriginDragChanges = exports.compensateTranslateForTransformOrigin = exports.clearSelectedOutlineRotationDragOverrides = exports.clearSelectedOutlineScaleDragOverrides = exports.getSelectedOutlineKeyboardNudgeDirection = exports.clearSelectedOutlineDragOverrides = exports.getSelectedOutlineRotationDragChanges = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineRotationSnapStepDegrees = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutline3DRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineCropDragChanges = exports.getSelectedOutlineCropDragValues = exports.getSelectedOutlineCropFollowingTransformOrigin = exports.getSelectedOutlineDragChanges = exports.isSelectedOutlineDragPastThreshold = exports.applySelectedOutlineDragAxisLock = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragStates = exports.getSelectedOutlineActiveSchema = void 0;
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const selected_outline_geometry_1 = require("./selected-outline-geometry");
@@ -35,7 +35,7 @@ const getSelectedOutlineDragStates = ({ dragTargets, getDragOverrides, timelineP
             frame: sourceFrame,
             shouldResortToDefaultValueIfUndefined: true,
         });
-        const [startX, startY] = (0, timeline_translate_utils_1.parseTranslate)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px'));
+        const [startX, startY, startZ] = (0, timeline_translate_utils_1.parseTranslate)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px'));
         return {
             defaultValue: target.fieldDefault !== undefined
                 ? JSON.stringify(target.fieldDefault)
@@ -44,6 +44,7 @@ const getSelectedOutlineDragStates = ({ dragTargets, getDragOverrides, timelineP
             sourceFrame,
             startX,
             startY,
+            startZ,
             target,
         };
     });
@@ -52,7 +53,11 @@ exports.getSelectedOutlineDragStates = getSelectedOutlineDragStates;
 const getSelectedOutlineDragValues = ({ dragStates, deltaX, deltaY, }) => {
     return new Map(dragStates.map((dragState) => [
         dragState.key,
-        (0, timeline_translate_utils_1.serializeTranslate)(dragState.startX + deltaX, dragState.startY + deltaY),
+        (0, timeline_translate_utils_1.serializeTranslate)([
+            dragState.startX + deltaX,
+            dragState.startY + deltaY,
+            dragState.startZ,
+        ]),
     ]));
 };
 exports.getSelectedOutlineDragValues = getSelectedOutlineDragValues;
@@ -78,7 +83,11 @@ const getSelectedOutlineDragChanges = ({ dragStates, lastValues, }) => {
             continue;
         }
         if (dragState.target.propStatus.status === 'keyframed') {
-            const startValue = (0, timeline_translate_utils_1.serializeTranslate)(dragState.startX, dragState.startY);
+            const startValue = (0, timeline_translate_utils_1.serializeTranslate)([
+                dragState.startX,
+                dragState.startY,
+                dragState.startZ,
+            ]);
             if (value === startValue) {
                 continue;
             }
@@ -426,24 +435,62 @@ const getSelectedOutlineRotationDragStates = ({ dragTargets, getDragOverrides, t
             frame: sourceFrame,
             shouldResortToDefaultValueIfUndefined: true,
         });
+        const startValue = String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0deg');
         return {
             defaultValue: target.fieldDefault !== undefined
                 ? JSON.stringify(target.fieldDefault)
                 : null,
             key: remotion_1.Internals.makeSequencePropsSubscriptionKey(target.nodePath),
             sourceFrame,
-            startDegrees: (0, timeline_rotation_utils_1.parseCssRotationToDegrees)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0deg')),
+            startDegrees: (0, timeline_rotation_utils_1.parseCssRotationToDegrees)(startValue),
+            startRotation: (0, timeline_rotation_utils_1.parseCssRotationToEuler)(startValue),
+            startValue,
             target,
         };
     });
 };
 exports.getSelectedOutlineRotationDragStates = getSelectedOutlineRotationDragStates;
+const getSelectedOutline3DRotationDragValues = ({ dragStates, rotationXDeltaDegrees, rotationYDeltaDegrees, }) => {
+    return new Map(dragStates.map((dragState) => {
+        const decimalPlaces = Math.max(6, (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+            defaultDecimalPlaces: 1,
+            step: dragState.target.fieldSchema.step,
+        }));
+        const { startRotation } = dragState;
+        return [
+            dragState.key,
+            (0, timeline_rotation_utils_1.serializeCssRotationFromEuler)({
+                rotation: [
+                    startRotation[0] + rotationXDeltaDegrees,
+                    startRotation[1] + rotationYDeltaDegrees,
+                    startRotation[2],
+                ],
+                decimalPlaces,
+            }),
+        ];
+    }));
+};
+exports.getSelectedOutline3DRotationDragValues = getSelectedOutline3DRotationDragValues;
 const getSelectedOutlineRotationDragValues = ({ dragStates, rotationDeltaDegrees, }) => {
     return new Map(dragStates.map((dragState) => {
         const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
             defaultDecimalPlaces: 1,
             step: dragState.target.fieldSchema.step,
         });
+        const { startRotation } = dragState;
+        if (dragState.target.transform3DMode) {
+            return [
+                dragState.key,
+                (0, timeline_rotation_utils_1.serializeCssRotationFromEuler)({
+                    rotation: [
+                        startRotation[0],
+                        startRotation[1],
+                        startRotation[2] + rotationDeltaDegrees,
+                    ],
+                    decimalPlaces: Math.max(6, decimalPlaces),
+                }),
+            ];
+        }
         return [
             dragState.key,
             (0, timeline_rotation_utils_1.serializeCssRotation)(dragState.startDegrees + rotationDeltaDegrees, decimalPlaces),
@@ -457,10 +504,11 @@ const snapSelectedOutlineRotationDeltaDegrees = ({ dragStates, rotationDeltaDegr
     if (anchor === undefined) {
         return rotationDeltaDegrees;
     }
-    return (Math.round((anchor.startDegrees + rotationDeltaDegrees) /
+    const startDegrees = anchor.startRotation[2];
+    return (Math.round((startDegrees + rotationDeltaDegrees) /
         exports.selectedOutlineRotationSnapStepDegrees) *
         exports.selectedOutlineRotationSnapStepDegrees -
-        anchor.startDegrees);
+        startDegrees);
 };
 exports.snapSelectedOutlineRotationDeltaDegrees = snapSelectedOutlineRotationDeltaDegrees;
 const getSelectedOutlineRotationDragChanges = ({ dragStates, lastValues, }) => {
@@ -471,11 +519,7 @@ const getSelectedOutlineRotationDragChanges = ({ dragStates, lastValues, }) => {
             continue;
         }
         if (dragState.target.propStatus.status === 'keyframed') {
-            const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
-                defaultDecimalPlaces: 1,
-                step: dragState.target.fieldSchema.step,
-            });
-            const startValue = (0, timeline_rotation_utils_1.serializeCssRotation)(dragState.startDegrees, decimalPlaces);
+            const { startValue } = dragState;
             if (value === startValue) {
                 continue;
             }
@@ -545,36 +589,26 @@ const clearSelectedOutlineRotationDragOverrides = ({ clearDragOverrides, dragSta
     }
 };
 exports.clearSelectedOutlineRotationDragOverrides = clearSelectedOutlineRotationDragOverrides;
-const parseCssRotationToRadians = (value) => {
-    const match = value
-        .trim()
-        .match(/^([+-]?(?:\d+\.?\d*|\.\d+))(deg|rad|turn|grad)$/);
-    if (!match) {
-        return null;
-    }
-    const number = Number(match[1]);
-    if (!Number.isFinite(number)) {
-        return null;
-    }
-    if (match[2] === 'rad') {
-        return number;
-    }
-    if (match[2] === 'turn') {
-        return number * Math.PI * 2;
-    }
-    if (match[2] === 'grad') {
-        return (number / 400) * Math.PI * 2;
+const compensateTranslateForTransformOrigin = ({ startTranslate, deltaOrigin, rotation, scale, }) => {
+    const [rawAxisX, rawAxisY, rawAxisZ] = rotation.axis;
+    const axisLength = Math.hypot(rawAxisX, rawAxisY, rawAxisZ);
+    if (axisLength === 0) {
+        return [
+            startTranslate[0] + deltaOrigin[0] * (scale[0] - 1),
+            startTranslate[1] + deltaOrigin[1] * (scale[1] - 1),
+        ];
     }
-    return (number / 180) * Math.PI;
-};
-exports.parseCssRotationToRadians = parseCssRotationToRadians;
-const compensateTranslateForTransformOrigin = ({ startTranslate, deltaOrigin, rotate, scale, }) => {
-    const cos = Math.cos(rotate);
-    const sin = Math.sin(rotate);
-    const matrixA = cos * scale[0];
-    const matrixB = sin * scale[0];
-    const matrixC = -sin * scale[1];
-    const matrixD = cos * scale[1];
+    const axisX = rawAxisX / axisLength;
+    const axisY = rawAxisY / axisLength;
+    const axisZ = rawAxisZ / axisLength;
+    const radians = (rotation.degrees * Math.PI) / 180;
+    const cos = Math.cos(radians);
+    const sin = Math.sin(radians);
+    const oneMinusCos = 1 - cos;
+    const matrixA = (cos + axisX * axisX * oneMinusCos) * scale[0];
+    const matrixB = (axisY * axisX * oneMinusCos + axisZ * sin) * scale[0];
+    const matrixC = (axisX * axisY * oneMinusCos - axisZ * sin) * scale[1];
+    const matrixD = (cos + axisY * axisY * oneMinusCos) * scale[1];
     const transformedDeltaX = matrixA * deltaOrigin[0] + matrixC * deltaOrigin[1];
     const transformedDeltaY = matrixB * deltaOrigin[0] + matrixD * deltaOrigin[1];
     const compensationX = deltaOrigin[0] - transformedDeltaX;
@@ -648,7 +682,11 @@ const getSelectedOutlineTransformOriginDragChanges = ({ target, startTranslate,
             nodePath: target.nodePath,
             fieldKey: selected_outline_types_1.translateFieldKey,
             sourceFrame: keyframe.frame,
-            value: (0, timeline_translate_utils_1.serializeTranslate)(keyframeTranslate[0] + deltaTranslateX, keyframeTranslate[1] + deltaTranslateY),
+            value: (0, timeline_translate_utils_1.serializeTranslate)([
+                keyframeTranslate[0] + deltaTranslateX,
+                keyframeTranslate[1] + deltaTranslateY,
+                keyframeTranslate[2],
+            ]),
             schema: target.schema,
         });
     }

package/dist/components/selected-outline-measurement.d.ts

@@ -1,6 +1,6 @@
 import type { OverrideIdToNodePaths, TSequence } from 'remotion';
 import type { OutlinePoint, SelectedOutline } from './selected-outline-geometry';
-import type { SelectedOutlineTarget, SequenceWithSelectedOutline } from './selected-outline-types';
+import type { SelectedOutlineLayoutTarget, SequenceWithSelectedOutline } from './selected-outline-types';
 import { type TimelineSelection, type TimelineSelectionInteraction } from './Timeline/TimelineSelection';
 export declare const pointToString: (point: OutlinePoint) => string;
 export declare const midpoint: (from: OutlinePoint, to: OutlinePoint) => OutlinePoint;
@@ -63,18 +63,23 @@ type SelectedTransformOriginInfo = {
     readonly sequenceKey: string;
     readonly displayFrame: number | null;
 };
+export type SelectedRotationInfo = {
+    readonly sequenceKey: string;
+    readonly displayFrame: number | null;
+};
 export type SelectedCropInfo = {
     readonly sequenceKey: string;
     readonly displayFrame: number | null;
 };
 export declare const getSelectedCropInfo: (selectedItems: readonly TimelineSelection[]) => SelectedCropInfo | null;
 export declare const getSelectedTransformOriginInfo: (selectedItems: readonly TimelineSelection[]) => SelectedTransformOriginInfo | null;
+export declare const getSelectedRotationInfo: (selectedItems: readonly TimelineSelection[]) => SelectedRotationInfo | null;
 export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideIdsToNodePaths, compositions, timelinePosition, }: {
     readonly sequences: readonly TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly compositions?: readonly import("remotion").AnyComposition[] | undefined;
     readonly timelinePosition: number;
 }) => SequenceWithSelectedOutline[];
-export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineTarget[]) => SelectedOutline[];
+export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineLayoutTarget[]) => SelectedOutline[];
 export declare const outlinesAreEqual: (a: readonly SelectedOutline[], b: readonly SelectedOutline[]) => boolean;
 export {};

package/dist/components/selected-outline-measurement.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.outlinesAreEqual = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedTransformOriginInfo = exports.getSelectedCropInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.cropOutlinePoints = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
+exports.outlinesAreEqual = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedRotationInfo = exports.getSelectedTransformOriginInfo = exports.getSelectedCropInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.cropOutlinePoints = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
 const colors_1 = require("../helpers/colors");
 const get_box_quads_ponyfill_1 = require("../helpers/get-box-quads-ponyfill");
@@ -352,6 +352,33 @@ const getSelectedTransformOriginInfo = (selectedItems) => {
     };
 };
 exports.getSelectedTransformOriginInfo = getSelectedTransformOriginInfo;
+const getSelectedRotationInfo = (selectedItems) => {
+    if (selectedItems.length !== 1) {
+        return null;
+    }
+    const [selectedItem] = selectedItems;
+    if (selectedItem.type === 'sequence-prop' &&
+        selectedItem.key === selected_outline_types_1.rotateFieldKey) {
+        return {
+            sequenceKey: (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(selectedItem.nodePathInfo),
+            displayFrame: null,
+        };
+    }
+    if (selectedItem.type !== 'keyframe' && selectedItem.type !== 'easing') {
+        return null;
+    }
+    const field = getKeyframeOrEasingField(selectedItem);
+    if ((field === null || field === void 0 ? void 0 : field.type) !== 'sequence' || field.fieldKey !== selected_outline_types_1.rotateFieldKey) {
+        return null;
+    }
+    return {
+        sequenceKey: (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(selectedItem.nodePathInfo),
+        displayFrame: selectedItem.type === 'keyframe'
+            ? selectedItem.frame
+            : selectedItem.fromFrame,
+    };
+};
+exports.getSelectedRotationInfo = getSelectedRotationInfo;
 const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths, compositions = [], timelinePosition, }) => {
     return (0, calculate_timeline_1.calculateTimeline)({
         sequences: [...sequences],

package/dist/components/selected-outline-order.d.ts

@@ -0,0 +1,12 @@
+import type { SelectedOutline } from './selected-outline-geometry';
+import type { SelectedOutlineLayoutTarget } from './selected-outline-types';
+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, SelectedOutlineLayoutTarget>;
+}) => readonly SelectedOutline[];
+export {};

package/dist/components/selected-outline-order.js

@@ -0,0 +1,251 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.orderOutlinesForRendering = void 0;
+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;

package/dist/components/selected-outline-types.d.ts

@@ -1,18 +1,22 @@
 import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, InteractivitySchema, InteractivitySchemaField, SequencePropsSubscriptionKey, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-import type { SelectedOutlineUvHandle } from './selected-outline-uv';
 import type { TimelineSelection } from './Timeline/TimelineSelection';
 export type SelectedOutlineContextMenuOpenResult = false | readonly ComboboxValue[];
 export type SelectedOutlineContextMenuOpenHandler = () => SelectedOutlineContextMenuOpenResult | Promise<SelectedOutlineContextMenuOpenResult>;
-export type SelectedOutlineTarget = {
+export type SelectedOutlineLayoutTarget = {
     readonly key: string;
-    readonly canCrop: boolean;
     readonly containsSelection: boolean;
-    readonly effectDrop: SelectedOutlineEffectDropTarget | null;
+    readonly keyframeDisplayOffset: number;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly ref: React.RefObject<Element | null>;
     readonly selected: boolean;
+    readonly selectedForCrop: boolean;
+    readonly selectedForRotation: boolean;
+    readonly selectedForTransformOrigin: boolean;
+    readonly selectedForUvHandles: boolean;
+    readonly showSelectedOutline: boolean;
+    readonly transformOriginValue: string;
     readonly selection: TimelineSelection;
     readonly sequence: TSequence;
     readonly crop: {
@@ -21,12 +25,14 @@ export type SelectedOutlineTarget = {
         readonly top: number;
         readonly bottom: number;
     };
+};
+export type SelectedOutlineTarget = SelectedOutlineLayoutTarget & {
+    readonly canCrop: boolean;
     readonly cropDrag: SelectedOutlineCropDragTarget | null;
     readonly drag: SelectedOutlineDragTarget | null;
     readonly scaleDrag: SelectedOutlineScaleDragTarget | null;
     readonly rotationDrag: SelectedOutlineRotationDragTarget | null;
     readonly transformOriginDrag: SelectedOutlineTransformOriginDragTarget | null;
-    readonly uvHandles: readonly SelectedOutlineUvHandle[];
 };
 export declare const cropFieldKeys: {
     readonly left: "cropLeft";
@@ -62,11 +68,6 @@ export type SelectedOutlineCropDragTarget = {
         readonly value: string;
     } | null;
 };
-export type SelectedOutlineEffectDropTarget = {
-    readonly clientId: string;
-    readonly fileName: string;
-    readonly nodePath: SequencePropsSubscriptionKey;
-};
 export type SelectedOutlineDragTarget = {
     readonly propStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
     readonly clientId: string;
@@ -114,6 +115,7 @@ export type SelectedOutlineRotationDragTarget = {
     readonly keyframeDisplayOffset: number;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
+    readonly transform3DMode: boolean;
     readonly transformOriginValue: string;
 };
 export type SelectedOutlineDragState = {
@@ -122,6 +124,7 @@ export type SelectedOutlineDragState = {
     readonly sourceFrame: number;
     readonly startX: number;
     readonly startY: number;
+    readonly startZ: number | null;
     readonly target: SelectedOutlineDragTarget;
 };
 export type SelectedOutlineScaleDragState = {
@@ -138,6 +141,8 @@ export type SelectedOutlineRotationDragState = {
     readonly key: string;
     readonly sourceFrame: number;
     readonly startDegrees: number;
+    readonly startRotation: readonly [number, number, number];
+    readonly startValue: string;
     readonly target: SelectedOutlineRotationDragTarget;
 };
 export type SequenceWithSelectedOutline = {

package/dist/components/svg-point-to-client-point.d.ts

@@ -0,0 +1,2 @@
+import type { OutlinePoint } from './selected-outline-geometry';
+export declare const svgPointToClientPoint: (point: OutlinePoint, rect: DOMRect) => OutlinePoint;

package/dist/components/svg-point-to-client-point.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.svgPointToClientPoint = void 0;
+const svgPointToClientPoint = (point, rect) => {
+    return {
+        x: point.x + rect.left,
+        y: point.y + rect.top,
+    };
+};
+exports.svgPointToClientPoint = svgPointToClientPoint;

package/dist/components/use-auto-save-config.d.ts

@@ -0,0 +1,8 @@
+import type { ConfigUpdate } from '@remotion/studio-shared';
+export declare const useAutoSaveConfig: ({ enabled, onError, ready, syncRevision, updates, }: {
+    readonly enabled: boolean;
+    readonly onError: (error: string | null) => void;
+    readonly ready: boolean;
+    readonly syncRevision: number;
+    readonly updates: ConfigUpdate[];
+}) => void;