@remotion/studio 4.0.507 → 4.0.509

package/dist/components/Timeline/TimelineScaleField.js

@@ -10,11 +10,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 TimelineLayerEye_1 = require("./TimelineLayerEye");
+const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const leftDraggerStyle = {
+    paddingBottom: 2,
     paddingLeft: 0,
+    paddingTop: 2,
 };
 const rightDraggerStyle = {
+    paddingBottom: 2,
     paddingRight: 0,
+    paddingTop: 2,
 };
 const containerStyle = {
     alignItems: 'center',
@@ -82,9 +87,12 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
     var _a, _b;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
+    const [dragZ, setDragZ] = (0, react_1.useState)(null);
     const dragStartRef = (0, react_1.useRef)(null);
     const { getScaleLockState, setScaleLockState } = (0, react_1.useContext)(scale_lock_1.ScaleLockContext);
+    const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
     const [codeX, codeY, codeZ] = (0, react_1.useMemo)(() => no_react_1.NoReactInternals.parseScaleValue(effectiveValue), [effectiveValue]);
+    const show3D = transform3DMode || codeZ !== 1;
     const defaultLinked = codeX === codeY;
     const linked = getScaleLockState({
         nodePath: scaleLockNodePath,
@@ -111,9 +119,9 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
         }
         return dragStartRef.current;
     }, [codeX, codeY, dragX, dragY]);
-    const serialize = (0, react_1.useCallback)((x, y) => {
-        return no_react_1.NoReactInternals.serializeScaleValue([x, y, codeZ]);
-    }, [codeZ]);
+    const serialize = (0, react_1.useCallback)((x, y, z = dragZ !== null && dragZ !== void 0 ? dragZ : codeZ) => {
+        return no_react_1.NoReactInternals.serializeScaleValue([x, y, z]);
+    }, [codeZ, dragZ]);
     const onXChange = (0, react_1.useCallback)((newVal) => {
         if (linked) {
             const [baseX, baseY] = getDragStart();
@@ -161,6 +169,7 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
             dragStartRef.current = null;
             setDragX(null);
             setDragY(null);
+            setDragZ(null);
             onDragEnd();
         };
         if (!valuesEqual(newScale, propStatus.codeValue)) {
@@ -204,6 +213,7 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
                 dragStartRef.current = null;
                 setDragX(null);
                 setDragY(null);
+                setDragZ(null);
             });
         }
     }, [codeX, codeY, dragY, linked, max, min, onSave, propStatus, serialize]);
@@ -254,6 +264,7 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
             dragStartRef.current = null;
             setDragX(null);
             setDragY(null);
+            setDragZ(null);
             onDragEnd();
         };
         if (!valuesEqual(newScale, propStatus.codeValue)) {
@@ -297,6 +308,7 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
                 dragStartRef.current = null;
                 setDragX(null);
                 setDragY(null);
+                setDragZ(null);
             });
         }
     }, [codeX, codeY, dragX, linked, max, min, onSave, propStatus, serialize]);
@@ -307,8 +319,50 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
             linked: !linked,
         });
     }, [field.key, linked, scaleLockNodePath, setScaleLockState]);
+    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 newScale = serialize(dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY, newVal);
+        const clearDragState = () => {
+            dragStartRef.current = null;
+            setDragX(null);
+            setDragY(null);
+            setDragZ(null);
+            onDragEnd();
+        };
+        if (!valuesEqual(newScale, propStatus.codeValue)) {
+            onSave(newScale).finally(clearDragState);
+        }
+        else {
+            clearDragState();
+        }
+    }, [
+        codeX,
+        codeY,
+        dragX,
+        dragY,
+        onDragEnd,
+        onSave,
+        propStatus.codeValue,
+        serialize,
+    ]);
+    const onZTextChange = (0, react_1.useCallback)((newVal) => {
+        const parsed = Number(newVal);
+        if (Number.isNaN(parsed)) {
+            return;
+        }
+        const newScale = serialize(dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY, parsed);
+        if (!valuesEqual(newScale, propStatus.codeValue)) {
+            setDragZ(parsed);
+            onSave(newScale).finally(() => setDragZ(null));
+        }
+    }, [codeX, codeY, dragX, dragY, onSave, propStatus.codeValue, 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: min, max: max, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: true }), jsx_runtime_1.jsx("div", { style: gapStyle }), 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: min, max: max, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: true }), jsx_runtime_1.jsx(LinkToggle, { linked: linked, onToggle: onToggleLink })
+            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: min, max: max, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: true, "aria-label": "Scale X" }), jsx_runtime_1.jsx("div", { style: gapStyle }), 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: min, max: max, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: true, "aria-label": "Scale Y" }), show3D ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("div", { style: gapStyle }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragZ !== null && dragZ !== void 0 ? dragZ : codeZ, buttonStyle: rightDraggerStyle, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onZChange, onValueChangeEnd: onZChangeEnd, onTextChange: onZTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: true, "aria-label": "Scale Z" })
+                ] })) : null, jsx_runtime_1.jsx(LinkToggle, { linked: linked, onToggle: onToggleLink })
         ] }));
 };
 exports.TimelineScaleField = TimelineScaleField;

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

