@remotion/studio 4.0.492 → 4.0.494

package/dist/components/InspectorPanel/common.d.ts

@@ -3,7 +3,8 @@ import type { RenderModalWarning } from '../RenderModal/DataEditor';
 export declare const InspectorSectionHeader: React.FC<{
     readonly children: React.ReactNode;
 }>;
-export declare const InspectorBackHeaderWithDivider: React.FC<{
+export declare const InspectorSectionDivider: React.FC;
+export declare const InspectorBackHeader: React.FC<{
     readonly children: React.ReactNode;
     readonly disabled: boolean;
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;

package/dist/components/InspectorPanel/common.js

@@ -3,15 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InspectorDefaultPropsWarnings = exports.InspectorInlineAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackHeaderWithDivider = exports.InspectorSectionHeader = void 0;
+exports.InspectorDefaultPropsWarnings = exports.InspectorInlineAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackHeader = exports.InspectorSectionDivider = exports.InspectorSectionHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const colors_1 = require("../../helpers/colors");
 const InlineAction_1 = require("../InlineAction");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const styles_1 = require("./styles");
 const InspectorSectionHeader = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.sectionHeader, children: children });
 exports.InspectorSectionHeader = InspectorSectionHeader;
+const InspectorSectionDivider = () => (jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider }));
+exports.InspectorSectionDivider = InspectorSectionDivider;
 const backIcon = {
     alignItems: 'center',
     display: 'flex',
@@ -22,12 +25,10 @@ const backIcon = {
 const BackChevron = ({ color }) => {
     return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 8 12", style: backIcon, children: jsx_runtime_1.jsx("path", { d: "M6 1L2 6L6 11", fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) }));
 };
-const InspectorBackHeaderWithDivider = ({ children, disabled, onClick, title }) => {
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(exports.InspectorSectionHeader, { children: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderRow, children: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderStart, children: [jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: disabled, onClick: onClick, title: title, renderAction: (color) => jsx_runtime_1.jsx(BackChevron, { color: color }) }), children] }) }) }), jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider })
-        ] }));
+const InspectorBackHeader = ({ children, disabled, onClick, title }) => {
+    return (jsx_runtime_1.jsx(exports.InspectorSectionHeader, { children: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderRow, children: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderStart, children: [jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: disabled, onClick: onClick, title: title, renderAction: (color) => jsx_runtime_1.jsx(BackChevron, { color: color }) }), children] }) }) }));
 };
