@remotion/studio 4.0.507 → 4.0.509

package/dist/components/Timeline/SequencePropsObserver.js

@@ -3,10 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SequencePropsObserver = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const fast_refresh_context_1 = require("../../fast-refresh-context");
 const client_id_1 = require("../../helpers/client-id");
+const sequence_node_path_mutations_1 = require("../../helpers/sequence-node-path-mutations");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const SequencePropsObserver = () => {
     const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { remapPropStatuses, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const overrideIdToNodePathMappingsRef = (0, react_1.useRef)(overrideIdToNodePathMappings);
+    overrideIdToNodePathMappingsRef.current = overrideIdToNodePathMappings;
+    const { setOverrideIdToNodePath } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsSettersContext);
+    const { fastRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
+    const { migrateExpandedTracksForSubscriptionKey } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     (0, react_1.useEffect)(() => {
         const handleEvent = (event) => {
             if (event.type !== 'sequence-props-updated') {
@@ -19,6 +29,92 @@ const SequencePropsObserver = () => {
             unsubscribe();
         };
     }, [setPropStatuses, subscribeToEvent]);
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        const mutations = (0, sequence_node_path_mutations_1.takePendingSequenceNodePathMutations)();
+        if (mutations.length === 0) {
+            return;
+        }
+        const statusRemappings = [];
+        const overrideUpdates = [];
+        for (const [overrideId, previousNodePath] of Object.entries(overrideIdToNodePathMappingsRef.current)) {
+            let { nodePath } = previousNodePath;
+            let wasRemapped = false;
+            let wasDeleted = false;
+            let runtimeNodePathExists = true;
+            const previousNodePathString = JSON.stringify(previousNodePath.nodePath);
+            for (const mutation of mutations) {
+                for (const file of mutation.files) {
+                    if (file.absolutePath !== previousNodePath.absolutePath) {
+                        continue;
+                    }
+                    // Prop statuses follow source nodes to their new paths. Override IDs,
+                    // however, follow React's runtime instances. After deleting an unkeyed
+                    // sibling, React reuses the instance already at the destination path.
+                    // Keep that mapping in place and only remove mappings for vacated paths.
+                    const runtimeNodePathIsSource = file.remappings.some((item) => JSON.stringify(item.oldNodePath) === previousNodePathString);
+                    const runtimeNodePathIsDestination = file.remappings.some((item) => item.newNodePath !== null &&
+                        JSON.stringify(item.newNodePath) === previousNodePathString);
+                    const runtimeNodePathWasRestored = file.restoredNodePaths.some((item) => JSON.stringify(item) === previousNodePathString);
+                    if (runtimeNodePathIsSource) {
+                        runtimeNodePathExists =
+                            runtimeNodePathIsDestination || runtimeNodePathWasRestored;
+                    }
+                    else if (runtimeNodePathIsDestination ||
+                        runtimeNodePathWasRestored) {
+                        runtimeNodePathExists = true;
+                    }
+                    if (wasDeleted) {
+                        const wasRestored = file.restoredNodePaths.some((restoredNodePath) => JSON.stringify(restoredNodePath) === JSON.stringify(nodePath));
+                        if (wasRestored) {
+                            wasDeleted = false;
+                        }
+                        continue;
+                    }
+                    const remapping = file.remappings.find((item) => JSON.stringify(item.oldNodePath) === JSON.stringify(nodePath));
+                    if (!remapping) {
+                        continue;
+                    }
+                    wasRemapped = true;
+                    if (remapping.newNodePath === null) {
+                        wasDeleted = true;
+                        continue;
+                    }
+                    nodePath = remapping.newNodePath;
+                }
+            }
+            if (!wasRemapped) {
+                continue;
+            }
+            const nextNodePath = wasDeleted ? null : { ...previousNodePath, nodePath };
+            const previousStatusKey = remotion_1.Internals.makeSequencePropsSubscriptionKey(previousNodePath);
+            statusRemappings.push({
+                previousNodePath,
+                nodePath: nextNodePath,
+                result: (_a = propStatusesRef.current[previousStatusKey]) !== null && _a !== void 0 ? _a : null,
+            });
+            overrideUpdates.push({
+                overrideId,
+                nodePath: runtimeNodePathExists ? previousNodePath : null,
+            });
+        }
+        remapPropStatuses(statusRemappings);
+        for (const event of overrideUpdates) {
+            setOverrideIdToNodePath(event.overrideId, event.nodePath);
+        }
+        for (const event of statusRemappings) {
+            if (event.nodePath === null) {
+                continue;
+            }
+            migrateExpandedTracksForSubscriptionKey(event.previousNodePath, event.nodePath);
+        }
+    }, [
+        fastRefreshes,
+        migrateExpandedTracksForSubscriptionKey,
+        propStatusesRef,
+        remapPropStatuses,
+        setOverrideIdToNodePath,
+    ]);
     return null;
 };
 exports.SequencePropsObserver = SequencePropsObserver;

package/dist/components/Timeline/SubscribeToNodePaths.js

@@ -6,7 +6,7 @@ const no_react_1 = require("remotion/no-react");
 const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
 const use_sequence_props_subscription_1 = require("./use-sequence-props-subscription");
 const SubscribeToNodePaths = ({ overrideId, componentIdentity, schema, getStack, effects }) => {
-    const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(getStack);
+    const { resolvedLocation, stack, preferMappedNodePath } = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(getStack, overrideId);
     const effectSubscriptions = (0, react_1.useMemo)(() => {
         return effects
             .map((effect) => {
@@ -19,7 +19,9 @@ const SubscribeToNodePaths = ({ overrideId, componentIdentity, schema, getStack,
         componentIdentity,
         schema,
         effects: effectSubscriptions,
-        originalLocation,
+        originalLocation: resolvedLocation,
+        preferMappedNodePath,
+        stack,
     });
     return null;
 };

package/dist/components/Timeline/Timeline.js

@@ -37,10 +37,12 @@ exports.Timeline = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
+const fast_refresh_context_1 = require("../../fast-refresh-context");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const inserted_element_selection_1 = require("../../helpers/inserted-element-selection");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
@@ -230,7 +232,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 { canvasContent, 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);
@@ -253,6 +255,58 @@ const TimelineInner = () => {
         overrideIdToNodePathMappings,
         compositions,
     ]);
+    const pendingInsertedElementSelection = (0, react_1.useSyncExternalStore)(inserted_element_selection_1.subscribeToInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection);
+    const { fastRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
+    const pendingSelectionStart = (0, react_1.useRef)(null);
+    const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (pendingInsertedElementSelection === null) {
+            pendingSelectionStart.current = null;
+            return;
+        }
+        const matchesInsertedNodePath = (track) => track.nodePathInfo !== null &&
+            track.nodePathInfo.sequenceSubscriptionKey.absolutePath ===
+                pendingInsertedElementSelection.nodePath.absolutePath &&
+            JSON.stringify(track.nodePathInfo.sequenceSubscriptionKey.nodePath) ===
+                JSON.stringify(pendingInsertedElementSelection.nodePath.nodePath);
+        if (((_a = pendingSelectionStart.current) === null || _a === void 0 ? void 0 : _a.selection) !==
+            pendingInsertedElementSelection) {
+            pendingSelectionStart.current = {
+                selection: pendingInsertedElementSelection,
+                fastRefreshes,
+                existingSequenceIds: new Set(timeline
+                    .filter(matchesInsertedNodePath)
+                    .map((track) => track.sequence.id)),
+            };
+            return;
+        }
+        if (pendingSelectionStart.current.fastRefreshes === fastRefreshes) {
+            return;
+        }
+        if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' &&
+            canvasContent.compositionId !==
+                pendingInsertedElementSelection.compositionId) {
+            (0, inserted_element_selection_1.clearInsertedElementSelection)(pendingInsertedElementSelection);
+            return;
+        }
+        const insertedTrack = timeline.find((track) => {
+            var _a;
+            return matchesInsertedNodePath(track) &&
+                !((_a = pendingSelectionStart.current) === null || _a === void 0 ? void 0 : _a.existingSequenceIds.has(track.sequence.id));
+        });
+        if (!insertedTrack || insertedTrack.nodePathInfo === null) {
+            return;
+        }
+        selectItems([{ type: 'sequence', nodePathInfo: insertedTrack.nodePathInfo }], { reveal: true });
+        (0, inserted_element_selection_1.clearInsertedElementSelection)(pendingInsertedElementSelection);
+    }, [
+        canvasContent,
+        fastRefreshes,
+        pendingInsertedElementSelection,
+        selectItems,
+        timeline,
+    ]);
     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

@@ -21,6 +21,8 @@ const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info
 const imperative_state_1 = require("./imperative-state");
 const keyframe_clipboard_1 = require("./keyframe-clipboard");
 const save_effect_prop_1 = require("./save-effect-prop");
+const save_sequence_prop_1 = require("./save-sequence-prop");
+const sequence_prop_clipboard_1 = require("./sequence-prop-clipboard");
 const TimelineSelection_1 = require("./TimelineSelection");
 const update_selected_easing_1 = require("./update-selected-easing");
 const makeClipboardText = (payload) => JSON.stringify(payload);
@@ -76,37 +78,6 @@ const getPasteEffectsTarget = (selectedItems) => {
     };
 };
 exports.getPasteEffectsTarget = getPasteEffectsTarget;
-const isClipboardInterpolationFunction = (value) => {
-    return (0, studio_shared_1.isKeyframeInterpolationFunction)(value);
-};
-const effectPropStatusToClipboardParam = (prop) => {
-    if (prop.status === 'computed') {
-        return null;
-    }
-    if (prop.status === 'static') {
-        if (prop.codeValue === undefined) {
-            return null;
-        }
-        return {
-            type: 'static',
-            value: prop.codeValue,
-        };
-    }
-    if (!isClipboardInterpolationFunction(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 }),
-    };
-};
 const effectStatusToSnapshot = (effect) => {
     if (effect.importPath === null) {
         return null;
@@ -116,7 +87,7 @@ const effectStatusToSnapshot = (effect) => {
         if (prop.status === 'static' && prop.codeValue === undefined) {
             continue;
         }
-        const param = effectPropStatusToClipboardParam(prop);
+        const param = (0, sequence_prop_clipboard_1.propStatusToClipboardParam)(prop);
         if (param === null) {
             return null;
         }
@@ -251,7 +222,7 @@ const getEffectPropClipboardDataFromSelection = ({ selection, propStatuses, }) =
     if (!prop) {
         return null;
     }
-    const param = effectPropStatusToClipboardParam(prop);
+    const param = (0, sequence_prop_clipboard_1.propStatusToClipboardParam)(prop);
     if (param === null) {
         return null;
     }
@@ -397,7 +368,7 @@ const TimelineClipboardKeybindings = () => {
             event: 'keydown',
             key: 'c',
             callback: (e) => {
-                var _a;
+                var _a, _b;
                 const { selectedItems } = currentSelection.current;
                 const propStatuses = propStatusesRef.current;
                 const sequences = sequencesRef.current;
@@ -456,10 +427,37 @@ const TimelineClipboardKeybindings = () => {
                     });
                     return;
                 }
+                if (selectedItems.some((selection) => selection.type === 'sequence-prop')) {
+                    e.preventDefault();
+                    if (selectedItems.length !== 1 ||
+                        ((_a = selectedItems[0]) === null || _a === void 0 ? void 0 : _a.type) !== 'sequence-prop') {
+                        (0, NotificationCenter_1.showNotification)('Select one property to copy its value', 3000);
+                        return;
+                    }
+                    const payload = (0, sequence_prop_clipboard_1.getSequencePropClipboardDataFromSelection)({
+                        selection: selectedItems[0],
+                        propStatuses,
+                        sequences,
+                        overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                    });
+                    if (payload === null) {
+                        (0, NotificationCenter_1.showNotification)('Cannot copy property because its value cannot be copied', 3000);
+                        return;
+                    }
+                    navigator.clipboard
+                        .writeText(makeClipboardText(payload))
+                        .then(() => {
+                        (0, NotificationCenter_1.showNotification)('Copied property value', 1000);
+                    })
+                        .catch((err) => {
+                        (0, NotificationCenter_1.showNotification)(`Could not copy property: ${err.message}`, 2000);
+                    });
+                    return;
+                }
                 if (selectedItems.some((selection) => selection.type === 'sequence-effect-prop')) {
                     e.preventDefault();
                     if (selectedItems.length !== 1 ||
-                        ((_a = selectedItems[0]) === null || _a === void 0 ? void 0 : _a.type) !== 'sequence-effect-prop') {
+                        ((_b = selectedItems[0]) === null || _b === void 0 ? void 0 : _b.type) !== 'sequence-effect-prop') {
                         (0, NotificationCenter_1.showNotification)('Select one effect prop to copy its value', 3000);
                         return;
                     }
@@ -732,6 +730,72 @@ const TimelineClipboardKeybindings = () => {
                         (0, NotificationCenter_1.showNotification)(`Could not paste easing: ${err.message}`, 3000);
                     });
                 }
+                const sequencePropResult = (0, studio_shared_1.parseSequencePropClipboardDataResult)(text);
+                if (sequencePropResult.status !== 'invalid') {
+                    e.preventDefault();
+                    if (sequencePropResult.status === 'unsupported-version') {
+                        (0, NotificationCenter_1.showNotification)('Cannot paste property copied from a different Remotion Studio version', 4000);
+                        return;
+                    }
+                    const sequencePropTarget = (0, sequence_prop_clipboard_1.getPasteSequencePropTarget)({
+                        selectedItems,
+                        payload: sequencePropResult.data,
+                        propStatuses,
+                        sequences,
+                        overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                    });
+                    if (sequencePropTarget.type !== 'valid') {
+                        switch (sequencePropTarget.type) {
+                            case 'none':
+                                (0, NotificationCenter_1.showNotification)('Select a property or sequence to paste onto', 3000);
+                                return;
+                            case 'prop-mismatch':
+                                (0, NotificationCenter_1.showNotification)('Select the same property to paste this value', 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 value is not compatible with this property', 3000);
+                                return;
+                            default:
+                                throw new Error(`Unexpected paste target: ${sequencePropTarget}`);
+                        }
+                    }
+                    const { param } = sequencePropResult.data;
+                    return (0, save_sequence_prop_1.saveSequenceProps)({
+                        changes: sequencePropTarget.targets.map((pasteTarget) => ({
+                            fileName: pasteTarget.fileName,
+                            nodePath: pasteTarget.nodePath,
+                            fieldKey: pasteTarget.fieldKey,
+                            value: param.type === 'static' ? param.value : undefined,
+                            defaultValue: pasteTarget.defaultValue,
+                            schema: pasteTarget.schema,
+                            ...(param.type === 'keyframed'
+                                ? {
+                                    sourceEdit: {
+                                        type: 'clipboard-param',
+                                        param,
+                                    },
+                                }
+                                : {}),
+                        })),
+                        addedKeyframes: null,
+                        movedKeyframes: null,
+                        setPropStatuses,
+                        clientId,
+                        undoLabel: sequencePropTarget.targets.length > 1
+                            ? 'Paste property onto selected sequences'
+                            : 'Paste property',
+                        redoLabel: sequencePropTarget.targets.length > 1
+                            ? 'Reapply property paste onto selected sequences'
+                            : 'Reapply property paste',
+                    }).then(() => {
+                        (0, NotificationCenter_1.showNotification)(sequencePropTarget.targets.length > 1
+                            ? 'Pasted property onto selected sequences'
+                            : 'Pasted property', 2000);
+                    });
+                }
                 const effectPropResult = (0, studio_shared_1.parseEffectPropClipboardDataResult)(text);
                 if (effectPropResult.status !== 'invalid') {
                     e.preventDefault();

package/dist/components/Timeline/TimelineDragHandler.js

@@ -274,9 +274,9 @@ const TimelineDragHandlerInner = () => {
         if (!dragging.dragging) {
             return;
         }
-        return (0, pointer_session_1.startPointerSession)({
+        return (0, pointer_session_1.startCapturedPointerSession)({
             event: dragging,
-            target: dragging.target,
+            captureTarget: dragging.target,
             onMove: onPointerMoveScrubbing,
             onEnd: (reason, endEvent) => {
                 if ((reason === 'pointerup' || reason === 'buttons-released') &&

package/dist/components/Timeline/TimelineEffectItem.js

@@ -109,10 +109,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
                     effectIndex,
                 },
             ]);
-            if (result.success) {
-                (0, NotificationCenter_1.showNotification)('Removed effect from source file', 2000);
-            }
-            else {
+            if (!result.success) {
                 (0, NotificationCenter_1.showNotification)(result.reason, 4000);
             }
         }

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -63,11 +63,18 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
                 status: propStatus,
                 frame: sourceFrame,
                 value,
+                defaultEasing: (0, studio_shared_1.isSchemaFieldHoldOnly)({
+                    schema: field.effectSchema,
+                    key: field.key,
+                })
+                    ? { type: 'step1' }
+                    : undefined,
             })
             : remotion_1.Internals.makeStaticDragOverride(value);
         setEffectDragOverrides(nodePath, field.effectIndex, field.key, nextDragOverrideValue);
     }, [
         field.effectIndex,
+        field.effectSchema,
         field.key,
         nodePath,
         propStatus,

package/dist/components/Timeline/TimelineFieldRowContent.js

@@ -2,13 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineFieldRowContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineFieldLabel_1 = require("./TimelineFieldLabel");
+const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const TimelineFieldRowContent = ({ field, rowDepth, selected, children }) => {
     var _a;
-    const label = (jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selected, label: (_a = field.description) !== null && _a !== void 0 ? _a : field.key, stacked: field.typeName === 'text-content' }));
-    const value = jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: children });
-    if (field.typeName === 'text-content') {
+    const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
+    const stacked = (0, timeline_field_row_layout_1.isTimelineFieldStacked)({ field, transform3DMode });
+    const compactStacked = stacked && field.typeName !== 'text-content';
+    const label = (jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selected, label: (_a = field.description) !== null && _a !== void 0 ? _a : field.key, stacked: stacked }));
+    const value = (jsx_runtime_1.jsx("div", { style: compactStacked
+            ? timeline_field_row_layout_1.timelineCompactStackedFieldValueColumnStyle
+            : timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: children }));
+    if (stacked) {
         return (jsx_runtime_1.jsxs("div", { style: timeline_field_row_layout_1.timelineStackedFieldContentStyle, children: [label, value] }));
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [label, value] }));

