@remotion/studio-shared 4.0.471 → 4.0.472

package/dist/api-requests.d.ts

@@ -2,6 +2,7 @@ import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, PixelFormat,
 import type { HardwareAccelerationOption } from '@remotion/renderer/client';
 import type { _InternalTypes, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, SequenceNodePath, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
 import type { RecastCodemod, VisualControlChange } from './codemods';
+import type { EffectClipboardPasteType, EffectClipboardSnapshot } from './effect-clipboard-data';
 import type { PackageManager } from './package-manager';
 import type { ProjectInfo } from './project-info';
 import type { CompletedClientRender, RequiredChromiumOptions } from './render-job';
@@ -337,6 +338,20 @@ export type DeleteEffectResponse = {
     reason: string;
     stack: string;
 };
+export type PasteEffectsRequest = {
+    targetFileName: string;
+    targetSequenceNodePath: SequencePropsSubscriptionKey;
+    type: EffectClipboardPasteType;
+    effects: EffectClipboardSnapshot[];
+    clientId: string;
+};
+export type PasteEffectsResponse = {
+    success: true;
+} | {
+    success: false;
+    reason: string;
+    stack: string;
+};
 export type DeleteJsxNodeRequestItem = {
     fileName: string;
     nodePath: SequenceNodePath;
@@ -366,6 +381,14 @@ export type InsertableCompositionElement = {
     type: 'solid';
     width: number;
     height: number;
+} | {
+    type: 'asset';
+    assetType: 'image' | 'video' | 'gif';
+    src: string;
+    dimensions: {
+        width: number;
+        height: number;
+    } | null;
 };
 export type InsertJsxElementRequest = {
     compositionFile: string;
@@ -438,6 +461,7 @@ export type ApiRoutes = {
     '/api/add-sequence-keyframe': ReqAndRes<AddSequenceKeyframeRequest, AddSequenceKeyframeResponse>;
     '/api/add-effect-keyframe': ReqAndRes<AddEffectKeyframeRequest, AddEffectKeyframeResponse>;
     '/api/delete-effect': ReqAndRes<DeleteEffectRequest, DeleteEffectResponse>;
+    '/api/paste-effects': ReqAndRes<PasteEffectsRequest, PasteEffectsResponse>;
     '/api/delete-jsx-node': ReqAndRes<DeleteJsxNodeRequest, DeleteJsxNodeResponse>;
     '/api/duplicate-jsx-node': ReqAndRes<DuplicateJsxNodeRequest, DuplicateJsxNodeResponse>;
     '/api/insert-jsx-element': ReqAndRes<InsertJsxElementRequest, InsertJsxElementResponse>;

package/dist/codemods.d.ts

@@ -25,4 +25,13 @@ export type RecastCodemod = {
 } | {
     type: 'delete-composition';
     idToDelete: string;
+} | {
+    type: 'rename-folder';
+    folderName: string;
+    parentName: string | null;
+    newName: string;
+} | {
+    type: 'delete-folder';
+    folderName: string;
+    parentName: string | null;
 } | ApplyVisualControlCodemod;

package/dist/effect-clipboard-data.d.ts

@@ -0,0 +1,48 @@
+import { type KeyframeInterpolationFunction } from './keyframe-interpolation-function';
+export type EffectClipboardPasteType = 'effects-additive' | 'effects-replacing';
+export type EffectClipboardStaticParam = {
+    readonly type: 'static';
+    readonly value: unknown;
+};
+export type EffectClipboardInterpolationFunction = KeyframeInterpolationFunction;
+export type EffectClipboardKeyframe = {
+    readonly frame: number;
+    readonly value: unknown;
+};
+export type EffectClipboardEasing = 'linear' | [number, number, number, number];
+export type EffectClipboardExtrapolateType = 'extend' | 'identity' | 'clamp' | 'wrap';
+export type EffectClipboardClamping = {
+    readonly left: EffectClipboardExtrapolateType;
+    readonly right: EffectClipboardExtrapolateType;
+};
+export type EffectClipboardKeyframedParam = {
+    readonly type: 'keyframed';
+    readonly interpolationFunction: EffectClipboardInterpolationFunction;
+    readonly keyframes: EffectClipboardKeyframe[];
+    readonly easing: EffectClipboardEasing[];
+    readonly clamping: EffectClipboardClamping;
+    readonly posterize?: number;
+};
+export type EffectClipboardParam = EffectClipboardStaticParam | EffectClipboardKeyframedParam;
+export type EffectClipboardSnapshot = {
+    readonly callee: string;
+    readonly importPath: string;
+    readonly params: Record<string, EffectClipboardParam>;
+};
+export type EffectClipboardData = {
+    readonly type: EffectClipboardPasteType;
+    readonly version: 3;
+    readonly remotionClipboard: 'effects';
+    readonly effects: EffectClipboardSnapshot[];
+};
+export type EffectClipboardDataParseResult = {
+    readonly status: 'valid';
+    readonly data: EffectClipboardData;
+} | {
+    readonly status: 'unsupported-version';
+    readonly version: unknown;
+} | {
+    readonly status: 'invalid';
+};
+export declare const parseEffectClipboardDataResult: (value: string) => EffectClipboardDataParseResult;
+export declare const parseEffectClipboardData: (value: string) => EffectClipboardData | null;

package/dist/effect-clipboard-data.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseEffectClipboardData = exports.parseEffectClipboardDataResult = void 0;
+const keyframe_interpolation_function_1 = require("./keyframe-interpolation-function");
+const isRecord = (value) => {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+const extrapolateTypes = new Set(['extend', 'identity', 'clamp', 'wrap']);
+const isFiniteNumber = (value) => {
+    return typeof value === 'number' && Number.isFinite(value);
+};
+const isEasing = (value) => {
+    return (value === 'linear' ||
+        (Array.isArray(value) &&
+            value.length === 4 &&
+            value.every((item) => isFiniteNumber(item))));
+};
+const isKeyframe = (value) => {
+    return isRecord(value) && isFiniteNumber(value.frame) && 'value' in value;
+};
+const isClamping = (value) => {
+    return (isRecord(value) &&
+        typeof value.left === 'string' &&
+        extrapolateTypes.has(value.left) &&
+        typeof value.right === 'string' &&
+        extrapolateTypes.has(value.right));
+};
+const isEffectClipboardParam = (value) => {
+    if (!isRecord(value)) {
+        return false;
+    }
+    if (value.type === 'static') {
+        return 'value' in value;
+    }
+    if (value.type !== 'keyframed') {
+        return false;
+    }
+    const { posterize } = value;
+    const easingLength = Array.isArray(value.keyframes) && value.keyframes.length > 0
+        ? value.keyframes.length - 1
+        : null;
+    return (typeof value.interpolationFunction === 'string' &&
+        (0, keyframe_interpolation_function_1.isKeyframeInterpolationFunction)(value.interpolationFunction) &&
+        Array.isArray(value.keyframes) &&
+        value.keyframes.length > 0 &&
+        value.keyframes.every(isKeyframe) &&
+        Array.isArray(value.easing) &&
+        value.easing.length === easingLength &&
+        value.easing.every(isEasing) &&
+        isClamping(value.clamping) &&
+        (posterize === undefined || (isFiniteNumber(posterize) && posterize > 0)));
+};
+const isEffectClipboardSnapshotV3 = (value) => {
+    if (!isRecord(value)) {
+        return false;
+    }
+    return (typeof value.callee === 'string' &&
+        typeof value.importPath === 'string' &&
+        isRecord(value.params) &&
+        Object.values(value.params).every(isEffectClipboardParam));
+};
+const parseEffectClipboardDataResult = (value) => {
+    try {
+        const parsed = JSON.parse(value);
+        if (!isRecord(parsed)) {
+            return { status: 'invalid' };
+        }
+        if (parsed.remotionClipboard !== 'effects') {
+            return { status: 'invalid' };
+        }
+        if (parsed.version !== 3) {
+            return {
+                status: 'unsupported-version',
+                version: parsed.version,
+            };
+        }
+        if (parsed.type !== 'effects-additive' &&
+            parsed.type !== 'effects-replacing') {
+            return { status: 'invalid' };
+        }
+        if (!Array.isArray(parsed.effects)) {
+            return { status: 'invalid' };
+        }
+        const effects = [];
+        for (const effect of parsed.effects) {
+            if (!isEffectClipboardSnapshotV3(effect)) {
+                return { status: 'invalid' };
+            }
+            effects.push(effect);
+        }
+        return {
+            status: 'valid',
+            data: {
+                type: parsed.type,
+                version: 3,
+                remotionClipboard: 'effects',
+                effects,
+            },
+        };
+    }
+    catch (_a) {
+        return { status: 'invalid' };
+    }
+};
+exports.parseEffectClipboardDataResult = parseEffectClipboardDataResult;
+const parseEffectClipboardData = (value) => {
+    const result = (0, exports.parseEffectClipboardDataResult)(value);
+    if (result.status !== 'valid') {
+        return null;
+    }
+    return result.data;
+};
+exports.parseEffectClipboardData = parseEffectClipboardData;

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 export { splitAnsi, stripAnsi } from './ansi';
-export { AddEffectRequest, AddEffectResponse, AddEffectKeyframeRequest, AddEffectKeyframeResponse, 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, DuplicateJsxNodeRequest, DuplicateJsxNodeResponse, InstallPackageRequest, InstallPackageResponse, InsertableCompositionElement, InsertJsxElementRequest, InsertJsxElementResponse, OpenInEditorRequest, OpenInEditorResponse, OpenInFileExplorerRequest, ProjectInfoRequest, ProjectInfoResponse, RedoRequest, RedoResponse, RemoveRenderRequest, ReorderEffectRequest, ReorderEffectResponse, RestartStudioRequest, RestartStudioResponse, SaveEffectPropsRequest, SaveEffectPropsResponse, SaveSequencePropEdit, SaveSequencePropsRequest, SaveSequencePropsResponse, SaveSequencePropsResult, SimpleDiff, SubscribeToDefaultPropsRequest, SubscribeToDefaultPropsResponse, SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse, SubscribeToSequencePropsRequest, SubscribeToSequencePropsResponse, UndoRequest, UndoResponse, UnsubscribeFromDefaultPropsRequest, UnsubscribeFromFileExistenceRequest, UnsubscribeFromSequencePropsRequest, UpdateAvailableRequest, UpdateAvailableResponse, UpdateDefaultPropsRequest, UpdateDefaultPropsResponse, } from './api-requests';
+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, DuplicateJsxNodeRequest, DuplicateJsxNodeResponse, InsertJsxElementRequest, InsertJsxElementResponse, InsertableCompositionElement, InstallPackageRequest, InstallPackageResponse, OpenInEditorRequest, OpenInEditorResponse, OpenInFileExplorerRequest, PasteEffectsRequest, PasteEffectsResponse, ProjectInfoRequest, ProjectInfoResponse, RedoRequest, RedoResponse, RemoveRenderRequest, ReorderEffectRequest, ReorderEffectResponse, RestartStudioRequest, RestartStudioResponse, SaveEffectPropsRequest, SaveEffectPropsResponse, SaveSequencePropEdit, SaveSequencePropsRequest, SaveSequencePropsResponse, SaveSequencePropsResult, SimpleDiff, SubscribeToDefaultPropsRequest, SubscribeToDefaultPropsResponse, SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse, SubscribeToSequencePropsRequest, SubscribeToSequencePropsResponse, UndoRequest, UndoResponse, UnsubscribeFromDefaultPropsRequest, UnsubscribeFromFileExistenceRequest, UnsubscribeFromSequencePropsRequest, UpdateAvailableRequest, UpdateAvailableResponse, UpdateDefaultPropsRequest, UpdateDefaultPropsResponse, } from './api-requests';
 export type { ApplyVisualControlCodemod, RecastCodemod } from './codemods';
 export { DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS } from './default-buffer-state-delay-in-milliseconds';
+export { parseEffectClipboardData, parseEffectClipboardDataResult, type EffectClipboardClamping, type EffectClipboardData, type EffectClipboardDataParseResult, type EffectClipboardEasing, type EffectClipboardExtrapolateType, type EffectClipboardInterpolationFunction, type EffectClipboardKeyframe, type EffectClipboardKeyframedParam, type EffectClipboardParam, type EffectClipboardPasteType, type EffectClipboardSnapshot, type EffectClipboardStaticParam, } from './effect-clipboard-data';
 export { EFFECT_DRAG_MIME_TYPE, parseEffectDragData, type EffectDragData, } from './effect-drag-data';
 export { EventSourceEvent } from './event-source-event';
 export { formatBytes } from './format-bytes';
@@ -11,6 +12,7 @@ export { ErrorLocation, getLocationFromBuildError, } from './get-location-from-b
 export { getProjectName } from './get-project-name';
 export type { GitSource } from './git-source';
 export { HotMiddlewareMessage, HotMiddlewareOptions, ModuleMap, hotMiddlewareOptions, } from './hot-middleware';
+export { getKeyframeInterpolationFunction, getKeyframeInterpolationFunctionForSchemaField, isKeyframeInterpolationFunction, isSchemaFieldKeyframable, isSequenceFieldSchemaKeyframable, keyframeInterpolationFunctions, type KeyframeInterpolationFunction, } from './keyframe-interpolation-function';
 export { DEFAULT_TIMELINE_TRACKS } from './max-timeline-tracks';
 export { Pkgs, apiDocs, descriptions, extraPackages, installableMap, packages, type ExtraPackage, } from './package-info';
 export { PackageManager } from './package-manager';

package/dist/index.js

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.stringifySequenceSubscriptionKey = exports.stringifySequenceExpandedRowKey = exports.optimisticUpdateForEffectCodeValues = exports.optimisticUpdateForCodeValues = exports.optimisticDeleteSequenceKeyframes = exports.optimisticDeleteSequenceKeyframe = exports.optimisticDeleteEffectKeyframes = exports.optimisticDeleteEffectKeyframe = exports.optimisticAddSequenceKeyframe = exports.optimisticAddEffectKeyframe = exports.stringifyDefaultProps = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.packages = exports.installableMap = exports.extraPackages = exports.descriptions = exports.apiDocs = exports.DEFAULT_TIMELINE_TRACKS = exports.hotMiddlewareOptions = exports.getProjectName = exports.getLocationFromBuildError = exports.getDefaultOutLocation = exports.getAllSchemaKeys = exports.formatBytes = exports.parseEffectDragData = exports.EFFECT_DRAG_MIME_TYPE = exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = exports.stripAnsi = exports.splitAnsi = void 0;
+exports.stringifySequenceSubscriptionKey = exports.stringifySequenceExpandedRowKey = exports.optimisticUpdateForEffectCodeValues = exports.optimisticUpdateForCodeValues = exports.optimisticDeleteSequenceKeyframes = exports.optimisticDeleteSequenceKeyframe = exports.optimisticDeleteEffectKeyframes = exports.optimisticDeleteEffectKeyframe = exports.optimisticAddSequenceKeyframe = exports.optimisticAddEffectKeyframe = exports.stringifyDefaultProps = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_ROW_HEIGHT = 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.parseEffectClipboardDataResult = exports.parseEffectClipboardData = exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = exports.stripAnsi = exports.splitAnsi = 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; } });
 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 effect_clipboard_data_1 = require("./effect-clipboard-data");
+Object.defineProperty(exports, "parseEffectClipboardData", { enumerable: true, get: function () { return effect_clipboard_data_1.parseEffectClipboardData; } });
+Object.defineProperty(exports, "parseEffectClipboardDataResult", { enumerable: true, get: function () { return effect_clipboard_data_1.parseEffectClipboardDataResult; } });
 const effect_drag_data_1 = require("./effect-drag-data");
 Object.defineProperty(exports, "EFFECT_DRAG_MIME_TYPE", { enumerable: true, get: function () { return effect_drag_data_1.EFFECT_DRAG_MIME_TYPE; } });
 Object.defineProperty(exports, "parseEffectDragData", { enumerable: true, get: function () { return effect_drag_data_1.parseEffectDragData; } });
@@ -21,6 +24,13 @@ const get_project_name_1 = require("./get-project-name");
 Object.defineProperty(exports, "getProjectName", { enumerable: true, get: function () { return get_project_name_1.getProjectName; } });
 const hot_middleware_1 = require("./hot-middleware");
 Object.defineProperty(exports, "hotMiddlewareOptions", { enumerable: true, get: function () { return hot_middleware_1.hotMiddlewareOptions; } });
+const keyframe_interpolation_function_1 = require("./keyframe-interpolation-function");
+Object.defineProperty(exports, "getKeyframeInterpolationFunction", { enumerable: true, get: function () { return keyframe_interpolation_function_1.getKeyframeInterpolationFunction; } });
+Object.defineProperty(exports, "getKeyframeInterpolationFunctionForSchemaField", { enumerable: true, get: function () { return keyframe_interpolation_function_1.getKeyframeInterpolationFunctionForSchemaField; } });
+Object.defineProperty(exports, "isKeyframeInterpolationFunction", { enumerable: true, get: function () { return keyframe_interpolation_function_1.isKeyframeInterpolationFunction; } });
+Object.defineProperty(exports, "isSchemaFieldKeyframable", { enumerable: true, get: function () { return keyframe_interpolation_function_1.isSchemaFieldKeyframable; } });
+Object.defineProperty(exports, "isSequenceFieldSchemaKeyframable", { enumerable: true, get: function () { return keyframe_interpolation_function_1.isSequenceFieldSchemaKeyframable; } });
+Object.defineProperty(exports, "keyframeInterpolationFunctions", { enumerable: true, get: function () { return keyframe_interpolation_function_1.keyframeInterpolationFunctions; } });
 const max_timeline_tracks_1 = require("./max-timeline-tracks");
 Object.defineProperty(exports, "DEFAULT_TIMELINE_TRACKS", { enumerable: true, get: function () { return max_timeline_tracks_1.DEFAULT_TIMELINE_TRACKS; } });
 const package_info_1 = require("./package-info");

package/dist/keyframe-interpolation-function.d.ts

@@ -0,0 +1,19 @@
+import type { SequenceFieldSchema, SequenceSchema } from 'remotion';
+export declare const keyframeInterpolationFunctions: readonly ["interpolate", "interpolateColors"];
+export type KeyframeInterpolationFunction = (typeof keyframeInterpolationFunctions)[number];
+export declare const isKeyframeInterpolationFunction: (name: string) => name is "interpolate" | "interpolateColors";
+export declare const isSequenceFieldSchemaKeyframable: (field: SequenceFieldSchema | undefined) => boolean;
+export declare const isSchemaFieldKeyframable: ({ schema, key, }: {
+    schema: SequenceSchema | null;
+    key: string;
+}) => boolean;
+export declare const getKeyframeInterpolationFunctionForSchemaField: ({ schema, key, }: {
+    schema: SequenceSchema | null;
+    key: string;
+}) => "interpolate" | "interpolateColors" | null;
+export declare const getKeyframeInterpolationFunction: ({ schema, key, staticValue, newValue, }: {
+    schema: SequenceSchema | null;
+    key: string;
+    staticValue: unknown;
+    newValue: unknown;
+}) => "interpolate" | "interpolateColors";

package/dist/keyframe-interpolation-function.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getKeyframeInterpolationFunction = exports.getKeyframeInterpolationFunctionForSchemaField = exports.isSchemaFieldKeyframable = exports.isSequenceFieldSchemaKeyframable = exports.isKeyframeInterpolationFunction = exports.keyframeInterpolationFunctions = void 0;
+exports.keyframeInterpolationFunctions = [
+    'interpolate',
+    'interpolateColors',
+];
+const isKeyframeInterpolationFunction = (name) => {
+    return exports.keyframeInterpolationFunctions.includes(name);
+};
+exports.isKeyframeInterpolationFunction = isKeyframeInterpolationFunction;
+const isSequenceFieldSchemaKeyframable = (field) => {
+    if (!field) {
+        return true;
+    }
+    if (field.type === 'array' || field.type === 'enum') {
+        return false;
+    }
+    return field.keyframable !== false;
+};
+exports.isSequenceFieldSchemaKeyframable = isSequenceFieldSchemaKeyframable;
+const findFieldInSchema = (schema, key) => {
+    if (key in schema) {
+        return schema[key];
+    }
+    for (const field of Object.values(schema)) {
+        if (field.type !== 'enum') {
+            continue;
+        }
+        for (const variant of Object.values(field.variants)) {
+            const found = findFieldInSchema(variant, key);
+            if (found) {
+                return found;
+            }
+        }
+    }
+    return undefined;
+};
+const isSchemaFieldKeyframable = ({ schema, key, }) => {
+    const field = schema ? findFieldInSchema(schema, key) : undefined;
+    return (0, exports.isSequenceFieldSchemaKeyframable)(field);
+};
+exports.isSchemaFieldKeyframable = isSchemaFieldKeyframable;
+const getKeyframeInterpolationFunctionForSchemaField = ({ schema, key, }) => {
+    const field = schema ? findFieldInSchema(schema, key) : undefined;
+    if ((field === null || field === void 0 ? void 0 : field.type) === 'color') {
+        return 'interpolateColors';
+    }
+    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) === 'rotation-css') {
+        return 'interpolate';
+    }
+    return null;
+};
+exports.getKeyframeInterpolationFunctionForSchemaField = getKeyframeInterpolationFunctionForSchemaField;
+const getKeyframeInterpolationFunction = ({ schema, key, staticValue, newValue, }) => {
+    const schemaFunction = (0, exports.getKeyframeInterpolationFunctionForSchemaField)({
+        schema,
+        key,
+    });
+    if (schemaFunction) {
+        return schemaFunction;
+    }
+    return typeof staticValue === 'string' && typeof newValue === 'string'
+        ? 'interpolateColors'
+        : 'interpolate';
+};
+exports.getKeyframeInterpolationFunction = getKeyframeInterpolationFunction;

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