-exports.InspectorBackHeaderWithDivider = InspectorBackHeaderWithDivider;
+exports.InspectorBackHeader = InspectorBackHeader;
 const InspectorMessage = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.centeredMessage, children: children });
 exports.InspectorMessage = InspectorMessage;
 const InspectorDetailRow = ({ label, children }) => (jsx_runtime_1.jsxs("div", { style: styles_1.detailRow, children: [
@@ -39,6 +40,7 @@ const inlineLabelButton = {
     appearance: 'none',
     backgroundColor: colors_1.TRANSPARENT,
     border: 'none',
+    boxSizing: 'border-box',
     color: colors_1.LIGHT_TEXT,
     cursor: 'default',
     display: 'flex',
@@ -47,7 +49,9 @@ const inlineLabelButton = {
     gap: 8,
     lineHeight: '18px',
     margin: 0,
-    padding: '5px 0',
+    padding: `5px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+    textAlign: 'left',
+    width: '100%',
 };
 const inlineLabelButtonDisabled = {
     ...inlineLabelButton,

package/dist/components/InspectorPanel/optimistic-composition-metadata.d.ts

@@ -0,0 +1,22 @@
+export type CompositionMetadataField = 'durationInFrames' | 'fps' | 'height' | 'width';
+export type PendingCompositionMetadataValue = {
+    readonly baseline: object;
+    readonly status: 'saving' | 'awaiting-hmr';
+    readonly value: number;
+};
+export type PendingCompositionMetadata = Partial<Record<CompositionMetadataField, PendingCompositionMetadataValue>>;
+export declare const failPendingCompositionMetadataValue: ({ field, pending, value, }: {
+    readonly field: CompositionMetadataField;
+    readonly pending: Partial<Record<CompositionMetadataField, PendingCompositionMetadataValue>>;
+    readonly value: PendingCompositionMetadataValue;
+}) => Partial<Record<CompositionMetadataField, PendingCompositionMetadataValue>>;
+export declare const acceptPendingCompositionMetadataValue: ({ currentConfig, field, pending, value, }: {
+    readonly currentConfig: object;
+    readonly field: CompositionMetadataField;
+    readonly pending: Partial<Record<CompositionMetadataField, PendingCompositionMetadataValue>>;
+    readonly value: PendingCompositionMetadataValue;
+}) => Partial<Record<CompositionMetadataField, PendingCompositionMetadataValue>>;
+export declare const reconcilePendingCompositionMetadata: ({ currentConfig, pending, }: {
+    readonly currentConfig: object;
+    readonly pending: Partial<Record<CompositionMetadataField, PendingCompositionMetadataValue>>;
+}) => Partial<Record<CompositionMetadataField, PendingCompositionMetadataValue>>;

package/dist/components/InspectorPanel/optimistic-composition-metadata.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reconcilePendingCompositionMetadata = exports.acceptPendingCompositionMetadataValue = exports.failPendingCompositionMetadataValue = void 0;
+const removePendingValue = ({ field, pending, }) => {
+    const { [field]: _removed, ...remaining } = pending;
+    return remaining;
+};
+const failPendingCompositionMetadataValue = ({ field, pending, value, }) => {
+    if (pending[field] !== value) {
+        return pending;
+    }
+    return removePendingValue({ field, pending });
+};
+exports.failPendingCompositionMetadataValue = failPendingCompositionMetadataValue;
+const acceptPendingCompositionMetadataValue = ({ currentConfig, field, pending, value, }) => {
+    if (pending[field] !== value) {
+        return pending;
+    }
+    if (currentConfig !== value.baseline) {
+        return removePendingValue({ field, pending });
+    }
+    return {
+        ...pending,
+        [field]: {
+            ...value,
+            status: 'awaiting-hmr',
+        },
+    };
+};
+exports.acceptPendingCompositionMetadataValue = acceptPendingCompositionMetadataValue;
+const reconcilePendingCompositionMetadata = ({ currentConfig, pending, }) => {
+    let reconciled = pending;
+    for (const field of Object.keys(pending)) {
+        const value = pending[field];
+        if ((value === null || value === void 0 ? void 0 : value.status) === 'awaiting-hmr' && value.baseline !== currentConfig) {
+            reconciled = removePendingValue({ field, pending: reconciled });
+        }
+    }
+    return reconciled;
+};
+exports.reconcilePendingCompositionMetadata = reconcilePendingCompositionMetadata;

package/dist/components/InspectorPanel/styles.d.ts

@@ -20,6 +20,8 @@ export declare const resolveLinkStyle: React.CSSProperties;
 export declare const selectedContainer: React.CSSProperties;
 export declare const centeredMessage: React.CSSProperties;
 export declare const detailsContainer: React.CSSProperties;
+export declare const detailsWithInlineAction: React.CSSProperties;
+export declare const detailsBeforeInlineAction: React.CSSProperties;
 export declare const guideDetailsContainer: React.CSSProperties;
 export declare const detailRow: React.CSSProperties;
 export declare const detailLabel: React.CSSProperties;

package/dist/components/InspectorPanel/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.keyframeEditorValue = exports.keyframeEditorLabel = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.sequenceHeaderTitle = exports.sequenceHeader = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorSectionDivider = exports.compositionSection = exports.visualControlsSection = exports.defaultPropsSection = exports.scrollableContainer = exports.container = void 0;
+exports.keyframeEditorValue = exports.keyframeEditorLabel = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsBeforeInlineAction = exports.detailsWithInlineAction = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.sequenceHeaderTitle = exports.sequenceHeader = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorSectionDivider = exports.compositionSection = exports.visualControlsSection = exports.defaultPropsSection = exports.scrollableContainer = exports.container = void 0;
 const colors_1 = require("../../helpers/colors");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 exports.container = {
@@ -155,6 +155,12 @@ exports.centeredMessage = {
 exports.detailsContainer = {
     padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
 };
+exports.detailsWithInlineAction = {
+    paddingBottom: InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING,
+};
+exports.detailsBeforeInlineAction = {
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+};
 exports.guideDetailsContainer = {
     padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
 };
@@ -163,7 +169,6 @@ exports.detailRow = {
     display: 'flex',
     gap: 12,
     justifyContent: 'space-between',
-    padding: '10px 0',
 };
 exports.detailLabel = {
     color: colors_1.LIGHT_TEXT,

package/dist/components/InspectorSequenceSection.js

@@ -269,12 +269,9 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
         return (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: 0, rowDepthBase: 0, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "inspector" }) }, JSON.stringify(node.nodePathInfo)));
     };
     if (controlRows.length === 0 && !showEffectsSection) {
-        return (jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderDivider }), jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" })
-            ] }));
+        return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" }) }));
     }
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderDivider }), controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroups.map((group, i) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i === 0 ? null : jsx_runtime_1.jsx("div", { style: controlsEffectsDivider }), renderSectionHeader(group.label), group.id === 'source' && localAsset ? (jsx_runtime_1.jsx(CurrentAsset_1.AssetInfo, { assetName: localAsset.assetPath, contentSized: true, onAssetClick: jumpToAsset, readOnlyStudio: true })) : null, group.id === 'source' && remoteAsset && remoteSourceParts ? (jsx_runtime_1.jsxs("div", { style: remoteSourceLabel, title: remoteAsset.href, children: [
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroups.map((group, i) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i === 0 ? null : jsx_runtime_1.jsx("div", { style: controlsEffectsDivider }), renderSectionHeader(group.label), group.id === 'source' && localAsset ? (jsx_runtime_1.jsx(CurrentAsset_1.AssetInfo, { assetName: localAsset.assetPath, contentSized: true, onAssetClick: jumpToAsset, readOnlyStudio: true })) : null, group.id === 'source' && remoteAsset && remoteSourceParts ? (jsx_runtime_1.jsxs("div", { style: remoteSourceLabel, title: remoteAsset.href, children: [
                                 jsx_runtime_1.jsx("span", { style: remoteSourceLeading, children: remoteSourceParts.leading }), jsx_runtime_1.jsx("span", { style: remoteSourceTrailing, children: remoteSourceParts.trailing })
                             ] })) : null, group.id === 'transforms' ? renderTransformControls() : null, group.id === 'source' ? null : group.rows.map(renderRow)] }, group.id))) })) : null, showEffectsSection ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showControlsEffectsDivider ? (jsx_runtime_1.jsx("div", { style: controlsEffectsDivider })) : null, renderEffectsHeader(), effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null] })) : null] }));
 };

package/dist/components/SelectedOutlineElement.js

@@ -41,6 +41,8 @@ const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const format_file_location_1 = require("../helpers/format-file-location");
+const get_connected_compositions_1 = require("../helpers/get-connected-compositions");
+const get_sequence_double_click_action_1 = require("../helpers/get-sequence-double-click-action");
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const editor_snapping_1 = require("../state/editor-snapping");
 const modals_1 = require("../state/modals");
@@ -49,6 +51,7 @@ const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const ContextMenu_1 = require("./ContextMenu");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
+const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const selected_outline_drag_1 = require("./selected-outline-drag");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
@@ -981,6 +984,8 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
     const updateResolvedStackTrace = (0, react_1.useContext)(remotion_1.Internals.SequenceStackTracesUpdateContext);
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const resolveOriginalLocation = react_1.default.useCallback(async (resolveTarget) => {
         const stack = resolveTarget.sequence.getStack();
@@ -998,14 +1003,23 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
         return originalLocation;
     }, [updateResolvedStackTrace]);
     const onDoubleClickTarget = react_1.default.useCallback((doubleClickTarget, button) => {
-        const action = (0, selected_outline_measurement_1.getOutlineDoubleClickAction)({
+        const connectedCompositions = (0, get_connected_compositions_1.getConnectedCompositions)({
+            compositions,
+            singleChildComponent: doubleClickTarget.sequence.singleChildComponent,
+        });
+        const action = (0, get_sequence_double_click_action_1.getSequenceDoubleClickAction)({
             button,
             canOpenInEditor: previewServerState.type === 'connected' &&
                 Boolean(window.remotion_editorName),
+            numberOfConnectedCompositions: connectedCompositions.length,
         });
         if (action === null) {
             return false;
         }
+        if (action === 'open-connected-composition') {
+            selectComposition(connectedCompositions[0], true);
+            return true;
+        }
         const openTargetInEditor = async () => {
             const originalLocation = await resolveOriginalLocation(doubleClickTarget);
             if (originalLocation === null) {
@@ -1017,7 +1031,12 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         });
         return true;
-    }, [previewServerState.type, resolveOriginalLocation]);
+    }, [
+        compositions,
+        previewServerState.type,
+        resolveOriginalLocation,
+        selectComposition,
+    ]);
     const onContextMenuOpen = react_1.default.useCallback(async () => {
         if (target === undefined || previewServerState.type !== 'connected') {
             return false;

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { type SelectedOutline } from './selected-outline-geometry';
 import { type SelectedOutlineTarget } from './selected-outline-types';
 export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineActiveSchema, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineTransformOriginSnapThresholdPx, selectedOutlineUvSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineTransformOriginUv, snapSelectedOutlineUv, } from './selected-outline-drag';
-export { getOutlineDoubleClickAction, getOutlineSelectionInteraction, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
+export { getOutlineSelectionInteraction, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
 export { selectedOutlineDragThresholdPx } from './selected-outline-types';
 export type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineScaleDragState, } from './selected-outline-types';
 type OutlineSequenceParent = {

package/dist/components/SelectedOutlineOverlay.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineOverlay = exports.orderOutlinesForRendering = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getOutlineDoubleClickAction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
+exports.SelectedOutlineOverlay = exports.orderOutlinesForRendering = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
@@ -82,7 +82,6 @@ Object.defineProperty(exports, "snapSelectedOutlineRotationDeltaDegrees", { enum
 Object.defineProperty(exports, "snapSelectedOutlineTransformOriginUv", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineTransformOriginUv; } });
 Object.defineProperty(exports, "snapSelectedOutlineUv", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineUv; } });
 const selected_outline_measurement_2 = require("./selected-outline-measurement");
-Object.defineProperty(exports, "getOutlineDoubleClickAction", { enumerable: true, get: function () { return selected_outline_measurement_2.getOutlineDoubleClickAction; } });
 Object.defineProperty(exports, "getOutlineSelectionInteraction", { enumerable: true, get: function () { return selected_outline_measurement_2.getOutlineSelectionInteraction; } });
 Object.defineProperty(exports, "getSelectedEffectFieldsBySequenceKey", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedEffectFieldsBySequenceKey; } });
 Object.defineProperty(exports, "getSelectedOutlineRotationCornerInfo", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedOutlineRotationCornerInfo; } });
@@ -363,7 +362,7 @@ exports.orderOutlinesForRendering = orderOutlinesForRendering;
 const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, translationX, translationY, }) => {
     const { selectedItems, selectItem } = (0, TimelineSelection_1.useTimelineSelection)();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
@@ -411,6 +410,7 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         return (0, selected_outline_measurement_1.getSequencesWithSelectableOutlines)({
             sequences,
             overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            compositions,
         }).map(({ key, keyframeDisplayOffset, nodePathInfo, sequence }) => {
             var _a, _b, _c, _d, _e, _f;
             if (sequence.refForOutline === null) {
@@ -629,6 +629,7 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         previewServerState,
         selectedItems,
         sequences,
+        compositions,
         timelinePosition,
     ]);
     (0, react_1.useEffect)(() => {

package/dist/components/Timeline/Timeline.js

@@ -164,6 +164,7 @@ const TimelineContextMenuArea = ({ children }) => {
                 files,
                 compositionFile,
                 compositionId: currentCompositionId,
+                destinationDimensions: null,
                 dropPosition: null,
             });
         }
@@ -204,6 +205,7 @@ const TimelineContextMenuArea = ({ children }) => {
 const TimelineInner = () => {
     var _a;
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
@@ -218,8 +220,14 @@ const TimelineInner = () => {
         return (0, calculate_timeline_1.calculateTimeline)({
             sequences,
             overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            compositions,
         });
-    }, [sequences, videoConfigIsNull, overrideIdToNodePathMappings]);
+    }, [
+        sequences,
+        videoConfigIsNull,
+        overrideIdToNodePathMappings,
+        compositions,
+    ]);
     const durationInFrames = (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 0;
     const filtered = (0, react_1.useMemo)(() => {
         return timeline.filter((t) => (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(t, durationInFrames));

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -9,9 +9,13 @@ const use_keybinding_1 = require("../../helpers/use-keybinding");
 const call_api_1 = require("../call-api");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const call_add_keyframe_1 = require("./call-add-keyframe");
+const call_delete_keyframe_1 = require("./call-delete-keyframe");
+const call_update_keyframe_settings_1 = require("./call-update-keyframe-settings");
 const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 const effects_clipboard_1 = require("./effects-clipboard");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+const keyframe_clipboard_1 = require("./keyframe-clipboard");
 const save_effect_prop_1 = require("./save-effect-prop");
 const TimelineSelection_1 = require("./TimelineSelection");
 const update_selected_easing_1 = require("./update-selected-easing");
@@ -352,6 +356,9 @@ const getPasteEffectPropTarget = ({ selectedItems, payload, propStatuses, sequen
 exports.getPasteEffectPropTarget = getPasteEffectPropTarget;
 const TimelineClipboardKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
+    timelinePositionRef.current = timelinePosition;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
@@ -376,6 +383,30 @@ const TimelineClipboardKeybindings = () => {
                 if (selectedItems.length === 0) {
                     return;
                 }
+                const keyframeSelections = selectedItems.filter((selection) => selection.type === 'keyframe');
+                if (keyframeSelections.length > 0) {
+                    e.preventDefault();
+                    if (selectedItems.some((selection) => selection.type !== 'keyframe' && selection.type !== 'easing')) {
+                        (0, NotificationCenter_1.showNotification)('Select only keyframes and easings to copy', 3000);
+                        return;
+                    }
+                    const payload = (0, keyframe_clipboard_1.getKeyframeClipboardDataFromSelections)({
+                        selections: selectedItems,
+                        sequences,
+                        overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                        propStatuses,
+                    });
+                    if (payload === null) {
+                        (0, NotificationCenter_1.showNotification)('Select a continuous keyframe range from one property to copy', 3000);
+                        return;
+                    }
+                    navigator.clipboard
+                        .writeText(makeClipboardText(payload))
+                        .catch((err) => {
+                        (0, NotificationCenter_1.showNotification)(`Could not copy keyframe: ${err.message}`, 2000);
+                    });
+                    return;
+                }
                 const easingSelections = (0, update_selected_easing_1.getEasingSelections)(selectedItems);
                 if (easingSelections.length > 0) {
                     e.preventDefault();
@@ -501,6 +532,8 @@ const TimelineClipboardKeybindings = () => {
                         setPropStatuses,
                         clientId,
                         confirm,
+                        propStatuses,
+                        timelinePosition: timelinePositionRef.current,
                     });
                     return deletePromise === null || deletePromise === void 0 ? void 0 : deletePromise.then((deleted) => {
                         if (!deleted) {
@@ -543,6 +576,107 @@ const TimelineClipboardKeybindings = () => {
                 .then(() => {
                 const propStatuses = propStatusesRef.current;
                 const sequences = sequencesRef.current;
+                const keyframeResult = (0, studio_shared_1.parseKeyframeClipboardDataResult)(text);
+                if (keyframeResult.status !== 'invalid') {
+                    if (keyframeResult.status === 'unsupported-version') {
+                        (0, NotificationCenter_1.showNotification)('Cannot paste keyframe copied from a different Remotion Studio version', 4000);
+                        return;
+                    }
+                    const keyframeTarget = (0, keyframe_clipboard_1.getPasteKeyframeTarget)({
+                        selectedItems,
+                        payload: keyframeResult.data,
+                        timelinePosition: timelinePositionRef.current,
+                        sequences,
+                        overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                        propStatuses,
+                    });
+                    if (keyframeTarget.type !== 'valid') {
+                        switch (keyframeTarget.type) {
+                            case 'none':
+                                (0, NotificationCenter_1.showNotification)('Select a property or keyframe to paste onto', 3000);
+                                return;
+                            case 'multiple':
+                                (0, NotificationCenter_1.showNotification)('Select one property or keyframe to paste onto', 3000);
+                                return;
+                            case 'uncopyable':
+                                (0, NotificationCenter_1.showNotification)('Cannot paste onto a property that cannot be updated', 3000);
+                                return;
+                            case 'incompatible':
+                                (0, NotificationCenter_1.showNotification)('The copied keyframe is not compatible with this property', 3000);
+                                return;
+                            default:
+                                throw new Error(`Unexpected paste target: ${keyframeTarget}`);
+                        }
+                    }
+                    const changes = keyframeTarget.keyframes.map((keyframe) => ({
+                        fileName: keyframeTarget.fileName,
+                        nodePath: keyframeTarget.nodePath,
+                        fieldKey: keyframeTarget.fieldKey,
+                        sourceFrame: keyframe.sourceFrame,
+                        value: keyframe.value,
+                        schema: keyframeTarget.schema,
+                    }));
+                    const { effectIndex } = keyframeTarget;
+                    const deletions = keyframeTarget.keyframesToDelete.map((sourceFrame) => ({
+                        fileName: keyframeTarget.fileName,
+                        nodePath: keyframeTarget.nodePath,
+                        fieldKey: keyframeTarget.fieldKey,
+                        sourceFrame,
+                        schema: keyframeTarget.schema,
+                        valueWhenLastKeyframeDeleted: null,
+                    }));
+                    return (0, call_delete_keyframe_1.callDeleteKeyframes)({
+                        sequenceKeyframes: effectIndex === null ? deletions : [],
+                        effectKeyframes: effectIndex === null
+                            ? []
+                            : deletions.map((deletion) => ({
+                                ...deletion,
+                                effectIndex,
+                            })),
+                        setPropStatuses,
+                        clientId,
+                    })
+                        .then(() => (0, call_add_keyframe_1.callAddKeyframes)({
+                        sequenceKeyframes: effectIndex === null ? changes : [],
+                        effectKeyframes: effectIndex === null
+                            ? []
+                            : changes.map((change) => ({ ...change, effectIndex })),
+                        setPropStatuses,
+                        clientId,
+                    }))
+                        .then(async () => {
+                        for (const [index, easing] of keyframeTarget.easing.entries()) {
+                            const settings = {
+                                type: 'easing',
+                                segmentIndex: keyframeTarget.firstEasingSegmentIndex + index,
+                                easing,
+                            };
+                            if (effectIndex === null) {
+                                await (0, call_update_keyframe_settings_1.callUpdateSequenceKeyframeSettings)({
+                                    fileName: keyframeTarget.fileName,
+                                    nodePath: keyframeTarget.nodePath,
+                                    fieldKey: keyframeTarget.fieldKey,
+                                    settings,
+                                    schema: keyframeTarget.schema,
+                                    setPropStatuses,
+                                    clientId,
+                                });
+                            }
+                            else {
+                                await (0, call_update_keyframe_settings_1.callUpdateEffectKeyframeSettings)({
+                                    fileName: keyframeTarget.fileName,
+                                    nodePath: keyframeTarget.nodePath,
+                                    effectIndex,
+                                    fieldKey: keyframeTarget.fieldKey,
+                                    settings,
+                                    schema: keyframeTarget.schema,
+                                    setPropStatuses,
+                                    clientId,
+                                });
+                            }
+                        }
+                    });
+                }
                 const easingResult = (0, studio_shared_1.parseEasingClipboardDataResult)(text);
                 if (easingResult.status !== 'invalid') {
                     e.preventDefault();
@@ -685,7 +819,7 @@ const TimelineClipboardKeybindings = () => {
                 });
             })
                 .catch((err) => {
-                (0, NotificationCenter_1.showNotification)(`Could not paste effects: ${err.message}`, 3000);
+                (0, NotificationCenter_1.showNotification)(`Could not paste: ${err.message}`, 3000);
             });
         };
         // Reading ClipboardEvent data avoids the permission prompt caused by
@@ -708,6 +842,7 @@ const TimelineClipboardKeybindings = () => {
         previewServerState,
         sequencesRef,
         setPropStatuses,
+        timelinePositionRef,
     ]);
     return null;
 };

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -57,6 +57,8 @@ const TimelineDeleteKeybindings = () => {
                 setPropStatuses,
                 clientId,
                 confirm,
+                propStatuses,
+                timelinePosition: timelinePositionRef.current,
             });
             if (deletePromise !== null) {
                 deletePromise

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -213,6 +213,7 @@ const getDeleteChange = (target) => {
         fieldKey: target.fieldKey,
         sourceFrame: target.sourceFrame,
         schema: target.schema,
+        valueWhenLastKeyframeDeleted: null,
     };
     if (target.effectIndex === null) {
         return change;

package/dist/components/Timeline/TimelineList.js

@@ -12,7 +12,8 @@ const container = {
 const TimelineList = ({ timeline }) => {
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
             jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track, trackIndex) => {
-                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { trackIndex: trackIndex, nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset }, track.sequence.id) }, track.sequence.id));
+                var _a;
+                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { trackIndex: trackIndex, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset }, track.sequence.id) }, track.sequence.id));
             })] }));
 };
 exports.TimelineList = TimelineList;

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -18,9 +18,7 @@ const inlineWrapper = {
     fontSize: 12,
 };
 const isTimelinePrimitiveFieldInfo = (field) => {
-    return (field.typeName !== 'array' &&
-        field.typeName !== 'hidden' &&
-        field.fieldSchema.type !== 'array');
+    return field.typeName !== 'array' && field.fieldSchema.type !== 'array';
 };
 exports.isTimelinePrimitiveFieldInfo = isTimelinePrimitiveFieldInfo;
 const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, effectiveValue, scaleLockNodePath, }) => {

package/dist/components/Timeline/TimelineSelection.js

@@ -221,10 +221,26 @@ const isTimelineSelectionCompatibleWithMarqueeKind = (item, kind) => {
     return item.type === 'keyframe' || item.type === 'easing';
 };
 const getTimelineMarqueeSelection = ({ candidates, lockedSelectionKind, marqueeRect, }) => {
-    const intersectingCandidates = candidates.filter((candidate) => {
+    const geometricallyIntersectingCandidates = candidates.filter((candidate) => {
         return (getTimelineMarqueeSelectionKind(candidate.item) !== null &&
             (0, exports.timelineMarqueeRectsIntersect)(candidate.rect, marqueeRect));
     });
+    const intersectingKeyframes = new Set(geometricallyIntersectingCandidates.flatMap((candidate) => {
+        if (candidate.item.type !== 'keyframe') {
+            return [];
+        }
+        return [
+            `${(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(candidate.item.nodePathInfo)}.${candidate.item.frame}`,
+        ];
+    }));
+    const intersectingCandidates = geometricallyIntersectingCandidates.filter((candidate) => {
+        if (candidate.item.type !== 'easing') {
+            return true;
+        }
+        const fieldKey = (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(candidate.item.nodePathInfo);
+        return (intersectingKeyframes.has(`${fieldKey}.${candidate.item.fromFrame}`) &&
+            intersectingKeyframes.has(`${fieldKey}.${candidate.item.toFrame}`));
+    });
     const getFirstIntersectingSelectionKind = () => intersectingCandidates.length === 0
         ? null
         : getTimelineMarqueeSelectionKind(intersectingCandidates[0].item);
@@ -363,8 +379,6 @@ const getSelectableTimelineSequenceSelections = (tracks) => {
     });
 };
 exports.getSelectableTimelineSequenceSelections = getSelectableTimelineSequenceSelections;
-const canEditEasingForInterpolationFunction = (interpolationFunction) => interpolationFunction === 'interpolate' ||
-    interpolationFunction === 'interpolateColors';
 const getTimelineTreeNodeCanEditEasing = ({ node, nodePathInfo, propStatuses, }) => {
     var _a;
     if (node.kind !== 'field' || node.field === null) {
@@ -373,7 +387,7 @@ const getTimelineTreeNodeCanEditEasing = ({ node, nodePathInfo, propStatuses, })
     if (node.field.kind === 'sequence-field') {
         const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePathInfo.sequenceSubscriptionKey)) === 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,
@@ -384,7 +398,7 @@ const getTimelineTreeNodeCanEditEasing = ({ node, nodePathInfo, 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 getSelectableTimelineItems = ({ getDragOverrides, getEffectDragOverrides, getIsExpanded, propStatuses, selectedItems, timeline, timelinePosition, }) => {
     const selectedRowKeys = (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems);