@remotion/studio 4.0.507 → 4.0.509

package/dist/components/Timeline/TimelineTranslateField.js

@@ -7,11 +7,16 @@ const InputDragger_1 = require("../NewComposition/InputDragger");
 const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const timeline_translate_utils_1 = require("./timeline-translate-utils");
+const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const leftDraggerStyle = {
+    paddingBottom: 2,
     paddingLeft: 0,
+    paddingTop: 2,
 };
 const rightDraggerStyle = {
+    paddingBottom: 2,
     paddingRight: 0,
+    paddingTop: 2,
 };
 const containerStyle = {
     display: 'flex',
@@ -19,9 +24,13 @@ const containerStyle = {
 };
 const translateDragSensitivity = 3;
 const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
+    var _a;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
-    const [codeX, codeY] = (0, react_1.useMemo)(() => (0, timeline_translate_utils_1.parseTranslate)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px')), [effectiveValue]);
+    const [dragZ, setDragZ] = (0, react_1.useState)(null);
+    const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
+    const [codeX, codeY, codeZ] = (0, react_1.useMemo)(() => (0, timeline_translate_utils_1.parseTranslate)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px')), [effectiveValue]);
+    const show3D = transform3DMode || (codeZ !== null && codeZ !== 0);
     const configuredStep = field.fieldSchema.type === 'translate' ? field.fieldSchema.step : undefined;
     const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
     const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
@@ -34,15 +43,18 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
             value: v,
         });
     }, [field.fieldSchema]);
+    const serialize = (0, react_1.useCallback)((x, y, z = dragZ !== null && dragZ !== void 0 ? dragZ : codeZ) => {
+        return (0, timeline_translate_utils_1.serializeTranslate)([x, y, z], decimalPlaces);
+    }, [codeZ, decimalPlaces, dragZ]);
     // --- X callbacks ---
     const onXChange = (0, react_1.useCallback)((newVal) => {
         setDragX(newVal);
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-        onDragValueChange((0, timeline_translate_utils_1.serializeTranslate)(newVal, currentY, decimalPlaces));
-    }, [onDragValueChange, dragY, codeY, decimalPlaces]);
+        onDragValueChange(serialize(newVal, currentY));
+    }, [codeY, dragY, onDragValueChange, serialize]);
     const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-        const newStr = (0, timeline_translate_utils_1.serializeTranslate)(newVal, currentY, decimalPlaces);
+        const newStr = serialize(newVal, currentY);
         if (newStr !== propStatus.codeValue) {
             onSave(newStr).finally(() => {
                 setDragX(null);
@@ -53,12 +65,12 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
             setDragX(null);
             onDragEnd();
         }
-    }, [dragY, codeY, decimalPlaces, propStatus, onSave, onDragEnd]);
+    }, [codeY, dragY, onDragEnd, onSave, propStatus, serialize]);
     const onXTextChange = (0, react_1.useCallback)((newVal) => {
         const parsed = Number(newVal);
         if (!Number.isNaN(parsed)) {
             const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-            const newStr = (0, timeline_translate_utils_1.serializeTranslate)(parsed, currentY, decimalPlaces);
+            const newStr = serialize(parsed, currentY);
             if (newStr !== propStatus.codeValue) {
                 setDragX(parsed);
                 onSave(newStr).finally(() => {
@@ -66,16 +78,16 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
                 });
             }
         }
-    }, [propStatus, dragY, codeY, decimalPlaces, onSave]);
+    }, [codeY, dragY, onSave, propStatus, serialize]);
     // --- Y callbacks ---
     const onYChange = (0, react_1.useCallback)((newVal) => {
         setDragY(newVal);
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-        onDragValueChange((0, timeline_translate_utils_1.serializeTranslate)(currentX, newVal, decimalPlaces));
-    }, [onDragValueChange, dragX, codeX, decimalPlaces]);
+        onDragValueChange(serialize(currentX, newVal));
+    }, [codeX, dragX, onDragValueChange, serialize]);
     const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-        const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, newVal, decimalPlaces);
