@remotion/studio 4.0.471 → 4.0.473

package/dist/components/Timeline/TimelineUvCoordinateField.js

@@ -57,8 +57,7 @@ const TimelineUvCoordinateField = ({ field, propStatus, effectiveValue, onSave,
     const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
         const newTuple = [newVal, currentY];
-        if (propStatus.canUpdate &&
-            !tuplesEqual(propStatus.codeValue, newTuple)) {
+        if (!tuplesEqual(propStatus.codeValue, newTuple)) {
             onSave(newTuple).finally(() => {
                 setDragX(null);
                 onDragEnd();
@@ -70,17 +69,15 @@ const TimelineUvCoordinateField = ({ field, propStatus, effectiveValue, onSave,
         }
     }, [dragY, codeY, propStatus, onSave, onDragEnd]);
     const onXTextChange = (0, react_1.useCallback)((newVal) => {
-        if (propStatus.canUpdate) {
-            const parsed = Number(newVal);
-            if (!Number.isNaN(parsed)) {
-                const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-                const newTuple = [parsed, currentY];
-                if (!tuplesEqual(propStatus.codeValue, newTuple)) {
-                    setDragX(parsed);
-                    onSave(newTuple).finally(() => {
-                        setDragX(null);
-                    });
-                }
+        const parsed = Number(newVal);
+        if (!Number.isNaN(parsed)) {
+            const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
+            const newTuple = [parsed, currentY];
+            if (!tuplesEqual(propStatus.codeValue, newTuple)) {
+                setDragX(parsed);
+                onSave(newTuple).finally(() => {
+                    setDragX(null);
+                });
             }
         }
     }, [propStatus, dragY, codeY, onSave]);
@@ -92,8 +89,7 @@ const TimelineUvCoordinateField = ({ field, propStatus, effectiveValue, onSave,
     const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
         const newTuple = [currentX, newVal];
-        if (propStatus.canUpdate &&
-            !tuplesEqual(propStatus.codeValue, newTuple)) {
+        if (!tuplesEqual(propStatus.codeValue, newTuple)) {
             onSave(newTuple).finally(() => {
                 setDragY(null);
                 onDragEnd();
@@ -105,17 +101,15 @@ const TimelineUvCoordinateField = ({ field, propStatus, effectiveValue, onSave,
         }
     }, [dragX, codeX, propStatus, onSave, onDragEnd]);
     const onYTextChange = (0, react_1.useCallback)((newVal) => {
-        if (propStatus.canUpdate) {
-            const parsed = Number(newVal);
-            if (!Number.isNaN(parsed)) {
-                const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-                const newTuple = [currentX, parsed];
-                if (!tuplesEqual(propStatus.codeValue, newTuple)) {
-                    setDragY(parsed);
-                    onSave(newTuple).finally(() => {
-                        setDragY(null);
-                    });
-                }
+        const parsed = Number(newVal);
+        if (!Number.isNaN(parsed)) {
+            const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
+            const newTuple = [currentX, parsed];
+            if (!tuplesEqual(propStatus.codeValue, newTuple)) {
+                setDragY(parsed);
+                onSave(newTuple).finally(() => {
+                    setDragY(null);
+                });
             }
         }
     }, [propStatus, onSave, dragX, codeX]);

package/dist/components/Timeline/apply-effect-response-to-code-values.d.ts

@@ -0,0 +1,5 @@
+import type { CanUpdateEffectPropsResponse, CanUpdateSequencePropsResponse } from 'remotion';
+export declare const applyEffectResponseToCodeValues: ({ previous, response, }: {
+    previous: CanUpdateSequencePropsResponse;
+    response: CanUpdateEffectPropsResponse;
+}) => CanUpdateSequencePropsResponse;

package/dist/components/Timeline/apply-effect-response-to-code-values.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyEffectResponseToCodeValues = void 0;
+const applyEffectResponseToCodeValues = ({ previous, response, }) => {
+    if (!previous.canUpdate) {
+        return previous;
+    }
+    const targetIndex = previous.effects.findIndex((effect) => effect.effectIndex === response.effectIndex);
+    if (targetIndex === -1) {
+        return previous;
+    }
+    const effects = [...previous.effects];
+    effects[targetIndex] = response;
+    return {
+        ...previous,
+        effects,
+    };
+};
+exports.applyEffectResponseToCodeValues = applyEffectResponseToCodeValues;

package/dist/components/Timeline/call-add-keyframe.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.callAddEffectKeyframe = exports.callAddSequenceKeyframe = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
+const apply_effect_response_to_code_values_1 = require("./apply-effect-response-to-code-values");
 const save_prop_queue_1 = require("./save-prop-queue");
 const callAddSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame, value, schema, setCodeValues, clientId, }) => {
     return (0, save_prop_queue_1.enqueueSavePropChange)({
@@ -13,6 +14,7 @@ const callAddSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame, va
             fieldKey,
             frame: sourceFrame,
             value,
+            schema,
         }),
         apiCall: () => (0, call_api_1.callApi)('/api/add-sequence-keyframe', {
             fileName,
@@ -37,7 +39,9 @@ const callAddEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, sour
             fieldKey,
             frame: sourceFrame,
             value,
+            schema,
         }),
+        applyServerResponse: (prev, response) => (0, apply_effect_response_to_code_values_1.applyEffectResponseToCodeValues)({ previous: prev, response }),
         apiCall: () => (0, call_api_1.callApi)('/api/add-effect-keyframe', {
             fileName,
             sequenceNodePath: nodePath,

package/dist/components/Timeline/call-move-keyframe.d.ts

@@ -0,0 +1,19 @@
+import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SetCodeValues } from './save-sequence-prop';
+export type MoveSequenceKeyframeChange = {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    fieldKey: string;
+    fromFrame: number;
+    toFrame: number;
+    schema: SequenceSchema;
+};
+export type MoveEffectKeyframeChange = MoveSequenceKeyframeChange & {
+    effectIndex: number;
+};
+export declare const callMoveKeyframes: ({ sequenceKeyframes, effectKeyframes, setCodeValues, clientId, }: {
+    sequenceKeyframes: MoveSequenceKeyframeChange[];
+    effectKeyframes: MoveEffectKeyframeChange[];
+    setCodeValues: SetCodeValues;
+    clientId: string;
+}) => Promise<void>;

package/dist/components/Timeline/call-move-keyframe.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.callMoveKeyframes = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const call_api_1 = require("../call-api");
+const groupByNodePath = (keyframes) => {
+    var _a;
+    const groups = new Map();
+    for (const keyframe of keyframes) {
+        const key = JSON.stringify(keyframe.nodePath);
+        const group = (_a = groups.get(key)) !== null && _a !== void 0 ? _a : [];
+        group.push(keyframe);
+        groups.set(key, group);
+    }
+    return [...groups.values()];
+};
+const callMoveKeyframes = ({ sequenceKeyframes, effectKeyframes, setCodeValues, clientId, }) => {
+    if (sequenceKeyframes.length === 0 && effectKeyframes.length === 0) {
+        return Promise.resolve();
+    }
+    for (const keyframes of groupByNodePath(sequenceKeyframes)) {
+        const [firstKeyframe] = keyframes;
+        if (!firstKeyframe) {
+            continue;
+        }
+        setCodeValues(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticMoveSequenceKeyframes)({
+            previous: prev,
+            keyframes: keyframes.map((keyframe) => ({
+                fieldKey: keyframe.fieldKey,
+                fromFrame: keyframe.fromFrame,
+                toFrame: keyframe.toFrame,
+            })),
+        }));
+    }
+    for (const keyframes of groupByNodePath(effectKeyframes)) {
+        const [firstKeyframe] = keyframes;
+        if (!firstKeyframe) {
+            continue;
+        }
+        setCodeValues(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticMoveEffectKeyframes)({
+            previous: prev,
+            keyframes: keyframes.map((keyframe) => ({
+                effectIndex: keyframe.effectIndex,
+                fieldKey: keyframe.fieldKey,
+                fromFrame: keyframe.fromFrame,
+                toFrame: keyframe.toFrame,
+            })),
+        }));
+    }
+    return (0, call_api_1.callApi)('/api/move-keyframes', {
+        sequenceKeyframes: sequenceKeyframes.map((keyframe) => ({
+            fileName: keyframe.fileName,
+            nodePath: keyframe.nodePath,
+            key: keyframe.fieldKey,
+            fromFrame: keyframe.fromFrame,
+            toFrame: keyframe.toFrame,
+            schema: keyframe.schema,
+        })),
+        effectKeyframes: effectKeyframes.map((keyframe) => ({
+            fileName: keyframe.fileName,
+            sequenceNodePath: keyframe.nodePath,
+            effectIndex: keyframe.effectIndex,
+            key: keyframe.fieldKey,
+            fromFrame: keyframe.fromFrame,
+            toFrame: keyframe.toFrame,
+            schema: keyframe.schema,
+        })),
+        clientId,
+    }).then(() => undefined);
+};
+exports.callMoveKeyframes = callMoveKeyframes;

package/dist/components/Timeline/call-update-keyframe-settings.d.ts

@@ -0,0 +1,22 @@
+import { type KeyframeSettings } from '@remotion/studio-shared';
+import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SetCodeValues } from './save-sequence-prop';
+export declare const callUpdateSequenceKeyframeSettings: ({ fileName, nodePath, fieldKey, settings, schema, setCodeValues, clientId, }: {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    fieldKey: string;
+    settings: KeyframeSettings;
+    schema: SequenceSchema;
+    setCodeValues: SetCodeValues;
+    clientId: string;
+}) => Promise<void>;
+export declare const callUpdateEffectKeyframeSettings: ({ fileName, nodePath, effectIndex, fieldKey, settings, schema, setCodeValues, clientId, }: {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    effectIndex: number;
+    fieldKey: string;
+    settings: KeyframeSettings;
+    schema: SequenceSchema;
+    setCodeValues: SetCodeValues;
+    clientId: string;
+}) => Promise<void>;

package/dist/components/Timeline/call-update-keyframe-settings.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.callUpdateEffectKeyframeSettings = exports.callUpdateSequenceKeyframeSettings = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const call_api_1 = require("../call-api");
+const apply_effect_response_to_code_values_1 = require("./apply-effect-response-to-code-values");
+const save_prop_queue_1 = require("./save-prop-queue");
+const callUpdateSequenceKeyframeSettings = ({ fileName, nodePath, fieldKey, settings, schema, setCodeValues, clientId, }) => {
+    return (0, save_prop_queue_1.enqueueSavePropChange)({
+        nodePath,
+        setCodeValues,
+        applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateSequenceKeyframeSettings)({
+            previous: prev,
+            fieldKey,
+            settings,
+        }),
+        apiCall: () => (0, call_api_1.callApi)('/api/update-sequence-keyframe-settings', {
+            fileName,
+            nodePath,
+            key: fieldKey,
+            settings,
+            schema,
+            clientId,
+        }),
+        errorLabel: 'Could not update keyframe settings',
+    });
+};
+exports.callUpdateSequenceKeyframeSettings = callUpdateSequenceKeyframeSettings;
+const callUpdateEffectKeyframeSettings = ({ fileName, nodePath, effectIndex, fieldKey, settings, schema, setCodeValues, clientId, }) => {
+    return (0, save_prop_queue_1.enqueueSavePropChange)({
+        nodePath,
+        setCodeValues,
+        applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateEffectKeyframeSettings)({
+            previous: prev,
+            effectIndex,
+            fieldKey,
+            settings,
+        }),
+        applyServerResponse: (prev, response) => (0, apply_effect_response_to_code_values_1.applyEffectResponseToCodeValues)({ previous: prev, response }),
+        apiCall: () => (0, call_api_1.callApi)('/api/update-effect-keyframe-settings', {
+            fileName,
+            sequenceNodePath: nodePath,
+            effectIndex,
+            key: fieldKey,
+            settings,
+            schema,
+            clientId,
+        }),
+        errorLabel: 'Could not update keyframe settings',
+    });
+};
+exports.callUpdateEffectKeyframeSettings = callUpdateEffectKeyframeSettings;

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

@@ -1,17 +1,20 @@
 import type { OverrideIdToNodePaths, TSequence } from 'remotion';
+import type { ConfirmationDialogFunction } from '../ConfirmationDialog-types';
 import type { SetCodeValues } from './save-sequence-prop';
 import type { TimelineSelection } from './TimelineSelection';
-export declare const deleteSelectedTimelineItem: ({ selection, sequences, overrideIdsToNodePaths, setCodeValues, clientId, }: {
+export declare const deleteSelectedTimelineItem: ({ selection, sequences, overrideIdsToNodePaths, setCodeValues, clientId, confirm, }: {
     selection: TimelineSelection;
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     setCodeValues: SetCodeValues;
     clientId: string;
-}) => Promise<void> | null;
-export declare const deleteSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, setCodeValues, clientId, }: {
+    confirm: ConfirmationDialogFunction;
+}) => Promise<boolean> | null;
+export declare const deleteSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, setCodeValues, clientId, confirm, }: {
     selections: readonly TimelineSelection[];
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     setCodeValues: SetCodeValues;
     clientId: string;
-}) => Promise<void> | null;
+    confirm: ConfirmationDialogFunction;
+}) => Promise<boolean> | null;

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

@@ -4,27 +4,31 @@ exports.deleteSelectedTimelineItems = exports.deleteSelectedTimelineItem = void
 const call_api_1 = require("../call-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const delete_selected_keyframe_1 = require("./delete-selected-keyframe");
-const confirmDeletingDuplicatedSequences = (nodePathInfos) => {
+const confirmDeletingDuplicatedSequences = (nodePathInfos, confirm) => {
     const duplicatedNodePathInfos = nodePathInfos.filter((nodePathInfo) => nodePathInfo.numberOfSequencesWithThisNodePath > 1);
     if (duplicatedNodePathInfos.length === 0) {
-        return true;
+        return Promise.resolve(true);
     }
     if (duplicatedNodePathInfos.length === 1) {
         const [nodePathInfo] = duplicatedNodePathInfos;
-        const singleDuplicatedSequenceMessage = 'This sequence is programmatically duplicated ' +
-            nodePathInfo.numberOfSequencesWithThisNodePath +
-            ' times in the code. Deleting removes all instances. Continue?';
-        // eslint-disable-next-line no-alert -- native confirm before deleting all instances of a duplicated sequence
-        return window.confirm(singleDuplicatedSequenceMessage);
+        return confirm({
+            title: 'Delete sequence?',
+            message: 'This sequence is programmatically duplicated ' +
+                nodePathInfo.numberOfSequencesWithThisNodePath +
+                ' times in the code. Deleting removes all instances. Continue?',
+            confirmLabel: 'Delete',
+        });
     }
-    const multipleDuplicatedSequencesMessage = duplicatedNodePathInfos.length +
-        ' selected sequences are programmatically duplicated in the code. Deleting removes all instances. Continue?';
-    // eslint-disable-next-line no-alert -- native confirm before deleting all instances of duplicated sequences
-    return window.confirm(multipleDuplicatedSequencesMessage);
+    return confirm({
+        title: 'Delete sequences?',
+        message: duplicatedNodePathInfos.length +
+            ' selected sequences are programmatically duplicated in the code. Deleting removes all instances. Continue?',
+        confirmLabel: 'Delete',
+    });
 };
-const deleteSequences = (nodePathInfos) => {
-    if (!confirmDeletingDuplicatedSequences(nodePathInfos)) {
-        return Promise.resolve();
+const deleteSequences = async (nodePathInfos, confirm) => {
+    if (!(await confirmDeletingDuplicatedSequences(nodePathInfos, confirm))) {
+        return false;
     }
     return (0, call_api_1.callApi)('/api/delete-jsx-node', {
         nodes: nodePathInfos.map((nodePathInfo) => {
@@ -44,14 +48,16 @@ const deleteSequences = (nodePathInfos) => {
         else {
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);
         }
+        return true;
     })
         .catch((err) => {
         (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        return true;
     });
 };
 const deleteEffects = (effects) => {
     if (effects.length === 0) {
-        return Promise.resolve();
+        return Promise.resolve(false);
     }
     return (0, call_api_1.callApi)('/api/delete-effect', effects.map((effect) => {
         const nodePath = effect.nodePathInfo.sequenceSubscriptionKey;
@@ -80,14 +86,17 @@ const deleteEffects = (effects) => {
         else {
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);
         }
+        return true;
     })
         .catch((err) => {
         (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        return true;
     });
 };
-const deleteSelectedTimelineItem = ({ selection, sequences, overrideIdsToNodePaths, setCodeValues, clientId, }) => {
+const deleteSelectedTimelineItem = ({ selection, sequences, overrideIdsToNodePaths, setCodeValues, clientId, confirm, }) => {
+    var _a;
     if (selection.type === 'keyframe') {
-        return (0, delete_selected_keyframe_1.deleteSelectedKeyframe)({
+        const promise = (0, delete_selected_keyframe_1.deleteSelectedKeyframe)({
             nodePathInfo: selection.nodePathInfo,
             frame: selection.frame,
             sequences,
@@ -95,10 +104,11 @@ const deleteSelectedTimelineItem = ({ selection, sequences, overrideIdsToNodePat
             setCodeValues,
             clientId,
         });
+        return (_a = promise === null || promise === void 0 ? void 0 : promise.then(() => true)) !== null && _a !== void 0 ? _a : null;
     }
     switch (selection.type) {
         case 'sequence':
-            return deleteSequences([selection.nodePathInfo]);
+            return deleteSequences([selection.nodePathInfo], confirm);
         case 'sequence-effect':
             return deleteEffects([
                 {
@@ -134,7 +144,8 @@ const assertTimelineSelectionsHaveSameType = (selections) => {
         }
     }
 };
-const deleteSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodePaths, setCodeValues, clientId, }) => {
+const deleteSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodePaths, setCodeValues, clientId, confirm, }) => {
+    var _a;
     const firstSelection = selections[0];
     if (!firstSelection) {
         return null;
@@ -144,7 +155,7 @@ const deleteSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodeP
         case 'sequence':
             return deleteSequences(selections
                 .filter(isSequenceRowSelection)
-                .map((selection) => selection.nodePathInfo));
+                .map((selection) => selection.nodePathInfo), confirm);
         case 'sequence-effect':
             return deleteEffects(selections.filter(isSequenceEffectSelection).map((selection) => ({
                 type: 'single-effect',
@@ -152,7 +163,7 @@ const deleteSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodeP
                 effectIndex: selection.i,
             })));
         case 'keyframe': {
-            return (0, delete_selected_keyframe_1.deleteSelectedKeyframes)({
+            const promise = (0, delete_selected_keyframe_1.deleteSelectedKeyframes)({
                 keyframes: selections.filter(isKeyframeSelection).map((selection) => ({
                     nodePathInfo: selection.nodePathInfo,
                     frame: selection.frame,
@@ -162,6 +173,7 @@ const deleteSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodeP
                 setCodeValues,
                 clientId,
             });
+            return (_a = promise === null || promise === void 0 ? void 0 : promise.then(() => true)) !== null && _a !== void 0 ? _a : null;
         }
         case 'sequence-prop':
         case 'sequence-effect-prop':

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

@@ -1,6 +1,7 @@
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import type { ConfirmationDialogFunction } from '../ConfirmationDialog-types';
 import type { TimelineSelection } from './TimelineSelection';
-export declare const duplicateSequencesFromSource: (nodePathInfos: readonly SequenceNodePathInfo[]) => Promise<void>;
+export declare const duplicateSequencesFromSource: (nodePathInfos: readonly SequenceNodePathInfo[], confirm: ConfirmationDialogFunction) => Promise<void>;
 export declare const isDuplicatableSequenceRowSelection: (selection: TimelineSelection) => selection is {
     readonly nodePathInfo: SequenceNodePathInfo;
 } & {
@@ -8,6 +9,7 @@ export declare const isDuplicatableSequenceRowSelection: (selection: TimelineSel
 } & {
     type: "sequence";
 };
-export declare const duplicateSelectedTimelineItems: ({ selections, }: {
+export declare const duplicateSelectedTimelineItems: ({ selections, confirm, }: {
     selections: readonly TimelineSelection[];
+    confirm: ConfirmationDialogFunction;
 }) => Promise<void> | null;

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

@@ -3,22 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.duplicateSelectedTimelineItems = exports.isDuplicatableSequenceRowSelection = exports.duplicateSequencesFromSource = void 0;
 const call_api_1 = require("../call-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const confirmDuplicatingProgrammaticallyDuplicatedSequences = (nodePathInfos) => {
+const confirmDuplicatingProgrammaticallyDuplicatedSequences = (nodePathInfos, confirm) => {
     if (nodePathInfos.length === 0) {
-        return true;
+        return Promise.resolve(true);
     }
     if (nodePathInfos.length === 1) {
         const [nodePathInfo] = nodePathInfos;
-        const singleDuplicatedSequenceMessage = 'This sequence is programmatically duplicated ' +
-            nodePathInfo.numberOfSequencesWithThisNodePath +
-            ' times in the code. Duplicating inserts another copy. Continue?';
-        // eslint-disable-next-line no-alert -- native confirm before applying duplicate codemod in .map callbacks
-        return window.confirm(singleDuplicatedSequenceMessage);
+        return confirm({
+            title: 'Duplicate sequence?',
+            message: 'This sequence is programmatically duplicated ' +
+                nodePathInfo.numberOfSequencesWithThisNodePath +
+                ' times in the code. Duplicating inserts another copy. Continue?',
+            confirmLabel: 'Duplicate',
+        });
     }
-    const multipleDuplicatedSequencesMessage = nodePathInfos.length +
-        ' selected sequences are programmatically duplicated in the code. Duplicating inserts another copy of each. Continue?';
-    // eslint-disable-next-line no-alert -- native confirm before applying duplicate codemod in .map callbacks
-    return window.confirm(multipleDuplicatedSequencesMessage);
+    return confirm({
+        title: 'Duplicate sequences?',
+        message: nodePathInfos.length +
+            ' selected sequences are programmatically duplicated in the code. Duplicating inserts another copy of each. Continue?',
+        confirmLabel: 'Duplicate',
+    });
 };
 const duplicateSequence = (nodePathInfo) => {
     const nodePath = nodePathInfo.sequenceSubscriptionKey;
@@ -27,40 +31,41 @@ const duplicateSequence = (nodePathInfo) => {
         nodePath: nodePath.nodePath,
     });
 };
-const duplicateSequencesFromSource = (nodePathInfos) => {
+const duplicateSequencesFromSource = (nodePathInfos, confirm) => {
     const programmaticallyDuplicated = nodePathInfos.filter((nodePathInfo) => nodePathInfo.numberOfSequencesWithThisNodePath > 1);
     const regular = nodePathInfos.filter((nodePathInfo) => nodePathInfo.numberOfSequencesWithThisNodePath <= 1);
-    const toDuplicate = [...regular];
-    if (programmaticallyDuplicated.length === 0 ||
-        confirmDuplicatingProgrammaticallyDuplicatedSequences(programmaticallyDuplicated)) {
-        toDuplicate.push(...programmaticallyDuplicated);
-    }
-    if (toDuplicate.length === 0) {
-        return Promise.resolve();
-    }
-    return Promise.all(toDuplicate.map(duplicateSequence))
-        .then((results) => {
-        const failedResult = results.find((result) => !result.success);
-        if (failedResult && !failedResult.success) {
-            (0, NotificationCenter_1.showNotification)(failedResult.reason, 4000);
-            return;
+    return confirmDuplicatingProgrammaticallyDuplicatedSequences(programmaticallyDuplicated, confirm).then((shouldDuplicateProgrammaticSequences) => {
+        const toDuplicate = [...regular];
+        if (shouldDuplicateProgrammaticSequences) {
+            toDuplicate.push(...programmaticallyDuplicated);
+        }
+        if (toDuplicate.length === 0) {
+            return Promise.resolve();
         }
-        (0, NotificationCenter_1.showNotification)(toDuplicate.length === 1
-            ? 'Duplicated sequence in source file'
-            : 'Duplicated sequences in source files', 2000);
-    })
-        .catch((err) => {
-        (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        return Promise.all(toDuplicate.map(duplicateSequence))
+            .then((results) => {
+            const failedResult = results.find((result) => !result.success);
+            if (failedResult && !failedResult.success) {
+                (0, NotificationCenter_1.showNotification)(failedResult.reason, 4000);
+                return;
+            }
+            (0, NotificationCenter_1.showNotification)(toDuplicate.length === 1
+                ? 'Duplicated sequence in source file'
+                : 'Duplicated sequences in source files', 2000);
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        });
     });
 };
 exports.duplicateSequencesFromSource = duplicateSequencesFromSource;
 const isDuplicatableSequenceRowSelection = (selection) => selection.type === 'sequence';
 exports.isDuplicatableSequenceRowSelection = isDuplicatableSequenceRowSelection;
-const duplicateSelectedTimelineItems = ({ selections, }) => {
+const duplicateSelectedTimelineItems = ({ selections, confirm, }) => {
     const sequenceSelections = selections.filter(exports.isDuplicatableSequenceRowSelection);
     if (sequenceSelections.length === 0) {
         return null;
     }
-    return (0, exports.duplicateSequencesFromSource)(sequenceSelections.map((selection) => selection.nodePathInfo));
+    return (0, exports.duplicateSequencesFromSource)(sequenceSelections.map((selection) => selection.nodePathInfo), confirm);
 };
 exports.duplicateSelectedTimelineItems = duplicateSelectedTimelineItems;

package/dist/components/Timeline/get-bounded-keyframe-drag-delta.d.ts

@@ -0,0 +1,8 @@
+export type TimelineKeyframeDragBoundsTarget = {
+    readonly displayFrame: number;
+};
+export declare const getBoundedKeyframeDragDelta: ({ delta, durationInFrames, targets, }: {
+    readonly delta: number;
+    readonly durationInFrames: number;
+    readonly targets: readonly TimelineKeyframeDragBoundsTarget[];
+}) => number;

package/dist/components/Timeline/get-bounded-keyframe-drag-delta.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBoundedKeyframeDragDelta = void 0;
+const getBoundedKeyframeDragDelta = ({ delta, durationInFrames, targets, }) => {
+    if (targets.length === 0 || durationInFrames <= 0) {
+        return 0;
+    }
+    const minDelta = Math.max(...targets.map((target) => -target.displayFrame));
+    const maxDelta = Math.min(...targets.map((target) => durationInFrames - 1 - target.displayFrame));
+    return Math.min(Math.max(delta, minDelta), maxDelta);
+};
+exports.getBoundedKeyframeDragDelta = getBoundedKeyframeDragDelta;

package/dist/components/Timeline/get-keyframe-navigation.d.ts

@@ -1,9 +1,9 @@
 export declare const getPreviousKeyframeDisplayFrame: (keyframes: readonly {
     frame: number;
-}[], currentDisplayFrame: number) => number | null;
+}[], currentDisplayFrame: number, durationInFrames: number) => number | null;
 export declare const getNextKeyframeDisplayFrame: (keyframes: readonly {
     frame: number;
-}[], currentDisplayFrame: number) => number | null;
+}[], currentDisplayFrame: number, durationInFrames: number) => number | null;
 export declare const hasKeyframeAtSourceFrame: (keyframes: readonly {
     frame: number;
 }[], sourceFrame: number) => boolean;