@remotion/studio 4.0.491 → 4.0.493

package/dist/components/Timeline/keyframe-clipboard.js

@@ -0,0 +1,278 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPasteKeyframeTarget = exports.getKeyframeClipboardDataFromSelections = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const remotion_1 = require("remotion");
+const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
+const getKeyframeClipboardFieldType = ({ schema, fieldKey, }) => {
+    const field = remotion_1.Internals.getFlatSchemaWithAllKeys(schema)[fieldKey];
+    if (!field) {
+        return null;
+    }
+    return (0, studio_shared_1.isKeyframeClipboardFieldType)(field.type) ? field.type : null;
+};
+const getKeyframeFieldIdentity = (selection) => {
+    if (selection.type === 'keyframe' || selection.type === 'easing') {
+        return (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(selection.nodePathInfo.auxiliaryKeys);
+    }
+    if (selection.type === 'sequence-prop') {
+        return { type: 'sequence', fieldKey: selection.key };
+    }
+    if (selection.type === 'sequence-effect-prop') {
+        return {
+            type: 'effect',
+            effectIndex: selection.i,
+            fieldKey: selection.key,
+        };
+    }
+    return null;
+};
+const resolveKeyframeField = ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    var _a, _b;
+    if (selection.type !== 'keyframe' &&
+        selection.type !== 'easing' &&
+        selection.type !== 'sequence-prop' &&
+        selection.type !== 'sequence-effect-prop') {
+        return null;
+    }
+    const identity = getKeyframeFieldIdentity(selection);
+    if (identity === null) {
+        return null;
+    }
+    const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
+        sequences,
+        overrideIdsToNodePaths,
+        nodePathInfo: selection.nodePathInfo,
+    });
+    if (!track || track.nodePathInfo === null) {
+        return null;
+    }
+    const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
+    if (identity.type === 'sequence') {
+        if (!track.sequence.controls) {
+            return null;
+        }
+        const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[identity.fieldKey];
+        if (!sequencePropStatus || sequencePropStatus.status === 'computed') {
+            return null;
+        }
+        const { schema } = track.sequence.controls;
+        return {
+            identity,
+            nodePath,
+            fileName: nodePath.absolutePath,
+            schema,
+            fieldType: getKeyframeClipboardFieldType({
+                schema,
+                fieldKey: identity.fieldKey,
+            }),
+            propStatus: sequencePropStatus,
+            keyframeDisplayOffset: track.keyframeDisplayOffset,
+        };
+    }
+    const effect = track.sequence.effects[identity.effectIndex];
+    const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses,
+        nodePath,
+        effectIndex: identity.effectIndex,
+    });
+    const effectPropStatus = effectStatus.type === 'can-update-effect'
+        ? (_b = effectStatus.props) === null || _b === void 0 ? void 0 : _b[identity.fieldKey]
+        : null;
+    if (!effect || !effectPropStatus || effectPropStatus.status === 'computed') {
+        return null;
+    }
+    return {
+        identity,
+        nodePath,
+        fileName: nodePath.absolutePath,
+        schema: effect.schema,
+        fieldType: getKeyframeClipboardFieldType({
+            schema: effect.schema,
+            fieldKey: identity.fieldKey,
+        }),
+        propStatus: effectPropStatus,
+        keyframeDisplayOffset: track.keyframeDisplayOffset,
+    };
+};
+const areResolvedFieldsEqual = (first, second) => {
+    if (remotion_1.Internals.makeSequencePropsSubscriptionKey(first.nodePath) !==
+        remotion_1.Internals.makeSequencePropsSubscriptionKey(second.nodePath)) {
+        return false;
+    }
+    if (first.identity.type !== second.identity.type) {
+        return false;
+    }
+    if (first.identity.fieldKey !== second.identity.fieldKey) {
+        return false;
+    }
+    return (first.identity.type === 'sequence' ||
+        (second.identity.type === 'effect' &&
+            first.identity.effectIndex === second.identity.effectIndex));
+};
+const getKeyframeClipboardDataFromSelections = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    var _a, _b;
+    const keyframeSelections = selections.filter((selection) => selection.type === 'keyframe');
+    const easingSelections = selections.filter((selection) => selection.type === 'easing');
+    if (keyframeSelections.length + easingSelections.length !==
+        selections.length) {
+        return null;
+    }
+    const resolvedFields = keyframeSelections.map((selection) => ({
+        selection,
+        resolved: resolveKeyframeField({
+            selection,
+            sequences,
+            overrideIdsToNodePaths,
+            propStatuses,
+        }),
+    }));
+    const firstResolved = (_a = resolvedFields[0]) === null || _a === void 0 ? void 0 : _a.resolved;
+    if (firstResolved === null ||
+        firstResolved === undefined ||
+        resolvedFields.some(({ resolved }) => resolved === null || !areResolvedFieldsEqual(firstResolved, resolved))) {
+        return null;
+    }
+    const keyframedPropStatus = firstResolved.propStatus;
+    if (keyframedPropStatus.status !== 'keyframed') {
+        return null;
+    }
+    const keyframes = [];
+    for (const { selection } of resolvedFields) {
+        const sourceFrame = selection.frame - firstResolved.keyframeDisplayOffset;
+        const keyframe = keyframedPropStatus.keyframes.find((item) => item.frame === sourceFrame);
+        if (keyframe === undefined ||
+            JSON.stringify(keyframe.value) === undefined) {
+            return null;
+        }
+        keyframes.push({ frame: sourceFrame, value: keyframe.value });
+    }
+    keyframes.sort((first, second) => first.frame - second.frame);
+    const firstFrame = (_b = keyframes[0]) === null || _b === void 0 ? void 0 : _b.frame;
+    if (firstFrame === undefined) {
+        return null;
+    }
+    const keyframeIndexes = keyframes.map((keyframe) => keyframedPropStatus.keyframes.findIndex((item) => item.frame === keyframe.frame));
+    if (keyframeIndexes.some((index, position) => index === -1 ||
+        (position > 0 && index !== keyframeIndexes[position - 1] + 1))) {
+        return null;
+    }
+    const firstKeyframeIndex = keyframeIndexes[0];
+    const lastKeyframeIndex = keyframeIndexes.at(-1);
+    if (firstKeyframeIndex === undefined || lastKeyframeIndex === undefined) {
+        return null;
+    }
+    for (const easingSelection of easingSelections) {
+        const resolved = resolveKeyframeField({
+            selection: easingSelection,
+            sequences,
+            overrideIdsToNodePaths,
+            propStatuses,
+        });
+        if (resolved === null ||
+            !areResolvedFieldsEqual(firstResolved, resolved) ||
+            easingSelection.segmentIndex < firstKeyframeIndex ||
+            easingSelection.segmentIndex >= lastKeyframeIndex) {
+            return null;
+        }
+    }
+    return {
+        type: 'keyframe',
+        version: 1,
+        remotionClipboard: 'keyframe',
+        fieldType: firstResolved.fieldType,
+        keyframes: keyframes.map((keyframe) => {
+            return {
+                frameOffset: keyframe.frame - firstFrame,
+                value: keyframe.value,
+            };
+        }),
+        easing: keyframeIndexes.slice(0, -1).map((index) => {
+            var _a;
+            return (_a = keyframedPropStatus.easing[index]) !== null && _a !== void 0 ? _a : studio_shared_1.LINEAR_KEYFRAME_EASING;
+        }),
+    };
+};
+exports.getKeyframeClipboardDataFromSelections = getKeyframeClipboardDataFromSelections;
+const isKeyframeValueCompatible = ({ value, fieldType, }) => {
+    if (fieldType === null) {
+        return true;
+    }
+    if (fieldType === 'number' || fieldType === 'rotation-degrees') {
+        return typeof value === 'number' && Number.isFinite(value);
+    }
+    if (fieldType === 'scale') {
+        return ((typeof value === 'number' && Number.isFinite(value)) ||
+            typeof value === 'string');
+    }
+    if (fieldType === 'uv-coordinate') {
+        return (Array.isArray(value) &&
+            value.length === 2 &&
+            value.every((item) => typeof item === 'number' && Number.isFinite(item)));
+    }
+    return typeof value === 'string';
+};
+const getPasteKeyframeTarget = ({ selectedItems, payload, timelinePosition, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    var _a, _b;
+    if (selectedItems.length === 0) {
+        return { type: 'none' };
+    }
+    const selection = selectedItems[0];
+    if (!selection || getKeyframeFieldIdentity(selection) === null) {
+        return { type: 'none' };
+    }
+    const resolvedFields = selectedItems.map((item) => resolveKeyframeField({
+        selection: item,
+        sequences,
+        overrideIdsToNodePaths,
+        propStatuses,
+    }));
+    const resolved = resolvedFields[0];
+    if (resolved === null) {
+        return { type: 'uncopyable' };
+    }
+    if (resolvedFields.some((field) => field === null || !areResolvedFieldsEqual(resolved, field))) {
+        return { type: 'multiple' };
+    }
+    const keyframes = payload.keyframes.map((keyframe) => ({
+        sourceFrame: timelinePosition - resolved.keyframeDisplayOffset + keyframe.frameOffset,
+        value: keyframe.value,
+    }));
+    const firstFrame = (_a = keyframes[0]) === null || _a === void 0 ? void 0 : _a.sourceFrame;
+    const lastFrame = (_b = keyframes.at(-1)) === null || _b === void 0 ? void 0 : _b.sourceFrame;
+    if (firstFrame === undefined || lastFrame === undefined) {
+        return { type: 'incompatible' };
+    }
+    const existingFrames = resolved.propStatus.status === 'keyframed'
+        ? resolved.propStatus.keyframes.map((keyframe) => keyframe.frame)
+        : [];
+    const keyframesToDelete = existingFrames.filter((frame) => frame >= firstFrame && frame <= lastFrame);
+    const finalFrames = [
+        ...existingFrames.filter((frame) => frame < firstFrame || frame > lastFrame),
+        ...keyframes.map((keyframe) => keyframe.sourceFrame),
+    ].sort((first, second) => first - second);
+    const firstEasingSegmentIndex = finalFrames.indexOf(firstFrame);
+    if (resolved.fieldType !== payload.fieldType ||
+        payload.keyframes.some((keyframe) => !isKeyframeValueCompatible({
+            value: keyframe.value,
+            fieldType: payload.fieldType,
+        }))) {
+        return { type: 'incompatible' };
+    }
+    return {
+        type: 'valid',
+        fileName: resolved.fileName,
+        nodePath: resolved.nodePath,
+        fieldKey: resolved.identity.fieldKey,
+        effectIndex: resolved.identity.type === 'effect'
+            ? resolved.identity.effectIndex
+            : null,
+        keyframes,
+        keyframesToDelete,
+        easing: payload.easing,
+        firstEasingSegmentIndex,
+        schema: resolved.schema,
+    };
+};
+exports.getPasteKeyframeTarget = getPasteKeyframeTarget;

package/dist/components/Timeline/sequence-props-subscription-store.js

@@ -4,10 +4,11 @@ exports.acquireSequencePropsSubscription = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
-const makeKey = ({ fileName, line, column, componentIdentity, sequenceKeys, effectKeys, videoConfigValues, }) => `${fileName}\0${line}\0${column}\0${componentIdentity !== null && componentIdentity !== void 0 ? componentIdentity : ''}\0${sequenceKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}\0${JSON.stringify(videoConfigValues)}`;
+const makeKey = ({ fileName, line, column, componentIdentity, sequenceKeys, assetKeys, effectKeys, videoConfigValues, }) => `${fileName}\0${line}\0${column}\0${componentIdentity !== null && componentIdentity !== void 0 ? componentIdentity : ''}\0${sequenceKeys.join('\0')}\0${assetKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}\0${JSON.stringify(videoConfigValues)}`;
 const entries = new Map();
 const acquireSequencePropsSubscription = ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, }) => {
     const sequenceKeys = (0, studio_shared_1.getAllSchemaKeys)(schema);
+    const assetKeys = (0, studio_shared_1.getAssetSchemaKeys)(schema);
     const effectKeys = effects.map((effect) => (0, studio_shared_1.getAllSchemaKeys)(effect));
     const key = makeKey({
         fileName,
@@ -15,6 +16,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, comp
         column,
         componentIdentity,
         sequenceKeys,
+        assetKeys,
         effectKeys,
         videoConfigValues,
     });
@@ -27,6 +29,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, comp
             nodePath,
             componentIdentity,
             keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
+            assetKeys,
             effects: effectKeys,
             clientId,
             videoConfigValues,
@@ -88,6 +91,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, comp
                     nodePath: result.nodePath,
                     clientId: acquired.clientId,
                     sequenceKeys,
+                    assetKeys,
                     effectKeys,
                 });
             })