+        const newStr = serialize(currentX, newVal);
         if (newStr !== propStatus.codeValue) {
             onSave(newStr).finally(() => {
                 setDragY(null);
@@ -86,12 +98,12 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
             setDragY(null);
             onDragEnd();
         }
-    }, [dragX, codeX, decimalPlaces, propStatus, onSave, onDragEnd]);
+    }, [codeX, dragX, onDragEnd, onSave, propStatus, serialize]);
     const onYTextChange = (0, react_1.useCallback)((newVal) => {
         const parsed = Number(newVal);
         if (!Number.isNaN(parsed)) {
             const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-            const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, parsed, decimalPlaces);
+            const newStr = serialize(currentX, parsed);
             if (newStr !== propStatus.codeValue) {
                 setDragY(parsed);
                 onSave(newStr).finally(() => {
@@ -99,9 +111,37 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
                 });
             }
         }
-    }, [propStatus, onSave, dragX, codeX, decimalPlaces]);
+    }, [codeX, dragX, onSave, propStatus, serialize]);
+    const onZChange = (0, react_1.useCallback)((newVal) => {
+        setDragZ(newVal);
+        onDragValueChange(serialize(dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY, newVal));
+    }, [codeX, codeY, dragX, dragY, onDragValueChange, serialize]);
+    const onZChangeEnd = (0, react_1.useCallback)((newVal) => {
+        const newStr = serialize(dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY, newVal);
+        if (newStr !== propStatus.codeValue) {
+            onSave(newStr).finally(() => {
+                setDragZ(null);
+                onDragEnd();
+            });
+        }
+        else {
+            setDragZ(null);
+            onDragEnd();
+        }
+    }, [codeX, codeY, dragX, dragY, onDragEnd, onSave, propStatus, serialize]);
+    const onZTextChange = (0, react_1.useCallback)((newVal) => {
+        const parsed = Number(newVal);
+        if (!Number.isNaN(parsed)) {
+            const newStr = serialize(dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY, parsed);
+            if (newStr !== propStatus.codeValue) {
+                setDragZ(parsed);
+                onSave(newStr).finally(() => setDragZ(null));
+            }
+        }
+    }, [codeX, codeY, dragX, dragY, onSave, propStatus, serialize]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity })
-        ] }));
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, buttonStyle: leftDraggerStyle, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity, "aria-label": "Offset X" }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, buttonStyle: rightDraggerStyle, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity, "aria-label": "Offset Y" }), show3D ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: (_a = dragZ !== null && dragZ !== void 0 ? dragZ : codeZ) !== null && _a !== void 0 ? _a : 0, buttonStyle: rightDraggerStyle, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onZChange, onValueChangeEnd: onZChangeEnd, onTextChange: onZTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity, "aria-label": "Offset Z" })
+                ] })) : null] }));
 };
 exports.TimelineTranslateField = TimelineTranslateField;

package/dist/components/Timeline/Transform3DModeContext.d.ts

@@ -0,0 +1 @@
+export declare const Transform3DModeContext: import("react").Context<boolean>;

package/dist/components/Timeline/Transform3DModeContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Transform3DModeContext = void 0;
+const react_1 = require("react");
+exports.Transform3DModeContext = (0, react_1.createContext)(false);

package/dist/components/Timeline/delete-selected-timeline-item.js