package/dist/components/Timeline/TimelineInOutDragHandler.js

@@ -275,9 +275,9 @@ const TimelineInOutDragHandlerInner = () => {
         if (inOutDragging.dragging === false) {
             return;
         }
-        return (0, pointer_session_1.startPointerSession)({
+        return (0, pointer_session_1.startCapturedPointerSession)({
             event: inOutDragging,
-            target: inOutDragging.target,
+            captureTarget: inOutDragging.target,
             onMove: onPointerMoveInOut,
             onEnd: (reason, endEvent) => {
                 if ((reason === 'pointerup' || reason === 'buttons-released') &&

package/dist/components/Timeline/TimelineLayerEye.js

@@ -58,9 +58,9 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
         layerPointedDown = hidden ? 'enable' : 'disable';
         onInvoked(layerPointedDown);
         lastPaintedLayerEye = e.currentTarget;
-        stopLayerPointerSession = (0, pointer_session_1.startPointerSession)({
+        stopLayerPointerSession = (0, pointer_session_1.startCapturedPointerSession)({
             event: e,
-            target: e.currentTarget,
+            captureTarget: e.currentTarget,
             onMove: (moveEvent) => {
                 var _a, _b;
                 const pointedElement = (_a = document

package/dist/components/Timeline/TimelineRotationField.js

@@ -7,16 +7,35 @@ const InputDragger_1 = require("../NewComposition/InputDragger");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const timeline_rotation_field_utils_1 = require("./timeline-rotation-field-utils");
 const timeline_rotation_utils_1 = require("./timeline-rotation-utils");
+const Transform3DModeContext_1 = require("./Transform3DModeContext");
+const containerStyle = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 4,
+};
+const compactDraggerStyle = {
+    paddingBottom: 2,
+    paddingLeft: 2,
+    paddingRight: 2,
+    paddingTop: 2,
+};
+const ROTATION_LABELS = ['X', 'Y', 'Z'];
 const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
     var _a, _b;
     const [dragValue, setDragValue] = (0, react_1.useState)(null);
+    const [dragRotation, setDragRotation] = (0, react_1.useState)(null);
+    const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
     const isCssRotation = field.fieldSchema.type === 'rotation-css';
-    const degrees = (0, react_1.useMemo)(() => {
-        if (isCssRotation) {
-            return (0, timeline_rotation_utils_1.parseCssRotationToDegrees)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0deg'));
-        }
-        return typeof effectiveValue === 'number' ? effectiveValue : 0;
-    }, [effectiveValue, isCssRotation]);
+    const cssRotation = (0, react_1.useMemo)(() => isCssRotation
+        ? (0, timeline_rotation_utils_1.parseCssRotationToEuler)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0deg'))
+        : [0, 0, 0], [effectiveValue, isCssRotation]);
+    const show3D = isCssRotation &&
+        (transform3DMode || cssRotation[0] !== 0 || cssRotation[1] !== 0);
+    const degrees = isCssRotation
+        ? cssRotation[2]
+        : typeof effectiveValue === 'number'
+            ? effectiveValue
+            : 0;
     const configuredStep = field.fieldSchema.type === 'rotation-css' ||
         field.fieldSchema.type === 'rotation-degrees'
         ? field.fieldSchema.step
@@ -32,11 +51,13 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
         defaultDecimalPlaces: 1,
         step: configuredStep,
     }), [configuredStep]);
-    const serializeValue = (0, react_1.useCallback)((value) => {
-        return isCssRotation
-            ? (0, timeline_rotation_utils_1.serializeCssRotation)(value, decimalPlaces)
-            : (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
-    }, [decimalPlaces, isCssRotation]);
+    const serializeValue = (0, react_1.useCallback)((value) => isCssRotation
+        ? (0, timeline_rotation_utils_1.serializeCssRotation)(value, decimalPlaces)
+        : (0, timeline_field_utils_1.normalizeTimelineNumber)(value), [decimalPlaces, isCssRotation]);
+    const serializeRotation = (0, react_1.useCallback)((rotation) => (0, timeline_rotation_utils_1.serializeCssRotationFromEuler)({
+        rotation,
+        decimalPlaces: Math.max(6, decimalPlaces),
+    }), [decimalPlaces]);
     const onValueChange = (0, react_1.useCallback)((newVal) => {
         setDragValue(newVal);
         onDragValueChange(serializeValue(newVal));
@@ -73,6 +94,57 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
             value: v,
         });
     }, [decimalPlaces, field.fieldSchema]);
-    return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : degrees, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }));
+    const onRotationValueChange = (0, react_1.useCallback)((rotationIndex, newValue) => {
+        const nextRotation = [...(dragRotation !== null && dragRotation !== void 0 ? dragRotation : cssRotation)];
+        nextRotation[rotationIndex] = newValue;
+        setDragRotation(nextRotation);
+        onDragValueChange(serializeRotation(nextRotation));
+    }, [cssRotation, dragRotation, onDragValueChange, serializeRotation]);
+    const onRotationValueChangeEnd = (0, react_1.useCallback)((rotationIndex, newValue) => {
+        const nextRotation = [...(dragRotation !== null && dragRotation !== void 0 ? dragRotation : cssRotation)];
+        nextRotation[rotationIndex] = newValue;
+        const newRotation = serializeRotation(nextRotation);
+        const clearDragState = () => {
+            setDragRotation(null);
+            onDragEnd();
+        };
+        if (newRotation !== propStatus.codeValue) {
+            onSave(newRotation).finally(clearDragState);
+        }
+        else {
+            clearDragState();
+        }
+    }, [
+        cssRotation,
+        dragRotation,
+        onDragEnd,
+        onSave,
+        propStatus.codeValue,
+        serializeRotation,
+    ]);
+    const onRotationTextChange = (0, react_1.useCallback)((rotationIndex, newValue) => {
+        const parsed = Number(newValue);
+        if (Number.isNaN(parsed)) {
+            return;
+        }
+        const nextRotation = [...(dragRotation !== null && dragRotation !== void 0 ? dragRotation : cssRotation)];
+        nextRotation[rotationIndex] = parsed;
+        const newRotation = serializeRotation(nextRotation);
+        if (newRotation !== propStatus.codeValue) {
+            setDragRotation(nextRotation);
+            onSave(newRotation).finally(() => setDragRotation(null));
+        }
+    }, [
+        cssRotation,
+        dragRotation,
+        onSave,
+        propStatus.codeValue,
+        serializeRotation,
+    ]);
+    const angleDragger = (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : degrees, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, "aria-label": isCssRotation ? 'Rotation Z' : 'Rotation angle' }));
+    if (show3D) {
+        return (jsx_runtime_1.jsx("span", { style: containerStyle, children: ROTATION_LABELS.map((rotationLabel, rotationIndex) => (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: (dragRotation !== null && dragRotation !== void 0 ? dragRotation : cssRotation)[rotationIndex], buttonStyle: compactDraggerStyle, status: "ok", small: true, onValueChange: (newValue) => onRotationValueChange(rotationIndex, newValue), onValueChangeEnd: (newValue) => onRotationValueChangeEnd(rotationIndex, newValue), onTextChange: (newValue) => onRotationTextChange(rotationIndex, newValue), min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, "aria-label": `Rotation ${rotationLabel}` }, rotationLabel))) }));
+    }
+    return angleDragger;
 };
 exports.TimelineRotationField = TimelineRotationField;