@remotion/studio 4.0.498 → 4.0.500

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

@@ -1,6 +1,6 @@
-import type { CanUpdateSequencePropStatus, DragOverrideValue, GetDragOverrides, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
+import type { CanUpdateSequencePropStatus, DragOverrideValue, GetDragOverrides, InteractivitySchema, SequencePropsSubscriptionKey } from 'remotion';
 import { type OutlinePoint } from './selected-outline-geometry';
-import type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineRotationDragTarget, SelectedOutlineScaleDragState, SelectedOutlineScaleDragTarget, SelectedOutlineDragTarget, SelectedOutlineTransformOriginDragTarget } from './selected-outline-types';
+import type { SelectedOutlineCropDragTarget, SelectedOutlineCropFieldKey, SelectedOutlineCropHandle, SelectedOutlineDragState, SelectedOutlineDragTarget, SelectedOutlineRotationDragState, SelectedOutlineRotationDragTarget, SelectedOutlineScaleDragState, SelectedOutlineScaleDragTarget, SelectedOutlineTransformOriginDragTarget } from './selected-outline-types';
 import { type UvCoordinate } from './selected-outline-uv';
 import type { AddSequenceKeyframeChange } from './Timeline/call-add-keyframe';
 import type { SaveSequencePropChange } from './Timeline/save-sequence-prop';
@@ -51,6 +51,37 @@ export declare const getSelectedOutlineDragChanges: ({ dragStates, lastValues, }
     readonly dragStates: readonly SelectedOutlineDragState[];
     readonly lastValues: ReadonlyMap<string, string>;
 }) => SelectedOutlineDragChange[];
