@remotion/studio 4.0.509 → 4.0.510

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -357,7 +357,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 ...style,
             }, children: fieldValue }));
     }
-    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, children: fieldValue }) }));
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, isFieldRow: true, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, keyframeControls: keyframeControls, children: fieldValue }) }));
     return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineSequencePropItem = TimelineSequencePropItem;

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

@@ -32,7 +32,9 @@ export type TimelineSequenceFromDragTarget = {
     readonly sequenceKeyframes: TimelineSequenceKeyframeDragTarget[];
 };
 type TimelineSequenceKeyframeDragTarget = {
+    readonly fileName: string;
     readonly fieldKey: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
     readonly status: CanUpdateSequencePropStatusKeyframed;
 };

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -70,7 +70,15 @@ const getKeyframedSequenceDragTargets = ({ nodePath, sequence, propStatuses, })
     const sequenceKeyframes = sequenceSchema === undefined
         ? []
         : Object.entries(status.props).flatMap(([fieldKey, propStatus]) => propStatus.status === 'keyframed'
-            ? [{ fieldKey, schema: sequenceSchema, status: propStatus }]
+            ? [
+                {
+                    fileName: nodePath.absolutePath,
+                    fieldKey,
+                    nodePath,
+                    schema: sequenceSchema,
+                    status: propStatus,
+                },
+            ]
             : []);
     const effectKeyframes = status.effects.flatMap((effectStatus) => {
         var _a;
@@ -85,7 +93,9 @@ const getKeyframedSequenceDragTargets = ({ nodePath, sequence, propStatuses, })
             ? [
                 {
                     effectIndex: effectStatus.effectIndex,
+                    fileName: nodePath.absolutePath,
                     fieldKey,
+                    nodePath,
                     schema: effectSchema,
                     status: propStatus,
                 },
@@ -352,16 +362,16 @@ const getTimelineSequenceFromDragKeyframeMoves = ({ targets, deltaFrames, }) =>
     }
     return {
         sequenceKeyframes: targets.flatMap((target) => target.sequenceKeyframes.flatMap((keyframeTarget) => keyframeTarget.status.keyframes.map((keyframe) => ({
-            fileName: target.fileName,
-            nodePath: target.nodePath,
+            fileName: keyframeTarget.fileName,
+            nodePath: keyframeTarget.nodePath,
             fieldKey: keyframeTarget.fieldKey,
             fromFrame: keyframe.frame,
             toFrame: keyframe.frame + deltaFrames,
             schema: keyframeTarget.schema,
         })))),
         effectKeyframes: targets.flatMap((target) => target.effectKeyframes.flatMap((keyframeTarget) => keyframeTarget.status.keyframes.map((keyframe) => ({
-            fileName: target.fileName,
-            nodePath: target.nodePath,
+            fileName: keyframeTarget.fileName,
+            nodePath: keyframeTarget.nodePath,
             effectIndex: keyframeTarget.effectIndex,
             fieldKey: keyframeTarget.fieldKey,
             fromFrame: keyframe.frame,
@@ -510,6 +520,7 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
         : [draggedNodePathInfo];
     const tracks = (0, calculate_timeline_1.calculateTimeline)({ sequences, overrideIdsToNodePaths });
     const targets = new Map();
+    const includedKeyframeNodePaths = new Set();
     for (const nodePathInfo of targetNodePathInfos) {
         const track = findSequenceTrack({ tracks, nodePathInfo });
         const originalSequence = track
@@ -527,11 +538,42 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
         }
         const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
         if (!targets.has(key)) {
-            const { effectKeyframes, sequenceKeyframes } = getKeyframedSequenceDragTargets({
-                nodePath,
-                sequence: originalSequence,
-                propStatuses,
+            const descendants = sequences.filter((candidate) => {
+                var _a;
+                var _b;
+                let parentId = candidate.id;
+                while (parentId !== null) {
+                    if (parentId === originalSequence.id) {
+                        return true;
+                    }
+                    parentId = (_b = (_a = sequences.find((sequence) => sequence.id === parentId)) === null || _a === void 0 ? void 0 : _a.parent) !== null && _b !== void 0 ? _b : null;
+                }
+                return false;
+            });
+            const descendantKeyframes = descendants.flatMap((sequence) => {
+                var _a;
+                const overrideId = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId;
+                const descendantNodePath = overrideId
+                    ? overrideIdsToNodePaths[overrideId]
+                    : undefined;
+                if (descendantNodePath === undefined) {
+                    return [];
+                }
+                const descendantNodePathKey = (0, studio_shared_1.stringifySequenceSubscriptionKey)(descendantNodePath);
+                if (includedKeyframeNodePaths.has(descendantNodePathKey)) {
+                    return [];
+                }
+                includedKeyframeNodePaths.add(descendantNodePathKey);
+                return [
+                    getKeyframedSequenceDragTargets({
+                        nodePath: descendantNodePath,
+                        sequence,
+                        propStatuses,
+                    }),
+                ];
             });
+            const effectKeyframes = descendantKeyframes.flatMap((descendant) => descendant.effectKeyframes);
+            const sequenceKeyframes = descendantKeyframes.flatMap((descendant) => descendant.sequenceKeyframes);
             targets.set(key, {
                 canSnapToTimelineStart: originalSequence.parent === null,
                 effectKeyframes,
@@ -558,9 +600,16 @@ const clearDurationDragOverrides = ({ clearDragOverrides, targets, }) => {
 const clearFromDragOverrides = ({ clearDragOverrides, clearEffectDragOverrides, targets, }) => {
     for (const target of targets) {
         clearDragOverrides(target.nodePath);
-        const effectIndexes = new Set(target.effectKeyframes.map((keyframe) => keyframe.effectIndex));
-        for (const effectIndex of effectIndexes) {
-            clearEffectDragOverrides(target.nodePath, effectIndex);
+        for (const keyframeTarget of target.sequenceKeyframes) {
+            clearDragOverrides(keyframeTarget.nodePath);
+        }
+        const effectIndexes = new Set(target.effectKeyframes.map((keyframe) => `${(0, studio_shared_1.stringifySequenceSubscriptionKey)(keyframe.nodePath)}:${keyframe.effectIndex}`));
+        for (const keyframeTarget of target.effectKeyframes) {
+            const key = `${(0, studio_shared_1.stringifySequenceSubscriptionKey)(keyframeTarget.nodePath)}:${keyframeTarget.effectIndex}`;
+            if (!effectIndexes.delete(key)) {
+                continue;
+            }
+            clearEffectDragOverrides(keyframeTarget.nodePath, keyframeTarget.effectIndex);
         }
     }
 };
@@ -916,7 +965,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
                 });
                 latestRef.current.setDragOverrides(target.nodePath, 'from', remotion_1.Internals.makeStaticDragOverride(nextFrom));
                 for (const keyframeTarget of target.sequenceKeyframes) {
-                    latestRef.current.setDragOverrides(target.nodePath, keyframeTarget.fieldKey, {
+                    latestRef.current.setDragOverrides(keyframeTarget.nodePath, keyframeTarget.fieldKey, {
                         type: 'keyframed',
                         status: shiftKeyframedStatus({
                             status: keyframeTarget.status,
@@ -925,7 +974,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
                     });
                 }
                 for (const keyframeTarget of target.effectKeyframes) {
-                    latestRef.current.setEffectDragOverrides(target.nodePath, keyframeTarget.effectIndex, keyframeTarget.fieldKey, {
+                    latestRef.current.setEffectDragOverrides(keyframeTarget.nodePath, keyframeTarget.effectIndex, keyframeTarget.fieldKey, {
                         type: 'keyframed',
                         status: shiftKeyframedStatus({
                             status: keyframeTarget.status,

package/dist/components/Timeline/TimelineTextContentField.js

@@ -102,6 +102,6 @@ const TimelineTextContentField = ({ effectiveValue, field, nodePath, onDragEnd,
             event.currentTarget.blur();
         }
     }, []);
-    return (jsx_runtime_1.jsx(RemTextarea_1.RemTextarea, { ref: setInputRef, status: "ok", small: true, defaultValue: currentValue, onBlur: commitPending, onChange: onChange, onKeyDownCapture: onKeyDownCapture, style: textAreaStyle }, String((_a = propStatus.codeValue) !== null && _a !== void 0 ? _a : '')));
+    return (jsx_runtime_1.jsx(RemTextarea_1.RemTextarea, { ref: setInputRef, status: "ok", small: true, defaultValue: currentValue, onBlur: commitPending, onChange: onChange, onDoubleClick: (event) => event.stopPropagation(), onKeyDownCapture: onKeyDownCapture, style: textAreaStyle }, String((_a = propStatus.codeValue) !== null && _a !== void 0 ? _a : '')));
 };
 exports.TimelineTextContentField = TimelineTextContentField;

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

@@ -62,6 +62,7 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                     (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
                 });
             },
+            onOpenInGitClient: () => undefined,
             onOpenInTerminal: null,
         })
         : [];

package/dist/components/Timeline/split-selected-timeline-item.d.ts

@@ -8,7 +8,6 @@ export type SplitTimelineSequenceEligibility = {
     canSplit: false;
     reason: string;
 };
-export declare const getTimelineSequenceSplitUnsupportedReason: (componentName: string | null | undefined) => string | null;
 export declare const getTimelineSequenceSplitEligibility: ({ selection, sequence, splitFrame, propStatuses, }: {
     selection: TimelineSelection;
     sequence: TSequence | null;

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

@@ -1,18 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.splitSelectedTimelineItems = exports.shouldHandleTimelineSplitShortcut = exports.shouldHandleTimelineDuplicateShortcut = exports.splitTimelineSequenceFromSource = exports.getTimelineSequenceSplitEligibility = exports.getTimelineSequenceSplitUnsupportedReason = void 0;
+exports.splitSelectedTimelineItems = exports.shouldHandleTimelineSplitShortcut = exports.shouldHandleTimelineDuplicateShortcut = exports.splitTimelineSequenceFromSource = exports.getTimelineSequenceSplitEligibility = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
-const getTimelineSequenceSplitUnsupportedReason = (componentName) => {
-    if (componentName === '<TransitionSeries.Sequence>' ||
-        componentName === '<TransitionSeries.Overlay>') {
-        return `${componentName} cannot be split from source`;
-    }
-    return null;
-};
-exports.getTimelineSequenceSplitUnsupportedReason = getTimelineSequenceSplitUnsupportedReason;
 const staticNumberish = (status) => {
     if (!status) {
         return true;
@@ -21,7 +14,6 @@ const staticNumberish = (status) => {
         (typeof status.codeValue === 'number' || status.codeValue === undefined));
 };
 const getTimelineSequenceSplitEligibility = ({ selection, sequence, splitFrame, propStatuses, }) => {
-    var _a;
     if (selection.type !== 'sequence') {
         return {
             canSplit: false,
@@ -46,11 +38,10 @@ const getTimelineSequenceSplitEligibility = ({ selection, sequence, splitFrame,
             reason: 'Series.Sequence clips cannot be split from source',
         };
     }
-    const unsupportedReason = (0, exports.getTimelineSequenceSplitUnsupportedReason)((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentName);
-    if (unsupportedReason) {
+    if (!(0, studio_shared_1.hasSequenceTimingTraits)(selection.nodePathInfo.sequenceSubscriptionKey.sequenceKeys)) {
         return {
             canSplit: false,
-            reason: unsupportedReason,
+            reason: 'Sequence does not expose timing traits that can be split',
         };
     }
     const { nodePathInfo } = selection;
@@ -101,6 +92,7 @@ const splitTimelineSequenceFromSource = ({ nodePathInfo, splitFrame, }) => {
     return (0, call_api_1.callApi)('/api/split-jsx-sequence', {
         fileName: nodePath.absolutePath,
         nodePath: nodePath.nodePath,
+        sequenceKeys: nodePath.sequenceKeys,
         splitFrame,
     })
         .then((result) => {

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

@@ -33,9 +33,9 @@ exports.timelineFieldValueColumnStyle = {
 };
 exports.timelineCompactStackedFieldValueColumnStyle = {
     ...exports.timelineFieldValueColumnStyle,
-    marginBottom: -2,
+    marginBottom: -3,
     position: 'relative',
-    top: -2,
+    top: -3,
 };
 exports.timelineStackedFieldContentStyle = {
     alignSelf: 'stretch',

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

@@ -11,3 +11,4 @@ export declare const formatTimelineNumber: ({ decimalPlaces, fixed, value, }: {
 }) => string;
 export declare const normalizeTimelineNumber: (value: number) => number;
 export declare const draggerStyle: React.CSSProperties;
+export declare const leftAlignedDraggerStyle: React.CSSProperties;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.draggerStyle = exports.normalizeTimelineNumber = exports.formatTimelineNumber = exports.roundToDecimalPlaces = exports.getTimelineDisplayDecimalPlaces = exports.getDecimalPlaces = void 0;
+exports.leftAlignedDraggerStyle = exports.draggerStyle = exports.normalizeTimelineNumber = exports.formatTimelineNumber = exports.roundToDecimalPlaces = exports.getTimelineDisplayDecimalPlaces = exports.getDecimalPlaces = void 0;
 const getDecimalPlaces = (num) => {
     const [coefficient, exponent] = String(num).toLowerCase().split('e');
     const decimalIndex = coefficient.indexOf('.');
@@ -35,3 +35,8 @@ exports.normalizeTimelineNumber = normalizeTimelineNumber;
 exports.draggerStyle = {
     width: 80,
 };
+exports.leftAlignedDraggerStyle = {
+    paddingBottom: 2,
+    paddingLeft: 0,
+    paddingTop: 2,
+};

package/dist/components/UndoRedoButtons.js

@@ -69,6 +69,8 @@ const UndoRedoButtons = () => {
         });
     }, []);
     (0, react_1.useEffect)(() => {
+        // Visual controls such as the color picker commit edits while their popup
+        // remains open. Keep undo and redo available in that higher z-index context.
         const undo = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'z',
@@ -83,7 +85,7 @@ const UndoRedoButtons = () => {
             },
             preventDefault: true,
             triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
+            keepRegisteredWhenNotHighestContext: true,
         });
         const redoWithShiftZ = keybindings.registerKeybinding({
             event: 'keydown',
@@ -99,7 +101,7 @@ const UndoRedoButtons = () => {
             },
             preventDefault: true,
             triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
+            keepRegisteredWhenNotHighestContext: true,
         });
         const redoWithY = is_mac_1.isMac
             ? null
@@ -114,7 +116,7 @@ const UndoRedoButtons = () => {
                 },
                 preventDefault: true,
                 triggerIfInputFieldFocused: false,
-                keepRegisteredWhenNotHighestContext: false,
+                keepRegisteredWhenNotHighestContext: true,
             });
         return () => {
             undo.unregister();

package/dist/components/get-open-in-menu-items.d.ts

@@ -2,7 +2,7 @@ import type { TerminalId } from '@remotion/studio-shared';
 import type { EditorPickerId, GetDefaultCodingAgentInfoResponse, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
 import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const getOpenInMenuItems: ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, fileManagerDisabled, folder, location, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInTerminal, }: {
+export declare const getOpenInMenuItems: ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, fileManagerDisabled, folder, location, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInGitClient, onOpenInTerminal, }: {
     readonly codingAgentInfo: GetDefaultCodingAgentInfoResponse | null;
     readonly editorDisabled: boolean;
     readonly editorInfo: GetDefaultEditorInfoResponse | null;
@@ -15,5 +15,6 @@ export declare const getOpenInMenuItems: ({ codingAgentInfo, editorDisabled, edi
     readonly onOpenInCodingAgent: (codingAgentId: "claude-code" | "codex" | "copilot" | "cursor", codingAgentName: string) => void;
     readonly onOpenInEditor: (editorId: EditorPickerId) => void;
     readonly onOpenInFileExplorer: () => void;
+    readonly onOpenInGitClient: (gitClientId: "github-desktop") => void;
     readonly onOpenInTerminal: ((terminalId: TerminalId) => void) | null;
 }) => ComboboxValue[];

package/dist/components/get-open-in-menu-items.js

@@ -7,6 +7,7 @@ const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
 const get_git_menu_item_1 = require("../helpers/get-git-menu-item");
 const editor_1 = require("../icons/editor");
 const finder_1 = require("../icons/finder");
+const git_client_1 = require("../icons/git-client");
 const github_1 = require("../icons/github");
 const terminal_1 = require("../icons/terminal");
 const CodingAgentIcon_1 = require("./CodingAgentIcon");
@@ -16,8 +17,8 @@ const menuLabel = {
     fontSize: 13,
     lineHeight: '16px',
 };
-const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, fileManagerDisabled, folder, location, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInTerminal, }) => {
-    var _a, _b, _c;
+const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, fileManagerDisabled, folder, location, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInGitClient, onOpenInTerminal, }) => {
+    var _a, _b, _c, _d;
     const showFinder = window.remotion_fileSystemPlatform === 'darwin';
     const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
     const editors = ((_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _a !== void 0 ? _a : [])
@@ -52,6 +53,7 @@ const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, exclu
         value: `coding-agent-${codingAgent.id}`,
     }));
     const terminals = folder ? ((_c = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedTerminals) !== null && _c !== void 0 ? _c : []) : [];
+    const gitClients = folder ? ((_d = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedGitClients) !== null && _d !== void 0 ? _d : []) : [];
     const gitHubItem = window.remotion_gitSource
         ? {
             id: 'open-in-github',
@@ -94,7 +96,10 @@ const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, exclu
             }
             : null,
     ].filter(no_react_1.NoReactInternals.truthy);
-    const hasCategorizedApps = editors.length > 0 || codingAgents.length > 0 || terminals.length > 0;
+    const hasCategorizedApps = editors.length > 0 ||
+        codingAgents.length > 0 ||
+        terminals.length > 0 ||
+        gitClients.length > 0;
     return [
         ...(editors.length > 0
             ? [
@@ -136,6 +141,26 @@ const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, exclu
                 })),
             ]
             : []),
+        ...(gitClients.length > 0
+            ? [
+                {
+                    type: 'section-header',
+                    id: 'git-client-header',
+                    label: 'Git Client',
+                },
+                ...gitClients.map((gitClient) => ({
+                    id: `open-in-git-client-${gitClient.id}`,
+                    keyHint: null,
+                    label: jsx_runtime_1.jsx("span", { style: menuLabel, children: gitClient.name }),
+                    leftItem: jsx_runtime_1.jsx(git_client_1.GitClientIcon, { gitClientId: gitClient.id, size: 18 }),
+                    onClick: () => onOpenInGitClient(gitClient.id),
+                    quickSwitcherLabel: null,
+                    subMenu: null,
+                    type: 'item',
+                    value: `git-client-${gitClient.id}`,
+                })),
+            ]
+            : []),
         ...(systemApps.length > 0
             ? [
                 ...(hasCategorizedApps