@remotion/studio 4.0.526 → 4.0.528

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

@@ -1,257 +1,5 @@
 "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 = (aBounds, bBounds) => {
-    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.
-    const bounds = outlines.map(getOutlineBounds);
-    const areas = outlines.map(getOutlineHitArea);
-    for (let i = 0; i < outlines.length; i++) {
-        const a = outlines[i];
-        const aTarget = targetsByKey.get(a.key);
-        if (aTarget === undefined) {
-            continue;
-        }
-        for (let j = i + 1; j < outlines.length; j++) {
-            if (!outlineBoundsOverlap(bounds[i], bounds[j])) {
-                continue;
-            }
-            const aArea = areas[i];
-            const bArea = areas[j];
-            if (Math.abs(aArea - bArea) <= outlineAreaEqualityTolerance) {
-                continue;
-            }
-            const b = outlines[j];
-            const bTarget = targetsByKey.get(b.key);
-            if (bTarget === undefined) {
-                continue;
-            }
-            const aAncestorOfB = isAncestorTarget({
-                ancestor: aTarget,
-                descendant: bTarget,
-                parentBySequenceId,
-            });
-            const bAncestorOfA = isAncestorTarget({
-                ancestor: bTarget,
-                descendant: aTarget,
-                parentBySequenceId,
-            });
-            if (aAncestorOfB || bAncestorOfA) {
-                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;
+const canvas_1 = require("@remotion/canvas");
+({ orderCanvasOutlinesForRendering: exports.orderOutlinesForRendering } = canvas_1.CanvasInternals);

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

@@ -1,7 +1,7 @@
 import type { Guide } from '../state/editor-guides';
 import type { SelectedOutline } from './selected-outline-geometry';
 export declare const selectedOutlineSnapThresholdPx = 10;
-export declare const selectedOutlineSnapIndicatorColor = "#ff00ff";
+export declare const selectedOutlineSnapIndicatorColor = "var(--remotion-studio-selected-outline-snap-color)";
 export type SelectedOutlineSnapAxis = 'x' | 'y';
 export type SelectedOutlineSnapTargetType = 'canvas-left' | 'canvas-right' | 'canvas-top' | 'canvas-bottom' | 'canvas-horizontal-center' | 'canvas-vertical-center' | 'guide-vertical' | 'guide-horizontal';
 export type SelectedOutlineSnapTarget = {

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

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.findSelectedOutlineSnap = exports.getSelectedOutlineSnapTargets = exports.selectedOutlineSnapIndicatorColor = exports.selectedOutlineSnapThresholdPx = void 0;
+const colors_1 = require("../helpers/colors");
 exports.selectedOutlineSnapThresholdPx = 10;
-exports.selectedOutlineSnapIndicatorColor = '#ff00ff';
+exports.selectedOutlineSnapIndicatorColor = colors_1.SELECTED_OUTLINE_SNAP_COLOR;
 const EPSILON = 0.000001;
 const getSelectedOutlineSnapTargets = ({ compositionHeight, compositionWidth, guides, }) => {
     return [

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

@@ -1,39 +1,31 @@
-import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, InteractivitySchema, InteractivitySchemaField, SequencePropsSubscriptionKey, TSequence } from 'remotion';
-import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
+import type { CanvasOutlineCrop, CanvasOutlineLayoutTarget, CanvasSelectableOutline } from '@remotion/canvas';
+import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, InteractivitySchema, InteractivitySchemaField, SequencePropsSubscriptionKey } from 'remotion';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-import type { TimelineSelection } from './Timeline/TimelineSelection';
+import type { KeyframeSourceFrame } from './Timeline/get-timeline-keyframes';
 export type SelectedOutlineContextMenuOpenResult = false | readonly ComboboxValue[];
 export type SelectedOutlineContextMenuOpenHandler = () => SelectedOutlineContextMenuOpenResult | Promise<SelectedOutlineContextMenuOpenResult>;
-export type SelectedOutlineLayoutTarget = {
-    readonly key: string;
-    readonly containsSelection: boolean;
-    readonly keyframeDisplayOffset: number;
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly ref: React.RefObject<Element | null>;
-    readonly selected: boolean;
+export type SelectedOutlineLayoutTarget = CanvasOutlineLayoutTarget & {
     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: {
-        readonly left: number;
-        readonly right: number;
-        readonly top: number;
-        readonly bottom: number;
-    };
+    readonly crop: CanvasOutlineCrop;
 };
 export type SelectedOutlineTarget = SelectedOutlineLayoutTarget & {
     readonly canCrop: boolean;
+    readonly pathDrag: SelectedOutlinePathDragTarget | null;
     readonly cropDrag: SelectedOutlineCropDragTarget | null;
     readonly drag: SelectedOutlineDragTarget | null;
     readonly scaleDrag: SelectedOutlineScaleDragTarget | null;
     readonly rotationDrag: SelectedOutlineRotationDragTarget | null;
     readonly transformOriginDrag: SelectedOutlineTransformOriginDragTarget | null;
 };
+export type SelectedOutlinePathDragTarget = {
+    readonly clientId: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly schema: InteractivitySchema;
+};
 export declare const cropFieldKeys: {
     readonly left: "cropLeft";
     readonly right: "cropRight";
@@ -61,7 +53,7 @@ export type SelectedOutlineCropDragTarget = {
     readonly fields: Record<SelectedOutlineCropFieldKey, SelectedOutlineCropField>;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
-    readonly sourceFrame: number;
+    readonly sourceFrame: KeyframeSourceFrame;
     readonly transformOrigin: {
         readonly defaultValue: string | undefined;
         readonly propStatus: CanUpdateSequencePropStatus;
@@ -73,12 +65,14 @@ export type SelectedOutlineDragTarget = {
     readonly clientId: string;
     readonly fieldDefault: string | undefined;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
 };
 export type SelectedOutlineTransformOriginDragTarget = {
     readonly clientId: string;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly originDefault: string | undefined;
     readonly originPropStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
@@ -86,7 +80,7 @@ export type SelectedOutlineTransformOriginDragTarget = {
     readonly rotateValue: string;
     readonly scaleValue: number | string;
     readonly schema: InteractivitySchema;
-    readonly sourceFrame: number;
+    readonly sourceFrame: KeyframeSourceFrame;
     readonly translateDefault: string | undefined;
     readonly translatePropStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
     readonly translateValue: string;
@@ -103,6 +97,7 @@ export type SelectedOutlineScaleDragTarget = {
     readonly fieldDefault: number | string | undefined;
     readonly fieldSchema: ScaleFieldSchema;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly linked: boolean;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
@@ -113,6 +108,7 @@ export type SelectedOutlineRotationDragTarget = {
     readonly fieldDefault: string | undefined;
     readonly fieldSchema: RotationFieldSchema;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
     readonly transform3DMode: boolean;
@@ -145,13 +141,7 @@ export type SelectedOutlineRotationDragState = {
     readonly startValue: string;
     readonly target: SelectedOutlineRotationDragTarget;
 };
-export type SequenceWithSelectedOutline = {
-    readonly depth: number;
-    readonly keyframeDisplayOffset: number;
-    readonly key: string;
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly sequence: TSequence;
-};
+export type SequenceWithSelectedOutline = CanvasSelectableOutline;
 export declare const translateFieldKey = "style.translate";
 export declare const scaleFieldKey = "style.scale";
 export declare const rotateFieldKey = "style.rotate";

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

@@ -1,5 +1,7 @@
 import type { CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, GetEffectDragOverrides, PropStatuses, InteractivitySchemaField, SequencePropsSubscriptionKey, InteractivitySchema, TSequence } from 'remotion';
 import { type OutlinePoint } from './selected-outline-geometry';
+import { type KeyframeSourceFrame } from './Timeline/get-timeline-keyframes';
+export declare const getUvHandlePosition: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], uv: import("@remotion/canvas").CanvasOutlineUv) => OutlinePoint, getUvCoordinateForPoint: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], point: OutlinePoint) => import("@remotion/canvas").CanvasOutlineUv;
 export type UvCoordinate = readonly [number, number];
 type UvEllipseDimensions = {
     readonly width: number;
@@ -36,7 +38,7 @@ export type SelectedOutlineUvHandle = {
     readonly isSelected: boolean;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
-    readonly sourceFrame: number;
+    readonly sourceFrame: KeyframeSourceFrame;
     readonly value: UvCoordinate;
 };
 type UvConnectionHandle = Pick<SelectedOutlineUvHandle, 'effectIndex' | 'fieldKey' | 'fieldSchema' | 'value'> & {
@@ -87,7 +89,6 @@ type SelectedEffectFields = {
     readonly fieldKeys: ReadonlySet<string>;
 };
 export declare const tuplesEqual: (left: unknown, right: UvCoordinate) => boolean;
-export declare const getUvHandlePosition: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], uv: UvCoordinate) => OutlinePoint;
 export declare const getUvHandleConnectionLines: ({ handles, points, }: {
     readonly handles: readonly UvConnectionHandle[];
     readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
@@ -102,7 +103,6 @@ export declare const getUvEllipseInteractiveControls: ({ handles, dimensions, po
     readonly dimensions?: UvEllipseDimensions | null | undefined;
     readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
 }) => UvEllipseInteractiveControls[];
-export declare const getUvCoordinateForPoint: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], point: OutlinePoint) => UvCoordinate;
 export declare function constrainUv(value: UvCoordinate, schema: UvCoordinateFieldSchema): UvCoordinate;
 export declare function roundUvCoordinate(value: UvCoordinate, schema: UvCoordinateFieldSchema): UvCoordinate;
 export declare const roundNumericUvEllipseValue: (value: number, schema: NumericUvEllipseFieldSchema) => number;
@@ -113,6 +113,6 @@ export declare const getSelectedUvHandles: ({ propStatuses, clientId, getEffectD
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly selectedEffects: Map<number, SelectedEffectFields> | undefined;
     readonly sequence: TSequence;
-    readonly sourceFrame: number;
+    readonly sourceFrame: KeyframeSourceFrame;
 }) => SelectedOutlineUvHandle[];
 export {};

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

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSelectedUvHandles = exports.roundNumericUvEllipseValue = exports.getUvCoordinateForPoint = exports.getUvEllipseInteractiveControls = exports.getUvHandleConnectionEllipses = exports.getUvHandleConnectionLines = exports.getUvHandlePosition = exports.tuplesEqual = void 0;
+exports.getSelectedUvHandles = exports.roundNumericUvEllipseValue = exports.getUvEllipseInteractiveControls = exports.getUvHandleConnectionEllipses = exports.getUvHandleConnectionLines = exports.tuplesEqual = exports.getUvCoordinateForPoint = exports.getUvHandlePosition = void 0;
 exports.constrainUv = constrainUv;
 exports.roundUvCoordinate = roundUvCoordinate;
+const canvas_1 = require("@remotion/canvas");
 const remotion_1 = require("remotion");
 const selected_outline_geometry_1 = require("./selected-outline-geometry");
+const get_timeline_keyframes_1 = require("./Timeline/get-timeline-keyframes");
 const timeline_field_utils_1 = require("./Timeline/timeline-field-utils");
+({ getCanvasOutlinePoint: exports.getUvHandlePosition, getCanvasOutlineUv: exports.getUvCoordinateForPoint } = canvas_1.CanvasInternals);
 const parseUvCoordinate = (value) => {
     if (Array.isArray(value) &&
         value.length === 2 &&
@@ -91,56 +94,6 @@ const tuplesEqual = (left, right) => {
     return left[0] === right[0] && left[1] === right[1];
 };
 exports.tuplesEqual = tuplesEqual;
-const getBilinearUvHandlePosition = (points, uv) => {
-    const [tl, tr, br, bl] = points;
-    const top = (0, selected_outline_geometry_1.mixPoint)(tl, tr, uv[0]);
-    const bottom = (0, selected_outline_geometry_1.mixPoint)(bl, br, uv[0]);
-    return (0, selected_outline_geometry_1.mixPoint)(top, bottom, uv[1]);
-};
-const projectiveEpsilon = 0.000001;
-const getProjectiveTransform = (points) => {
-    const [tl, tr, br, bl] = points;
-    const dx1 = tr.x - br.x;
-    const dx2 = bl.x - br.x;
-    const dx3 = tl.x - tr.x + br.x - bl.x;
-    const dy1 = tr.y - br.y;
-    const dy2 = bl.y - br.y;
-    const dy3 = tl.y - tr.y + br.y - bl.y;
-    let g = 0;
-    let h = 0;
-    if (Math.abs(dx3) > projectiveEpsilon || Math.abs(dy3) > projectiveEpsilon) {
-        const determinant = dx1 * dy2 - dx2 * dy1;
-        if (Math.abs(determinant) < projectiveEpsilon) {
-            return null;
-        }
-        g = (dx3 * dy2 - dx2 * dy3) / determinant;
-        h = (dx1 * dy3 - dx3 * dy1) / determinant;
-    }
-    return {
-        a: tr.x - tl.x + g * tr.x,
-        b: bl.x - tl.x + h * bl.x,
-        c: tl.x,
-        d: tr.y - tl.y + g * tr.y,
-        e: bl.y - tl.y + h * bl.y,
-        f: tl.y,
-        g,
-        h,
-    };
-};
-const applyProjectiveTransform = (transform, uv) => {
-    const denominator = transform.g * uv[0] + transform.h * uv[1] + 1;
-    return {
-        x: (transform.a * uv[0] + transform.b * uv[1] + transform.c) / denominator,
-        y: (transform.d * uv[0] + transform.e * uv[1] + transform.f) / denominator,
-    };
-};
-const getUvHandlePosition = (points, uv) => {
-    const transform = getProjectiveTransform(points);
-    return transform === null
-        ? getBilinearUvHandlePosition(points, uv)
-        : applyProjectiveTransform(transform, uv);
-};
-exports.getUvHandlePosition = getUvHandlePosition;
 const getUvHandleConnectionLines = ({ handles, points, }) => {
     const handlesByField = new Map(handles.map((handle) => [
         `${handle.effectIndex}\u0000${handle.fieldKey}`,
@@ -337,64 +290,6 @@ const getUvEllipseInteractiveControls = ({ handles, dimensions, points, }) => {
     return controls;
 };
 exports.getUvEllipseInteractiveControls = getUvEllipseInteractiveControls;
-const vectorBetween = (from, to) => {
-    return { x: to.x - from.x, y: to.y - from.y };
-};
-const getBilinearUvCoordinateForPoint = (points, point) => {
-    const [tl, tr, br, bl] = points;
-    let u = 0.5;
-    let v = 0.5;
-    for (let i = 0; i < 8; i++) {
-        const current = getBilinearUvHandlePosition(points, [u, v]);
-        const errorX = current.x - point.x;
-        const errorY = current.y - point.y;
-        if (Math.abs(errorX) + Math.abs(errorY) < 0.001) {
-            break;
-        }
-        const du = {
-            x: (0, selected_outline_geometry_1.mix)(tr.x - tl.x, br.x - bl.x, v),
-            y: (0, selected_outline_geometry_1.mix)(tr.y - tl.y, br.y - bl.y, v),
-        };
-        const dv = vectorBetween((0, selected_outline_geometry_1.mixPoint)(tl, tr, u), (0, selected_outline_geometry_1.mixPoint)(bl, br, u));
-        const determinant = du.x * dv.y - du.y * dv.x;
-        if (Math.abs(determinant) < 0.000001) {
-            break;
-        }
-        u -= (errorX * dv.y - errorY * dv.x) / determinant;
-        v -= (du.x * errorY - du.y * errorX) / determinant;
-    }
-    return [u, v];
-};
-const getUvCoordinateForPoint = (points, point) => {
-    const transform = getProjectiveTransform(points);
-    if (transform === null) {
-        return getBilinearUvCoordinateForPoint(points, point);
-    }
-    const determinant = transform.a * (transform.e - transform.f * transform.h) -
-        transform.b * (transform.d - transform.f * transform.g) +
-        transform.c * (transform.d * transform.h - transform.e * transform.g);
-    if (Math.abs(determinant) < projectiveEpsilon) {
-        return getBilinearUvCoordinateForPoint(points, point);
-    }
-    const inverseA = transform.e - transform.f * transform.h;
-    const inverseB = transform.c * transform.h - transform.b;
-    const inverseC = transform.b * transform.f - transform.c * transform.e;
-    const inverseD = transform.f * transform.g - transform.d;
-    const inverseE = transform.a - transform.c * transform.g;
-    const inverseF = transform.c * transform.d - transform.a * transform.f;
-    const inverseG = transform.d * transform.h - transform.e * transform.g;
-    const inverseH = transform.b * transform.g - transform.a * transform.h;
-    const inverseI = transform.a * transform.e - transform.b * transform.d;
-    const denominator = inverseG * point.x + inverseH * point.y + inverseI;
-    if (Math.abs(denominator) < projectiveEpsilon) {
-        return getBilinearUvCoordinateForPoint(points, point);
-    }
-    return [
-        (inverseA * point.x + inverseB * point.y + inverseC) / denominator,
-        (inverseD * point.x + inverseE * point.y + inverseF) / denominator,
-    ];
-};
-exports.getUvCoordinateForPoint = getUvCoordinateForPoint;
 function constrainUv(value, schema) {
     var _a, _b;
     const min = (_a = schema.min) !== null && _a !== void 0 ? _a : -Infinity;
@@ -515,7 +410,7 @@ const getSelectedUvHandles = ({ propStatuses, clientId, getEffectDragOverrides,
                 propStatus,
                 dragOverrideValue: dragOverrides[key],
                 defaultValue: undefined,
-                frame: sourceFrame,
+                frame: (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(sourceFrame, propStatus),
                 shouldResortToDefaultValueIfUndefined: false,
             });
         });
@@ -533,7 +428,7 @@ const getSelectedUvHandles = ({ propStatuses, clientId, getEffectDragOverrides,
                 propStatus,
                 dragOverrideValue: dragOverrides[fieldKey],
                 defaultValue: fieldSchema.default,
-                frame: sourceFrame,
+                frame: (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(sourceFrame, propStatus),
                 shouldResortToDefaultValueIfUndefined: true,
             });
         }

package/dist/components/sequence-props-api.js

@@ -9,19 +9,9 @@ const flushSequencePropsSubscriptions = () => {
     sequencePropsSubscriptionTimer = null;
     const pending = pendingSequencePropsSubscriptions;
     pendingSequencePropsSubscriptions = [];
-    const firstRequest = pending[0].request;
     (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', {
-        ...firstRequest,
         requests: pending.map(({ request }) => request),
     }).then((response) => {
-        if (!Array.isArray(response.results)) {
-            pending[0].resolve(response);
-            const error = new Error('Legacy single subscription response received for a batched request');
-            for (const item of pending.slice(1)) {
-                item.reject(error);
-            }
-            return;
-        }
         if (response.results.length !== pending.length) {
             const error = new Error(`Expected ${pending.length} sequence prop subscription results, got ${response.results.length}`);
             for (const item of pending) {

package/dist/components/use-selected-outline-control-target.js

@@ -34,11 +34,12 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSelectedOutlineControlTarget = void 0;
+const canvas_1 = require("@remotion/canvas");
 const react_1 = __importStar(require("react"));
-const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
 const useSelectedOutlineControlTarget = ({ getLatestTargetByKey, layoutTarget, }) => {
-    const setHoveredSequence = (0, timeline_sequence_hover_1.useSetTimelineSequenceHover)();
+    var _a;
+    const hoverController = (0, react_1.useContext)(timeline_sequence_hover_1.TimelineSequenceHoverContext);
     const targetRef = (0, react_1.useRef)(layoutTarget);
     (0, react_1.useLayoutEffect)(() => {
         targetRef.current = layoutTarget;
@@ -51,29 +52,19 @@ const useSelectedOutlineControlTarget = ({ getLatestTargetByKey, layoutTarget, }
         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 { hovered, onPointerEnter, onPointerLeave } = (0, canvas_1.useCanvasSequenceHover)(hoverController, (_a = layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.nodePathInfo) !== null && _a !== void 0 ? _a : null, 'canvas');
     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]);
+        var _a;
+        if (key === null) {
+            onPointerLeave();
+        }
+        else if (((_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.key) === key) {
+            onPointerEnter();
+        }
+    }, [onPointerEnter, onPointerLeave]);
     return { controlTarget, getLayoutTarget, getTarget, hovered, onHoverChange };
 };
 exports.useSelectedOutlineControlTarget = useSelectedOutlineControlTarget;

package/dist/components/wrap-jsx-node-api.d.ts

@@ -0,0 +1,2 @@
+import type { WrapJsxNodeRequest, WrapJsxNodeResponse } from '@remotion/studio-shared';
+export declare const wrapJsxNode: (request: WrapJsxNodeRequest) => Promise<WrapJsxNodeResponse>;