@remotion/studio 4.0.493 → 4.0.494

package/dist/esm/previewEntry.mjs

@@ -24,7 +24,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 
 // src/previewEntry.tsx
 import ReactDOM12 from "react-dom/client";
-import { Internals as Internals122 } from "remotion";
+import { Internals as Internals123 } from "remotion";
 import { NoReactInternals as NoReactInternals32 } from "remotion/no-react";
 
 // src/components/NoRegisterRoot.tsx
@@ -258,7 +258,7 @@ var getRoute = () => {
 };
 
 // src/error-overlay/react-overlay/index.ts
-import { Internals as Internals84 } from "remotion";
+import { Internals as Internals85 } from "remotion";
 
 // src/error-overlay/error-origin.ts
 var errorsLoggedByServer = new WeakSet;
@@ -5603,7 +5603,7 @@ var InlineAction = ({
 
 // src/components/TopPanel.tsx
 import React185, { useCallback as useCallback155, useContext as useContext103, useEffect as useEffect78, useMemo as useMemo160 } from "react";
-import { Internals as Internals82 } from "remotion";
+import { Internals as Internals83 } from "remotion";
 
 // src/helpers/use-breakpoint.ts
 import { useEffect as useEffect16, useRef as useRef11, useState as useState17 } from "react";
@@ -5627,7 +5627,7 @@ function useBreakpoint(breakpoint2) {
 
 // src/components/CanvasIfSizeIsAvailable.tsx
 import { useContext as useContext35, useMemo as useMemo53 } from "react";
-import { Internals as Internals39 } from "remotion";
+import { Internals as Internals40 } from "remotion";
 
 // src/helpers/ruler-canvas-size.ts
 var applyRulerInsetsToCanvasSize = ({
@@ -5648,7 +5648,7 @@ var applyRulerInsetsToCanvasSize = ({
 
 // src/components/CanvasOrLoading.tsx
 import { useContext as useContext34, useEffect as useEffect43 } from "react";
-import { Internals as Internals38 } from "remotion";
+import { Internals as Internals39 } from "remotion";
 
 // src/error-overlay/remotion-overlay/ErrorLoader.tsx
 import { getLocationFromBuildError as getLocationFromBuildError3 } from "@remotion/studio-shared";
@@ -7756,7 +7756,7 @@ import {
   useRef as useRef30,
   useState as useState39
 } from "react";
-import { Internals as Internals36, watchStaticFile } from "remotion";
+import { Internals as Internals37, watchStaticFile } from "remotion";
 
 // src/helpers/get-asset-metadata.ts
 import { getVideoMetadata } from "@remotion/media-utils";
@@ -8245,7 +8245,7 @@ var ConfirmationDialog = ({ state }) => {
 
 // src/components/EditorGuides/index.tsx
 import { useContext as useContext19, useMemo as useMemo39 } from "react";
-import { Internals as Internals23 } from "remotion";
+import { Internals as Internals24 } from "remotion";
 
 // src/helpers/use-studio-canvas-dimensions.ts
 import { PlayerInternals as PlayerInternals7 } from "@remotion/player";
@@ -8700,7 +8700,7 @@ import {
   useState as useState26
 } from "react";
 import {
-  Internals as Internals22
+  Internals as Internals23
 } from "remotion";
 
 // src/helpers/interactivity-enabled.ts
@@ -9058,7 +9058,7 @@ import {
 } from "@remotion/studio-shared";
 import { useContext as useContext15, useEffect as useEffect27, useRef as useRef17 } from "react";
 import {
-  Internals as Internals18
+  Internals as Internals19
 } from "remotion";
 
 // src/components/Timeline/call-add-keyframe.ts
@@ -9389,7 +9389,8 @@ var callDeleteKeyframes = ({
       previous: prev,
       keyframes: keyframes.map((keyframe) => ({
         fieldKey: keyframe.fieldKey,
-        frame: keyframe.sourceFrame
+        frame: keyframe.sourceFrame,
+        valueWhenLastKeyframeDeleted: keyframe.valueWhenLastKeyframeDeleted
       }))
     }));
   }
@@ -9403,7 +9404,8 @@ var callDeleteKeyframes = ({
       keyframes: keyframes.map((keyframe) => ({
         effectIndex: keyframe.effectIndex,
         fieldKey: keyframe.fieldKey,
-        frame: keyframe.sourceFrame
+        frame: keyframe.sourceFrame,
+        valueWhenLastKeyframeDeleted: keyframe.valueWhenLastKeyframeDeleted
       }))
     }));
   }
@@ -9413,7 +9415,8 @@ var callDeleteKeyframes = ({
       nodePath: keyframe.nodePath,
       key: keyframe.fieldKey,
       frame: keyframe.sourceFrame,
-      schema: keyframe.schema
+      schema: keyframe.schema,
+      valueWhenLastKeyframeDeleted: keyframe.valueWhenLastKeyframeDeleted
     })),
     effectKeyframes: effectKeyframes.map((keyframe) => ({
       fileName: keyframe.fileName,
@@ -9421,7 +9424,8 @@ var callDeleteKeyframes = ({
       effectIndex: keyframe.effectIndex,
       key: keyframe.fieldKey,
       frame: keyframe.sourceFrame,
-      schema: keyframe.schema
+      schema: keyframe.schema,
+      valueWhenLastKeyframeDeleted: keyframe.valueWhenLastKeyframeDeleted
     })),
     clientId
   }).then(() => {
@@ -9496,7 +9500,10 @@ var callUpdateEffectKeyframeSettings = ({
 };
 
 // src/components/Timeline/delete-selected-timeline-item.ts
-import { Internals as Internals16 } from "remotion";
+import { Internals as Internals17 } from "remotion";
+
+// src/components/Timeline/delete-selected-keyframe.ts
+import { Internals as Internals15 } from "remotion";
 
 // src/components/Timeline/find-track-for-node-path-info.ts
 import { stringifySequenceExpandedRowKey as stringifySequenceExpandedRowKey3 } from "@remotion/studio-shared";
@@ -9848,11 +9855,26 @@ var parseKeyframeFieldFromNodePath = (auxiliaryKeys) => {
 };
 
 // src/components/Timeline/delete-selected-keyframe.ts
+var getValueWhenLastKeyframeDeleted = ({
+  propStatus,
+  playheadSourceFrame
+}) => {
+  if (propStatus?.status !== "keyframed" || playheadSourceFrame === null) {
+    return null;
+  }
+  return Internals15.interpolateKeyframedStatus({
+    forceSpringAllowTail: null,
+    frame: playheadSourceFrame,
+    status: propStatus
+  }) ?? null;
+};
 var getSelectedKeyframeDeletion = ({
   nodePathInfo,
   frame: frame2,
   sequences,
-  overrideIdsToNodePaths
+  overrideIdsToNodePaths,
+  propStatuses,
+  timelinePosition
 }) => {
   const field = parseKeyframeFieldFromNodePath(nodePathInfo.auxiliaryKeys);
   if (field === null) {
@@ -9868,6 +9890,7 @@ var getSelectedKeyframeDeletion = ({
     return null;
   }
   const sourceFrame = frame2 - (track?.keyframeDisplayOffset ?? 0);
+  const playheadSourceFrame = timelinePosition === null ? null : timelinePosition - (track?.keyframeDisplayOffset ?? 0);
   const nodePath = nodePathInfo.sequenceSubscriptionKey;
   const fileName = nodePath.absolutePath;
   if (field.type === "effect") {
@@ -9875,6 +9898,16 @@ var getSelectedKeyframeDeletion = ({
     if (!effect) {
       return null;
     }
+    const effectStatus = propStatuses !== null ? Internals15.getEffectPropStatusesCtx({
+      propStatuses,
+      nodePath,
+      effectIndex: field.effectIndex
+    }) : null;
+    const effectPropStatus = effectStatus?.type === "can-update-effect" ? effectStatus.props[field.fieldKey] : null;
+    const effectValueWhenLastKeyframeDeleted = getValueWhenLastKeyframeDeleted({
+      propStatus: effectPropStatus,
+      playheadSourceFrame
+    });
     return {
       type: "effect",
       fileName,
@@ -9882,16 +9915,23 @@ var getSelectedKeyframeDeletion = ({
       effectIndex: field.effectIndex,
       fieldKey: field.fieldKey,
       sourceFrame,
-      schema: effect.schema
+      schema: effect.schema,
+      valueWhenLastKeyframeDeleted: effectValueWhenLastKeyframeDeleted
     };
   }
+  const sequencePropStatus = propStatuses !== null ? Internals15.getPropStatusesCtx(propStatuses, nodePath)?.[field.fieldKey] : null;
+  const sequenceValueWhenLastKeyframeDeleted = getValueWhenLastKeyframeDeleted({
+    propStatus: sequencePropStatus,
+    playheadSourceFrame
+  });
   return {
     type: "sequence",
     fileName,
     nodePath,
     fieldKey: field.fieldKey,
     sourceFrame,
-    schema: sequence.controls.schema
+    schema: sequence.controls.schema,
+    valueWhenLastKeyframeDeleted: sequenceValueWhenLastKeyframeDeleted
   };
 };
 var deleteSelectedKeyframes = ({
@@ -9899,13 +9939,17 @@ var deleteSelectedKeyframes = ({
   sequences,
   overrideIdsToNodePaths,
   setPropStatuses,
-  clientId
+  clientId,
+  propStatuses,
+  timelinePosition
 }) => {
   const deletions = keyframes.map((keyframe) => getSelectedKeyframeDeletion({
     nodePathInfo: keyframe.nodePathInfo,
     frame: keyframe.frame,
     sequences,
-    overrideIdsToNodePaths
+    overrideIdsToNodePaths,
+    propStatuses,
+    timelinePosition
   })).filter((deletion) => deletion !== null);
   if (deletions.length === 0) {
     return null;
@@ -9954,7 +9998,7 @@ import {
   LINEAR_KEYFRAME_EASING
 } from "@remotion/studio-shared";
 import { canEditEasingForInterpolationFunction as canEditEasingForInterpolationFunction2 } from "@remotion/studio-shared";
-import { Internals as Internals15 } from "remotion";
+import { Internals as Internals16 } from "remotion";
 var isEasingSelection = (selection) => selection.type === "easing";
 var getSelectedEasingUpdate = ({
   selection,
@@ -9981,7 +10025,7 @@ var getSelectedEasingUpdate = ({
     if (!sequence.controls) {
       return null;
     }
-    const sequencePropStatus = Internals15.getPropStatusesCtx(propStatuses, nodePath)?.[field.fieldKey];
+    const sequencePropStatus = Internals16.getPropStatusesCtx(propStatuses, nodePath)?.[field.fieldKey];
     if (sequencePropStatus?.status !== "keyframed" || !canEditEasingForInterpolationFunction(sequencePropStatus.interpolationFunction)) {
       return null;
     }
@@ -10000,7 +10044,7 @@ var getSelectedEasingUpdate = ({
   if (!effect) {
     return null;
   }
-  const effectStatus = Internals15.getEffectPropStatusesCtx({
+  const effectStatus = Internals16.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex: field.effectIndex
@@ -10245,7 +10289,7 @@ var getEasingSelectionAfterDeletingKeyframes = ({
   const nodePath = selection.nodePathInfo.sequenceSubscriptionKey;
   const sourceFrame = selection.frame - track.keyframeDisplayOffset;
   if (field.type === "sequence") {
-    const sequencePropStatus = Internals16.getPropStatusesCtx(propStatuses, nodePath)?.[field.fieldKey];
+    const sequencePropStatus = Internals17.getPropStatusesCtx(propStatuses, nodePath)?.[field.fieldKey];
     if (sequencePropStatus?.status !== "keyframed" || !canEditEasingForInterpolationFunction2(sequencePropStatus.interpolationFunction)) {
       return null;
     }
@@ -10257,7 +10301,7 @@ var getEasingSelectionAfterDeletingKeyframes = ({
       timelinePosition
     });
   }
-  const effectStatus = Internals16.getEffectPropStatusesCtx({
+  const effectStatus = Internals17.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex: field.effectIndex
@@ -10320,7 +10364,9 @@ var deleteSelectedTimelineItems = ({
   overrideIdsToNodePaths,
   setPropStatuses,
   clientId,
-  confirm
+  confirm,
+  propStatuses,
+  timelinePosition
 }) => {
   const firstSelection = selections[0];
   if (!firstSelection) {
@@ -10339,7 +10385,9 @@ var deleteSelectedTimelineItems = ({
       sequences,
       overrideIdsToNodePaths,
       setPropStatuses,
-      clientId
+      clientId,
+      propStatuses,
+      timelinePosition
     });
     return promise?.then(() => true) ?? null;
   }
@@ -10434,13 +10482,13 @@ import {
   LINEAR_KEYFRAME_EASING as LINEAR_KEYFRAME_EASING2
 } from "@remotion/studio-shared";
 import {
-  Internals as Internals17
+  Internals as Internals18
 } from "remotion";
 var getKeyframeClipboardFieldType = ({
   schema,
   fieldKey
 }) => {
-  const field = Internals17.getFlatSchemaWithAllKeys(schema)[fieldKey];
+  const field = Internals18.getFlatSchemaWithAllKeys(schema)[fieldKey];
   if (!field) {
     return null;
   }
@@ -10488,7 +10536,7 @@ var resolveKeyframeField = ({
     if (!track.sequence.controls) {
       return null;
     }
-    const sequencePropStatus = Internals17.getPropStatusesCtx(propStatuses, nodePath)?.[identity.fieldKey];
+    const sequencePropStatus = Internals18.getPropStatusesCtx(propStatuses, nodePath)?.[identity.fieldKey];
     if (!sequencePropStatus || sequencePropStatus.status === "computed") {
       return null;
     }
@@ -10507,7 +10555,7 @@ var resolveKeyframeField = ({
     };
   }
   const effect = track.sequence.effects[identity.effectIndex];
-  const effectStatus = Internals17.getEffectPropStatusesCtx({
+  const effectStatus = Internals18.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex: identity.effectIndex
@@ -10530,7 +10578,7 @@ var resolveKeyframeField = ({
   };
 };
 var areResolvedFieldsEqual = (first, second) => {
-  if (Internals17.makeSequencePropsSubscriptionKey(first.nodePath) !== Internals17.makeSequencePropsSubscriptionKey(second.nodePath)) {
+  if (Internals18.makeSequencePropsSubscriptionKey(first.nodePath) !== Internals18.makeSequencePropsSubscriptionKey(second.nodePath)) {
     return false;
   }
   if (first.identity.type !== second.identity.type) {
@@ -10857,7 +10905,7 @@ var getSnapshotsFromSelection = ({
     return null;
   }
   const { sequenceSubscriptionKey } = selection.nodePathInfo;
-  const sequenceStatus = propStatuses[Internals18.makeSequencePropsSubscriptionKey(sequenceSubscriptionKey)];
+  const sequenceStatus = propStatuses[Internals19.makeSequencePropsSubscriptionKey(sequenceSubscriptionKey)];
   if (!sequenceStatus || !sequenceStatus.canUpdate) {
     return null;
   }
@@ -10962,7 +11010,7 @@ var getEffectPropClipboardDataFromSelection = ({
   if (selection.type !== "sequence-effect-prop") {
     return null;
   }
-  const sequenceStatus = propStatuses[Internals18.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
+  const sequenceStatus = propStatuses[Internals19.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
   if (!sequenceStatus || !sequenceStatus.canUpdate) {
     return null;
   }
@@ -11059,7 +11107,7 @@ var getPasteEffectPropTarget = ({
   if (!effect || !isVisibleFieldSchema(fieldSchema)) {
     return { type: "prop-mismatch" };
   }
-  const sequenceStatus = propStatuses[Internals18.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
+  const sequenceStatus = propStatuses[Internals19.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
   if (!sequenceStatus?.canUpdate) {
     return { type: "uncopyable" };
   }
@@ -11086,16 +11134,16 @@ var getPasteEffectPropTarget = ({
 };
 var TimelineClipboardKeybindings = () => {
   const keybindings = useKeybinding();
-  const timelinePosition = Internals18.Timeline.useTimelinePosition();
+  const timelinePosition = Internals19.Timeline.useTimelinePosition();
   const timelinePositionRef = useRef17(timelinePosition);
   timelinePositionRef.current = timelinePosition;
   const { previewServerState } = useContext15(StudioServerConnectionCtx);
   const { canSelect } = useTimelineSelection();
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
-  const propStatusesRef = useContext15(Internals18.VisualModePropStatusesRefContext);
-  const { setPropStatuses } = useContext15(Internals18.VisualModeSettersContext);
-  const sequencesRef = useContext15(Internals18.SequenceManagerRefContext);
-  const { overrideIdToNodePathMappings } = useContext15(Internals18.OverrideIdsToNodePathsGettersContext);
+  const propStatusesRef = useContext15(Internals19.VisualModePropStatusesRefContext);
+  const { setPropStatuses } = useContext15(Internals19.VisualModeSettersContext);
+  const sequencesRef = useContext15(Internals19.SequenceManagerRefContext);
+  const { overrideIdToNodePathMappings } = useContext15(Internals19.OverrideIdsToNodePathsGettersContext);
   const confirm = useConfirmationDialog();
   useEffect27(() => {
     if (!canSelect || previewServerState.type !== "connected") {
@@ -11244,7 +11292,9 @@ var TimelineClipboardKeybindings = () => {
             overrideIdsToNodePaths: overrideIdToNodePathMappings,
             setPropStatuses,
             clientId,
-            confirm
+            confirm,
+            propStatuses,
+            timelinePosition: timelinePositionRef.current
           });
           return deletePromise?.then((deleted) => {
             if (!deleted) {
@@ -11329,7 +11379,8 @@ var TimelineClipboardKeybindings = () => {
             nodePath: keyframeTarget.nodePath,
             fieldKey: keyframeTarget.fieldKey,
             sourceFrame,
-            schema: keyframeTarget.schema
+            schema: keyframeTarget.schema,
+            valueWhenLastKeyframeDeleted: null
           }));
           return callDeleteKeyframes({
             sequenceKeyframes: effectIndex === null ? deletions : [],
@@ -11534,7 +11585,7 @@ var TimelineClipboardKeybindings = () => {
 // src/components/Timeline/TimelineDeleteKeybindings.tsx
 import { LINEAR_KEYFRAME_EASING as LINEAR_KEYFRAME_EASING3 } from "@remotion/studio-shared";
 import { useContext as useContext16, useEffect as useEffect28, useRef as useRef18 } from "react";
-import { Internals as Internals21 } from "remotion";
+import { Internals as Internals22 } from "remotion";
 
 // src/components/Timeline/duplicate-selected-timeline-item.ts
 var confirmDuplicatingProgrammaticallyDuplicatedSequences = (nodePathInfos, confirm) => {
@@ -11622,7 +11673,7 @@ var duplicateSelectedTimelineItems = ({
 
 // src/components/Timeline/reset-selected-timeline-props.ts
 import { getEffectFieldsToShow as getEffectFieldsToShow3 } from "@remotion/studio-shared";
-import { Internals as Internals19 } from "remotion";
+import { Internals as Internals20 } from "remotion";
 
 // src/components/Timeline/save-sequence-prop.ts
 import {
@@ -11868,7 +11919,7 @@ var getActiveFieldSchema = ({
   key: key2,
   resolveValue
 }) => {
-  return Internals19.flattenActiveSchema(schema, resolveValue)[key2];
+  return Internals20.flattenActiveSchema(schema, resolveValue)[key2];
 };
 var getTimelinePropResetTargets = ({
   selections,
@@ -11900,8 +11951,8 @@ var getTimelinePropResetTargets = ({
       if (!sequence.controls) {
         continue;
       }
-      const sequencePropStatus = Internals19.getPropStatusesCtx(propStatuses, nodePath);
-      const { merged: sequenceValuesDotNotation } = Internals19.computeEffectiveSchemaValuesDotNotation({
+      const sequencePropStatus = Internals20.getPropStatusesCtx(propStatuses, nodePath);
+      const { merged: sequenceValuesDotNotation } = Internals20.computeEffectiveSchemaValuesDotNotation({
         schema: sequence.controls.schema,
         currentValue: sequence.controls.currentRuntimeValueDotNotation,
         overrideValues: {},
@@ -11940,7 +11991,7 @@ var getTimelinePropResetTargets = ({
       getEffectDragOverrides: () => ({})
     }).find((candidate) => candidate.key === selection.key) : null;
     const fieldSchema = field?.fieldSchema;
-    const effectStatus = Internals19.getEffectPropStatusesCtx({
+    const effectStatus = Internals20.getEffectPropStatusesCtx({
       propStatuses,
       nodePath,
       effectIndex: selection.i
@@ -12021,7 +12072,7 @@ var resetSelectedTimelineProps = ({
 };
 
 // src/components/Timeline/split-selected-timeline-item.ts
-import { Internals as Internals20 } from "remotion";
+import { Internals as Internals21 } from "remotion";
 var getTimelineSequenceSplitUnsupportedReason = (componentName) => {
   if (componentName === "<TransitionSeries.Sequence>" || componentName === "<TransitionSeries.Overlay>") {
     return `${componentName} cannot be split from source`;
@@ -12156,7 +12207,7 @@ var splitSelectedTimelineItems = ({
     overrideIdsToNodePaths,
     nodePathInfo: selection.nodePathInfo
   });
-  const sequencePropStatuses = propStatuses ? Internals20.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey) : undefined;
+  const sequencePropStatuses = propStatuses ? Internals21.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey) : undefined;
   const eligibility = getTimelineSequenceSplitEligibility({
     selection,
     sequence: track?.sequence ?? null,
@@ -12177,15 +12228,15 @@ var splitSelectedTimelineItems = ({
 var TimelineDeleteKeybindings = () => {
   const keybindings = useKeybinding();
   const { previewServerState } = useContext16(StudioServerConnectionCtx);
-  const sequencesRef = useContext16(Internals21.SequenceManagerRefContext);
-  const { overrideIdToNodePathMappings } = useContext16(Internals21.OverrideIdsToNodePathsGettersContext);
-  const propStatusesRef = useContext16(Internals21.VisualModePropStatusesRefContext);
-  const { setPropStatuses } = useContext16(Internals21.VisualModeSettersContext);
+  const sequencesRef = useContext16(Internals22.SequenceManagerRefContext);
+  const { overrideIdToNodePathMappings } = useContext16(Internals22.OverrideIdsToNodePathsGettersContext);
+  const propStatusesRef = useContext16(Internals22.VisualModePropStatusesRefContext);
+  const { setPropStatuses } = useContext16(Internals22.VisualModeSettersContext);
   const { setGuidesList } = useContext16(EditorShowGuidesContext);
   const { canSelect } = useTimelineSelection();
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
   const confirm = useConfirmationDialog();
-  const timelinePosition = Internals21.Timeline.useTimelinePosition();
+  const timelinePosition = Internals22.Timeline.useTimelinePosition();
   const timelinePositionRef = useRef18(timelinePosition);
   timelinePositionRef.current = timelinePosition;
   useEffect28(() => {
@@ -12216,7 +12267,9 @@ var TimelineDeleteKeybindings = () => {
         overrideIdsToNodePaths: overrideIdToNodePathMappings,
         setPropStatuses,
         clientId,
-        confirm
+        confirm,
+        propStatuses,
+        timelinePosition: timelinePositionRef.current
       });
       if (deletePromise !== null) {
         deletePromise.then((deleted) => {
@@ -12712,10 +12765,10 @@ var getTimelineTreeNodeCanEditEasing = ({
     return false;
   }
   if (node.field.kind === "sequence-field") {
-    const sequencePropStatus = Internals22.getPropStatusesCtx(propStatuses, nodePathInfo.sequenceSubscriptionKey)?.[node.field.key];
+    const sequencePropStatus = Internals23.getPropStatusesCtx(propStatuses, nodePathInfo.sequenceSubscriptionKey)?.[node.field.key];
     return sequencePropStatus?.status === "keyframed" && canEditEasingForInterpolationFunction3(sequencePropStatus.interpolationFunction);
   }
-  const effectStatus = Internals22.getEffectPropStatusesCtx({
+  const effectStatus = Internals23.getEffectPropStatusesCtx({
     propStatuses,
     nodePath: nodePathInfo.sequenceSubscriptionKey,
     effectIndex: node.field.effectIndex
@@ -12869,9 +12922,9 @@ var TimelineEscapeKeybindings = () => {
 };
 var TimelineSelectableItemsProvider = ({ children, timeline }) => {
   const { getIsExpanded } = useContext17(ExpandedTracksGetterContext);
-  const { propStatuses } = useContext17(Internals22.VisualModePropStatusesContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext17(Internals22.VisualModeDragOverridesContext);
-  const timelinePosition = Internals22.Timeline.useTimelinePosition();
+  const { propStatuses } = useContext17(Internals23.VisualModePropStatusesContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext17(Internals23.VisualModeDragOverridesContext);
+  const timelinePosition = Internals23.Timeline.useTimelinePosition();
   const { selectedItems } = useTimelineSelection();
   const selectableItems = useMemo37(() => getSelectableTimelineItems({
     getDragOverrides,
@@ -12897,7 +12950,7 @@ var TimelineSelectableItemsProvider = ({ children, timeline }) => {
 };
 var TimelineSelectionProvider = ({ children }) => {
   const { previewServerState } = useContext17(StudioServerConnectionCtx);
-  const { canvasContent } = useContext17(Internals22.CompositionManager);
+  const { canvasContent } = useContext17(Internals23.CompositionManager);
   const timelineSelectionScope = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
   const { expandParentTracks } = useContext17(ExpandedTracksSetterContext);
   const canSelect = studioInteractivityEnabled && previewServerState.type === "connected" && !window.remotion_isReadOnlyStudio;
@@ -13628,7 +13681,7 @@ var EditorGuides = ({ canvasSize, contentDimensions, assetMetadata }) => {
     contentDimensions,
     assetMetadata
   });
-  const { canvasContent } = useContext19(Internals23.CompositionManager);
+  const { canvasContent } = useContext19(Internals24.CompositionManager);
   if (canvasContent === null || canvasContent.type !== "composition") {
     throw new Error("Expected to be in a composition");
   }
@@ -13874,7 +13927,7 @@ import {
   useMemo as useMemo40,
   useRef as useRef21
 } from "react";
-import { Internals as Internals24 } from "remotion";
+import { Internals as Internals25 } from "remotion";
 import { jsx as jsx66 } from "react/jsx-runtime";
 var makeGuideId = () => {
   return Math.random().toString(36).substring(7);
@@ -13900,7 +13953,7 @@ var Ruler = ({
     setEditorShowGuides
   } = useContext20(EditorShowGuidesContext);
   const { selectedItems } = useTimelineSelection();
-  const unsafeVideoConfig = Internals24.useUnsafeVideoConfig();
+  const unsafeVideoConfig = Internals25.useUnsafeVideoConfig();
   if (!unsafeVideoConfig) {
     throw new Error("Video config not set");
   }
@@ -14186,9 +14239,9 @@ var EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef
 
 // src/components/EditorRuler/use-is-ruler-visible.ts
 import { useContext as useContext22 } from "react";
-import { Internals as Internals25 } from "remotion";
+import { Internals as Internals26 } from "remotion";
 var useIsRulerVisible = () => {
-  const { canvasContent } = useContext22(Internals25.CompositionManager);
+  const { canvasContent } = useContext22(Internals26.CompositionManager);
   const { editorShowRulers } = useContext22(EditorShowRulersContext);
   return editorShowRulers && canvasContent && canvasContent.type === "composition";
 };
@@ -14336,7 +14389,7 @@ import {
   getRequiredPackageForInsertableElement,
   isUrl
 } from "@remotion/studio-shared";
-import { Internals as Internals26, staticFile as staticFile2 } from "remotion";
+import { Internals as Internals27, staticFile as staticFile2 } from "remotion";
 import { NoReactInternals as NoReactInternals6 } from "remotion/no-react";
 
 // src/api/get-static-files.ts
@@ -14398,6 +14451,16 @@ var getAssetElement = ({
   fileType,
   src
 }) => {
+  if (fileType.type === "webp" && fileType.animated) {
+    return {
+      type: "asset",
+      assetType: "animated-image",
+      src,
+      srcType: "static",
+      dimensions: fileType.dimensions,
+      position: null
+    };
+  }
   if (fileType.type === "png" || fileType.type === "jpeg" || fileType.type === "webp" || fileType.type === "bmp") {
     return {
       type: "asset",
@@ -14458,7 +14521,7 @@ var getAssetElementFromPath = (assetPath) => {
   if (!extension || extension === assetPath.toLowerCase()) {
     return null;
   }
-  if (["png", "jpg", "jpeg", "webp", "bmp"].includes(extension)) {
+  if (["png", "jpg", "jpeg", "webp", "bmp", "svg"].includes(extension)) {
     return {
       type: "asset",
       assetType: "image",
@@ -14510,6 +14573,19 @@ var getAssetElementFromPath = (assetPath) => {
   }
   return null;
 };
+var getAssetElementForDroppedFile = ({
+  fileType,
+  src
+}) => {
+  const detectedElement = getAssetElement({ fileType, src });
+  if (detectedElement !== null) {
+    return detectedElement;
+  }
+  if (fileType.type !== "unknown" || !src.toLowerCase().endsWith(".svg")) {
+    return null;
+  }
+  return getAssetElementFromPath(src);
+};
 var getAssetLabel = (element) => {
   if (element.type !== "asset") {
     throw new Error("Expected asset element");
@@ -14574,6 +14650,16 @@ var getCompositionPositionForDrop = ({
     dropPosition
   });
 };
+var getAssetPositionForDrop = ({
+  assetDimensions,
+  destinationDimensions,
+  dropPosition
+}) => {
+  if (assetDimensions !== null && destinationDimensions !== null && assetDimensions.width === destinationDimensions.width && assetDimensions.height === destinationDimensions.height) {
+    return null;
+  }
+  return getCenteredPosition({ dimensions: assetDimensions, dropPosition });
+};
 var getComponentPropNumber = (props, name) => {
   const prop = props.find((p) => p.name === name);
   return typeof prop?.value === "number" ? prop.value : null;
@@ -14622,6 +14708,10 @@ var getFileDimensions = async ({
   file,
   fileType
 }) => {
+  if (fileType.type === "unknown" && file.name.toLowerCase().endsWith(".svg")) {
+    const objectUrl = URL.createObjectURL(file);
+    return getImageDimensions({ revokeObjectUrl: true, src: objectUrl });
+  }
   if (fileType.type === "wav" || fileType.type === "mp3" || fileType.type === "aac" || fileType.type === "flac") {
     return null;
   }
@@ -14645,7 +14735,7 @@ var getFileDimensions = async ({
 var getStaticAssetDimensions = (assetPath) => {
   const extension = assetPath.split(".").pop()?.toLowerCase();
   const src = staticFile2(assetPath);
-  if (extension && ["png", "jpg", "jpeg", "webp", "bmp", "gif", "apng"].includes(extension)) {
+  if (extension && ["png", "jpg", "jpeg", "webp", "bmp", "gif", "apng", "svg"].includes(extension)) {
     return getImageDimensions({ revokeObjectUrl: false, src });
   }
   if (extension && ["mp4", "m4v", "mov", "avi", "webm", "ts", "m2ts"].includes(extension)) {
@@ -14672,7 +14762,7 @@ var getStaticAssetDimensionsOrNull = async (assetPath) => {
 };
 var getStaticAssetFileType = async (assetPath) => {
   const extension = assetPath.split(".").pop()?.toLowerCase();
-  if (extension !== "png" && extension !== "apng") {
+  if (extension !== "png" && extension !== "apng" && extension !== "webp") {
     return null;
   }
   try {
@@ -14760,6 +14850,7 @@ var downloadRemoteAsset = (url) => {
 var importAssets = async ({
   compositionFile,
   compositionId,
+  destinationDimensions,
   dropPosition,
   files
 }) => {
@@ -14789,7 +14880,7 @@ var importAssets = async ({
     for (const file of files) {
       const contents = await file.arrayBuffer();
       const fileType = detectFileType(new Uint8Array(contents));
-      const element = getAssetElement({
+      const element = getAssetElementForDroppedFile({
         fileType,
         src: file.name
       });
@@ -14806,14 +14897,16 @@ var importAssets = async ({
         addedStaticFiles.push(file.name);
       }
       const dimensions = await getFileDimensionsOrNull({ file, fileType });
+      const resolvedDimensions = element.dimensions ?? dimensions;
       const inserted = await insertAssetElement({
         compositionFile,
         compositionId,
         element: {
           ...element,
-          dimensions: element.dimensions ?? dimensions,
-          position: getCenteredPosition({
-            dimensions,
+          dimensions: resolvedDimensions,
+          position: getAssetPositionForDrop({
+            assetDimensions: resolvedDimensions,
+            destinationDimensions,
             dropPosition
           })
         }
@@ -14834,6 +14927,7 @@ var importAssets = async ({
 var importRemoteAsset = async ({
   compositionFile,
   compositionId,
+  destinationDimensions,
   dropPosition,
   url
 }) => {
@@ -14851,8 +14945,9 @@ var importRemoteAsset = async ({
       compositionId,
       element: {
         ...element,
-        position: getCenteredPosition({
-          dimensions: element.dimensions,
+        position: getAssetPositionForDrop({
+          assetDimensions: element.dimensions,
+          destinationDimensions,
           dropPosition
         })
       }
@@ -14900,6 +14995,7 @@ var insertExistingAssets = async ({
   assetPaths,
   compositionFile,
   compositionId,
+  destinationDimensions,
   dropPosition
 }) => {
   if (assetPaths.length === 0) {
@@ -14921,8 +15017,9 @@ var insertExistingAssets = async ({
         element: {
           ...element,
           dimensions,
-          position: getCenteredPosition({
-            dimensions,
+          position: getAssetPositionForDrop({
+            assetDimensions: dimensions,
+            destinationDimensions,
             dropPosition
           })
         }
@@ -14991,7 +15088,7 @@ var insertComposition = async ({
     return;
   }
   try {
-    const resolver = Internals26.resolveCompositionsRef.current;
+    const resolver = Internals27.resolveCompositionsRef.current;
     if (!resolver) {
       throw new Error("No composition resolver available");
     }
@@ -15062,7 +15159,7 @@ import {
   useMemo as useMemo51,
   useRef as useRef29
 } from "react";
-import { Internals as Internals35 } from "remotion";
+import { Internals as Internals36 } from "remotion";
 
 // src/helpers/checkerboard-background.ts
 var getCheckerboardBackgroundSize = (size2) => `${size2}px ${size2}px`;
@@ -15497,7 +15594,7 @@ import React64, {
   useRef as useRef28,
   useState as useState38
 } from "react";
-import { Internals as Internals34 } from "remotion";
+import { Internals as Internals35 } from "remotion";
 import { NoReactInternals as NoReactInternals12 } from "remotion/no-react";
 
 // src/state/editor-outlines.ts
@@ -15519,12 +15616,12 @@ var EditorShowOutlinesContext = createContext16({
 
 // src/state/scale-lock.tsx
 import React56, { useCallback as useCallback35, useMemo as useMemo44, useState as useState32 } from "react";
-import { Internals as Internals27 } from "remotion";
+import { Internals as Internals28 } from "remotion";
 import { jsx as jsx73 } from "react/jsx-runtime";
 var makeScaleLockKey = ({
   fieldKey,
   nodePath
-}) => `${Internals27.makeSequencePropsSubscriptionKey(nodePath)}.${fieldKey}`;
+}) => `${Internals28.makeSequencePropsSubscriptionKey(nodePath)}.${fieldKey}`;
 var ScaleLockContext = React56.createContext({
   getScaleLockState: ({ defaultValue }) => defaultValue,
   setScaleLockState: () => {
@@ -15549,7 +15646,7 @@ var ScaleLockProvider = ({ children }) => {
 };
 
 // src/components/selected-outline-drag.ts
-import { Internals as Internals29 } from "remotion";
+import { Internals as Internals30 } from "remotion";
 import { NoReactInternals as NoReactInternals8 } from "remotion/no-react";
 
 // src/components/selected-outline-geometry.ts
@@ -17174,7 +17271,7 @@ var transformOriginFieldKey = "style.transformOrigin";
 var selectedOutlineDragThresholdPx = 4;
 
 // src/components/selected-outline-uv.ts
-import { Internals as Internals28 } from "remotion";
+import { Internals as Internals29 } from "remotion";
 
 // src/components/Timeline/timeline-field-utils.ts
 var getDecimalPlaces = (num) => {
@@ -17693,7 +17790,7 @@ var getSelectedUvHandles = ({
     if (!effect) {
       continue;
     }
-    const effectStatus = Internals28.getEffectPropStatusesCtx({
+    const effectStatus = Internals29.getEffectPropStatusesCtx({
       propStatuses,
       nodePath,
       effectIndex
@@ -17706,12 +17803,12 @@ var getSelectedUvHandles = ({
       continue;
     }
     const dragOverrides = getEffectDragOverrides(nodePath, effectIndex);
-    const activeSchema = Internals28.flattenActiveSchema(effect.schema, (key3) => {
+    const activeSchema = Internals29.flattenActiveSchema(effect.schema, (key3) => {
       const propStatus = effectStatus.props[key3];
       if (propStatus?.status !== "static" && propStatus?.status !== "keyframed") {
         return;
       }
-      return Internals28.getEffectiveVisualModeValue({
+      return Internals29.getEffectiveVisualModeValue({
         propStatus,
         dragOverrideValue: dragOverrides[key3],
         defaultValue: undefined,
@@ -17728,7 +17825,7 @@ var getSelectedUvHandles = ({
       if (propStatus?.status !== "static" && propStatus?.status !== "keyframed") {
         continue;
       }
-      effectValues[fieldKey] = Internals28.getEffectiveVisualModeValue({
+      effectValues[fieldKey] = Internals29.getEffectiveVisualModeValue({
         propStatus,
         dragOverrideValue: dragOverrides[fieldKey],
         defaultValue: fieldSchema.default,
@@ -19298,14 +19395,14 @@ var getSelectedOutlineActiveSchema = ({
   propStatus,
   frame: frame2
 }) => {
-  const { merged: valuesDotNotation } = Internals29.computeEffectiveSchemaValuesDotNotation({
+  const { merged: valuesDotNotation } = Internals30.computeEffectiveSchemaValuesDotNotation({
     schema,
     currentValue: currentRuntimeValueDotNotation,
     overrideValues: dragOverrides,
     propStatus,
     frame: frame2
   });
-  return Internals29.flattenActiveSchema(schema, (key3) => valuesDotNotation[key3]);
+  return Internals30.flattenActiveSchema(schema, (key3) => valuesDotNotation[key3]);
 };
 var getSelectedOutlineDragStates = ({
   dragTargets,
@@ -19315,7 +19412,7 @@ var getSelectedOutlineDragStates = ({
   return dragTargets.map((target) => {
     const dragOverrideValue = (getDragOverrides(target.nodePath) ?? {})[translateFieldKey];
     const sourceFrame = timelinePosition - target.keyframeDisplayOffset;
-    const effectiveValue = Internals29.getEffectiveVisualModeValue({
+    const effectiveValue = Internals30.getEffectiveVisualModeValue({
       propStatus: target.propStatus,
       dragOverrideValue,
       defaultValue: target.fieldDefault,
@@ -19325,7 +19422,7 @@ var getSelectedOutlineDragStates = ({
     const [startX, startY] = parseTranslate(String(effectiveValue ?? "0px 0px"));
     return {
       defaultValue: target.fieldDefault !== undefined ? JSON.stringify(target.fieldDefault) : null,
-      key: Internals29.makeSequencePropsSubscriptionKey(target.nodePath),
+      key: Internals30.makeSequencePropsSubscriptionKey(target.nodePath),
       sourceFrame,
       startX,
       startY,
@@ -19475,7 +19572,7 @@ var getSelectedOutlineScaleDragStates = ({
   return dragTargets.map((target) => {
     const dragOverrideValue = (getDragOverrides(target.nodePath) ?? {})[scaleFieldKey];
     const sourceFrame = timelinePosition - target.keyframeDisplayOffset;
-    const effectiveValue = Internals29.getEffectiveVisualModeValue({
+    const effectiveValue = Internals30.getEffectiveVisualModeValue({
       propStatus: target.propStatus,
       dragOverrideValue,
       defaultValue: target.fieldDefault,
@@ -19485,7 +19582,7 @@ var getSelectedOutlineScaleDragStates = ({
     const [startX, startY, startZ] = NoReactInternals8.parseScaleValue(effectiveValue);
     return {
       defaultValue: target.fieldDefault !== undefined ? JSON.stringify(target.fieldDefault) : null,
-      key: Internals29.makeSequencePropsSubscriptionKey(target.nodePath),
+      key: Internals30.makeSequencePropsSubscriptionKey(target.nodePath),
       sourceFrame,
       startX,
       startY,
@@ -19581,7 +19678,7 @@ var getSelectedOutlineRotationDragStates = ({
   return dragTargets.map((target) => {
     const dragOverrideValue = (getDragOverrides(target.nodePath) ?? {})[rotateFieldKey];
     const sourceFrame = timelinePosition - target.keyframeDisplayOffset;
-    const effectiveValue = Internals29.getEffectiveVisualModeValue({
+    const effectiveValue = Internals30.getEffectiveVisualModeValue({
       propStatus: target.propStatus,
       dragOverrideValue,
       defaultValue: target.fieldDefault,
@@ -19590,7 +19687,7 @@ var getSelectedOutlineRotationDragStates = ({
     });
     return {
       defaultValue: target.fieldDefault !== undefined ? JSON.stringify(target.fieldDefault) : null,
-      key: Internals29.makeSequencePropsSubscriptionKey(target.nodePath),
+      key: Internals30.makeSequencePropsSubscriptionKey(target.nodePath),
       sourceFrame,
       startDegrees: parseCssRotationToDegrees(String(effectiveValue ?? "0deg")),
       target
@@ -19977,7 +20074,7 @@ var findSelectedOutlineSnap = ({
 
 // src/components/SelectedOutlineElement.tsx
 import React62, { useContext as useContext28, useMemo as useMemo48, useRef as useRef27, useState as useState37 } from "react";
-import { Internals as Internals32 } from "remotion";
+import { Internals as Internals33 } from "remotion";
 import { NoReactInternals as NoReactInternals11 } from "remotion/no-react";
 
 // src/helpers/get-sequence-double-click-action.ts
@@ -19994,10 +20091,21 @@ var getSequenceDoubleClickAction = ({
   }
   return canOpenInEditor ? "open-in-editor" : null;
 };
+var getConnectedCompositionFrame = ({
+  timelinePosition,
+  sequence,
+  sequenceFrameOffset
+}) => {
+  const relativeFrame = timelinePosition - sequence.from;
+  if (relativeFrame < 0 || relativeFrame >= sequence.duration) {
+    return null;
+  }
+  return sequence.frozenFrame ?? relativeFrame + sequenceFrameOffset;
+};
 
 // src/components/InitialCompositionLoader.tsx
 import { useCallback as useCallback40, useContext as useContext27, useEffect as useEffect38 } from "react";
-import { Internals as Internals31 } from "remotion";
+import { Internals as Internals32 } from "remotion";
 
 // src/helpers/persist-open-folders.tsx
 import { createContext as createContext17 } from "react";
@@ -20246,9 +20354,9 @@ var explorerSidebarTabs = createRef8();
 
 // src/components/use-select-asset.ts
 import { useCallback as useCallback39, useContext as useContext25 } from "react";
-import { Internals as Internals30 } from "remotion";
+import { Internals as Internals31 } from "remotion";
 var useSelectAsset = () => {
-  const { setCanvasContent } = useContext25(Internals30.CompositionSetters);
+  const { setCanvasContent } = useContext25(Internals31.CompositionSetters);
   const { setAssetFoldersExpanded } = useContext25(FolderContext);
   return useCallback39((asset) => {
     setCanvasContent({ type: "asset", asset });
@@ -20322,14 +20430,18 @@ var useStaticFiles = () => {
 // src/components/InitialCompositionLoader.tsx
 var useSelectComposition = () => {
   const { setCompositionFoldersExpanded } = useContext27(FolderContext);
-  const { setCanvasContent } = useContext27(Internals31.CompositionSetters);
+  const { setCanvasContent } = useContext27(Internals32.CompositionSetters);
+  const setFrame = Internals32.useTimelineSetFrame();
   const isMobileLayout = useMobileLayout();
   const { setSidebarCollapsedState } = useContext27(SidebarContext);
-  return useCallback40((c, push) => {
+  return useCallback40((c, push, frame2 = null) => {
     if (push) {
       pushUrl(`/${c.id}`);
     }
     explorerSidebarTabs.current?.selectCompositionPanel();
+    if (frame2 !== null) {
+      setFrame((current) => ({ ...current, [c.id]: frame2 }));
+    }
     setCanvasContent({ type: "composition", compositionId: c.id });
     const { folderName, parentFolderName } = c;
     if (folderName !== null) {
@@ -20352,12 +20464,13 @@ var useSelectComposition = () => {
     isMobileLayout,
     setCanvasContent,
     setCompositionFoldersExpanded,
+    setFrame,
     setSidebarCollapsedState
   ]);
 };
 var InitialCompositionLoader = () => {
-  const { compositions, canvasContent } = useContext27(Internals31.CompositionManager);
-  const { setCanvasContent } = useContext27(Internals31.CompositionSetters);
+  const { compositions, canvasContent } = useContext27(Internals32.CompositionManager);
+  const { setCanvasContent } = useContext27(Internals32.CompositionSetters);
   const selectComposition = useSelectComposition();
   const selectAsset = useSelectAsset();
   const staticFiles = useStaticFiles();
@@ -20744,7 +20857,7 @@ var getSequenceContextMenuItems = ({
 import { jsx as jsx78, jsxs as jsxs36, Fragment as Fragment15 } from "react/jsx-runtime";
 var emptyContextMenuValues = [];
 var SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, target }) => {
-  const { setDragOverrides, clearDragOverrides, setPropStatuses } = useContext28(Internals32.VisualModeSettersContext);
+  const { setDragOverrides, clearDragOverrides, setPropStatuses } = useContext28(Internals33.VisualModeSettersContext);
   const { editorSnapping } = useContext28(EditorSnappingContext);
   const transformOriginDrag = target?.transformOriginDrag ?? null;
   const parsed = useMemo48(() => transformOriginDrag === null ? null : parseTransformOrigin(transformOriginDrag.originValue), [transformOriginDrag]);
@@ -20832,16 +20945,16 @@ var SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, target
       });
       const translate = serializeTranslate(nextTranslateX, nextTranslateY);
       last = { uv: nextUv, origin, translate };
-      setDragOverrides(transformOriginDrag.nodePath, transformOriginFieldKey, transformOriginDrag.originPropStatus.status === "keyframed" ? Internals32.makeKeyframedDragOverride({
+      setDragOverrides(transformOriginDrag.nodePath, transformOriginFieldKey, transformOriginDrag.originPropStatus.status === "keyframed" ? Internals33.makeKeyframedDragOverride({
         status: transformOriginDrag.originPropStatus,
         frame: transformOriginDrag.sourceFrame,
         value: origin
-      }) : Internals32.makeStaticDragOverride(origin));
-      setDragOverrides(transformOriginDrag.nodePath, translateFieldKey, transformOriginDrag.translatePropStatus.status === "keyframed" ? Internals32.makeKeyframedDragOverride({
+      }) : Internals33.makeStaticDragOverride(origin));
+      setDragOverrides(transformOriginDrag.nodePath, translateFieldKey, transformOriginDrag.translatePropStatus.status === "keyframed" ? Internals33.makeKeyframedDragOverride({
         status: transformOriginDrag.translatePropStatus,
         frame: transformOriginDrag.sourceFrame,
         value: translate
-      }) : Internals32.makeStaticDragOverride(translate));
+      }) : Internals33.makeStaticDragOverride(translate));
     };
     updateFromPointerPosition();
     const onPointerMove = (moveEvent) => {
@@ -21008,10 +21121,10 @@ var SelectedOutlinePolygon = ({
   snapTargets,
   target
 }) => {
-  const { getDragOverrides } = useContext28(Internals32.VisualModeDragOverridesContext);
-  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext28(Internals32.VisualModeSettersContext);
+  const { getDragOverrides } = useContext28(Internals33.VisualModeDragOverridesContext);
+  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext28(Internals33.VisualModeSettersContext);
   const { editorSnapping } = useContext28(EditorSnappingContext);
-  const timelinePosition = Internals32.Timeline.useTimelinePosition();
+  const timelinePosition = Internals33.Timeline.useTimelinePosition();
   const timelinePositionRef = useRef27(timelinePosition);
   timelinePositionRef.current = timelinePosition;
   const polygonRef = useRef27(null);
@@ -21104,13 +21217,13 @@ var SelectedOutlinePolygon = ({
           throw new Error("Expected drag value to be available");
         }
         if (dragState.target.propStatus.status === "keyframed") {
-          setDragOverrides(dragState.target.nodePath, translateFieldKey, Internals32.makeKeyframedDragOverride({
+          setDragOverrides(dragState.target.nodePath, translateFieldKey, Internals33.makeKeyframedDragOverride({
             status: dragState.target.propStatus,
             frame: dragState.sourceFrame,
             value
           }));
         } else {
-          setDragOverrides(dragState.target.nodePath, translateFieldKey, Internals32.makeStaticDragOverride(value));
+          setDragOverrides(dragState.target.nodePath, translateFieldKey, Internals33.makeStaticDragOverride(value));
         }
       }
     };
@@ -21296,9 +21409,9 @@ var SelectedOutlineScaleEdgeLine = ({
   onSelect,
   target
 }) => {
-  const { getDragOverrides } = useContext28(Internals32.VisualModeDragOverridesContext);
-  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext28(Internals32.VisualModeSettersContext);
-  const timelinePosition = Internals32.Timeline.useTimelinePosition();
+  const { getDragOverrides } = useContext28(Internals33.VisualModeDragOverridesContext);
+  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext28(Internals33.VisualModeSettersContext);
+  const timelinePosition = Internals33.Timeline.useTimelinePosition();
   const timelinePositionRef = useRef27(timelinePosition);
   timelinePositionRef.current = timelinePosition;
   const scaleDrag = target?.scaleDrag ?? null;
@@ -21360,13 +21473,13 @@ var SelectedOutlineScaleEdgeLine = ({
           throw new Error("Expected scale drag value to be available");
         }
         if (dragState.target.propStatus.status === "keyframed") {
-          setDragOverrides(dragState.target.nodePath, scaleFieldKey, Internals32.makeKeyframedDragOverride({
+          setDragOverrides(dragState.target.nodePath, scaleFieldKey, Internals33.makeKeyframedDragOverride({
             status: dragState.target.propStatus,
             frame: dragState.sourceFrame,
             value
           }));
         } else {
-          setDragOverrides(dragState.target.nodePath, scaleFieldKey, Internals32.makeStaticDragOverride(value));
+          setDragOverrides(dragState.target.nodePath, scaleFieldKey, Internals33.makeStaticDragOverride(value));
         }
       }
     };
@@ -21488,10 +21601,10 @@ var SelectedOutlineRotationCornerHandle = ({
   onSelect,
   target
 }) => {
-  const { getDragOverrides } = useContext28(Internals32.VisualModeDragOverridesContext);
-  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext28(Internals32.VisualModeSettersContext);
+  const { getDragOverrides } = useContext28(Internals33.VisualModeDragOverridesContext);
+  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext28(Internals33.VisualModeSettersContext);
   const { editorSnapping } = useContext28(EditorSnappingContext);
-  const timelinePosition = Internals32.Timeline.useTimelinePosition();
+  const timelinePosition = Internals33.Timeline.useTimelinePosition();
   const timelinePositionRef = useRef27(timelinePosition);
   timelinePositionRef.current = timelinePosition;
   const rotationDrag = target?.rotationDrag ?? null;
@@ -21558,13 +21671,13 @@ var SelectedOutlineRotationCornerHandle = ({
           throw new Error("Expected rotation drag value to be available");
         }
         if (dragState.target.propStatus.status === "keyframed") {
-          setDragOverrides(dragState.target.nodePath, rotateFieldKey, Internals32.makeKeyframedDragOverride({
+          setDragOverrides(dragState.target.nodePath, rotateFieldKey, Internals33.makeKeyframedDragOverride({
             status: dragState.target.propStatus,
             frame: dragState.sourceFrame,
             value
           }));
         } else {
-          setDragOverrides(dragState.target.nodePath, rotateFieldKey, Internals32.makeStaticDragOverride(value));
+          setDragOverrides(dragState.target.nodePath, rotateFieldKey, Internals33.makeStaticDragOverride(value));
         }
       }
     };
@@ -21730,12 +21843,12 @@ var SelectedOutlineElement = ({
   target
 }) => {
   const { previewServerState } = useContext28(StudioServerConnectionCtx);
-  const { setPropStatuses } = useContext28(Internals32.VisualModeSettersContext);
-  const updateResolvedStackTrace = useContext28(Internals32.SequenceStackTracesUpdateContext);
+  const { setPropStatuses } = useContext28(Internals33.VisualModeSettersContext);
+  const updateResolvedStackTrace = useContext28(Internals33.SequenceStackTracesUpdateContext);
   const confirm = useConfirmationDialog();
   const selectAsset = useSelectAsset();
   const selectComposition = useSelectComposition();
-  const { compositions } = useContext28(Internals32.CompositionManager);
+  const { compositions } = useContext28(Internals33.CompositionManager);
   const { setSelectedModal } = useContext28(ModalsContext);
   const resolveOriginalLocation = React62.useCallback(async (resolveTarget) => {
     const stack2 = resolveTarget.sequence.getStack();
@@ -21964,7 +22077,7 @@ var SelectedOutlineElement = ({
 
 // src/components/SelectedOutlineUvControls.tsx
 import React63, { useContext as useContext29, useMemo as useMemo49 } from "react";
-import { Internals as Internals33 } from "remotion";
+import { Internals as Internals34 } from "remotion";
 import { jsx as jsx79, jsxs as jsxs37, Fragment as Fragment16 } from "react/jsx-runtime";
 var getSvgPointFromPointerEvent = ({
   event,
@@ -22125,7 +22238,7 @@ var getLocalEllipseWidthProgress = ({
   }) / (width / 2);
 };
 var SelectedUvEllipseStartHandle = ({ control, onDraggingChange, outline }) => {
-  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext29(Internals33.VisualModeSettersContext);
+  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext29(Internals34.VisualModeSettersContext);
   const { startControl } = control;
   const field = startControl?.field;
   const onPointerDown = React63.useCallback((event) => {
@@ -22160,11 +22273,11 @@ var SelectedUvEllipseStartHandle = ({ control, onDraggingChange, outline }) => {
         width: control.width
       }), field.fieldSchema);
       lastValue = nextValue;
-      setEffectDragOverrides(control.handle.nodePath, control.handle.effectIndex, field.fieldKey, field.propStatus.status === "keyframed" ? Internals33.makeKeyframedDragOverride({
+      setEffectDragOverrides(control.handle.nodePath, control.handle.effectIndex, field.fieldKey, field.propStatus.status === "keyframed" ? Internals34.makeKeyframedDragOverride({
         status: field.propStatus,
         frame: control.handle.sourceFrame,
         value: nextValue
-      }) : Internals33.makeStaticDragOverride(nextValue));
+      }) : Internals34.makeStaticDragOverride(nextValue));
     };
     const onPointerMove = (moveEvent) => {
       moveEvent.preventDefault();
@@ -22234,7 +22347,7 @@ var SelectedUvEllipseStartHandle = ({ control, onDraggingChange, outline }) => {
   });
 };
 var SelectedUvEllipseResizeHandle = ({ axis, control, onDraggingChange, outline }) => {
-  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext29(Internals33.VisualModeSettersContext);
+  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext29(Internals34.VisualModeSettersContext);
   const resizeControl = control.resize.find((item) => item.axis === axis);
   const field = resizeControl?.field;
   const onPointerDown = React63.useCallback((event) => {
@@ -22270,11 +22383,11 @@ var SelectedUvEllipseResizeHandle = ({ axis, control, onDraggingChange, outline
       });
       const nextValue = roundNumericUvEllipseValue(Math.max(0, axisValue * 2), field.fieldSchema);
       lastValue = nextValue;
-      setEffectDragOverrides(control.handle.nodePath, control.handle.effectIndex, field.fieldKey, field.propStatus.status === "keyframed" ? Internals33.makeKeyframedDragOverride({
+      setEffectDragOverrides(control.handle.nodePath, control.handle.effectIndex, field.fieldKey, field.propStatus.status === "keyframed" ? Internals34.makeKeyframedDragOverride({
         status: field.propStatus,
         frame: control.handle.sourceFrame,
         value: nextValue
-      }) : Internals33.makeStaticDragOverride(nextValue));
+      }) : Internals34.makeStaticDragOverride(nextValue));
     };
     const onPointerMove = (moveEvent) => {
       moveEvent.preventDefault();
@@ -22374,7 +22487,7 @@ var trimLineToCircleEdges = ({
   };
 };
 var SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
-  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext29(Internals33.VisualModeSettersContext);
+  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext29(Internals34.VisualModeSettersContext);
   const { editorSnapping } = useContext29(EditorSnappingContext);
   const { rotationControl } = control;
   const field = rotationControl?.field;
@@ -22413,11 +22526,11 @@ var SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
       });
       lastValue = nextValue;
       forceSpecificCursor(getRotationCursor(startCursorDegrees + cursorDelta));
-      setEffectDragOverrides(control.handle.nodePath, control.handle.effectIndex, field.fieldKey, field.propStatus.status === "keyframed" ? Internals33.makeKeyframedDragOverride({
+      setEffectDragOverrides(control.handle.nodePath, control.handle.effectIndex, field.fieldKey, field.propStatus.status === "keyframed" ? Internals34.makeKeyframedDragOverride({
         status: field.propStatus,
         frame: control.handle.sourceFrame,
         value: nextValue
-      }) : Internals33.makeStaticDragOverride(nextValue));
+      }) : Internals34.makeStaticDragOverride(nextValue));
     };
     const onPointerMove = (moveEvent) => {
       moveEvent.preventDefault();
@@ -22534,7 +22647,7 @@ var SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
   });
 };
 var SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSelect, outline }) => {
-  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext29(Internals33.VisualModeSettersContext);
+  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext29(Internals34.VisualModeSettersContext);
   const { editorSnapping } = useContext29(EditorSnappingContext);
   const position = useMemo49(() => getUvHandlePosition(outline.points, handle.value), [handle.value, outline.points]);
   const onPointerDown = React63.useCallback((event) => {
@@ -22575,11 +22688,11 @@ var SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSelect
       }) : rawUv;
       const nextValue = roundUvCoordinate(constrainUv(snappedUv, handle.fieldSchema), handle.fieldSchema);
       lastValue = nextValue;
-      setEffectDragOverrides(handle.nodePath, handle.effectIndex, handle.fieldKey, handle.propStatus.status === "keyframed" ? Internals33.makeKeyframedDragOverride({
+      setEffectDragOverrides(handle.nodePath, handle.effectIndex, handle.fieldKey, handle.propStatus.status === "keyframed" ? Internals34.makeKeyframedDragOverride({
         status: handle.propStatus,
         frame: handle.sourceFrame,
         value: nextValue
-      }) : Internals33.makeStaticDragOverride(nextValue));
+      }) : Internals34.makeStaticDragOverride(nextValue));
     };
     const updateDragFromPointerEvent = (pointerEvent) => {
       if (!dragging) {
@@ -23022,19 +23135,19 @@ var SelectedOutlineOverlay = ({
   translationY
 }) => {
   const { selectedItems, selectItem } = useTimelineSelection();
-  const { sequences } = useContext30(Internals34.SequenceManager);
-  const { canvasContent, compositions } = useContext30(Internals34.CompositionManager);
-  const { propStatuses } = useContext30(Internals34.VisualModePropStatusesContext);
+  const { sequences } = useContext30(Internals35.SequenceManager);
+  const { canvasContent, compositions } = useContext30(Internals35.CompositionManager);
+  const { propStatuses } = useContext30(Internals35.VisualModePropStatusesContext);
   const { previewServerState } = useContext30(StudioServerConnectionCtx);
-  const { overrideIdToNodePathMappings } = useContext30(Internals34.OverrideIdsToNodePathsGettersContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext30(Internals34.VisualModeDragOverridesContext);
-  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext30(Internals34.VisualModeSettersContext);
+  const { overrideIdToNodePathMappings } = useContext30(Internals35.OverrideIdsToNodePathsGettersContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext30(Internals35.VisualModeDragOverridesContext);
+  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext30(Internals35.VisualModeSettersContext);
   const { getScaleLockState } = useContext30(ScaleLockContext);
   const { editorShowOutlines } = useContext30(EditorShowOutlinesContext);
   const { editorShowGuides, guidesList } = useContext30(EditorShowGuidesContext);
   const { frameBack, frameForward, getCurrentFrame: getCurrentFrame2, seek } = PlayerInternals9.usePlayer();
   const keybindings = useKeybinding();
-  const timelinePosition = Internals34.Timeline.useTimelinePosition();
+  const timelinePosition = Internals35.Timeline.useTimelinePosition();
   const [outlines, setOutlines] = useState38([]);
   const [hoveredOutlineKey, setHoveredOutlineKey] = useState38(null);
   const [draggingOutline, setDraggingOutline] = useState38(false);
@@ -23079,7 +23192,7 @@ var SelectedOutlineOverlay = ({
       const containsSelection = sequenceKeysContainingSelection.has(key3);
       const nodePath = nodePathInfo.sequenceSubscriptionKey;
       const { controls } = sequence;
-      const nodePropStatuses = Internals34.getPropStatusesCtx(propStatuses, nodePath);
+      const nodePropStatuses = Internals35.getPropStatusesCtx(propStatuses, nodePath);
       const sourceFrame = timelinePosition - keyframeDisplayOffset;
       const dragOverrides = getDragOverrides(nodePath) ?? {};
       const activeSchema = controls ? getSelectedOutlineActiveSchema({
@@ -23097,7 +23210,7 @@ var SelectedOutlineOverlay = ({
       const rotationPropStatus = nodePropStatuses?.[rotateFieldKey];
       const transformOriginFieldSchema = activeSchema?.[transformOriginFieldKey];
       const transformOriginPropStatus = nodePropStatuses?.[transformOriginFieldKey];
-      const transformOriginValueForRotation = transformOriginFieldSchema?.type === "transform-origin" && (transformOriginPropStatus?.status === "static" || transformOriginPropStatus?.status === "keyframed") ? String(Internals34.getEffectiveVisualModeValue({
+      const transformOriginValueForRotation = transformOriginFieldSchema?.type === "transform-origin" && (transformOriginPropStatus?.status === "static" || transformOriginPropStatus?.status === "keyframed") ? String(Internals35.getEffectiveVisualModeValue({
         propStatus: transformOriginPropStatus,
         dragOverrideValue: dragOverrides[transformOriginFieldKey],
         defaultValue: transformOriginFieldSchema.default,
@@ -23148,7 +23261,7 @@ var SelectedOutlineOverlay = ({
             fieldKey: scaleFieldKey,
             defaultValue: (() => {
               const dragOverrideValue = dragOverrides[scaleFieldKey];
-              const effectiveValue = Internals34.getEffectiveVisualModeValue({
+              const effectiveValue = Internals35.getEffectiveVisualModeValue({
                 propStatus: scalePropStatus,
                 dragOverrideValue,
                 defaultValue: scaleFieldSchema.default,
@@ -23177,21 +23290,21 @@ var SelectedOutlineOverlay = ({
           nodePath,
           originDefault: transformOriginFieldSchema.default,
           originPropStatus: transformOriginPropStatus,
-          originValue: String(Internals34.getEffectiveVisualModeValue({
+          originValue: String(Internals35.getEffectiveVisualModeValue({
             propStatus: transformOriginPropStatus,
             dragOverrideValue: dragOverrides[transformOriginFieldKey],
             defaultValue: transformOriginFieldSchema.default,
             frame: transformOriginSourceFrame,
             shouldResortToDefaultValueIfUndefined: true
           }) ?? transformOriginFieldSchema.default),
-          rotateValue: String(rotationPropStatus?.status === "static" || rotationPropStatus?.status === "keyframed" ? Internals34.getEffectiveVisualModeValue({
+          rotateValue: String(rotationPropStatus?.status === "static" || rotationPropStatus?.status === "keyframed" ? Internals35.getEffectiveVisualModeValue({
             propStatus: rotationPropStatus,
             dragOverrideValue: dragOverrides[rotateFieldKey],
             defaultValue: rotationFieldSchema?.type === "rotation-css" ? rotationFieldSchema.default : "0deg",
             frame: transformOriginSourceFrame,
             shouldResortToDefaultValueIfUndefined: true
           }) ?? "0deg" : "0deg"),
-          scaleValue: scalePropStatus?.status === "static" || scalePropStatus?.status === "keyframed" ? String(Internals34.getEffectiveVisualModeValue({
+          scaleValue: scalePropStatus?.status === "static" || scalePropStatus?.status === "keyframed" ? String(Internals35.getEffectiveVisualModeValue({
             propStatus: scalePropStatus,
             dragOverrideValue: dragOverrides[scaleFieldKey],
             defaultValue: scaleFieldSchema?.type === "scale" ? scaleFieldSchema.default : 1,
@@ -23202,7 +23315,7 @@ var SelectedOutlineOverlay = ({
           sourceFrame: transformOriginSourceFrame,
           translateDefault: fieldSchema.default,
           translatePropStatus: propStatus,
-          translateValue: String(Internals34.getEffectiveVisualModeValue({
+          translateValue: String(Internals35.getEffectiveVisualModeValue({
             propStatus,
             dragOverrideValue: dragOverrides[translateFieldKey],
             defaultValue: fieldSchema.default,
@@ -23438,13 +23551,13 @@ var SelectedOutlineOverlay = ({
         throw new Error("Expected drag value to be available");
       }
       if (dragState.target.propStatus.status === "keyframed") {
-        setDragOverrides(dragState.target.nodePath, translateFieldKey, Internals34.makeKeyframedDragOverride({
+        setDragOverrides(dragState.target.nodePath, translateFieldKey, Internals35.makeKeyframedDragOverride({
           status: dragState.target.propStatus,
           frame: dragState.sourceFrame,
           value
         }));
       } else {
-        setDragOverrides(dragState.target.nodePath, translateFieldKey, Internals34.makeStaticDragOverride(value));
+        setDragOverrides(dragState.target.nodePath, translateFieldKey, Internals35.makeStaticDragOverride(value));
       }
     }
   }, [
@@ -23711,7 +23824,7 @@ var VideoPreview = ({
   });
 };
 var CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, assetMetadata }) => {
-  const { size: previewSize } = useContext32(Internals35.PreviewSizeContext);
+  const { size: previewSize } = useContext32(Internals36.PreviewSizeContext);
   const { centerX, centerY, yCorrection, xCorrection, scale } = useMemo51(() => {
     if (contentDimensions === "none") {
       return {
@@ -23822,9 +23935,9 @@ var PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) =
   ]);
   useEffect40(() => {
     const { current } = portalContainer;
-    current?.appendChild(Internals35.portalNode());
+    current?.appendChild(Internals36.portalNode());
     return () => {
-      current?.removeChild(Internals35.portalNode());
+      current?.removeChild(Internals36.portalNode());
     };
   }, []);
   const onPointerDown = useCallback42((event) => {
@@ -23995,7 +24108,7 @@ var getDropPosition = ({
   if (contentDimensions === null || contentDimensions === "none") {
     return null;
   }
-  const scale = Internals36.calculateScale({
+  const scale = Internals37.calculateScale({
     canvasSize: size2,
     compositionHeight: contentDimensions.height,
     compositionWidth: contentDimensions.width,
@@ -24025,7 +24138,7 @@ var isDragEventInsideCanvas = (event) => {
   return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
 };
 var Canvas = ({ canvasContent, size: size2 }) => {
-  const { setSize, size: previewSize } = useContext33(Internals36.PreviewSizeContext);
+  const { setSize, size: previewSize } = useContext33(Internals37.PreviewSizeContext);
   const { editorZoomGestures } = useContext33(EditorZoomGesturesContext);
   const previewSnapshotRef = useRef30({
     previewSize,
@@ -24037,10 +24150,10 @@ var Canvas = ({ canvasContent, size: size2 }) => {
   const touchPinchRef = useRef30(null);
   const keybindings = useKeybinding();
   const confirm = useConfirmationDialog();
-  const config = Internals36.useUnsafeVideoConfig();
+  const config = Internals37.useUnsafeVideoConfig();
   const areRulersVisible = useIsRulerVisible();
   const { editorShowGuides } = useContext33(EditorShowGuidesContext);
-  const { compositions } = useContext33(Internals36.CompositionManager);
+  const { compositions } = useContext33(Internals37.CompositionManager);
   const { previewServerState, subscribeToEvent } = useContext33(StudioServerConnectionCtx);
   const previewServerClientId = previewServerState.type === "connected" ? previewServerState.clientId : null;
   const [isAddingAsset, setIsAddingAsset] = useState39(false);
@@ -24100,7 +24213,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
     }
     ev.preventDefault();
     setSize((prevSize) => {
-      const scale = Internals36.calculateScale({
+      const scale = Internals37.calculateScale({
         canvasSize: size2,
         compositionHeight: contentDimensions.height,
         compositionWidth: contentDimensions.width,
@@ -24173,7 +24286,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
       }
       e.preventDefault();
       suppressWheelFromWebKitPinchRef.current = true;
-      const fitted = Internals36.calculateScale({
+      const fitted = Internals37.calculateScale({
         canvasSize: canvasSz,
         compositionHeight: cdim.height,
         compositionWidth: cdim.width,
@@ -24193,7 +24306,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
       const dimensions = cdim;
       e.preventDefault();
       setSize((prevSize) => {
-        const scale = Internals36.calculateScale({
+        const scale = Internals37.calculateScale({
           canvasSize: canvasSz,
           compositionHeight: dimensions.height,
           compositionWidth: dimensions.width,
@@ -24248,7 +24361,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
       if (initialDistance < 0.000001) {
         return;
       }
-      const fitted = Internals36.calculateScale({
+      const fitted = Internals37.calculateScale({
         canvasSize: snap.canvasSize,
         compositionHeight: snap.contentDimensions.height,
         compositionWidth: snap.contentDimensions.width,
@@ -24272,7 +24385,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
       setSize((prevSize) => {
         const canvasSz = snap.canvasSize;
         const cdim = snap.contentDimensions;
-        const scale = Internals36.calculateScale({
+        const scale = Internals37.calculateScale({
           canvasSize: canvasSz,
           compositionHeight: cdim.height,
           compositionWidth: cdim.width,
@@ -24325,7 +24438,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
       return;
     }
     setSize((prevSize) => {
-      const scale = Internals36.calculateScale({
+      const scale = Internals37.calculateScale({
         canvasSize: size2,
         compositionHeight: contentDimensions.height,
         compositionWidth: contentDimensions.width,
@@ -24348,7 +24461,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
       return;
     }
     setSize((prevSize) => {
-      const scale = Internals36.calculateScale({
+      const scale = Internals37.calculateScale({
         canvasSize: size2,
         compositionHeight: contentDimensions.height,
         compositionWidth: contentDimensions.width,
@@ -24612,6 +24725,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
           files,
           compositionFile,
           compositionId: currentCompositionId,
+          destinationDimensions: contentDimensions === "none" ? null : contentDimensions,
           dropPosition
         });
       } else if (isAssetDragEvent(event)) {
@@ -24623,6 +24737,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
           assetPaths: [assetPath],
           compositionFile,
           compositionId: currentCompositionId,
+          destinationDimensions: contentDimensions === "none" ? null : contentDimensions,
           dropPosition
         });
       } else if (isSfxDragEvent(event)) {
@@ -24676,6 +24791,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
           url,
           compositionFile,
           compositionId: currentCompositionId,
+          destinationDimensions: contentDimensions === "none" ? null : contentDimensions,
           dropPosition
         });
       }
@@ -24740,17 +24856,17 @@ var Canvas = ({ canvasContent, size: size2 }) => {
 
 // src/components/FramePersistor.tsx
 import { useEffect as useEffect42 } from "react";
-import { Internals as Internals37, useVideoConfig as useVideoConfig2 } from "remotion";
+import { Internals as Internals38, useVideoConfig as useVideoConfig2 } from "remotion";
 var FramePersistor = () => {
-  const [playing] = Internals37.Timeline.usePlayingState();
+  const [playing] = Internals38.Timeline.usePlayingState();
   const config = useVideoConfig2();
-  const frame2 = Internals37.Timeline.useTimelinePosition();
-  const setFrame = Internals37.useTimelineSetFrame();
+  const frame2 = Internals38.Timeline.useTimelinePosition();
+  const setFrame = Internals38.useTimelineSetFrame();
   useEffect42(() => {
     if (!playing) {
       setFrame((f) => {
         const newObj = f[config.id] === frame2 ? f : { ...f, [config.id]: frame2 };
-        Internals37.persistCurrentFrame(newObj);
+        Internals38.persistCurrentFrame(newObj);
         return newObj;
       });
     }
@@ -24842,9 +24958,9 @@ var container19 = {
   flexDirection: "column"
 };
 var CanvasOrLoading = ({ size: size2 }) => {
-  const resolved = Internals38.useResolvedVideoConfig(null);
+  const resolved = Internals39.useResolvedVideoConfig(null);
   const { setZoom } = useContext34(TimelineZoomCtx);
-  const { canvasContent } = useContext34(Internals38.CompositionManager);
+  const { canvasContent } = useContext34(Internals39.CompositionManager);
   const { error: renderError } = useContext34(RenderErrorContext);
   useEffect43(() => {
     if (resolved?.type !== "success" && resolved?.type !== "success-and-refreshing") {
@@ -24933,7 +25049,7 @@ var ErrorLoading = ({ error, calculateMetadataContext }) => {
       canHaveDismissButton: false,
       keyboardShortcuts: true,
       error,
-      onRetry: () => Internals38.resolveCompositionsRef.current?.reloadCurrentlySelectedComposition(),
+      onRetry: () => Internals39.resolveCompositionsRef.current?.reloadCurrentlySelectedComposition(),
       calculateMetadata: calculateMetadataContext
     }, error.stack)
   });
@@ -24943,7 +25059,7 @@ var ErrorLoading = ({ error, calculateMetadataContext }) => {
 import { jsx as jsx88 } from "react/jsx-runtime";
 var CanvasIfSizeIsAvailable = () => {
   const rulersAreVisible = useIsRulerVisible();
-  const context = useContext35(Internals39.CurrentScaleContext);
+  const context = useContext35(Internals40.CurrentScaleContext);
   const sizeWithRulersApplied = useMemo53(() => {
     const size2 = context && context.type === "canvas-size" ? context.canvasSize : null;
     if (!rulersAreVisible) {
@@ -24964,7 +25080,7 @@ var CanvasIfSizeIsAvailable = () => {
 
 // src/components/CurrentCompositionSideEffects.tsx
 import { useContext as useContext36, useEffect as useEffect44 } from "react";
-import { Internals as Internals40 } from "remotion";
+import { Internals as Internals41 } from "remotion";
 
 // src/helpers/document-title.ts
 import { NoReactInternals as NoReactInternals13 } from "remotion/no-react";
@@ -25019,7 +25135,7 @@ var getProgressInBrackets = (selectedCompositionId, jobs) => {
 // src/components/CurrentCompositionSideEffects.tsx
 var TitleUpdater = () => {
   const renderQueue = useContext36(RenderQueueContext);
-  const { canvasContent } = useContext36(Internals40.CompositionManager);
+  const { canvasContent } = useContext36(Internals41.CompositionManager);
   const { jobs } = renderQueue;
   useEffect44(() => {
     if (!canvasContent) {
@@ -25112,7 +25228,7 @@ import {
   useRef as useRef32,
   useState as useState40
 } from "react";
-import { Internals as Internals41 } from "remotion";
+import { Internals as Internals42 } from "remotion";
 import { NoReactInternals as NoReactInternals15 } from "remotion/no-react";
 
 // src/api/delete-static-file.ts
@@ -25467,8 +25583,8 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }
   const onPointerEnter = useCallback46(() => {
     setHovered(true);
   }, []);
-  const { setCanvasContent } = useContext37(Internals41.CompositionSetters);
-  const { canvasContent } = useContext37(Internals41.CompositionManager);
+  const { setCanvasContent } = useContext37(Internals42.CompositionSetters);
+  const { canvasContent } = useContext37(Internals42.CompositionManager);
   const relativePath = useMemo55(() => {
     return parentFolder ? parentFolder + "/" + item.name : item.name;
   }, [parentFolder, item.name]);
@@ -25919,7 +26035,7 @@ import {
   useRef as useRef35,
   useState as useState44
 } from "react";
-import { Internals as Internals43 } from "remotion";
+import { Internals as Internals44 } from "remotion";
 
 // src/components/CompositionSelectorItem.tsx
 import {
@@ -26295,7 +26411,7 @@ var getFolderMenuItems = ({
 
 // src/components/SidebarRenderButton.tsx
 import { useCallback as useCallback50, useContext as useContext40, useMemo as useMemo59 } from "react";
-import { Internals as Internals42 } from "remotion";
+import { Internals as Internals43 } from "remotion";
 
 // src/icons/render.tsx
 import { jsx as jsx100 } from "react/jsx-runtime";
@@ -26325,7 +26441,7 @@ var SidebarRenderButton = ({ composition, visible }) => {
     };
   }, []);
   const connectionStatus = useContext40(StudioServerConnectionCtx).previewServerState.type;
-  const { props } = useContext40(Internals42.EditorPropsContext);
+  const { props } = useContext40(Internals43.EditorPropsContext);
   const onClick = useCallback50((e) => {
     const defaults = window.remotion_renderDefaults;
     if (!defaults) {
@@ -26799,7 +26915,7 @@ var getRootCompositionMenuItems = ({
 // src/components/CompositionSelector.tsx
 import { jsx as jsx103, jsxs as jsxs48 } from "react/jsx-runtime";
 var useCompositionNavigation = () => {
-  const { compositions, canvasContent } = useContext42(Internals43.CompositionManager);
+  const { compositions, canvasContent } = useContext42(Internals44.CompositionManager);
   const selectComposition = useSelectComposition();
   const navigateToNextComposition = useCallback52(() => {
     if (!canvasContent || canvasContent.type !== "composition" || compositions.length <= 1) {
@@ -26883,7 +26999,7 @@ var getAutoScrollSpeed = ({
   return 0;
 };
 var CompositionSelector = () => {
-  const { compositions, canvasContent, folders } = useContext42(Internals43.CompositionManager);
+  const { compositions, canvasContent, folders } = useContext42(Internals44.CompositionManager);
   const { foldersExpanded } = useContext42(ExpandedFoldersContext);
   const { setSelectedModal } = useContext42(ModalsContext);
   const connectionStatus = useContext42(StudioServerConnectionCtx).previewServerState.type;
@@ -26917,7 +27033,7 @@ var CompositionSelector = () => {
     };
   }, [rootDragHovered]);
   const toggleFolder = useCallback52((folderName, parentName) => {
-    Internals43.compositionSelectorRef.current?.toggleFolder(folderName, parentName);
+    Internals44.compositionSelectorRef.current?.toggleFolder(folderName, parentName);
   }, []);
   const openQuickSwitcher = useCallback52(() => {
     setSelectedModal({
@@ -27083,10 +27199,10 @@ var CompositionSelector = () => {
 
 // src/components/CompSelectorRef.tsx
 import { useCallback as useCallback53, useContext as useContext43, useImperativeHandle as useImperativeHandle8, useMemo as useMemo62 } from "react";
-import { Internals as Internals44 } from "remotion";
+import { Internals as Internals45 } from "remotion";
 import { jsx as jsx104 } from "react/jsx-runtime";
 var CompSelectorRef = ({ children }) => {
-  const { compositions } = useContext43(Internals44.CompositionManager);
+  const { compositions } = useContext43(Internals45.CompositionManager);
   const { compositionFoldersExpanded, setCompositionFoldersExpanded } = useContext43(FolderContext);
   const selectComposition = useSelectComposition();
   const toggleFolder = useCallback53((folderName, parentName) => {
@@ -27097,7 +27213,7 @@ var CompSelectorRef = ({ children }) => {
       return foldersExpandedState;
     });
   }, [setCompositionFoldersExpanded]);
-  useImperativeHandle8(Internals44.compositionSelectorRef, () => {
+  useImperativeHandle8(Internals45.compositionSelectorRef, () => {
     return {
       expandComposition: (compName) => {
         const compositionToExpand = compositions.find((c) => c.id === compName);
@@ -27354,13 +27470,13 @@ import React76, {
   useMemo as useMemo64,
   useState as useState47
 } from "react";
-import { Internals as Internals45 } from "remotion";
+import { Internals as Internals46 } from "remotion";
 import { NoReactInternals as NoReactInternals17 } from "remotion/no-react";
 import { jsx as jsx108 } from "react/jsx-runtime";
 var ObserveDefaultPropsContext = React76.createContext(null);
 var ObserveDefaultProps = ({ compositionId, readOnlyStudio, children }) => {
   const { previewServerState, subscribeToEvent } = useContext44(StudioServerConnectionCtx);
-  const { updateProps } = useContext44(Internals45.EditorPropsContext);
+  const { updateProps } = useContext44(Internals46.EditorPropsContext);
   const [canSaveDefaultPropsObjectState, setCanSaveDefaultProps] = useState47({});
   const canSaveDefaultProps = useMemo64(() => {
     if (compositionId === null) {
@@ -27440,7 +27556,7 @@ import {
   useMemo as useMemo154,
   useState as useState85
 } from "react";
-import { Internals as Internals72 } from "remotion";
+import { Internals as Internals73 } from "remotion";
 
 // src/components/get-zod-if-possible.tsx
 import {
@@ -27967,7 +28083,7 @@ var InspectorDefaultPropsWarnings = ({ warnings }) => {
 
 // src/components/InspectorPanel/DefaultInspector.tsx
 import { useContext as useContext55, useEffect as useEffect61, useMemo as useMemo109, useState as useState70 } from "react";
-import { Internals as Internals51 } from "remotion";
+import { Internals as Internals52 } from "remotion";
 
 // src/visual-controls/VisualControls.tsx
 import {
@@ -28157,7 +28273,7 @@ var VisualControlsProvider = ({ children }) => {
 // src/components/CurrentAsset.tsx
 import { formatBytes as formatBytes2 } from "@remotion/studio-shared";
 import { useCallback as useCallback60, useContext as useContext47, useMemo as useMemo69 } from "react";
-import { Internals as Internals47, staticFile as staticFile4 } from "remotion";
+import { Internals as Internals48, staticFile as staticFile4 } from "remotion";
 
 // src/helpers/format-media-duration.ts
 var formatMediaDuration = (seconds) => {
@@ -28569,7 +28685,7 @@ var InspectorInfoSubtitle = ({ children }) => {
 
 // src/components/NewComposition/use-rename-static-file.ts
 import { useCallback as useCallback59, useContext as useContext46 } from "react";
-import { Internals as Internals46 } from "remotion";
+import { Internals as Internals47 } from "remotion";
 
 // src/api/rename-static-file.ts
 import { getRemotionEnvironment as getRemotionEnvironment5 } from "remotion";
@@ -28637,8 +28753,8 @@ var useRenameStaticFile = ({
   relativePath,
   staticFiles
 }) => {
-  const { canvasContent } = useContext46(Internals46.CompositionManager);
-  const { setCanvasContent } = useContext46(Internals46.CompositionSetters);
+  const { canvasContent } = useContext46(Internals47.CompositionManager);
+  const { setCanvasContent } = useContext46(Internals47.CompositionSetters);
   return useCallback59(async (newName) => {
     const newRelativePath = getRenamedStaticFilePath({
       newName,
@@ -28780,7 +28896,7 @@ var AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStudio
   });
 };
 var CurrentAsset = ({ readOnlyStudio }) => {
-  const { canvasContent } = useContext47(Internals47.CompositionManager);
+  const { canvasContent } = useContext47(Internals48.CompositionManager);
   const assetName = canvasContent?.type === "asset" ? canvasContent.asset : null;
   return /* @__PURE__ */ jsx115(AssetInfo, {
     assetName,
@@ -28795,7 +28911,7 @@ import {
   useEffect as useEffect52,
   useMemo as useMemo74
 } from "react";
-import { Internals as Internals49 } from "remotion";
+import { Internals as Internals50 } from "remotion";
 
 // src/icons/react.tsx
 import { jsx as jsx116 } from "react/jsx-runtime";
@@ -28832,10 +28948,10 @@ var resolvedStackToSymbolicated = (location2) => {
 import { useCallback as useCallback61, useMemo as useMemo70 } from "react";
 
 // src/helpers/validate-new-comp-data.ts
-import { Internals as Internals48 } from "remotion";
+import { Internals as Internals49 } from "remotion";
 var validateCompositionName = (compName, compositions) => {
-  if (!Internals48.isCompositionIdValid(compName)) {
-    return Internals48.invalidCompositionErrorMessage;
+  if (!Internals49.isCompositionIdValid(compName)) {
+    return Internals49.invalidCompositionErrorMessage;
   }
   if (compositions.find((c) => c.id === compName)) {
     return `A composition with that name already exists.`;
@@ -29176,8 +29292,8 @@ var renderReactIcon = (color) => {
   });
 };
 var CurrentComposition = () => {
-  const video = Internals49.useVideo();
-  const { compositions } = useContext48(Internals49.CompositionManager);
+  const video = Internals50.useVideo();
+  const { compositions } = useContext48(Internals50.CompositionManager);
   const currentComposition = useMemo74(() => {
     if (!video) {
       return null;
@@ -34547,7 +34663,7 @@ var VisualControlsContent = () => {
 
 // src/components/InspectorPanel/CompositionDimensions.tsx
 import { useCallback as useCallback97, useEffect as useEffect60, useMemo as useMemo108, useRef as useRef45, useState as useState69 } from "react";
-import { Internals as Internals50 } from "remotion";
+import { Internals as Internals51 } from "remotion";
 
 // src/components/InspectorPanel/optimistic-composition-metadata.ts
 var removePendingValue = ({
@@ -34728,8 +34844,8 @@ var CompositionMetadataValue = ({
   });
 };
 var CompositionDimensions = ({ compositionId, disabled, stack: stack2 }) => {
-  const video = Internals50.useVideo();
-  const resolvedVideoConfig = Internals50.useResolvedVideoConfig(compositionId);
+  const video = Internals51.useVideo();
+  const resolvedVideoConfig = Internals51.useResolvedVideoConfig(compositionId);
   const resolvedConfig = resolvedVideoConfig?.type === "success" || resolvedVideoConfig?.type === "success-and-refreshing" ? resolvedVideoConfig.result : null;
   const resolvedConfigRef = useRef45(resolvedConfig);
   resolvedConfigRef.current = resolvedConfig;
@@ -34853,7 +34969,7 @@ var CompositionDimensions = ({ compositionId, disabled, stack: stack2 }) => {
 // src/components/InspectorPanel/DefaultInspector.tsx
 import { jsx as jsx174, jsxs as jsxs94, Fragment as Fragment29 } from "react/jsx-runtime";
 var DefaultInspector = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
-  const { canvasContent } = useContext55(Internals51.CompositionManager);
+  const { canvasContent } = useContext55(Internals52.CompositionManager);
   const hasSelectedAsset = canvasContent?.type === "asset";
   const z = useZodIfPossible();
   const canSaveDefaultProps = useContext55(ObserveDefaultPropsContext);
@@ -35039,7 +35155,7 @@ var getSameSequenceInspectorSelection = (selections) => {
 
 // src/components/InspectorPanel/EasingInspector.tsx
 import { useCallback as useCallback107, useContext as useContext67, useMemo as useMemo120 } from "react";
-import { Internals as Internals60, useVideoConfig as useVideoConfig6 } from "remotion";
+import { Internals as Internals61, useVideoConfig as useVideoConfig6 } from "remotion";
 
 // src/state/render-frame.ts
 var renderFrame = (frame2, fps) => {
@@ -35072,7 +35188,7 @@ import {
   useRef as useRef46,
   useState as useState71
 } from "react";
-import { Easing, Internals as Internals52 } from "remotion";
+import { Easing, Internals as Internals53 } from "remotion";
 import { jsx as jsx175, jsxs as jsxs95, Fragment as Fragment30 } from "react/jsx-runtime";
 var SVG_WIDTH = 560;
 var SVG_HEIGHT = 320;
@@ -35307,14 +35423,14 @@ var areEasingsEqual = (first, second) => {
   }
 };
 var getEasingUpdateTargetKey = (update) => {
-  const nodePathKey = Internals52.makeSequencePropsSubscriptionKey(update.nodePath);
+  const nodePathKey = Internals53.makeSequencePropsSubscriptionKey(update.nodePath);
   if (update.type === "sequence") {
     return `sequence:${nodePathKey}:${update.fieldKey}:${update.segmentIndex}`;
   }
   return `effect:${nodePathKey}:${update.effectIndex}:${update.fieldKey}:${update.segmentIndex}`;
 };
 var getBuiltInVisualStyleFieldSchema = (fieldKey) => {
-  const transformSchema = Internals52.transformSchema;
+  const transformSchema = Internals53.transformSchema;
   const directField = transformSchema[fieldKey];
   if (directField) {
     return directField;
@@ -35496,16 +35612,16 @@ var EasingPresetButton = ({ currentEasing, disabled, onClick, preset }) => {
 };
 var EasingEditor = ({ state, renderHeader }) => {
   const { previewServerState } = useContext56(StudioServerConnectionCtx);
-  const sequencesRef = useContext56(Internals52.SequenceManagerRefContext);
-  const propStatusesRef = useContext56(Internals52.VisualModePropStatusesRefContext);
+  const sequencesRef = useContext56(Internals53.SequenceManagerRefContext);
+  const propStatusesRef = useContext56(Internals53.VisualModePropStatusesRefContext);
   const {
     setDragOverrides,
     clearDragOverrides,
     setEffectDragOverrides,
     clearEffectDragOverrides,
     setPropStatuses
-  } = useContext56(Internals52.VisualModeSettersContext);
-  const { overrideIdToNodePathMappings } = useContext56(Internals52.OverrideIdsToNodePathsGettersContext);
+  } = useContext56(Internals53.VisualModeSettersContext);
+  const { overrideIdToNodePathMappings } = useContext56(Internals53.OverrideIdsToNodePathsGettersContext);
   const svgRef = useRef46(null);
   const [mode, setMode] = useState71(() => easingToMode(state.initialEasing));
   const [bezier, setBezier] = useState71(() => easingToBezier(state.initialEasing));
@@ -35541,7 +35657,7 @@ var EasingEditor = ({ state, renderHeader }) => {
     const sequenceTargets = new Set;
     const effectTargets = new Set;
     for (const update of updates) {
-      const key3 = Internals52.makeSequencePropsSubscriptionKey(update.nodePath);
+      const key3 = Internals53.makeSequencePropsSubscriptionKey(update.nodePath);
       if (update.type === "sequence") {
         if (!sequenceTargets.has(key3)) {
           sequenceTargets.add(key3);
@@ -36260,7 +36376,7 @@ var getEasingSelectionFromCurrentKeyframes = ({
 
 // src/components/InspectorPanel/KeyframeEasingNavigator.tsx
 import { useCallback as useCallback102, useMemo as useMemo113 } from "react";
-import { Internals as Internals55, useVideoConfig as useVideoConfig5 } from "remotion";
+import { Internals as Internals56, useVideoConfig as useVideoConfig5 } from "remotion";
 
 // src/components/Timeline/TimelineKeyframeDiamondIcon.tsx
 import { jsx as jsx176, jsxs as jsxs96 } from "react/jsx-runtime";
@@ -36301,7 +36417,7 @@ import {
   LINEAR_KEYFRAME_EASING as LINEAR_KEYFRAME_EASING5
 } from "@remotion/studio-shared";
 import React121, { useCallback as useCallback101, useContext as useContext59, useMemo as useMemo112, useRef as useRef47 } from "react";
-import { Internals as Internals54, useVideoConfig as useVideoConfig4 } from "remotion";
+import { Internals as Internals55, useVideoConfig as useVideoConfig4 } from "remotion";
 
 // src/components/Timeline/use-timeline-keyframe-drag.ts
 import {
@@ -36309,7 +36425,7 @@ import {
   moveKeyframesInPropStatus
 } from "@remotion/studio-shared";
 import { useCallback as useCallback100, useContext as useContext58 } from "react";
-import { Internals as Internals53, useVideoConfig as useVideoConfig3 } from "remotion";
+import { Internals as Internals54, useVideoConfig as useVideoConfig3 } from "remotion";
 
 // src/components/Timeline/get-bounded-keyframe-drag-delta.ts
 var getBoundedKeyframeDragDelta = ({
@@ -36465,7 +36581,7 @@ var getTimelineSelectionsAfterEasingKeyframeDrag = ({
 var getCodeValueForTarget = ({
   propStatuses,
   nodePath
-}) => propStatuses[Internals53.makeSequencePropsSubscriptionKey(nodePath)];
+}) => propStatuses[Internals54.makeSequencePropsSubscriptionKey(nodePath)];
 var getTimelineKeyframeDragTarget = ({
   propStatuses,
   displayFrame,
@@ -36664,16 +36780,16 @@ var useTimelineKeyframeDrag = ({
   const videoConfig = useVideoConfig3();
   const timelineWidth = useContext58(TimelineWidthContext);
   const { previewServerState } = useContext58(StudioServerConnectionCtx);
-  const sequencesRef = useContext58(Internals53.SequenceManagerRefContext);
-  const { overrideIdToNodePathMappings } = useContext58(Internals53.OverrideIdsToNodePathsGettersContext);
-  const propStatusesRef = useContext58(Internals53.VisualModePropStatusesRefContext);
+  const sequencesRef = useContext58(Internals54.SequenceManagerRefContext);
+  const { overrideIdToNodePathMappings } = useContext58(Internals54.OverrideIdsToNodePathsGettersContext);
+  const propStatusesRef = useContext58(Internals54.VisualModePropStatusesRefContext);
   const {
     clearDragOverrides,
     clearEffectDragOverrides,
     setPropStatuses,
     setDragOverrides,
     setEffectDragOverrides
-  } = useContext58(Internals53.VisualModeSettersContext);
+  } = useContext58(Internals54.VisualModeSettersContext);
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
   const { clearDraggedKeyframes, setDraggedKeyframes } = useTimelineKeyframeDragState();
   return useCallback100((e) => {
@@ -36866,16 +36982,16 @@ var useTimelineEasingKeyframeDrag = ({
   const videoConfig = useVideoConfig3();
   const timelineWidth = useContext58(TimelineWidthContext);
   const { previewServerState } = useContext58(StudioServerConnectionCtx);
-  const sequencesRef = useContext58(Internals53.SequenceManagerRefContext);
-  const { overrideIdToNodePathMappings } = useContext58(Internals53.OverrideIdsToNodePathsGettersContext);
-  const propStatusesRef = useContext58(Internals53.VisualModePropStatusesRefContext);
+  const sequencesRef = useContext58(Internals54.SequenceManagerRefContext);
+  const { overrideIdToNodePathMappings } = useContext58(Internals54.OverrideIdsToNodePathsGettersContext);
+  const propStatusesRef = useContext58(Internals54.VisualModePropStatusesRefContext);
   const {
     clearDragOverrides,
     clearEffectDragOverrides,
     setPropStatuses,
     setDragOverrides,
     setEffectDragOverrides
-  } = useContext58(Internals53.VisualModeSettersContext);
+  } = useContext58(Internals54.VisualModeSettersContext);
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
   const { clearDraggedKeyframes } = useTimelineKeyframeDragState();
   return useCallback100((e) => {
@@ -37106,10 +37222,10 @@ var TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, nod
   });
   useTimelineMarqueeSelectableItem(selectionItem, buttonRef);
   const { previewServerState } = useContext59(StudioServerConnectionCtx);
-  const sequencesRef = useContext59(Internals54.SequenceManagerRefContext);
-  const propStatusesRef = useContext59(Internals54.VisualModePropStatusesRefContext);
-  const { setPropStatuses } = useContext59(Internals54.VisualModeSettersContext);
-  const { overrideIdToNodePathMappings } = useContext59(Internals54.OverrideIdsToNodePathsGettersContext);
+  const sequencesRef = useContext59(Internals55.SequenceManagerRefContext);
+  const propStatusesRef = useContext59(Internals55.VisualModePropStatusesRefContext);
+  const { setPropStatuses } = useContext59(Internals55.VisualModeSettersContext);
+  const { overrideIdToNodePathMappings } = useContext59(Internals55.OverrideIdsToNodePathsGettersContext);
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
   const getTargetSelections = useCallback101(() => {
     const selectedEasings = getEasingSelections(currentSelection.current.selectedItems);
@@ -37398,7 +37514,7 @@ var TimelineNavigatorItem = ({ extendLineLeft, extendLineRight, item: item2, onS
 };
 var KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes, nodePathInfo }) => {
   const { isSelected, selectItems } = useTimelineSelection();
-  const setFrame = Internals55.useTimelineSetFrame();
+  const setFrame = Internals56.useTimelineSetFrame();
   const videoConfig = useVideoConfig5();
   const items = useMemo113(() => getKeyframeEasingNavigatorItems({
     includeEasings,
@@ -37417,7 +37533,7 @@ var KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes, no
     const frame2 = getNavigatorItemPlayheadFrame(item2);
     setFrame((current) => {
       const next = { ...current, [videoConfig.id]: frame2 };
-      Internals55.persistCurrentFrame(next);
+      Internals56.persistCurrentFrame(next);
       return next;
     });
   }, [setFrame, videoConfig.id]);
@@ -37497,7 +37613,7 @@ import {
   useMemo as useMemo114,
   useState as useState73
 } from "react";
-import { Internals as Internals56 } from "remotion";
+import { Internals as Internals57 } from "remotion";
 import { jsx as jsx180, jsxs as jsxs99, Fragment as Fragment32 } from "react/jsx-runtime";
 var comboStyle2 = {
   minWidth: 120
@@ -37549,7 +37665,7 @@ var getOutputValues = (onSelect, disabled) => {
   }));
 };
 var KeyframeSettings = ({ update }) => {
-  const { setPropStatuses } = useContext60(Internals56.VisualModeSettersContext);
+  const { setPropStatuses } = useContext60(Internals57.VisualModeSettersContext);
   const { previewServerState } = useContext60(StudioServerConnectionCtx);
   const { propStatus } = update;
   const [posterize, setPosterize] = useState73(propStatus.posterize ?? 0);
@@ -37773,7 +37889,7 @@ var useOpenSequenceInEditor = (sequence) => {
 
 // src/components/Timeline/use-rename-sequence.ts
 import { useCallback as useCallback105, useContext as useContext63, useMemo as useMemo116 } from "react";
-import { Internals as Internals57 } from "remotion";
+import { Internals as Internals58 } from "remotion";
 var getSequenceNameSaveAction = ({
   editedName,
   currentDisplayName,
@@ -37797,11 +37913,11 @@ var useRenameSequence = ({
   sequence,
   validatedLocation
 }) => {
-  const { propStatuses } = useContext63(Internals57.VisualModePropStatusesContext);
-  const { setPropStatuses } = useContext63(Internals57.VisualModeSettersContext);
+  const { propStatuses } = useContext63(Internals58.VisualModePropStatusesContext);
+  const { setPropStatuses } = useContext63(Internals58.VisualModeSettersContext);
   const nodePath = nodePathInfo?.sequenceSubscriptionKey ?? null;
   const propStatusesForOverride = useMemo116(() => {
-    return nodePath ? Internals57.getPropStatusesCtx(propStatuses, nodePath) : undefined;
+    return nodePath ? Internals58.getPropStatusesCtx(propStatuses, nodePath) : undefined;
   }, [propStatuses, nodePath]);
   const codeNameStatus = propStatusesForOverride?.name;
   const fallbackDisplayName = sequence.controls?.componentName ?? "<Sequence>";
@@ -37875,7 +37991,7 @@ var useRenameSequence = ({
 
 // src/components/InspectorPanel/ConnectedCompositionsSection.tsx
 import { useContext as useContext64, useMemo as useMemo117 } from "react";
-import { Internals as Internals58 } from "remotion";
+import { Internals as Internals59 } from "remotion";
 import { jsx as jsx181 } from "react/jsx-runtime";
 var compositionIconStyle = {
   height: 13,
@@ -37889,7 +38005,7 @@ var compositionListStyle = {
 var useConnectedCompositions = ({
   track
 }) => {
-  const { compositions } = useContext64(Internals58.CompositionManager);
+  const { compositions } = useContext64(Internals59.CompositionManager);
   return useMemo117(() => getConnectedCompositions({
     compositions,
     singleChildComponent: track.sequence.singleChildComponent
@@ -38022,10 +38138,10 @@ var SequenceInspectorSections = ({ track }) => {
 
 // src/components/InspectorPanel/use-track-for-selection.ts
 import { useContext as useContext66, useMemo as useMemo119 } from "react";
-import { Internals as Internals59 } from "remotion";
+import { Internals as Internals60 } from "remotion";
 var useTrackForSelection = (selection) => {
-  const { sequences } = useContext66(Internals59.SequenceManager);
-  const { overrideIdToNodePathMappings } = useContext66(Internals59.OverrideIdsToNodePathsGettersContext);
+  const { sequences } = useContext66(Internals60.SequenceManager);
+  const { overrideIdToNodePathMappings } = useContext66(Internals60.OverrideIdsToNodePathsGettersContext);
   return useMemo119(() => {
     if (selection.type === "guide") {
       return null;
@@ -38048,12 +38164,12 @@ var addKeyframeIcon = {
 var EasingInspector = ({ selection }) => {
   const track = useTrackForSelection(selection);
   const videoConfig = useVideoConfig6();
-  const timelinePosition = Internals60.Timeline.useTimelinePosition();
-  const { sequences } = useContext67(Internals60.SequenceManager);
-  const { overrideIdToNodePathMappings } = useContext67(Internals60.OverrideIdsToNodePathsGettersContext);
-  const { propStatuses } = useContext67(Internals60.VisualModePropStatusesContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext67(Internals60.VisualModeDragOverridesContext);
-  const { setPropStatuses } = useContext67(Internals60.VisualModeSettersContext);
+  const timelinePosition = Internals61.Timeline.useTimelinePosition();
+  const { sequences } = useContext67(Internals61.SequenceManager);
+  const { overrideIdToNodePathMappings } = useContext67(Internals61.OverrideIdsToNodePathsGettersContext);
+  const { propStatuses } = useContext67(Internals61.VisualModePropStatusesContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext67(Internals61.VisualModeDragOverridesContext);
+  const { setPropStatuses } = useContext67(Internals61.VisualModeSettersContext);
   const { previewServerState } = useContext67(StudioServerConnectionCtx);
   const { selectItems } = useTimelineSelection();
   const parentSelection = useMemo120(() => getTimelineSelectionFromNodePathInfo(selection.nodePathInfo), [selection.nodePathInfo]);
@@ -38157,7 +38273,7 @@ var EasingInspector = ({ selection }) => {
       return;
     }
     const sourceFrame = timelinePosition - track.keyframeDisplayOffset;
-    const value = Internals60.getEffectiveVisualModeValue({
+    const value = Internals61.getEffectiveVisualModeValue({
       propStatus: easingUpdate.propStatus,
       dragOverrideValue: easingDetails.dragOverrideValue,
       defaultValue: easingDetails.defaultValue,
@@ -38378,7 +38494,7 @@ import {
   useMemo as useMemo138,
   useState as useState81
 } from "react";
-import { Internals as Internals65, useVideoConfig as useVideoConfig10 } from "remotion";
+import { Internals as Internals66, useVideoConfig as useVideoConfig10 } from "remotion";
 
 // src/components/Timeline/TimelineEffectPropItem.tsx
 import {
@@ -38386,7 +38502,7 @@ import {
   optimisticUpdateForEffectPropStatuses as optimisticUpdateForEffectPropStatuses2
 } from "@remotion/studio-shared";
 import { useCallback as useCallback124, useContext as useContext73, useMemo as useMemo136 } from "react";
-import { Internals as Internals63, useVideoConfig as useVideoConfig8 } from "remotion";
+import { Internals as Internals64, useVideoConfig as useVideoConfig8 } from "remotion";
 
 // src/components/Timeline/get-animation-item-selection-for-frame.ts
 var getKeyframeSelection = ({
@@ -38647,7 +38763,7 @@ var TimelineFieldRowContent = ({ field, rowDepth, selected, children }) => {
 // src/components/Timeline/TimelineKeyframeControls.tsx
 import { isSchemaFieldKeyframable } from "@remotion/studio-shared";
 import { useCallback as useCallback109, useContext as useContext71, useMemo as useMemo123 } from "react";
-import { Internals as Internals61, useVideoConfig as useVideoConfig7 } from "remotion";
+import { Internals as Internals62, useVideoConfig as useVideoConfig7 } from "remotion";
 
 // src/components/Timeline/get-keyframe-navigation.ts
 var isKeyframeInTimelineRange = (frame2, durationInFrames) => {
@@ -38799,7 +38915,7 @@ var resolveKeyframeControlTarget = ({
   }
   const nodePath = nodePathInfo.sequenceSubscriptionKey;
   if (fieldNode.field.kind === "sequence-field") {
-    const sequencePropStatuses = Internals61.getPropStatusesCtx(propStatuses, nodePath);
+    const sequencePropStatuses = Internals62.getPropStatusesCtx(propStatuses, nodePath);
     const sequenceSelectedPropStatus = sequencePropStatuses?.[fieldNode.field.key] ?? null;
     if (sequenceSelectedPropStatus === null) {
       return null;
@@ -38818,7 +38934,7 @@ var resolveKeyframeControlTarget = ({
       effectIndex: null
     };
   }
-  const effectStatus = Internals61.getEffectPropStatusesCtx({
+  const effectStatus = Internals62.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex: fieldNode.field.effectIndex
@@ -38885,7 +39001,8 @@ var getDeleteChange = (target) => {
     nodePath: target.nodePath,
     fieldKey: target.fieldKey,
     sourceFrame: target.sourceFrame,
-    schema: target.schema
+    schema: target.schema,
+    valueWhenLastKeyframeDeleted: null
   };
   if (target.effectIndex === null) {
     return change;
@@ -38905,7 +39022,7 @@ function getCurrentKeyframeValue({
   dragOverrideValue
 }) {
   if (isKeyframedStatus(propStatus)) {
-    return Internals61.getEffectiveVisualModeValue({
+    return Internals62.getEffectiveVisualModeValue({
       propStatus,
       dragOverrideValue,
       frame: jsxFrame,
@@ -38914,7 +39031,7 @@ function getCurrentKeyframeValue({
     });
   }
   if (propStatus.status === "static") {
-    return Internals61.getEffectiveVisualModeValue({
+    return Internals62.getEffectiveVisualModeValue({
       propStatus,
       dragOverrideValue,
       frame: jsxFrame,
@@ -38963,11 +39080,11 @@ var TimelineKeyframeControls = ({
   mode = "timeline"
 }) => {
   const videoConfig = useVideoConfig7();
-  const timelinePosition = Internals61.Timeline.useTimelinePosition();
-  const setFrame = Internals61.useTimelineSetFrame();
-  const { setPropStatuses } = useContext71(Internals61.VisualModeSettersContext);
-  const { propStatuses } = useContext71(Internals61.VisualModePropStatusesContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext71(Internals61.VisualModeDragOverridesContext);
+  const timelinePosition = Internals62.Timeline.useTimelinePosition();
+  const setFrame = Internals62.useTimelineSetFrame();
+  const { setPropStatuses } = useContext71(Internals62.VisualModeSettersContext);
+  const { propStatuses } = useContext71(Internals62.VisualModePropStatusesContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext71(Internals62.VisualModeDragOverridesContext);
   const { previewServerState } = useContext71(StudioServerConnectionCtx);
   const { selectedItems, selectItems } = useTimelineSelection();
   const tracks = useTimelineKeyframeTracks();
@@ -39058,7 +39175,7 @@ var TimelineKeyframeControls = ({
   const seekToDisplayFrame = useCallback109((frame2) => {
     setFrame((current) => {
       const next = { ...current, [videoConfig.id]: frame2 };
-      Internals61.persistCurrentFrame(next);
+      Internals62.persistCurrentFrame(next);
       return next;
     });
   }, [setFrame, videoConfig.id]);
@@ -39212,7 +39329,7 @@ var TimelineKeyframeControls = ({
 
 // src/components/Timeline/TimelineKeyframedValue.tsx
 import { useCallback as useCallback122, useMemo as useMemo133 } from "react";
-import { Internals as Internals62 } from "remotion";
+import { Internals as Internals63 } from "remotion";
 
 // src/components/Timeline/TimelineSchemaField.tsx
 import React144 from "react";
@@ -42915,7 +43032,7 @@ var TimelineKeyframedValue = ({
   scaleLockNodePath
 }) => {
   const computedValue = useMemo133(() => {
-    const raw = Internals62.interpolateKeyframedStatus({
+    const raw = Internals63.interpolateKeyframedStatus({
       forceSpringAllowTail: false,
       frame: sourceFrame,
       status: propStatus
@@ -42930,7 +43047,7 @@ var TimelineKeyframedValue = ({
     codeValue: computedValue
   }), [computedValue]);
   const effectiveValue = useMemo133(() => {
-    return Internals62.getEffectiveVisualModeValue({
+    return Internals63.getEffectiveVisualModeValue({
       propStatus: fakeStatus,
       dragOverrideValue,
       frame: sourceFrame,
@@ -43138,23 +43255,23 @@ var isResettableStatus = ({
   return JSON.stringify(effectiveCodeValue) !== JSON.stringify(defaultValue);
 };
 var TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFrame }) => {
-  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext73(Internals63.VisualModeSettersContext);
-  const { getEffectDragOverrides } = useContext73(Internals63.VisualModeDragOverridesContext);
-  const { propStatuses: visualModePropStatuses } = useContext73(Internals63.VisualModePropStatusesContext);
+  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext73(Internals64.VisualModeSettersContext);
+  const { getEffectDragOverrides } = useContext73(Internals64.VisualModeDragOverridesContext);
+  const { propStatuses: visualModePropStatuses } = useContext73(Internals64.VisualModePropStatusesContext);
   const { previewServerState } = useContext73(StudioServerConnectionCtx);
   const clientId = previewServerState.type === "connected" ? previewServerState.clientId : null;
-  const effectStatus = Internals63.getEffectPropStatusesCtx({
+  const effectStatus = Internals64.getEffectPropStatusesCtx({
     propStatuses: visualModePropStatuses,
     nodePath,
     effectIndex: field.effectIndex
   });
   const propStatus = effectStatus.type === "can-update-effect" ? effectStatus.props?.[field.key] ?? null : null;
   const onDragValueChange = useCallback124((value) => {
-    const nextDragOverrideValue = propStatus !== null && isKeyframedStatus2(propStatus) ? Internals63.makeKeyframedDragOverride({
+    const nextDragOverrideValue = propStatus !== null && isKeyframedStatus2(propStatus) ? Internals64.makeKeyframedDragOverride({
       status: propStatus,
       frame: sourceFrame,
       value
-    }) : Internals63.makeStaticDragOverride(value);
+    }) : Internals64.makeStaticDragOverride(value);
     setEffectDragOverrides(nodePath, field.effectIndex, field.key, nextDragOverrideValue);
   }, [
     field.effectIndex,
@@ -43309,7 +43426,7 @@ var TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFrame
       fixHref: TIMELINE_COMPUTED_EFFECT_FIX_LINK
     });
   }
-  const effectiveValue = Internals63.getEffectiveVisualModeValue({
+  const effectiveValue = Internals64.getEffectiveVisualModeValue({
     propStatus,
     dragOverrideValue,
     defaultValue: field.fieldSchema.default,
@@ -43336,19 +43453,19 @@ var TimelineEffectPropItem = ({
   keyframeControlsMode = "timeline"
 }) => {
   const { previewServerState } = useContext73(StudioServerConnectionCtx);
-  const { setPropStatuses } = useContext73(Internals63.VisualModeSettersContext);
-  const { propStatuses } = useContext73(Internals63.VisualModePropStatusesContext);
-  const { getEffectDragOverrides } = useContext73(Internals63.VisualModeDragOverridesContext);
+  const { setPropStatuses } = useContext73(Internals64.VisualModeSettersContext);
+  const { propStatuses } = useContext73(Internals64.VisualModePropStatusesContext);
+  const { getEffectDragOverrides } = useContext73(Internals64.VisualModeDragOverridesContext);
   const selection = useTimelineRowSelection(nodePathInfo);
   const { selectItems } = useTimelineSelection();
-  const setFrame = Internals63.useTimelineSetFrame();
+  const setFrame = Internals64.useTimelineSetFrame();
   const videoConfig = useVideoConfig8();
-  const timelinePosition = Internals63.Timeline.useTimelinePosition();
+  const timelinePosition = Internals64.Timeline.useTimelinePosition();
   const sourceFrame = timelinePosition - keyframeDisplayOffset;
   const style8 = useMemo136(() => {
     return field.typeName === "text-content" ? fieldRowBase : { ...fieldRowBase, height: field.rowHeight };
   }, [field.rowHeight, field.typeName]);
-  const effectStatus = useMemo136(() => Internals63.getEffectPropStatusesCtx({
+  const effectStatus = useMemo136(() => Internals64.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex: field.effectIndex
@@ -43438,7 +43555,7 @@ var TimelineEffectPropItem = ({
   const seekToDisplayFrame = useCallback124((frame2) => {
     setFrame((current) => {
       const next = { ...current, [videoConfig.id]: frame2 };
-      Internals63.persistCurrentFrame(next);
+      Internals64.persistCurrentFrame(next);
       return next;
     });
   }, [setFrame, videoConfig.id]);
@@ -43455,7 +43572,7 @@ var TimelineEffectPropItem = ({
       if (!keyframable || previewServerState.type !== "connected") {
         return;
       }
-      const value = Internals63.getEffectiveVisualModeValue({
+      const value = Internals64.getEffectiveVisualModeValue({
         propStatus,
         dragOverrideValue,
         frame: sourceFrame,
@@ -43549,7 +43666,7 @@ var TimelineEffectPropItem = ({
 // src/components/Timeline/TimelineSequencePropItem.tsx
 import { isSchemaFieldKeyframable as isSchemaFieldKeyframable3 } from "@remotion/studio-shared";
 import { useCallback as useCallback125, useContext as useContext74, useMemo as useMemo137 } from "react";
-import { Internals as Internals64, useVideoConfig as useVideoConfig9 } from "remotion";
+import { Internals as Internals65, useVideoConfig as useVideoConfig9 } from "remotion";
 import { jsx as jsx208 } from "react/jsx-runtime";
 var fieldRowBase2 = {};
 var isKeyframedStatus3 = (status) => {
@@ -43572,18 +43689,18 @@ var isResettableStatus2 = ({
   return JSON.stringify(effectiveCodeValue) !== JSON.stringify(defaultValue);
 };
 var Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
-  const { getDragOverrides } = useContext74(Internals64.VisualModeDragOverridesContext);
-  const { setDragOverrides, clearDragOverrides } = useContext74(Internals64.VisualModeSettersContext);
+  const { getDragOverrides } = useContext74(Internals65.VisualModeDragOverridesContext);
+  const { setDragOverrides, clearDragOverrides } = useContext74(Internals65.VisualModeSettersContext);
   const dragOverrideValue = useMemo137(() => {
     return nodePath === null ? undefined : (getDragOverrides(nodePath) ?? {})[field.key];
   }, [getDragOverrides, nodePath, field.key]);
-  const effectiveValue = Internals64.getEffectiveVisualModeValue({
+  const effectiveValue = Internals65.getEffectiveVisualModeValue({
     propStatus,
     dragOverrideValue,
     defaultValue: field.fieldSchema.default,
     shouldResortToDefaultValueIfUndefined: true
   });
-  const { setPropStatuses } = useContext74(Internals64.VisualModeSettersContext);
+  const { setPropStatuses } = useContext74(Internals65.VisualModeSettersContext);
   const { previewServerState } = useContext74(StudioServerConnectionCtx);
   const clientId = previewServerState.type === "connected" ? previewServerState.clientId : null;
   const onSave = useCallback125((value, options) => {
@@ -43632,7 +43749,7 @@ var Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
     if (nodePath === null) {
       throw new Error("Cannot drag value");
     }
-    setDragOverrides(nodePath, field.key, Internals64.makeStaticDragOverride(value));
+    setDragOverrides(nodePath, field.key, Internals65.makeStaticDragOverride(value));
   }, [setDragOverrides, nodePath, field.key]);
   const onDragEnd = useCallback125(() => {
     if (nodePath === null) {
@@ -43651,8 +43768,8 @@ var Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
   });
 };
 var TimelineSequenceKeyframedValue = ({ field, fileName, nodePath, schema, propStatus, sourceFrame }) => {
-  const { getDragOverrides } = useContext74(Internals64.VisualModeDragOverridesContext);
-  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext74(Internals64.VisualModeSettersContext);
+  const { getDragOverrides } = useContext74(Internals65.VisualModeDragOverridesContext);
+  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext74(Internals65.VisualModeSettersContext);
   const { previewServerState } = useContext74(StudioServerConnectionCtx);
   const clientId = previewServerState.type === "connected" ? previewServerState.clientId : null;
   const dragOverrideValue = useMemo137(() => {
@@ -43674,7 +43791,7 @@ var TimelineSequenceKeyframedValue = ({ field, fileName, nodePath, schema, propS
     });
   }, [clientId, field.key, fileName, nodePath, schema, setPropStatuses]);
   const onKeyframedDragValueChange = useCallback125((value) => {
-    setDragOverrides(nodePath, field.key, Internals64.makeKeyframedDragOverride({
+    setDragOverrides(nodePath, field.key, Internals65.makeKeyframedDragOverride({
       status: propStatus,
       frame: sourceFrame,
       value
@@ -43704,17 +43821,17 @@ var TimelineSequencePropItem = ({
   keyframeDisplayOffset,
   keyframeControlsMode = "timeline"
 }) => {
-  const { propStatuses: visualModePropStatuses } = useContext74(Internals64.VisualModePropStatusesContext);
-  const { getDragOverrides } = useContext74(Internals64.VisualModeDragOverridesContext);
-  const { setPropStatuses } = useContext74(Internals64.VisualModeSettersContext);
+  const { propStatuses: visualModePropStatuses } = useContext74(Internals65.VisualModePropStatusesContext);
+  const { getDragOverrides } = useContext74(Internals65.VisualModeDragOverridesContext);
+  const { setPropStatuses } = useContext74(Internals65.VisualModeSettersContext);
   const { previewServerState } = useContext74(StudioServerConnectionCtx);
   const selection = useTimelineRowSelection(nodePathInfo);
   const { selectItems } = useTimelineSelection();
-  const setFrame = Internals64.useTimelineSetFrame();
+  const setFrame = Internals65.useTimelineSetFrame();
   const videoConfig = useVideoConfig9();
-  const timelinePosition = Internals64.Timeline.useTimelinePosition();
+  const timelinePosition = Internals65.Timeline.useTimelinePosition();
   const sourceFrame = timelinePosition - keyframeDisplayOffset;
-  const propStatusesForOverride = Internals64.getPropStatusesCtx(visualModePropStatuses, nodePath);
+  const propStatusesForOverride = Internals65.getPropStatusesCtx(visualModePropStatuses, nodePath);
   const propStatus = propStatusesForOverride?.[field.key] ?? null;
   const dragOverrideValue = useMemo137(() => {
     return (getDragOverrides(nodePath) ?? {})[field.key];
@@ -43808,7 +43925,7 @@ var TimelineSequencePropItem = ({
   const seekToDisplayFrame = useCallback125((frame2) => {
     setFrame((current) => {
       const next = { ...current, [videoConfig.id]: frame2 };
-      Internals64.persistCurrentFrame(next);
+      Internals65.persistCurrentFrame(next);
       return next;
     });
   }, [setFrame, videoConfig.id]);
@@ -43825,7 +43942,7 @@ var TimelineSequencePropItem = ({
       if (!keyframable || previewServerState.type !== "connected") {
         return;
       }
-      const value = Internals64.getEffectiveVisualModeValue({
+      const value = Internals65.getEffectiveVisualModeValue({
         propStatus,
         dragOverrideValue,
         frame: sourceFrame,
@@ -43988,16 +44105,16 @@ var TrashIcon = ({ color }) => {
 var KeyframeInspector = ({ selection }) => {
   const track = useTrackForSelection(selection);
   const videoConfig = useVideoConfig10();
-  const timelinePosition = Internals65.Timeline.useTimelinePosition();
-  const { propStatuses } = useContext75(Internals65.VisualModePropStatusesContext);
+  const timelinePosition = Internals66.Timeline.useTimelinePosition();
+  const { propStatuses } = useContext75(Internals66.VisualModePropStatusesContext);
   const {
     clearDragOverrides,
     clearEffectDragOverrides,
     setDragOverrides,
     setEffectDragOverrides,
     setPropStatuses
-  } = useContext75(Internals65.VisualModeSettersContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext75(Internals65.VisualModeDragOverridesContext);
+  } = useContext75(Internals66.VisualModeSettersContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext75(Internals66.VisualModeDragOverridesContext);
   const { previewServerState } = useContext75(StudioServerConnectionCtx);
   const { selectItems } = useTimelineSelection();
   const [draftFrame, setDraftFrame] = useState81(selection.frame);
@@ -44026,7 +44143,7 @@ var KeyframeInspector = ({ selection }) => {
         includeTextContent: false
       });
       const sequenceField = sequenceFields?.find((candidate) => candidate.key === keyframeField.fieldKey) ?? null;
-      const sequencePropStatus = Internals65.getPropStatusesCtx(propStatuses, nodePath)?.[keyframeField.fieldKey] ?? null;
+      const sequencePropStatus = Internals66.getPropStatusesCtx(propStatuses, nodePath)?.[keyframeField.fieldKey] ?? null;
       if (!sequenceField || sequencePropStatus?.status !== "keyframed") {
         return null;
       }
@@ -44054,7 +44171,7 @@ var KeyframeInspector = ({ selection }) => {
       getEffectDragOverrides
     });
     const effectField = effectFields.find((candidate) => candidate.key === keyframeField.fieldKey) ?? null;
-    const effectStatus = Internals65.getEffectPropStatusesCtx({
+    const effectStatus = Internals66.getEffectPropStatusesCtx({
       propStatuses,
       nodePath,
       effectIndex: keyframeField.effectIndex
@@ -44363,7 +44480,7 @@ import React152 from "react";
 
 // src/components/Timeline/TimelineEffectItem.tsx
 import { useCallback as useCallback127, useContext as useContext76, useMemo as useMemo139, useState as useState82 } from "react";
-import { Internals as Internals66 } from "remotion";
+import { Internals as Internals67 } from "remotion";
 import { jsx as jsx210, jsxs as jsxs113 } from "react/jsx-runtime";
 var EFFECT_REORDER_MIME_TYPE = "application/remotion-effect-reorder";
 var currentEffectDrag = null;
@@ -44429,12 +44546,12 @@ var TimelineEffectItem = ({
 }) => {
   const { previewServerState } = useContext76(StudioServerConnectionCtx);
   const previewConnected = previewServerState.type === "connected";
-  const { propStatuses } = useContext76(Internals66.VisualModePropStatusesContext);
-  const { setPropStatuses } = useContext76(Internals66.VisualModeSettersContext);
+  const { propStatuses } = useContext76(Internals67.VisualModePropStatusesContext);
+  const { setPropStatuses } = useContext76(Internals67.VisualModeSettersContext);
   const selection = useTimelineRowSelection(nodePathInfo);
   const containsSelection = useTimelineRowContainsSelection(nodePathInfo);
   const [dropIndicator, setDropIndicator] = useState82(null);
-  const effectStatus = useMemo139(() => Internals66.getEffectPropStatusesCtx({
+  const effectStatus = useMemo139(() => Internals67.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex
@@ -44449,7 +44566,7 @@ var TimelineEffectItem = ({
   const canToggle = previewConnected && disabledStatus?.status === "static";
   const deleteDisabled = !previewConnected || effectStatus.type !== "can-update-effect" || !validatedLocation.source;
   const canReorder = previewConnected && effectStatus.type === "can-update-effect" && Boolean(validatedLocation.source);
-  const nodePathKey = useMemo139(() => Internals66.makeSequencePropsSubscriptionKey(nodePath), [nodePath]);
+  const nodePathKey = useMemo139(() => Internals67.makeSequencePropsSubscriptionKey(nodePath), [nodePath]);
   const onDeleteEffectFromSource = useCallback127(async () => {
     if (deleteDisabled) {
       return;
@@ -44836,7 +44953,7 @@ var TimelineExpandedRow = ({
 
 // src/components/Timeline/use-timeline-expanded-tree.ts
 import { useContext as useContext77, useMemo as useMemo140 } from "react";
-import { Internals as Internals67 } from "remotion";
+import { Internals as Internals68 } from "remotion";
 var useTimelineExpandedTree = ({
   sequence,
   nodePathInfo,
@@ -44845,8 +44962,8 @@ var useTimelineExpandedTree = ({
 }) => {
   const { getIsExpanded } = useContext77(ExpandedTracksGetterContext);
   const { toggleTrack } = useContext77(ExpandedTracksSetterContext);
-  const { propStatuses: visualModePropStatuses } = useContext77(Internals67.VisualModePropStatusesContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext77(Internals67.VisualModeDragOverridesContext);
+  const { propStatuses: visualModePropStatuses } = useContext77(Internals68.VisualModePropStatusesContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext77(Internals68.VisualModeDragOverridesContext);
   const { selectedItems } = useTimelineSelection();
   const tree = useMemo140(() => buildTimelineTree({
     sequence,
@@ -45199,7 +45316,7 @@ var InspectorSequenceSection = ({
 
 // src/components/InspectorPanel/AlignmentControls.tsx
 import { useCallback as useCallback129, useContext as useContext79, useMemo as useMemo142 } from "react";
-import { Internals as Internals68 } from "remotion";
+import { Internals as Internals69 } from "remotion";
 
 // src/icons/align-right.tsx
 import { jsx as jsx213, jsxs as jsxs115 } from "react/jsx-runtime";
@@ -45423,16 +45540,16 @@ var AlignmentButton = ({ onClick, title: title2, Icon, disabled }) => {
 };
 var AlignmentControls = ({ track }) => {
   const { previewServerState } = useContext79(StudioServerConnectionCtx);
-  const { propStatuses } = useContext79(Internals68.VisualModePropStatusesContext);
-  const { getDragOverrides } = useContext79(Internals68.VisualModeDragOverridesContext);
-  const { setPropStatuses } = useContext79(Internals68.VisualModeSettersContext);
-  const { canvasContent, compositions } = useContext79(Internals68.CompositionManager);
+  const { propStatuses } = useContext79(Internals69.VisualModePropStatusesContext);
+  const { getDragOverrides } = useContext79(Internals69.VisualModeDragOverridesContext);
+  const { setPropStatuses } = useContext79(Internals69.VisualModeSettersContext);
+  const { canvasContent, compositions } = useContext79(Internals69.CompositionManager);
   const currentCompositionMetadata = useMemo142(() => {
     if (canvasContent?.type !== "composition")
       return null;
     return compositions.find((c) => c.id === canvasContent.compositionId) ?? null;
   }, [canvasContent, compositions]);
-  const timelinePosition = Internals68.Timeline.useTimelinePosition();
+  const timelinePosition = Internals69.Timeline.useTimelinePosition();
   const handleAlign = useCallback129((direction) => {
     if (previewServerState.type !== "connected" || !track.nodePathInfo || !track.sequence.controls) {
       return;
@@ -45442,7 +45559,7 @@ var AlignmentControls = ({ track }) => {
       return;
     }
     const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
-    const nodePropStatuses = Internals68.getPropStatusesCtx(propStatuses, nodePath);
+    const nodePropStatuses = Internals69.getPropStatusesCtx(propStatuses, nodePath);
     const sourceFrame = timelinePosition - track.keyframeDisplayOffset;
     const dragOverrides = getDragOverrides(nodePath) ?? {};
     const activeSchema = getSelectedOutlineActiveSchema({
@@ -45469,12 +45586,12 @@ var AlignmentControls = ({ track }) => {
     if (!currentCompositionMetadata?.width) {
       return;
     }
-    const compositionRect = Internals68.portalNode().getBoundingClientRect();
+    const compositionRect = Internals69.portalNode().getBoundingClientRect();
     if (compositionRect.width === 0 || compositionRect.height === 0) {
       return;
     }
     const scale = compositionRect.width / currentCompositionMetadata.width;
-    const currentTranslate = propStatus ? String(Internals68.getEffectiveVisualModeValue({
+    const currentTranslate = propStatus ? String(Internals69.getEffectiveVisualModeValue({
       propStatus,
       dragOverrideValue: dragOverrides[translateFieldKey],
       defaultValue: fieldSchema.default,
@@ -45542,7 +45659,7 @@ var AlignmentControls = ({ track }) => {
     return null;
   }
   const renderNodePath = track.nodePathInfo.sequenceSubscriptionKey;
-  const renderNodePropStatuses = Internals68.getPropStatusesCtx(propStatuses, renderNodePath);
+  const renderNodePropStatuses = Internals69.getPropStatusesCtx(propStatuses, renderNodePath);
   const renderSourceFrame = timelinePosition - track.keyframeDisplayOffset;
   const renderDragOverrides = getDragOverrides(renderNodePath) ?? {};
   const renderActiveSchema = getSelectedOutlineActiveSchema({
@@ -45787,7 +45904,7 @@ var SchemaResetButton = ({ onClick }) => {
 
 // src/components/RenderQueue/index.tsx
 import React168, { useContext as useContext89, useEffect as useEffect69, useMemo as useMemo152 } from "react";
-import { Internals as Internals71 } from "remotion";
+import { Internals as Internals72 } from "remotion";
 
 // src/components/RenderQueue/RenderQueueItem.tsx
 import {
@@ -45797,7 +45914,7 @@ import {
   useMemo as useMemo151,
   useState as useState84
 } from "react";
-import { Internals as Internals70 } from "remotion";
+import { Internals as Internals71 } from "remotion";
 
 // src/components/RenderQueue/client-side-render-types.ts
 var isRestoredClientJob = (job) => {
@@ -46464,13 +46581,13 @@ var RenderQueueProgressMessage = ({ job }) => {
 
 // src/components/RenderQueue/RenderQueueRemoveItem.tsx
 import { useCallback as useCallback140, useContext as useContext86, useMemo as useMemo149 } from "react";
-import { Internals as Internals69 } from "remotion";
+import { Internals as Internals70 } from "remotion";
 import { jsx as jsx234 } from "react/jsx-runtime";
 var RenderQueueRemoveItem = ({ job }) => {
   const isClientJob = isClientRenderJob(job);
   const { removeClientJob } = useContext86(RenderQueueContext);
-  const { canvasContent } = useContext86(Internals69.CompositionManager);
-  const { setCanvasContent } = useContext86(Internals69.CompositionSetters);
+  const { canvasContent } = useContext86(Internals70.CompositionManager);
+  const { setCanvasContent } = useContext86(Internals70.CompositionSetters);
   const onClick = useCallback140((e) => {
     e.stopPropagation();
     if (isClientJob) {
@@ -46805,7 +46922,7 @@ var subtitle2 = {
 var SELECTED_CLASSNAME = "__remotion_selected_classname";
 var RenderQueueItem = ({ job, selected }) => {
   const [hovered, setHovered] = useState84(false);
-  const { setCanvasContent } = useContext88(Internals70.CompositionSetters);
+  const { setCanvasContent } = useContext88(Internals71.CompositionSetters);
   const isClientJob = isClientRenderJob(job);
   const onPointerEnter = useCallback142(() => {
     setHovered(true);
@@ -46972,7 +47089,7 @@ var renderQueue = {
 };
 var RenderQueue = () => {
   const { jobs } = useContext89(RenderQueueContext);
-  const { canvasContent } = useContext89(Internals71.CompositionManager);
+  const { canvasContent } = useContext89(Internals72.CompositionManager);
   const previousJobCount = React168.useRef(jobs.length);
   const jobCount = jobs.length;
   const divRef = React168.useRef(null);
@@ -47108,7 +47225,7 @@ var persistSelectedOptionsSidebarPanel2 = (panel2) => {
   localStorage.setItem(localStorageKey2, panel2);
 };
 var OptionsPanel = ({ readOnlyStudio }) => {
-  const { props, updateProps } = useContext91(Internals72.EditorPropsContext);
+  const { props, updateProps } = useContext91(Internals73.EditorPropsContext);
   const isMobileLayout = useMobileLayout();
   const container38 = useMemo154(() => ({
     height: "100%",
@@ -47139,7 +47256,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
       }
     };
   }, []);
-  const { compositions, canvasContent } = useContext91(Internals72.CompositionManager);
+  const { compositions, canvasContent } = useContext91(Internals73.CompositionManager);
   const composition = useMemo154(() => {
     if (canvasContent === null || canvasContent.type !== "composition") {
       return null;
@@ -47282,13 +47399,13 @@ import {
   useRef as useRef55,
   useState as useState89
 } from "react";
-import { Internals as Internals81 } from "remotion";
+import { Internals as Internals82 } from "remotion";
 
 // src/helpers/is-current-selected-still.ts
 import { useContext as useContext92 } from "react";
-import { Internals as Internals73 } from "remotion";
+import { Internals as Internals74 } from "remotion";
 var useIsStill = () => {
-  const resolved = Internals73.useResolvedVideoConfig(null);
+  const resolved = Internals74.useResolvedVideoConfig(null);
   if (!resolved || resolved.type !== "success") {
     return false;
   }
@@ -47296,7 +47413,7 @@ var useIsStill = () => {
 };
 var useIsVideoComposition = () => {
   const isStill = useIsStill();
-  const { canvasContent } = useContext92(Internals73.CompositionManager);
+  const { canvasContent } = useContext92(Internals74.CompositionManager);
   if (canvasContent === null) {
     return false;
   }
@@ -47361,7 +47478,7 @@ import {
   useRef as useRef53,
   useState as useState86
 } from "react";
-import { Internals as Internals74 } from "remotion";
+import { Internals as Internals75 } from "remotion";
 import { jsxs as jsxs125 } from "react/jsx-runtime";
 var label7 = {
   color: WHITE,
@@ -47374,9 +47491,9 @@ var pushWithMaxSize = (arr, value, maxSize) => {
   return arr.slice(-maxSize);
 };
 var FpsCounter = ({ playbackSpeed }) => {
-  const videoConfig = Internals74.useUnsafeVideoConfig();
-  const [playing] = Internals74.Timeline.usePlayingState();
-  const frame2 = Internals74.Timeline.useTimelinePosition();
+  const videoConfig = Internals75.useUnsafeVideoConfig();
+  const [playing] = Internals75.Timeline.usePlayingState();
+  const frame2 = Internals75.Timeline.useTimelinePosition();
   const [marker, rerender] = useState86({});
   const [fps, setFps] = useState86(0);
   const previousUpdates = useRef53([]);
@@ -47438,7 +47555,7 @@ var FpsCounter = ({ playbackSpeed }) => {
 
 // src/components/FullscreenToggle.tsx
 import { useCallback as useCallback145, useContext as useContext94, useEffect as useEffect71 } from "react";
-import { Internals as Internals75 } from "remotion";
+import { Internals as Internals76 } from "remotion";
 import { NoReactInternals as NoReactInternals26 } from "remotion/no-react";
 import { jsx as jsx242 } from "react/jsx-runtime";
 var accessibilityLabel3 = [
@@ -47447,7 +47564,7 @@ var accessibilityLabel3 = [
 ].filter(NoReactInternals26.truthy).join(" ");
 var FullScreenToggle = () => {
   const keybindings = useKeybinding();
-  const { setSize } = useContext94(Internals75.PreviewSizeContext);
+  const { setSize } = useContext94(Internals76.PreviewSizeContext);
   const onClick = useCallback145(() => {
     drawRef.current?.requestFullscreen();
     if (document.fullscreenElement)
@@ -47678,7 +47795,7 @@ var PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
 
 // src/components/PlaybackRatePersistor.tsx
 import { useEffect as useEffect73 } from "react";
-import { Internals as Internals76 } from "remotion";
+import { Internals as Internals77 } from "remotion";
 
 // src/state/playbackrate.ts
 var key5 = "remotion.playbackrate";
@@ -47698,7 +47815,7 @@ var loadPlaybackRate = () => {
 
 // src/components/PlaybackRatePersistor.tsx
 var PlaybackRatePersistor = () => {
-  const { setPlaybackRate, playbackRate } = Internals76.usePlaybackRate();
+  const { setPlaybackRate, playbackRate } = Internals77.usePlaybackRate();
   useEffect73(() => {
     setPlaybackRate(loadPlaybackRate());
   }, [setPlaybackRate]);
@@ -47710,7 +47827,7 @@ var PlaybackRatePersistor = () => {
 
 // src/components/PlaybackRateSelector.tsx
 import { useContext as useContext96, useMemo as useMemo156 } from "react";
-import { Internals as Internals77 } from "remotion";
+import { Internals as Internals78 } from "remotion";
 import { jsx as jsx247 } from "react/jsx-runtime";
 var commonPlaybackRates = [
   -4,
@@ -47731,7 +47848,7 @@ var getPlaybackRateLabel = (playbackRate) => {
 var accessibilityLabel5 = "Change the playback rate";
 var comboStyle3 = { width: 80 };
 var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
-  const { canvasContent } = useContext96(Internals77.CompositionManager);
+  const { canvasContent } = useContext96(Internals78.CompositionManager);
   const isStill = useIsStill();
   const style8 = useMemo156(() => {
     return {
@@ -47782,7 +47899,7 @@ var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
 // src/components/PlayPause.tsx
 import { PlayerInternals as PlayerInternals16 } from "@remotion/player";
 import { useCallback as useCallback150, useEffect as useEffect74, useState as useState87 } from "react";
-import { Internals as Internals78 } from "remotion";
+import { Internals as Internals79 } from "remotion";
 
 // src/icons/jump-to-start.tsx
 import { jsx as jsx248 } from "react/jsx-runtime";
@@ -47877,7 +47994,7 @@ var iconButton = {
 };
 var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted }) => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
-  const videoConfig = Internals78.useUnsafeVideoConfig();
+  const videoConfig = Internals79.useUnsafeVideoConfig();
   const [showBufferIndicator, setShowBufferState] = useState87(false);
   const {
     playing,
@@ -48103,7 +48220,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted })
 import { PlayerInternals as PlayerInternals17 } from "@remotion/player";
 import { useCallback as useCallback151, useContext as useContext97, useMemo as useMemo157, useRef as useRef54, useState as useState88 } from "react";
 import ReactDOM10 from "react-dom";
-import { Internals as Internals79 } from "remotion";
+import { Internals as Internals80 } from "remotion";
 import { jsx as jsx254, jsxs as jsxs127, Fragment as Fragment42 } from "react/jsx-runtime";
 var splitButtonContainer = {
   display: "inline-flex",
@@ -48233,9 +48350,9 @@ var RenderButton = ({
       }
     };
   }, []);
-  const video = Internals79.useVideo();
+  const video = Internals80.useVideo();
   const { getCurrentFrame: getCurrentFrame2 } = PlayerInternals17.usePlayer();
-  const { props } = useContext97(Internals79.EditorPropsContext);
+  const { props } = useContext97(Internals80.EditorPropsContext);
   const openServerRenderModal = useCallback151((copyCommandOnly) => {
     if (!video) {
       return null;
@@ -48592,7 +48709,7 @@ var SnappingToggle = ({ disabled }) => {
 
 // src/components/Timeline/TimelineZoomControls.tsx
 import { useCallback as useCallback153, useContext as useContext99 } from "react";
-import { Internals as Internals80 } from "remotion";
+import { Internals as Internals81 } from "remotion";
 
 // src/icons/minus.tsx
 import { jsx as jsx257 } from "react/jsx-runtime";
@@ -48624,7 +48741,7 @@ var iconStyle5 = {
   width: 14
 };
 var TimelineZoomControls = () => {
-  const { canvasContent } = useContext99(Internals80.CompositionManager);
+  const { canvasContent } = useContext99(Internals81.CompositionManager);
   const { setZoom, zoom: zoomMap } = useContext99(TimelineZoomCtx);
   const { tabIndex } = useZIndex();
   const onMinusClicked = useCallback153(() => {
@@ -48763,10 +48880,10 @@ var PreviewToolbarControl = ({ children }) => {
   });
 };
 var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
-  const { playbackRate, setPlaybackRate } = Internals81.usePlaybackRate();
-  const { playerMuted } = useContext100(Internals81.MediaVolumeContext);
-  const { setPlayerMuted } = useContext100(Internals81.SetMediaVolumeContext);
-  const { canvasContent } = useContext100(Internals81.CompositionManager);
+  const { playbackRate, setPlaybackRate } = Internals82.usePlaybackRate();
+  const { playerMuted } = useContext100(Internals82.MediaVolumeContext);
+  const { setPlayerMuted } = useContext100(Internals82.SetMediaVolumeContext);
+  const { canvasContent } = useContext100(Internals82.CompositionManager);
   const isVideoComposition = useIsVideoComposition();
   const previewToolbarRef = useRef55(null);
   const leftScrollIndicatorRef = useRef55(null);
@@ -49283,7 +49400,7 @@ var useResponsiveSidebarStatus = () => {
 var TopPanelInner = ({ readOnlyStudio, onMounted, drawRef: drawRef2, bufferStateDelayInMilliseconds }) => {
   const { setSidebarCollapsedState, sidebarCollapsedStateRight } = useContext103(SidebarContext);
   const rulersAreVisible = useIsRulerVisible();
-  const { canvasContent } = useContext103(Internals82.CompositionManager);
+  const { canvasContent } = useContext103(Internals83.CompositionManager);
   const actualStateLeft = useResponsiveSidebarStatus();
   const actualStateRight = useMemo160(() => {
     if (sidebarCollapsedStateRight === "collapsed") {
@@ -50128,7 +50245,7 @@ function unregisterUnhandledRejection(target) {
 
 // src/error-overlay/react-overlay/utils/unmapper.ts
 import { sourceContentFor } from "@jridgewell/trace-mapping";
-import { Internals as Internals83 } from "remotion";
+import { Internals as Internals84 } from "remotion";
 
 // src/error-overlay/react-overlay/utils/get-lines-around.ts
 function getLinesAround(line3, count, lines2) {
@@ -50152,7 +50269,7 @@ var getFileContents = async (fileName) => {
 var unmap = async (frames, contextLines) => {
   const transpiled = frames.filter((s) => s.type === "transpiled").map((s) => s.frame);
   const uniqueFileNames = [
-    ...new Set(transpiled.map((f) => f.fileName).filter(Internals83.truthy))
+    ...new Set(transpiled.map((f) => f.fileName).filter(Internals84.truthy))
   ];
   const maps = await Promise.all(uniqueFileNames.map(async (fileName) => {
     const fileContents = await getFileContents(fileName);
@@ -50183,7 +50300,7 @@ var unmap = async (frames, contextLines) => {
       originalLineNumber: pos.line,
       originalScriptCode: scriptCode
     };
-  }).filter(Internals83.truthy);
+  }).filter(Internals84.truthy);
 };
 
 // src/error-overlay/react-overlay/utils/get-stack-frames.ts
@@ -50261,7 +50378,7 @@ function listenToRuntimeErrors(crash) {
 // src/error-overlay/react-overlay/index.ts
 var stopListeningToRuntimeErrors = null;
 var didUnmountReactApp = () => {
-  return !Internals84.getPreviewDomElement()?.hasChildNodes();
+  return !Internals85.getPreviewDomElement()?.hasChildNodes();
 };
 function startReportingRuntimeErrors(onError) {
   if (stopListeningToRuntimeErrors !== null) {
@@ -50533,23 +50650,23 @@ var enableHotMiddleware = () => {
 // src/Studio.tsx
 import { useLayoutEffect as useLayoutEffect7 } from "react";
 import { createPortal } from "react-dom";
-import { Internals as Internals121 } from "remotion";
+import { Internals as Internals122 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals23 } from "@remotion/player";
 import React257, { useCallback as useCallback217, useMemo as useMemo220, useState as useState128 } from "react";
-import { Internals as Internals116 } from "remotion";
+import { Internals as Internals117 } from "remotion";
 
 // src/components/canvas-capture-enabled.ts
 var CANVAS_CAPTURE_ENABLED = false;
 
 // src/components/EditorContent.tsx
 import { useCallback as useCallback172, useContext as useContext126 } from "react";
-import { Internals as Internals104 } from "remotion";
+import { Internals as Internals105 } from "remotion";
 
 // src/components/GlobalKeybindings.tsx
 import { useCallback as useCallback161, useContext as useContext107, useEffect as useEffect82, useMemo as useMemo163 } from "react";
-import { Internals as Internals85 } from "remotion";
+import { Internals as Internals86 } from "remotion";
 var sequencePropShortcuts = {
   p: "style.translate",
   r: "style.rotate",
@@ -50563,11 +50680,11 @@ var GlobalKeybindings = () => {
   const { setCheckerboard } = useContext107(CheckerboardContext);
   const { setEditorSnapping } = useContext107(EditorSnappingContext);
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
-  const { sequences } = useContext107(Internals85.SequenceManager);
-  const videoConfig = Internals85.useUnsafeVideoConfig();
-  const { overrideIdToNodePathMappings } = useContext107(Internals85.OverrideIdsToNodePathsGettersContext);
+  const { sequences } = useContext107(Internals86.SequenceManager);
+  const videoConfig = Internals86.useUnsafeVideoConfig();
+  const { overrideIdToNodePathMappings } = useContext107(Internals86.OverrideIdsToNodePathsGettersContext);
   const { navigateToNextComposition, navigateToPreviousComposition } = useCompositionNavigation();
-  const video = Internals85.useVideo();
+  const video = Internals86.useVideo();
   const timeline = useMemo163(() => {
     if (videoConfig === null) {
       return [];
@@ -50756,7 +50873,7 @@ var GlobalKeybindings = () => {
 
 // src/components/Timeline/Timeline.tsx
 import React214, { useCallback as useCallback171, useContext as useContext125, useMemo as useMemo185, useState as useState103 } from "react";
-import { Internals as Internals103 } from "remotion";
+import { Internals as Internals104 } from "remotion";
 
 // src/components/Timeline/MaxTimelineTracks.tsx
 import { jsxs as jsxs135 } from "react/jsx-runtime";
@@ -50787,10 +50904,10 @@ var MaxTimelineTracksReached = () => {
 
 // src/components/Timeline/SequencePropsObserver.tsx
 import { useContext as useContext108, useEffect as useEffect83 } from "react";
-import { Internals as Internals86 } from "remotion";
+import { Internals as Internals87 } from "remotion";
 var SequencePropsObserver = () => {
   const { subscribeToEvent } = useContext108(StudioServerConnectionCtx);
-  const { setPropStatuses } = useContext108(Internals86.VisualModeSettersContext);
+  const { setPropStatuses } = useContext108(Internals87.VisualModeSettersContext);
   useEffect83(() => {
     const handleEvent = (event) => {
       if (event.type !== "sequence-props-updated") {
@@ -50835,11 +50952,11 @@ import {
   stringifySequenceSubscriptionKey as stringifySequenceSubscriptionKey2
 } from "@remotion/studio-shared";
 import { useContext as useContext109, useEffect as useEffect84, useMemo as useMemo164, useRef as useRef59 } from "react";
-import { Internals as Internals88 } from "remotion";
+import { Internals as Internals89 } from "remotion";
 
 // src/components/Timeline/sequence-props-subscription-store.ts
 import { getAllSchemaKeys, getAssetSchemaKeys as getAssetSchemaKeys2 } from "@remotion/studio-shared";
-import { Internals as Internals87 } from "remotion";
+import { Internals as Internals88 } from "remotion";
 var makeKey2 = ({
   fileName,
   line: line3,
@@ -50914,7 +51031,7 @@ var acquireSequencePropsSubscription = ({
         return;
       }
       current.applyOnce = null;
-      Internals87.Log.error(err);
+      Internals88.Log.error(err);
     });
   }
   entry.refCount++;
@@ -50959,16 +51076,16 @@ var useSequencePropsSubscription = ({
   schema,
   effects
 }) => {
-  const { setPropStatuses } = useContext109(Internals88.VisualModeSettersContext);
-  const { setOverrideIdToNodePath } = useContext109(Internals88.OverrideIdsToNodePathsSettersContext);
-  const { overrideIdToNodePathMappings } = useContext109(Internals88.OverrideIdsToNodePathsGettersContext);
+  const { setPropStatuses } = useContext109(Internals89.VisualModeSettersContext);
+  const { setOverrideIdToNodePath } = useContext109(Internals89.OverrideIdsToNodePathsSettersContext);
+  const { overrideIdToNodePathMappings } = useContext109(Internals89.OverrideIdsToNodePathsGettersContext);
   const { migrateExpandedTracksForSubscriptionKey: migrateExpandedTracksForSubscriptionKey2 } = useContext109(ExpandedTracksSetterContext);
   const { previewServerState: state } = useContext109(StudioServerConnectionCtx);
   const previousNodePathRef = useRef59(null);
   const overrideIdToNodePathMappingsRef = useRef59(overrideIdToNodePathMappings);
   overrideIdToNodePathMappingsRef.current = overrideIdToNodePathMappings;
   const clientId = state.type === "connected" ? state.clientId : undefined;
-  const videoConfig = Internals88.useUnsafeVideoConfig();
+  const videoConfig = Internals89.useUnsafeVideoConfig();
   const effectsSignature = useMemo164(() => effects.map((effect) => getAllSchemaKeys2(effect).join("\x00")).join("\x00\x00"), [effects]);
   const validatedLocation = useMemo164(() => {
     if (!originalLocation || !originalLocation.source || !originalLocation.line) {
@@ -51075,11 +51192,11 @@ import React193, {
   useRef as useRef62,
   useState as useState95
 } from "react";
-import { Internals as Internals91, useVideoConfig as useVideoConfig11 } from "remotion";
+import { Internals as Internals92, useVideoConfig as useVideoConfig11 } from "remotion";
 
 // src/components/Timeline/TimelineTimeIndicators.tsx
 import { useContext as useContext110, useEffect as useEffect86, useMemo as useMemo166, useRef as useRef61 } from "react";
-import { Internals as Internals90 } from "remotion";
+import { Internals as Internals91 } from "remotion";
 
 // src/components/TimeValue.tsx
 import { PlayerInternals as PlayerInternals20 } from "@remotion/player";
@@ -51089,7 +51206,7 @@ import {
   useImperativeHandle as useImperativeHandle13,
   useRef as useRef60
 } from "react";
-import { Internals as Internals89, useCurrentFrame } from "remotion";
+import { Internals as Internals90, useCurrentFrame } from "remotion";
 import { jsx as jsx272, jsxs as jsxs136 } from "react/jsx-runtime";
 var text = {
   color: WHITE,
@@ -51116,7 +51233,7 @@ var frameStyle = {
 };
 var TimeValue = () => {
   const frame2 = useCurrentFrame();
-  const config = Internals89.useUnsafeVideoConfig();
+  const config = Internals90.useUnsafeVideoConfig();
   const isStill = useIsStill();
   const { seek, play, pause, toggle } = PlayerInternals20.usePlayer();
   const keybindings = useKeybinding();
@@ -51127,7 +51244,7 @@ var TimeValue = () => {
   const onValueChange = useCallback162((val) => {
     seek(val);
   }, [seek]);
-  useImperativeHandle13(Internals89.timeValueRef, () => ({
+  useImperativeHandle13(Internals90.timeValueRef, () => ({
     goToFrame: () => {
       ref2.current?.click();
     },
@@ -51237,7 +51354,7 @@ var TimelineTimePadding = () => {
 };
 var TimelineTimeIndicators = () => {
   const sliderTrack = useContext110(TimelineWidthContext);
-  const video = Internals90.useVideo();
+  const video = Internals91.useVideo();
   if (sliderTrack === null) {
     return null;
   }
@@ -51352,9 +51469,9 @@ var getClientXWithScroll = (x) => {
   return x + scrollableRef.current?.scrollLeft;
 };
 var TimelineDragHandler = () => {
-  const video = Internals91.useUnsafeVideoConfig();
+  const video = Internals92.useUnsafeVideoConfig();
   const { zoom: zoomMap } = useContext111(TimelineZoomCtx);
-  const { canvasContent } = useContext111(Internals91.CompositionManager);
+  const { canvasContent } = useContext111(Internals92.CompositionManager);
   const containerStyle9 = useMemo167(() => {
     if (!canvasContent || canvasContent.type !== "composition") {
       return {};
@@ -51383,7 +51500,7 @@ var TimelineDragHandlerInner = () => {
     shouldApplyCssTransforms: true
   });
   const { isHighestContext } = useZIndex();
-  const setFrame = Internals91.useTimelineSetFrame();
+  const setFrame = Internals92.useTimelineSetFrame();
   const width = scrollableRef.current?.scrollWidth ?? 0;
   const left3 = size3?.left ?? 0;
   const [dragging, setDragging] = useState95({
@@ -51515,7 +51632,7 @@ var TimelineDragHandlerInner = () => {
     });
     setFrame((c) => {
       const newObj = { ...c, [videoConfig.id]: frame2 };
-      Internals91.persistCurrentFrame(newObj);
+      Internals92.persistCurrentFrame(newObj);
       return newObj;
     });
     if (dragging.wasPlaying) {
@@ -51568,15 +51685,15 @@ import React194, { useMemo as useMemo169 } from "react";
 
 // src/components/Timeline/use-timeline-height.ts
 import { useContext as useContext112, useMemo as useMemo168 } from "react";
-import { Internals as Internals92 } from "remotion";
+import { Internals as Internals93 } from "remotion";
 var useTimelineHeight = ({
   shown,
   hasBeenCut
 }) => {
   const { getIsExpanded } = useContext112(ExpandedTracksGetterContext);
   const { previewServerState } = useContext112(StudioServerConnectionCtx);
-  const { propStatuses } = useContext112(Internals92.VisualModePropStatusesContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext112(Internals92.VisualModeDragOverridesContext);
+  const { propStatuses } = useContext112(Internals93.VisualModePropStatusesContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext112(Internals93.VisualModeDragOverridesContext);
   const { selectedItems } = useTimelineSelection();
   const previewServerConnected = previewServerState.type === "connected";
   const selectedRowKeys = useMemo168(() => getSelectedTimelineExpandedRowKeys(selectedItems), [selectedItems]);
@@ -51665,11 +51782,11 @@ import React197, {
   useMemo as useMemo171,
   useState as useState96
 } from "react";
-import { Internals as Internals94, useVideoConfig as useVideoConfig13 } from "remotion";
+import { Internals as Internals95, useVideoConfig as useVideoConfig13 } from "remotion";
 
 // src/components/Timeline/TimelineInOutPointer.tsx
 import { createRef as createRef11, useContext as useContext113 } from "react";
-import { Internals as Internals93 } from "remotion";
+import { Internals as Internals94 } from "remotion";
 import { jsx as jsx276, jsxs as jsxs137, Fragment as Fragment47 } from "react/jsx-runtime";
 var areaHighlight = {
   position: "absolute",
@@ -51683,7 +51800,7 @@ var inMarkerAreaRef = createRef11();
 var outMarkerAreaRef = createRef11();
 var TimelineInOutPointer = () => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
-  const videoConfig = Internals93.useUnsafeVideoConfig();
+  const videoConfig = Internals94.useUnsafeVideoConfig();
   const timelineWidth = useContext113(TimelineWidthContext);
   if (!videoConfig || timelineWidth === null) {
     return null;
@@ -51767,8 +51884,8 @@ var getClientXWithScroll2 = (x) => {
   return x + scrollableRef.current?.scrollLeft;
 };
 var TimelineInOutDragHandler = () => {
-  const video = Internals94.useUnsafeVideoConfig();
-  const { canvasContent } = useContext115(Internals94.CompositionManager);
+  const video = Internals95.useUnsafeVideoConfig();
+  const { canvasContent } = useContext115(Internals95.CompositionManager);
   if (!canvasContent || canvasContent.type !== "composition") {
     return null;
   }
@@ -52036,7 +52153,7 @@ var TimelineInOutDragHandlerInnerMemo = React197.memo(TimelineInOutDragHandlerIn
 
 // src/components/Timeline/TimelineSequenceItem.tsx
 import React201, { useCallback as useCallback167, useContext as useContext116, useMemo as useMemo176, useState as useState98 } from "react";
-import { Internals as Internals96 } from "remotion";
+import { Internals as Internals97 } from "remotion";
 
 // src/components/Timeline/TimelineExpandedSection.tsx
 import React198, { useMemo as useMemo172 } from "react";
@@ -52109,7 +52226,7 @@ var TimelineExpandedSection = ({
 
 // src/components/Timeline/TimelineMediaInfo.tsx
 import { useMemo as useMemo173 } from "react";
-import { Internals as Internals95 } from "remotion";
+import { Internals as Internals96 } from "remotion";
 import { jsx as jsx280 } from "react/jsx-runtime";
 var lineStyle = {
   whiteSpace: "nowrap",
@@ -52139,7 +52256,7 @@ var useAssetLink = (src) => {
   };
 };
 var TimelineMediaInfo = ({ src }) => {
-  const fileName = useMemo173(() => Internals95.getAssetDisplayName(src), [src]);
+  const fileName = useMemo173(() => Internals96.getAssetDisplayName(src), [src]);
   const { linkInfo, fileNameStyle } = useAssetLink(src);
   return /* @__PURE__ */ jsx280("div", {
     style: fileNameStyle,
@@ -52454,7 +52571,7 @@ var TimelineSequenceItem = ({
   const previewInteractive = previewConnected && studioInteractivityEnabled;
   const { getIsExpanded } = useContext116(ExpandedTracksGetterContext);
   const { toggleTrack } = useContext116(ExpandedTracksSetterContext);
-  const { setPropStatuses } = useContext116(Internals96.VisualModeSettersContext);
+  const { setPropStatuses } = useContext116(Internals97.VisualModeSettersContext);
   const { setSelectedModal } = useContext116(ModalsContext);
   const { isHighestContext } = useKeybinding();
   const selectAsset = useSelectAsset();
@@ -52466,7 +52583,7 @@ var TimelineSequenceItem = ({
   const [isRenaming, setIsRenaming] = useState98(false);
   const [sequenceDropIndicator, setSequenceDropIndicator] = useState98(null);
   const [sequenceDropRejection, setSequenceDropRejection] = useState98(null);
-  const timelinePosition = Internals96.Timeline.useTimelinePosition();
+  const timelinePosition = Internals97.Timeline.useTimelinePosition();
   const { canOpenInEditor, openInEditor: openInEditor2, originalLocation } = useOpenSequenceInEditor(sequence);
   const fileLocation = useMemo176(() => formatFileLocation({
     location: originalLocation,
@@ -52496,7 +52613,7 @@ var TimelineSequenceItem = ({
   });
   const timelineDisplayName = sequence.displayName === "" && connectedCompositions.length === 1 ? connectedCompositions[0].id : displayName;
   const canDeleteFromSource = Boolean(nodePath && validatedLocation?.source);
-  const nodePathKey = useMemo176(() => nodePath ? Internals96.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
+  const nodePathKey = useMemo176(() => nodePath ? Internals97.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
   const parentId = sequence.parent ?? null;
   const canReorderSequence = previewInteractive && Boolean(nodePath && nodePathKey && validatedLocation?.source) && nodePathInfo?.numberOfSequencesWithThisNodePath === 1;
   const canHandleSequenceDrag = previewInteractive;
@@ -52801,11 +52918,23 @@ var TimelineSequenceItem = ({
     }
     e.stopPropagation();
     if (action2 === "open-connected-composition") {
-      selectComposition(connectedCompositions[0], true);
+      selectComposition(connectedCompositions[0], true, getConnectedCompositionFrame({
+        timelinePosition,
+        sequence,
+        sequenceFrameOffset
+      }));
       return;
     }
     openInEditor2();
-  }, [canOpenInEditor, connectedCompositions, openInEditor2, selectComposition]);
+  }, [
+    canOpenInEditor,
+    connectedCompositions,
+    openInEditor2,
+    selectComposition,
+    sequence,
+    sequenceFrameOffset,
+    timelinePosition
+  ]);
   const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenInEditor;
   const canRenameSelectedSequence = canRenameThisSequence && selected && selectedItems.length === 1 && selectedItems[0]?.type === "sequence";
   const onCancelRenaming = useCallback167(() => {
@@ -53130,12 +53259,12 @@ var TimelineList = ({ timeline }) => {
 
 // src/components/Timeline/TimelinePinchZoom.tsx
 import { useCallback as useCallback168, useContext as useContext117, useEffect as useEffect90, useRef as useRef64 } from "react";
-import { Internals as Internals97 } from "remotion";
+import { Internals as Internals98 } from "remotion";
 var ZOOM_WHEEL_DELTA = 0.06;
 var TimelinePinchZoom = () => {
   const isVideoComposition = useIsVideoComposition();
-  const videoConfig = Internals97.useUnsafeVideoConfig();
-  const { canvasContent } = useContext117(Internals97.CompositionManager);
+  const videoConfig = Internals98.useUnsafeVideoConfig();
+  const { canvasContent } = useContext117(Internals98.CompositionManager);
   const { zoom, setZoom } = useContext117(TimelineZoomCtx);
   const { editorZoomGestures } = useContext117(EditorZoomGesturesContext);
   const zoomRef = useRef64(zoom);
@@ -53347,14 +53476,14 @@ var TimelinePinchZoom = () => {
 
 // src/components/Timeline/TimelinePlayCursorSyncer.tsx
 import { useContext as useContext118, useEffect as useEffect91 } from "react";
-import { Internals as Internals98 } from "remotion";
+import { Internals as Internals99 } from "remotion";
 var lastTimelinePositionWhileScrolling = null;
 var TimelinePlayCursorSyncer = () => {
-  const video = Internals98.useVideo();
-  const timelinePosition = Internals98.Timeline.useTimelinePosition();
-  const [playing] = Internals98.Timeline.usePlayingState();
-  const { playbackRate } = Internals98.usePlaybackRate();
-  const { canvasContent } = useContext118(Internals98.CompositionManager);
+  const video = Internals99.useVideo();
+  const timelinePosition = Internals99.Timeline.useTimelinePosition();
+  const [playing] = Internals99.Timeline.usePlayingState();
+  const { playbackRate } = Internals99.usePlaybackRate();
+  const { canvasContent } = useContext118(Internals99.CompositionManager);
   const { zoom: zoomMap } = useContext118(TimelineZoomCtx);
   const compositionId = canvasContent && canvasContent.type === "composition" ? canvasContent.compositionId : null;
   const zoom = compositionId ? zoomMap[compositionId] ?? TIMELINE_MIN_ZOOM : null;
@@ -53580,7 +53709,7 @@ var TimelineExpandedKeyframeRow = React204.memo(TimelineExpandedKeyframeRowUnmem
 // src/components/Timeline/use-expanded-track-keyframe-rows.ts
 import { canEditEasingForInterpolationFunction as canEditEasingForInterpolationFunction4 } from "@remotion/studio-shared";
 import { useContext as useContext121, useMemo as useMemo179 } from "react";
-import { Internals as Internals99 } from "remotion";
+import { Internals as Internals100 } from "remotion";
 var getNodeCanEditEasing = ({
   node,
   nodePath,
@@ -53590,10 +53719,10 @@ var getNodeCanEditEasing = ({
     return false;
   }
   if (node.field.kind === "sequence-field") {
-    const sequencePropStatus = Internals99.getPropStatusesCtx(propStatuses, nodePath)?.[node.field.key];
+    const sequencePropStatus = Internals100.getPropStatusesCtx(propStatuses, nodePath)?.[node.field.key];
     return sequencePropStatus?.status === "keyframed" && canEditEasingForInterpolationFunction4(sequencePropStatus.interpolationFunction);
   }
-  const effectStatus = Internals99.getEffectPropStatusesCtx({
+  const effectStatus = Internals100.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex: node.field.effectIndex
@@ -53607,10 +53736,10 @@ var useExpandedTrackKeyframeRows = ({
   keyframeDisplayOffset
 }) => {
   const { getIsExpanded } = useContext121(ExpandedTracksGetterContext);
-  const { propStatuses } = useContext121(Internals99.VisualModePropStatusesContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext121(Internals99.VisualModeDragOverridesContext);
+  const { propStatuses } = useContext121(Internals100.VisualModePropStatusesContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext121(Internals100.VisualModeDragOverridesContext);
   const { selectedItems } = useTimelineSelection();
-  const timelinePosition = Internals99.Timeline.useTimelinePosition();
+  const timelinePosition = Internals100.Timeline.useTimelinePosition();
   const tree = useMemo179(() => buildTimelineTree({
     sequence,
     nodePathInfo,
@@ -53713,7 +53842,7 @@ var TimelineExpandedTrackKeyframes = React205.memo(TimelineExpandedTrackKeyframe
 
 // src/components/Timeline/TimelineSequence.tsx
 import React211, { useCallback as useCallback170, useContext as useContext123, useMemo as useMemo182, useRef as useRef70 } from "react";
-import { Internals as Internals102, useCurrentFrame as useCurrentFrame2 } from "remotion";
+import { Internals as Internals103, useCurrentFrame as useCurrentFrame2 } from "remotion";
 
 // src/helpers/get-timeline-sequence-layout.ts
 var SEQUENCE_BORDER_WIDTH = 1;
@@ -53841,7 +53970,7 @@ import {
   sliceWaveformPeaks
 } from "@remotion/timeline-utils";
 import { useEffect as useEffect93, useMemo as useMemo180, useRef as useRef66, useState as useState100 } from "react";
-import { Internals as Internals100 } from "remotion";
+import { Internals as Internals101 } from "remotion";
 import { jsx as jsx288, jsxs as jsxs145 } from "react/jsx-runtime";
 var EMPTY_PEAKS = new Float32Array(0);
 var canRetryCanvasTransfer = (err) => {
@@ -53939,7 +54068,7 @@ var AudioWaveform = ({
   const [error, setError] = useState100(null);
   const [waveformCanvasKey, setWaveformCanvasKey] = useState100(0);
   const canUseWorkerPath = useMemo180(() => canUseAudioWaveformWorker(), []);
-  const vidConf = Internals100.useUnsafeVideoConfig();
+  const vidConf = Internals101.useUnsafeVideoConfig();
   if (vidConf === null) {
     throw new Error("Expected video config");
   }
@@ -54345,7 +54474,7 @@ import {
   useRef as useRef68,
   useState as useState101
 } from "react";
-import { Internals as Internals101 } from "remotion";
+import { Internals as Internals102 } from "remotion";
 import { NoReactInternals as NoReactInternals29 } from "remotion/no-react";
 import { jsx as jsx293 } from "react/jsx-runtime";
 var HANDLE_WIDTH3 = 6;
@@ -54363,7 +54492,7 @@ var getKeyframedSequenceDragTargets = ({
   sequence,
   propStatuses
 }) => {
-  const status = propStatuses[Internals101.makeSequencePropsSubscriptionKey(nodePath)];
+  const status = propStatuses[Internals102.makeSequencePropsSubscriptionKey(nodePath)];
   if (status === null || status === undefined || !status.canUpdate) {
     return { effectKeyframes: [], sequenceKeyframes: [] };
   }
@@ -54404,21 +54533,21 @@ var canUpdateDurationInFrames = ({
   propStatuses,
   nodePath
 }) => {
-  const status = Internals101.getPropStatusesCtx(propStatuses, nodePath)?.durationInFrames?.status;
+  const status = Internals102.getPropStatusesCtx(propStatuses, nodePath)?.durationInFrames?.status;
   return status === "static";
 };
 var canUpdateFrom = ({
   propStatuses,
   nodePath
 }) => {
-  const status = Internals101.getPropStatusesCtx(propStatuses, nodePath)?.from?.status;
+  const status = Internals102.getPropStatusesCtx(propStatuses, nodePath)?.from?.status;
   return status === "static";
 };
 var canUpdateTrimBefore = ({
   propStatuses,
   nodePath
 }) => {
-  const status = Internals101.getPropStatusesCtx(propStatuses, nodePath)?.trimBefore?.status;
+  const status = Internals102.getPropStatusesCtx(propStatuses, nodePath)?.trimBefore?.status;
   return status === "static";
 };
 var isTimelineSequenceDurationDraggable = (sequence) => {
@@ -54758,10 +54887,10 @@ var clearFromDragOverrides = ({
   }
 };
 var TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
-  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext122(Internals101.VisualModeSettersContext);
-  const propStatusesRef = useContext122(Internals101.VisualModePropStatusesRefContext);
-  const sequencesRef = useContext122(Internals101.SequenceManagerRefContext);
-  const { overrideIdToNodePathMappings } = useContext122(Internals101.OverrideIdsToNodePathsGettersContext);
+  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext122(Internals102.VisualModeSettersContext);
+  const propStatusesRef = useContext122(Internals102.VisualModePropStatusesRefContext);
+  const sequencesRef = useContext122(Internals102.SequenceManagerRefContext);
+  const { overrideIdToNodePathMappings } = useContext122(Internals102.OverrideIdsToNodePathsGettersContext);
   const { previewServerState } = useContext122(StudioServerConnectionCtx);
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
   const [dragging, setDragging] = useState101(false);
@@ -54816,7 +54945,7 @@ var TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelineD
       redoLabel: dragState.targets.length > 1 ? "Resize selected sequences back" : "Resize sequence back"
     });
     savePromise.catch((err) => {
-      Internals101.Log.error({ logLevel: "error", tag: null }, "Could not save left edge drag", err);
+      Internals102.Log.error({ logLevel: "error", tag: null }, "Could not save left edge drag", err);
     }).finally(() => {
       clearLeftEdgeDragOverrides({
         clearDragOverrides: latestClear,
@@ -54886,9 +55015,9 @@ var TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelineD
           initialTrimBefore: target.initialTrimBefore,
           deltaFrames
         });
-        latestRef.current.setDragOverrides(target.nodePath, "from", Internals101.makeStaticDragOverride(nextValues.from));
-        latestRef.current.setDragOverrides(target.nodePath, "durationInFrames", Internals101.makeStaticDragOverride(nextValues.durationInFrames));
-        latestRef.current.setDragOverrides(target.nodePath, "trimBefore", Internals101.makeStaticDragOverride(nextValues.trimBefore));
+        latestRef.current.setDragOverrides(target.nodePath, "from", Internals102.makeStaticDragOverride(nextValues.from));
+        latestRef.current.setDragOverrides(target.nodePath, "durationInFrames", Internals102.makeStaticDragOverride(nextValues.durationInFrames));
+        latestRef.current.setDragOverrides(target.nodePath, "trimBefore", Internals102.makeStaticDragOverride(nextValues.trimBefore));
       }
     };
     const onUp = (e) => {
@@ -54943,10 +55072,10 @@ var useTimelineSequenceFromDrag = ({
     clearDragOverrides,
     setEffectDragOverrides,
     clearEffectDragOverrides
-  } = useContext122(Internals101.VisualModeSettersContext);
-  const propStatusesRef = useContext122(Internals101.VisualModePropStatusesRefContext);
-  const sequencesRef = useContext122(Internals101.SequenceManagerRefContext);
-  const { overrideIdToNodePathMappings } = useContext122(Internals101.OverrideIdsToNodePathsGettersContext);
+  } = useContext122(Internals102.VisualModeSettersContext);
+  const propStatusesRef = useContext122(Internals102.VisualModePropStatusesRefContext);
+  const sequencesRef = useContext122(Internals102.SequenceManagerRefContext);
+  const { overrideIdToNodePathMappings } = useContext122(Internals102.OverrideIdsToNodePathsGettersContext);
   const { previewServerState } = useContext122(StudioServerConnectionCtx);
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
   const [dragging, setDragging] = useState101(false);
@@ -55014,7 +55143,7 @@ var useTimelineSequenceFromDrag = ({
       redoLabel: dragState.targets.length > 1 ? "Move selected sequences back" : "Move sequence back"
     });
     savePromise.catch((err) => {
-      Internals101.Log.error({ logLevel: "error", tag: null }, "Could not save from", err);
+      Internals102.Log.error({ logLevel: "error", tag: null }, "Could not save from", err);
     }).finally(() => {
       clearFromDragOverrides({
         clearDragOverrides: latestClear,
@@ -55084,7 +55213,7 @@ var useTimelineSequenceFromDrag = ({
           initialFrom: target.initialFrom,
           deltaFrames
         });
-        latestRef.current.setDragOverrides(target.nodePath, "from", Internals101.makeStaticDragOverride(nextFrom));
+        latestRef.current.setDragOverrides(target.nodePath, "from", Internals102.makeStaticDragOverride(nextFrom));
         for (const keyframeTarget of target.sequenceKeyframes) {
           latestRef.current.setDragOverrides(target.nodePath, keyframeTarget.fieldKey, {
             type: "keyframed",
@@ -55139,10 +55268,10 @@ var useTimelineSequenceFromDrag = ({
   };
 };
 var TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
-  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext122(Internals101.VisualModeSettersContext);
-  const propStatusesRef = useContext122(Internals101.VisualModePropStatusesRefContext);
-  const sequencesRef = useContext122(Internals101.SequenceManagerRefContext);
-  const { overrideIdToNodePathMappings } = useContext122(Internals101.OverrideIdsToNodePathsGettersContext);
+  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext122(Internals102.VisualModeSettersContext);
+  const propStatusesRef = useContext122(Internals102.VisualModePropStatusesRefContext);
+  const sequencesRef = useContext122(Internals102.SequenceManagerRefContext);
+  const { overrideIdToNodePathMappings } = useContext122(Internals102.OverrideIdsToNodePathsGettersContext);
   const { previewServerState } = useContext122(StudioServerConnectionCtx);
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
   const [dragging, setDragging] = useState101(false);
@@ -55197,7 +55326,7 @@ var TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeline
       redoLabel: changes.length > 1 ? "Resize selected sequences back" : "Resize sequence back"
     });
     savePromise.catch((err) => {
-      Internals101.Log.error({ logLevel: "error", tag: null }, "Could not save durationInFrames", err);
+      Internals102.Log.error({ logLevel: "error", tag: null }, "Could not save durationInFrames", err);
     }).finally(() => {
       clearDurationDragOverrides({
         clearDragOverrides: latestClear,
@@ -55261,7 +55390,7 @@ var TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeline
       const deltaFrames = Math.round(dx / dragState.pxPerFrame);
       dragState.latestDeltaFrames = deltaFrames;
       for (const target of dragState.targets) {
-        latestRef.current.setDragOverrides(target.nodePath, "durationInFrames", Internals101.makeStaticDragOverride(getTimelineSequenceDurationDragValue({
+        latestRef.current.setDragOverrides(target.nodePath, "durationInFrames", Internals102.makeStaticDragOverride(getTimelineSequenceDurationDragValue({
           initialDuration: target.initialDuration,
           deltaFrames
         })));
@@ -55736,7 +55865,7 @@ var TimelineVideoInfo = ({
 
 // src/components/Timeline/TimelineSequence.tsx
 import { jsx as jsx295, jsxs as jsxs150 } from "react/jsx-runtime";
-var TimelineSequenceFn = ({ s, nodePathInfo, sequenceFrameOffset }) => {
+var TimelineSequenceFn = ({ s, connectedCompositions, nodePathInfo, sequenceFrameOffset }) => {
   const windowWidth = useContext123(TimelineWidthContext);
   if (windowWidth === null) {
     return null;
@@ -55744,6 +55873,7 @@ var TimelineSequenceFn = ({ s, nodePathInfo, sequenceFrameOffset }) => {
   return /* @__PURE__ */ jsx295(TimelineSequenceInner, {
     windowWidth,
     s,
+    connectedCompositions,
     nodePathInfo,
     sequenceFrameOffset
   });
@@ -55759,7 +55889,8 @@ var TimelineSequenceCurrentFrame = ({
   sequenceFrameOffset,
   fromCanUpdate,
   frozenFrame,
-  onMoveDragPointerDown
+  onMoveDragPointerDown,
+  onDoubleClick
 }) => {
   const ref2 = useRef70(null);
   const { onSelect, selectable, selected, selectionItem } = useTimelineRowSelection(nodePathInfo);
@@ -55804,6 +55935,7 @@ var TimelineSequenceCurrentFrame = ({
     style: actualStyle,
     title: s.displayName,
     onPointerDown: selectable ? onPointerDown : undefined,
+    onDoubleClick,
     children: [
       premountWidth ? /* @__PURE__ */ jsx295("div", {
         style: {
@@ -55852,8 +55984,14 @@ var TimelineSequenceCurrentFrame = ({
     ]
   });
 };
-var TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset }) => {
-  const video = Internals102.useVideo();
+var TimelineSequenceInner = ({
+  s,
+  connectedCompositions,
+  windowWidth,
+  nodePathInfo,
+  sequenceFrameOffset
+}) => {
+  const video = Internals103.useVideo();
   const maxMediaDuration = useMaxMediaDuration(s, video?.fps ?? 30);
   const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
   const originalLocation = useResolveStackAndReactToChange(s.getStack);
@@ -55867,10 +56005,10 @@ var TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset
       column: originalLocation.column ?? 0
     };
   }, [originalLocation]);
-  const { propStatuses } = useContext123(Internals102.VisualModePropStatusesContext);
+  const { propStatuses } = useContext123(Internals103.VisualModePropStatusesContext);
   const nodePath = nodePathInfo?.sequenceSubscriptionKey ?? null;
   const propStatusesForOverride = useMemo182(() => {
-    return nodePath ? Internals102.getPropStatusesCtx(propStatuses, nodePath) : undefined;
+    return nodePath ? Internals103.getPropStatusesCtx(propStatuses, nodePath) : undefined;
   }, [propStatuses, nodePath]);
   const durationCanUpdate = Boolean(studioInteractivityEnabled && propStatusesForOverride?.durationInFrames?.status === "static");
   const fromCanUpdate = Boolean(studioInteractivityEnabled && propStatusesForOverride?.from?.status === "static");
@@ -55878,9 +56016,10 @@ var TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset
   const { previewServerState } = useContext123(StudioServerConnectionCtx);
   const previewConnected = previewServerState.type === "connected";
   const previewInteractive = previewConnected && studioInteractivityEnabled;
-  const { setPropStatuses } = useContext123(Internals102.VisualModeSettersContext);
-  const timelinePosition = Internals102.Timeline.useTimelinePosition();
+  const { setPropStatuses } = useContext123(Internals103.VisualModeSettersContext);
+  const timelinePosition = Internals103.Timeline.useTimelinePosition();
   const selectAsset = useSelectAsset();
+  const selectComposition = useSelectComposition();
   const confirm = useConfirmationDialog();
   const { onSelect, selectable } = useTimelineRowSelection(nodePathInfo);
   const fileLocation = useMemo182(() => formatFileLocation({
@@ -55896,6 +56035,39 @@ var TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset
       showNotification(err.message, 2000);
     });
   }, [canOpenInEditor, originalLocation]);
+  const onSequenceDoubleClick = useCallback170((e) => {
+    if (isTimelineSelectionModifierEvent(e)) {
+      e.stopPropagation();
+      return;
+    }
+    const action2 = getSequenceDoubleClickAction({
+      button: e.button,
+      canOpenInEditor,
+      numberOfConnectedCompositions: connectedCompositions.length
+    });
+    if (action2 === null) {
+      return;
+    }
+    e.stopPropagation();
+    if (action2 === "open-connected-composition") {
+      selectComposition(connectedCompositions[0], true, getConnectedCompositionFrame({
+        timelinePosition,
+        sequence: s,
+        sequenceFrameOffset
+      }));
+      return;
+    }
+    openInEditor2();
+  }, [
+    canOpenInEditor,
+    connectedCompositions,
+    openInEditor2,
+    s,
+    selectComposition,
+    sequenceFrameOffset,
+    timelinePosition
+  ]);
+  const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenInEditor;
   const canDeleteFromSource = Boolean(nodePath && validatedLocation?.source);
   const deleteDisabled = !previewInteractive || !s.controls || !canDeleteFromSource;
   const duplicateDisabled = deleteDisabled;
@@ -56075,6 +56247,7 @@ var TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset
     fromCanUpdate,
     frozenFrame,
     onMoveDragPointerDown,
+    onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined,
     children: [
       s.type === "audio" ? /* @__PURE__ */ jsx295(AudioWaveform, {
         src: s.src,
@@ -56154,6 +56327,7 @@ var TimelineTrackUnmemoized = ({ track }) => {
           }) : null,
           /* @__PURE__ */ jsx296(TimelineSequence, {
             s: track.sequence,
+            connectedCompositions: track.connectedCompositions ?? [],
             nodePathInfo: track.nodePathInfo,
             sequenceFrameOffset: track.sequenceFrameOffset
           })
@@ -56217,8 +56391,8 @@ var noop3 = () => {
   return;
 };
 var TimelineContextMenuArea = ({ children }) => {
-  const { compositions, canvasContent } = useContext125(Internals103.CompositionManager);
-  const videoConfig = Internals103.useUnsafeVideoConfig();
+  const { compositions, canvasContent } = useContext125(Internals104.CompositionManager);
+  const videoConfig = Internals104.useUnsafeVideoConfig();
   const [isAddingSolid, setIsAddingSolid] = useState103(false);
   const [isAddingAsset, setIsAddingAsset] = useState103(false);
   const { previewServerState } = useContext125(StudioServerConnectionCtx);
@@ -56280,6 +56454,7 @@ var TimelineContextMenuArea = ({ children }) => {
         files,
         compositionFile,
         compositionId: currentCompositionId,
+        destinationDimensions: null,
         dropPosition: null
       });
     } finally {
@@ -56324,11 +56499,11 @@ var TimelineContextMenuArea = ({ children }) => {
   });
 };
 var TimelineInner = () => {
-  const { sequences } = useContext125(Internals103.SequenceManager);
-  const { compositions } = useContext125(Internals103.CompositionManager);
-  const videoConfig = Internals103.useUnsafeVideoConfig();
+  const { sequences } = useContext125(Internals104.SequenceManager);
+  const { compositions } = useContext125(Internals104.CompositionManager);
+  const videoConfig = Internals104.useUnsafeVideoConfig();
   const isStill = useIsStill();
-  const { overrideIdToNodePathMappings } = useContext125(Internals103.OverrideIdsToNodePathsGettersContext);
+  const { overrideIdToNodePathMappings } = useContext125(Internals104.OverrideIdsToNodePathsGettersContext);
   const { previewServerState } = useContext125(StudioServerConnectionCtx);
   const previewConnected = previewServerState.type === "connected";
   const previewInteractive = previewConnected && studioInteractivityEnabled;
@@ -56476,7 +56651,7 @@ var StudioClearSelectionArea = ({ children }) => {
   });
 };
 var EditorContent = ({ readOnlyStudio, children }) => {
-  const { canvasContent } = useContext126(Internals104.CompositionManager);
+  const { canvasContent } = useContext126(Internals105.CompositionManager);
   const showTimeline = canvasContent !== null && canvasContent.type === "composition";
   const content6 = /* @__PURE__ */ jsxs154(SplitterContainer, {
     orientation: "horizontal",
@@ -57092,7 +57267,7 @@ import { useCallback as useCallback177, useContext as useContext132, useMemo as
 
 // src/components/RenderModal/ResolveCompositionBeforeModal.tsx
 import React219, { useContext as useContext130, useEffect as useEffect100, useMemo as useMemo187 } from "react";
-import { Internals as Internals105 } from "remotion";
+import { Internals as Internals106 } from "remotion";
 import { jsx as jsx305, jsxs as jsxs158 } from "react/jsx-runtime";
 var loaderContainer2 = {
   paddingTop: 40,
@@ -57112,11 +57287,11 @@ var loaderLabel2 = {
 };
 var ResolvedCompositionContext = React219.createContext(null);
 var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
-  const resolved = Internals105.useResolvedVideoConfig(compositionId);
-  const unresolvedContext = useContext130(Internals105.CompositionManager);
+  const resolved = Internals106.useResolvedVideoConfig(compositionId);
+  const unresolvedContext = useContext130(Internals106.CompositionManager);
   const unresolved = unresolvedContext.compositions.find((c) => compositionId === c.id);
   useEffect100(() => {
-    const { current } = Internals105.resolveCompositionsRef;
+    const { current } = Internals106.resolveCompositionsRef;
     if (!current) {
       throw new Error("No ref to trigger composition calc");
     }
@@ -57576,7 +57751,7 @@ var DeleteFolder = ({ folderName, parentName, stack: stack2 }) => {
 
 // src/components/NewComposition/DuplicateComposition.tsx
 import { useCallback as useCallback180, useContext as useContext133, useMemo as useMemo191, useState as useState106 } from "react";
-import { Internals as Internals106 } from "remotion";
+import { Internals as Internals107 } from "remotion";
 
 // src/components/NewComposition/InputAndValidationContainer.tsx
 import { jsx as jsx310 } from "react/jsx-runtime";
@@ -57676,7 +57851,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
   const hadFpsDefined = unresolved.fps !== undefined;
   const hadDurationDefined = unresolved.durationInFrames !== undefined;
   const [selectedFrameRate, setFrameRate] = useState106(resolved.result.fps);
-  const { compositions } = useContext133(Internals106.CompositionManager);
+  const { compositions } = useContext133(Internals107.CompositionManager);
   const [type, setType] = useState106(initialCompType);
   const [newId, setName] = useState106(() => {
     const numberAtEnd = resolved.result.id.match(/([0-9]+)$/)?.[0];
@@ -58035,11 +58210,11 @@ var DuplicateComposition = ({ compositionId, compositionType }) => {
 
 // src/components/NewComposition/NewComposition.tsx
 import { useCallback as useCallback182, useContext as useContext135, useState as useState107 } from "react";
-import { Internals as Internals108 } from "remotion";
+import { Internals as Internals109 } from "remotion";
 
 // src/helpers/use-create-composition.ts
 import { useCallback as useCallback181, useContext as useContext134, useMemo as useMemo192 } from "react";
-import { Internals as Internals107 } from "remotion";
+import { Internals as Internals108 } from "remotion";
 var toPascalCase = (value) => {
   const words = value.match(/[a-zA-Z0-9]+/g) ?? [];
   const candidate = words.map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`).join("");
@@ -58083,7 +58258,7 @@ var useCreateComposition = ({
   selectedFrameRate,
   size: size3
 }) => {
-  const { setCanvasContent } = useContext134(Internals107.CompositionSetters);
+  const { setCanvasContent } = useContext134(Internals108.CompositionSetters);
   const componentName = useMemo192(() => toPascalCase(newId), [newId]);
   const nameValidationMessage = useMemo192(() => {
     return validateCompositionName(newId, compositions);
@@ -58169,8 +58344,8 @@ var folderPathStyle = {
   fontSize: 14
 };
 var NewCompositionLoaded = ({ folderName, parentName, stack: stack2 }) => {
-  const { compositions } = useContext135(Internals108.CompositionManager);
-  const resolvedComposition = Internals108.useResolvedVideoConfig(null);
+  const { compositions } = useContext135(Internals109.CompositionManager);
+  const resolvedComposition = Internals109.useResolvedVideoConfig(null);
   const initialComposition = resolvedComposition?.type === "success" || resolvedComposition?.type === "success-and-refreshing" ? resolvedComposition.result : null;
   const initialDimensions = getNewCompositionDefaults(initialComposition);
   const [newId, setName] = useState107(() => getUniqueCompositionName(compositions));
@@ -58468,17 +58643,17 @@ import {
   useRef as useRef72,
   useState as useState108
 } from "react";
-import { Internals as Internals110 } from "remotion";
+import { Internals as Internals111 } from "remotion";
 
 // src/helpers/validate-new-folder-name.ts
-import { Internals as Internals109 } from "remotion";
+import { Internals as Internals110 } from "remotion";
 var validateNewFolderName = ({
   folders,
   newName,
   parentName
 }) => {
-  if (!Internals109.isFolderNameValid(newName)) {
-    return Internals109.invalidFolderNameErrorMessage;
+  if (!Internals110.isFolderNameValid(newName)) {
+    return Internals110.invalidFolderNameErrorMessage;
   }
   if (folders.find((folder) => {
     return folder.name === newName && folder.parent === parentName;
@@ -58512,7 +58687,7 @@ var getUniqueFolderName = ({
   }
 };
 var NewFolder = ({ parentName, stack: stack2 }) => {
-  const { folders } = useContext136(Internals110.CompositionManager);
+  const { folders } = useContext136(Internals111.CompositionManager);
   const [newName, setName] = useState108(() => getUniqueFolderName({ folders, parentName }));
   const inputRef = useRef72(null);
   useEffect102(() => {
@@ -58640,7 +58815,7 @@ import {
   useRef as useRef73,
   useState as useState109
 } from "react";
-import { Internals as Internals111 } from "remotion";
+import { Internals as Internals112 } from "remotion";
 import { jsx as jsx315, jsxs as jsxs167, Fragment as Fragment57 } from "react/jsx-runtime";
 var content12 = {
   padding: 12,
@@ -58656,7 +58831,7 @@ var RenameCompositionLoaded = () => {
   }
   const { resolved, unresolved } = context;
   const compositionStack = unresolved.stack ?? null;
-  const { compositions } = useContext137(Internals111.CompositionManager);
+  const { compositions } = useContext137(Internals112.CompositionManager);
   const [newId, setName] = useState109(() => {
     return resolved.result.id;
   });
@@ -58774,7 +58949,7 @@ import {
   useRef as useRef74,
   useState as useState110
 } from "react";
-import { Internals as Internals112 } from "remotion";
+import { Internals as Internals113 } from "remotion";
 
 // src/helpers/validate-folder-rename.ts
 var validateFolderRename = ({
@@ -58799,7 +58974,7 @@ var content13 = {
   minWidth: 500
 };
 var RenameFolder = ({ folderName, parentName, stack: stack2 }) => {
-  const { folders } = useContext138(Internals112.CompositionManager);
+  const { folders } = useContext138(Internals113.CompositionManager);
   const [newName, setName] = useState110(folderName);
   const inputRef = useRef74(null);
   useEffect104(() => {
@@ -59051,7 +59226,7 @@ var RenameStaticFileModal = ({ relativePath }) => {
 
 // src/components/OverrideInputProps.tsx
 import { useCallback as useCallback187, useContext as useContext140, useMemo as useMemo196, useState as useState112 } from "react";
-import { Internals as Internals113 } from "remotion";
+import { Internals as Internals114 } from "remotion";
 import { jsx as jsx318, jsxs as jsxs170 } from "react/jsx-runtime";
 var style10 = {
   padding: 12,
@@ -59087,7 +59262,7 @@ var isValidJSON = (value) => {
 };
 var Inner = () => {
   const [value, setValue] = useState112(() => {
-    const override = Internals113.getInputPropsOverride();
+    const override = Internals114.getInputPropsOverride();
     if (override) {
       return JSON.stringify(override, null, 2);
     }
@@ -59102,14 +59277,14 @@ var Inner = () => {
   const onChange = useCallback187((newValue) => {
     if (newValue.trim() === "") {
       setValue(null);
-      Internals113.setInputPropsOverride(null);
+      Internals114.setInputPropsOverride(null);
       return;
     }
     setValue(newValue);
     if (!isValidJSON(newValue)) {
       return;
     }
-    Internals113.setInputPropsOverride(JSON.parse(newValue));
+    Internals114.setInputPropsOverride(JSON.parse(newValue));
   }, [setValue]);
   const onReset = useCallback187(() => {
     onChange("");
@@ -59180,7 +59355,7 @@ import {
   useRef as useRef77,
   useState as useState114
 } from "react";
-import { Internals as Internals114 } from "remotion";
+import { Internals as Internals115 } from "remotion";
 
 // src/icons/keys.tsx
 import { jsx as jsx319 } from "react/jsx-runtime";
@@ -60533,7 +60708,7 @@ var mapModeToQuery = (mode) => {
   throw new Error("no mode" + mode);
 };
 var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }) => {
-  const { compositions } = useContext141(Internals114.CompositionManager);
+  const { compositions } = useContext141(Internals115.CompositionManager);
   const [state, setState] = useState114(() => {
     return {
       query: mapModeToQuery(initialMode),
@@ -60581,7 +60756,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
           selectComposition(c, true);
           setSelectedModal(null);
           const selector = `.__remotion-composition[data-compname="${c.id}"]`;
-          Internals114.compositionSelectorRef.current?.expandComposition(c.id);
+          Internals115.compositionSelectorRef.current?.expandComposition(c.id);
           waitForElm(selector).then(() => {
             document.querySelector(selector)?.scrollIntoView({ block: "center" });
           });
@@ -68443,7 +68618,7 @@ var Modals = ({ readOnlyStudio }) => {
 
 // src/components/SequencePropsSubscriptionProvider.tsx
 import { useState as useState127, useCallback as useCallback216, useMemo as useMemo218 } from "react";
-import { Internals as Internals115 } from "remotion";
+import { Internals as Internals116 } from "remotion";
 import { jsx as jsx375 } from "react/jsx-runtime";
 var SequencePropsSubscriptionProvider = ({ children }) => {
   const [overrideToNodePathMap, setOverrideIdToNodePathMap] = useState127({});
@@ -68462,9 +68637,9 @@ var SequencePropsSubscriptionProvider = ({ children }) => {
   const setters = useMemo218(() => {
     return { setOverrideIdToNodePath };
   }, [setOverrideIdToNodePath]);
-  return /* @__PURE__ */ jsx375(Internals115.OverrideIdsToNodePathsGettersContext.Provider, {
+  return /* @__PURE__ */ jsx375(Internals116.OverrideIdsToNodePathsGettersContext.Provider, {
     value: getters,
-    children: /* @__PURE__ */ jsx375(Internals115.OverrideIdsToNodePathsSettersContext.Provider, {
+    children: /* @__PURE__ */ jsx375(Internals116.OverrideIdsToNodePathsSettersContext.Provider, {
       value: setters,
       children
     })
@@ -68563,7 +68738,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
     children: /* @__PURE__ */ jsx377(TimelineZoomContext, {
       children: /* @__PURE__ */ jsxs208(SequencePropsSubscriptionProvider, {
         children: [
-          /* @__PURE__ */ jsxs208(Internals116.CurrentScaleContext.Provider, {
+          /* @__PURE__ */ jsxs208(Internals117.CurrentScaleContext.Provider, {
             value,
             children: [
               /* @__PURE__ */ jsx377(ForceSpecificCursor, {}),
@@ -68571,11 +68746,11 @@ var Editor = ({ Root, readOnlyStudio }) => {
                 children: /* @__PURE__ */ jsxs208("div", {
                   style: background,
                   children: [
-                    /* @__PURE__ */ jsx377(Internals116.CompositionRenderErrorContext.Provider, {
+                    /* @__PURE__ */ jsx377(Internals117.CompositionRenderErrorContext.Provider, {
                       value: compositionRenderErrorContextValue,
                       children: canvasMounted ? /* @__PURE__ */ jsx377(MemoRoot, {}) : null
                     }),
-                    /* @__PURE__ */ jsx377(Internals116.CanUseRemotionHooksProvider, {
+                    /* @__PURE__ */ jsx377(Internals117.CanUseRemotionHooksProvider, {
                       children: /* @__PURE__ */ jsx377(RenderErrorContext.Provider, {
                         value: renderErrorContextValue,
                         children: /* @__PURE__ */ jsx377(EditorContent, {
@@ -68613,7 +68788,7 @@ import { PlayerInternals as PlayerInternals24 } from "@remotion/player";
 
 // src/state/preview-size.tsx
 import { useCallback as useCallback218, useContext as useContext147, useMemo as useMemo221, useState as useState129 } from "react";
-import { Internals as Internals117 } from "remotion";
+import { Internals as Internals118 } from "remotion";
 import { jsx as jsx378 } from "react/jsx-runtime";
 var key7 = "remotion.previewSize";
 var persistPreviewSizeOption = (option) => {
@@ -68662,7 +68837,7 @@ var PreviewSizeProvider = ({ children }) => {
       setTranslation
     };
   }, [editorZoomGestures, size3, setSize, translation]);
-  return /* @__PURE__ */ jsx378(Internals117.PreviewSizeContext.Provider, {
+  return /* @__PURE__ */ jsx378(Internals118.PreviewSizeContext.Provider, {
     value: previewSizeCtx,
     children
   });
@@ -68694,7 +68869,7 @@ var CheckerboardProvider = ({ children }) => {
 
 // src/components/MediaVolumeProvider.tsx
 import { useMemo as useMemo223, useState as useState131 } from "react";
-import { Internals as Internals118 } from "remotion";
+import { Internals as Internals119 } from "remotion";
 import { jsx as jsx380 } from "react/jsx-runtime";
 var MediaVolumeProvider = ({ children }) => {
   const [playerMuted, setPlayerMuted] = useState131(() => loadMuteOption());
@@ -68711,9 +68886,9 @@ var MediaVolumeProvider = ({ children }) => {
       setMediaVolume
     };
   }, []);
-  return /* @__PURE__ */ jsx380(Internals118.MediaVolumeContext.Provider, {
+  return /* @__PURE__ */ jsx380(Internals119.MediaVolumeContext.Provider, {
     value: mediaVolumeContextValue,
-    children: /* @__PURE__ */ jsx380(Internals118.SetMediaVolumeContext.Provider, {
+    children: /* @__PURE__ */ jsx380(Internals119.SetMediaVolumeContext.Provider, {
       value: setMediaVolumeContextValue,
       children
     })
@@ -69088,7 +69263,7 @@ var FastRefreshProvider = ({ children }) => {
 };
 
 // src/helpers/inject-css.ts
-import { Internals as Internals119 } from "remotion";
+import { Internals as Internals120 } from "remotion";
 var makeDefaultGlobalCSS = () => {
   const unhoveredDragAreaFactor = 2;
   const fromMiddle = 50 / unhoveredDragAreaFactor;
@@ -69099,12 +69274,10 @@ var makeDefaultGlobalCSS = () => {
 	    --remotion-cli-internals-blue: ${BLUE};
 	    --remotion-cli-internals-blue-hovered: ${BLUE_HOVERED};
 	    overscroll-behavior-y: none;
-	    overscroll-behavior-x: none;
 	  }
 
   body {
     overscroll-behavior-y: none;
-    overscroll-behavior-x: none;
     /* Override Chakra UI position: relative on body */
     position: static !important;
   }
@@ -69243,7 +69416,7 @@ var injectCSS = () => {
   if (injected) {
     return;
   }
-  Internals119.CSSUtils.injectCSS(makeDefaultGlobalCSS());
+  Internals120.CSSUtils.injectCSS(makeDefaultGlobalCSS());
   injected = true;
 };
 
@@ -69256,19 +69429,19 @@ import {
   useMemo as useMemo232,
   useState as useState140
 } from "react";
-import { getInputProps as getInputProps2, Internals as Internals120 } from "remotion";
+import { getInputProps as getInputProps2, Internals as Internals121 } from "remotion";
 import { jsx as jsx391 } from "react/jsx-runtime";
 var ResolveCompositionConfigInStudio = ({ children }) => {
   const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState140(null);
-  const { compositions, canvasContent, currentCompositionMetadata } = useContext150(Internals120.CompositionManager);
+  const { compositions, canvasContent, currentCompositionMetadata } = useContext150(Internals121.CompositionManager);
   const { fastRefreshes, manualRefreshes } = useContext150(FastRefreshContext);
   if (manualRefreshes) {}
   const selectedComposition = useMemo232(() => {
     return compositions.find((c) => canvasContent && canvasContent.type === "composition" && canvasContent.compositionId === c.id);
   }, [canvasContent, compositions]);
   const renderModalComposition = compositions.find((c) => c.id === currentRenderModalComposition);
-  const { props: allEditorProps } = useContext150(Internals120.EditorPropsContext);
-  const env = Internals120.getRemotionEnvironment();
+  const { props: allEditorProps } = useContext150(Internals121.EditorPropsContext);
+  const env = Internals121.getRemotionEnvironment();
   const inputProps = useMemo232(() => {
     return typeof window === "undefined" || env.isPlayer ? {} : getInputProps2() ?? {};
   }, [env.isPlayer]);
@@ -69295,7 +69468,7 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
       return controller;
     }
     const { signal } = controller;
-    const result = Internals120.resolveVideoConfigWithMetadataOrCatch({
+    const result = Internals121.resolveVideoConfigWithMetadataOrCatch({
       compositionId,
       calculateMetadata,
       inputProps: combinedProps,
@@ -69389,7 +69562,7 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
       ...inputProps ?? {}
     };
     const controller = new AbortController;
-    const result = Internals120.resolveVideoConfigWithMetadataOrCatch({
+    const result = Internals121.resolveVideoConfigWithMetadataOrCatch({
       compositionId: composition.id,
       calculateMetadata: composition.calculateMetadata,
       inputProps: combinedProps,
@@ -69414,7 +69587,7 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
     }));
     return resolved.videoConfig;
   }, [allEditorProps, compositions, inputProps]);
-  useImperativeHandle14(Internals120.resolveCompositionsRef, () => {
+  useImperativeHandle14(Internals121.resolveCompositionsRef, () => {
     return {
       setCurrentRenderModalComposition: (id) => {
         setCurrentRenderModalComposition(id);
@@ -69556,7 +69729,7 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
       }, {})
     };
   }, [compositions, resolvedConfigs]);
-  return /* @__PURE__ */ jsx391(Internals120.ResolveCompositionContext.Provider, {
+  return /* @__PURE__ */ jsx391(Internals121.ResolveCompositionContext.Provider, {
     value: resolvedConfigsIncludingStaticOnes,
     children
   });
@@ -69568,12 +69741,12 @@ var getServerDisconnectedDomElement = () => {
   return document.getElementById("server-disconnected-overlay");
 };
 var StudioInner = ({ rootComponent, readOnly }) => {
-  return /* @__PURE__ */ jsx392(Internals121.CompositionManagerProvider, {
+  return /* @__PURE__ */ jsx392(Internals122.CompositionManagerProvider, {
     onlyRenderComposition: null,
     currentCompositionMetadata: null,
     initialCompositions: [],
     initialCanvasContent: null,
-    children: /* @__PURE__ */ jsx392(Internals121.RemotionRootContexts, {
+    children: /* @__PURE__ */ jsx392(Internals122.RemotionRootContexts, {
       frameState: null,
       audioEnabled: window.remotion_audioEnabled,
       videoEnabled: window.remotion_videoEnabled,
@@ -69612,7 +69785,7 @@ var Studio = ({ rootComponent, readOnly }) => {
 
 // src/previewEntry.tsx
 import { jsx as jsx393 } from "react/jsx-runtime";
-Internals122.CSSUtils.injectCSS(Internals122.CSSUtils.makeDefaultPreviewCSS(null, BACKGROUND_HEX));
+Internals123.CSSUtils.injectCSS(Internals123.CSSUtils.makeDefaultPreviewCSS(null, BACKGROUND_HEX));
 if (!window.__remotionOverlayStarted) {
   window.__remotionOverlayStarted = true;
   try {
@@ -69627,7 +69800,7 @@ var getRootForElement = () => {
   if (root) {
     return root;
   }
-  root = ReactDOM12.createRoot(Internals122.getPreviewDomElement());
+  root = ReactDOM12.createRoot(Internals123.getPreviewDomElement());
   return root;
 };
 var renderToDOM = (content16) => {
@@ -69635,13 +69808,13 @@ var renderToDOM = (content16) => {
     if (NoReactInternals32.ENABLE_V5_BREAKING_CHANGES) {
       throw new Error("Remotion 5.0 does only support React 18+. However, ReactDOM.createRoot() is undefined.");
     }
-    ReactDOM12.render(content16, Internals122.getPreviewDomElement());
+    ReactDOM12.render(content16, Internals123.getPreviewDomElement());
     return;
   }
   getRootForElement().render(content16);
 };
 renderToDOM(/* @__PURE__ */ jsx393(NoRegisterRoot, {}));
-Internals122.waitForRoot((NewRoot) => {
+Internals123.waitForRoot((NewRoot) => {
   renderToDOM(/* @__PURE__ */ jsx393(Studio, {
     readOnly: false,
     rootComponent: NewRoot