@@ -78,12 +78,6 @@ const deleteEffects = (effects) => {
     }))
         .then((result) => {
         if (result.success) {
-            const singleEffect = effects[0];
-            (0, NotificationCenter_1.showNotification)(effects.length === 1 && (singleEffect === null || singleEffect === void 0 ? void 0 : singleEffect.type) === 'single-effect'
-                ? 'Removed effect from source file'
-                : effects.length === 1
-                    ? 'Removed effects from source file'
-                    : 'Removed effects from source files', 2000);
             return true;
         }
         (0, NotificationCenter_1.showNotification)(result.reason, 4000);

package/dist/components/Timeline/get-sequence-context-menu-items.js

@@ -5,6 +5,7 @@ const no_react_1 = require("remotion/no-react");
 const format_file_location_1 = require("../../helpers/format-file-location");
 const get_open_in_menu_items_1 = require("../get-open-in-menu-items");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const actions_1 = require("../RenderQueue/actions");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const normalizeMenuDividers = (items) => {
     var _a;
@@ -47,9 +48,21 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
             editorInfo,
             excludeCodingAgentId: (_g = defaultCodingAgent === null || defaultCodingAgent === void 0 ? void 0 : defaultCodingAgent.id) !== null && _g !== void 0 ? _g : null,
             excludeEditorId: defaultEditorId,
+            fileManagerDisabled: !(originalLocation === null || originalLocation === void 0 ? void 0 : originalLocation.source),
+            folder: false,
+            location: originalLocation,
             onConfigureApps,
             onOpenInCodingAgent: openInCodingAgentWithContext,
             onOpenInEditor: openInEditor,
+            onOpenInFileExplorer: () => {
+                if (!(originalLocation === null || originalLocation === void 0 ? void 0 : originalLocation.source)) {
+                    return;
+                }
+                (0, actions_1.openInFileExplorer)({ directory: originalLocation.source }).catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
+                });
+            },
+            onOpenInTerminal: null,
         })
         : [];
     const items = [
@@ -110,12 +123,7 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                 if (!contextForAgents) {
                     return;
                 }
-                navigator.clipboard
-                    .writeText(contextForAgents)
-                    .then(() => {
-                    (0, NotificationCenter_1.showNotification)('Copied context for agents', 1000);
-                })
-                    .catch((err) => {
+                navigator.clipboard.writeText(contextForAgents).catch((err) => {
                     (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
                 });
             },

package/dist/components/Timeline/keyframe-clipboard.d.ts

@@ -1,4 +1,4 @@
-import type { KeyframeClipboardData } from '@remotion/studio-shared';
+import type { KeyframeClipboardData, KeyframeClipboardFieldType } from '@remotion/studio-shared';
 import { type InteractivitySchema, type OverrideIdToNodePaths, type PropStatuses, type SequencePropsSubscriptionKey, type TSequence } from 'remotion';
 import type { TimelineSelection } from './TimelineSelection';
 export declare const getKeyframeClipboardDataFromSelections: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }: {
@@ -24,6 +24,10 @@ export type PasteKeyframeTarget = {
 } | {
     readonly type: 'none' | 'multiple' | 'uncopyable' | 'incompatible';
 };
+export declare const isKeyframeValueCompatible: ({ value, fieldType, }: {
+    readonly value: unknown;
+    readonly fieldType: KeyframeClipboardFieldType | null;
+}) => boolean;
 export declare const getPasteKeyframeTarget: ({ selectedItems, payload, timelinePosition, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly selectedItems: readonly TimelineSelection[];
     readonly payload: KeyframeClipboardData;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPasteKeyframeTarget = exports.getKeyframeClipboardDataFromSelections = void 0;
+exports.getPasteKeyframeTarget = exports.isKeyframeValueCompatible = 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");
@@ -217,6 +217,7 @@ const isKeyframeValueCompatible = ({ value, fieldType, }) => {
     }
     return typeof value === 'string';
 };
+exports.isKeyframeValueCompatible = isKeyframeValueCompatible;
 const getPasteKeyframeTarget = ({ selectedItems, payload, timelinePosition, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     var _a, _b, _c;
     if (selectedItems.length === 0) {
@@ -270,7 +271,7 @@ const getPasteKeyframeTarget = ({ selectedItems, payload, timelinePosition, sequ
     ].sort((first, second) => first - second);
     const firstEasingSegmentIndex = finalFrames.indexOf(firstFrame);
     if (resolved.fieldType !== payload.fieldType ||
-        payload.keyframes.some((keyframe) => !isKeyframeValueCompatible({
+        payload.keyframes.some((keyframe) => !(0, exports.isKeyframeValueCompatible)({
             value: keyframe.value,
             fieldType: payload.fieldType,
         }))) {

package/dist/components/Timeline/save-sequence-prop.js

@@ -36,6 +36,7 @@ const saveInlineCaptionPatches = ({ fileName, nodePath, schema, patches, nextCap
 };
 exports.saveInlineCaptionPatches = saveInlineCaptionPatches;
 const saveSequenceProps = ({ changes, addedKeyframes, movedKeyframes, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
+    var _a;
     const keyframesToAdd = addedKeyframes === null ? [] : addedKeyframes;
     const sequenceKeyframes = movedKeyframes === null ? [] : movedKeyframes.sequenceKeyframes;
     const effectKeyframes = movedKeyframes === null ? [] : movedKeyframes.effectKeyframes;
@@ -56,13 +57,18 @@ const saveSequenceProps = ({ changes, addedKeyframes, movedKeyframes, setPropSta
         return (0, save_prop_queue_1.enqueueSavePropChange)({
             nodePath: change.nodePath,
             setPropStatuses,
-            applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForPropStatuses)({
-                previous: prev,
-                fieldKey: change.fieldKey,
-                value: change.value,
-                defaultValue: change.defaultValue,
-                schema: change.schema,
-            }),
+            applyOptimistic: (prev) => {
+                var _a;
+                return ((_a = change.sourceEdit) === null || _a === void 0 ? void 0 : _a.type) === 'clipboard-param'
+                    ? prev
+                    : (0, studio_shared_1.optimisticUpdateForPropStatuses)({
+                        previous: prev,
+                        fieldKey: change.fieldKey,
+                        value: change.value,
+                        defaultValue: change.defaultValue,
+                        schema: change.schema,
+                    });
+            },
             apiCall: () => {
                 var _a;
                 return (0, sequence_props_api_1.saveSequenceProps)({
@@ -102,6 +108,9 @@ const saveSequenceProps = ({ changes, addedKeyframes, movedKeyframes, setPropSta
         }));
     }
     for (const change of changes) {
+        if (((_a = change.sourceEdit) === null || _a === void 0 ? void 0 : _a.type) === 'clipboard-param') {
+            continue;
+        }
         setPropStatuses(change.nodePath, (prev) => (0, studio_shared_1.optimisticUpdateForPropStatuses)({
             previous: prev,
             fieldKey: change.fieldKey,

package/dist/components/Timeline/sequence-prop-clipboard.d.ts

@@ -0,0 +1,31 @@
+import { type EffectClipboardParam, type SequencePropClipboardData } from '@remotion/studio-shared';
+import { type CanUpdateSequencePropStatus, type InteractivitySchema, type OverrideIdToNodePaths, type PropStatuses, type SequencePropsSubscriptionKey, type TSequence } from 'remotion';
+import type { TimelineSelection } from './TimelineSelection';
+export declare const propStatusToClipboardParam: (prop: CanUpdateSequencePropStatus) => EffectClipboardParam | null;
+export declare const getSequencePropClipboardDataFromSelection: ({ selection, propStatuses, sequences, overrideIdsToNodePaths, }: {
+    readonly selection: TimelineSelection;
+    readonly propStatuses: PropStatuses;
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+}) => SequencePropClipboardData | null;
+type PasteSequencePropEditTarget = {
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly fieldKey: string;
+    readonly defaultValue: string | null;
+    readonly schema: InteractivitySchema;
+};
+export type PasteSequencePropTarget = {
+    readonly type: 'valid';
+    readonly targets: PasteSequencePropEditTarget[];
+} | {
+    readonly type: 'none' | 'prop-mismatch' | 'uncopyable' | 'incompatible';
+};
+export declare const getPasteSequencePropTarget: ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }: {
+    readonly selectedItems: readonly TimelineSelection[];
+    readonly payload: SequencePropClipboardData;
+    readonly propStatuses: PropStatuses;
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+}) => PasteSequencePropTarget;
+export {};

package/dist/components/Timeline/sequence-prop-clipboard.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPasteSequencePropTarget = exports.getSequencePropClipboardDataFromSelection = exports.propStatusToClipboardParam = 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 keyframe_clipboard_1 = require("./keyframe-clipboard");
+const propStatusToClipboardParam = (prop) => {
+    if (prop.status === 'computed') {
+        return null;
+    }
+    if (prop.status === 'static') {
+        if (prop.codeValue === undefined) {
+            return null;
+        }
+        return { type: 'static', value: prop.codeValue };
+    }
+    if (!(0, studio_shared_1.isKeyframeInterpolationFunction)(prop.interpolationFunction)) {
+        return null;
+    }
+    return {
+        type: 'keyframed',
+        interpolationFunction: prop.interpolationFunction,
+        keyframes: prop.keyframes,
+        easing: prop.easing,
+        clamping: prop.clamping,
+        ...(prop.output === undefined || prop.output === 'linear'
+            ? {}
+            : { output: prop.output }),
+        ...(prop.posterize === undefined ? {} : { posterize: prop.posterize }),
+    };
+};
+exports.propStatusToClipboardParam = propStatusToClipboardParam;
+const getSequencePropClipboardDataFromSelection = ({ selection, propStatuses, sequences, overrideIdsToNodePaths, }) => {
+    var _a, _b;
+    var _c;
+    if (selection.type !== 'sequence-prop') {
+        return null;
+    }
+    const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
+        sequences,
+        overrideIdsToNodePaths,
+        nodePathInfo: selection.nodePathInfo,
+    });
+    if (!(track === null || track === void 0 ? void 0 : track.sequence.controls)) {
+        return null;
+    }
+    const field = remotion_1.Internals.getFlatSchemaWithAllKeys(track.sequence.controls.schema)[selection.key];
+    if (!field || !(0, studio_shared_1.isKeyframeClipboardFieldType)(field.type)) {
+        return null;
+    }
+    const propStatus = (_b = remotion_1.Internals.getPropStatusesCtx(propStatuses, (_c = (_a = track.nodePathInfo) === null || _a === void 0 ? void 0 : _a.sequenceSubscriptionKey) !== null && _c !== void 0 ? _c : selection.nodePathInfo.sequenceSubscriptionKey)) === null || _b === void 0 ? void 0 : _b[selection.key];
+    if (!propStatus) {
+        return null;
+    }
+    const param = (0, exports.propStatusToClipboardParam)(propStatus);
+    if (param === null) {
+        return null;
+    }
+    return {
+        type: 'sequence-prop',
+        version: 1,
+        remotionClipboard: 'sequence-prop',
+        key: selection.key,
+        fieldType: field.type,
+        param,
+    };
+};
+exports.getSequencePropClipboardDataFromSelection = getSequencePropClipboardDataFromSelection;
+const getPasteTargetForSelection = ({ selection, payload, propStatuses, sequences, overrideIdsToNodePaths, }) => {
+    var _a;
+    if (selection.type !== 'sequence-prop' && selection.type !== 'sequence') {
+        return { type: 'none' };
+    }
+    const fieldKey = selection.type === 'sequence-prop' ? selection.key : payload.key;
+    if (fieldKey !== payload.key) {
+        return { type: 'prop-mismatch' };
+    }
+    const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
+        sequences,
+        overrideIdsToNodePaths,
+        nodePathInfo: selection.nodePathInfo,
+    });
+    if (!(track === null || track === void 0 ? void 0 : track.sequence.controls) || !track.nodePathInfo) {
+        return { type: 'uncopyable' };
+    }
+    const { schema } = track.sequence.controls;
+    const field = remotion_1.Internals.getFlatSchemaWithAllKeys(schema)[fieldKey];
+    if (!field || field.type !== payload.fieldType) {
+        return { type: 'incompatible' };
+    }
+    const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
+    const propStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[fieldKey];
+    if (!propStatus || propStatus.status === 'computed') {
+        return { type: 'uncopyable' };
+    }
+    const values = payload.param.type === 'static'
+        ? [payload.param.value]
+        : payload.param.keyframes.map((keyframe) => keyframe.value);
+    if (values.some((value) => !(0, keyframe_clipboard_1.isKeyframeValueCompatible)({ value, fieldType: payload.fieldType }))) {
+        return { type: 'incompatible' };
+    }
+    return {
+        type: 'valid',
+        target: {
+            fileName: nodePath.absolutePath,
+            nodePath,
+            fieldKey,
+            defaultValue: field.default === undefined ? null : JSON.stringify(field.default),
+            schema,
+        },
+    };
+};
+const getPasteSequencePropTarget = ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }) => {
+    if (selectedItems.length === 0) {
+        return { type: 'none' };
+    }
+    const targets = [];
+    for (const selection of selectedItems) {
+        const result = getPasteTargetForSelection({
+            selection,
+            payload,
+            propStatuses,
+            sequences,
+            overrideIdsToNodePaths,
+        });
+        if (result.type !== 'valid') {
+            return result;
+        }
+        targets.push(result.target);
+    }
+    return {
+        type: 'valid',
+        targets: [
+            ...new Map(targets.map((target) => [
+                remotion_1.Internals.makeSequencePropsSubscriptionKey(target.nodePath),
+                target,
+            ])).values(),
+        ],
+    };
+};
+exports.getPasteSequencePropTarget = getPasteSequencePropTarget;

package/dist/components/Timeline/sequence-props-subscription-store.d.ts

@@ -2,7 +2,7 @@ import type { SequenceNodePath, InteractivitySchema, VideoConfigValues } from 'r
 import { subscribeToSequenceProps } from '../sequence-props-api';
 type SubscribeResult = Awaited<ReturnType<typeof subscribeToSequenceProps>>;
 type ApplyResult = (result: SubscribeResult) => void;
-export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, }: {
+export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, stack, }: {
     fileName: string;
     line: number;
     column: number;
@@ -14,6 +14,7 @@ export declare const acquireSequencePropsSubscription: ({ fileName, line, column
     applyOnce: ApplyResult;
     applyEach: ApplyResult;
     videoConfigValues: VideoConfigValues;
+    stack: string | null;
 }) => {
     release: () => void;
 };

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

@@ -4,9 +4,11 @@ exports.acquireSequencePropsSubscription = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const sequence_props_api_1 = require("../sequence-props-api");
-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)}`;
+// The generated stack distinguishes Fast Refresh instances even when source maps
+// resolve both the old and new JSX nodes to the same line and column.
+const makeKey = ({ fileName, line, column, componentIdentity, sequenceKeys, assetKeys, effectKeys, videoConfigValues, stack, }) => `${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)}\0${stack !== null && stack !== void 0 ? stack : ''}`;
 const entries = new Map();
-const acquireSequencePropsSubscription = ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, }) => {
+const acquireSequencePropsSubscription = ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, stack, }) => {
     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));
@@ -19,6 +21,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, comp
         assetKeys,
         effectKeys,
         videoConfigValues,
+        stack,
     });
     let entry = entries.get(key);
     if (!entry) {

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

@@ -150,8 +150,8 @@ const formatTranslateTimelineFieldValueForDisplay = ({ fieldSchema, value, }) =>
     if (numericValue !== null) {
         return formatTranslateCoordinateForDisplay(numericValue, decimalPlaces);
     }
-    const [x, y] = (0, timeline_translate_utils_1.parseTranslate)(String(value !== null && value !== void 0 ? value : '0px 0px'));
-    return (0, timeline_translate_utils_1.serializeTranslate)(x, y, decimalPlaces);
+    const translate = (0, timeline_translate_utils_1.parseTranslate)(String(value !== null && value !== void 0 ? value : '0px 0px'));
+    return (0, timeline_translate_utils_1.serializeTranslate)(translate, decimalPlaces);
 };
 const formatTransformOriginAxisValueForDisplay = ({ decimalPlaces, unit, value, }) => {
     return `${(0, timeline_field_utils_1.formatTimelineNumber)({

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

@@ -1,4 +1,10 @@
 import type React from 'react';
+import { type SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const isTimelineFieldStacked: ({ field, transform3DMode, }: {
+    readonly field: SchemaFieldInfo;
+    readonly transform3DMode: boolean;
+}) => boolean;
 export declare const getTimelineFieldLabelRowStyle: (depth: number, basePadding?: number | undefined) => React.CSSProperties;
 export declare const timelineFieldValueColumnStyle: React.CSSProperties;
+export declare const timelineCompactStackedFieldValueColumnStyle: React.CSSProperties;
 export declare const timelineStackedFieldContentStyle: React.CSSProperties;

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

@@ -1,8 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.timelineStackedFieldContentStyle = exports.timelineFieldValueColumnStyle = exports.getTimelineFieldLabelRowStyle = void 0;
+exports.timelineStackedFieldContentStyle = exports.timelineCompactStackedFieldValueColumnStyle = exports.timelineFieldValueColumnStyle = exports.getTimelineFieldLabelRowStyle = exports.isTimelineFieldStacked = void 0;
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_row_layout_1 = require("./timeline-row-layout");
+const isTimelineFieldStacked = ({ field, transform3DMode, }) => {
+    return (field.typeName === 'text-content' ||
+        (transform3DMode &&
+            (field.typeName === 'translate' ||
+                field.typeName === 'rotation-css' ||
+                field.typeName === 'scale' ||
+                field.typeName === 'transform-origin')));
+};
+exports.isTimelineFieldStacked = isTimelineFieldStacked;
 const getTimelineFieldLabelRowStyle = (depth, basePadding) => {
     return {
         flex: `0 0 ${(0, timeline_row_layout_1.getTimelineFieldLabelFlexBasis)(depth, basePadding)}`,
@@ -22,6 +31,12 @@ exports.timelineFieldValueColumnStyle = {
     minWidth: 0,
     paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
 };
+exports.timelineCompactStackedFieldValueColumnStyle = {
+    ...exports.timelineFieldValueColumnStyle,
+    marginBottom: -2,
+    position: 'relative',
+    top: -2,
+};
 exports.timelineStackedFieldContentStyle = {
     alignSelf: 'stretch',
     display: 'flex',

package/dist/components/Timeline/timeline-rotation-utils.d.ts

@@ -1,2 +1,18 @@
+export type ParsedCssRotation = {
+    readonly axis: readonly [number, number, number];
+    readonly degrees: number;
+};
+export declare const parseCssRotation: (value: string) => ParsedCssRotation | null;
 export declare const parseCssRotationToDegrees: (value: string) => number;
+export type CssRotationEuler = readonly [number, number, number];
+export declare const parseCssRotationToEuler: (value: string) => CssRotationEuler;
+export declare const serializeCssRotation3d: ({ axis, degrees, decimalPlaces, }: {
+    readonly axis: readonly [number, number, number];
+    readonly degrees: number;
+    readonly decimalPlaces?: number | undefined;
+}) => string;
+export declare const serializeCssRotationFromEuler: ({ rotation, decimalPlaces, }: {
+    readonly rotation: CssRotationEuler;
+    readonly decimalPlaces?: number | undefined;
+}) => string;
 export declare const serializeCssRotation: (value: number, decimalPlaces?: number) => string;