+export type SelectedOutlineCropValues = Record<SelectedOutlineCropFieldKey, number>;
+export declare const getSelectedOutlineCropFollowingTransformOrigin: ({ dimensions, initialCrop, nextCrop, transformOrigin, }: {
+    readonly dimensions: {
+        readonly width: number;
+        readonly height: number;
+    } | null;
+    readonly initialCrop: SelectedOutlineCropValues;
+    readonly nextCrop: SelectedOutlineCropValues;
+    readonly transformOrigin: {
+        readonly defaultValue: string | undefined;
+        readonly propStatus: CanUpdateSequencePropStatus;
+        readonly value: string;
+    } | null;
+}) => string | null;
+export declare const getSelectedOutlineCropDragValues: ({ crop, dimensions, handle, uv, }: {
+    readonly crop: SelectedOutlineCropValues;
+    readonly dimensions: {
+        readonly width: number;
+        readonly height: number;
+    } | null;
+    readonly handle: SelectedOutlineCropHandle;
+    readonly uv: readonly [number, number];
+}) => SelectedOutlineCropValues;
+export declare const getSelectedOutlineCropDragChanges: ({ dimensions, target, values, }: {
+    readonly dimensions: {
+        readonly width: number;
+        readonly height: number;
+    } | null;
+    readonly target: SelectedOutlineCropDragTarget;
+    readonly values: SelectedOutlineCropValues;
+}) => SelectedOutlineDragChange[];
 export type SelectedOutlineKeyboardNudgeDirection = 'left' | 'right' | 'up' | 'down';
 export declare const getSelectedOutlineKeyboardNudgeDelta: ({ direction, shiftKey, }: {
     readonly direction: SelectedOutlineKeyboardNudgeDirection;
@@ -160,10 +191,16 @@ export declare const snapSelectedOutlineUv: ({ point, points, thresholdPx, uv, }
     readonly uv: UvCoordinate;
 }) => UvCoordinate;
 export declare const selectedOutlineTransformOriginSnapThresholdPx = 10;
-export declare const snapSelectedOutlineTransformOriginUv: ({ point, points, thresholdPx, uv, }: {
+export declare const snapSelectedOutlineTransformOriginUv: ({ crop, point, points, thresholdPx, uv, }: {
+    readonly crop: {
+        readonly left: number;
+        readonly right: number;
+        readonly top: number;
+        readonly bottom: number;
+    } | null;
     readonly point: OutlinePoint;
     readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
-    readonly thresholdPx?: number | undefined;
+    readonly thresholdPx: number | null;
     readonly uv: UvCoordinate;
 }) => UvCoordinate;
 export {};

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.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.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;
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const selected_outline_geometry_1 = require("./selected-outline-geometry");
@@ -11,6 +11,7 @@ const timeline_field_utils_1 = require("./Timeline/timeline-field-utils");
 const timeline_rotation_utils_1 = require("./Timeline/timeline-rotation-utils");
 const timeline_translate_utils_1 = require("./Timeline/timeline-translate-utils");
 const TimelineScaleField_1 = require("./Timeline/TimelineScaleField");
+const transform_origin_utils_1 = require("./Timeline/transform-origin-utils");
 const getSelectedOutlineActiveSchema = ({ schema, currentRuntimeValueDotNotation, dragOverrides, propStatus, frame, }) => {
     const { merged: valuesDotNotation } = remotion_1.Internals.computeEffectiveSchemaValuesDotNotation({
         schema,
@@ -113,6 +114,141 @@ const getSelectedOutlineDragChanges = ({ dragStates, lastValues, }) => {
     return changes;
 };
 exports.getSelectedOutlineDragChanges = getSelectedOutlineDragChanges;
+const getSelectedOutlineCropCenter = (crop) => [
+    (crop.cropLeft + 1 - crop.cropRight) / 2,
+    (crop.cropTop + 1 - crop.cropBottom) / 2,
+];
+const getSelectedOutlineCropFollowingTransformOrigin = ({ dimensions, initialCrop, nextCrop, transformOrigin, }) => {
+    if (dimensions === null ||
+        transformOrigin === null ||
+        transformOrigin.propStatus.status !== 'static') {
+        return null;
+    }
+    const parsed = (0, transform_origin_utils_1.parseTransformOrigin)(transformOrigin.value);
+    if (parsed === null) {
+        return null;
+    }
+    const currentOrigin = (0, transform_origin_utils_1.parsedTransformOriginToUv)({
+        parsed,
+        width: dimensions.width,
+        height: dimensions.height,
+    });
+    if (currentOrigin === null) {
+        return null;
+    }
+    const initialCenter = getSelectedOutlineCropCenter(initialCrop);
+    const originIsAbsent = transformOrigin.propStatus.codeValue === undefined;
+    const originIsAtCropCenter = Math.abs(currentOrigin[0] - initialCenter[0]) <= 0.0001 &&
+        Math.abs(currentOrigin[1] - initialCenter[1]) <= 0.0001;
+    if (!originIsAbsent && !originIsAtCropCenter) {
+        return null;
+    }
+    return (0, transform_origin_utils_1.serializeTransformOrigin)({
+        uv: getSelectedOutlineCropCenter(nextCrop),
+        z: parsed.z,
+    });
+};
+exports.getSelectedOutlineCropFollowingTransformOrigin = getSelectedOutlineCropFollowingTransformOrigin;
+const cropHandleIncludes = (handle, edge) => handle === edge || handle.includes(edge);
+const getSelectedOutlineCropDragValues = ({ crop, dimensions, handle, uv, }) => {
+    const minimumVisibleX = dimensions === null ? 0.001 : 1 / dimensions.width;
+    const minimumVisibleY = dimensions === null ? 0.001 : 1 / dimensions.height;
+    const roundCrop = (value, max) => (0, selected_outline_geometry_1.clamp)((0, timeline_field_utils_1.roundToDecimalPlaces)(value, 4), 0, Math.max(0, max));
+    const next = { ...crop };
+    if (cropHandleIncludes(handle, 'left')) {
+        next.cropLeft = roundCrop(uv[0], 1 - crop.cropRight - minimumVisibleX);
+    }
+    if (cropHandleIncludes(handle, 'right')) {
+        next.cropRight = roundCrop(1 - uv[0], 1 - crop.cropLeft - minimumVisibleX);
+    }
+    if (cropHandleIncludes(handle, 'top')) {
+        next.cropTop = roundCrop(uv[1], 1 - crop.cropBottom - minimumVisibleY);
+    }
+    if (cropHandleIncludes(handle, 'bottom')) {
+        next.cropBottom = roundCrop(1 - uv[1], 1 - crop.cropTop - minimumVisibleY);
+    }
+    return next;
+};
+exports.getSelectedOutlineCropDragValues = getSelectedOutlineCropDragValues;
+const getSelectedOutlineCropDragChanges = ({ dimensions, target, values, }) => {
+    const changes = [];
+    for (const fieldKey of Object.values(selected_outline_types_1.cropFieldKeys)) {
+        const field = target.fields[fieldKey];
+        const value = values[fieldKey];
+        if (value === field.value) {
+            continue;
+        }
+        if (field.propStatus.status === 'keyframed') {
+            changes.push({
+                type: 'keyframed',
+                fileName: target.nodePath.absolutePath,
+                nodePath: target.nodePath,
+                fieldKey,
+                sourceFrame: target.sourceFrame,
+                value,
+                schema: target.schema,
+                clientId: target.clientId,
+            });
+            continue;
+        }
+        const defaultValue = field.defaultValue === undefined
+            ? null
+            : JSON.stringify(field.defaultValue);
+        const stringifiedValue = JSON.stringify(value);
+        const shouldSave = value !== field.propStatus.codeValue &&
+            !(defaultValue === stringifiedValue &&
+                field.propStatus.codeValue === undefined);
+        if (shouldSave) {
+            changes.push({
+                type: 'static',
+                fileName: target.nodePath.absolutePath,
+                nodePath: target.nodePath,
+                fieldKey,
+                value,
+                defaultValue,
+                schema: target.schema,
+            });
+        }
+    }
+    if (changes.length === 0 ||
+        target.transformOrigin === null ||
+        target.transformOrigin.propStatus.status !== 'static') {
+        return changes;
+    }
+    const transformOrigin = (0, exports.getSelectedOutlineCropFollowingTransformOrigin)({
+        dimensions,
+        initialCrop: {
+            cropLeft: target.fields.cropLeft.value,
+            cropRight: target.fields.cropRight.value,
+            cropTop: target.fields.cropTop.value,
+            cropBottom: target.fields.cropBottom.value,
+        },
+        nextCrop: values,
+        transformOrigin: target.transformOrigin,
+    });
+    if (transformOrigin === null) {
+        return changes;
+    }
+    const transformOriginDefaultValue = target.transformOrigin.defaultValue === undefined
+        ? null
+        : JSON.stringify(target.transformOrigin.defaultValue);
+    const shouldSaveTransformOrigin = transformOrigin !== target.transformOrigin.propStatus.codeValue &&
+        !(transformOriginDefaultValue === JSON.stringify(transformOrigin) &&
+            target.transformOrigin.propStatus.codeValue === undefined);
+    if (shouldSaveTransformOrigin) {
+        changes.push({
+            type: 'static',
+            fileName: target.nodePath.absolutePath,
+            nodePath: target.nodePath,
+            fieldKey: selected_outline_types_1.transformOriginFieldKey,
+            value: transformOrigin,
+            defaultValue: transformOriginDefaultValue,
+            schema: target.schema,
+        });
+    }
+    return changes;
+};
+exports.getSelectedOutlineCropDragChanges = getSelectedOutlineCropDragChanges;
 const getSelectedOutlineKeyboardNudgeDelta = ({ direction, shiftKey, }) => {
     const increment = shiftKey ? 10 : 1;
     return direction === 'left' || direction === 'up' ? -increment : increment;
@@ -570,4 +706,45 @@ const snapSelectedOutlineUv = ({ point, points, thresholdPx = exports.selectedOu
 };
 exports.snapSelectedOutlineUv = snapSelectedOutlineUv;
 exports.selectedOutlineTransformOriginSnapThresholdPx = exports.selectedOutlineUvSnapThresholdPx;
-exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineUv;
+const getCroppedOutlineUvSnapTargets = (crop) => {
+    const { left, top } = crop;
+    const right = 1 - crop.right;
+    const bottom = 1 - crop.bottom;
+    const centerX = (left + right) / 2;
+    const centerY = (top + bottom) / 2;
+    return [
+        [left, top],
+        [centerX, top],
+        [right, top],
+        [right, centerY],
+        [right, bottom],
+        [centerX, bottom],
+        [left, bottom],
+        [left, centerY],
+        [centerX, centerY],
+    ];
+};
+const snapSelectedOutlineTransformOriginUv = ({ crop, point, points, thresholdPx, uv, }) => {
+    var _a;
+    const threshold = thresholdPx !== null && thresholdPx !== void 0 ? thresholdPx : exports.selectedOutlineTransformOriginSnapThresholdPx;
+    if (crop === null) {
+        return (0, exports.snapSelectedOutlineUv)({ point, points, thresholdPx: threshold, uv });
+    }
+    let best = null;
+    const snapTargets = [
+        ...selectedOutlineUvSnapTargets,
+        ...getCroppedOutlineUvSnapTargets(crop),
+    ];
+    for (const snapUv of snapTargets) {
+        const snapPoint = (0, selected_outline_uv_1.getUvHandlePosition)(points, snapUv);
+        const distance = Math.hypot(point.x - snapPoint.x, point.y - snapPoint.y);
+        if (distance > threshold) {
+            continue;
+        }
+        if (best === null || distance < best.distance) {
+            best = { distance, uv: snapUv };
+        }
+    }
+    return (_a = best === null || best === void 0 ? void 0 : best.uv) !== null && _a !== void 0 ? _a : uv;
+};
+exports.snapSelectedOutlineTransformOriginUv = snapSelectedOutlineTransformOriginUv;

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

@@ -8,6 +8,7 @@ export type SelectedOutline = {
         readonly width: number;
         readonly height: number;
     } | null;
+    readonly uncroppedPoints: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint] | null;
     readonly points: readonly [
         OutlinePoint,
         OutlinePoint,

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

@@ -41,6 +41,12 @@ export declare const getTransformedSvgViewportPoints: ({ viewport, ctm, containe
     readonly ctm: SvgScreenCtm;
     readonly containerRect: Pick<DOMRect, "left" | "top">;
 }) => readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
+export declare const cropOutlinePoints: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], crop: {
+    readonly left: number;
+    readonly right: number;
+    readonly top: number;
+    readonly bottom: number;
+}) => readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
 export declare const getSelectedSequenceKeys: (selectedItems: readonly TimelineSelection[]) => Set<string>;
 export declare const getSequenceKeysContainingSelection: (selectedItems: readonly TimelineSelection[]) => Set<string>;
 export declare const getOutlineSelectionInteraction: ({ shiftKey, metaKey, ctrlKey, }: {
@@ -57,6 +63,11 @@ type SelectedTransformOriginInfo = {
     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 getSequencesWithSelectableOutlines: ({ sequences, overrideIdsToNodePaths, compositions, timelinePosition, }: {
     readonly sequences: readonly TSequence[];

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.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = 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.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");
@@ -203,6 +203,24 @@ const getElementOutlinePoints = (element, containerRect) => {
     }
     return quadToPoints(quad, containerRect);
 };
+const cropOutlinePoints = (points, crop) => {
+    if (crop.left === 0 &&
+        crop.right === 0 &&
+        crop.top === 0 &&
+        crop.bottom === 0) {
+        return points;
+    }
+    const { left, top } = crop;
+    const right = 1 - crop.right;
+    const bottom = 1 - crop.bottom;
+    return [
+        (0, selected_outline_uv_1.getUvHandlePosition)(points, [left, top]),
+        (0, selected_outline_uv_1.getUvHandlePosition)(points, [right, top]),
+        (0, selected_outline_uv_1.getUvHandlePosition)(points, [right, bottom]),
+        (0, selected_outline_uv_1.getUvHandlePosition)(points, [left, bottom]),
+    ];
+};
+exports.cropOutlinePoints = cropOutlinePoints;
 const getSelectedSequenceKeys = (selectedItems) => {
     return new Set(selectedItems
         .filter((item) => item.type === 'sequence')
@@ -278,6 +296,34 @@ const getSelectedEffectFieldsBySequenceKey = (selectedItems) => {
     return selectedEffects;
 };
 exports.getSelectedEffectFieldsBySequenceKey = getSelectedEffectFieldsBySequenceKey;
+const isCropFieldKey = (key) => Object.values(selected_outline_types_1.cropFieldKeys).some((cropFieldKey) => cropFieldKey === key);
+const getSelectedCropInfo = (selectedItems) => {
+    if (selectedItems.length !== 1) {
+        return null;
+    }
+    const [selectedItem] = selectedItems;
+    if (selectedItem.type === 'sequence-prop' &&
+        isCropFieldKey(selectedItem.key)) {
+        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' || !isCropFieldKey(field.fieldKey)) {
+        return null;
+    }
+    return {
+        sequenceKey: (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(selectedItem.nodePathInfo),
+        displayFrame: selectedItem.type === 'keyframe'
+            ? selectedItem.frame
+            : selectedItem.fromFrame,
+    };
+};
+exports.getSelectedCropInfo = getSelectedCropInfo;
 const getSelectedTransformOriginInfo = (selectedItems) => {
     if (selectedItems.length !== 1) {
         return null;
@@ -345,10 +391,11 @@ const measureOutlines = (container, targets) => {
         if (element === null) {
             continue;
         }
-        const points = getElementOutlinePoints(element, containerRect);
-        if (points === null) {
+        const uncroppedPoints = getElementOutlinePoints(element, containerRect);
+        if (uncroppedPoints === null) {
             continue;
         }
+        const points = (0, exports.cropOutlinePoints)(uncroppedPoints, target.crop);
         outlines.push({
             key: target.key,
             dimensions: element instanceof HTMLElement
@@ -362,6 +409,7 @@ const measureOutlines = (container, targets) => {
                         height: element.height.baseVal.value,
                     }
                     : null,
+            uncroppedPoints,
             points,
         });
     }
@@ -381,6 +429,19 @@ const outlinesAreEqual = (a, b) => {
             ((_c = a[i].dimensions) === null || _c === void 0 ? void 0 : _c.height) !== ((_d = b[i].dimensions) === null || _d === void 0 ? void 0 : _d.height)) {
             return false;
         }
+        const aUncropped = a[i].uncroppedPoints;
+        const bUncropped = b[i].uncroppedPoints;
+        if ((aUncropped === null) !== (bUncropped === null)) {
+            return false;
+        }
+        if (aUncropped !== null && bUncropped !== null) {
+            for (let j = 0; j < aUncropped.length; j++) {
+                if (Math.abs(aUncropped[j].x - bUncropped[j].x) > 0.01 ||
+                    Math.abs(aUncropped[j].y - bUncropped[j].y) > 0.01) {
+                    return false;
+                }
+            }
+        }
         for (let j = 0; j < a[i].points.length; j++) {
             if (Math.abs(a[i].points[j].x - b[i].points[j].x) > 0.01 ||
                 Math.abs(a[i].points[j].y - b[i].points[j].y) > 0.01) {

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

@@ -1,4 +1,4 @@
-import type { CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, InteractivitySchema, InteractivitySchemaField, SequencePropsSubscriptionKey, TSequence } from 'remotion';
+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';
@@ -7,6 +7,7 @@ export type SelectedOutlineContextMenuOpenResult = false | void | readonly Combo
 export type SelectedOutlineContextMenuOpenHandler = () => SelectedOutlineContextMenuOpenResult | Promise<SelectedOutlineContextMenuOpenResult>;
 export type SelectedOutlineTarget = {
     readonly key: string;
+    readonly canCrop: boolean;
     readonly containsSelection: boolean;
     readonly effectDrop: SelectedOutlineEffectDropTarget | null;
     readonly nodePathInfo: SequenceNodePathInfo;
@@ -14,12 +15,53 @@ export type SelectedOutlineTarget = {
     readonly selected: boolean;
     readonly selection: TimelineSelection;
     readonly sequence: TSequence;
+    readonly crop: {
+        readonly left: number;
+        readonly right: number;
+        readonly top: number;
+        readonly bottom: number;
+    };
+    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";
+    readonly right: "cropRight";
+    readonly top: "cropTop";
+    readonly bottom: "cropBottom";
+};
+export type SelectedOutlineCropEdge = keyof typeof cropFieldKeys;
+export type SelectedOutlineCropFieldKey = (typeof cropFieldKeys)[SelectedOutlineCropEdge];
+export declare const canEditSelectedOutlineCrop: ({ schema, propStatuses, }: {
+    readonly schema: InteractivitySchema | null;
+    readonly propStatuses: Record<string, CanUpdateSequencePropStatus> | undefined;
+}) => boolean;
+export type SelectedOutlineCropHandle = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top' | 'right' | 'bottom' | 'left';
+type CropNumberFieldSchema = Extract<InteractivitySchemaField, {
+    type: 'number';
+}>;
+export type SelectedOutlineCropField = {
+    readonly defaultValue: number | null | undefined;
+    readonly fieldSchema: CropNumberFieldSchema;
+    readonly propStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
+    readonly value: number;
+};
+export type SelectedOutlineCropDragTarget = {
+    readonly clientId: string;
+    readonly fields: Record<SelectedOutlineCropFieldKey, SelectedOutlineCropField>;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly schema: InteractivitySchema;
+    readonly sourceFrame: number;
+    readonly transformOrigin: {
+        readonly defaultValue: string | undefined;
+        readonly propStatus: CanUpdateSequencePropStatus;
+        readonly value: string;
+    } | null;
+};
 export type SelectedOutlineEffectDropTarget = {
     readonly clientId: string;
     readonly fileName: string;
@@ -119,3 +161,4 @@ export type SelectedOutlineKeyboardNudgeSession = {
     deltaY: number;
     lastValues: ReadonlyMap<string, string>;
 };
+export {};

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

@@ -1,6 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.emptyContextMenuValues = exports.outlineContainer = exports.selectedOutlineDragThresholdPx = exports.transformOriginFieldKey = exports.rotateFieldKey = exports.scaleFieldKey = exports.translateFieldKey = void 0;
+exports.emptyContextMenuValues = exports.outlineContainer = exports.selectedOutlineDragThresholdPx = exports.transformOriginFieldKey = exports.rotateFieldKey = exports.scaleFieldKey = exports.translateFieldKey = exports.canEditSelectedOutlineCrop = exports.cropFieldKeys = void 0;
+exports.cropFieldKeys = {
+    left: 'cropLeft',
+    right: 'cropRight',
+    top: 'cropTop',
+    bottom: 'cropBottom',
+};
+const canEditSelectedOutlineCrop = ({ schema, propStatuses, }) => {
+    for (const fieldKey of Object.values(exports.cropFieldKeys)) {
+        const fieldSchema = schema === null || schema === void 0 ? void 0 : schema[fieldKey];
+        const propStatus = propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses[fieldKey];
+        const canEditStatus = (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'static' ||
+            ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'keyframed' &&
+                propStatus.interpolationFunction === 'interpolate');
+        if ((fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) !== 'number' || !canEditStatus) {
+            return false;
+        }
+    }
+    return true;
+};
+exports.canEditSelectedOutlineCrop = canEditSelectedOutlineCrop;
 exports.translateFieldKey = 'style.translate';
 exports.scaleFieldKey = 'style.scale';
 exports.rotateFieldKey = 'style.rotate';

package/dist/error-overlay/remotion-overlay/Overlay.js

@@ -4,7 +4,7 @@ exports.Overlay = exports.setErrorsRef = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const MenuToolbar_1 = require("../../components/MenuToolbar");
+const menu_toolbar_height_1 = require("../../components/menu-toolbar-height");
 const colors_1 = require("../../helpers/colors");
 const keybindings_1 = require("../../state/keybindings");
 const ErrorLoader_1 = require("./ErrorLoader");
@@ -45,8 +45,8 @@ const Overlay = () => {
                 backgroundColor: BACKGROUND_COLOR,
                 overflow: 'auto',
                 color: colors_1.WHITE,
-                top: MenuToolbar_1.MENU_TOOLBAR_HEIGHT,
-                height: `calc(100% - ${MenuToolbar_1.MENU_TOOLBAR_HEIGHT}px)`,
+                top: menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT,
+                height: `calc(100% - ${menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT}px)`,
             }, children: errors.errors.map((err, i) => {
                 var _a;
                 return (jsx_runtime_1.jsx(ErrorLoader_1.ErrorLoader

package/dist/error-overlay/remotion-overlay/ShortcutHint.js

@@ -3,10 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShortcutHint = exports.cmdOrCtrlCharacter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const is_mac_1 = require("../../helpers/is-mac");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
-exports.cmdOrCtrlCharacter = typeof window !== 'undefined' && window.navigator.platform.startsWith('Mac')
-    ? '⌘'
-    : 'Ctrl';
+exports.cmdOrCtrlCharacter = is_mac_1.isMac ? '⌘' : 'Ctrl';
 const container = {
     display: 'inline-block',
     marginLeft: 6,