@@ -1,14 +1,16 @@
-import { type CanUpdateSequencePropsResponse } from 'remotion';
-export declare const optimisticAddSequenceKeyframe: ({ previous, fieldKey, frame, value, }: {
+import { type CanUpdateSequencePropsResponse, type SequenceSchema } from 'remotion';
+export declare const optimisticAddSequenceKeyframe: ({ previous, fieldKey, frame, value, schema, }: {
     previous: CanUpdateSequencePropsResponse;
     fieldKey: string;
     frame: number;
     value: unknown;
+    schema?: SequenceSchema | undefined;
 }) => CanUpdateSequencePropsResponse;
-export declare const optimisticAddEffectKeyframe: ({ previous, effectIndex, fieldKey, frame, value, }: {
+export declare const optimisticAddEffectKeyframe: ({ previous, effectIndex, fieldKey, frame, value, schema, }: {
     previous: CanUpdateSequencePropsResponse;
     effectIndex: number;
     fieldKey: string;
     frame: number;
     value: unknown;
+    schema?: SequenceSchema | undefined;
 }) => CanUpdateSequencePropsResponse;

package/dist/optimistic-add-keyframe.js

@@ -1,51 +1,55 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.optimisticAddEffectKeyframe = exports.optimisticAddSequenceKeyframe = void 0;
-const getInterpolationFunction = (staticValue, newValue) => {
-    return typeof staticValue === 'string' && typeof newValue === 'string'
-        ? 'interpolateColors'
-        : 'interpolate';
-};
-const addKeyframeToPropStatus = ({ status, frame, value, }) => {
+const keyframe_interpolation_function_1 = require("./keyframe-interpolation-function");
+const addKeyframeToPropStatus = ({ status, fieldKey, frame, value, schema, }) => {
     var _a;
-    if (status.canUpdate) {
+    if (status.status === 'keyframed') {
+        const existingIndex = status.keyframes.findIndex((kf) => kf.frame === frame);
+        if (existingIndex !== -1) {
+            const updatedKeyframes = status.keyframes.map((keyframe, index) => index === existingIndex ? { frame, value } : keyframe);
+            return {
+                ...status,
+                keyframes: updatedKeyframes,
+            };
+        }
+        const keyframes = [...status.keyframes, { frame, value }].sort((first, second) => first.frame - second.frame);
+        const easing = [...status.easing];
+        while (easing.length < keyframes.length - 1) {
+            easing.push('linear');
+        }
+        return {
+            ...status,
+            keyframes,
+            easing,
+        };
+    }
+    if (status.status === 'static') {
         const staticValue = (_a = status.codeValue) !== null && _a !== void 0 ? _a : value;
         return {
-            canUpdate: false,
-            reason: 'keyframed',
-            interpolationFunction: getInterpolationFunction(staticValue, value),
+            status: 'keyframed',
+            codeValue: undefined,
+            interpolationFunction: (0, keyframe_interpolation_function_1.getKeyframeInterpolationFunction)({
+                schema,
+                key: fieldKey,
+                staticValue,
+                newValue: value,
+            }),
             keyframes: [{ frame, value }],
             easing: [],
-            clamping: { left: 'extend', right: 'extend' },
+            clamping: { left: 'clamp', right: 'clamp' },
             posterize: undefined,
         };
     }
-    if (status.reason !== 'keyframed') {
-        return status;
-    }
-    const existingIndex = status.keyframes.findIndex((kf) => kf.frame === frame);
-    if (existingIndex !== -1) {
-        const updatedKeyframes = status.keyframes.map((keyframe, index) => index === existingIndex ? { frame, value } : keyframe);
-        return {
-            ...status,
-            keyframes: updatedKeyframes,
-        };
-    }
-    const keyframes = [...status.keyframes, { frame, value }].sort((first, second) => first.frame - second.frame);
-    const easing = [...status.easing];
-    while (easing.length < keyframes.length - 1) {
-        easing.push('linear');
-    }
-    return {
-        ...status,
-        keyframes,
-        easing,
-    };
+    return status;
 };
-const optimisticAddSequenceKeyframe = ({ previous, fieldKey, frame, value, }) => {
+const optimisticAddSequenceKeyframe = ({ previous, fieldKey, frame, value, schema, }) => {
     if (!previous.canUpdate) {
         return previous;
     }
+    if (!(0, keyframe_interpolation_function_1.isSchemaFieldKeyframable)({ schema: schema !== null && schema !== void 0 ? schema : null, key: fieldKey })) {
+        return previous;
+    }
     const status = previous.props[fieldKey];
     if (!status) {
         return previous;
@@ -54,15 +58,24 @@ const optimisticAddSequenceKeyframe = ({ previous, fieldKey, frame, value, }) =>
         ...previous,
         props: {
             ...previous.props,
-            [fieldKey]: addKeyframeToPropStatus({ status, frame, value }),
+            [fieldKey]: addKeyframeToPropStatus({
+                status,
+                fieldKey,
+                frame,
+                value,
+                schema: schema !== null && schema !== void 0 ? schema : null,
+            }),
         },
     };
 };
 exports.optimisticAddSequenceKeyframe = optimisticAddSequenceKeyframe;
-const optimisticAddEffectKeyframe = ({ previous, effectIndex, fieldKey, frame, value, }) => {
+const optimisticAddEffectKeyframe = ({ previous, effectIndex, fieldKey, frame, value, schema, }) => {
     if (!previous.canUpdate) {
         return previous;
     }
+    if (!(0, keyframe_interpolation_function_1.isSchemaFieldKeyframable)({ schema: schema !== null && schema !== void 0 ? schema : null, key: fieldKey })) {
+        return previous;
+    }
     const targetIndex = previous.effects.findIndex((e) => e.effectIndex === effectIndex);
     if (targetIndex === -1) {
         return previous;
@@ -79,7 +92,13 @@ const optimisticAddEffectKeyframe = ({ previous, effectIndex, fieldKey, frame, v
         ...target,
         props: {
             ...target.props,
-            [fieldKey]: addKeyframeToPropStatus({ status, frame, value }),
+            [fieldKey]: addKeyframeToPropStatus({
+                status,
+                fieldKey,
+                frame,
+                value,
+                schema: schema !== null && schema !== void 0 ? schema : null,
+            }),
         },
     };
     const effects = [...previous.effects];

package/dist/optimistic-delete-keyframe.js

@@ -2,10 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.optimisticDeleteEffectKeyframes = exports.optimisticDeleteEffectKeyframe = exports.optimisticDeleteSequenceKeyframes = exports.optimisticDeleteSequenceKeyframe = void 0;
 const removeKeyframeFromPropStatus = ({ status, frame, }) => {
-    if (status.canUpdate) {
-        return status;
-    }
-    if (status.reason !== 'keyframed') {
+    if (status.status !== 'keyframed') {
         return status;
     }
     const index = status.keyframes.findIndex((kf) => kf.frame === frame);
@@ -15,7 +12,7 @@ const removeKeyframeFromPropStatus = ({ status, frame, }) => {
     const keyframes = status.keyframes.filter((_, i) => i !== index);
     if (keyframes.length === 0) {
         return {
-            canUpdate: true,
+            status: 'static',
             codeValue: status.keyframes[index].value,
         };
     }

package/dist/optimistic-update-for-code-values.js

@@ -9,7 +9,7 @@ const optimisticUpdateForCodeValues = ({ previous, fieldKey, value, schema, }) =
     }
     const props = {
         ...previous.props,
-        [fieldKey]: { canUpdate: true, codeValue: value },
+        [fieldKey]: { status: 'static', codeValue: value },
     };
     if (((_a = schema[fieldKey]) === null || _a === void 0 ? void 0 : _a.type) === 'enum') {
         const propsToDelete = no_react_1.NoReactInternals.findPropsToDelete({

package/dist/optimistic-update-for-effect-code-values.js

@@ -17,7 +17,7 @@ const optimisticUpdateForEffectCodeValues = ({ previous, effectIndex, fieldKey,
     }
     const props = {
         ...target.props,
-        [fieldKey]: { canUpdate: true, codeValue: value },
+        [fieldKey]: { status: 'static', codeValue: value },
     };
     if (((_a = schema[fieldKey]) === null || _a === void 0 ? void 0 : _a.type) === 'enum') {
         const propsToDelete = no_react_1.NoReactInternals.findPropsToDelete({

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", "translate", "uv-coordinate", "color", "enum", "hidden"];
+declare const SUPPORTED_SCHEMA_TYPES: readonly ["number", "boolean", "rotation-css", "rotation-degrees", "translate", "scale", "uv-coordinate", "color", "array", "enum", "hidden"];
 type SupportedSchemaType = (typeof SUPPORTED_SCHEMA_TYPES)[number];
 export declare const getFieldsToShow: ({ getDragOverrides, codeValues, nodePath, schema, currentRuntimeValueDotNotation, }: {
     schema: SequenceSchema;

package/dist/schema-field-info.js

@@ -7,13 +7,49 @@ exports.SCHEMA_FIELD_ROW_HEIGHT = 22;
 const SUPPORTED_SCHEMA_TYPES = [
     'number',
     'boolean',
-    'rotation',
+    'rotation-css',
+    'rotation-degrees',
     'translate',
+    'scale',
     'uv-coordinate',
     'color',
+    'array',
     'enum',
     'hidden',
 ];
+const getArrayRowCount = ({ fieldSchema, value, }) => {
+    var _a, _b;
+    const items = Array.isArray(value)
+        ? value
+        : Array.isArray(fieldSchema.default)
+            ? fieldSchema.default
+            : Array.from({ length: (_a = fieldSchema.minLength) !== null && _a !== void 0 ? _a : 0 });
+    const canAdd = items.length < ((_b = fieldSchema.maxLength) !== null && _b !== void 0 ? _b : Infinity);
+    return Math.max(1, items.length + (canAdd ? 1 : 0));
+};
+const getSchemaFieldRowHeight = ({ fieldSchema, value, }) => {
+    if (fieldSchema.type === 'array') {
+        return (getArrayRowCount({
+            fieldSchema,
+            value,
+        }) * exports.SCHEMA_FIELD_ROW_HEIGHT);
+    }
+    return exports.SCHEMA_FIELD_ROW_HEIGHT;
+};
+const getEffectFieldValue = ({ key, dragOverrides, effectStatus, }) => {
+    const dragOverride = remotion_1.Internals.getStaticDragOverrideValue(dragOverrides[key]);
+    if (dragOverride !== undefined) {
+        return dragOverride;
+    }
+    if ((effectStatus === null || effectStatus === void 0 ? void 0 : effectStatus.type) !== 'can-update-effect') {
+        return undefined;
+    }
+    const propStatus = effectStatus.props[key];
+    if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'static') {
+        return undefined;
+    }
+    return propStatus.codeValue;
+};
 const getFieldsToShow = ({ getDragOverrides, codeValues, nodePath, schema, currentRuntimeValueDotNotation, }) => {
     const { merged: valuesDotNotation } = remotion_1.Internals.computeEffectiveSchemaValuesDotNotation({
         schema,
@@ -32,6 +68,9 @@ const getFieldsToShow = ({ getDragOverrides, codeValues, nodePath, schema, curre
         if (typeName === 'hidden') {
             return null;
         }
+        if (fieldSchema.type === 'number' && fieldSchema.hiddenFromList) {
+            return null;
+        }
         // `hidden` is represented as the eye/speaker icon on the timeline track,
         // so we don't render it as a regular field in the expanded section.
         if (key === 'hidden') {
@@ -42,7 +81,10 @@ const getFieldsToShow = ({ getDragOverrides, codeValues, nodePath, schema, curre
             key,
             description: fieldSchema.description,
             typeName,
-            rowHeight: exports.SCHEMA_FIELD_ROW_HEIGHT,
+            rowHeight: getSchemaFieldRowHeight({
+                fieldSchema,
+                value: valuesDotNotation[key],
+            }),
             fieldSchema,
         };
     })
@@ -59,18 +101,7 @@ const getEffectFieldsToShow = ({ effect, effectIndex, nodePath, codeValues, getE
         });
     const dragOverrides = nodePath === null ? {} : getEffectDragOverrides(nodePath, effectIndex);
     const activeSchema = remotion_1.Internals.flattenActiveSchema(effect.schema, (key) => {
-        const dragOverride = dragOverrides[key];
-        if (dragOverride !== undefined) {
-            return dragOverride;
-        }
-        if ((effectStatus === null || effectStatus === void 0 ? void 0 : effectStatus.type) !== 'can-update-effect') {
-            return undefined;
-        }
-        const propStatus = effectStatus.props[key];
-        if (!propStatus || !propStatus.canUpdate) {
-            return undefined;
-        }
-        return propStatus.codeValue;
+        return getEffectFieldValue({ key, dragOverrides, effectStatus });
     });
     return Object.entries(activeSchema)
         .map(([key, fieldSchema]) => {
@@ -78,6 +109,9 @@ const getEffectFieldsToShow = ({ effect, effectIndex, nodePath, codeValues, getE
         if (typeName === 'hidden') {
             return null;
         }
+        if (fieldSchema.type === 'number' && fieldSchema.hiddenFromList) {
+            return null;
+        }
         // `disabled` is represented as the eye icon on the effect timeline row,
         // so we don't render it as a regular field in the expanded section.
         if (key === 'disabled') {
@@ -91,7 +125,10 @@ const getEffectFieldsToShow = ({ effect, effectIndex, nodePath, codeValues, getE
             key,
             description: fieldSchema.description,
             typeName,
-            rowHeight: exports.SCHEMA_FIELD_ROW_HEIGHT,
+            rowHeight: getSchemaFieldRowHeight({
+                fieldSchema,
+                value: getEffectFieldValue({ key, dragOverrides, effectStatus }),
+            }),
             fieldSchema,
             effectSchema: effect.schema,
             effectIndex,

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.471",
+	"version": "4.0.472",
 	"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.471"
+		"remotion": "4.0.472"
 	},
 	"devDependencies": {
-		"@remotion/renderer": "4.0.471",
-		"@remotion/eslint-config-internal": "4.0.471",
+		"@remotion/renderer": "4.0.472",
+		"@remotion/eslint-config-internal": "4.0.472",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},