@@ -161,6 +161,10 @@ export declare const getTimelineSequenceSelectionKey: (nodePathInfo: SequenceNod
 export declare const TimelineSelectAllKeybindings: React.FC<{
     readonly timeline: readonly TimelineTrackData[];
 }>;
+export declare const getTimelineSequenceSelectionForEscape: (selectedItems: readonly TimelineSelection[]) => {
+    readonly type: "sequence";
+    readonly nodePathInfo: SequenceNodePathInfo;
+} | null;
 export declare const TimelineSelectableItemsProvider: React.FC<{
     readonly children: React.ReactNode;
     readonly timeline: readonly TimelineTrackData[];

package/dist/components/Timeline/TimelineSelection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_HOVER_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
+exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.getTimelineSequenceSelectionForEscape = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_HOVER_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -18,6 +18,7 @@ const options_sidebar_tabs_1 = require("../options-sidebar-tabs");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const get_timeline_easing_segments_1 = require("./get-timeline-easing-segments");
 const imperative_state_1 = require("./imperative-state");
+const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineClipboardKeybindings_1 = require("./TimelineClipboardKeybindings");
@@ -543,6 +544,42 @@ const TimelineSelectAllKeybindings = ({ timeline }) => {
     return null;
 };
 exports.TimelineSelectAllKeybindings = TimelineSelectAllKeybindings;
+const fieldsSelectingSequenceOnEscape = new Set([
+    'cropLeft',
+    'cropRight',
+    'cropTop',
+    'cropBottom',
+    'style.rotate',
+]);
+const getTimelineSequenceSelectionForEscape = (selectedItems) => {
+    if (selectedItems.length !== 1) {
+        return null;
+    }
+    const [selectedItem] = selectedItems;
+    let fieldKey = null;
+    if (selectedItem.type === 'sequence-prop') {
+        fieldKey = selectedItem.key;
+    }
+    else if (selectedItem.type === 'keyframe' ||
+        selectedItem.type === 'easing') {
+        const field = (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(selectedItem.nodePathInfo.auxiliaryKeys);
+        fieldKey = (field === null || field === void 0 ? void 0 : field.type) === 'sequence' ? field.fieldKey : null;
+    }
+    else {
+        return null;
+    }
+    if (!fieldsSelectingSequenceOnEscape.has(fieldKey !== null && fieldKey !== void 0 ? fieldKey : '')) {
+        return null;
+    }
+    return {
+        type: 'sequence',
+        nodePathInfo: {
+            ...selectedItem.nodePathInfo,
+            auxiliaryKeys: [],
+        },
+    };
+};
+exports.getTimelineSequenceSelectionForEscape = getTimelineSequenceSelectionForEscape;
 const TimelineEscapeKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const currentSelection = (0, exports.useCurrentTimelineSelectionStateAsRef)();
@@ -551,10 +588,16 @@ const TimelineEscapeKeybindings = () => {
             event: 'keydown',
             key: 'Escape',
             callback: (event) => {
-                const { selectedItems, clearSelection } = currentSelection.current;
+                const { selectedItems, clearSelection, selectItems } = currentSelection.current;
                 if (selectedItems.length === 0) {
                     return;
                 }
+                const sequenceSelection = (0, exports.getTimelineSequenceSelectionForEscape)(selectedItems);
+                if (sequenceSelection) {
+                    selectItems([sequenceSelection]);
+                    event.preventDefault();
+                    return;
+                }
                 clearSelection();
                 event.preventDefault();
             },
@@ -970,9 +1013,9 @@ const useTimelineMarqueeSelection = () => {
         const onPointerMove = (moveEvent) => {
             updateSelection(moveEvent.clientX, moveEvent.clientY);
         };
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event,
-            target,
+            captureTarget: target,
             onMove: onPointerMove,
             onEnd: (reason, endEvent) => {
                 if ((reason === 'pointerup' || reason === 'buttons-released') &&

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -48,6 +48,7 @@ const use_keybinding_1 = require("../../helpers/use-keybinding");
 const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const modals_1 = require("../../state/modals");
 const timeline_sequence_hover_1 = require("../../state/timeline-sequence-hover");
+const transform_3d_mode_1 = require("../../state/transform-3d-mode");
 const call_api_1 = require("../call-api");
 const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
@@ -139,21 +140,6 @@ const sequenceReorderAfterLine = {
     ...sequenceReorderLineBase,
     top: -1,
 };
-const sequenceReorderRejectionStyle = {
-    backgroundColor: colors_1.BLACK_ALPHA_85,
-    border: colors_1.BORDER_WHITE_ALPHA_20,
-    borderRadius: 4,
-    color: colors_1.WHITE,
-    fontSize: 11,
-    lineHeight: 1.2,
-    maxWidth: 260,
-    padding: '3px 6px',
-    pointerEvents: 'none',
-    position: 'absolute',
-    right: 6,
-    top: 2,
-    zIndex: 2,
-};
 const hasSequenceReorderDragType = (dataTransfer) => {
     return Array.from(dataTransfer.types).includes(SEQUENCE_REORDER_MIME_TYPE);
 };
@@ -207,7 +193,6 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
     const [effectDropHovered, setEffectDropHovered] = (0, react_1.useState)(false);
     const [isRenaming, setIsRenaming] = (0, react_1.useState)(false);
     const [sequenceDropIndicator, setSequenceDropIndicator] = (0, react_1.useState)(null);
-    const [sequenceDropRejection, setSequenceDropRejection] = (0, react_1.useState)(null);
     const { canOpenInEditor, canConfigureApps, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(sequence);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
@@ -400,7 +385,6 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
     const onSequenceDragEnd = (0, react_1.useCallback)(() => {
         currentSequenceDrag = null;
         setSequenceDropIndicator(null);
-        setSequenceDropRejection(null);
     }, []);
     const onSequenceDragOver = (0, react_1.useCallback)((e) => {
         if (!hasSequenceReorderDragType(e.dataTransfer)) {
@@ -409,12 +393,10 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
         const dropTarget = getSequenceDropTarget(e);
         if (!dropTarget) {
             setSequenceDropIndicator(null);
-            setSequenceDropRejection(null);
             return;
         }
         if (dropTarget.type === 'invalid') {
             setSequenceDropIndicator(null);
-            setSequenceDropRejection(dropTarget.reason);
             e.dataTransfer.dropEffect = 'none';
             return;
         }
@@ -422,14 +404,12 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
         e.stopPropagation();
         e.dataTransfer.dropEffect = 'move';
         setSequenceDropIndicator(dropTarget.position);
-        setSequenceDropRejection(null);
     }, [getSequenceDropTarget]);
     const onSequenceDragLeave = (0, react_1.useCallback)((e) => {
         if (e.currentTarget.contains(e.relatedTarget)) {
             return;
         }
         setSequenceDropIndicator(null);
-        setSequenceDropRejection(null);
     }, []);
     const onSequenceDrop = (0, react_1.useCallback)(async (e) => {
         if (!canReorderSequence ||
@@ -441,13 +421,11 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
         const dropTarget = getSequenceDropTarget(e);
         if (!dropTarget || dropTarget.type === 'invalid') {
             setSequenceDropIndicator(null);
-            setSequenceDropRejection((dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.type) === 'invalid' ? dropTarget.reason : null);
             return;
         }
         e.preventDefault();
         e.stopPropagation();
         setSequenceDropIndicator(null);
-        setSequenceDropRejection(null);
         currentSequenceDrag = null;
         try {
             const result = await (0, call_api_1.callApi)('/api/reorder-sequence', {
@@ -658,6 +636,8 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
             });
         },
     });
+    const canRotate = nodePathInfo !== null;
+    const { setManuallyEnabled } = (0, react_1.useContext)(transform_3d_mode_1.Transform3DModeStateContext);
     const onAddEffect = (0, react_1.useCallback)(() => {
         if (!canAddEffect ||
             previewServerState.type !== 'connected' ||
@@ -691,6 +671,20 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
             key: selected_outline_types_1.cropFieldKeys.left,
         }, undefined, undefined, { reveal: true });
     }, [canCrop, nodePathInfo, selectItem]);
+    const onRotate = (0, react_1.useCallback)(() => {
+        if (!canRotate || !nodePathInfo) {
+            return;
+        }
+        setManuallyEnabled((0, TimelineSelection_1.getTimelineSequenceSelectionKey)(nodePathInfo), true);
+        selectItem({
+            type: 'sequence-prop',
+            nodePathInfo: {
+                ...nodePathInfo,
+                auxiliaryKeys: ['controls', selected_outline_types_1.rotateFieldKey],
+            },
+            key: selected_outline_types_1.rotateFieldKey,
+        }, undefined, undefined, { reveal: true });
+    }, [canRotate, nodePathInfo, selectItem, setManuallyEnabled]);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
         var _a;
         if (selectable) {
@@ -769,9 +763,31 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
                                 subMenu: null,
                                 value: 'crop',
                             },
+                        ]
+                        : []),
+                    ...(canRotate
+                        ? [
+                            {
+                                type: 'item',
+                                id: 'rotate',
+                                keyHint: null,
+                                label: isProgrammaticallyDuplicated
+                                    ? 'Rotate all'
+                                    : 'Rotate',
+                                leftItem: null,
+                                disabled: false,
+                                onClick: onRotate,
+                                quickSwitcherLabel: null,
+                                subMenu: null,
+                                value: 'rotate',
+                            },
+                        ]
+                        : []),
+                    ...(canCrop || canRotate
+                        ? [
                             {
                                 type: 'divider',
-                                id: 'crop-divider',
+                                id: 'transform-controls-divider',
                             },
                         ]
                         : []),
@@ -796,6 +812,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
     }, [
         canAddEffect,
         canCrop,
+        canRotate,
         canConfigureApps,
         canOpenInEditor,
         canRenameThisSequence,
@@ -810,6 +827,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
         nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects,
         onAddEffect,
         onCrop,
+        onRotate,
         onDeleteSequenceFromSource,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
@@ -896,7 +914,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
                         " ",
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })
                     ] })) : null] }) }));