package/dist/components/Timeline/timeline-asset-link.d.ts

@@ -1,3 +1,4 @@
+import type { SequenceControls } from 'remotion';
 type LinkInfo = {
     kind: 'local';
     assetPath: string;
@@ -8,6 +9,11 @@ type LinkInfo = {
     title: string;
 } | null;
 export type TimelineAssetLinkInfo = Exclude<LinkInfo, null>;
+export declare const splitRemoteSourceForMiddleEllipsis: (src: string) => {
+    leading: string;
+    trailing: string;
+};
+export declare const getTimelineAssetSrcFromSchema: (controls: SequenceControls | null) => string | null;
 export declare const getTimelineAssetLinkInfo: (src: string) => LinkInfo;
 export declare const openTimelineAssetLink: (linkInfo: TimelineAssetLinkInfo, selectAsset: (asset: string) => void) => void;
 export {};

package/dist/components/Timeline/timeline-asset-link.js

@@ -1,7 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.openTimelineAssetLink = exports.getTimelineAssetLinkInfo = void 0;
+exports.openTimelineAssetLink = exports.getTimelineAssetLinkInfo = exports.getTimelineAssetSrcFromSchema = exports.splitRemoteSourceForMiddleEllipsis = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
 const url_state_1 = require("../../helpers/url-state");
+const splitRemoteSourceForMiddleEllipsis = (src) => {
+    const protocolEnd = src.indexOf('://');
+    const minimumSlashIndex = protocolEnd === -1 ? 0 : protocolEnd + 3;
+    const lastSlash = src.lastIndexOf('/');
+    if (lastSlash >= minimumSlashIndex && lastSlash < src.length - 1) {
+        return {
+            leading: src.slice(0, lastSlash + 1),
+            trailing: src.slice(lastSlash + 1),
+        };
+    }
+    const middle = Math.ceil(src.length / 2);
+    return {
+        leading: src.slice(0, middle),
+        trailing: src.slice(middle),
+    };
+};
+exports.splitRemoteSourceForMiddleEllipsis = splitRemoteSourceForMiddleEllipsis;
+const getTimelineAssetSrcFromSchema = (controls) => {
+    if (!controls || !(0, studio_shared_1.getAssetSchemaKeys)(controls.schema).includes('src')) {
+        return null;
+    }
+    const { src } = controls.currentRuntimeValueDotNotation;
+    return typeof src === 'string' ? src : null;
+};
+exports.getTimelineAssetSrcFromSchema = getTimelineAssetSrcFromSchema;
 const getTimelineAssetLinkInfo = (src) => {
     const staticBase = typeof window === 'undefined' ? null : window.remotion_staticBase;
     if (staticBase && src.startsWith(staticBase + '/')) {

package/dist/components/Timeline/timeline-field-display-utils.js

@@ -236,14 +236,16 @@ const formatTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
             return ((_e = formatUvCoordinateTimelineFieldValueForDisplay({ fieldSchema, value })) !== null && _e !== void 0 ? _e : formatUnknownTimelineValueForDisplay(value));
         case 'text-content':
             return String(value);
+        case 'asset':
         case 'array':
         case 'boolean':
         case 'color':
         case 'enum':
+        case 'font-family':
         case 'hidden':
             return formatUnknownTimelineValueForDisplay(value);
         default:
-            return formatUnknownTimelineValueForDisplay(value);
+            throw new Error(`Unsupported field type: ${fieldSchema}`);
     }
 };
 exports.formatTimelineFieldValueForDisplay = formatTimelineFieldValueForDisplay;

package/dist/components/Timeline/timeline-field-row-layout.d.ts

@@ -1,4 +1,4 @@
 import type React from 'react';
-export declare const getTimelineFieldLabelRowStyle: (depth: number) => React.CSSProperties;
+export declare const getTimelineFieldLabelRowStyle: (depth: number, basePadding?: number | undefined) => React.CSSProperties;
 export declare const timelineFieldValueColumnStyle: React.CSSProperties;
 export declare const timelineStackedFieldContentStyle: React.CSSProperties;

package/dist/components/Timeline/timeline-field-row-layout.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.timelineStackedFieldContentStyle = exports.timelineFieldValueColumnStyle = exports.getTimelineFieldLabelRowStyle = void 0;
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_row_layout_1 = require("./timeline-row-layout");
-const getTimelineFieldLabelRowStyle = (depth) => {
+const getTimelineFieldLabelRowStyle = (depth, basePadding) => {
     return {
-        flex: `0 0 ${(0, timeline_row_layout_1.getTimelineFieldLabelFlexBasis)(depth)}`,
+        flex: `0 0 ${(0, timeline_row_layout_1.getTimelineFieldLabelFlexBasis)(depth, basePadding)}`,
         minWidth: 0,
         display: 'flex',
         flexDirection: 'row',

package/dist/components/Timeline/timeline-row-layout.d.ts

@@ -1,11 +1,12 @@
 export declare const TIMELINE_ROW_BASE_PADDING = 10;
+export declare const INSPECTOR_ROW_BASE_PADDING = 5;
 export declare const TIMELINE_EYE_COLUMN_WIDTH = 22;
 export declare const TIMELINE_ARROW_COLUMN_WIDTH = 16;
 export declare const TIMELINE_KEYFRAME_CONTROLS_WIDTH = 38;
 export declare const TIMELINE_FIELD_LABEL_EXTRA_WIDTH = 15;
 export declare const getTimelineRowIndentWidth: (depth: number) => number;
-export declare const getTimelineRowLeftChromeWidth: (depth: number) => number;
-export declare const getTimelineFieldLabelFlexBasis: (depth: number) => string;
+export declare const getTimelineRowLeftChromeWidth: (depth: number, basePadding?: number) => number;
+export declare const getTimelineFieldLabelFlexBasis: (depth: number, basePadding?: number) => string;
 export declare const getExpandedRowDepth: ({ nestedDepth, treeDepth, }: {
     nestedDepth: number;
     treeDepth: number;

package/dist/components/Timeline/timeline-row-layout.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getExpandedRowDepth = exports.getTimelineFieldLabelFlexBasis = exports.getTimelineRowLeftChromeWidth = exports.getTimelineRowIndentWidth = exports.TIMELINE_FIELD_LABEL_EXTRA_WIDTH = exports.TIMELINE_KEYFRAME_CONTROLS_WIDTH = exports.TIMELINE_ARROW_COLUMN_WIDTH = exports.TIMELINE_EYE_COLUMN_WIDTH = exports.TIMELINE_ROW_BASE_PADDING = void 0;
+exports.getExpandedRowDepth = exports.getTimelineFieldLabelFlexBasis = exports.getTimelineRowLeftChromeWidth = exports.getTimelineRowIndentWidth = exports.TIMELINE_FIELD_LABEL_EXTRA_WIDTH = exports.TIMELINE_KEYFRAME_CONTROLS_WIDTH = exports.TIMELINE_ARROW_COLUMN_WIDTH = exports.TIMELINE_EYE_COLUMN_WIDTH = exports.INSPECTOR_ROW_BASE_PADDING = exports.TIMELINE_ROW_BASE_PADDING = void 0;
 const timeline_indent_1 = require("./timeline-indent");
 exports.TIMELINE_ROW_BASE_PADDING = 10;
+exports.INSPECTOR_ROW_BASE_PADDING = 5;
 exports.TIMELINE_EYE_COLUMN_WIDTH = 22;
 exports.TIMELINE_ARROW_COLUMN_WIDTH = 16;
 exports.TIMELINE_KEYFRAME_CONTROLS_WIDTH = 38;
@@ -11,15 +12,15 @@ const getTimelineRowIndentWidth = (depth) => {
     return depth * timeline_indent_1.TIMELINE_INDENT;
 };
 exports.getTimelineRowIndentWidth = getTimelineRowIndentWidth;
-const getTimelineRowLeftChromeWidth = (depth) => {
-    return (exports.TIMELINE_ROW_BASE_PADDING +
+const getTimelineRowLeftChromeWidth = (depth, basePadding = exports.TIMELINE_ROW_BASE_PADDING) => {
+    return (basePadding +
         exports.TIMELINE_EYE_COLUMN_WIDTH +
         (0, exports.getTimelineRowIndentWidth)(depth) +
         exports.TIMELINE_ARROW_COLUMN_WIDTH);
 };
 exports.getTimelineRowLeftChromeWidth = getTimelineRowLeftChromeWidth;
-const getTimelineFieldLabelFlexBasis = (depth) => {
-    return `calc(50% - ${(0, exports.getTimelineRowLeftChromeWidth)(depth) - exports.TIMELINE_FIELD_LABEL_EXTRA_WIDTH}px)`;
+const getTimelineFieldLabelFlexBasis = (depth, basePadding = exports.TIMELINE_ROW_BASE_PADDING) => {
+    return `calc(50% - ${(0, exports.getTimelineRowLeftChromeWidth)(depth, basePadding) - exports.TIMELINE_FIELD_LABEL_EXTRA_WIDTH}px)`;
 };
 exports.getTimelineFieldLabelFlexBasis = getTimelineFieldLabelFlexBasis;
 const getExpandedRowDepth = ({ nestedDepth, treeDepth, }) => {

package/dist/components/Timeline/update-selected-easing.d.ts

@@ -1,3 +1,4 @@
+export { canEditEasingForInterpolationFunction } from '@remotion/studio-shared';
 import type { CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusEasing, DragOverrideValue, OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, InteractivitySchema, TSequence } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
 import type { TimelineEasingSelection, TimelineSelection } from './TimelineSelection';
@@ -23,7 +24,6 @@ export type SelectedEasingUpdate = {
     readonly currentEasing: TimelineEasingValue;
     readonly propStatus: CanUpdateSequencePropStatusKeyframed;
 };
-export declare const canEditEasingForInterpolationFunction: (interpolationFunction: string) => boolean;
 export declare const getSelectedEasingUpdate: ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }: {
     selection: {
         readonly type: "easing";

package/dist/components/Timeline/update-selected-easing.js

@@ -2,13 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateSelectedTimelineEasings = exports.getTimelineEasingValueForSelection = exports.getEasingSelections = exports.makeEasingDragOverride = exports.getSelectedEasingUpdates = exports.getSelectedEasingUpdate = exports.canEditEasingForInterpolationFunction = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const studio_shared_2 = require("@remotion/studio-shared");
+Object.defineProperty(exports, "canEditEasingForInterpolationFunction", { enumerable: true, get: function () { return studio_shared_2.canEditEasingForInterpolationFunction; } });
 const remotion_1 = require("remotion");
 const call_update_keyframe_settings_1 = require("./call-update-keyframe-settings");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
 const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
-const canEditEasingForInterpolationFunction = (interpolationFunction) => interpolationFunction === 'interpolate' ||
-    interpolationFunction === 'interpolateColors';
-exports.canEditEasingForInterpolationFunction = canEditEasingForInterpolationFunction;
 const isEasingSelection = (selection) => selection.type === 'easing';
 const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     var _a;
@@ -34,7 +33,7 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
         }
         const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[field.fieldKey];
         if ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) !== 'keyframed' ||
-            !(0, exports.canEditEasingForInterpolationFunction)(sequencePropStatus.interpolationFunction)) {
+            !(0, studio_shared_1.canEditEasingForInterpolationFunction)(sequencePropStatus.interpolationFunction)) {
             return null;
         }
         return {
@@ -61,7 +60,7 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
         ? effectStatus.props[field.fieldKey]
         : null;
     if ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) !== 'keyframed' ||
-        !(0, exports.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction)) {
+        !(0, studio_shared_1.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction)) {
         return null;
     }
     return {

package/dist/components/Timeline/use-expanded-track-keyframe-rows.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useExpandedTrackKeyframeRows = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -9,8 +10,6 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const TimelineSelection_1 = require("./TimelineSelection");
-const canEditEasingForInterpolationFunction = (interpolationFunction) => interpolationFunction === 'interpolate' ||
-    interpolationFunction === 'interpolateColors';
 const getNodeCanEditEasing = ({ node, nodePath, propStatuses, }) => {
     var _a;
     if (node.kind !== 'field' || node.field === null) {
@@ -19,7 +18,7 @@ const getNodeCanEditEasing = ({ node, nodePath, propStatuses, }) => {
     if (node.field.kind === 'sequence-field') {
         const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[node.field.key];
         return ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) === 'keyframed' &&
-            canEditEasingForInterpolationFunction(sequencePropStatus.interpolationFunction));
+            (0, studio_shared_1.canEditEasingForInterpolationFunction)(sequencePropStatus.interpolationFunction));
     }
     const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
         propStatuses,
@@ -30,7 +29,7 @@ const getNodeCanEditEasing = ({ node, nodePath, propStatuses, }) => {
         ? effectStatus.props[node.field.key]
         : null;
     return ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) === 'keyframed' &&
-        canEditEasingForInterpolationFunction(effectPropStatus.interpolationFunction));
+        (0, studio_shared_1.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction));
 };
 const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayOffset, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
@@ -45,6 +44,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         getEffectDragOverrides,
         propStatuses,
         includeTextContent: false,
+        includeSourceControls: false,
     }), [
         propStatuses,
         getDragOverrides,

package/dist/components/Timeline/use-timeline-expanded-tree.d.ts

@@ -1,9 +1,10 @@
 import { type TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const useTimelineExpandedTree: ({ sequence, nodePathInfo, includeTextContent, }: {
+export declare const useTimelineExpandedTree: ({ sequence, nodePathInfo, includeTextContent, includeSourceControls, }: {
     readonly sequence: TSequence;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly includeTextContent: boolean;
+    readonly includeSourceControls: boolean;
 }) => {
     filteredTree: import("../../helpers/timeline-layout").TimelineTreeNode[];
     getIsExpanded: import("../ExpandedTracksProvider").GetIsExpanded;

package/dist/components/Timeline/use-timeline-expanded-tree.js

@@ -8,7 +8,7 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const TimelineSelection_1 = require("./TimelineSelection");
-const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, }) => {
+const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, includeSourceControls, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
@@ -21,6 +21,7 @@ const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, }
         getEffectDragOverrides,
         propStatuses: visualModePropStatuses,
         includeTextContent,
+        includeSourceControls,
     }), [
         sequence,
         nodePathInfo,
@@ -28,6 +29,7 @@ const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, }
         getEffectDragOverrides,
         visualModePropStatuses,
         includeTextContent,
+        includeSourceControls,
     ]);
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
     const filteredTree = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({

package/dist/components/Timeline/use-timeline-height.js

@@ -38,6 +38,7 @@ const useTimelineHeight = ({ shown, hasBeenCut, }) => {
                     getEffectDragOverrides,
                     propStatuses,
                     includeTextContent: false,
+                    includeSourceControls: false,
                 });
                 const filteredTree = (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
                     nodes: tree,

package/dist/components/import-assets.d.ts

@@ -33,6 +33,11 @@ export declare const getElementPositionForDrop: ({ dimensions, dropPosition, }:
     dimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
 }) => InsertableCompositionElementPosition | null;
+export declare const getCompositionPositionForDrop: ({ compositionDimensions, destinationDimensions, dropPosition, }: {
+    compositionDimensions: Dimensions;
+    destinationDimensions: Dimensions | null;
+    dropPosition: InsertElementDropPosition | null;
+}) => InsertableCompositionElementPosition | null;
 export declare const getComponentDimensions: (component: {
     componentName: string;
     dimensions?: import("@remotion/studio-shared").ComponentDimensions | undefined;
@@ -40,7 +45,9 @@ export declare const getComponentDimensions: (component: {
     importPath: string;
     props: ComponentProp[];
 }) => Dimensions | null;
-export declare const pickFilesToImport: () => Promise<File[]>;
+export declare const pickFilesToImport: ({ multiple, }?: {
+    readonly multiple?: boolean | undefined;
+}) => Promise<File[]>;
 export declare const importAssets: ({ compositionFile, compositionId, dropPosition, files, }: {
     compositionFile: string;
     compositionId: string;
@@ -76,10 +83,11 @@ export declare const insertComponent: ({ component, compositionFile, composition
     compositionId: string;
     dropPosition: InsertElementDropPosition | null;
 }) => Promise<void>;
-export declare const insertComposition: ({ composition, compositionFile, compositionId, dropPosition, }: {
+export declare const insertComposition: ({ composition, compositionFile, compositionId, destinationDimensions, dropPosition, }: {
     composition: CompositionDragData;
     compositionFile: string;
     compositionId: string;
+    destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
 }) => Promise<void>;
 export declare const insertElement: ({ compositionFile, compositionId, dropPosition, element, }: {