@remotion/studio-shared 4.0.474 → 4.0.476

package/dist/api-requests.d.ts

@@ -9,6 +9,9 @@ import type { ProjectInfo } from './project-info';
 import type { CompletedClientRender, RequiredChromiumOptions } from './render-job';
 import type { SymbolicatedStackFrame } from './stack-types';
 import type { EnumPath } from './stringify-default-props';
+type KeyframeEasing = Extract<CanUpdateSequencePropStatus, {
+    status: 'keyframed';
+}>['easing'][number];
 export type OpenInFileExplorerRequest = {
     directory: string;
 };
@@ -330,6 +333,7 @@ export type AddSequenceKeyframeRequest = {
     clientId: string;
 };
 export type AddSequenceKeyframeResponse = SaveSequencePropsResponse;
+export type AddSequenceKeyframe = Omit<AddSequenceKeyframeRequest, 'clientId'>;
 export type DeleteEffectKeyframe = {
     fileName: string;
     sequenceNodePath: SequencePropsSubscriptionKey;
@@ -374,12 +378,26 @@ export type AddEffectKeyframeRequest = {
     clientId: string;
 };
 export type AddEffectKeyframeResponse = SaveEffectPropsResponse;
+export type AddEffectKeyframe = Omit<AddEffectKeyframeRequest, 'clientId'>;
+export type AddKeyframesRequest = {
+    sequenceKeyframes: AddSequenceKeyframe[];
+    effectKeyframes: AddEffectKeyframe[];
+    clientId: string;
+};
+export type AddKeyframesResponse = {
+    success: true;
+};
 export type KeyframeSettings = {
+    type: 'settings';
     clamping: {
         left: ExtrapolateType;
         right: ExtrapolateType;
     } | undefined;
     posterize: number | undefined;
+} | {
+    type: 'easing';
+    segmentIndex: number;
+    easing: KeyframeEasing;
 };
 export type UpdateSequenceKeyframeSettingsRequest = {
     fileName: string;
@@ -565,6 +583,7 @@ export type ApiRoutes = {
     '/api/move-keyframes': ReqAndRes<MoveKeyframesRequest, MoveKeyframesResponse>;
     '/api/add-sequence-keyframe': ReqAndRes<AddSequenceKeyframeRequest, AddSequenceKeyframeResponse>;
     '/api/add-effect-keyframe': ReqAndRes<AddEffectKeyframeRequest, AddEffectKeyframeResponse>;
+    '/api/add-keyframes': ReqAndRes<AddKeyframesRequest, AddKeyframesResponse>;
     '/api/update-sequence-keyframe-settings': ReqAndRes<UpdateSequenceKeyframeSettingsRequest, UpdateSequenceKeyframeSettingsResponse>;
     '/api/update-effect-keyframe-settings': ReqAndRes<UpdateEffectKeyframeSettingsRequest, UpdateEffectKeyframeSettingsResponse>;
     '/api/delete-effect': ReqAndRes<DeleteEffectRequest, DeleteEffectResponse>;

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 export { splitAnsi, stripAnsi } from './ansi';
-export { AddEffectKeyframeRequest, AddEffectKeyframeResponse, AddEffectRequest, AddEffectResponse, AddRenderRequest, AddSequenceKeyframeRequest, AddSequenceKeyframeResponse, ApiRoutes, ApplyCodemodRequest, ApplyCodemodResponse, ApplyVisualControlRequest, ApplyVisualControlResponse, CanUpdateDefaultPropsResponse, CanUpdateSequencePropsRequest, CancelRenderRequest, CancelRenderResponse, CompositionComponentInfoRequest, CompositionComponentInfoResponse, CopyStillToClipboardRequest, DeleteEffectKeyframe, DeleteEffectRequest, DeleteEffectRequestItem, DeleteEffectResponse, DeleteJsxNodeRequest, DeleteJsxNodeRequestItem, DeleteJsxNodeResponse, DeleteKeyframesRequest, DeleteKeyframesResponse, DeleteSequenceKeyframe, DeleteStaticFileRequest, DeleteStaticFileResponse, DownloadRemoteAssetRequest, DownloadRemoteAssetResponse, DuplicateJsxNodeRequest, DuplicateJsxNodeResponse, InsertJsxElementRequest, InsertJsxElementResponse, InsertableCompositionElement, InstallPackageRequest, InstallPackageResponse, LogStudioErrorRequest, LogStudioErrorResponse, MoveEffectKeyframe, MoveKeyframesRequest, MoveKeyframesResponse, MoveSequenceKeyframe, OpenInEditorRequest, OpenInEditorResponse, OpenInFileExplorerRequest, PasteEffectsRequest, PasteEffectsResponse, ProjectInfoRequest, ProjectInfoResponse, RedoRequest, RedoResponse, RemoveRenderRequest, RenameStaticFileRequest, RenameStaticFileResponse, ReorderEffectRequest, ReorderEffectResponse, ReorderSequencePosition, ReorderSequenceRequest, ReorderSequenceResponse, RestartStudioRequest, RestartStudioResponse, SaveEffectPropsRequest, SaveEffectPropsResponse, SaveSequencePropEdit, SaveSequencePropsRequest, SaveSequencePropsResponse, SaveSequencePropsResult, SimpleDiff, SubscribeToDefaultPropsRequest, SubscribeToDefaultPropsResponse, SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse, SubscribeToSequencePropsRequest, SubscribeToSequencePropsResponse, UndoRequest, UndoResponse, UnsubscribeFromDefaultPropsRequest, UnsubscribeFromFileExistenceRequest, UnsubscribeFromSequencePropsRequest, UpdateAvailableRequest, UpdateAvailableResponse, UpdateDefaultPropsRequest, UpdateDefaultPropsResponse, UpdateEffectKeyframeSettingsRequest, UpdateEffectKeyframeSettingsResponse, UpdateSequenceKeyframeSettingsRequest, UpdateSequenceKeyframeSettingsResponse, type KeyframeSettings, } from './api-requests';
+export { AddEffectKeyframeRequest, AddEffectKeyframeResponse, AddKeyframesRequest, AddKeyframesResponse, AddEffectRequest, AddEffectResponse, AddRenderRequest, AddSequenceKeyframeRequest, AddSequenceKeyframeResponse, ApiRoutes, ApplyCodemodRequest, ApplyCodemodResponse, ApplyVisualControlRequest, ApplyVisualControlResponse, CanUpdateDefaultPropsResponse, CanUpdateSequencePropsRequest, CancelRenderRequest, CancelRenderResponse, CompositionComponentInfoRequest, CompositionComponentInfoResponse, CopyStillToClipboardRequest, DeleteEffectKeyframe, DeleteEffectRequest, DeleteEffectRequestItem, DeleteEffectResponse, DeleteJsxNodeRequest, DeleteJsxNodeRequestItem, DeleteJsxNodeResponse, DeleteKeyframesRequest, DeleteKeyframesResponse, DeleteSequenceKeyframe, DeleteStaticFileRequest, DeleteStaticFileResponse, DownloadRemoteAssetRequest, DownloadRemoteAssetResponse, DuplicateJsxNodeRequest, DuplicateJsxNodeResponse, InsertJsxElementRequest, InsertJsxElementResponse, InsertableCompositionElement, InstallPackageRequest, InstallPackageResponse, LogStudioErrorRequest, LogStudioErrorResponse, MoveEffectKeyframe, MoveKeyframesRequest, MoveKeyframesResponse, MoveSequenceKeyframe, OpenInEditorRequest, OpenInEditorResponse, OpenInFileExplorerRequest, PasteEffectsRequest, PasteEffectsResponse, ProjectInfoRequest, ProjectInfoResponse, RedoRequest, RedoResponse, RemoveRenderRequest, RenameStaticFileRequest, RenameStaticFileResponse, ReorderEffectRequest, ReorderEffectResponse, ReorderSequencePosition, ReorderSequenceRequest, ReorderSequenceResponse, RestartStudioRequest, RestartStudioResponse, SaveEffectPropsRequest, SaveEffectPropsResponse, SaveSequencePropEdit, SaveSequencePropsRequest, SaveSequencePropsResponse, SaveSequencePropsResult, SimpleDiff, SubscribeToDefaultPropsRequest, SubscribeToDefaultPropsResponse, SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse, SubscribeToSequencePropsRequest, SubscribeToSequencePropsResponse, UndoRequest, UndoResponse, UnsubscribeFromDefaultPropsRequest, UnsubscribeFromFileExistenceRequest, UnsubscribeFromSequencePropsRequest, UpdateAvailableRequest, UpdateAvailableResponse, UpdateDefaultPropsRequest, UpdateDefaultPropsResponse, UpdateEffectKeyframeSettingsRequest, UpdateEffectKeyframeSettingsResponse, UpdateSequenceKeyframeSettingsRequest, UpdateSequenceKeyframeSettingsResponse, type KeyframeSettings, type AddEffectKeyframe, type AddSequenceKeyframe, } from './api-requests';
 export { ASSET_DRAG_MIME_TYPE, makeAssetDragData, parseAssetDragData, type AssetDragData, } from './asset-drag-data';
 export type { ApplyVisualControlCodemod, RecastCodemod } from './codemods';
 export { COMPONENT_DRAG_MIME_TYPE, areComponentProps, isComponentIdentifier, isComponentImportPath, makeComponentDragData, parseComponentDragData, type ComponentDragData, type ComponentProp, } from './component-drag-data';
 export { DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS } from './default-buffer-state-delay-in-milliseconds';
+export { KEYFRAME_EASING_PRESETS, type KeyframeEasingPreset, } from './keyframe-easing-presets';
 export { detectFileType, isImageFileType, type FileDimensions, type FileType, type ImageFileType, } from './detect-file-type';
 export { parseEffectClipboardData, parseEffectClipboardDataResult, parseEffectPropClipboardData, parseEffectPropClipboardDataResult, type EffectClipboardClamping, type EffectClipboardData, type EffectClipboardDataParseResult, type EffectClipboardEasing, type EffectClipboardExtrapolateType, type EffectClipboardInterpolationFunction, type EffectClipboardKeyframe, type EffectClipboardKeyframedParam, type EffectClipboardParam, type EffectClipboardPasteType, type EffectClipboardSnapshot, type EffectClipboardStaticParam, type EffectPropClipboardData, type EffectPropClipboardDataParseResult, } from './effect-clipboard-data';
 export { EFFECT_DRAG_MIME_TYPE, parseEffectDragData, type EffectDragData, } from './effect-drag-data';
@@ -32,7 +33,7 @@ export { EnumPath, stringifyDefaultProps } from './stringify-default-props';
 export type { VisualControlChange } from './codemods';
 export { optimisticAddEffectKeyframe, optimisticAddSequenceKeyframe, } from './optimistic-add-keyframe';
 export { optimisticDeleteEffectKeyframe, optimisticDeleteEffectKeyframes, optimisticDeleteSequenceKeyframe, optimisticDeleteSequenceKeyframes, } from './optimistic-delete-keyframe';
-export { canMoveKeyframesWithoutCollisions, optimisticMoveEffectKeyframes, optimisticMoveSequenceKeyframes, type OptimisticKeyframeMove, } from './optimistic-move-keyframe';
+export { canMoveKeyframesWithoutCollisions, moveKeyframesInPropStatus, optimisticMoveEffectKeyframes, optimisticMoveSequenceKeyframes, type OptimisticKeyframeMove, } from './optimistic-move-keyframe';
 export { optimisticUpdateForEffectPropStatuses } from './optimistic-update-for-effect-prop-statuses';
 export { optimisticUpdateForPropStatuses } from './optimistic-update-for-prop-statuses';
 export { optimisticUpdateEffectKeyframeSettings, optimisticUpdateSequenceKeyframeSettings, } from './optimistic-update-keyframe-settings';

package/dist/index.js

@@ -14,8 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.optimisticDeleteEffectKeyframes = exports.optimisticDeleteEffectKeyframe = exports.optimisticAddSequenceKeyframe = exports.optimisticAddEffectKeyframe = exports.stringifyDefaultProps = exports.parseSfxDragData = exports.SFX_DRAG_MIME_TYPE = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.getRequiredPackageForInsertableElement = exports.getRequiredPackageForEffectImportPath = exports.packages = exports.installableMap = exports.extraPackages = exports.descriptions = exports.apiDocs = exports.DEFAULT_TIMELINE_TRACKS = exports.keyframeInterpolationFunctions = exports.isSequenceFieldSchemaKeyframable = exports.isSchemaFieldKeyframable = exports.isKeyframeInterpolationFunction = exports.getKeyframeInterpolationFunctionForSchemaField = exports.getKeyframeInterpolationFunction = exports.hotMiddlewareOptions = exports.getProjectName = exports.getLocationFromBuildError = exports.getDefaultOutLocation = exports.getAllSchemaKeys = exports.formatBytes = exports.parseEffectDragData = exports.EFFECT_DRAG_MIME_TYPE = exports.parseEffectPropClipboardDataResult = exports.parseEffectPropClipboardData = exports.parseEffectClipboardDataResult = exports.parseEffectClipboardData = exports.isImageFileType = exports.detectFileType = exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = exports.parseComponentDragData = exports.makeComponentDragData = exports.isComponentImportPath = exports.isComponentIdentifier = exports.areComponentProps = exports.COMPONENT_DRAG_MIME_TYPE = exports.parseAssetDragData = exports.makeAssetDragData = exports.ASSET_DRAG_MIME_TYPE = exports.stripAnsi = exports.splitAnsi = void 0;
-exports.isUrl = exports.stringifySequenceSubscriptionKey = exports.stringifySequenceExpandedRowKey = exports.optimisticUpdateSequenceKeyframeSettings = exports.optimisticUpdateEffectKeyframeSettings = exports.optimisticUpdateForPropStatuses = exports.optimisticUpdateForEffectPropStatuses = exports.optimisticMoveSequenceKeyframes = exports.optimisticMoveEffectKeyframes = exports.canMoveKeyframesWithoutCollisions = exports.optimisticDeleteSequenceKeyframes = exports.optimisticDeleteSequenceKeyframe = void 0;
+exports.optimisticDeleteEffectKeyframe = exports.optimisticAddSequenceKeyframe = exports.optimisticAddEffectKeyframe = exports.stringifyDefaultProps = exports.parseSfxDragData = exports.SFX_DRAG_MIME_TYPE = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.getRequiredPackageForInsertableElement = exports.getRequiredPackageForEffectImportPath = exports.packages = exports.installableMap = exports.extraPackages = exports.descriptions = exports.apiDocs = exports.DEFAULT_TIMELINE_TRACKS = exports.keyframeInterpolationFunctions = exports.isSequenceFieldSchemaKeyframable = exports.isSchemaFieldKeyframable = exports.isKeyframeInterpolationFunction = exports.getKeyframeInterpolationFunctionForSchemaField = exports.getKeyframeInterpolationFunction = exports.hotMiddlewareOptions = exports.getProjectName = exports.getLocationFromBuildError = exports.getDefaultOutLocation = exports.getAllSchemaKeys = exports.formatBytes = exports.parseEffectDragData = exports.EFFECT_DRAG_MIME_TYPE = exports.parseEffectPropClipboardDataResult = exports.parseEffectPropClipboardData = exports.parseEffectClipboardDataResult = exports.parseEffectClipboardData = exports.isImageFileType = exports.detectFileType = exports.KEYFRAME_EASING_PRESETS = exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = exports.parseComponentDragData = exports.makeComponentDragData = exports.isComponentImportPath = exports.isComponentIdentifier = exports.areComponentProps = exports.COMPONENT_DRAG_MIME_TYPE = exports.parseAssetDragData = exports.makeAssetDragData = exports.ASSET_DRAG_MIME_TYPE = exports.stripAnsi = exports.splitAnsi = void 0;
+exports.isUrl = exports.stringifySequenceSubscriptionKey = exports.stringifySequenceExpandedRowKey = exports.optimisticUpdateSequenceKeyframeSettings = exports.optimisticUpdateEffectKeyframeSettings = exports.optimisticUpdateForPropStatuses = exports.optimisticUpdateForEffectPropStatuses = exports.optimisticMoveSequenceKeyframes = exports.optimisticMoveEffectKeyframes = exports.moveKeyframesInPropStatus = exports.canMoveKeyframesWithoutCollisions = exports.optimisticDeleteSequenceKeyframes = exports.optimisticDeleteSequenceKeyframe = exports.optimisticDeleteEffectKeyframes = void 0;
 const ansi_1 = require("./ansi");
 Object.defineProperty(exports, "splitAnsi", { enumerable: true, get: function () { return ansi_1.splitAnsi; } });
 Object.defineProperty(exports, "stripAnsi", { enumerable: true, get: function () { return ansi_1.stripAnsi; } });
@@ -33,6 +33,8 @@ Object.defineProperty(exports, "makeComponentDragData", { enumerable: true, get:
 Object.defineProperty(exports, "parseComponentDragData", { enumerable: true, get: function () { return component_drag_data_1.parseComponentDragData; } });
 const default_buffer_state_delay_in_milliseconds_1 = require("./default-buffer-state-delay-in-milliseconds");
 Object.defineProperty(exports, "DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS", { enumerable: true, get: function () { return default_buffer_state_delay_in_milliseconds_1.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS; } });
+const keyframe_easing_presets_1 = require("./keyframe-easing-presets");
+Object.defineProperty(exports, "KEYFRAME_EASING_PRESETS", { enumerable: true, get: function () { return keyframe_easing_presets_1.KEYFRAME_EASING_PRESETS; } });
 const detect_file_type_1 = require("./detect-file-type");
 Object.defineProperty(exports, "detectFileType", { enumerable: true, get: function () { return detect_file_type_1.detectFileType; } });
 Object.defineProperty(exports, "isImageFileType", { enumerable: true, get: function () { return detect_file_type_1.isImageFileType; } });
@@ -93,6 +95,7 @@ Object.defineProperty(exports, "optimisticDeleteSequenceKeyframe", { enumerable:
 Object.defineProperty(exports, "optimisticDeleteSequenceKeyframes", { enumerable: true, get: function () { return optimistic_delete_keyframe_1.optimisticDeleteSequenceKeyframes; } });
 const optimistic_move_keyframe_1 = require("./optimistic-move-keyframe");
 Object.defineProperty(exports, "canMoveKeyframesWithoutCollisions", { enumerable: true, get: function () { return optimistic_move_keyframe_1.canMoveKeyframesWithoutCollisions; } });
+Object.defineProperty(exports, "moveKeyframesInPropStatus", { enumerable: true, get: function () { return optimistic_move_keyframe_1.moveKeyframesInPropStatus; } });
 Object.defineProperty(exports, "optimisticMoveEffectKeyframes", { enumerable: true, get: function () { return optimistic_move_keyframe_1.optimisticMoveEffectKeyframes; } });
 Object.defineProperty(exports, "optimisticMoveSequenceKeyframes", { enumerable: true, get: function () { return optimistic_move_keyframe_1.optimisticMoveSequenceKeyframes; } });
 const optimistic_update_for_effect_prop_statuses_1 = require("./optimistic-update-for-effect-prop-statuses");

package/dist/keyframe-easing-presets.d.ts

@@ -0,0 +1,7 @@
+export type KeyframeEasing = 'linear' | [number, number, number, number];
+export type KeyframeEasingPreset = {
+    readonly id: 'ease-in' | 'ease-out' | 'ease-in-out';
+    readonly label: string;
+    readonly easing: KeyframeEasing;
+};
+export declare const KEYFRAME_EASING_PRESETS: KeyframeEasingPreset[];

package/dist/keyframe-easing-presets.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KEYFRAME_EASING_PRESETS = void 0;
+exports.KEYFRAME_EASING_PRESETS = [
+    { id: 'ease-in', label: 'Ease in', easing: [0.42, 0, 1, 1] },
+    { id: 'ease-out', label: 'Ease out', easing: [0, 0, 0.58, 1] },
+    { id: 'ease-in-out', label: 'Ease in-out', easing: [0.42, 0, 0.58, 1] },
+];

package/dist/keyframe-interpolation-function.js

@@ -48,6 +48,7 @@ const getKeyframeInterpolationFunctionForSchemaField = ({ schema, key, }) => {
     }
     if ((field === null || field === void 0 ? void 0 : field.type) === 'scale' ||
         (field === null || field === void 0 ? void 0 : field.type) === 'translate' ||
+        (field === null || field === void 0 ? void 0 : field.type) === 'transform-origin' ||
         (field === null || field === void 0 ? void 0 : field.type) === 'rotation-css') {
         return 'interpolate';
     }

package/dist/optimistic-move-keyframe.d.ts

@@ -11,6 +11,13 @@ export declare const canMoveKeyframesWithoutCollisions: ({ status, moves, }: {
         toFrame: number;
     }[];
 }) => boolean;
+export declare const moveKeyframesInPropStatus: ({ status, moves, }: {
+    status: CanUpdateSequencePropStatus;
+    moves: readonly {
+        fromFrame: number;
+        toFrame: number;
+    }[];
+}) => CanUpdateSequencePropStatus;
 export declare const optimisticMoveSequenceKeyframes: ({ previous, keyframes, }: {
     previous: CanUpdateSequencePropsResponse;
     keyframes: readonly OptimisticKeyframeMove[];

package/dist/optimistic-move-keyframe.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.optimisticMoveEffectKeyframes = exports.optimisticMoveSequenceKeyframes = exports.canMoveKeyframesWithoutCollisions = void 0;
+exports.optimisticMoveEffectKeyframes = exports.optimisticMoveSequenceKeyframes = exports.moveKeyframesInPropStatus = exports.canMoveKeyframesWithoutCollisions = void 0;
 const getMoveMap = (moves) => {
     const moveMap = new Map();
     for (const move of moves) {
@@ -14,62 +14,86 @@ const getMoveMap = (moves) => {
     }
     return moveMap;
 };
-const canMoveKeyframesWithoutCollisions = ({ status, moves, }) => {
-    var _a;
+const getMovedKeyframes = ({ status, moves, }) => {
     if (status.status !== 'keyframed') {
-        return false;
+        return null;
     }
     const moveMap = getMoveMap(moves);
     if (moveMap === null) {
-        return false;
+        return null;
     }
     if (moveMap.size === 0) {
-        return true;
+        return { keyframes: status.keyframes, removedKeyframeIndexes: [] };
     }
     const frames = new Set(status.keyframes.map((keyframe) => keyframe.frame));
     for (const fromFrame of moveMap.keys()) {
         if (!frames.has(fromFrame)) {
-            return false;
+            return null;
         }
     }
+    const movedFromFrames = new Set(moveMap.keys());
+    const movedToFrames = new Set(moveMap.values());
+    const removedKeyframeIndexes = [];
+    const nextKeyframes = status.keyframes.flatMap((keyframe, index) => {
+        const movedFrame = moveMap.get(keyframe.frame);
+        if (movedFrame !== undefined) {
+            return [{ ...keyframe, frame: movedFrame }];
+        }
+        if (movedToFrames.has(keyframe.frame) &&
+            !movedFromFrames.has(keyframe.frame)) {
+            removedKeyframeIndexes.push(index);
+            return [];
+        }
+        return [keyframe];
+    });
     const nextFrames = new Set();
-    for (const keyframe of status.keyframes) {
-        const frame = (_a = moveMap.get(keyframe.frame)) !== null && _a !== void 0 ? _a : keyframe.frame;
-        if (nextFrames.has(frame)) {
-            return false;
+    for (const keyframe of nextKeyframes) {
+        if (nextFrames.has(keyframe.frame)) {
+            return null;
+        }
+        nextFrames.add(keyframe.frame);
+    }
+    return {
+        keyframes: nextKeyframes.sort((a, b) => a.frame - b.frame),
+        removedKeyframeIndexes,
+    };
+};
+const removeEasingForRemovedKeyframes = ({ easing, removedKeyframeIndexes, }) => {
+    const nextEasing = [...easing];
+    for (const removedKeyframeIndex of [...removedKeyframeIndexes].sort((a, b) => b - a)) {
+        if (nextEasing.length === 0) {
+            break;
         }
-        nextFrames.add(frame);
+        const easingIndexToRemove = removedKeyframeIndex === 0 ? 0 : removedKeyframeIndex - 1;
+        nextEasing.splice(easingIndexToRemove, 1);
     }
-    return true;
+    return nextEasing;
+};
+const canMoveKeyframesWithoutCollisions = ({ status, moves, }) => {
+    return getMovedKeyframes({ status, moves }) !== null;
 };
 exports.canMoveKeyframesWithoutCollisions = canMoveKeyframesWithoutCollisions;
 const moveKeyframesInPropStatus = ({ status, moves, }) => {
     if (status.status !== 'keyframed') {
         return status;
     }
-    if (!(0, exports.canMoveKeyframesWithoutCollisions)({ status, moves })) {
-        return status;
-    }
-    const moveMap = getMoveMap(moves);
-    if (moveMap === null) {
-        return status;
-    }
-    if (moveMap.size === 0) {
+    const moved = getMovedKeyframes({ status, moves });
+    if (moved === null ||
+        (moved.removedKeyframeIndexes.length === 0 &&
+            moved.keyframes === status.keyframes)) {
         return status;
     }
+    const easing = removeEasingForRemovedKeyframes({
+        easing: status.easing,
+        removedKeyframeIndexes: moved.removedKeyframeIndexes,
+    });
     return {
         ...status,
-        keyframes: status.keyframes
-            .map((keyframe) => {
-            var _a;
-            return ({
-                ...keyframe,
-                frame: (_a = moveMap.get(keyframe.frame)) !== null && _a !== void 0 ? _a : keyframe.frame,
-            });
-        })
-            .sort((a, b) => a.frame - b.frame),
+        keyframes: moved.keyframes,
+        easing,
     };
 };
+exports.moveKeyframesInPropStatus = moveKeyframesInPropStatus;
 const optimisticMoveSequenceKeyframes = ({ previous, keyframes, }) => {
     var _a;
     if (!previous.canUpdate) {
@@ -87,7 +111,7 @@ const optimisticMoveSequenceKeyframes = ({ previous, keyframes, }) => {
         if (!status) {
             continue;
         }
-        props[fieldKey] = moveKeyframesInPropStatus({ status, moves });
+        props[fieldKey] = (0, exports.moveKeyframesInPropStatus)({ status, moves });
     }
     return {
         ...previous,
@@ -127,7 +151,7 @@ const optimisticMoveEffectKeyframes = ({ previous, keyframes, }) => {
             if (!status) {
                 continue;
             }
-            props[fieldKey] = moveKeyframesInPropStatus({ status, moves });
+            props[fieldKey] = (0, exports.moveKeyframesInPropStatus)({ status, moves });
         }
         return {
             ...effect,

package/dist/optimistic-update-keyframe-settings.js

@@ -1,14 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.optimisticUpdateEffectKeyframeSettings = exports.optimisticUpdateSequenceKeyframeSettings = void 0;
+const updateEasing = ({ easing, segmentCount, segmentIndex, value, }) => {
+    if (!Number.isInteger(segmentIndex) ||
+        segmentIndex < 0 ||
+        segmentIndex >= segmentCount) {
+        throw new Error('Cannot update easing: segment index out of range');
+    }
+    const nextEasing = Array.from({ length: segmentCount }, (_, index) => {
+        var _a;
+        return (_a = easing[index]) !== null && _a !== void 0 ? _a : 'linear';
+    });
+    nextEasing[segmentIndex] = value;
+    return nextEasing;
+};
 const applySettingsToStatus = (status, settings) => {
     if (!status || status.status !== 'keyframed') {
         throw new Error('Expected keyframed status');
     }
     return {
         ...status,
-        ...(settings.clamping ? { clamping: settings.clamping } : {}),
-        posterize: settings.posterize,
+        ...(settings.type === 'settings' && settings.clamping
+            ? { clamping: settings.clamping }
+            : {}),
+        ...(settings.type === 'settings' ? { posterize: settings.posterize } : {}),
+        ...(settings.type === 'easing'
+            ? {
+                easing: updateEasing({
+                    easing: status.easing,
+                    segmentCount: Math.max(0, status.keyframes.length - 1),
+                    segmentIndex: settings.segmentIndex,
+                    value: settings.easing,
+                }),
+            }
+            : {}),
     };
 };
 const optimisticUpdateSequenceKeyframeSettings = ({ previous, fieldKey, settings, }) => {

package/dist/package-info.d.ts

@@ -1,4 +1,4 @@
-export declare const packages: readonly ["svg-3d-engine", "animation-utils", "animated-emoji", "astro-example", "babel-loader", "bugs", "brand", "bundler", "cli", "cloudrun", "codex-plugin", "compositor-darwin-arm64", "compositor-darwin-x64", "compositor-linux-arm64-gnu", "compositor-linux-arm64-musl", "compositor-linux-x64-gnu", "compositor-linux-x64-musl", "compositor-win32-x64-msvc", "core", "create-video", "discord-poster", "docusaurus-plugin", "docs", "enable-scss", "eslint-config", "eslint-config-flat", "eslint-config-internal", "eslint-plugin", "example-without-zod", "example", "fonts", "gif", "google-fonts", "install-whisper-cpp", "it-tests", "react18-tests", "lambda-go-example", "lambda-go", "lambda-php", "lambda-ruby", "lambda-python", "lambda", "lambda-client", "layout-utils", "rounded-text-box", "licensing", "lottie", "mcp", "media-utils", "motion-blur", "noise", "paths", "player-a11y", "player-example", "player", "preload", "renderer", "rive", "shapes", "skia", "promo-pages", "streaming", "serverless", "serverless-client", "skills", "skills-evals", "studio-server", "studio-shared", "studio", "tailwind", "tailwind-v4", "timeline-utils", "test-utils", "three", "transitions", "media-parser", "zod-types", "zod-types-v3", "webcodecs", "convert", "captions", "openai-whisper", "elevenlabs", "compositor", "example-videos", "whisper-web", "media", "remotion-media", "web-renderer", "design", "light-leaks", "starburst", "vercel", "sfx", "effects"];
+export declare const packages: readonly ["svg-3d-engine", "animation-utils", "animated-emoji", "astro-example", "babel-loader", "bugs", "brand", "bundler", "canvas-capture", "cli", "cloudrun", "codex-plugin", "compositor-darwin-arm64", "compositor-darwin-x64", "compositor-linux-arm64-gnu", "compositor-linux-arm64-musl", "compositor-linux-x64-gnu", "compositor-linux-x64-musl", "compositor-win32-x64-msvc", "core", "create-video", "discord-poster", "docusaurus-plugin", "docs", "enable-scss", "eslint-config", "eslint-config-flat", "eslint-config-internal", "eslint-plugin", "example-without-zod", "example", "fonts", "gif", "google-fonts", "install-whisper-cpp", "it-tests", "react18-tests", "lambda-go-example", "lambda-go", "lambda-php", "lambda-ruby", "lambda-python", "lambda", "lambda-client", "layout-utils", "rounded-text-box", "licensing", "lottie", "mcp", "media-utils", "motion-blur", "noise", "paths", "player-a11y", "player-example", "player", "preload", "renderer", "rive", "shapes", "skia", "promo-pages", "streaming", "serverless", "serverless-client", "skills", "skills-evals", "studio-server", "studio-shared", "studio", "tailwind", "tailwind-v4", "timeline-utils", "test-utils", "three", "transitions", "media-parser", "zod-types", "zod-types-v3", "webcodecs", "convert", "captions", "openai-whisper", "elevenlabs", "compositor", "example-videos", "whisper-web", "media", "remotion-media", "web-renderer", "design", "light-leaks", "starburst", "vercel", "sfx", "effects"];
 export type Pkgs = (typeof packages)[number];
 export type ExtraPackage = {
     name: string;

package/dist/package-info.js

@@ -10,6 +10,7 @@ exports.packages = [
     'bugs',
     'brand',
     'bundler',
+    'canvas-capture',
     'cli',
     'cloudrun',
     'codex-plugin',
@@ -128,6 +129,7 @@ exports.descriptions = {
     core: 'Make videos programmatically',
     lambda: 'Render Remotion videos on AWS Lambda',
     bundler: 'Bundle Remotion compositions using Webpack',
+    'canvas-capture': 'Capture HTML-in-canvas content as a video',
     'studio-server': 'Run a Remotion Studio with a server backend',
     'install-whisper-cpp': 'Helpers for installing and using Whisper.cpp',
     'whisper-web': 'Helpers for using Whisper.cpp in browser using WASM',
@@ -224,6 +226,7 @@ exports.installableMap = {
     bugs: false,
     brand: false,
     bundler: false,
+    'canvas-capture': false,
     cli: false,
     cloudrun: true,
     'codex-plugin': false,
@@ -321,6 +324,7 @@ exports.apiDocs = {
     core: 'https://www.remotion.dev/docs/remotion',
     lambda: 'https://www.remotion.dev/docs/lambda',
     bundler: 'https://www.remotion.dev/docs/bundler',
+    'canvas-capture': null,
     'lambda-client': null,
     'serverless-client': null,
     'studio-server': null,

package/dist/schema-field-info.d.ts

@@ -17,7 +17,7 @@ export type EffectSchemaFieldInfo = SchemaFieldInfo & {
 };
 export type AnySchemaFieldInfo = SequenceSchemaFieldInfo | EffectSchemaFieldInfo;
 export declare const SCHEMA_FIELD_ROW_HEIGHT = 22;
-declare const SUPPORTED_SCHEMA_TYPES: readonly ["number", "boolean", "rotation-css", "rotation-degrees", "translate", "scale", "uv-coordinate", "color", "array", "enum", "hidden"];
+declare const SUPPORTED_SCHEMA_TYPES: readonly ["number", "boolean", "rotation-css", "rotation-degrees", "translate", "transform-origin", "scale", "uv-coordinate", "color", "array", "enum", "hidden"];
 type SupportedSchemaType = (typeof SUPPORTED_SCHEMA_TYPES)[number];
 export declare const getFieldsToShow: ({ getDragOverrides, propStatuses, nodePath, schema, currentRuntimeValueDotNotation, }: {
     schema: SequenceSchema;

package/dist/schema-field-info.js

@@ -10,6 +10,7 @@ const SUPPORTED_SCHEMA_TYPES = [
     'rotation-css',
     'rotation-degrees',
     'translate',
+    'transform-origin',
     'scale',
     'uv-coordinate',
     'color',

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio-shared"
 	},
 	"name": "@remotion/studio-shared",
-	"version": "4.0.474",
+	"version": "4.0.476",
 	"description": "Internal package for shared objects between the Studio backend and frontend",
 	"main": "dist",
 	"scripts": {
@@ -20,11 +20,11 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.474"
+		"remotion": "4.0.476"
 	},
 	"devDependencies": {
-		"@remotion/renderer": "4.0.474",
-		"@remotion/eslint-config-internal": "4.0.474",
+		"@remotion/renderer": "4.0.476",
+		"@remotion/eslint-config-internal": "4.0.476",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},