-    const draggableTrackRow = canHandleSequenceDrag ? (jsx_runtime_1.jsxs("div", { draggable: canReorderSequence, onDragStart: onSequenceDragStart, onDragEnd: onSequenceDragEnd, onDragOver: onSequenceDragOver, onDragLeave: onSequenceDragLeave, onDrop: onSequenceDrop, style: sequenceReorderWrapper, children: [sequenceReorderLineStyle ? (jsx_runtime_1.jsx("div", { style: sequenceReorderLineStyle })) : null, sequenceDropRejection ? (jsx_runtime_1.jsx("div", { style: sequenceReorderRejectionStyle, children: sequenceDropRejection })) : null, trackRow] })) : (trackRow);
+    const draggableTrackRow = canHandleSequenceDrag ? (jsx_runtime_1.jsxs("div", { draggable: canReorderSequence, onDragStart: onSequenceDragStart, onDragEnd: onSequenceDragEnd, onDragOver: onSequenceDragOver, onDragLeave: onSequenceDragLeave, onDrop: onSequenceDrop, style: sequenceReorderWrapper, children: [sequenceReorderLineStyle ? (jsx_runtime_1.jsx("div", { style: sequenceReorderLineStyle })) : null, trackRow] })) : (trackRow);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&
                 (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
                 isExpanded &&

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -45,6 +45,7 @@ const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const get_sequence_prop_reset_changes_1 = require("./get-sequence-prop-reset-changes");
 const save_sequence_prop_1 = require("./save-sequence-prop");
+const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineFieldRowContent_1 = require("./TimelineFieldRowContent");
 const TimelineKeyframeControls_1 = require("./TimelineKeyframeControls");
@@ -53,6 +54,7 @@ const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const TimelineSelection_1 = require("./TimelineSelection");
+const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const fieldRowBase = {};
 const inlineSourceFieldRow = {
     alignItems: 'stretch',
@@ -205,8 +207,14 @@ const TimelineSequenceKeyframedValueUnmemoized = (props) => {
             status: propStatus,
             frame: sourceFrame,
             value,
+            defaultEasing: (0, studio_shared_1.isSchemaFieldHoldOnly)({
+                schema,
+                key: field.key,
+            })
+                ? { type: 'step1' }
+                : undefined,
         }));
