@remotion/studio 4.0.493 → 4.0.494

package/dist/esm/internals.mjs

@@ -25,12 +25,12 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 // 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 React256, { useCallback as useCallback217, useMemo as useMemo220, useState as useState127 } from "react";
-import { Internals as Internals116 } from "remotion";
+import { Internals as Internals117 } from "remotion";
 
 // src/helpers/colors.ts
 var BLACK = "black";
@@ -1264,11 +1264,11 @@ 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 useCallback27, useContext as useContext19, useEffect as useEffect21, useMemo as useMemo29 } from "react";
-import { Internals as Internals21 } from "remotion";
+import { Internals as Internals22 } from "remotion";
 
 // src/helpers/calculate-timeline.ts
 import { stringifySequenceSubscriptionKey } from "@remotion/studio-shared";
@@ -5875,13 +5875,17 @@ var useStaticFiles = () => {
 var useSelectComposition = () => {
   const { setCompositionFoldersExpanded } = useContext13(FolderContext);
   const { setCanvasContent } = useContext13(Internals9.CompositionSetters);
+  const setFrame = Internals9.useTimelineSetFrame();
   const isMobileLayout = useMobileLayout();
   const { setSidebarCollapsedState } = useContext13(SidebarContext);
-  return useCallback22((c, push) => {
+  return useCallback22((c, push, frame = null) => {
     if (push) {
       pushUrl(`/${c.id}`);
     }
     explorerSidebarTabs.current?.selectCompositionPanel();
+    if (frame !== null) {
+      setFrame((current) => ({ ...current, [c.id]: frame }));
+    }
     setCanvasContent({ type: "composition", compositionId: c.id });
     const { folderName, parentFolderName } = c;
     if (folderName !== null) {
@@ -5904,6 +5908,7 @@ var useSelectComposition = () => {
     isMobileLayout,
     setCanvasContent,
     setCompositionFoldersExpanded,
+    setFrame,
     setSidebarCollapsedState
   ]);
 };
@@ -6330,7 +6335,7 @@ import {
   useState as useState21
 } from "react";
 import {
-  Internals as Internals20
+  Internals as Internals21
 } from "remotion";
 
 // src/helpers/interactivity-enabled.ts
@@ -6680,7 +6685,7 @@ import {
 } from "@remotion/studio-shared";
 import { useContext as useContext16, useEffect as useEffect18, useRef as useRef15 } from "react";
 import {
-  Internals as Internals16
+  Internals as Internals17
 } from "remotion";
 
 // src/components/ConfirmationDialog.tsx
@@ -7243,7 +7248,8 @@ var callDeleteKeyframes = ({
       previous: prev,
       keyframes: keyframes.map((keyframe) => ({
         fieldKey: keyframe.fieldKey,
-        frame: keyframe.sourceFrame
+        frame: keyframe.sourceFrame,
+        valueWhenLastKeyframeDeleted: keyframe.valueWhenLastKeyframeDeleted
       }))
     }));
   }
@@ -7257,7 +7263,8 @@ var callDeleteKeyframes = ({
       keyframes: keyframes.map((keyframe) => ({
         effectIndex: keyframe.effectIndex,
         fieldKey: keyframe.fieldKey,
-        frame: keyframe.sourceFrame
+        frame: keyframe.sourceFrame,
+        valueWhenLastKeyframeDeleted: keyframe.valueWhenLastKeyframeDeleted
       }))
     }));
   }
@@ -7267,7 +7274,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,
@@ -7275,7 +7283,8 @@ var callDeleteKeyframes = ({
       effectIndex: keyframe.effectIndex,
       key: keyframe.fieldKey,
       frame: keyframe.sourceFrame,
-      schema: keyframe.schema
+      schema: keyframe.schema,
+      valueWhenLastKeyframeDeleted: keyframe.valueWhenLastKeyframeDeleted
     })),
     clientId
   }).then(() => {
@@ -7350,7 +7359,10 @@ var callUpdateEffectKeyframeSettings = ({
 };
 
 // src/components/Timeline/delete-selected-timeline-item.ts
-import { Internals as Internals14 } from "remotion";
+import { Internals as Internals15 } from "remotion";
+
+// src/components/Timeline/delete-selected-keyframe.ts
+import { Internals as Internals13 } from "remotion";
 
 // src/components/Timeline/find-track-for-node-path-info.ts
 import { stringifySequenceExpandedRowKey as stringifySequenceExpandedRowKey3 } from "@remotion/studio-shared";
@@ -7386,11 +7398,26 @@ var parseKeyframeFieldFromNodePath = (auxiliaryKeys) => {
 };
 
 // src/components/Timeline/delete-selected-keyframe.ts
+var getValueWhenLastKeyframeDeleted = ({
+  propStatus,
+  playheadSourceFrame
+}) => {
+  if (propStatus?.status !== "keyframed" || playheadSourceFrame === null) {
+    return null;
+  }
+  return Internals13.interpolateKeyframedStatus({
+    forceSpringAllowTail: null,
+    frame: playheadSourceFrame,
+    status: propStatus
+  }) ?? null;
+};
 var getSelectedKeyframeDeletion = ({
   nodePathInfo,
   frame,
   sequences,
-  overrideIdsToNodePaths
+  overrideIdsToNodePaths,
+  propStatuses,
+  timelinePosition
 }) => {
   const field = parseKeyframeFieldFromNodePath(nodePathInfo.auxiliaryKeys);
   if (field === null) {
@@ -7406,6 +7433,7 @@ var getSelectedKeyframeDeletion = ({
     return null;
   }
   const sourceFrame = frame - (track?.keyframeDisplayOffset ?? 0);
+  const playheadSourceFrame = timelinePosition === null ? null : timelinePosition - (track?.keyframeDisplayOffset ?? 0);
   const nodePath = nodePathInfo.sequenceSubscriptionKey;
   const fileName = nodePath.absolutePath;
   if (field.type === "effect") {
@@ -7413,6 +7441,16 @@ var getSelectedKeyframeDeletion = ({
     if (!effect) {
       return null;
     }
+    const effectStatus = propStatuses !== null ? Internals13.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,
@@ -7420,16 +7458,23 @@ var getSelectedKeyframeDeletion = ({
       effectIndex: field.effectIndex,
       fieldKey: field.fieldKey,
       sourceFrame,
-      schema: effect.schema
+      schema: effect.schema,
+      valueWhenLastKeyframeDeleted: effectValueWhenLastKeyframeDeleted
     };
   }
+  const sequencePropStatus = propStatuses !== null ? Internals13.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 = ({
@@ -7437,13 +7482,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;
@@ -7492,7 +7541,7 @@ import {
   LINEAR_KEYFRAME_EASING
 } from "@remotion/studio-shared";
 import { canEditEasingForInterpolationFunction as canEditEasingForInterpolationFunction2 } from "@remotion/studio-shared";
-import { Internals as Internals13 } from "remotion";
+import { Internals as Internals14 } from "remotion";
 var isEasingSelection = (selection) => selection.type === "easing";
 var getSelectedEasingUpdate = ({
   selection,
@@ -7519,7 +7568,7 @@ var getSelectedEasingUpdate = ({
     if (!sequence.controls) {
       return null;
     }
-    const sequencePropStatus = Internals13.getPropStatusesCtx(propStatuses, nodePath)?.[field.fieldKey];
+    const sequencePropStatus = Internals14.getPropStatusesCtx(propStatuses, nodePath)?.[field.fieldKey];
     if (sequencePropStatus?.status !== "keyframed" || !canEditEasingForInterpolationFunction(sequencePropStatus.interpolationFunction)) {
       return null;
     }
@@ -7538,7 +7587,7 @@ var getSelectedEasingUpdate = ({
   if (!effect) {
     return null;
   }
-  const effectStatus = Internals13.getEffectPropStatusesCtx({
+  const effectStatus = Internals14.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex: field.effectIndex
@@ -7783,7 +7832,7 @@ var getEasingSelectionAfterDeletingKeyframes = ({
   const nodePath = selection.nodePathInfo.sequenceSubscriptionKey;
   const sourceFrame = selection.frame - track.keyframeDisplayOffset;
   if (field.type === "sequence") {
-    const sequencePropStatus = Internals14.getPropStatusesCtx(propStatuses, nodePath)?.[field.fieldKey];
+    const sequencePropStatus = Internals15.getPropStatusesCtx(propStatuses, nodePath)?.[field.fieldKey];
     if (sequencePropStatus?.status !== "keyframed" || !canEditEasingForInterpolationFunction2(sequencePropStatus.interpolationFunction)) {
       return null;
     }
@@ -7795,7 +7844,7 @@ var getEasingSelectionAfterDeletingKeyframes = ({
       timelinePosition
     });
   }
-  const effectStatus = Internals14.getEffectPropStatusesCtx({
+  const effectStatus = Internals15.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex: field.effectIndex
@@ -7858,7 +7907,9 @@ var deleteSelectedTimelineItems = ({
   overrideIdsToNodePaths,
   setPropStatuses,
   clientId,
-  confirm
+  confirm,
+  propStatuses,
+  timelinePosition
 }) => {
   const firstSelection = selections[0];
   if (!firstSelection) {
@@ -7877,7 +7928,9 @@ var deleteSelectedTimelineItems = ({
       sequences,
       overrideIdsToNodePaths,
       setPropStatuses,
-      clientId
+      clientId,
+      propStatuses,
+      timelinePosition
     });
     return promise?.then(() => true) ?? null;
   }
@@ -7972,13 +8025,13 @@ import {
   LINEAR_KEYFRAME_EASING as LINEAR_KEYFRAME_EASING2
 } from "@remotion/studio-shared";
 import {
-  Internals as Internals15
+  Internals as Internals16
 } from "remotion";
 var getKeyframeClipboardFieldType = ({
   schema,
   fieldKey
 }) => {
-  const field = Internals15.getFlatSchemaWithAllKeys(schema)[fieldKey];
+  const field = Internals16.getFlatSchemaWithAllKeys(schema)[fieldKey];
   if (!field) {
     return null;
   }
@@ -8026,7 +8079,7 @@ var resolveKeyframeField = ({
     if (!track.sequence.controls) {
       return null;
     }
-    const sequencePropStatus = Internals15.getPropStatusesCtx(propStatuses, nodePath)?.[identity.fieldKey];
+    const sequencePropStatus = Internals16.getPropStatusesCtx(propStatuses, nodePath)?.[identity.fieldKey];
     if (!sequencePropStatus || sequencePropStatus.status === "computed") {
       return null;
     }
@@ -8045,7 +8098,7 @@ var resolveKeyframeField = ({
     };
   }
   const effect = track.sequence.effects[identity.effectIndex];
-  const effectStatus = Internals15.getEffectPropStatusesCtx({
+  const effectStatus = Internals16.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex: identity.effectIndex
@@ -8068,7 +8121,7 @@ var resolveKeyframeField = ({
   };
 };
 var areResolvedFieldsEqual = (first, second) => {
-  if (Internals15.makeSequencePropsSubscriptionKey(first.nodePath) !== Internals15.makeSequencePropsSubscriptionKey(second.nodePath)) {
+  if (Internals16.makeSequencePropsSubscriptionKey(first.nodePath) !== Internals16.makeSequencePropsSubscriptionKey(second.nodePath)) {
     return false;
   }
   if (first.identity.type !== second.identity.type) {
@@ -8395,7 +8448,7 @@ var getSnapshotsFromSelection = ({
     return null;
   }
   const { sequenceSubscriptionKey } = selection.nodePathInfo;
-  const sequenceStatus = propStatuses[Internals16.makeSequencePropsSubscriptionKey(sequenceSubscriptionKey)];
+  const sequenceStatus = propStatuses[Internals17.makeSequencePropsSubscriptionKey(sequenceSubscriptionKey)];
   if (!sequenceStatus || !sequenceStatus.canUpdate) {
     return null;
   }
@@ -8500,7 +8553,7 @@ var getEffectPropClipboardDataFromSelection = ({
   if (selection.type !== "sequence-effect-prop") {
     return null;
   }
-  const sequenceStatus = propStatuses[Internals16.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
+  const sequenceStatus = propStatuses[Internals17.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
   if (!sequenceStatus || !sequenceStatus.canUpdate) {
     return null;
   }
@@ -8597,7 +8650,7 @@ var getPasteEffectPropTarget = ({
   if (!effect || !isVisibleFieldSchema(fieldSchema)) {
     return { type: "prop-mismatch" };
   }
-  const sequenceStatus = propStatuses[Internals16.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
+  const sequenceStatus = propStatuses[Internals17.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
   if (!sequenceStatus?.canUpdate) {
     return { type: "uncopyable" };
   }
@@ -8624,16 +8677,16 @@ var getPasteEffectPropTarget = ({
 };
 var TimelineClipboardKeybindings = () => {
   const keybindings = useKeybinding();
-  const timelinePosition = Internals16.Timeline.useTimelinePosition();
+  const timelinePosition = Internals17.Timeline.useTimelinePosition();
   const timelinePositionRef = useRef15(timelinePosition);
   timelinePositionRef.current = timelinePosition;
   const { previewServerState } = useContext16(StudioServerConnectionCtx);
   const { canSelect } = useTimelineSelection();
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
-  const propStatusesRef = useContext16(Internals16.VisualModePropStatusesRefContext);
-  const { setPropStatuses } = useContext16(Internals16.VisualModeSettersContext);
-  const sequencesRef = useContext16(Internals16.SequenceManagerRefContext);
-  const { overrideIdToNodePathMappings } = useContext16(Internals16.OverrideIdsToNodePathsGettersContext);
+  const propStatusesRef = useContext16(Internals17.VisualModePropStatusesRefContext);
+  const { setPropStatuses } = useContext16(Internals17.VisualModeSettersContext);
+  const sequencesRef = useContext16(Internals17.SequenceManagerRefContext);
+  const { overrideIdToNodePathMappings } = useContext16(Internals17.OverrideIdsToNodePathsGettersContext);
   const confirm = useConfirmationDialog();
   useEffect18(() => {
     if (!canSelect || previewServerState.type !== "connected") {
@@ -8782,7 +8835,9 @@ var TimelineClipboardKeybindings = () => {
             overrideIdsToNodePaths: overrideIdToNodePathMappings,
             setPropStatuses,
             clientId,
-            confirm
+            confirm,
+            propStatuses,
+            timelinePosition: timelinePositionRef.current
           });
           return deletePromise?.then((deleted) => {
             if (!deleted) {
@@ -8867,7 +8922,8 @@ var TimelineClipboardKeybindings = () => {
             nodePath: keyframeTarget.nodePath,
             fieldKey: keyframeTarget.fieldKey,
             sourceFrame,
-            schema: keyframeTarget.schema
+            schema: keyframeTarget.schema,
+            valueWhenLastKeyframeDeleted: null
           }));
           return callDeleteKeyframes({
             sequenceKeyframes: effectIndex === null ? deletions : [],
@@ -9072,7 +9128,7 @@ var TimelineClipboardKeybindings = () => {
 // src/components/Timeline/TimelineDeleteKeybindings.tsx
 import { LINEAR_KEYFRAME_EASING as LINEAR_KEYFRAME_EASING3 } from "@remotion/studio-shared";
 import { useContext as useContext17, useEffect as useEffect19, useRef as useRef16 } from "react";
-import { Internals as Internals19 } from "remotion";
+import { Internals as Internals20 } from "remotion";
 
 // src/state/editor-guides.ts
 import { createContext as createContext14 } from "react";
@@ -9197,7 +9253,7 @@ var duplicateSelectedTimelineItems = ({
 
 // src/components/Timeline/reset-selected-timeline-props.ts
 import { getEffectFieldsToShow as getEffectFieldsToShow3 } from "@remotion/studio-shared";
-import { Internals as Internals17 } from "remotion";
+import { Internals as Internals18 } from "remotion";
 
 // src/components/Timeline/save-sequence-prop.ts
 import {
@@ -9443,7 +9499,7 @@ var getActiveFieldSchema = ({
   key: key2,
   resolveValue
 }) => {
-  return Internals17.flattenActiveSchema(schema, resolveValue)[key2];
+  return Internals18.flattenActiveSchema(schema, resolveValue)[key2];
 };
 var getTimelinePropResetTargets = ({
   selections,
@@ -9475,8 +9531,8 @@ var getTimelinePropResetTargets = ({
       if (!sequence.controls) {
         continue;
       }
-      const sequencePropStatus = Internals17.getPropStatusesCtx(propStatuses, nodePath);
-      const { merged: sequenceValuesDotNotation } = Internals17.computeEffectiveSchemaValuesDotNotation({
+      const sequencePropStatus = Internals18.getPropStatusesCtx(propStatuses, nodePath);
+      const { merged: sequenceValuesDotNotation } = Internals18.computeEffectiveSchemaValuesDotNotation({
         schema: sequence.controls.schema,
         currentValue: sequence.controls.currentRuntimeValueDotNotation,
         overrideValues: {},
@@ -9515,7 +9571,7 @@ var getTimelinePropResetTargets = ({
       getEffectDragOverrides: () => ({})
     }).find((candidate) => candidate.key === selection.key) : null;
     const fieldSchema = field?.fieldSchema;
-    const effectStatus = Internals17.getEffectPropStatusesCtx({
+    const effectStatus = Internals18.getEffectPropStatusesCtx({
       propStatuses,
       nodePath,
       effectIndex: selection.i
@@ -9596,7 +9652,7 @@ var resetSelectedTimelineProps = ({
 };
 
 // src/components/Timeline/split-selected-timeline-item.ts
-import { Internals as Internals18 } from "remotion";
+import { Internals as Internals19 } from "remotion";
 var getTimelineSequenceSplitUnsupportedReason = (componentName) => {
   if (componentName === "<TransitionSeries.Sequence>" || componentName === "<TransitionSeries.Overlay>") {
     return `${componentName} cannot be split from source`;
@@ -9731,7 +9787,7 @@ var splitSelectedTimelineItems = ({
     overrideIdsToNodePaths,
     nodePathInfo: selection.nodePathInfo
   });
-  const sequencePropStatuses = propStatuses ? Internals18.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey) : undefined;
+  const sequencePropStatuses = propStatuses ? Internals19.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey) : undefined;
   const eligibility = getTimelineSequenceSplitEligibility({
     selection,
     sequence: track?.sequence ?? null,
@@ -9752,15 +9808,15 @@ var splitSelectedTimelineItems = ({
 var TimelineDeleteKeybindings = () => {
   const keybindings = useKeybinding();
   const { previewServerState } = useContext17(StudioServerConnectionCtx);
-  const sequencesRef = useContext17(Internals19.SequenceManagerRefContext);
-  const { overrideIdToNodePathMappings } = useContext17(Internals19.OverrideIdsToNodePathsGettersContext);
-  const propStatusesRef = useContext17(Internals19.VisualModePropStatusesRefContext);
-  const { setPropStatuses } = useContext17(Internals19.VisualModeSettersContext);
+  const sequencesRef = useContext17(Internals20.SequenceManagerRefContext);
+  const { overrideIdToNodePathMappings } = useContext17(Internals20.OverrideIdsToNodePathsGettersContext);
+  const propStatusesRef = useContext17(Internals20.VisualModePropStatusesRefContext);
+  const { setPropStatuses } = useContext17(Internals20.VisualModeSettersContext);
   const { setGuidesList } = useContext17(EditorShowGuidesContext);
   const { canSelect } = useTimelineSelection();
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
   const confirm = useConfirmationDialog();
-  const timelinePosition = Internals19.Timeline.useTimelinePosition();
+  const timelinePosition = Internals20.Timeline.useTimelinePosition();
   const timelinePositionRef = useRef16(timelinePosition);
   timelinePositionRef.current = timelinePosition;
   useEffect19(() => {
@@ -9791,7 +9847,9 @@ var TimelineDeleteKeybindings = () => {
         overrideIdsToNodePaths: overrideIdToNodePathMappings,
         setPropStatuses,
         clientId,
-        confirm
+        confirm,
+        propStatuses,
+        timelinePosition: timelinePositionRef.current
       });
       if (deletePromise !== null) {
         deletePromise.then((deleted) => {
@@ -10287,10 +10345,10 @@ var getTimelineTreeNodeCanEditEasing = ({
     return false;
   }
   if (node.field.kind === "sequence-field") {
-    const sequencePropStatus = Internals20.getPropStatusesCtx(propStatuses, nodePathInfo.sequenceSubscriptionKey)?.[node.field.key];
+    const sequencePropStatus = Internals21.getPropStatusesCtx(propStatuses, nodePathInfo.sequenceSubscriptionKey)?.[node.field.key];
     return sequencePropStatus?.status === "keyframed" && canEditEasingForInterpolationFunction3(sequencePropStatus.interpolationFunction);
   }
-  const effectStatus = Internals20.getEffectPropStatusesCtx({
+  const effectStatus = Internals21.getEffectPropStatusesCtx({
     propStatuses,
     nodePath: nodePathInfo.sequenceSubscriptionKey,
     effectIndex: node.field.effectIndex
@@ -10444,9 +10502,9 @@ var TimelineEscapeKeybindings = () => {
 };
 var TimelineSelectableItemsProvider = ({ children, timeline }) => {
   const { getIsExpanded } = useContext18(ExpandedTracksGetterContext);
-  const { propStatuses } = useContext18(Internals20.VisualModePropStatusesContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext18(Internals20.VisualModeDragOverridesContext);
-  const timelinePosition = Internals20.Timeline.useTimelinePosition();
+  const { propStatuses } = useContext18(Internals21.VisualModePropStatusesContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext18(Internals21.VisualModeDragOverridesContext);
+  const timelinePosition = Internals21.Timeline.useTimelinePosition();
   const { selectedItems } = useTimelineSelection();
   const selectableItems = useMemo28(() => getSelectableTimelineItems({
     getDragOverrides,
@@ -10472,7 +10530,7 @@ var TimelineSelectableItemsProvider = ({ children, timeline }) => {
 };
 var TimelineSelectionProvider = ({ children }) => {
   const { previewServerState } = useContext18(StudioServerConnectionCtx);
-  const { canvasContent } = useContext18(Internals20.CompositionManager);
+  const { canvasContent } = useContext18(Internals21.CompositionManager);
   const timelineSelectionScope = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
   const { expandParentTracks } = useContext18(ExpandedTracksSetterContext);
   const canSelect = studioInteractivityEnabled && previewServerState.type === "connected" && !window.remotion_isReadOnlyStudio;
@@ -10974,11 +11032,11 @@ var GlobalKeybindings = () => {
   const { setCheckerboard } = useContext19(CheckerboardContext);
   const { setEditorSnapping } = useContext19(EditorSnappingContext);
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
-  const { sequences } = useContext19(Internals21.SequenceManager);
-  const videoConfig = Internals21.useUnsafeVideoConfig();
-  const { overrideIdToNodePathMappings } = useContext19(Internals21.OverrideIdsToNodePathsGettersContext);
+  const { sequences } = useContext19(Internals22.SequenceManager);
+  const videoConfig = Internals22.useUnsafeVideoConfig();
+  const { overrideIdToNodePathMappings } = useContext19(Internals22.OverrideIdsToNodePathsGettersContext);
   const { navigateToNextComposition, navigateToPreviousComposition } = useCompositionNavigation();
-  const video = Internals21.useVideo();
+  const video = Internals22.useVideo();
   const timeline = useMemo29(() => {
     if (videoConfig === null) {
       return [];
@@ -11170,7 +11228,7 @@ import { useCallback as useCallback161, useMemo as useMemo163, useState as useSt
 
 // src/helpers/use-menu-structure.tsx
 import { useContext as useContext22, useEffect as useEffect24, useMemo as useMemo35 } from "react";
-import { Internals as Internals25 } from "remotion";
+import { Internals as Internals26 } from "remotion";
 import { NoReactInternals as NoReactInternals5 } from "remotion/no-react";
 
 // src/api/restart-studio.ts
@@ -11187,7 +11245,7 @@ var restartStudio = () => {
 
 // src/components/SizeSelector.tsx
 import { useContext as useContext20, useMemo as useMemo32 } from "react";
-import { Internals as Internals22 } from "remotion";
+import { Internals as Internals23 } from "remotion";
 
 // src/helpers/get-preview-file-type.ts
 var getPreviewFileType = (fileName) => {
@@ -11524,8 +11582,8 @@ var getUniqueSizes = (size) => {
 };
 var zoomableFileTypes = ["video", "image"];
 var SizeSelector = () => {
-  const { size, setSize } = useContext20(Internals22.PreviewSizeContext);
-  const { canvasContent } = useContext20(Internals22.CompositionManager);
+  const { size, setSize } = useContext20(Internals23.PreviewSizeContext);
+  const { canvasContent } = useContext20(Internals23.CompositionManager);
   const style2 = useMemo32(() => {
     return {
       padding: CONTROL_BUTTON_PADDING
@@ -11588,7 +11646,7 @@ import {
   useEffect as useEffect23,
   useImperativeHandle as useImperativeHandle5
 } from "react";
-import { Internals as Internals24 } from "remotion";
+import { Internals as Internals25 } from "remotion";
 import { NoReactInternals as NoReactInternals4 } from "remotion/no-react";
 
 // src/icons/timelineInOutPointer.tsx
@@ -11624,7 +11682,7 @@ var TimelineOutPointer = (props) => {
 
 // src/state/in-out.ts
 import { createContext as createContext16, useContext as useContext21, useMemo as useMemo33 } from "react";
-import { Internals as Internals23 } from "remotion";
+import { Internals as Internals24 } from "remotion";
 var TimelineInOutContext = createContext16({});
 var SetTimelineInOutContext = createContext16({
   setInAndOutFrames: () => {
@@ -11632,7 +11690,7 @@ var SetTimelineInOutContext = createContext16({
   }
 });
 var useTimelineInOutFramePosition = () => {
-  const videoConfig = Internals23.useUnsafeVideoConfig();
+  const videoConfig = Internals24.useUnsafeVideoConfig();
   const state = useContext21(TimelineInOutContext);
   const id = videoConfig?.id;
   const durationInFrames = videoConfig?.durationInFrames;
@@ -11670,7 +11728,7 @@ var defaultInOutValue = { inFrame: null, outFrame: null };
 var TimelineInOutPointToggle = () => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
   const { setInAndOutFrames } = useTimelineSetInOutFramePosition();
-  const videoConfig = Internals24.useUnsafeVideoConfig();
+  const videoConfig = Internals25.useUnsafeVideoConfig();
   const keybindings = useKeybinding();
   const { getCurrentFrame: getCurrentFrame2, isFirstFrame, isLastFrame } = PlayerInternals6.usePlayer();
   const onInOutClear = useCallback29((composition) => {
@@ -12224,8 +12282,8 @@ var useMenuStructure = (closeMenu, readOnlyStudio) => {
   const { editorShowRulers, setEditorShowRulers } = useContext22(EditorShowRulersContext);
   const { editorShowGuides, setEditorShowGuides } = useContext22(EditorShowGuidesContext);
   const { editorSnapping, setEditorSnapping } = useContext22(EditorSnappingContext);
-  const { size, setSize } = useContext22(Internals25.PreviewSizeContext);
-  const { canvasContent, compositions } = useContext22(Internals25.CompositionManager);
+  const { size, setSize } = useContext22(Internals26.PreviewSizeContext);
+  const { canvasContent, compositions } = useContext22(Internals26.CompositionManager);
   const { type } = useContext22(StudioServerConnectionCtx).previewServerState;
   const {
     setSidebarCollapsedState,
@@ -12663,7 +12721,7 @@ var useMenuStructure = (closeMenu, readOnlyStudio) => {
             leftItem: null,
             onClick: () => {
               closeMenu();
-              Internals25.timeValueRef.current?.goToFrame();
+              Internals26.timeValueRef.current?.goToFrame();
             },
             subMenu: null,
             type: "item",
@@ -12688,7 +12746,7 @@ var useMenuStructure = (closeMenu, readOnlyStudio) => {
             value: "fullscreen",
             quickSwitcherLabel: "Go Fullscreen"
           } : null
-        ].filter(Internals25.truthy)
+        ].filter(Internals26.truthy)
       },
       {
         id: "composition",
@@ -12754,7 +12812,7 @@ var useMenuStructure = (closeMenu, readOnlyStudio) => {
             subMenu: null,
             quickSwitcherLabel: `Install package...`
           }
-        ].filter(Internals25.truthy),
+        ].filter(Internals26.truthy),
         quickSwitcherLabel: null
       },
       {
@@ -12898,7 +12956,7 @@ var useMenuStructure = (closeMenu, readOnlyStudio) => {
           }
         ]
       }
-    ].filter(Internals25.truthy);
+    ].filter(Internals26.truthy);
     if (mobileLayout) {
       struct = [
         {
@@ -13152,7 +13210,7 @@ import {
 
 // src/components/MenuCompositionName.tsx
 import { useCallback as useCallback31, useContext as useContext23, useMemo as useMemo37, useState as useState24 } from "react";
-import { Internals as Internals26 } from "remotion";
+import { Internals as Internals27 } from "remotion";
 import { jsx as jsx55, jsxs as jsxs17, Fragment as Fragment9 } from "react/jsx-runtime";
 var baseStyle = {
   color: "inherit",
@@ -13180,7 +13238,7 @@ var slashStyle = {
   top: 1
 };
 var MenuCompositionName = () => {
-  const { canvasContent, compositions } = useContext23(Internals26.CompositionManager);
+  const { canvasContent, compositions } = useContext23(Internals27.CompositionManager);
   const connectionStatus = useContext23(StudioServerConnectionCtx).previewServerState.type;
   const [opening, setOpening] = useState24(false);
   const [hovered, setHovered] = useState24(false);
@@ -13398,7 +13456,7 @@ import { useCallback as useCallback158, useContext as useContext105, useEffect a
 
 // src/components/TopPanel.tsx
 import React185, { useCallback as useCallback157, useContext as useContext104, useEffect as useEffect78, useMemo as useMemo161 } from "react";
-import { Internals as Internals85 } from "remotion";
+import { Internals as Internals86 } from "remotion";
 
 // src/helpers/use-breakpoint.ts
 import { useEffect as useEffect26, useRef as useRef20, useState as useState26 } from "react";
@@ -13422,7 +13480,7 @@ function useBreakpoint(breakpoint2) {
 
 // src/components/CanvasIfSizeIsAvailable.tsx
 import { useContext as useContext40, useMemo as useMemo59 } from "react";
-import { Internals as Internals44 } from "remotion";
+import { Internals as Internals45 } from "remotion";
 
 // src/helpers/ruler-canvas-size.ts
 var applyRulerInsetsToCanvasSize = ({
@@ -13443,7 +13501,7 @@ var applyRulerInsetsToCanvasSize = ({
 
 // src/components/CanvasOrLoading.tsx
 import { useContext as useContext39, useEffect as useEffect44 } from "react";
-import { Internals as Internals43 } from "remotion";
+import { Internals as Internals44 } from "remotion";
 
 // src/error-overlay/remotion-overlay/ErrorLoader.tsx
 import { getLocationFromBuildError as getLocationFromBuildError3 } from "@remotion/studio-shared";
@@ -13484,7 +13542,7 @@ var setErrorsRef = createRef9();
 
 // src/error-overlay/react-overlay/utils/unmapper.ts
 import { sourceContentFor } from "@jridgewell/trace-mapping";
-import { Internals as Internals27 } from "remotion";
+import { Internals as Internals28 } from "remotion";
 
 // src/error-overlay/react-overlay/utils/get-lines-around.ts
 function getLinesAround(line2, count, lines2) {
@@ -13508,7 +13566,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(Internals27.truthy))
+    ...new Set(transpiled.map((f) => f.fileName).filter(Internals28.truthy))
   ];
   const maps = await Promise.all(uniqueFileNames.map(async (fileName) => {
     const fileContents = await getFileContents(fileName);
@@ -13539,7 +13597,7 @@ var unmap = async (frames, contextLines) => {
       originalLineNumber: pos.line,
       originalScriptCode: scriptCode
     };
-  }).filter(Internals27.truthy);
+  }).filter(Internals28.truthy);
 };
 
 // src/error-overlay/react-overlay/utils/get-stack-frames.ts
@@ -13666,9 +13724,9 @@ var CopyStackTrace = ({ errorText }) => {
 };
 
 // src/error-overlay/react-overlay/index.ts
-import { Internals as Internals28 } from "remotion";
+import { Internals as Internals29 } from "remotion";
 var didUnmountReactApp = () => {
-  return !Internals28.getPreviewDomElement()?.hasChildNodes();
+  return !Internals29.getPreviewDomElement()?.hasChildNodes();
 };
 
 // src/error-overlay/remotion-overlay/DismissButton.tsx
@@ -14911,7 +14969,7 @@ import {
   useRef as useRef33,
   useState as useState42
 } from "react";
-import { Internals as Internals41, watchStaticFile } from "remotion";
+import { Internals as Internals42, watchStaticFile } from "remotion";
 
 // src/helpers/get-asset-metadata.ts
 import { getVideoMetadata } from "@remotion/media-utils";
@@ -14995,7 +15053,7 @@ var getAssetMetadata = async (canvasContent, addTime) => {
 };
 
 // src/helpers/get-effective-translation.ts
-import { Internals as Internals29 } from "remotion";
+import { Internals as Internals30 } from "remotion";
 
 // src/helpers/smooth-zoom.ts
 var BASE = Math.E / 4;
@@ -15085,7 +15143,7 @@ var applyZoomAroundFocalPoint = ({
   clientX,
   clientY
 }) => {
-  const scale = Internals29.calculateScale({
+  const scale = Internals30.calculateScale({
     canvasSize,
     compositionHeight: contentDimensions.height,
     compositionWidth: contentDimensions.width,
@@ -15230,18 +15288,18 @@ var getRemoteAssetUrlFromDataTransfer = (dataTransfer) => {
 
 // src/components/EditorGuides/index.tsx
 import { useContext as useContext27, useMemo as useMemo47 } from "react";
-import { Internals as Internals31 } from "remotion";
+import { Internals as Internals32 } from "remotion";
 
 // src/helpers/use-studio-canvas-dimensions.ts
 import { PlayerInternals as PlayerInternals9 } from "@remotion/player";
 import { useContext as useContext25, useMemo as useMemo44 } from "react";
-import { Internals as Internals30 } from "remotion";
+import { Internals as Internals31 } from "remotion";
 var useStudioCanvasDimensions = ({
   canvasSize,
   contentDimensions,
   assetMetadata
 }) => {
-  const { size: previewSize } = useContext25(Internals30.PreviewSizeContext);
+  const { size: previewSize } = useContext25(Internals31.PreviewSizeContext);
   const { centerX, centerY, scale } = useMemo44(() => {
     if (contentDimensions === "none" || contentDimensions === null || assetMetadata && (assetMetadata.type === "not-found" || assetMetadata.type === "metadata-error") || !canvasSize) {
       return {
@@ -15641,7 +15699,7 @@ var EditorGuides = ({ canvasSize, contentDimensions, assetMetadata }) => {
     contentDimensions,
     assetMetadata
   });
-  const { canvasContent } = useContext27(Internals31.CompositionManager);
+  const { canvasContent } = useContext27(Internals32.CompositionManager);
   if (canvasContent === null || canvasContent.type !== "composition") {
     throw new Error("Expected to be in a composition");
   }
@@ -15887,7 +15945,7 @@ import {
   useMemo as useMemo48,
   useRef as useRef24
 } from "react";
-import { Internals as Internals32 } from "remotion";
+import { Internals as Internals33 } from "remotion";
 import { jsx as jsx79 } from "react/jsx-runtime";
 var makeGuideId = () => {
   return Math.random().toString(36).substring(7);
@@ -15913,7 +15971,7 @@ var Ruler = ({
     setEditorShowGuides
   } = useContext28(EditorShowGuidesContext);
   const { selectedItems } = useTimelineSelection();
-  const unsafeVideoConfig = Internals32.useUnsafeVideoConfig();
+  const unsafeVideoConfig = Internals33.useUnsafeVideoConfig();
   if (!unsafeVideoConfig) {
     throw new Error("Video config not set");
   }
@@ -16199,9 +16257,9 @@ var EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef
 
 // src/components/EditorRuler/use-is-ruler-visible.ts
 import { useContext as useContext30 } from "react";
-import { Internals as Internals33 } from "remotion";
+import { Internals as Internals34 } from "remotion";
 var useIsRulerVisible = () => {
-  const { canvasContent } = useContext30(Internals33.CompositionManager);
+  const { canvasContent } = useContext30(Internals34.CompositionManager);
   const { editorShowRulers } = useContext30(EditorShowRulersContext);
   return editorShowRulers && canvasContent && canvasContent.type === "composition";
 };
@@ -16349,7 +16407,7 @@ import {
   getRequiredPackageForInsertableElement,
   isUrl
 } from "@remotion/studio-shared";
-import { Internals as Internals34, staticFile as staticFile2 } from "remotion";
+import { Internals as Internals35, staticFile as staticFile2 } from "remotion";
 import { NoReactInternals as NoReactInternals7 } from "remotion/no-react";
 
 // src/api/write-static-file.ts
@@ -16382,6 +16440,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",
@@ -16442,7 +16510,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",
@@ -16494,6 +16562,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");
@@ -16558,6 +16639,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;
@@ -16606,6 +16697,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;
   }
@@ -16629,7 +16724,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)) {
@@ -16656,7 +16751,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 {
@@ -16744,6 +16839,7 @@ var downloadRemoteAsset = (url) => {
 var importAssets = async ({
   compositionFile,
   compositionId,
+  destinationDimensions,
   dropPosition,
   files
 }) => {
@@ -16773,7 +16869,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
       });
@@ -16790,14 +16886,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
           })
         }
@@ -16818,6 +16916,7 @@ var importAssets = async ({
 var importRemoteAsset = async ({
   compositionFile,
   compositionId,
+  destinationDimensions,
   dropPosition,
   url
 }) => {
@@ -16835,8 +16934,9 @@ var importRemoteAsset = async ({
       compositionId,
       element: {
         ...element,
-        position: getCenteredPosition({
-          dimensions: element.dimensions,
+        position: getAssetPositionForDrop({
+          assetDimensions: element.dimensions,
+          destinationDimensions,
           dropPosition
         })
       }
@@ -16884,6 +16984,7 @@ var insertExistingAssets = async ({
   assetPaths,
   compositionFile,
   compositionId,
+  destinationDimensions,
   dropPosition
 }) => {
   if (assetPaths.length === 0) {
@@ -16905,8 +17006,9 @@ var insertExistingAssets = async ({
         element: {
           ...element,
           dimensions,
-          position: getCenteredPosition({
-            dimensions,
+          position: getAssetPositionForDrop({
+            assetDimensions: dimensions,
+            destinationDimensions,
             dropPosition
           })
         }
@@ -16975,7 +17077,7 @@ var insertComposition = async ({
     return;
   }
   try {
-    const resolver = Internals34.resolveCompositionsRef.current;
+    const resolver = Internals35.resolveCompositionsRef.current;
     if (!resolver) {
       throw new Error("No composition resolver available");
     }
@@ -17046,7 +17148,7 @@ import {
   useMemo as useMemo57,
   useRef as useRef32
 } from "react";
-import { Internals as Internals40 } from "remotion";
+import { Internals as Internals41 } from "remotion";
 
 // src/helpers/checkerboard-background.ts
 var getCheckerboardBackgroundSize = (size2) => `${size2}px ${size2}px`;
@@ -17481,7 +17583,7 @@ import React68, {
   useRef as useRef31,
   useState as useState41
 } from "react";
-import { Internals as Internals39 } from "remotion";
+import { Internals as Internals40 } from "remotion";
 import { NoReactInternals as NoReactInternals13 } from "remotion/no-react";
 
 // src/state/editor-outlines.ts
@@ -17502,7 +17604,7 @@ var EditorShowOutlinesContext = createContext19({
 });
 
 // src/components/selected-outline-drag.ts
-import { Internals as Internals36 } from "remotion";
+import { Internals as Internals37 } from "remotion";
 import { NoReactInternals as NoReactInternals9 } from "remotion/no-react";
 
 // src/components/selected-outline-geometry.ts
@@ -19127,7 +19229,7 @@ var transformOriginFieldKey = "style.transformOrigin";
 var selectedOutlineDragThresholdPx = 4;
 
 // src/components/selected-outline-uv.ts
-import { Internals as Internals35 } from "remotion";
+import { Internals as Internals36 } from "remotion";
 
 // src/components/Timeline/timeline-field-utils.ts
 var getDecimalPlaces = (num) => {
@@ -19646,7 +19748,7 @@ var getSelectedUvHandles = ({
     if (!effect) {
       continue;
     }
-    const effectStatus = Internals35.getEffectPropStatusesCtx({
+    const effectStatus = Internals36.getEffectPropStatusesCtx({
       propStatuses,
       nodePath,
       effectIndex
@@ -19659,12 +19761,12 @@ var getSelectedUvHandles = ({
       continue;
     }
     const dragOverrides = getEffectDragOverrides(nodePath, effectIndex);
-    const activeSchema = Internals35.flattenActiveSchema(effect.schema, (key3) => {
+    const activeSchema = Internals36.flattenActiveSchema(effect.schema, (key3) => {
       const propStatus = effectStatus.props[key3];
       if (propStatus?.status !== "static" && propStatus?.status !== "keyframed") {
         return;
       }
-      return Internals35.getEffectiveVisualModeValue({
+      return Internals36.getEffectiveVisualModeValue({
         propStatus,
         dragOverrideValue: dragOverrides[key3],
         defaultValue: undefined,
@@ -19681,7 +19783,7 @@ var getSelectedUvHandles = ({
       if (propStatus?.status !== "static" && propStatus?.status !== "keyframed") {
         continue;
       }
-      effectValues[fieldKey] = Internals35.getEffectiveVisualModeValue({
+      effectValues[fieldKey] = Internals36.getEffectiveVisualModeValue({
         propStatus,
         dragOverrideValue: dragOverrides[fieldKey],
         defaultValue: fieldSchema.default,
@@ -21251,14 +21353,14 @@ var getSelectedOutlineActiveSchema = ({
   propStatus,
   frame: frame2
 }) => {
-  const { merged: valuesDotNotation } = Internals36.computeEffectiveSchemaValuesDotNotation({
+  const { merged: valuesDotNotation } = Internals37.computeEffectiveSchemaValuesDotNotation({
     schema,
     currentValue: currentRuntimeValueDotNotation,
     overrideValues: dragOverrides,
     propStatus,
     frame: frame2
   });
-  return Internals36.flattenActiveSchema(schema, (key3) => valuesDotNotation[key3]);
+  return Internals37.flattenActiveSchema(schema, (key3) => valuesDotNotation[key3]);
 };
 var getSelectedOutlineDragStates = ({
   dragTargets,
@@ -21268,7 +21370,7 @@ var getSelectedOutlineDragStates = ({
   return dragTargets.map((target) => {
     const dragOverrideValue = (getDragOverrides(target.nodePath) ?? {})[translateFieldKey];
     const sourceFrame = timelinePosition - target.keyframeDisplayOffset;
-    const effectiveValue = Internals36.getEffectiveVisualModeValue({
+    const effectiveValue = Internals37.getEffectiveVisualModeValue({
       propStatus: target.propStatus,
       dragOverrideValue,
       defaultValue: target.fieldDefault,
@@ -21278,7 +21380,7 @@ var getSelectedOutlineDragStates = ({
     const [startX, startY] = parseTranslate(String(effectiveValue ?? "0px 0px"));
     return {
       defaultValue: target.fieldDefault !== undefined ? JSON.stringify(target.fieldDefault) : null,
-      key: Internals36.makeSequencePropsSubscriptionKey(target.nodePath),
+      key: Internals37.makeSequencePropsSubscriptionKey(target.nodePath),
       sourceFrame,
       startX,
       startY,
@@ -21428,7 +21530,7 @@ var getSelectedOutlineScaleDragStates = ({
   return dragTargets.map((target) => {
     const dragOverrideValue = (getDragOverrides(target.nodePath) ?? {})[scaleFieldKey];
     const sourceFrame = timelinePosition - target.keyframeDisplayOffset;
-    const effectiveValue = Internals36.getEffectiveVisualModeValue({
+    const effectiveValue = Internals37.getEffectiveVisualModeValue({
       propStatus: target.propStatus,
       dragOverrideValue,
       defaultValue: target.fieldDefault,
@@ -21438,7 +21540,7 @@ var getSelectedOutlineScaleDragStates = ({
     const [startX, startY, startZ] = NoReactInternals9.parseScaleValue(effectiveValue);
     return {
       defaultValue: target.fieldDefault !== undefined ? JSON.stringify(target.fieldDefault) : null,
-      key: Internals36.makeSequencePropsSubscriptionKey(target.nodePath),
+      key: Internals37.makeSequencePropsSubscriptionKey(target.nodePath),
       sourceFrame,
       startX,
       startY,
@@ -21534,7 +21636,7 @@ var getSelectedOutlineRotationDragStates = ({
   return dragTargets.map((target) => {
     const dragOverrideValue = (getDragOverrides(target.nodePath) ?? {})[rotateFieldKey];
     const sourceFrame = timelinePosition - target.keyframeDisplayOffset;
-    const effectiveValue = Internals36.getEffectiveVisualModeValue({
+    const effectiveValue = Internals37.getEffectiveVisualModeValue({
       propStatus: target.propStatus,
       dragOverrideValue,
       defaultValue: target.fieldDefault,
@@ -21543,7 +21645,7 @@ var getSelectedOutlineRotationDragStates = ({
     });
     return {
       defaultValue: target.fieldDefault !== undefined ? JSON.stringify(target.fieldDefault) : null,
-      key: Internals36.makeSequencePropsSubscriptionKey(target.nodePath),
+      key: Internals37.makeSequencePropsSubscriptionKey(target.nodePath),
       sourceFrame,
       startDegrees: parseCssRotationToDegrees(String(effectiveValue ?? "0deg")),
       target
@@ -21930,7 +22032,7 @@ var findSelectedOutlineSnap = ({
 
 // src/components/SelectedOutlineElement.tsx
 import React66, { useContext as useContext33, useMemo as useMemo54, useRef as useRef30, useState as useState40 } from "react";
-import { Internals as Internals37 } from "remotion";
+import { Internals as Internals38 } from "remotion";
 import { NoReactInternals as NoReactInternals12 } from "remotion/no-react";
 
 // src/helpers/get-sequence-double-click-action.ts
@@ -21947,6 +22049,17 @@ 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/Timeline/disable-sequence-interactivity.ts
 import { NoReactInternals as NoReactInternals10 } from "remotion/no-react";
@@ -22261,7 +22374,7 @@ var getSequenceContextMenuItems = ({
 import { jsx as jsx89, jsxs as jsxs38, Fragment as Fragment17 } from "react/jsx-runtime";
 var emptyContextMenuValues = [];
 var SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, target }) => {
-  const { setDragOverrides, clearDragOverrides, setPropStatuses } = useContext33(Internals37.VisualModeSettersContext);
+  const { setDragOverrides, clearDragOverrides, setPropStatuses } = useContext33(Internals38.VisualModeSettersContext);
   const { editorSnapping } = useContext33(EditorSnappingContext);
   const transformOriginDrag = target?.transformOriginDrag ?? null;
   const parsed = useMemo54(() => transformOriginDrag === null ? null : parseTransformOrigin(transformOriginDrag.originValue), [transformOriginDrag]);
@@ -22349,16 +22462,16 @@ var SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, target
       });
       const translate = serializeTranslate(nextTranslateX, nextTranslateY);
       last = { uv: nextUv, origin, translate };
-      setDragOverrides(transformOriginDrag.nodePath, transformOriginFieldKey, transformOriginDrag.originPropStatus.status === "keyframed" ? Internals37.makeKeyframedDragOverride({
+      setDragOverrides(transformOriginDrag.nodePath, transformOriginFieldKey, transformOriginDrag.originPropStatus.status === "keyframed" ? Internals38.makeKeyframedDragOverride({
         status: transformOriginDrag.originPropStatus,
         frame: transformOriginDrag.sourceFrame,
         value: origin
-      }) : Internals37.makeStaticDragOverride(origin));
-      setDragOverrides(transformOriginDrag.nodePath, translateFieldKey, transformOriginDrag.translatePropStatus.status === "keyframed" ? Internals37.makeKeyframedDragOverride({
+      }) : Internals38.makeStaticDragOverride(origin));
+      setDragOverrides(transformOriginDrag.nodePath, translateFieldKey, transformOriginDrag.translatePropStatus.status === "keyframed" ? Internals38.makeKeyframedDragOverride({
         status: transformOriginDrag.translatePropStatus,
         frame: transformOriginDrag.sourceFrame,
         value: translate
-      }) : Internals37.makeStaticDragOverride(translate));
+      }) : Internals38.makeStaticDragOverride(translate));
     };
     updateFromPointerPosition();
     const onPointerMove = (moveEvent) => {
@@ -22525,10 +22638,10 @@ var SelectedOutlinePolygon = ({
   snapTargets,
   target
 }) => {
-  const { getDragOverrides } = useContext33(Internals37.VisualModeDragOverridesContext);
-  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext33(Internals37.VisualModeSettersContext);
+  const { getDragOverrides } = useContext33(Internals38.VisualModeDragOverridesContext);
+  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext33(Internals38.VisualModeSettersContext);
   const { editorSnapping } = useContext33(EditorSnappingContext);
-  const timelinePosition = Internals37.Timeline.useTimelinePosition();
+  const timelinePosition = Internals38.Timeline.useTimelinePosition();
   const timelinePositionRef = useRef30(timelinePosition);
   timelinePositionRef.current = timelinePosition;
   const polygonRef = useRef30(null);
@@ -22621,13 +22734,13 @@ var SelectedOutlinePolygon = ({
           throw new Error("Expected drag value to be available");
         }
         if (dragState.target.propStatus.status === "keyframed") {
-          setDragOverrides(dragState.target.nodePath, translateFieldKey, Internals37.makeKeyframedDragOverride({
+          setDragOverrides(dragState.target.nodePath, translateFieldKey, Internals38.makeKeyframedDragOverride({
             status: dragState.target.propStatus,
             frame: dragState.sourceFrame,
             value
           }));
         } else {
-          setDragOverrides(dragState.target.nodePath, translateFieldKey, Internals37.makeStaticDragOverride(value));
+          setDragOverrides(dragState.target.nodePath, translateFieldKey, Internals38.makeStaticDragOverride(value));
         }
       }
     };
@@ -22813,9 +22926,9 @@ var SelectedOutlineScaleEdgeLine = ({
   onSelect,
   target
 }) => {
-  const { getDragOverrides } = useContext33(Internals37.VisualModeDragOverridesContext);
-  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext33(Internals37.VisualModeSettersContext);
-  const timelinePosition = Internals37.Timeline.useTimelinePosition();
+  const { getDragOverrides } = useContext33(Internals38.VisualModeDragOverridesContext);
+  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext33(Internals38.VisualModeSettersContext);
+  const timelinePosition = Internals38.Timeline.useTimelinePosition();
   const timelinePositionRef = useRef30(timelinePosition);
   timelinePositionRef.current = timelinePosition;
   const scaleDrag = target?.scaleDrag ?? null;
@@ -22877,13 +22990,13 @@ var SelectedOutlineScaleEdgeLine = ({
           throw new Error("Expected scale drag value to be available");
         }
         if (dragState.target.propStatus.status === "keyframed") {
-          setDragOverrides(dragState.target.nodePath, scaleFieldKey, Internals37.makeKeyframedDragOverride({
+          setDragOverrides(dragState.target.nodePath, scaleFieldKey, Internals38.makeKeyframedDragOverride({
             status: dragState.target.propStatus,
             frame: dragState.sourceFrame,
             value
           }));
         } else {
-          setDragOverrides(dragState.target.nodePath, scaleFieldKey, Internals37.makeStaticDragOverride(value));
+          setDragOverrides(dragState.target.nodePath, scaleFieldKey, Internals38.makeStaticDragOverride(value));
         }
       }
     };
@@ -23005,10 +23118,10 @@ var SelectedOutlineRotationCornerHandle = ({
   onSelect,
   target
 }) => {
-  const { getDragOverrides } = useContext33(Internals37.VisualModeDragOverridesContext);
-  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext33(Internals37.VisualModeSettersContext);
+  const { getDragOverrides } = useContext33(Internals38.VisualModeDragOverridesContext);
+  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext33(Internals38.VisualModeSettersContext);
   const { editorSnapping } = useContext33(EditorSnappingContext);
-  const timelinePosition = Internals37.Timeline.useTimelinePosition();
+  const timelinePosition = Internals38.Timeline.useTimelinePosition();
   const timelinePositionRef = useRef30(timelinePosition);
   timelinePositionRef.current = timelinePosition;
   const rotationDrag = target?.rotationDrag ?? null;
@@ -23075,13 +23188,13 @@ var SelectedOutlineRotationCornerHandle = ({
           throw new Error("Expected rotation drag value to be available");
         }
         if (dragState.target.propStatus.status === "keyframed") {
-          setDragOverrides(dragState.target.nodePath, rotateFieldKey, Internals37.makeKeyframedDragOverride({
+          setDragOverrides(dragState.target.nodePath, rotateFieldKey, Internals38.makeKeyframedDragOverride({
             status: dragState.target.propStatus,
             frame: dragState.sourceFrame,
             value
           }));
         } else {
-          setDragOverrides(dragState.target.nodePath, rotateFieldKey, Internals37.makeStaticDragOverride(value));
+          setDragOverrides(dragState.target.nodePath, rotateFieldKey, Internals38.makeStaticDragOverride(value));
         }
       }
     };
@@ -23247,12 +23360,12 @@ var SelectedOutlineElement = ({
   target
 }) => {
   const { previewServerState } = useContext33(StudioServerConnectionCtx);
-  const { setPropStatuses } = useContext33(Internals37.VisualModeSettersContext);
-  const updateResolvedStackTrace = useContext33(Internals37.SequenceStackTracesUpdateContext);
+  const { setPropStatuses } = useContext33(Internals38.VisualModeSettersContext);
+  const updateResolvedStackTrace = useContext33(Internals38.SequenceStackTracesUpdateContext);
   const confirm = useConfirmationDialog();
   const selectAsset = useSelectAsset();
   const selectComposition = useSelectComposition();
-  const { compositions } = useContext33(Internals37.CompositionManager);
+  const { compositions } = useContext33(Internals38.CompositionManager);
   const { setSelectedModal } = useContext33(ModalsContext);
   const resolveOriginalLocation = React66.useCallback(async (resolveTarget) => {
     const stack2 = resolveTarget.sequence.getStack();
@@ -23481,7 +23594,7 @@ var SelectedOutlineElement = ({
 
 // src/components/SelectedOutlineUvControls.tsx
 import React67, { useContext as useContext34, useMemo as useMemo55 } from "react";
-import { Internals as Internals38 } from "remotion";
+import { Internals as Internals39 } from "remotion";
 import { jsx as jsx90, jsxs as jsxs39, Fragment as Fragment18 } from "react/jsx-runtime";
 var getSvgPointFromPointerEvent = ({
   event,
@@ -23642,7 +23755,7 @@ var getLocalEllipseWidthProgress = ({
   }) / (width / 2);
 };
 var SelectedUvEllipseStartHandle = ({ control, onDraggingChange, outline }) => {
-  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext34(Internals38.VisualModeSettersContext);
+  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext34(Internals39.VisualModeSettersContext);
   const { startControl } = control;
   const field = startControl?.field;
   const onPointerDown = React67.useCallback((event) => {
@@ -23677,11 +23790,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" ? Internals38.makeKeyframedDragOverride({
+      setEffectDragOverrides(control.handle.nodePath, control.handle.effectIndex, field.fieldKey, field.propStatus.status === "keyframed" ? Internals39.makeKeyframedDragOverride({
         status: field.propStatus,
         frame: control.handle.sourceFrame,
         value: nextValue
-      }) : Internals38.makeStaticDragOverride(nextValue));
+      }) : Internals39.makeStaticDragOverride(nextValue));
     };
     const onPointerMove = (moveEvent) => {
       moveEvent.preventDefault();
@@ -23751,7 +23864,7 @@ var SelectedUvEllipseStartHandle = ({ control, onDraggingChange, outline }) => {
   });
 };
 var SelectedUvEllipseResizeHandle = ({ axis, control, onDraggingChange, outline }) => {
-  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext34(Internals38.VisualModeSettersContext);
+  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext34(Internals39.VisualModeSettersContext);
   const resizeControl = control.resize.find((item) => item.axis === axis);
   const field = resizeControl?.field;
   const onPointerDown = React67.useCallback((event) => {
@@ -23787,11 +23900,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" ? Internals38.makeKeyframedDragOverride({
+      setEffectDragOverrides(control.handle.nodePath, control.handle.effectIndex, field.fieldKey, field.propStatus.status === "keyframed" ? Internals39.makeKeyframedDragOverride({
         status: field.propStatus,
         frame: control.handle.sourceFrame,
         value: nextValue
-      }) : Internals38.makeStaticDragOverride(nextValue));
+      }) : Internals39.makeStaticDragOverride(nextValue));
     };
     const onPointerMove = (moveEvent) => {
       moveEvent.preventDefault();
@@ -23891,7 +24004,7 @@ var trimLineToCircleEdges = ({
   };
 };
 var SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
-  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext34(Internals38.VisualModeSettersContext);
+  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext34(Internals39.VisualModeSettersContext);
   const { editorSnapping } = useContext34(EditorSnappingContext);
   const { rotationControl } = control;
   const field = rotationControl?.field;
@@ -23930,11 +24043,11 @@ var SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
       });
       lastValue = nextValue;
       forceSpecificCursor(getRotationCursor(startCursorDegrees + cursorDelta));
-      setEffectDragOverrides(control.handle.nodePath, control.handle.effectIndex, field.fieldKey, field.propStatus.status === "keyframed" ? Internals38.makeKeyframedDragOverride({
+      setEffectDragOverrides(control.handle.nodePath, control.handle.effectIndex, field.fieldKey, field.propStatus.status === "keyframed" ? Internals39.makeKeyframedDragOverride({
         status: field.propStatus,
         frame: control.handle.sourceFrame,
         value: nextValue
-      }) : Internals38.makeStaticDragOverride(nextValue));
+      }) : Internals39.makeStaticDragOverride(nextValue));
     };
     const onPointerMove = (moveEvent) => {
       moveEvent.preventDefault();
@@ -24051,7 +24164,7 @@ var SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
   });
 };
 var SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSelect, outline }) => {
-  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext34(Internals38.VisualModeSettersContext);
+  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext34(Internals39.VisualModeSettersContext);
   const { editorSnapping } = useContext34(EditorSnappingContext);
   const position = useMemo55(() => getUvHandlePosition(outline.points, handle.value), [handle.value, outline.points]);
   const onPointerDown = React67.useCallback((event) => {
@@ -24092,11 +24205,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" ? Internals38.makeKeyframedDragOverride({
+      setEffectDragOverrides(handle.nodePath, handle.effectIndex, handle.fieldKey, handle.propStatus.status === "keyframed" ? Internals39.makeKeyframedDragOverride({
         status: handle.propStatus,
         frame: handle.sourceFrame,
         value: nextValue
-      }) : Internals38.makeStaticDragOverride(nextValue));
+      }) : Internals39.makeStaticDragOverride(nextValue));
     };
     const updateDragFromPointerEvent = (pointerEvent) => {
       if (!dragging) {
@@ -24539,19 +24652,19 @@ var SelectedOutlineOverlay = ({
   translationY
 }) => {
   const { selectedItems, selectItem } = useTimelineSelection();
-  const { sequences } = useContext35(Internals39.SequenceManager);
-  const { canvasContent, compositions } = useContext35(Internals39.CompositionManager);
-  const { propStatuses } = useContext35(Internals39.VisualModePropStatusesContext);
+  const { sequences } = useContext35(Internals40.SequenceManager);
+  const { canvasContent, compositions } = useContext35(Internals40.CompositionManager);
+  const { propStatuses } = useContext35(Internals40.VisualModePropStatusesContext);
   const { previewServerState } = useContext35(StudioServerConnectionCtx);
-  const { overrideIdToNodePathMappings } = useContext35(Internals39.OverrideIdsToNodePathsGettersContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext35(Internals39.VisualModeDragOverridesContext);
-  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext35(Internals39.VisualModeSettersContext);
+  const { overrideIdToNodePathMappings } = useContext35(Internals40.OverrideIdsToNodePathsGettersContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext35(Internals40.VisualModeDragOverridesContext);
+  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext35(Internals40.VisualModeSettersContext);
   const { getScaleLockState } = useContext35(ScaleLockContext);
   const { editorShowOutlines } = useContext35(EditorShowOutlinesContext);
   const { editorShowGuides, guidesList } = useContext35(EditorShowGuidesContext);
   const { frameBack, frameForward, getCurrentFrame: getCurrentFrame2, seek } = PlayerInternals10.usePlayer();
   const keybindings = useKeybinding();
-  const timelinePosition = Internals39.Timeline.useTimelinePosition();
+  const timelinePosition = Internals40.Timeline.useTimelinePosition();
   const [outlines, setOutlines] = useState41([]);
   const [hoveredOutlineKey, setHoveredOutlineKey] = useState41(null);
   const [draggingOutline, setDraggingOutline] = useState41(false);
@@ -24596,7 +24709,7 @@ var SelectedOutlineOverlay = ({
       const containsSelection = sequenceKeysContainingSelection.has(key3);
       const nodePath = nodePathInfo.sequenceSubscriptionKey;
       const { controls } = sequence;
-      const nodePropStatuses = Internals39.getPropStatusesCtx(propStatuses, nodePath);
+      const nodePropStatuses = Internals40.getPropStatusesCtx(propStatuses, nodePath);
       const sourceFrame = timelinePosition - keyframeDisplayOffset;
       const dragOverrides = getDragOverrides(nodePath) ?? {};
       const activeSchema = controls ? getSelectedOutlineActiveSchema({
@@ -24614,7 +24727,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(Internals39.getEffectiveVisualModeValue({
+      const transformOriginValueForRotation = transformOriginFieldSchema?.type === "transform-origin" && (transformOriginPropStatus?.status === "static" || transformOriginPropStatus?.status === "keyframed") ? String(Internals40.getEffectiveVisualModeValue({
         propStatus: transformOriginPropStatus,
         dragOverrideValue: dragOverrides[transformOriginFieldKey],
         defaultValue: transformOriginFieldSchema.default,
@@ -24665,7 +24778,7 @@ var SelectedOutlineOverlay = ({
             fieldKey: scaleFieldKey,
             defaultValue: (() => {
               const dragOverrideValue = dragOverrides[scaleFieldKey];
-              const effectiveValue = Internals39.getEffectiveVisualModeValue({
+              const effectiveValue = Internals40.getEffectiveVisualModeValue({
                 propStatus: scalePropStatus,
                 dragOverrideValue,
                 defaultValue: scaleFieldSchema.default,
@@ -24694,21 +24807,21 @@ var SelectedOutlineOverlay = ({
           nodePath,
           originDefault: transformOriginFieldSchema.default,
           originPropStatus: transformOriginPropStatus,
-          originValue: String(Internals39.getEffectiveVisualModeValue({
+          originValue: String(Internals40.getEffectiveVisualModeValue({
             propStatus: transformOriginPropStatus,
             dragOverrideValue: dragOverrides[transformOriginFieldKey],
             defaultValue: transformOriginFieldSchema.default,
             frame: transformOriginSourceFrame,
             shouldResortToDefaultValueIfUndefined: true
           }) ?? transformOriginFieldSchema.default),
-          rotateValue: String(rotationPropStatus?.status === "static" || rotationPropStatus?.status === "keyframed" ? Internals39.getEffectiveVisualModeValue({
+          rotateValue: String(rotationPropStatus?.status === "static" || rotationPropStatus?.status === "keyframed" ? Internals40.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(Internals39.getEffectiveVisualModeValue({
+          scaleValue: scalePropStatus?.status === "static" || scalePropStatus?.status === "keyframed" ? String(Internals40.getEffectiveVisualModeValue({
             propStatus: scalePropStatus,
             dragOverrideValue: dragOverrides[scaleFieldKey],
             defaultValue: scaleFieldSchema?.type === "scale" ? scaleFieldSchema.default : 1,
@@ -24719,7 +24832,7 @@ var SelectedOutlineOverlay = ({
           sourceFrame: transformOriginSourceFrame,
           translateDefault: fieldSchema.default,
           translatePropStatus: propStatus,
-          translateValue: String(Internals39.getEffectiveVisualModeValue({
+          translateValue: String(Internals40.getEffectiveVisualModeValue({
             propStatus,
             dragOverrideValue: dragOverrides[translateFieldKey],
             defaultValue: fieldSchema.default,
@@ -24955,13 +25068,13 @@ var SelectedOutlineOverlay = ({
         throw new Error("Expected drag value to be available");
       }
       if (dragState.target.propStatus.status === "keyframed") {
-        setDragOverrides(dragState.target.nodePath, translateFieldKey, Internals39.makeKeyframedDragOverride({
+        setDragOverrides(dragState.target.nodePath, translateFieldKey, Internals40.makeKeyframedDragOverride({
           status: dragState.target.propStatus,
           frame: dragState.sourceFrame,
           value
         }));
       } else {
-        setDragOverrides(dragState.target.nodePath, translateFieldKey, Internals39.makeStaticDragOverride(value));
+        setDragOverrides(dragState.target.nodePath, translateFieldKey, Internals40.makeStaticDragOverride(value));
       }
     }
   }, [
@@ -25228,7 +25341,7 @@ var VideoPreview = ({
   });
 };
 var CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, assetMetadata }) => {
-  const { size: previewSize } = useContext37(Internals40.PreviewSizeContext);
+  const { size: previewSize } = useContext37(Internals41.PreviewSizeContext);
   const { centerX, centerY, yCorrection, xCorrection, scale } = useMemo57(() => {
     if (contentDimensions === "none") {
       return {
@@ -25339,9 +25452,9 @@ var PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) =
   ]);
   useEffect41(() => {
     const { current } = portalContainer;
-    current?.appendChild(Internals40.portalNode());
+    current?.appendChild(Internals41.portalNode());
     return () => {
-      current?.removeChild(Internals40.portalNode());
+      current?.removeChild(Internals41.portalNode());
     };
   }, []);
   const onPointerDown = useCallback49((event) => {
@@ -25512,7 +25625,7 @@ var getDropPosition = ({
   if (contentDimensions === null || contentDimensions === "none") {
     return null;
   }
-  const scale = Internals41.calculateScale({
+  const scale = Internals42.calculateScale({
     canvasSize: size2,
     compositionHeight: contentDimensions.height,
     compositionWidth: contentDimensions.width,
@@ -25542,7 +25655,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 } = useContext38(Internals41.PreviewSizeContext);
+  const { setSize, size: previewSize } = useContext38(Internals42.PreviewSizeContext);
   const { editorZoomGestures } = useContext38(EditorZoomGesturesContext);
   const previewSnapshotRef = useRef33({
     previewSize,
@@ -25554,10 +25667,10 @@ var Canvas = ({ canvasContent, size: size2 }) => {
   const touchPinchRef = useRef33(null);
   const keybindings = useKeybinding();
   const confirm = useConfirmationDialog();
-  const config = Internals41.useUnsafeVideoConfig();
+  const config = Internals42.useUnsafeVideoConfig();
   const areRulersVisible = useIsRulerVisible();
   const { editorShowGuides } = useContext38(EditorShowGuidesContext);
-  const { compositions } = useContext38(Internals41.CompositionManager);
+  const { compositions } = useContext38(Internals42.CompositionManager);
   const { previewServerState, subscribeToEvent } = useContext38(StudioServerConnectionCtx);
   const previewServerClientId = previewServerState.type === "connected" ? previewServerState.clientId : null;
   const [isAddingAsset, setIsAddingAsset] = useState42(false);
@@ -25617,7 +25730,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
     }
     ev.preventDefault();
     setSize((prevSize) => {
-      const scale = Internals41.calculateScale({
+      const scale = Internals42.calculateScale({
         canvasSize: size2,
         compositionHeight: contentDimensions.height,
         compositionWidth: contentDimensions.width,
@@ -25690,7 +25803,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
       }
       e.preventDefault();
       suppressWheelFromWebKitPinchRef.current = true;
-      const fitted = Internals41.calculateScale({
+      const fitted = Internals42.calculateScale({
         canvasSize: canvasSz,
         compositionHeight: cdim.height,
         compositionWidth: cdim.width,
@@ -25710,7 +25823,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
       const dimensions = cdim;
       e.preventDefault();
       setSize((prevSize) => {
-        const scale = Internals41.calculateScale({
+        const scale = Internals42.calculateScale({
           canvasSize: canvasSz,
           compositionHeight: dimensions.height,
           compositionWidth: dimensions.width,
@@ -25765,7 +25878,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
       if (initialDistance < 0.000001) {
         return;
       }
-      const fitted = Internals41.calculateScale({
+      const fitted = Internals42.calculateScale({
         canvasSize: snap.canvasSize,
         compositionHeight: snap.contentDimensions.height,
         compositionWidth: snap.contentDimensions.width,
@@ -25789,7 +25902,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
       setSize((prevSize) => {
         const canvasSz = snap.canvasSize;
         const cdim = snap.contentDimensions;
-        const scale = Internals41.calculateScale({
+        const scale = Internals42.calculateScale({
           canvasSize: canvasSz,
           compositionHeight: cdim.height,
           compositionWidth: cdim.width,
@@ -25842,7 +25955,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
       return;
     }
     setSize((prevSize) => {
-      const scale = Internals41.calculateScale({
+      const scale = Internals42.calculateScale({
         canvasSize: size2,
         compositionHeight: contentDimensions.height,
         compositionWidth: contentDimensions.width,
@@ -25865,7 +25978,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
       return;
     }
     setSize((prevSize) => {
-      const scale = Internals41.calculateScale({
+      const scale = Internals42.calculateScale({
         canvasSize: size2,
         compositionHeight: contentDimensions.height,
         compositionWidth: contentDimensions.width,
@@ -26129,6 +26242,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
           files,
           compositionFile,
           compositionId: currentCompositionId,
+          destinationDimensions: contentDimensions === "none" ? null : contentDimensions,
           dropPosition
         });
       } else if (isAssetDragEvent(event)) {
@@ -26140,6 +26254,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
           assetPaths: [assetPath],
           compositionFile,
           compositionId: currentCompositionId,
+          destinationDimensions: contentDimensions === "none" ? null : contentDimensions,
           dropPosition
         });
       } else if (isSfxDragEvent(event)) {
@@ -26193,6 +26308,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
           url,
           compositionFile,
           compositionId: currentCompositionId,
+          destinationDimensions: contentDimensions === "none" ? null : contentDimensions,
           dropPosition
         });
       }
@@ -26257,17 +26373,17 @@ var Canvas = ({ canvasContent, size: size2 }) => {
 
 // src/components/FramePersistor.tsx
 import { useEffect as useEffect43 } from "react";
-import { Internals as Internals42, useVideoConfig as useVideoConfig2 } from "remotion";
+import { Internals as Internals43, useVideoConfig as useVideoConfig2 } from "remotion";
 var FramePersistor = () => {
-  const [playing] = Internals42.Timeline.usePlayingState();
+  const [playing] = Internals43.Timeline.usePlayingState();
   const config = useVideoConfig2();
-  const frame2 = Internals42.Timeline.useTimelinePosition();
-  const setFrame = Internals42.useTimelineSetFrame();
+  const frame2 = Internals43.Timeline.useTimelinePosition();
+  const setFrame = Internals43.useTimelineSetFrame();
   useEffect43(() => {
     if (!playing) {
       setFrame((f) => {
         const newObj = f[config.id] === frame2 ? f : { ...f, [config.id]: frame2 };
-        Internals42.persistCurrentFrame(newObj);
+        Internals43.persistCurrentFrame(newObj);
         return newObj;
       });
     }
@@ -26359,9 +26475,9 @@ var container19 = {
   flexDirection: "column"
 };
 var CanvasOrLoading = ({ size: size2 }) => {
-  const resolved = Internals43.useResolvedVideoConfig(null);
+  const resolved = Internals44.useResolvedVideoConfig(null);
   const { setZoom } = useContext39(TimelineZoomCtx);
-  const { canvasContent } = useContext39(Internals43.CompositionManager);
+  const { canvasContent } = useContext39(Internals44.CompositionManager);
   const { error: renderError } = useContext39(RenderErrorContext);
   useEffect44(() => {
     if (resolved?.type !== "success" && resolved?.type !== "success-and-refreshing") {
@@ -26450,7 +26566,7 @@ var ErrorLoading = ({ error, calculateMetadataContext }) => {
       canHaveDismissButton: false,
       keyboardShortcuts: true,
       error,
-      onRetry: () => Internals43.resolveCompositionsRef.current?.reloadCurrentlySelectedComposition(),
+      onRetry: () => Internals44.resolveCompositionsRef.current?.reloadCurrentlySelectedComposition(),
       calculateMetadata: calculateMetadataContext
     }, error.stack)
   });
@@ -26460,7 +26576,7 @@ var ErrorLoading = ({ error, calculateMetadataContext }) => {
 import { jsx as jsx99 } from "react/jsx-runtime";
 var CanvasIfSizeIsAvailable = () => {
   const rulersAreVisible = useIsRulerVisible();
-  const context = useContext40(Internals44.CurrentScaleContext);
+  const context = useContext40(Internals45.CurrentScaleContext);
   const sizeWithRulersApplied = useMemo59(() => {
     const size2 = context && context.type === "canvas-size" ? context.canvasSize : null;
     if (!rulersAreVisible) {
@@ -26481,7 +26597,7 @@ var CanvasIfSizeIsAvailable = () => {
 
 // src/components/CurrentCompositionSideEffects.tsx
 import { useContext as useContext41, useEffect as useEffect45 } from "react";
-import { Internals as Internals45 } from "remotion";
+import { Internals as Internals46 } from "remotion";
 
 // src/helpers/document-title.ts
 import { NoReactInternals as NoReactInternals14 } from "remotion/no-react";
@@ -26536,7 +26652,7 @@ var getProgressInBrackets = (selectedCompositionId, jobs) => {
 // src/components/CurrentCompositionSideEffects.tsx
 var TitleUpdater = () => {
   const renderQueue = useContext41(RenderQueueContext);
-  const { canvasContent } = useContext41(Internals45.CompositionManager);
+  const { canvasContent } = useContext41(Internals46.CompositionManager);
   const { jobs } = renderQueue;
   useEffect45(() => {
     if (!canvasContent) {
@@ -26629,7 +26745,7 @@ import {
   useRef as useRef35,
   useState as useState43
 } from "react";
-import { Internals as Internals46 } from "remotion";
+import { Internals as Internals47 } from "remotion";
 import { NoReactInternals as NoReactInternals16 } from "remotion/no-react";
 
 // src/api/delete-static-file.ts
@@ -26869,8 +26985,8 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }
   const onPointerEnter = useCallback53(() => {
     setHovered(true);
   }, []);
-  const { setCanvasContent } = useContext42(Internals46.CompositionSetters);
-  const { canvasContent } = useContext42(Internals46.CompositionManager);
+  const { setCanvasContent } = useContext42(Internals47.CompositionSetters);
+  const { canvasContent } = useContext42(Internals47.CompositionManager);
   const relativePath = useMemo61(() => {
     return parentFolder ? parentFolder + "/" + item.name : item.name;
   }, [parentFolder, item.name]);
@@ -27309,10 +27425,10 @@ var AssetSelector = ({ readOnlyStudio }) => {
 
 // src/components/CompSelectorRef.tsx
 import { useCallback as useCallback55, useContext as useContext44, useImperativeHandle as useImperativeHandle9, useMemo as useMemo63 } from "react";
-import { Internals as Internals47 } from "remotion";
+import { Internals as Internals48 } from "remotion";
 import { jsx as jsx104 } from "react/jsx-runtime";
 var CompSelectorRef = ({ children }) => {
-  const { compositions } = useContext44(Internals47.CompositionManager);
+  const { compositions } = useContext44(Internals48.CompositionManager);
   const { compositionFoldersExpanded, setCompositionFoldersExpanded } = useContext44(FolderContext);
   const selectComposition = useSelectComposition();
   const toggleFolder = useCallback55((folderName, parentName) => {
@@ -27323,7 +27439,7 @@ var CompSelectorRef = ({ children }) => {
       return foldersExpandedState;
     });
   }, [setCompositionFoldersExpanded]);
-  useImperativeHandle9(Internals47.compositionSelectorRef, () => {
+  useImperativeHandle9(Internals48.compositionSelectorRef, () => {
     return {
       expandComposition: (compName) => {
         const compositionToExpand = compositions.find((c) => c.id === compName);
@@ -27580,13 +27696,13 @@ import React76, {
   useMemo as useMemo65,
   useState as useState47
 } from "react";
-import { Internals as Internals48 } from "remotion";
+import { Internals as Internals49 } 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 } = useContext45(StudioServerConnectionCtx);
-  const { updateProps } = useContext45(Internals48.EditorPropsContext);
+  const { updateProps } = useContext45(Internals49.EditorPropsContext);
   const [canSaveDefaultPropsObjectState, setCanSaveDefaultProps] = useState47({});
   const canSaveDefaultProps = useMemo65(() => {
     if (compositionId === null) {
@@ -27666,7 +27782,7 @@ import {
   useMemo as useMemo155,
   useState as useState85
 } from "react";
-import { Internals as Internals75 } from "remotion";
+import { Internals as Internals76 } from "remotion";
 
 // src/components/get-zod-if-possible.tsx
 import {
@@ -28193,7 +28309,7 @@ var InspectorDefaultPropsWarnings = ({ warnings }) => {
 
 // src/components/InspectorPanel/DefaultInspector.tsx
 import { useContext as useContext56, useEffect as useEffect61, useMemo as useMemo110, useState as useState70 } from "react";
-import { Internals as Internals54 } from "remotion";
+import { Internals as Internals55 } from "remotion";
 
 // src/visual-controls/VisualControls.tsx
 import {
@@ -28383,7 +28499,7 @@ var VisualControlsProvider = ({ children }) => {
 // src/components/CurrentAsset.tsx
 import { formatBytes as formatBytes2 } from "@remotion/studio-shared";
 import { useCallback as useCallback62, useContext as useContext48, useMemo as useMemo70 } from "react";
-import { Internals as Internals50, staticFile as staticFile4 } from "remotion";
+import { Internals as Internals51, staticFile as staticFile4 } from "remotion";
 
 // src/helpers/format-media-duration.ts
 var formatMediaDuration = (seconds) => {
@@ -28795,7 +28911,7 @@ var InspectorInfoSubtitle = ({ children }) => {
 
 // src/components/NewComposition/use-rename-static-file.ts
 import { useCallback as useCallback61, useContext as useContext47 } from "react";
-import { Internals as Internals49 } from "remotion";
+import { Internals as Internals50 } from "remotion";
 
 // src/api/rename-static-file.ts
 import { getRemotionEnvironment as getRemotionEnvironment5 } from "remotion";
@@ -28863,8 +28979,8 @@ var useRenameStaticFile = ({
   relativePath,
   staticFiles
 }) => {
-  const { canvasContent } = useContext47(Internals49.CompositionManager);
-  const { setCanvasContent } = useContext47(Internals49.CompositionSetters);
+  const { canvasContent } = useContext47(Internals50.CompositionManager);
+  const { setCanvasContent } = useContext47(Internals50.CompositionSetters);
   return useCallback61(async (newName) => {
     const newRelativePath = getRenamedStaticFilePath({
       newName,
@@ -29006,7 +29122,7 @@ var AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStudio
   });
 };
 var CurrentAsset = ({ readOnlyStudio }) => {
-  const { canvasContent } = useContext48(Internals50.CompositionManager);
+  const { canvasContent } = useContext48(Internals51.CompositionManager);
   const assetName = canvasContent?.type === "asset" ? canvasContent.asset : null;
   return /* @__PURE__ */ jsx115(AssetInfo, {
     assetName,
@@ -29021,7 +29137,7 @@ import {
   useEffect as useEffect52,
   useMemo as useMemo75
 } from "react";
-import { Internals as Internals52 } from "remotion";
+import { Internals as Internals53 } from "remotion";
 
 // src/icons/react.tsx
 import { jsx as jsx116 } from "react/jsx-runtime";
@@ -29058,10 +29174,10 @@ var resolvedStackToSymbolicated = (location2) => {
 import { useCallback as useCallback63, useMemo as useMemo71 } from "react";
 
 // src/helpers/validate-new-comp-data.ts
-import { Internals as Internals51 } from "remotion";
+import { Internals as Internals52 } from "remotion";
 var validateCompositionName = (compName, compositions) => {
-  if (!Internals51.isCompositionIdValid(compName)) {
-    return Internals51.invalidCompositionErrorMessage;
+  if (!Internals52.isCompositionIdValid(compName)) {
+    return Internals52.invalidCompositionErrorMessage;
   }
   if (compositions.find((c) => c.id === compName)) {
     return `A composition with that name already exists.`;
@@ -29402,8 +29518,8 @@ var renderReactIcon = (color) => {
   });
 };
 var CurrentComposition = () => {
-  const video = Internals52.useVideo();
-  const { compositions } = useContext49(Internals52.CompositionManager);
+  const video = Internals53.useVideo();
+  const { compositions } = useContext49(Internals53.CompositionManager);
   const currentComposition = useMemo75(() => {
     if (!video) {
       return null;
@@ -34773,7 +34889,7 @@ var VisualControlsContent = () => {
 
 // src/components/InspectorPanel/CompositionDimensions.tsx
 import { useCallback as useCallback99, useEffect as useEffect60, useMemo as useMemo109, useRef as useRef45, useState as useState69 } from "react";
-import { Internals as Internals53 } from "remotion";
+import { Internals as Internals54 } from "remotion";
 
 // src/components/InspectorPanel/optimistic-composition-metadata.ts
 var removePendingValue = ({
@@ -34954,8 +35070,8 @@ var CompositionMetadataValue = ({
   });
 };
 var CompositionDimensions = ({ compositionId, disabled, stack: stack2 }) => {
-  const video = Internals53.useVideo();
-  const resolvedVideoConfig = Internals53.useResolvedVideoConfig(compositionId);
+  const video = Internals54.useVideo();
+  const resolvedVideoConfig = Internals54.useResolvedVideoConfig(compositionId);
   const resolvedConfig = resolvedVideoConfig?.type === "success" || resolvedVideoConfig?.type === "success-and-refreshing" ? resolvedVideoConfig.result : null;
   const resolvedConfigRef = useRef45(resolvedConfig);
   resolvedConfigRef.current = resolvedConfig;
@@ -35079,7 +35195,7 @@ var CompositionDimensions = ({ compositionId, disabled, stack: stack2 }) => {
 // src/components/InspectorPanel/DefaultInspector.tsx
 import { jsx as jsx174, jsxs as jsxs93, Fragment as Fragment29 } from "react/jsx-runtime";
 var DefaultInspector = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
-  const { canvasContent } = useContext56(Internals54.CompositionManager);
+  const { canvasContent } = useContext56(Internals55.CompositionManager);
   const hasSelectedAsset = canvasContent?.type === "asset";
   const z = useZodIfPossible();
   const canSaveDefaultProps = useContext56(ObserveDefaultPropsContext);
@@ -35265,7 +35381,7 @@ var getSameSequenceInspectorSelection = (selections) => {
 
 // src/components/InspectorPanel/EasingInspector.tsx
 import { useCallback as useCallback109, useContext as useContext68, useMemo as useMemo121 } from "react";
-import { Internals as Internals63, useVideoConfig as useVideoConfig6 } from "remotion";
+import { Internals as Internals64, useVideoConfig as useVideoConfig6 } from "remotion";
 
 // src/state/render-frame.ts
 var renderFrame = (frame2, fps) => {
@@ -35298,7 +35414,7 @@ import {
   useRef as useRef46,
   useState as useState71
 } from "react";
-import { Easing, Internals as Internals55 } from "remotion";
+import { Easing, Internals as Internals56 } from "remotion";
 import { jsx as jsx175, jsxs as jsxs94, Fragment as Fragment30 } from "react/jsx-runtime";
 var SVG_WIDTH = 560;
 var SVG_HEIGHT = 320;
@@ -35533,14 +35649,14 @@ var areEasingsEqual = (first, second) => {
   }
 };
 var getEasingUpdateTargetKey = (update) => {
-  const nodePathKey = Internals55.makeSequencePropsSubscriptionKey(update.nodePath);
+  const nodePathKey = Internals56.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 = Internals55.transformSchema;
+  const transformSchema = Internals56.transformSchema;
   const directField = transformSchema[fieldKey];
   if (directField) {
     return directField;
@@ -35722,16 +35838,16 @@ var EasingPresetButton = ({ currentEasing, disabled, onClick, preset }) => {
 };
 var EasingEditor = ({ state, renderHeader }) => {
   const { previewServerState } = useContext57(StudioServerConnectionCtx);
-  const sequencesRef = useContext57(Internals55.SequenceManagerRefContext);
-  const propStatusesRef = useContext57(Internals55.VisualModePropStatusesRefContext);
+  const sequencesRef = useContext57(Internals56.SequenceManagerRefContext);
+  const propStatusesRef = useContext57(Internals56.VisualModePropStatusesRefContext);
   const {
     setDragOverrides,
     clearDragOverrides,
     setEffectDragOverrides,
     clearEffectDragOverrides,
     setPropStatuses
-  } = useContext57(Internals55.VisualModeSettersContext);
-  const { overrideIdToNodePathMappings } = useContext57(Internals55.OverrideIdsToNodePathsGettersContext);
+  } = useContext57(Internals56.VisualModeSettersContext);
+  const { overrideIdToNodePathMappings } = useContext57(Internals56.OverrideIdsToNodePathsGettersContext);
   const svgRef = useRef46(null);
   const [mode, setMode] = useState71(() => easingToMode(state.initialEasing));
   const [bezier, setBezier] = useState71(() => easingToBezier(state.initialEasing));
@@ -35767,7 +35883,7 @@ var EasingEditor = ({ state, renderHeader }) => {
     const sequenceTargets = new Set;
     const effectTargets = new Set;
     for (const update of updates) {
-      const key3 = Internals55.makeSequencePropsSubscriptionKey(update.nodePath);
+      const key3 = Internals56.makeSequencePropsSubscriptionKey(update.nodePath);
       if (update.type === "sequence") {
         if (!sequenceTargets.has(key3)) {
           sequenceTargets.add(key3);
@@ -36486,7 +36602,7 @@ var getEasingSelectionFromCurrentKeyframes = ({
 
 // src/components/InspectorPanel/KeyframeEasingNavigator.tsx
 import { useCallback as useCallback104, useMemo as useMemo114 } from "react";
-import { Internals as Internals58, useVideoConfig as useVideoConfig5 } from "remotion";
+import { Internals as Internals59, useVideoConfig as useVideoConfig5 } from "remotion";
 
 // src/components/Timeline/TimelineKeyframeDiamondIcon.tsx
 import { jsx as jsx176, jsxs as jsxs95 } from "react/jsx-runtime";
@@ -36527,7 +36643,7 @@ import {
   LINEAR_KEYFRAME_EASING as LINEAR_KEYFRAME_EASING5
 } from "@remotion/studio-shared";
 import React121, { useCallback as useCallback103, useContext as useContext60, useMemo as useMemo113, useRef as useRef47 } from "react";
-import { Internals as Internals57, useVideoConfig as useVideoConfig4 } from "remotion";
+import { Internals as Internals58, useVideoConfig as useVideoConfig4 } from "remotion";
 
 // src/components/Timeline/use-timeline-keyframe-drag.ts
 import {
@@ -36535,7 +36651,7 @@ import {
   moveKeyframesInPropStatus
 } from "@remotion/studio-shared";
 import { useCallback as useCallback102, useContext as useContext59 } from "react";
-import { Internals as Internals56, useVideoConfig as useVideoConfig3 } from "remotion";
+import { Internals as Internals57, useVideoConfig as useVideoConfig3 } from "remotion";
 
 // src/components/Timeline/get-bounded-keyframe-drag-delta.ts
 var getBoundedKeyframeDragDelta = ({
@@ -36691,7 +36807,7 @@ var getTimelineSelectionsAfterEasingKeyframeDrag = ({
 var getCodeValueForTarget = ({
   propStatuses,
   nodePath
-}) => propStatuses[Internals56.makeSequencePropsSubscriptionKey(nodePath)];
+}) => propStatuses[Internals57.makeSequencePropsSubscriptionKey(nodePath)];
 var getTimelineKeyframeDragTarget = ({
   propStatuses,
   displayFrame,
@@ -36890,16 +37006,16 @@ var useTimelineKeyframeDrag = ({
   const videoConfig = useVideoConfig3();
   const timelineWidth = useContext59(TimelineWidthContext);
   const { previewServerState } = useContext59(StudioServerConnectionCtx);
-  const sequencesRef = useContext59(Internals56.SequenceManagerRefContext);
-  const { overrideIdToNodePathMappings } = useContext59(Internals56.OverrideIdsToNodePathsGettersContext);
-  const propStatusesRef = useContext59(Internals56.VisualModePropStatusesRefContext);
+  const sequencesRef = useContext59(Internals57.SequenceManagerRefContext);
+  const { overrideIdToNodePathMappings } = useContext59(Internals57.OverrideIdsToNodePathsGettersContext);
+  const propStatusesRef = useContext59(Internals57.VisualModePropStatusesRefContext);
   const {
     clearDragOverrides,
     clearEffectDragOverrides,
     setPropStatuses,
     setDragOverrides,
     setEffectDragOverrides
-  } = useContext59(Internals56.VisualModeSettersContext);
+  } = useContext59(Internals57.VisualModeSettersContext);
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
   const { clearDraggedKeyframes, setDraggedKeyframes } = useTimelineKeyframeDragState();
   return useCallback102((e) => {
@@ -37092,16 +37208,16 @@ var useTimelineEasingKeyframeDrag = ({
   const videoConfig = useVideoConfig3();
   const timelineWidth = useContext59(TimelineWidthContext);
   const { previewServerState } = useContext59(StudioServerConnectionCtx);
-  const sequencesRef = useContext59(Internals56.SequenceManagerRefContext);
-  const { overrideIdToNodePathMappings } = useContext59(Internals56.OverrideIdsToNodePathsGettersContext);
-  const propStatusesRef = useContext59(Internals56.VisualModePropStatusesRefContext);
+  const sequencesRef = useContext59(Internals57.SequenceManagerRefContext);
+  const { overrideIdToNodePathMappings } = useContext59(Internals57.OverrideIdsToNodePathsGettersContext);
+  const propStatusesRef = useContext59(Internals57.VisualModePropStatusesRefContext);
   const {
     clearDragOverrides,
     clearEffectDragOverrides,
     setPropStatuses,
     setDragOverrides,
     setEffectDragOverrides
-  } = useContext59(Internals56.VisualModeSettersContext);
+  } = useContext59(Internals57.VisualModeSettersContext);
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
   const { clearDraggedKeyframes } = useTimelineKeyframeDragState();
   return useCallback102((e) => {
@@ -37332,10 +37448,10 @@ var TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, nod
   });
   useTimelineMarqueeSelectableItem(selectionItem, buttonRef);
   const { previewServerState } = useContext60(StudioServerConnectionCtx);
-  const sequencesRef = useContext60(Internals57.SequenceManagerRefContext);
-  const propStatusesRef = useContext60(Internals57.VisualModePropStatusesRefContext);
-  const { setPropStatuses } = useContext60(Internals57.VisualModeSettersContext);
-  const { overrideIdToNodePathMappings } = useContext60(Internals57.OverrideIdsToNodePathsGettersContext);
+  const sequencesRef = useContext60(Internals58.SequenceManagerRefContext);
+  const propStatusesRef = useContext60(Internals58.VisualModePropStatusesRefContext);
+  const { setPropStatuses } = useContext60(Internals58.VisualModeSettersContext);
+  const { overrideIdToNodePathMappings } = useContext60(Internals58.OverrideIdsToNodePathsGettersContext);
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
   const getTargetSelections = useCallback103(() => {
     const selectedEasings = getEasingSelections(currentSelection.current.selectedItems);
@@ -37624,7 +37740,7 @@ var TimelineNavigatorItem = ({ extendLineLeft, extendLineRight, item: item2, onS
 };
 var KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes, nodePathInfo }) => {
   const { isSelected, selectItems } = useTimelineSelection();
-  const setFrame = Internals58.useTimelineSetFrame();
+  const setFrame = Internals59.useTimelineSetFrame();
   const videoConfig = useVideoConfig5();
   const items = useMemo114(() => getKeyframeEasingNavigatorItems({
     includeEasings,
@@ -37643,7 +37759,7 @@ var KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes, no
     const frame2 = getNavigatorItemPlayheadFrame(item2);
     setFrame((current) => {
       const next = { ...current, [videoConfig.id]: frame2 };
-      Internals58.persistCurrentFrame(next);
+      Internals59.persistCurrentFrame(next);
       return next;
     });
   }, [setFrame, videoConfig.id]);
@@ -37723,7 +37839,7 @@ import {
   useMemo as useMemo115,
   useState as useState73
 } from "react";
-import { Internals as Internals59 } from "remotion";
+import { Internals as Internals60 } from "remotion";
 import { jsx as jsx180, jsxs as jsxs98, Fragment as Fragment32 } from "react/jsx-runtime";
 var comboStyle2 = {
   minWidth: 120
@@ -37775,7 +37891,7 @@ var getOutputValues = (onSelect, disabled) => {
   }));
 };
 var KeyframeSettings = ({ update }) => {
-  const { setPropStatuses } = useContext61(Internals59.VisualModeSettersContext);
+  const { setPropStatuses } = useContext61(Internals60.VisualModeSettersContext);
   const { previewServerState } = useContext61(StudioServerConnectionCtx);
   const { propStatus } = update;
   const [posterize, setPosterize] = useState73(propStatus.posterize ?? 0);
@@ -37999,7 +38115,7 @@ var useOpenSequenceInEditor = (sequence) => {
 
 // src/components/Timeline/use-rename-sequence.ts
 import { useCallback as useCallback107, useContext as useContext64, useMemo as useMemo117 } from "react";
-import { Internals as Internals60 } from "remotion";
+import { Internals as Internals61 } from "remotion";
 var getSequenceNameSaveAction = ({
   editedName,
   currentDisplayName,
@@ -38023,11 +38139,11 @@ var useRenameSequence = ({
   sequence,
   validatedLocation
 }) => {
-  const { propStatuses } = useContext64(Internals60.VisualModePropStatusesContext);
-  const { setPropStatuses } = useContext64(Internals60.VisualModeSettersContext);
+  const { propStatuses } = useContext64(Internals61.VisualModePropStatusesContext);
+  const { setPropStatuses } = useContext64(Internals61.VisualModeSettersContext);
   const nodePath = nodePathInfo?.sequenceSubscriptionKey ?? null;
   const propStatusesForOverride = useMemo117(() => {
-    return nodePath ? Internals60.getPropStatusesCtx(propStatuses, nodePath) : undefined;
+    return nodePath ? Internals61.getPropStatusesCtx(propStatuses, nodePath) : undefined;
   }, [propStatuses, nodePath]);
   const codeNameStatus = propStatusesForOverride?.name;
   const fallbackDisplayName = sequence.controls?.componentName ?? "<Sequence>";
@@ -38101,7 +38217,7 @@ var useRenameSequence = ({
 
 // src/components/InspectorPanel/ConnectedCompositionsSection.tsx
 import { useContext as useContext65, useMemo as useMemo118 } from "react";
-import { Internals as Internals61 } from "remotion";
+import { Internals as Internals62 } from "remotion";
 import { jsx as jsx181 } from "react/jsx-runtime";
 var compositionIconStyle = {
   height: 13,
@@ -38115,7 +38231,7 @@ var compositionListStyle = {
 var useConnectedCompositions = ({
   track
 }) => {
-  const { compositions } = useContext65(Internals61.CompositionManager);
+  const { compositions } = useContext65(Internals62.CompositionManager);
   return useMemo118(() => getConnectedCompositions({
     compositions,
     singleChildComponent: track.sequence.singleChildComponent
@@ -38248,10 +38364,10 @@ var SequenceInspectorSections = ({ track }) => {
 
 // src/components/InspectorPanel/use-track-for-selection.ts
 import { useContext as useContext67, useMemo as useMemo120 } from "react";
-import { Internals as Internals62 } from "remotion";
+import { Internals as Internals63 } from "remotion";
 var useTrackForSelection = (selection) => {
-  const { sequences } = useContext67(Internals62.SequenceManager);
-  const { overrideIdToNodePathMappings } = useContext67(Internals62.OverrideIdsToNodePathsGettersContext);
+  const { sequences } = useContext67(Internals63.SequenceManager);
+  const { overrideIdToNodePathMappings } = useContext67(Internals63.OverrideIdsToNodePathsGettersContext);
   return useMemo120(() => {
     if (selection.type === "guide") {
       return null;
@@ -38274,12 +38390,12 @@ var addKeyframeIcon = {
 var EasingInspector = ({ selection }) => {
   const track = useTrackForSelection(selection);
   const videoConfig = useVideoConfig6();
-  const timelinePosition = Internals63.Timeline.useTimelinePosition();
-  const { sequences } = useContext68(Internals63.SequenceManager);
-  const { overrideIdToNodePathMappings } = useContext68(Internals63.OverrideIdsToNodePathsGettersContext);
-  const { propStatuses } = useContext68(Internals63.VisualModePropStatusesContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext68(Internals63.VisualModeDragOverridesContext);
-  const { setPropStatuses } = useContext68(Internals63.VisualModeSettersContext);
+  const timelinePosition = Internals64.Timeline.useTimelinePosition();
+  const { sequences } = useContext68(Internals64.SequenceManager);
+  const { overrideIdToNodePathMappings } = useContext68(Internals64.OverrideIdsToNodePathsGettersContext);
+  const { propStatuses } = useContext68(Internals64.VisualModePropStatusesContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext68(Internals64.VisualModeDragOverridesContext);
+  const { setPropStatuses } = useContext68(Internals64.VisualModeSettersContext);
   const { previewServerState } = useContext68(StudioServerConnectionCtx);
   const { selectItems } = useTimelineSelection();
   const parentSelection = useMemo121(() => getTimelineSelectionFromNodePathInfo(selection.nodePathInfo), [selection.nodePathInfo]);
@@ -38383,7 +38499,7 @@ var EasingInspector = ({ selection }) => {
       return;
     }
     const sourceFrame = timelinePosition - track.keyframeDisplayOffset;
-    const value = Internals63.getEffectiveVisualModeValue({
+    const value = Internals64.getEffectiveVisualModeValue({
       propStatus: easingUpdate.propStatus,
       dragOverrideValue: easingDetails.dragOverrideValue,
       defaultValue: easingDetails.defaultValue,
@@ -38604,7 +38720,7 @@ import {
   useMemo as useMemo139,
   useState as useState81
 } from "react";
-import { Internals as Internals68, useVideoConfig as useVideoConfig10 } from "remotion";
+import { Internals as Internals69, useVideoConfig as useVideoConfig10 } from "remotion";
 
 // src/components/Timeline/TimelineEffectPropItem.tsx
 import {
@@ -38612,7 +38728,7 @@ import {
   optimisticUpdateForEffectPropStatuses as optimisticUpdateForEffectPropStatuses2
 } from "@remotion/studio-shared";
 import { useCallback as useCallback126, useContext as useContext74, useMemo as useMemo137 } from "react";
-import { Internals as Internals66, useVideoConfig as useVideoConfig8 } from "remotion";
+import { Internals as Internals67, useVideoConfig as useVideoConfig8 } from "remotion";
 
 // src/components/Timeline/get-animation-item-selection-for-frame.ts
 var getKeyframeSelection = ({
@@ -38873,7 +38989,7 @@ var TimelineFieldRowContent = ({ field, rowDepth, selected, children }) => {
 // src/components/Timeline/TimelineKeyframeControls.tsx
 import { isSchemaFieldKeyframable } from "@remotion/studio-shared";
 import { useCallback as useCallback111, useContext as useContext72, useMemo as useMemo124 } from "react";
-import { Internals as Internals64, useVideoConfig as useVideoConfig7 } from "remotion";
+import { Internals as Internals65, useVideoConfig as useVideoConfig7 } from "remotion";
 
 // src/components/Timeline/get-keyframe-navigation.ts
 var isKeyframeInTimelineRange = (frame2, durationInFrames) => {
@@ -39025,7 +39141,7 @@ var resolveKeyframeControlTarget = ({
   }
   const nodePath = nodePathInfo.sequenceSubscriptionKey;
   if (fieldNode.field.kind === "sequence-field") {
-    const sequencePropStatuses = Internals64.getPropStatusesCtx(propStatuses, nodePath);
+    const sequencePropStatuses = Internals65.getPropStatusesCtx(propStatuses, nodePath);
     const sequenceSelectedPropStatus = sequencePropStatuses?.[fieldNode.field.key] ?? null;
     if (sequenceSelectedPropStatus === null) {
       return null;
@@ -39044,7 +39160,7 @@ var resolveKeyframeControlTarget = ({
       effectIndex: null
     };
   }
-  const effectStatus = Internals64.getEffectPropStatusesCtx({
+  const effectStatus = Internals65.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex: fieldNode.field.effectIndex
@@ -39111,7 +39227,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;
@@ -39131,7 +39248,7 @@ function getCurrentKeyframeValue({
   dragOverrideValue
 }) {
   if (isKeyframedStatus(propStatus)) {
-    return Internals64.getEffectiveVisualModeValue({
+    return Internals65.getEffectiveVisualModeValue({
       propStatus,
       dragOverrideValue,
       frame: jsxFrame,
@@ -39140,7 +39257,7 @@ function getCurrentKeyframeValue({
     });
   }
   if (propStatus.status === "static") {
-    return Internals64.getEffectiveVisualModeValue({
+    return Internals65.getEffectiveVisualModeValue({
       propStatus,
       dragOverrideValue,
       frame: jsxFrame,
@@ -39189,11 +39306,11 @@ var TimelineKeyframeControls = ({
   mode = "timeline"
 }) => {
   const videoConfig = useVideoConfig7();
-  const timelinePosition = Internals64.Timeline.useTimelinePosition();
-  const setFrame = Internals64.useTimelineSetFrame();
-  const { setPropStatuses } = useContext72(Internals64.VisualModeSettersContext);
-  const { propStatuses } = useContext72(Internals64.VisualModePropStatusesContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext72(Internals64.VisualModeDragOverridesContext);
+  const timelinePosition = Internals65.Timeline.useTimelinePosition();
+  const setFrame = Internals65.useTimelineSetFrame();
+  const { setPropStatuses } = useContext72(Internals65.VisualModeSettersContext);
+  const { propStatuses } = useContext72(Internals65.VisualModePropStatusesContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext72(Internals65.VisualModeDragOverridesContext);
   const { previewServerState } = useContext72(StudioServerConnectionCtx);
   const { selectedItems, selectItems } = useTimelineSelection();
   const tracks = useTimelineKeyframeTracks();
@@ -39284,7 +39401,7 @@ var TimelineKeyframeControls = ({
   const seekToDisplayFrame = useCallback111((frame2) => {
     setFrame((current) => {
       const next = { ...current, [videoConfig.id]: frame2 };
-      Internals64.persistCurrentFrame(next);
+      Internals65.persistCurrentFrame(next);
       return next;
     });
   }, [setFrame, videoConfig.id]);
@@ -39438,7 +39555,7 @@ var TimelineKeyframeControls = ({
 
 // src/components/Timeline/TimelineKeyframedValue.tsx
 import { useCallback as useCallback124, useMemo as useMemo134 } from "react";
-import { Internals as Internals65 } from "remotion";
+import { Internals as Internals66 } from "remotion";
 
 // src/components/Timeline/TimelineSchemaField.tsx
 import React144 from "react";
@@ -43141,7 +43258,7 @@ var TimelineKeyframedValue = ({
   scaleLockNodePath
 }) => {
   const computedValue = useMemo134(() => {
-    const raw = Internals65.interpolateKeyframedStatus({
+    const raw = Internals66.interpolateKeyframedStatus({
       forceSpringAllowTail: false,
       frame: sourceFrame,
       status: propStatus
@@ -43156,7 +43273,7 @@ var TimelineKeyframedValue = ({
     codeValue: computedValue
   }), [computedValue]);
   const effectiveValue = useMemo134(() => {
-    return Internals65.getEffectiveVisualModeValue({
+    return Internals66.getEffectiveVisualModeValue({
       propStatus: fakeStatus,
       dragOverrideValue,
       frame: sourceFrame,
@@ -43364,23 +43481,23 @@ var isResettableStatus = ({
   return JSON.stringify(effectiveCodeValue) !== JSON.stringify(defaultValue);
 };
 var TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFrame }) => {
-  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext74(Internals66.VisualModeSettersContext);
-  const { getEffectDragOverrides } = useContext74(Internals66.VisualModeDragOverridesContext);
-  const { propStatuses: visualModePropStatuses } = useContext74(Internals66.VisualModePropStatusesContext);
+  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext74(Internals67.VisualModeSettersContext);
+  const { getEffectDragOverrides } = useContext74(Internals67.VisualModeDragOverridesContext);
+  const { propStatuses: visualModePropStatuses } = useContext74(Internals67.VisualModePropStatusesContext);
   const { previewServerState } = useContext74(StudioServerConnectionCtx);
   const clientId = previewServerState.type === "connected" ? previewServerState.clientId : null;
-  const effectStatus = Internals66.getEffectPropStatusesCtx({
+  const effectStatus = Internals67.getEffectPropStatusesCtx({
     propStatuses: visualModePropStatuses,
     nodePath,
     effectIndex: field.effectIndex
   });
   const propStatus = effectStatus.type === "can-update-effect" ? effectStatus.props?.[field.key] ?? null : null;
   const onDragValueChange = useCallback126((value) => {
-    const nextDragOverrideValue = propStatus !== null && isKeyframedStatus2(propStatus) ? Internals66.makeKeyframedDragOverride({
+    const nextDragOverrideValue = propStatus !== null && isKeyframedStatus2(propStatus) ? Internals67.makeKeyframedDragOverride({
       status: propStatus,
       frame: sourceFrame,
       value
-    }) : Internals66.makeStaticDragOverride(value);
+    }) : Internals67.makeStaticDragOverride(value);
     setEffectDragOverrides(nodePath, field.effectIndex, field.key, nextDragOverrideValue);
   }, [
     field.effectIndex,
@@ -43535,7 +43652,7 @@ var TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFrame
       fixHref: TIMELINE_COMPUTED_EFFECT_FIX_LINK
     });
   }
-  const effectiveValue = Internals66.getEffectiveVisualModeValue({
+  const effectiveValue = Internals67.getEffectiveVisualModeValue({
     propStatus,
     dragOverrideValue,
     defaultValue: field.fieldSchema.default,
@@ -43562,19 +43679,19 @@ var TimelineEffectPropItem = ({
   keyframeControlsMode = "timeline"
 }) => {
   const { previewServerState } = useContext74(StudioServerConnectionCtx);
-  const { setPropStatuses } = useContext74(Internals66.VisualModeSettersContext);
-  const { propStatuses } = useContext74(Internals66.VisualModePropStatusesContext);
-  const { getEffectDragOverrides } = useContext74(Internals66.VisualModeDragOverridesContext);
+  const { setPropStatuses } = useContext74(Internals67.VisualModeSettersContext);
+  const { propStatuses } = useContext74(Internals67.VisualModePropStatusesContext);
+  const { getEffectDragOverrides } = useContext74(Internals67.VisualModeDragOverridesContext);
   const selection = useTimelineRowSelection(nodePathInfo);
   const { selectItems } = useTimelineSelection();
-  const setFrame = Internals66.useTimelineSetFrame();
+  const setFrame = Internals67.useTimelineSetFrame();
   const videoConfig = useVideoConfig8();
-  const timelinePosition = Internals66.Timeline.useTimelinePosition();
+  const timelinePosition = Internals67.Timeline.useTimelinePosition();
   const sourceFrame = timelinePosition - keyframeDisplayOffset;
   const style8 = useMemo137(() => {
     return field.typeName === "text-content" ? fieldRowBase : { ...fieldRowBase, height: field.rowHeight };
   }, [field.rowHeight, field.typeName]);
-  const effectStatus = useMemo137(() => Internals66.getEffectPropStatusesCtx({
+  const effectStatus = useMemo137(() => Internals67.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex: field.effectIndex
@@ -43664,7 +43781,7 @@ var TimelineEffectPropItem = ({
   const seekToDisplayFrame = useCallback126((frame2) => {
     setFrame((current) => {
       const next = { ...current, [videoConfig.id]: frame2 };
-      Internals66.persistCurrentFrame(next);
+      Internals67.persistCurrentFrame(next);
       return next;
     });
   }, [setFrame, videoConfig.id]);
@@ -43681,7 +43798,7 @@ var TimelineEffectPropItem = ({
       if (!keyframable || previewServerState.type !== "connected") {
         return;
       }
-      const value = Internals66.getEffectiveVisualModeValue({
+      const value = Internals67.getEffectiveVisualModeValue({
         propStatus,
         dragOverrideValue,
         frame: sourceFrame,
@@ -43775,7 +43892,7 @@ var TimelineEffectPropItem = ({
 // src/components/Timeline/TimelineSequencePropItem.tsx
 import { isSchemaFieldKeyframable as isSchemaFieldKeyframable3 } from "@remotion/studio-shared";
 import { useCallback as useCallback127, useContext as useContext75, useMemo as useMemo138 } from "react";
-import { Internals as Internals67, useVideoConfig as useVideoConfig9 } from "remotion";
+import { Internals as Internals68, useVideoConfig as useVideoConfig9 } from "remotion";
 import { jsx as jsx208 } from "react/jsx-runtime";
 var fieldRowBase2 = {};
 var isKeyframedStatus3 = (status) => {
@@ -43798,18 +43915,18 @@ var isResettableStatus2 = ({
   return JSON.stringify(effectiveCodeValue) !== JSON.stringify(defaultValue);
 };
 var Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
-  const { getDragOverrides } = useContext75(Internals67.VisualModeDragOverridesContext);
-  const { setDragOverrides, clearDragOverrides } = useContext75(Internals67.VisualModeSettersContext);
+  const { getDragOverrides } = useContext75(Internals68.VisualModeDragOverridesContext);
+  const { setDragOverrides, clearDragOverrides } = useContext75(Internals68.VisualModeSettersContext);
   const dragOverrideValue = useMemo138(() => {
     return nodePath === null ? undefined : (getDragOverrides(nodePath) ?? {})[field.key];
   }, [getDragOverrides, nodePath, field.key]);
-  const effectiveValue = Internals67.getEffectiveVisualModeValue({
+  const effectiveValue = Internals68.getEffectiveVisualModeValue({
     propStatus,
     dragOverrideValue,
     defaultValue: field.fieldSchema.default,
     shouldResortToDefaultValueIfUndefined: true
   });
-  const { setPropStatuses } = useContext75(Internals67.VisualModeSettersContext);
+  const { setPropStatuses } = useContext75(Internals68.VisualModeSettersContext);
   const { previewServerState } = useContext75(StudioServerConnectionCtx);
   const clientId = previewServerState.type === "connected" ? previewServerState.clientId : null;
   const onSave = useCallback127((value, options) => {
@@ -43858,7 +43975,7 @@ var Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
     if (nodePath === null) {
       throw new Error("Cannot drag value");
     }
-    setDragOverrides(nodePath, field.key, Internals67.makeStaticDragOverride(value));
+    setDragOverrides(nodePath, field.key, Internals68.makeStaticDragOverride(value));
   }, [setDragOverrides, nodePath, field.key]);
   const onDragEnd = useCallback127(() => {
     if (nodePath === null) {
@@ -43877,8 +43994,8 @@ var Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
   });
 };
 var TimelineSequenceKeyframedValue = ({ field, fileName, nodePath, schema, propStatus, sourceFrame }) => {
-  const { getDragOverrides } = useContext75(Internals67.VisualModeDragOverridesContext);
-  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext75(Internals67.VisualModeSettersContext);
+  const { getDragOverrides } = useContext75(Internals68.VisualModeDragOverridesContext);
+  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext75(Internals68.VisualModeSettersContext);
   const { previewServerState } = useContext75(StudioServerConnectionCtx);
   const clientId = previewServerState.type === "connected" ? previewServerState.clientId : null;
   const dragOverrideValue = useMemo138(() => {
@@ -43900,7 +44017,7 @@ var TimelineSequenceKeyframedValue = ({ field, fileName, nodePath, schema, propS
     });
   }, [clientId, field.key, fileName, nodePath, schema, setPropStatuses]);
   const onKeyframedDragValueChange = useCallback127((value) => {
-    setDragOverrides(nodePath, field.key, Internals67.makeKeyframedDragOverride({
+    setDragOverrides(nodePath, field.key, Internals68.makeKeyframedDragOverride({
       status: propStatus,
       frame: sourceFrame,
       value
@@ -43930,17 +44047,17 @@ var TimelineSequencePropItem = ({
   keyframeDisplayOffset,
   keyframeControlsMode = "timeline"
 }) => {
-  const { propStatuses: visualModePropStatuses } = useContext75(Internals67.VisualModePropStatusesContext);
-  const { getDragOverrides } = useContext75(Internals67.VisualModeDragOverridesContext);
-  const { setPropStatuses } = useContext75(Internals67.VisualModeSettersContext);
+  const { propStatuses: visualModePropStatuses } = useContext75(Internals68.VisualModePropStatusesContext);
+  const { getDragOverrides } = useContext75(Internals68.VisualModeDragOverridesContext);
+  const { setPropStatuses } = useContext75(Internals68.VisualModeSettersContext);
   const { previewServerState } = useContext75(StudioServerConnectionCtx);
   const selection = useTimelineRowSelection(nodePathInfo);
   const { selectItems } = useTimelineSelection();
-  const setFrame = Internals67.useTimelineSetFrame();
+  const setFrame = Internals68.useTimelineSetFrame();
   const videoConfig = useVideoConfig9();
-  const timelinePosition = Internals67.Timeline.useTimelinePosition();
+  const timelinePosition = Internals68.Timeline.useTimelinePosition();
   const sourceFrame = timelinePosition - keyframeDisplayOffset;
-  const propStatusesForOverride = Internals67.getPropStatusesCtx(visualModePropStatuses, nodePath);
+  const propStatusesForOverride = Internals68.getPropStatusesCtx(visualModePropStatuses, nodePath);
   const propStatus = propStatusesForOverride?.[field.key] ?? null;
   const dragOverrideValue = useMemo138(() => {
     return (getDragOverrides(nodePath) ?? {})[field.key];
@@ -44034,7 +44151,7 @@ var TimelineSequencePropItem = ({
   const seekToDisplayFrame = useCallback127((frame2) => {
     setFrame((current) => {
       const next = { ...current, [videoConfig.id]: frame2 };
-      Internals67.persistCurrentFrame(next);
+      Internals68.persistCurrentFrame(next);
       return next;
     });
   }, [setFrame, videoConfig.id]);
@@ -44051,7 +44168,7 @@ var TimelineSequencePropItem = ({
       if (!keyframable || previewServerState.type !== "connected") {
         return;
       }
-      const value = Internals67.getEffectiveVisualModeValue({
+      const value = Internals68.getEffectiveVisualModeValue({
         propStatus,
         dragOverrideValue,
         frame: sourceFrame,
@@ -44214,16 +44331,16 @@ var TrashIcon = ({ color }) => {
 var KeyframeInspector = ({ selection }) => {
   const track = useTrackForSelection(selection);
   const videoConfig = useVideoConfig10();
-  const timelinePosition = Internals68.Timeline.useTimelinePosition();
-  const { propStatuses } = useContext76(Internals68.VisualModePropStatusesContext);
+  const timelinePosition = Internals69.Timeline.useTimelinePosition();
+  const { propStatuses } = useContext76(Internals69.VisualModePropStatusesContext);
   const {
     clearDragOverrides,
     clearEffectDragOverrides,
     setDragOverrides,
     setEffectDragOverrides,
     setPropStatuses
-  } = useContext76(Internals68.VisualModeSettersContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext76(Internals68.VisualModeDragOverridesContext);
+  } = useContext76(Internals69.VisualModeSettersContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext76(Internals69.VisualModeDragOverridesContext);
   const { previewServerState } = useContext76(StudioServerConnectionCtx);
   const { selectItems } = useTimelineSelection();
   const [draftFrame, setDraftFrame] = useState81(selection.frame);
@@ -44252,7 +44369,7 @@ var KeyframeInspector = ({ selection }) => {
         includeTextContent: false
       });
       const sequenceField = sequenceFields?.find((candidate) => candidate.key === keyframeField.fieldKey) ?? null;
-      const sequencePropStatus = Internals68.getPropStatusesCtx(propStatuses, nodePath)?.[keyframeField.fieldKey] ?? null;
+      const sequencePropStatus = Internals69.getPropStatusesCtx(propStatuses, nodePath)?.[keyframeField.fieldKey] ?? null;
       if (!sequenceField || sequencePropStatus?.status !== "keyframed") {
         return null;
       }
@@ -44280,7 +44397,7 @@ var KeyframeInspector = ({ selection }) => {
       getEffectDragOverrides
     });
     const effectField = effectFields.find((candidate) => candidate.key === keyframeField.fieldKey) ?? null;
-    const effectStatus = Internals68.getEffectPropStatusesCtx({
+    const effectStatus = Internals69.getEffectPropStatusesCtx({
       propStatuses,
       nodePath,
       effectIndex: keyframeField.effectIndex
@@ -44589,7 +44706,7 @@ import React152 from "react";
 
 // src/components/Timeline/TimelineEffectItem.tsx
 import { useCallback as useCallback129, useContext as useContext77, useMemo as useMemo140, useState as useState82 } from "react";
-import { Internals as Internals69 } from "remotion";
+import { Internals as Internals70 } from "remotion";
 import { jsx as jsx210, jsxs as jsxs112 } from "react/jsx-runtime";
 var EFFECT_REORDER_MIME_TYPE = "application/remotion-effect-reorder";
 var currentEffectDrag = null;
@@ -44655,12 +44772,12 @@ var TimelineEffectItem = ({
 }) => {
   const { previewServerState } = useContext77(StudioServerConnectionCtx);
   const previewConnected = previewServerState.type === "connected";
-  const { propStatuses } = useContext77(Internals69.VisualModePropStatusesContext);
-  const { setPropStatuses } = useContext77(Internals69.VisualModeSettersContext);
+  const { propStatuses } = useContext77(Internals70.VisualModePropStatusesContext);
+  const { setPropStatuses } = useContext77(Internals70.VisualModeSettersContext);
   const selection = useTimelineRowSelection(nodePathInfo);
   const containsSelection = useTimelineRowContainsSelection(nodePathInfo);
   const [dropIndicator, setDropIndicator] = useState82(null);
-  const effectStatus = useMemo140(() => Internals69.getEffectPropStatusesCtx({
+  const effectStatus = useMemo140(() => Internals70.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex
@@ -44675,7 +44792,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 = useMemo140(() => Internals69.makeSequencePropsSubscriptionKey(nodePath), [nodePath]);
+  const nodePathKey = useMemo140(() => Internals70.makeSequencePropsSubscriptionKey(nodePath), [nodePath]);
   const onDeleteEffectFromSource = useCallback129(async () => {
     if (deleteDisabled) {
       return;
@@ -45062,7 +45179,7 @@ var TimelineExpandedRow = ({
 
 // src/components/Timeline/use-timeline-expanded-tree.ts
 import { useContext as useContext78, useMemo as useMemo141 } from "react";
-import { Internals as Internals70 } from "remotion";
+import { Internals as Internals71 } from "remotion";
 var useTimelineExpandedTree = ({
   sequence,
   nodePathInfo,
@@ -45071,8 +45188,8 @@ var useTimelineExpandedTree = ({
 }) => {
   const { getIsExpanded } = useContext78(ExpandedTracksGetterContext);
   const { toggleTrack } = useContext78(ExpandedTracksSetterContext);
-  const { propStatuses: visualModePropStatuses } = useContext78(Internals70.VisualModePropStatusesContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext78(Internals70.VisualModeDragOverridesContext);
+  const { propStatuses: visualModePropStatuses } = useContext78(Internals71.VisualModePropStatusesContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext78(Internals71.VisualModeDragOverridesContext);
   const { selectedItems } = useTimelineSelection();
   const tree = useMemo141(() => buildTimelineTree({
     sequence,
@@ -45425,7 +45542,7 @@ var InspectorSequenceSection = ({
 
 // src/components/InspectorPanel/AlignmentControls.tsx
 import { useCallback as useCallback131, useContext as useContext80, useMemo as useMemo143 } from "react";
-import { Internals as Internals71 } from "remotion";
+import { Internals as Internals72 } from "remotion";
 
 // src/icons/align-right.tsx
 import { jsx as jsx213, jsxs as jsxs114 } from "react/jsx-runtime";
@@ -45649,16 +45766,16 @@ var AlignmentButton = ({ onClick, title: title2, Icon, disabled }) => {
 };
 var AlignmentControls = ({ track }) => {
   const { previewServerState } = useContext80(StudioServerConnectionCtx);
-  const { propStatuses } = useContext80(Internals71.VisualModePropStatusesContext);
-  const { getDragOverrides } = useContext80(Internals71.VisualModeDragOverridesContext);
-  const { setPropStatuses } = useContext80(Internals71.VisualModeSettersContext);
-  const { canvasContent, compositions } = useContext80(Internals71.CompositionManager);
+  const { propStatuses } = useContext80(Internals72.VisualModePropStatusesContext);
+  const { getDragOverrides } = useContext80(Internals72.VisualModeDragOverridesContext);
+  const { setPropStatuses } = useContext80(Internals72.VisualModeSettersContext);
+  const { canvasContent, compositions } = useContext80(Internals72.CompositionManager);
   const currentCompositionMetadata = useMemo143(() => {
     if (canvasContent?.type !== "composition")
       return null;
     return compositions.find((c) => c.id === canvasContent.compositionId) ?? null;
   }, [canvasContent, compositions]);
-  const timelinePosition = Internals71.Timeline.useTimelinePosition();
+  const timelinePosition = Internals72.Timeline.useTimelinePosition();
   const handleAlign = useCallback131((direction) => {
     if (previewServerState.type !== "connected" || !track.nodePathInfo || !track.sequence.controls) {
       return;
@@ -45668,7 +45785,7 @@ var AlignmentControls = ({ track }) => {
       return;
     }
     const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
-    const nodePropStatuses = Internals71.getPropStatusesCtx(propStatuses, nodePath);
+    const nodePropStatuses = Internals72.getPropStatusesCtx(propStatuses, nodePath);
     const sourceFrame = timelinePosition - track.keyframeDisplayOffset;
     const dragOverrides = getDragOverrides(nodePath) ?? {};
     const activeSchema = getSelectedOutlineActiveSchema({
@@ -45695,12 +45812,12 @@ var AlignmentControls = ({ track }) => {
     if (!currentCompositionMetadata?.width) {
       return;
     }
-    const compositionRect = Internals71.portalNode().getBoundingClientRect();
+    const compositionRect = Internals72.portalNode().getBoundingClientRect();
     if (compositionRect.width === 0 || compositionRect.height === 0) {
       return;
     }
     const scale = compositionRect.width / currentCompositionMetadata.width;
-    const currentTranslate = propStatus ? String(Internals71.getEffectiveVisualModeValue({
+    const currentTranslate = propStatus ? String(Internals72.getEffectiveVisualModeValue({
       propStatus,
       dragOverrideValue: dragOverrides[translateFieldKey],
       defaultValue: fieldSchema.default,
@@ -45768,7 +45885,7 @@ var AlignmentControls = ({ track }) => {
     return null;
   }
   const renderNodePath = track.nodePathInfo.sequenceSubscriptionKey;
-  const renderNodePropStatuses = Internals71.getPropStatusesCtx(propStatuses, renderNodePath);
+  const renderNodePropStatuses = Internals72.getPropStatusesCtx(propStatuses, renderNodePath);
   const renderSourceFrame = timelinePosition - track.keyframeDisplayOffset;
   const renderDragOverrides = getDragOverrides(renderNodePath) ?? {};
   const renderActiveSchema = getSelectedOutlineActiveSchema({
@@ -46013,7 +46130,7 @@ var SchemaResetButton = ({ onClick }) => {
 
 // src/components/RenderQueue/index.tsx
 import React168, { useContext as useContext90, useEffect as useEffect69, useMemo as useMemo153 } from "react";
-import { Internals as Internals74 } from "remotion";
+import { Internals as Internals75 } from "remotion";
 
 // src/components/RenderQueue/RenderQueueItem.tsx
 import {
@@ -46023,7 +46140,7 @@ import {
   useMemo as useMemo152,
   useState as useState84
 } from "react";
-import { Internals as Internals73 } from "remotion";
+import { Internals as Internals74 } from "remotion";
 
 // src/components/RenderQueue/client-side-render-types.ts
 var isRestoredClientJob = (job) => {
@@ -46690,13 +46807,13 @@ var RenderQueueProgressMessage = ({ job }) => {
 
 // src/components/RenderQueue/RenderQueueRemoveItem.tsx
 import { useCallback as useCallback142, useContext as useContext87, useMemo as useMemo150 } from "react";
-import { Internals as Internals72 } from "remotion";
+import { Internals as Internals73 } from "remotion";
 import { jsx as jsx234 } from "react/jsx-runtime";
 var RenderQueueRemoveItem = ({ job }) => {
   const isClientJob = isClientRenderJob(job);
   const { removeClientJob } = useContext87(RenderQueueContext);
-  const { canvasContent } = useContext87(Internals72.CompositionManager);
-  const { setCanvasContent } = useContext87(Internals72.CompositionSetters);
+  const { canvasContent } = useContext87(Internals73.CompositionManager);
+  const { setCanvasContent } = useContext87(Internals73.CompositionSetters);
   const onClick = useCallback142((e) => {
     e.stopPropagation();
     if (isClientJob) {
@@ -47031,7 +47148,7 @@ var subtitle2 = {
 var SELECTED_CLASSNAME = "__remotion_selected_classname";
 var RenderQueueItem = ({ job, selected }) => {
   const [hovered, setHovered] = useState84(false);
-  const { setCanvasContent } = useContext89(Internals73.CompositionSetters);
+  const { setCanvasContent } = useContext89(Internals74.CompositionSetters);
   const isClientJob = isClientRenderJob(job);
   const onPointerEnter = useCallback144(() => {
     setHovered(true);
@@ -47198,7 +47315,7 @@ var renderQueue = {
 };
 var RenderQueue = () => {
   const { jobs } = useContext90(RenderQueueContext);
-  const { canvasContent } = useContext90(Internals74.CompositionManager);
+  const { canvasContent } = useContext90(Internals75.CompositionManager);
   const previousJobCount = React168.useRef(jobs.length);
   const jobCount = jobs.length;
   const divRef = React168.useRef(null);
@@ -47334,7 +47451,7 @@ var persistSelectedOptionsSidebarPanel2 = (panel2) => {
   localStorage.setItem(localStorageKey2, panel2);
 };
 var OptionsPanel = ({ readOnlyStudio }) => {
-  const { props, updateProps } = useContext92(Internals75.EditorPropsContext);
+  const { props, updateProps } = useContext92(Internals76.EditorPropsContext);
   const isMobileLayout = useMobileLayout();
   const container37 = useMemo155(() => ({
     height: "100%",
@@ -47365,7 +47482,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
       }
     };
   }, []);
-  const { compositions, canvasContent } = useContext92(Internals75.CompositionManager);
+  const { compositions, canvasContent } = useContext92(Internals76.CompositionManager);
   const composition = useMemo155(() => {
     if (canvasContent === null || canvasContent.type !== "composition") {
       return null;
@@ -47508,13 +47625,13 @@ import {
   useRef as useRef55,
   useState as useState89
 } from "react";
-import { Internals as Internals84 } from "remotion";
+import { Internals as Internals85 } from "remotion";
 
 // src/helpers/is-current-selected-still.ts
 import { useContext as useContext93 } from "react";
-import { Internals as Internals76 } from "remotion";
+import { Internals as Internals77 } from "remotion";
 var useIsStill = () => {
-  const resolved = Internals76.useResolvedVideoConfig(null);
+  const resolved = Internals77.useResolvedVideoConfig(null);
   if (!resolved || resolved.type !== "success") {
     return false;
   }
@@ -47522,7 +47639,7 @@ var useIsStill = () => {
 };
 var useIsVideoComposition = () => {
   const isStill = useIsStill();
-  const { canvasContent } = useContext93(Internals76.CompositionManager);
+  const { canvasContent } = useContext93(Internals77.CompositionManager);
   if (canvasContent === null) {
     return false;
   }
@@ -47587,7 +47704,7 @@ import {
   useRef as useRef53,
   useState as useState86
 } from "react";
-import { Internals as Internals77 } from "remotion";
+import { Internals as Internals78 } from "remotion";
 import { jsxs as jsxs124 } from "react/jsx-runtime";
 var label6 = {
   color: WHITE,
@@ -47600,9 +47717,9 @@ var pushWithMaxSize = (arr, value, maxSize) => {
   return arr.slice(-maxSize);
 };
 var FpsCounter = ({ playbackSpeed }) => {
-  const videoConfig = Internals77.useUnsafeVideoConfig();
-  const [playing] = Internals77.Timeline.usePlayingState();
-  const frame2 = Internals77.Timeline.useTimelinePosition();
+  const videoConfig = Internals78.useUnsafeVideoConfig();
+  const [playing] = Internals78.Timeline.usePlayingState();
+  const frame2 = Internals78.Timeline.useTimelinePosition();
   const [marker, rerender] = useState86({});
   const [fps, setFps] = useState86(0);
   const previousUpdates = useRef53([]);
@@ -47664,7 +47781,7 @@ var FpsCounter = ({ playbackSpeed }) => {
 
 // src/components/FullscreenToggle.tsx
 import { useCallback as useCallback147, useContext as useContext95, useEffect as useEffect71 } from "react";
-import { Internals as Internals78 } from "remotion";
+import { Internals as Internals79 } from "remotion";
 import { NoReactInternals as NoReactInternals26 } from "remotion/no-react";
 import { jsx as jsx242 } from "react/jsx-runtime";
 var accessibilityLabel3 = [
@@ -47673,7 +47790,7 @@ var accessibilityLabel3 = [
 ].filter(NoReactInternals26.truthy).join(" ");
 var FullScreenToggle = () => {
   const keybindings = useKeybinding();
-  const { setSize } = useContext95(Internals78.PreviewSizeContext);
+  const { setSize } = useContext95(Internals79.PreviewSizeContext);
   const onClick = useCallback147(() => {
     drawRef.current?.requestFullscreen();
     if (document.fullscreenElement)
@@ -47904,7 +48021,7 @@ var PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
 
 // src/components/PlaybackRatePersistor.tsx
 import { useEffect as useEffect73 } from "react";
-import { Internals as Internals79 } from "remotion";
+import { Internals as Internals80 } from "remotion";
 
 // src/state/playbackrate.ts
 var key5 = "remotion.playbackrate";
@@ -47924,7 +48041,7 @@ var loadPlaybackRate = () => {
 
 // src/components/PlaybackRatePersistor.tsx
 var PlaybackRatePersistor = () => {
-  const { setPlaybackRate, playbackRate } = Internals79.usePlaybackRate();
+  const { setPlaybackRate, playbackRate } = Internals80.usePlaybackRate();
   useEffect73(() => {
     setPlaybackRate(loadPlaybackRate());
   }, [setPlaybackRate]);
@@ -47936,7 +48053,7 @@ var PlaybackRatePersistor = () => {
 
 // src/components/PlaybackRateSelector.tsx
 import { useContext as useContext97, useMemo as useMemo157 } from "react";
-import { Internals as Internals80 } from "remotion";
+import { Internals as Internals81 } from "remotion";
 import { jsx as jsx247 } from "react/jsx-runtime";
 var commonPlaybackRates = [
   -4,
@@ -47957,7 +48074,7 @@ var getPlaybackRateLabel = (playbackRate) => {
 var accessibilityLabel5 = "Change the playback rate";
 var comboStyle3 = { width: 80 };
 var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
-  const { canvasContent } = useContext97(Internals80.CompositionManager);
+  const { canvasContent } = useContext97(Internals81.CompositionManager);
   const isStill = useIsStill();
   const style8 = useMemo157(() => {
     return {
@@ -48008,7 +48125,7 @@ var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
 // src/components/PlayPause.tsx
 import { PlayerInternals as PlayerInternals16 } from "@remotion/player";
 import { useCallback as useCallback152, useEffect as useEffect74, useState as useState87 } from "react";
-import { Internals as Internals81 } from "remotion";
+import { Internals as Internals82 } from "remotion";
 
 // src/icons/jump-to-start.tsx
 import { jsx as jsx248 } from "react/jsx-runtime";
@@ -48103,7 +48220,7 @@ var iconButton = {
 };
 var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted }) => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
-  const videoConfig = Internals81.useUnsafeVideoConfig();
+  const videoConfig = Internals82.useUnsafeVideoConfig();
   const [showBufferIndicator, setShowBufferState] = useState87(false);
   const {
     playing,
@@ -48329,7 +48446,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted })
 import { PlayerInternals as PlayerInternals17 } from "@remotion/player";
 import { useCallback as useCallback153, useContext as useContext98, useMemo as useMemo158, useRef as useRef54, useState as useState88 } from "react";
 import ReactDOM10 from "react-dom";
-import { Internals as Internals82 } from "remotion";
+import { Internals as Internals83 } from "remotion";
 import { jsx as jsx254, jsxs as jsxs126, Fragment as Fragment42 } from "react/jsx-runtime";
 var splitButtonContainer = {
   display: "inline-flex",
@@ -48459,9 +48576,9 @@ var RenderButton = ({
       }
     };
   }, []);
-  const video = Internals82.useVideo();
+  const video = Internals83.useVideo();
   const { getCurrentFrame: getCurrentFrame2 } = PlayerInternals17.usePlayer();
-  const { props } = useContext98(Internals82.EditorPropsContext);
+  const { props } = useContext98(Internals83.EditorPropsContext);
   const openServerRenderModal = useCallback153((copyCommandOnly) => {
     if (!video) {
       return null;
@@ -48818,7 +48935,7 @@ var SnappingToggle = ({ disabled }) => {
 
 // src/components/Timeline/TimelineZoomControls.tsx
 import { useCallback as useCallback155, useContext as useContext100 } from "react";
-import { Internals as Internals83 } from "remotion";
+import { Internals as Internals84 } from "remotion";
 
 // src/icons/minus.tsx
 import { jsx as jsx257 } from "react/jsx-runtime";
@@ -48850,7 +48967,7 @@ var iconStyle5 = {
   width: 14
 };
 var TimelineZoomControls = () => {
-  const { canvasContent } = useContext100(Internals83.CompositionManager);
+  const { canvasContent } = useContext100(Internals84.CompositionManager);
   const { setZoom, zoom: zoomMap } = useContext100(TimelineZoomCtx);
   const { tabIndex } = useZIndex();
   const onMinusClicked = useCallback155(() => {
@@ -48989,10 +49106,10 @@ var PreviewToolbarControl = ({ children }) => {
   });
 };
 var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
-  const { playbackRate, setPlaybackRate } = Internals84.usePlaybackRate();
-  const { playerMuted } = useContext101(Internals84.MediaVolumeContext);
-  const { setPlayerMuted } = useContext101(Internals84.SetMediaVolumeContext);
-  const { canvasContent } = useContext101(Internals84.CompositionManager);
+  const { playbackRate, setPlaybackRate } = Internals85.usePlaybackRate();
+  const { playerMuted } = useContext101(Internals85.MediaVolumeContext);
+  const { setPlayerMuted } = useContext101(Internals85.SetMediaVolumeContext);
+  const { canvasContent } = useContext101(Internals85.CompositionManager);
   const isVideoComposition = useIsVideoComposition();
   const previewToolbarRef = useRef55(null);
   const leftScrollIndicatorRef = useRef55(null);
@@ -49509,7 +49626,7 @@ var useResponsiveSidebarStatus = () => {
 var TopPanelInner = ({ readOnlyStudio, onMounted, drawRef: drawRef2, bufferStateDelayInMilliseconds }) => {
   const { setSidebarCollapsedState, sidebarCollapsedStateRight } = useContext104(SidebarContext);
   const rulersAreVisible = useIsRulerVisible();
-  const { canvasContent } = useContext104(Internals85.CompositionManager);
+  const { canvasContent } = useContext104(Internals86.CompositionManager);
   const actualStateLeft = useResponsiveSidebarStatus();
   const actualStateRight = useMemo161(() => {
     if (sidebarCollapsedStateRight === "collapsed") {
@@ -50144,7 +50261,7 @@ var MenuToolbar = ({ readOnlyStudio }) => {
 
 // src/components/Timeline/Timeline.tsx
 import React213, { useCallback as useCallback171, useContext as useContext125, useMemo as useMemo185, useState as useState102 } from "react";
-import { Internals as Internals103 } from "remotion";
+import { Internals as Internals104 } from "remotion";
 
 // src/components/Timeline/MaxTimelineTracks.tsx
 import { jsxs as jsxs134 } from "react/jsx-runtime";
@@ -50175,10 +50292,10 @@ var MaxTimelineTracksReached = () => {
 
 // src/components/Timeline/SequencePropsObserver.tsx
 import { useContext as useContext108, useEffect as useEffect82 } 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);
   useEffect82(() => {
     const handleEvent = (event) => {
       if (event.type !== "sequence-props-updated") {
@@ -50223,11 +50340,11 @@ import {
   stringifySequenceSubscriptionKey as stringifySequenceSubscriptionKey2
 } from "@remotion/studio-shared";
 import { useContext as useContext109, useEffect as useEffect83, 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,
@@ -50302,7 +50419,7 @@ var acquireSequencePropsSubscription = ({
         return;
       }
       current.applyOnce = null;
-      Internals87.Log.error(err);
+      Internals88.Log.error(err);
     });
   }
   entry.refCount++;
@@ -50347,16 +50464,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) {
@@ -50463,11 +50580,11 @@ import React192, {
   useRef as useRef62,
   useState as useState94
 } 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 useEffect85, 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";
@@ -50477,7 +50594,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 jsx270, jsxs as jsxs135 } from "react/jsx-runtime";
 var text = {
   color: WHITE,
@@ -50504,7 +50621,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();
@@ -50515,7 +50632,7 @@ var TimeValue = () => {
   const onValueChange = useCallback162((val) => {
     seek(val);
   }, [seek]);
-  useImperativeHandle13(Internals89.timeValueRef, () => ({
+  useImperativeHandle13(Internals90.timeValueRef, () => ({
     goToFrame: () => {
       ref2.current?.click();
     },
@@ -50625,7 +50742,7 @@ var TimelineTimePadding = () => {
 };
 var TimelineTimeIndicators = () => {
   const sliderTrack = useContext110(TimelineWidthContext);
-  const video = Internals90.useVideo();
+  const video = Internals91.useVideo();
   if (sliderTrack === null) {
     return null;
   }
@@ -50740,9 +50857,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 {};
@@ -50771,7 +50888,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] = useState94({
@@ -50903,7 +51020,7 @@ var TimelineDragHandlerInner = () => {
     });
     setFrame((c) => {
       const newObj = { ...c, [videoConfig.id]: frame2 };
-      Internals91.persistCurrentFrame(newObj);
+      Internals92.persistCurrentFrame(newObj);
       return newObj;
     });
     if (dragging.wasPlaying) {
@@ -50956,15 +51073,15 @@ import React193, { 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]);
@@ -51053,11 +51170,11 @@ import React196, {
   useMemo as useMemo171,
   useState as useState95
 } 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 jsx274, jsxs as jsxs136, Fragment as Fragment47 } from "react/jsx-runtime";
 var areaHighlight = {
   position: "absolute",
@@ -51071,7 +51188,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;
@@ -51155,8 +51272,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;
   }
@@ -51424,7 +51541,7 @@ var TimelineInOutDragHandlerInnerMemo = React196.memo(TimelineInOutDragHandlerIn
 
 // src/components/Timeline/TimelineSequenceItem.tsx
 import React200, { useCallback as useCallback167, useContext as useContext116, useMemo as useMemo176, useState as useState97 } from "react";
-import { Internals as Internals96 } from "remotion";
+import { Internals as Internals97 } from "remotion";
 
 // src/components/Timeline/TimelineExpandedSection.tsx
 import React197, { useMemo as useMemo172 } from "react";
@@ -51497,7 +51614,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 jsx278 } from "react/jsx-runtime";
 var lineStyle = {
   whiteSpace: "nowrap",
@@ -51527,7 +51644,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__ */ jsx278("div", {
     style: fileNameStyle,
@@ -51842,7 +51959,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();
@@ -51854,7 +51971,7 @@ var TimelineSequenceItem = ({
   const [isRenaming, setIsRenaming] = useState97(false);
   const [sequenceDropIndicator, setSequenceDropIndicator] = useState97(null);
   const [sequenceDropRejection, setSequenceDropRejection] = useState97(null);
-  const timelinePosition = Internals96.Timeline.useTimelinePosition();
+  const timelinePosition = Internals97.Timeline.useTimelinePosition();
   const { canOpenInEditor, openInEditor: openInEditor2, originalLocation } = useOpenSequenceInEditor(sequence);
   const fileLocation = useMemo176(() => formatFileLocation({
     location: originalLocation,
@@ -51884,7 +52001,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;
@@ -52189,11 +52306,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(() => {
@@ -52518,12 +52647,12 @@ var TimelineList = ({ timeline }) => {
 
 // src/components/Timeline/TimelinePinchZoom.tsx
 import { useCallback as useCallback168, useContext as useContext117, useEffect as useEffect89, 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);
@@ -52735,14 +52864,14 @@ var TimelinePinchZoom = () => {
 
 // src/components/Timeline/TimelinePlayCursorSyncer.tsx
 import { useContext as useContext118, useEffect as useEffect90 } 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;
@@ -52968,7 +53097,7 @@ var TimelineExpandedKeyframeRow = React203.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,
@@ -52978,10 +53107,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
@@ -52995,10 +53124,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,
@@ -53101,7 +53230,7 @@ var TimelineExpandedTrackKeyframes = React204.memo(TimelineExpandedTrackKeyframe
 
 // src/components/Timeline/TimelineSequence.tsx
 import React210, { 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;
@@ -53229,7 +53358,7 @@ import {
   sliceWaveformPeaks
 } from "@remotion/timeline-utils";
 import { useEffect as useEffect92, useMemo as useMemo180, useRef as useRef66, useState as useState99 } from "react";
-import { Internals as Internals100 } from "remotion";
+import { Internals as Internals101 } from "remotion";
 import { jsx as jsx286, jsxs as jsxs144 } from "react/jsx-runtime";
 var EMPTY_PEAKS = new Float32Array(0);
 var canRetryCanvasTransfer = (err) => {
@@ -53327,7 +53456,7 @@ var AudioWaveform = ({
   const [error, setError] = useState99(null);
   const [waveformCanvasKey, setWaveformCanvasKey] = useState99(0);
   const canUseWorkerPath = useMemo180(() => canUseAudioWaveformWorker(), []);
-  const vidConf = Internals100.useUnsafeVideoConfig();
+  const vidConf = Internals101.useUnsafeVideoConfig();
   if (vidConf === null) {
     throw new Error("Expected video config");
   }
@@ -53733,7 +53862,7 @@ import {
   useRef as useRef68,
   useState as useState100
 } 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 jsx291 } from "react/jsx-runtime";
 var HANDLE_WIDTH3 = 6;
@@ -53751,7 +53880,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: [] };
   }
@@ -53792,21 +53921,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) => {
@@ -54146,10 +54275,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] = useState100(false);
@@ -54204,7 +54333,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,
@@ -54274,9 +54403,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) => {
@@ -54331,10 +54460,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] = useState100(false);
@@ -54402,7 +54531,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,
@@ -54472,7 +54601,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",
@@ -54527,10 +54656,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] = useState100(false);
@@ -54585,7 +54714,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,
@@ -54649,7 +54778,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
         })));
@@ -55124,7 +55253,7 @@ var TimelineVideoInfo = ({
 
 // src/components/Timeline/TimelineSequence.tsx
 import { jsx as jsx293, jsxs as jsxs149 } from "react/jsx-runtime";
-var TimelineSequenceFn = ({ s, nodePathInfo, sequenceFrameOffset }) => {
+var TimelineSequenceFn = ({ s, connectedCompositions, nodePathInfo, sequenceFrameOffset }) => {
   const windowWidth = useContext123(TimelineWidthContext);
   if (windowWidth === null) {
     return null;
@@ -55132,6 +55261,7 @@ var TimelineSequenceFn = ({ s, nodePathInfo, sequenceFrameOffset }) => {
   return /* @__PURE__ */ jsx293(TimelineSequenceInner, {
     windowWidth,
     s,
+    connectedCompositions,
     nodePathInfo,
     sequenceFrameOffset
   });
@@ -55147,7 +55277,8 @@ var TimelineSequenceCurrentFrame = ({
   sequenceFrameOffset,
   fromCanUpdate,
   frozenFrame,
-  onMoveDragPointerDown
+  onMoveDragPointerDown,
+  onDoubleClick
 }) => {
   const ref2 = useRef70(null);
   const { onSelect, selectable, selected, selectionItem } = useTimelineRowSelection(nodePathInfo);
@@ -55192,6 +55323,7 @@ var TimelineSequenceCurrentFrame = ({
     style: actualStyle,
     title: s.displayName,
     onPointerDown: selectable ? onPointerDown : undefined,
+    onDoubleClick,
     children: [
       premountWidth ? /* @__PURE__ */ jsx293("div", {
         style: {
@@ -55240,8 +55372,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);
@@ -55255,10 +55393,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");
@@ -55266,9 +55404,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({
@@ -55284,6 +55423,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;
@@ -55463,6 +55635,7 @@ var TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset
     fromCanUpdate,
     frozenFrame,
     onMoveDragPointerDown,
+    onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined,
     children: [
       s.type === "audio" ? /* @__PURE__ */ jsx293(AudioWaveform, {
         src: s.src,
@@ -55542,6 +55715,7 @@ var TimelineTrackUnmemoized = ({ track }) => {
           }) : null,
           /* @__PURE__ */ jsx294(TimelineSequence, {
             s: track.sequence,
+            connectedCompositions: track.connectedCompositions ?? [],
             nodePathInfo: track.nodePathInfo,
             sequenceFrameOffset: track.sequenceFrameOffset
           })
@@ -55605,8 +55779,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] = useState102(false);
   const [isAddingAsset, setIsAddingAsset] = useState102(false);
   const { previewServerState } = useContext125(StudioServerConnectionCtx);
@@ -55668,6 +55842,7 @@ var TimelineContextMenuArea = ({ children }) => {
         files,
         compositionFile,
         compositionId: currentCompositionId,
+        destinationDimensions: null,
         dropPosition: null
       });
     } finally {
@@ -55712,11 +55887,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;
@@ -55864,7 +56039,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__ */ jsxs153(SplitterContainer, {
     orientation: "horizontal",
@@ -56480,7 +56655,7 @@ import { useCallback as useCallback177, useContext as useContext132, useMemo as
 
 // src/components/RenderModal/ResolveCompositionBeforeModal.tsx
 import React218, { useContext as useContext130, useEffect as useEffect99, useMemo as useMemo187 } from "react";
-import { Internals as Internals105 } from "remotion";
+import { Internals as Internals106 } from "remotion";
 import { jsx as jsx303, jsxs as jsxs157 } from "react/jsx-runtime";
 var loaderContainer2 = {
   paddingTop: 40,
@@ -56500,11 +56675,11 @@ var loaderLabel2 = {
 };
 var ResolvedCompositionContext = React218.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);
   useEffect99(() => {
-    const { current } = Internals105.resolveCompositionsRef;
+    const { current } = Internals106.resolveCompositionsRef;
     if (!current) {
       throw new Error("No ref to trigger composition calc");
     }
@@ -56964,7 +57139,7 @@ var DeleteFolder = ({ folderName, parentName, stack: stack2 }) => {
 
 // src/components/NewComposition/DuplicateComposition.tsx
 import { useCallback as useCallback180, useContext as useContext133, useMemo as useMemo191, useState as useState105 } from "react";
-import { Internals as Internals106 } from "remotion";
+import { Internals as Internals107 } from "remotion";
 
 // src/components/NewComposition/InputAndValidationContainer.tsx
 import { jsx as jsx308 } from "react/jsx-runtime";
@@ -57064,7 +57239,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
   const hadFpsDefined = unresolved.fps !== undefined;
   const hadDurationDefined = unresolved.durationInFrames !== undefined;
   const [selectedFrameRate, setFrameRate] = useState105(resolved.result.fps);
-  const { compositions } = useContext133(Internals106.CompositionManager);
+  const { compositions } = useContext133(Internals107.CompositionManager);
   const [type, setType] = useState105(initialCompType);
   const [newId, setName] = useState105(() => {
     const numberAtEnd = resolved.result.id.match(/([0-9]+)$/)?.[0];
@@ -57423,11 +57598,11 @@ var DuplicateComposition = ({ compositionId, compositionType }) => {
 
 // src/components/NewComposition/NewComposition.tsx
 import { useCallback as useCallback182, useContext as useContext135, useState as useState106 } 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("");
@@ -57471,7 +57646,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);
@@ -57557,8 +57732,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] = useState106(() => getUniqueCompositionName(compositions));
@@ -57856,17 +58031,17 @@ import {
   useRef as useRef72,
   useState as useState107
 } 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;
@@ -57900,7 +58075,7 @@ var getUniqueFolderName = ({
   }
 };
 var NewFolder = ({ parentName, stack: stack2 }) => {
-  const { folders } = useContext136(Internals110.CompositionManager);
+  const { folders } = useContext136(Internals111.CompositionManager);
   const [newName, setName] = useState107(() => getUniqueFolderName({ folders, parentName }));
   const inputRef = useRef72(null);
   useEffect101(() => {
@@ -58028,7 +58203,7 @@ import {
   useRef as useRef73,
   useState as useState108
 } from "react";
-import { Internals as Internals111 } from "remotion";
+import { Internals as Internals112 } from "remotion";
 import { jsx as jsx313, jsxs as jsxs166, Fragment as Fragment57 } from "react/jsx-runtime";
 var content12 = {
   padding: 12,
@@ -58044,7 +58219,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] = useState108(() => {
     return resolved.result.id;
   });
@@ -58162,7 +58337,7 @@ import {
   useRef as useRef74,
   useState as useState109
 } from "react";
-import { Internals as Internals112 } from "remotion";
+import { Internals as Internals113 } from "remotion";
 
 // src/helpers/validate-folder-rename.ts
 var validateFolderRename = ({
@@ -58187,7 +58362,7 @@ var content13 = {
   minWidth: 500
 };
 var RenameFolder = ({ folderName, parentName, stack: stack2 }) => {
-  const { folders } = useContext138(Internals112.CompositionManager);
+  const { folders } = useContext138(Internals113.CompositionManager);
   const [newName, setName] = useState109(folderName);
   const inputRef = useRef74(null);
   useEffect103(() => {
@@ -58439,7 +58614,7 @@ var RenameStaticFileModal = ({ relativePath }) => {
 
 // src/components/OverrideInputProps.tsx
 import { useCallback as useCallback187, useContext as useContext140, useMemo as useMemo196, useState as useState111 } from "react";
-import { Internals as Internals113 } from "remotion";
+import { Internals as Internals114 } from "remotion";
 import { jsx as jsx316, jsxs as jsxs169 } from "react/jsx-runtime";
 var style10 = {
   padding: 12,
@@ -58475,7 +58650,7 @@ var isValidJSON = (value) => {
 };
 var Inner = () => {
   const [value, setValue] = useState111(() => {
-    const override = Internals113.getInputPropsOverride();
+    const override = Internals114.getInputPropsOverride();
     if (override) {
       return JSON.stringify(override, null, 2);
     }
@@ -58490,14 +58665,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("");
@@ -58568,7 +58743,7 @@ import {
   useRef as useRef77,
   useState as useState113
 } from "react";
-import { Internals as Internals114 } from "remotion";
+import { Internals as Internals115 } from "remotion";
 
 // src/icons/keys.tsx
 import { jsx as jsx317 } from "react/jsx-runtime";
@@ -59921,7 +60096,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] = useState113(() => {
     return {
       query: mapModeToQuery(initialMode),
@@ -59969,7 +60144,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" });
           });
@@ -67831,7 +68006,7 @@ var Modals = ({ readOnlyStudio }) => {
 
 // src/components/SequencePropsSubscriptionProvider.tsx
 import { useState as useState126, useCallback as useCallback216, useMemo as useMemo218 } from "react";
-import { Internals as Internals115 } from "remotion";
+import { Internals as Internals116 } from "remotion";
 import { jsx as jsx373 } from "react/jsx-runtime";
 var SequencePropsSubscriptionProvider = ({ children }) => {
   const [overrideToNodePathMap, setOverrideIdToNodePathMap] = useState126({});
@@ -67850,9 +68025,9 @@ var SequencePropsSubscriptionProvider = ({ children }) => {
   const setters = useMemo218(() => {
     return { setOverrideIdToNodePath };
   }, [setOverrideIdToNodePath]);
-  return /* @__PURE__ */ jsx373(Internals115.OverrideIdsToNodePathsGettersContext.Provider, {
+  return /* @__PURE__ */ jsx373(Internals116.OverrideIdsToNodePathsGettersContext.Provider, {
     value: getters,
-    children: /* @__PURE__ */ jsx373(Internals115.OverrideIdsToNodePathsSettersContext.Provider, {
+    children: /* @__PURE__ */ jsx373(Internals116.OverrideIdsToNodePathsSettersContext.Provider, {
       value: setters,
       children
     })
@@ -67951,7 +68126,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
     children: /* @__PURE__ */ jsx375(TimelineZoomContext, {
       children: /* @__PURE__ */ jsxs207(SequencePropsSubscriptionProvider, {
         children: [
-          /* @__PURE__ */ jsxs207(Internals116.CurrentScaleContext.Provider, {
+          /* @__PURE__ */ jsxs207(Internals117.CurrentScaleContext.Provider, {
             value,
             children: [
               /* @__PURE__ */ jsx375(ForceSpecificCursor, {}),
@@ -67959,11 +68134,11 @@ var Editor = ({ Root, readOnlyStudio }) => {
                 children: /* @__PURE__ */ jsxs207("div", {
                   style: background,
                   children: [
-                    /* @__PURE__ */ jsx375(Internals116.CompositionRenderErrorContext.Provider, {
+                    /* @__PURE__ */ jsx375(Internals117.CompositionRenderErrorContext.Provider, {
                       value: compositionRenderErrorContextValue,
                       children: canvasMounted ? /* @__PURE__ */ jsx375(MemoRoot, {}) : null
                     }),
-                    /* @__PURE__ */ jsx375(Internals116.CanUseRemotionHooksProvider, {
+                    /* @__PURE__ */ jsx375(Internals117.CanUseRemotionHooksProvider, {
                       children: /* @__PURE__ */ jsx375(RenderErrorContext.Provider, {
                         value: renderErrorContextValue,
                         children: /* @__PURE__ */ jsx375(EditorContent, {
@@ -68001,7 +68176,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 useState128 } from "react";
-import { Internals as Internals117 } from "remotion";
+import { Internals as Internals118 } from "remotion";
 import { jsx as jsx376 } from "react/jsx-runtime";
 var key7 = "remotion.previewSize";
 var persistPreviewSizeOption = (option) => {
@@ -68050,7 +68225,7 @@ var PreviewSizeProvider = ({ children }) => {
       setTranslation
     };
   }, [editorZoomGestures, size3, setSize, translation]);
-  return /* @__PURE__ */ jsx376(Internals117.PreviewSizeContext.Provider, {
+  return /* @__PURE__ */ jsx376(Internals118.PreviewSizeContext.Provider, {
     value: previewSizeCtx,
     children
   });
@@ -68082,7 +68257,7 @@ var CheckerboardProvider = ({ children }) => {
 
 // src/components/MediaVolumeProvider.tsx
 import { useMemo as useMemo223, useState as useState130 } from "react";
-import { Internals as Internals118 } from "remotion";
+import { Internals as Internals119 } from "remotion";
 import { jsx as jsx378 } from "react/jsx-runtime";
 var MediaVolumeProvider = ({ children }) => {
   const [playerMuted, setPlayerMuted] = useState130(() => loadMuteOption());
@@ -68099,9 +68274,9 @@ var MediaVolumeProvider = ({ children }) => {
       setMediaVolume
     };
   }, []);
-  return /* @__PURE__ */ jsx378(Internals118.MediaVolumeContext.Provider, {
+  return /* @__PURE__ */ jsx378(Internals119.MediaVolumeContext.Provider, {
     value: mediaVolumeContextValue,
-    children: /* @__PURE__ */ jsx378(Internals118.SetMediaVolumeContext.Provider, {
+    children: /* @__PURE__ */ jsx378(Internals119.SetMediaVolumeContext.Provider, {
       value: setMediaVolumeContextValue,
       children
     })
@@ -68476,7 +68651,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;
@@ -68487,12 +68662,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;
   }
@@ -68631,7 +68804,7 @@ var injectCSS = () => {
   if (injected) {
     return;
   }
-  Internals119.CSSUtils.injectCSS(makeDefaultGlobalCSS());
+  Internals120.CSSUtils.injectCSS(makeDefaultGlobalCSS());
   injected = true;
 };
 
@@ -68644,19 +68817,19 @@ import {
   useMemo as useMemo232,
   useState as useState139
 } from "react";
-import { getInputProps as getInputProps2, Internals as Internals120 } from "remotion";
+import { getInputProps as getInputProps2, Internals as Internals121 } from "remotion";
 import { jsx as jsx389 } from "react/jsx-runtime";
 var ResolveCompositionConfigInStudio = ({ children }) => {
   const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState139(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]);
@@ -68683,7 +68856,7 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
       return controller;
     }
     const { signal } = controller;
-    const result = Internals120.resolveVideoConfigWithMetadataOrCatch({
+    const result = Internals121.resolveVideoConfigWithMetadataOrCatch({
       compositionId,
       calculateMetadata,
       inputProps: combinedProps,
@@ -68777,7 +68950,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,
@@ -68802,7 +68975,7 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
     }));
     return resolved.videoConfig;
   }, [allEditorProps, compositions, inputProps]);
-  useImperativeHandle14(Internals120.resolveCompositionsRef, () => {
+  useImperativeHandle14(Internals121.resolveCompositionsRef, () => {
     return {
       setCurrentRenderModalComposition: (id) => {
         setCurrentRenderModalComposition(id);
@@ -68944,7 +69117,7 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
       }, {})
     };
   }, [compositions, resolvedConfigs]);
-  return /* @__PURE__ */ jsx389(Internals120.ResolveCompositionContext.Provider, {
+  return /* @__PURE__ */ jsx389(Internals121.ResolveCompositionContext.Provider, {
     value: resolvedConfigsIncludingStaticOnes,
     children
   });
@@ -68956,12 +69129,12 @@ var getServerDisconnectedDomElement = () => {
   return document.getElementById("server-disconnected-overlay");
 };
 var StudioInner = ({ rootComponent, readOnly }) => {
-  return /* @__PURE__ */ jsx390(Internals121.CompositionManagerProvider, {
+  return /* @__PURE__ */ jsx390(Internals122.CompositionManagerProvider, {
     onlyRenderComposition: null,
     currentCompositionMetadata: null,
     initialCompositions: [],
     initialCanvasContent: null,
-    children: /* @__PURE__ */ jsx390(Internals121.RemotionRootContexts, {
+    children: /* @__PURE__ */ jsx390(Internals122.RemotionRootContexts, {
       frameState: null,
       audioEnabled: window.remotion_audioEnabled,
       videoEnabled: window.remotion_videoEnabled,