-    }, [propStatus, field.key, nodePath, setDragOverrides]);
+    }, [propStatus, field.key, nodePath, schema, setDragOverrides]);
     const onKeyframedDragEnd = (0, react_1.useCallback)(() => {
         clearDragOverrides(nodePath);
     }, [clearDragOverrides, nodePath]);
@@ -229,6 +237,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
     const propStatusesForOverride = remotion_1.Internals.getPropStatusesCtx(visualModePropStatuses, nodePath);
     const propStatus = (_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
     const dragOverrideValue = (0, react_1.useMemo)(() => {
@@ -248,10 +257,10 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 keyframable,
             })) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: schema, effectIndex: null, nodePathInfo: nodePathInfo, mode: keyframeControlsMode })) : null;
     const style = (0, react_1.useMemo)(() => {
-        return field.typeName === 'text-content'
+        return (0, timeline_field_row_layout_1.isTimelineFieldStacked)({ field, transform3DMode })
             ? fieldRowBase
             : { ...fieldRowBase, height: field.rowHeight };
-    }, [field.rowHeight, field.typeName]);
+    }, [field, transform3DMode]);
     const canResetToDefault = (0, react_1.useMemo)(() => {
         if (!propStatus || propStatus.status === 'computed') {
             return false;

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -729,9 +729,9 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
         if (!activeDragState) {
             return;
         }
-        return (0, pointer_session_1.startPointerSession)({
+        return (0, pointer_session_1.startCapturedPointerSession)({
             event: activeDragState,
-            target: activeDragState.target,
+            captureTarget: activeDragState.target,
             onMove,
             onEnd: (reason, endEvent) => {
                 if ((reason === 'pointerup' || reason === 'buttons-released') &&
@@ -953,9 +953,9 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         if (!activeDragState) {
             return;
         }
-        return (0, pointer_session_1.startPointerSession)({
+        return (0, pointer_session_1.startCapturedPointerSession)({
             event: activeDragState,
-            target: activeDragState.target,
+            captureTarget: activeDragState.target,
             onMove,
             onEnd: (reason, endEvent) => {
                 if ((reason === 'pointerup' || reason === 'buttons-released') &&
@@ -1136,9 +1136,9 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
         if (!activeDragState) {
             return;
         }
-        return (0, pointer_session_1.startPointerSession)({
+        return (0, pointer_session_1.startCapturedPointerSession)({
             event: activeDragState,
-            target: activeDragState.target,
+            captureTarget: activeDragState.target,
             onMove,
             onEnd: (reason, endEvent) => {
                 if ((reason === 'pointerup' || reason === 'buttons-released') &&

package/dist/components/Timeline/TimelineTransformOriginField.js

@@ -8,21 +8,33 @@ const timeline_field_display_utils_1 = require("./timeline-field-display-utils")
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const transform_origin_utils_1 = require("./transform-origin-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',
     gap: 4,
 };
 const TimelineTransformOriginField = ({ 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 [dragZ, setDragZ] = (0, react_1.useState)(null);
+    const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
     const parsed = (0, react_1.useMemo)(() => (0, transform_origin_utils_1.parseTransformOrigin)(effectiveValue), [effectiveValue]);
     const percent = (0, react_1.useMemo)(() => (parsed === null ? null : (0, transform_origin_utils_1.parsedTransformOriginToPercent)(parsed)), [parsed]);
+    const parsedZ = (0, react_1.useMemo)(() => (parsed === null || parsed === void 0 ? void 0 : parsed.z) === null || (parsed === null || parsed === void 0 ? void 0 : parsed.z) === undefined
+        ? null
+        : (0, transform_origin_utils_1.parseTransformOriginZ)(parsed.z), [parsed === null || parsed === void 0 ? void 0 : parsed.z]);
+    const show3D = transform3DMode || (parsedZ !== null && parsedZ.value !== 0);
     const configuredStep = field.fieldSchema.type === 'transform-origin'
         ? field.fieldSchema.step
         : undefined;
@@ -37,14 +49,19 @@ const TimelineTransformOriginField = ({ field, propStatus, effectiveValue, onSav
             value: v,
         });
     }, [field.fieldSchema]);
-    const serialize = (0, react_1.useCallback)((x, y) => {
+    const serialize = (0, react_1.useCallback)((x, y, z) => {
         var _a;
+        if (z === void 0) { z = (_a = parsed === null || parsed === void 0 ? void 0 : parsed.z) !== null && _a !== void 0 ? _a : null; }
         return (0, transform_origin_utils_1.serializeTransformOrigin)({
             uv: (0, transform_origin_utils_1.transformOriginPercentToUv)([x, y]),
-            z: (_a = parsed === null || parsed === void 0 ? void 0 : parsed.z) !== null && _a !== void 0 ? _a : null,
+            z,
             decimalPlaces,
         });
     }, [decimalPlaces, parsed === null || parsed === void 0 ? void 0 : parsed.z]);
+    const serializeZ = (0, react_1.useCallback)((value) => {
+        var _a;
+        return `${(0, timeline_field_utils_1.normalizeTimelineNumber)(value)}${(_a = parsedZ === null || parsedZ === void 0 ? void 0 : parsedZ.unit) !== null && _a !== void 0 ? _a : 'px'}`;
+    }, [parsedZ === null || parsedZ === void 0 ? void 0 : parsedZ.unit]);
     const onXChange = (0, react_1.useCallback)((newVal) => {
         if (percent === null) {
             return;
@@ -127,11 +144,68 @@ const TimelineTransformOriginField = ({ field, propStatus, effectiveValue, onSav
             }
         }
     }, [dragX, onSave, percent, propStatus.codeValue, serialize]);
+    const onZChange = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        setDragZ(newVal);
+        onDragValueChange(serialize(dragX !== null && dragX !== void 0 ? dragX : percent[0], dragY !== null && dragY !== void 0 ? dragY : percent[1], serializeZ(newVal)));
+    }, [dragX, dragY, onDragValueChange, percent, serialize, serializeZ]);
+    const onZChangeEnd = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        const value = serialize(dragX !== null && dragX !== void 0 ? dragX : percent[0], dragY !== null && dragY !== void 0 ? dragY : percent[1], serializeZ(newVal));
+        if (value !== propStatus.codeValue) {
+            onSave(value).finally(() => {
+                setDragZ(null);
+                onDragEnd();
+            });
+        }
+        else {
+            setDragZ(null);
+            onDragEnd();
+        }
+    }, [
+        dragX,
+        dragY,
+        onDragEnd,
+        onSave,
+        percent,
+        propStatus.codeValue,
+        serialize,
+        serializeZ,
+    ]);
+    const onZTextChange = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        const parsedValue = Number(newVal);
+        if (!Number.isNaN(parsedValue)) {
+            const value = serialize(dragX !== null && dragX !== void 0 ? dragX : percent[0], dragY !== null && dragY !== void 0 ? dragY : percent[1], serializeZ(parsedValue));
+            if (value !== propStatus.codeValue) {
+                setDragZ(parsedValue);
+                onSave(value).finally(() => setDragZ(null));
+            }
+        }
+    }, [
+        dragX,
+        dragY,
+        onSave,
+        percent,
+        propStatus.codeValue,
+        serialize,
+        serializeZ,
+    ]);
     if (percent === null) {
         return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "unsupported origin" });
     }
     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 : percent[0], 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 }), 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 : percent[1], 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 })
-        ] }));
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : percent[0], 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, "aria-label": "Transform origin 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 : percent[1], 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, "aria-label": "Transform origin 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 : parsedZ === null || parsedZ === void 0 ? void 0 : parsedZ.value) !== 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: (value) => {
+                            var _a;
+                            return `${value}${(_a = parsedZ === null || parsedZ === void 0 ? void 0 : parsedZ.unit) !== null && _a !== void 0 ? _a : 'px'}`;
+                        }, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, "aria-label": "Transform origin Z" })
+                ] })) : null] }));
 };
 exports.TimelineTransformOriginField = TimelineTransformOriginField;