@remotion/studio 4.0.523 → 4.0.524

package/dist/esm/{index-6cvm9a65.mjs → index-c37kme2v.mjs}

@@ -58,7 +58,7 @@ import {
   useZodTypesIfPossible,
   watchPublicFolder,
   zodSafeParse
-} from "./index-hy4xcgty.mjs";
+} from "./index-9qtvmwtx.mjs";
 import {
   BROWSER_STUDIO_OPERATIONS_READY_EVENT,
   canUseEffectOperations,
@@ -94,7 +94,7 @@ import {
   startCapturedPointerSession,
   useKeybinding,
   useZIndex
-} from "./index-xhe2m2qr.mjs";
+} from "./index-yfrysr5f.mjs";
 import {
   getStudioKeyboardShortcutsEnabled
 } from "./index-5zrb1ft4.mjs";
@@ -158,10 +158,11 @@ import {
   WHITE_ALPHA_50,
   WHITE_ALPHA_72,
   WHITE_ALPHA_80,
+  WHITE_ALPHA_90,
   WHITE_FULL_HEX,
   WHITE_HEX,
   getBackgroundFromHoverState
-} from "./index-jg13hf2g.mjs";
+} from "./index-k426ye99.mjs";
 import {
   __require,
   __toESM
@@ -2362,17 +2363,17 @@ var Checkbox = ({ checked, onChange, disabled, inputId, name, variant = "default
 
 // src/components/OptionsPanel.tsx
 import {
-  useCallback as useCallback131,
+  useCallback as useCallback132,
   useContext as useContext82,
   useImperativeHandle as useImperativeHandle5,
   useMemo as useMemo126,
-  useState as useState72
+  useState as useState73
 } from "react";
-import { Internals as Internals61 } from "remotion";
+import { Internals as Internals62 } from "remotion";
 
 // src/components/InspectorPanel.tsx
 import { useContext as useContext70, useMemo as useMemo112 } from "react";
-import { Internals as Internals57 } from "remotion";
+import { Internals as Internals58 } from "remotion";
 
 // src/components/CurrentAsset.tsx
 import { formatBytes } from "@remotion/studio-shared";
@@ -10548,7 +10549,7 @@ var loadCompositionComponentInfo = async ({
       if (files === null) {
         throw new Error(`Could not find source map contents for ${compositionFile}`);
       }
-      const { resolveCompositionComponentLocation } = await import("./resolve-composition-component-location-14148845.mjs");
+      const { resolveCompositionComponentLocation } = await import("./resolve-composition-component-location-bt2d6qxq.mjs");
       return {
         canAddSequence: false,
         location: resolveCompositionComponentLocation({
@@ -11105,7 +11106,7 @@ import {
   useEffect as useEffect28,
   useMemo as useMemo59
 } from "react";
-import { Internals as Internals8 } from "remotion";
+import { Internals as Internals9 } from "remotion";
 
 // src/helpers/get-git-menu-item.ts
 var getGitSourceName = (gitSource) => {
@@ -11232,11 +11233,17 @@ var resolvedStackToSymbolicated = (location) => {
 // src/helpers/use-rename-composition.ts
 import { useCallback as useCallback48, useMemo as useMemo53 } from "react";
 
-// src/helpers/validate-new-comp-data.ts
+// src/helpers/slugify-name.ts
 import { Internals as Internals6 } from "remotion";
+var slugifyName = (name) => {
+  return Internals6.isFolderNameValid(name) ? name : name.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-zA-Z0-9\u4E00-\u9FFF-]+/g, "-").replace(/^-+|-+$/g, "");
+};
+
+// src/helpers/validate-new-comp-data.ts
+import { Internals as Internals7 } from "remotion";
 var validateCompositionName = (compName, compositions) => {
-  if (!Internals6.isCompositionIdValid(compName)) {
-    return Internals6.invalidCompositionErrorMessage;
+  if (!Internals7.isCompositionIdValid(compName)) {
+    return Internals7.invalidCompositionErrorMessage;
   }
   if (compositions.find((c) => c.id === compName)) {
     return `A composition with that name already exists.`;
@@ -11275,25 +11282,27 @@ var useRenameComposition = ({
   newId
 }) => {
   const getValidationMessage = useCallback48((value) => {
-    if (value === currentId) {
+    const slug = slugifyName(value);
+    if (slug === currentId) {
       return null;
     }
-    return validateCompositionName(value, compositions);
+    return slug ? validateCompositionName(slug, compositions) : "Enter an ID containing letters or numbers.";
   }, [compositions, currentId]);
   const getCodemod = useCallback48((value) => {
     return {
       type: "rename-composition",
       idToRename: currentId,
-      newId: value
+      newId: slugifyName(value)
     };
   }, [currentId]);
+  const compositionId = slugifyName(newId);
   const validationMessage = useMemo53(() => {
     return getValidationMessage(newId);
   }, [getValidationMessage, newId]);
   const codemod = useMemo53(() => {
     return getCodemod(newId);
   }, [getCodemod, newId]);
-  const valid = validationMessage === null && currentId !== newId;
+  const valid = validationMessage === null && currentId !== compositionId;
   const renameComposition = useCallback48(async ({
     newCompositionId,
     signal,
@@ -11306,12 +11315,13 @@ var useRenameComposition = ({
       symbolicatedStack
     });
     if (result.success) {
-      pushUrl(`/${newCompositionId}`);
+      pushUrl(`/${slugifyName(newCompositionId)}`);
     }
     return result;
   }, [getCodemod]);
   return {
     codemod,
+    compositionId,
     getValidationMessage,
     renameComposition,
     valid,
@@ -11321,7 +11331,7 @@ var useRenameComposition = ({
 
 // src/components/Timeline/use-resolved-stack.ts
 import { useContext as useContext19, useEffect as useEffect26, useState as useState32 } from "react";
-import { Internals as Internals7 } from "remotion";
+import { Internals as Internals8 } from "remotion";
 var resolvedCache = new Map;
 var hasResolvedStack = (stack) => {
   if (!stack) {
@@ -11332,7 +11342,7 @@ var hasResolvedStack = (stack) => {
 var inFlight = new Set;
 var subscribers = new Map;
 var useResolvedStack = (stack) => {
-  const updateResolvedStackTrace = useContext19(Internals7.SequenceStackTracesUpdateContext);
+  const updateResolvedStackTrace = useContext19(Internals8.SequenceStackTracesUpdateContext);
   const [value, setValue] = useState32(() => {
     if (!stack) {
       return null;
@@ -12466,8 +12476,8 @@ var renderReactIcon = (color) => {
   });
 };
 var CompositionInspectorHeader = () => {
-  const video = Internals8.useVideo();
-  const { compositions } = useContext22(Internals8.CompositionManager);
+  const video = Internals9.useVideo();
+  const { compositions } = useContext22(Internals9.CompositionManager);
   const { previewServerState } = useContext22(StudioServerConnectionCtx);
   const { canOpenInEditor: canOpenInEditor2, defaultEditorId } = useEditorOpening(previewServerState.type === "connected");
   const canOpenInGitHub = hasReadOnlyGitSource();
@@ -12574,7 +12584,7 @@ var CompositionInspectorHeader = () => {
 
 // src/components/InspectorPanel/CompositionMetadata.tsx
 import { useCallback as useCallback58, useEffect as useEffect29, useMemo as useMemo61, useRef as useRef20, useState as useState38 } from "react";
-import { Internals as Internals9 } from "remotion";
+import { Internals as Internals10 } from "remotion";
 
 // src/components/InlineDropdown.tsx
 import { PlayerInternals as PlayerInternals6 } from "@remotion/player";
@@ -12929,8 +12939,8 @@ var CompositionMetadataValue = ({ computed, disabled, field, onSave, pendingValu
   });
 };
 var CompositionMetadata = ({ compositionId, disabled, stack }) => {
-  const video = Internals9.useVideo();
-  const resolvedVideoConfig = Internals9.useResolvedVideoConfig(compositionId);
+  const video = Internals10.useVideo();
+  const resolvedVideoConfig = Internals10.useResolvedVideoConfig(compositionId);
   const resolvedConfig = resolvedVideoConfig?.type === "success" || resolvedVideoConfig?.type === "success-and-refreshing" ? resolvedVideoConfig.result : null;
   const resolvedConfigRef = useRef20(resolvedConfig);
   resolvedConfigRef.current = resolvedConfig;
@@ -13317,7 +13327,7 @@ var ElementLibraryButton = () => {
 
 // src/components/InspectorPanel/use-composition-actions.ts
 import { useCallback as useCallback60, useContext as useContext24, useMemo as useMemo63, useState as useState39 } from "react";
-import { Internals as Internals11 } from "remotion";
+import { Internals as Internals12 } from "remotion";
 
 // src/components/import-assets.ts
 import {
@@ -13325,7 +13335,7 @@ import {
   getRequiredPackageForInsertableElement,
   isUrl
 } from "@remotion/studio-shared";
-import { Internals as Internals10, staticFile as staticFile3 } from "remotion";
+import { Internals as Internals11, staticFile as staticFile3 } from "remotion";
 import { NoReactInternals as NoReactInternals8 } from "remotion/no-react";
 
 // src/helpers/clipboard-figma.ts
@@ -13715,7 +13725,7 @@ var getMediaAssetMetadata = async (src) => {
   };
 };
 var getAnimatedImageAssetDuration = (src, contentType) => {
-  return Internals10.getAnimatedImageDurationInSeconds({
+  return Internals11.getAnimatedImageDurationInSeconds({
     resolvedSrc: src,
     signal: new AbortController().signal,
     contentType
@@ -14282,7 +14292,7 @@ var insertComposition = async ({
     return;
   }
   try {
-    const resolver = Internals10.resolveCompositionsRef.current;
+    const resolver = Internals11.resolveCompositionsRef.current;
     if (!resolver) {
       throw new Error("No composition resolver available");
     }
@@ -14360,8 +14370,8 @@ var insertElement = async ({
 
 // src/components/InspectorPanel/use-composition-actions.ts
 var useCompositionActions = () => {
-  const { compositions, canvasContent } = useContext24(Internals11.CompositionManager);
-  const videoConfig = Internals11.useUnsafeVideoConfig();
+  const { compositions, canvasContent } = useContext24(Internals12.CompositionManager);
+  const videoConfig = Internals12.useUnsafeVideoConfig();
   const [isAddingSolid, setIsAddingSolid] = useState39(false);
   const [isAddingAsset, setIsAddingAsset] = useState39(false);
   const [isAddingComposition, setIsAddingComposition] = useState39(false);
@@ -14869,7 +14879,7 @@ import {
   useState as useState43
 } from "react";
 import {
-  Internals as Internals28
+  Internals as Internals29
 } from "remotion";
 
 // src/helpers/timeline-node-path-key.ts
@@ -15042,7 +15052,7 @@ var ExpandedTracksProvider = ({ children }) => {
 
 // src/components/Timeline/get-node-keyframes.ts
 import {
-  Internals as Internals12
+  Internals as Internals13
 } from "remotion";
 
 // src/components/Timeline/get-timeline-keyframes.ts
@@ -15114,14 +15124,14 @@ var getNodeKeyframes = ({
   if (node.field.kind === "sequence-field") {
     const dragOverrides = getDragOverrides(nodePath);
     return withDragOverrideKeyframe({
-      propStatus: Internals12.getPropStatusesCtx(propStatuses, nodePath)?.[node.field.key],
+      propStatus: Internals13.getPropStatusesCtx(propStatuses, nodePath)?.[node.field.key],
       keyframeDisplayOffset,
       timelinePosition,
       dragOverrideValue: dragOverrides[node.field.key],
       hasDragOverride: hasOverride(dragOverrides, node.field.key)
     });
   }
-  const effectStatus = Internals12.getEffectPropStatusesCtx({
+  const effectStatus = Internals13.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex: node.field.effectIndex
@@ -15150,13 +15160,13 @@ var getNodeHasKeyframes = ({
     if (dragOverrides[node.field.key]?.type === "keyframed") {
       return true;
     }
-    return Internals12.getPropStatusesCtx(propStatuses, nodePath)?.[node.field.key]?.status === "keyframed";
+    return Internals13.getPropStatusesCtx(propStatuses, nodePath)?.[node.field.key]?.status === "keyframed";
   }
   const effectDragOverrides = getEffectDragOverrides(nodePath, node.field.effectIndex);
   if (effectDragOverrides[node.field.key]?.type === "keyframed") {
     return true;
   }
-  const effectStatus = Internals12.getEffectPropStatusesCtx({
+  const effectStatus = Internals13.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex: node.field.effectIndex
@@ -15289,7 +15299,7 @@ import {
   useLayoutEffect,
   useRef as useRef21
 } from "react";
-import { Internals as Internals15, useVideoConfig } from "remotion";
+import { Internals as Internals16, useVideoConfig } from "remotion";
 
 // src/helpers/get-left-of-timeline-slider.ts
 var getXPositionOfItemInTimelineImperatively = (frame, duration, width) => {
@@ -15303,7 +15313,7 @@ import { flushSync } from "react-dom";
 
 // src/components/ZoomPersistor.tsx
 import { useContext as useContext26, useEffect as useEffect31 } from "react";
-import { Internals as Internals13 } from "remotion";
+import { Internals as Internals14 } from "remotion";
 
 // src/components/load-canvas-content-from-url.ts
 var deriveCanvasContentFromRoute = (route) => {
@@ -15348,9 +15358,9 @@ var getZoomFromLocalStorage = () => {
   return zoom ? JSON.parse(zoom) : {};
 };
 var ZoomPersistor = () => {
-  const playing = Internals13.usePlaying();
+  const playing = Internals14.usePlaying();
   const { zoom } = useContext26(TimelineZoomCtx);
-  const { canvasContent } = useContext26(Internals13.CompositionManager);
+  const { canvasContent } = useContext26(Internals14.CompositionManager);
   const urlState = deriveCanvasContentFromUrl();
   const isActive = urlState && canvasContent && (urlState.type === "composition" && canvasContent.type === "composition" && urlState.compositionId === canvasContent.compositionId || urlState.type === "asset" && canvasContent.type === "asset" && urlState.asset === canvasContent.asset);
   useEffect31(() => {
@@ -15435,7 +15445,7 @@ var TimelineSliderHandle = () => {
 // src/components/Timeline/TimelineWidthProvider.tsx
 import { PlayerInternals as PlayerInternals7 } from "@remotion/player";
 import { createContext as createContext12, useContext as useContext27, useMemo as useMemo67 } from "react";
-import { Internals as Internals14 } from "remotion";
+import { Internals as Internals15 } from "remotion";
 import { jsx as jsx115 } from "react/jsx-runtime";
 var TimelineWidthContext = createContext12(null);
 var TimelineWidthProvider = ({ children }) => {
@@ -15444,7 +15454,7 @@ var TimelineWidthProvider = ({ children }) => {
     shouldApplyCssTransforms: true
   });
   const { zoom: zoomMap } = useContext27(TimelineZoomCtx);
-  const videoConfig = Internals14.useUnsafeVideoConfig();
+  const videoConfig = Internals15.useUnsafeVideoConfig();
   const width = useMemo67(() => {
     const scrollableWidth = size?.width ?? scrollableRef.current?.clientWidth;
     if (scrollableWidth === undefined) {
@@ -15500,7 +15510,7 @@ var getTimelineSliderTransform = ({
 };
 var redrawTimelineSliderFast = createRef3();
 var TimelineSlider = () => {
-  const videoConfig = Internals15.useUnsafeVideoConfig();
+  const videoConfig = Internals16.useUnsafeVideoConfig();
   const timelineWidth = useContext28(TimelineWidthContext);
   if (videoConfig === null || timelineWidth === null) {
     return null;
@@ -15509,7 +15519,7 @@ var TimelineSlider = () => {
 };
 var TimelineSliderInner = () => {
   const videoConfig = useVideoConfig();
-  const timelinePosition = Internals15.Timeline.useTimelinePosition();
+  const timelinePosition = Internals16.Timeline.useTimelinePosition();
   const ref2 = useRef21(null);
   const timelineWidth = useContext28(TimelineWidthContext);
   const { zoom: zoomMap } = useContext28(TimelineZoomCtx);
@@ -15959,7 +15969,7 @@ import {
 } from "@remotion/studio-shared";
 import { useContext as useContext29, useEffect as useEffect32 } from "react";
 import {
-  Internals as Internals22
+  Internals as Internals23
 } from "remotion";
 
 // src/helpers/clipboard-images.ts
@@ -16116,10 +16126,10 @@ var applyEffectResponseToPropStatuses = ({
 };
 
 // src/components/Timeline/save-prop-queue.ts
-import { Internals as Internals16 } from "remotion";
+import { Internals as Internals17 } from "remotion";
 var queues = new Map;
 var getQueue = (nodePath) => {
-  const key = Internals16.makeSequencePropsSubscriptionKey(nodePath);
+  const key = Internals17.makeSequencePropsSubscriptionKey(nodePath);
   let q = queues.get(key);
   if (!q) {
     q = { chain: Promise.resolve(), cancelled: false };
@@ -16128,7 +16138,7 @@ var getQueue = (nodePath) => {
   return q;
 };
 var dropQueue = (nodePath, q) => {
-  const key = Internals16.makeSequencePropsSubscriptionKey(nodePath);
+  const key = Internals17.makeSequencePropsSubscriptionKey(nodePath);
   if (queues.get(key) === q) {
     queues.delete(key);
   }
@@ -16622,7 +16632,7 @@ var callBatchUpdateKeyframeSettings = ({
 };
 
 // src/components/Timeline/delete-selected-timeline-item.ts
-import { Internals as Internals19 } from "remotion";
+import { Internals as Internals20 } from "remotion";
 
 // src/components/delete-jsx-node-api.ts
 var deleteJsxNode = (request) => {
@@ -16631,7 +16641,7 @@ var deleteJsxNode = (request) => {
 };
 
 // src/components/Timeline/delete-selected-keyframe.ts
-import { Internals as Internals17 } from "remotion";
+import { Internals as Internals18 } from "remotion";
 
 // src/components/Timeline/find-track-for-node-path-info.ts
 import { stringifySequenceExpandedRowKey as stringifySequenceExpandedRowKey3 } from "@remotion/studio-shared";
@@ -16657,7 +16667,7 @@ var getValueWhenLastKeyframeDeleted = ({
   if (propStatus?.status !== "keyframed") {
     return null;
   }
-  return Internals17.interpolateKeyframedStatus({
+  return Internals18.interpolateKeyframedStatus({
     forceSpringAllowTail: null,
     frame: playheadSourceFrame,
     status: propStatus
@@ -16691,7 +16701,7 @@ var getSelectedKeyframeDeletion = ({
     if (!effect) {
       return null;
     }
-    const effectStatus = Internals17.getEffectPropStatusesCtx({
+    const effectStatus = Internals18.getEffectPropStatusesCtx({
       propStatuses,
       nodePath,
       effectIndex: field.effectIndex
@@ -16718,7 +16728,7 @@ var getSelectedKeyframeDeletion = ({
       valueWhenLastKeyframeDeleted: effectValueWhenLastKeyframeDeleted
     };
   }
-  const sequencePropStatus = Internals17.getPropStatusesCtx(propStatuses, nodePath)?.[field.fieldKey];
+  const sequencePropStatus = Internals18.getPropStatusesCtx(propStatuses, nodePath)?.[field.fieldKey];
   const keyframeDisplayOffset = getKeyframeDisplayOffset({
     propStatus: sequencePropStatus,
     keyframeDisplayOffset: track?.keyframeDisplayOffset ?? 0
@@ -16808,7 +16818,7 @@ import {
   LINEAR_KEYFRAME_EASING
 } from "@remotion/studio-shared";
 import { canEditEasingForInterpolationFunction as canEditEasingForInterpolationFunction2 } from "@remotion/studio-shared";
-import { Internals as Internals18 } from "remotion";
+import { Internals as Internals19 } from "remotion";
 var isEasingSelection = (selection) => selection.type === "easing";
 var getSelectedEasingUpdate = ({
   selection,
@@ -16835,7 +16845,7 @@ var getSelectedEasingUpdate = ({
     if (!sequence.controls) {
       return null;
     }
-    const sequencePropStatus = Internals18.getPropStatusesCtx(propStatuses, nodePath)?.[field.fieldKey];
+    const sequencePropStatus = Internals19.getPropStatusesCtx(propStatuses, nodePath)?.[field.fieldKey];
     if (sequencePropStatus?.status !== "keyframed" || isSchemaFieldHoldOnly({
       schema: sequence.controls.schema,
       key: field.fieldKey
@@ -16857,7 +16867,7 @@ var getSelectedEasingUpdate = ({
   if (!effect) {
     return null;
   }
-  const effectStatus = Internals18.getEffectPropStatusesCtx({
+  const effectStatus = Internals19.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex: field.effectIndex
@@ -17100,7 +17110,7 @@ var getEasingSelectionAfterDeletingKeyframes = ({
   }
   const nodePath = selection.nodePathInfo.sequenceSubscriptionKey;
   if (field.type === "sequence") {
-    const sequencePropStatus = Internals19.getPropStatusesCtx(propStatuses, nodePath)?.[field.fieldKey];
+    const sequencePropStatus = Internals20.getPropStatusesCtx(propStatuses, nodePath)?.[field.fieldKey];
     if (sequencePropStatus?.status !== "keyframed" || !canEditEasingForInterpolationFunction2(sequencePropStatus.interpolationFunction)) {
       return null;
     }
@@ -17117,7 +17127,7 @@ var getEasingSelectionAfterDeletingKeyframes = ({
       timelinePosition
     });
   }
-  const effectStatus = Internals19.getEffectPropStatusesCtx({
+  const effectStatus = Internals20.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex: field.effectIndex
@@ -17303,13 +17313,13 @@ import {
   LINEAR_KEYFRAME_EASING as LINEAR_KEYFRAME_EASING2
 } from "@remotion/studio-shared";
 import {
-  Internals as Internals20
+  Internals as Internals21
 } from "remotion";
 var getKeyframeClipboardFieldType = ({
   schema,
   fieldKey
 }) => {
-  const field = Internals20.getFlatSchemaWithAllKeys(schema)[fieldKey];
+  const field = Internals21.getFlatSchemaWithAllKeys(schema)[fieldKey];
   if (!field) {
     return null;
   }
@@ -17357,7 +17367,7 @@ var resolveKeyframeField = ({
     if (!track.sequence.controls) {
       return null;
     }
-    const sequencePropStatus = Internals20.getPropStatusesCtx(propStatuses, nodePath)?.[identity.fieldKey];
+    const sequencePropStatus = Internals21.getPropStatusesCtx(propStatuses, nodePath)?.[identity.fieldKey];
     if (!sequencePropStatus || sequencePropStatus.status === "computed") {
       return null;
     }
@@ -17379,7 +17389,7 @@ var resolveKeyframeField = ({
     };
   }
   const effect = track.sequence.effects[identity.effectIndex];
-  const effectStatus = Internals20.getEffectPropStatusesCtx({
+  const effectStatus = Internals21.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex: identity.effectIndex
@@ -17405,7 +17415,7 @@ var resolveKeyframeField = ({
   };
 };
 var areResolvedFieldsEqual = (first, second) => {
-  if (Internals20.makeSequencePropsSubscriptionKey(first.nodePath) !== Internals20.makeSequencePropsSubscriptionKey(second.nodePath)) {
+  if (Internals21.makeSequencePropsSubscriptionKey(first.nodePath) !== Internals21.makeSequencePropsSubscriptionKey(second.nodePath)) {
     return false;
   }
   if (first.identity.type !== second.identity.type) {
@@ -18078,7 +18088,7 @@ import {
   isKeyframeInterpolationFunction
 } from "@remotion/studio-shared";
 import {
-  Internals as Internals21
+  Internals as Internals22
 } from "remotion";
 var propStatusToClipboardParam = (prop) => {
   if (prop.status === "computed") {
@@ -18120,11 +18130,11 @@ var getSequencePropClipboardDataFromSelection = ({
   if (!track?.sequence.controls) {
     return null;
   }
-  const field = Internals21.getFlatSchemaWithAllKeys(track.sequence.controls.schema)[selection.key];
+  const field = Internals22.getFlatSchemaWithAllKeys(track.sequence.controls.schema)[selection.key];
   if (!field || !isKeyframeClipboardFieldType2(field.type)) {
     return null;
   }
-  const propStatus = Internals21.getPropStatusesCtx(propStatuses, track.nodePathInfo?.sequenceSubscriptionKey ?? selection.nodePathInfo.sequenceSubscriptionKey)?.[selection.key];
+  const propStatus = Internals22.getPropStatusesCtx(propStatuses, track.nodePathInfo?.sequenceSubscriptionKey ?? selection.nodePathInfo.sequenceSubscriptionKey)?.[selection.key];
   if (!propStatus) {
     return null;
   }
@@ -18164,12 +18174,12 @@ var getPasteTargetForSelection = ({
     return { type: "uncopyable" };
   }
   const { schema } = track.sequence.controls;
-  const field = Internals21.getFlatSchemaWithAllKeys(schema)[fieldKey];
+  const field = Internals22.getFlatSchemaWithAllKeys(schema)[fieldKey];
   if (!field || field.type !== payload.fieldType) {
     return { type: "incompatible" };
   }
   const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
-  const propStatus = Internals21.getPropStatusesCtx(propStatuses, nodePath)?.[fieldKey];
+  const propStatus = Internals22.getPropStatusesCtx(propStatuses, nodePath)?.[fieldKey];
   if (!propStatus || propStatus.status === "computed") {
     return { type: "uncopyable" };
   }
@@ -18216,7 +18226,7 @@ var getPasteSequencePropTarget = ({
     type: "valid",
     targets: [
       ...new Map(targets.map((target) => [
-        Internals21.makeSequencePropsSubscriptionKey(target.nodePath),
+        Internals22.makeSequencePropsSubscriptionKey(target.nodePath),
         target
       ])).values()
     ]
@@ -18299,7 +18309,7 @@ var getSnapshotsFromSelection = ({
     return null;
   }
   const { sequenceSubscriptionKey } = selection.nodePathInfo;
-  const sequenceStatus = propStatuses[Internals22.makeSequencePropsSubscriptionKey(sequenceSubscriptionKey)];
+  const sequenceStatus = propStatuses[Internals23.makeSequencePropsSubscriptionKey(sequenceSubscriptionKey)];
   if (!sequenceStatus || !sequenceStatus.canUpdate) {
     return null;
   }
@@ -18404,7 +18414,7 @@ var getEffectPropClipboardDataFromSelection = ({
   if (selection.type !== "sequence-effect-prop") {
     return null;
   }
-  const sequenceStatus = propStatuses[Internals22.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
+  const sequenceStatus = propStatuses[Internals23.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
   if (!sequenceStatus || !sequenceStatus.canUpdate) {
     return null;
   }
@@ -18491,7 +18501,7 @@ var getPasteEffectPropTargetForSelection = ({
   if (!effect || !isVisibleFieldSchema(fieldSchema)) {
     return { type: "prop-mismatch" };
   }
-  const sequenceStatus = propStatuses[Internals22.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
+  const sequenceStatus = propStatuses[Internals23.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
   if (!sequenceStatus?.canUpdate) {
     return { type: "uncopyable" };
   }
@@ -18557,10 +18567,10 @@ var TimelineClipboardKeybindings = () => {
   const { previewServerState } = useContext29(StudioServerConnectionCtx);
   const { canSelect } = useTimelineSelection();
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
-  const propStatusesRef = useContext29(Internals22.VisualModePropStatusesRefContext);
-  const { setPropStatuses } = useContext29(Internals22.VisualModeSettersContext);
-  const sequencesRef = useContext29(Internals22.SequenceManagerRefContext);
-  const { overrideIdToNodePathMappings } = useContext29(Internals22.OverrideIdsToNodePathsGettersContext);
+  const propStatusesRef = useContext29(Internals23.VisualModePropStatusesRefContext);
+  const { setPropStatuses } = useContext29(Internals23.VisualModeSettersContext);
+  const sequencesRef = useContext29(Internals23.SequenceManagerRefContext);
+  const { overrideIdToNodePathMappings } = useContext29(Internals23.OverrideIdsToNodePathsGettersContext);
   const confirm = useConfirmationDialog();
   useEffect32(() => {
     if (!canSelect || previewServerState.type !== "connected") {
@@ -19083,7 +19093,7 @@ var TimelineClipboardKeybindings = () => {
 
 // src/components/Timeline/TimelineDeleteKeybindings.tsx
 import { useContext as useContext31, useEffect as useEffect33 } from "react";
-import { Internals as Internals27 } from "remotion";
+import { Internals as Internals28 } from "remotion";
 
 // src/components/duplicate-jsx-node-api.ts
 var duplicateJsxNode = (request) => {
@@ -19172,7 +19182,7 @@ var duplicateSelectedTimelineItems = ({
 
 // src/components/Timeline/split-selected-timeline-item.ts
 import { hasSequenceTimingTraits } from "@remotion/studio-shared";
-import { Internals as Internals23 } from "remotion";
+import { Internals as Internals24 } from "remotion";
 
 // src/components/split-jsx-sequence-api.ts
 var splitJsxSequence = (request) => {
@@ -19305,7 +19315,7 @@ var splitSelectedTimelineItems = ({
     overrideIdsToNodePaths,
     nodePathInfo: selection.nodePathInfo
   });
-  const sequencePropStatuses = propStatuses ? Internals23.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey) : undefined;
+  const sequencePropStatuses = propStatuses ? Internals24.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey) : undefined;
   const eligibility = getTimelineSequenceSplitEligibility({
     selection,
     sequence: track?.sequence ?? null,
@@ -19325,7 +19335,7 @@ var splitSelectedTimelineItems = ({
 // src/components/Timeline/use-delete-timeline-items.ts
 import { LINEAR_KEYFRAME_EASING as LINEAR_KEYFRAME_EASING3 } from "@remotion/studio-shared";
 import { useCallback as useCallback64, useContext as useContext30 } from "react";
-import { Internals as Internals26 } from "remotion";
+import { Internals as Internals27 } from "remotion";
 
 // src/state/editor-guides.ts
 import { createContext as createContext13 } from "react";
@@ -19367,11 +19377,11 @@ var EditorShowGuidesContext = createContext13({
 
 // src/components/Timeline/reset-selected-timeline-props.ts
 import { getEffectFieldsToShow as getEffectFieldsToShow3 } from "@remotion/studio-shared";
-import { Internals as Internals25 } from "remotion";
+import { Internals as Internals26 } from "remotion";
 
 // src/components/Timeline/get-sequence-prop-reset-changes.ts
 import { getStylePropertyLonghandKeys } from "@remotion/studio-shared";
-import { Internals as Internals24 } from "remotion";
+import { Internals as Internals25 } from "remotion";
 var isVisibleFieldSchema2 = (fieldSchema) => fieldSchema !== undefined && fieldSchema.type !== "hidden";
 var getDefaultValue3 = (fieldSchema) => fieldSchema.default !== undefined ? JSON.stringify(fieldSchema.default) : null;
 var getSequencePropResetChanges = ({
@@ -19382,7 +19392,7 @@ var getSequencePropResetChanges = ({
   defaultValue,
   schema
 }) => {
-  const flatSchema = Internals24.getFlatSchemaWithAllKeys(schema);
+  const flatSchema = Internals25.getFlatSchemaWithAllKeys(schema);
   const longhandChanges = getStylePropertyLonghandKeys(fieldKey).flatMap((longhandKey) => {
     const fieldSchema = flatSchema[longhandKey];
     if (!isVisibleFieldSchema2(fieldSchema)) {
@@ -19446,7 +19456,7 @@ var getActiveFieldSchema = ({
   key,
   resolveValue
 }) => {
-  return Internals25.flattenActiveSchema(schema, resolveValue)[key];
+  return Internals26.flattenActiveSchema(schema, resolveValue)[key];
 };
 var getTimelinePropResetTargets = ({
   selections,
@@ -19478,8 +19488,8 @@ var getTimelinePropResetTargets = ({
       if (!sequence.controls) {
         continue;
       }
-      const sequencePropStatus = Internals25.getPropStatusesCtx(propStatuses, nodePath);
-      const { merged: sequenceValuesDotNotation } = Internals25.computeEffectiveSchemaValuesDotNotation({
+      const sequencePropStatus = Internals26.getPropStatusesCtx(propStatuses, nodePath);
+      const { merged: sequenceValuesDotNotation } = Internals26.computeEffectiveSchemaValuesDotNotation({
         schema: sequence.controls.schema,
         currentValue: sequence.controls.runtimeValues.getSnapshot(),
         overrideValues: {},
@@ -19518,7 +19528,7 @@ var getTimelinePropResetTargets = ({
       getEffectDragOverrides: () => ({})
     }).find((candidate) => candidate.key === selection.key) : null;
     const fieldSchema = field?.fieldSchema;
-    const effectStatus = Internals25.getEffectPropStatusesCtx({
+    const effectStatus = Internals26.getEffectPropStatusesCtx({
       propStatuses,
       nodePath,
       effectIndex: selection.i
@@ -19600,10 +19610,10 @@ var resetSelectedTimelineProps = ({
 // src/components/Timeline/use-delete-timeline-items.ts
 var useDeleteTimelineItems = () => {
   const { previewServerState } = useContext30(StudioServerConnectionCtx);
-  const sequencesRef = useContext30(Internals26.SequenceManagerRefContext);
-  const { overrideIdToNodePathMappings } = useContext30(Internals26.OverrideIdsToNodePathsGettersContext);
-  const propStatusesRef = useContext30(Internals26.VisualModePropStatusesRefContext);
-  const { setPropStatuses } = useContext30(Internals26.VisualModeSettersContext);
+  const sequencesRef = useContext30(Internals27.SequenceManagerRefContext);
+  const { overrideIdToNodePathMappings } = useContext30(Internals27.OverrideIdsToNodePathsGettersContext);
+  const propStatusesRef = useContext30(Internals27.VisualModePropStatusesRefContext);
+  const { setPropStatuses } = useContext30(Internals27.VisualModeSettersContext);
   const { setGuidesList } = useContext30(EditorShowGuidesContext);
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
   const confirm = useConfirmationDialog();
@@ -19713,9 +19723,9 @@ var useDeleteTimelineItems = () => {
 var TimelineDeleteKeybindings = () => {
   const keybindings = useKeybinding();
   const { previewServerState } = useContext31(StudioServerConnectionCtx);
-  const sequencesRef = useContext31(Internals27.SequenceManagerRefContext);
-  const { overrideIdToNodePathMappings } = useContext31(Internals27.OverrideIdsToNodePathsGettersContext);
-  const propStatusesRef = useContext31(Internals27.VisualModePropStatusesRefContext);
+  const sequencesRef = useContext31(Internals28.SequenceManagerRefContext);
+  const { overrideIdToNodePathMappings } = useContext31(Internals28.OverrideIdsToNodePathsGettersContext);
+  const propStatusesRef = useContext31(Internals28.VisualModePropStatusesRefContext);
   const { canSelect } = useTimelineSelection();
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
   const confirm = useConfirmationDialog();
@@ -20070,10 +20080,10 @@ var getTimelineTreeNodeCanEditEasing = ({
     return false;
   }
   if (node.field.kind === "sequence-field") {
-    const sequencePropStatus = Internals28.getPropStatusesCtx(propStatuses, nodePathInfo.sequenceSubscriptionKey)?.[node.field.key];
+    const sequencePropStatus = Internals29.getPropStatusesCtx(propStatuses, nodePathInfo.sequenceSubscriptionKey)?.[node.field.key];
     return sequencePropStatus?.status === "keyframed" && canEditEasingForInterpolationFunction3(sequencePropStatus.interpolationFunction);
   }
-  const effectStatus = Internals28.getEffectPropStatusesCtx({
+  const effectStatus = Internals29.getEffectPropStatusesCtx({
     propStatuses,
     nodePath: nodePathInfo.sequenceSubscriptionKey,
     effectIndex: node.field.effectIndex
@@ -20265,8 +20275,8 @@ var TimelineEscapeKeybindings = () => {
 };
 var TimelineSelectableItemsProvider = ({ children, timeline }) => {
   const { getIsExpanded } = useContext32(ExpandedTracksGetterContext);
-  const { propStatuses } = useContext32(Internals28.VisualModePropStatusesContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext32(Internals28.VisualModeDragOverridesContext);
+  const { propStatuses } = useContext32(Internals29.VisualModePropStatusesContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext32(Internals29.VisualModeDragOverridesContext);
   const { selectedItems } = useTimelineSelection();
   const selectableItems = useMemo68(() => getSelectableTimelineItems({
     getDragOverrides,
@@ -20291,7 +20301,7 @@ var TimelineSelectableItemsProvider = ({ children, timeline }) => {
 };
 var TimelineSelectionProvider = ({ children }) => {
   const { previewServerState } = useContext32(StudioServerConnectionCtx);
-  const { canvasContent } = useContext32(Internals28.CompositionManager);
+  const { canvasContent } = useContext32(Internals29.CompositionManager);
   const timelineSelectionScope = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
   const { expandParentTracks } = useContext32(ExpandedTracksSetterContext);
   const canSelect = isStudioSelectionEnabled() && (previewServerState.type === "connected" || window.remotion_isReadOnlyStudio);
@@ -20811,7 +20821,7 @@ var getSameSequenceInspectorSelection = (selections) => {
 // src/components/InspectorPanel/MultiSequenceInspector.tsx
 import { stringifySequenceExpandedRowKey as stringifySequenceExpandedRowKey5 } from "@remotion/studio-shared";
 import { useContext as useContext43, useMemo as useMemo84, useSyncExternalStore as useSyncExternalStore2 } from "react";
-import { Internals as Internals31 } from "remotion";
+import { Internals as Internals32 } from "remotion";
 
 // src/components/Timeline/TimelineRowLayoutContext.ts
 import { createContext as createContext15 } from "react";
@@ -20859,7 +20869,7 @@ var TimelineRowLayoutContext = createContext15({
 
 // src/components/InspectorPanel/MultiSequenceField.tsx
 import { useCallback as useCallback84, useContext as useContext42, useEffect as useEffect36, useState as useState53 } from "react";
-import { Internals as Internals30 } from "remotion";
+import { Internals as Internals31 } from "remotion";
 
 // src/components/Timeline/TimelineExpandArrowButton.tsx
 import React70, { useMemo as useMemo69 } from "react";
@@ -21881,11 +21891,8 @@ var formatNumberTimelineFieldValueForDisplay = ({
     const digits = getDecimalPlaces2(numericValue);
     return digits === 0 ? String(numericValue) : numericValue.toFixed(digits);
   }
-  return formatTimelineNumber({
-    decimalPlaces: stepDecimals,
-    fixed: true,
-    value: numericValue
-  });
+  const normalizedValue = getDecimalPlaces2(numericValue) > stepDecimals ? Number(numericValue.toPrecision(15)) : numericValue;
+  return getDecimalPlaces2(normalizedValue) > stepDecimals ? String(normalizedValue) : normalizedValue.toFixed(stepDecimals);
 };
 var formatRotationTimelineFieldValueForDisplay = ({
   fieldSchema,
@@ -24836,12 +24843,12 @@ import { NoReactInternals as NoReactInternals10 } from "remotion/no-react";
 
 // src/state/scale-lock.tsx
 import React84, { useCallback as useCallback76, useMemo as useMemo78, useState as useState47 } from "react";
-import { Internals as Internals29 } from "remotion";
+import { Internals as Internals30 } from "remotion";
 import { jsx as jsx133 } from "react/jsx-runtime";
 var makeScaleLockKey = ({
   fieldKey,
   nodePath
-}) => `${Internals29.makeSequencePropsSubscriptionKey(nodePath)}.${fieldKey}`;
+}) => `${Internals30.makeSequencePropsSubscriptionKey(nodePath)}.${fieldKey}`;
 var ScaleLockContext = React84.createContext({
   getScaleLockState: ({ defaultValue }) => defaultValue,
   setScaleLockState: () => {
@@ -26768,12 +26775,12 @@ var MultiSequenceNumberField = (props) => {
 // src/components/InspectorPanel/MultiSequenceField.tsx
 import { jsx as jsx143, jsxs as jsxs69, Fragment as Fragment23 } from "react/jsx-runtime";
 var MultiSequenceField = ({ field, targets, readOnlyStudio }) => {
-  const { propStatuses } = useContext42(Internals30.VisualModePropStatusesContext);
-  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext42(Internals30.VisualModeSettersContext);
+  const { propStatuses } = useContext42(Internals31.VisualModePropStatusesContext);
+  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext42(Internals31.VisualModeSettersContext);
   const { previewServerState } = useContext42(StudioServerConnectionCtx);
   const [editingMixed, setEditingMixed] = useState53(false);
-  const statuses = targets.map((target) => Internals30.getPropStatusesCtx(propStatuses, target.nodePath)?.[field.key]);
-  const values = statuses.map((status) => status?.status === "static" ? Internals30.getEffectiveVisualModeValue({
+  const statuses = targets.map((target) => Internals31.getPropStatusesCtx(propStatuses, target.nodePath)?.[field.key]);
+  const values = statuses.map((status) => status?.status === "static" ? Internals31.getEffectiveVisualModeValue({
     propStatus: status,
     dragOverrideValue: undefined,
     defaultValue: field.fieldSchema.default,
@@ -26793,7 +26800,7 @@ var MultiSequenceField = ({ field, targets, readOnlyStudio }) => {
       return;
     }
     for (const [index, target] of targets.entries()) {
-      setDragOverrides(target.nodePath, field.key, Internals30.makeStaticDragOverride(nextValues[index]));
+      setDragOverrides(target.nodePath, field.key, Internals31.makeStaticDragOverride(nextValues[index]));
     }
   }, [editable, field.key, setDragOverrides, targets]);
   const save = useCallback84(async (nextValues, options) => {
@@ -26911,10 +26918,10 @@ var selectionCountStyle = {
   whiteSpace: "nowrap"
 };
 var MultiSequenceInspector = ({ selections, readOnlyStudio }) => {
-  const { sequences } = useContext43(Internals31.SequenceManager);
-  const { overrideIdToNodePathMappings } = useContext43(Internals31.OverrideIdsToNodePathsGettersContext);
-  const { propStatuses } = useContext43(Internals31.VisualModePropStatusesContext);
-  const { getDragOverrides } = useContext43(Internals31.VisualModeDragOverridesContext);
+  const { sequences } = useContext43(Internals32.SequenceManager);
+  const { overrideIdToNodePathMappings } = useContext43(Internals32.OverrideIdsToNodePathsGettersContext);
+  const { propStatuses } = useContext43(Internals32.VisualModePropStatusesContext);
+  const { getDragOverrides } = useContext43(Internals32.VisualModeDragOverridesContext);
   const targets = useMemo84(() => {
     const tracks = calculateTimeline({
       sequences,
@@ -27010,7 +27017,7 @@ var MultiSequenceInspector = ({ selections, readOnlyStudio }) => {
 
 // src/components/InspectorPanel/EasingInspector.tsx
 import { useCallback as useCallback100, useContext as useContext57, useMemo as useMemo99 } from "react";
-import { Internals as Internals42, useVideoConfig as useVideoConfig5 } from "remotion";
+import { Internals as Internals43, useVideoConfig as useVideoConfig5 } from "remotion";
 
 // src/helpers/use-runtime-values.ts
 import { useCallback as useCallback85, useMemo as useMemo85 } from "react";
@@ -27120,7 +27127,7 @@ import {
   useRef as useRef28,
   useState as useState54
 } from "react";
-import { Easing, Internals as Internals32 } from "remotion";
+import { Easing, Internals as Internals33 } from "remotion";
 import { jsx as jsx145, jsxs as jsxs71, Fragment as Fragment24 } from "react/jsx-runtime";
 var SVG_WIDTH = 560;
 var SVG_HEIGHT = 320;
@@ -27358,14 +27365,14 @@ var areEasingsEqual = (first, second) => {
   }
 };
 var getEasingUpdateTargetKey = (update) => {
-  const nodePathKey = Internals32.makeSequencePropsSubscriptionKey(update.nodePath);
+  const nodePathKey = Internals33.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 = Internals32.transformSchema;
+  const transformSchema = Internals33.transformSchema;
   const directField = transformSchema[fieldKey];
   if (directField) {
     return directField;
@@ -27578,16 +27585,16 @@ var EasingPresetButton = ({ currentEasing, disabled, onClick, preset }) => {
 };
 var EasingEditor = ({ state, renderHeader }) => {
   const { previewServerState } = useContext44(StudioServerConnectionCtx);
-  const sequencesRef = useContext44(Internals32.SequenceManagerRefContext);
-  const propStatusesRef = useContext44(Internals32.VisualModePropStatusesRefContext);
+  const sequencesRef = useContext44(Internals33.SequenceManagerRefContext);
+  const propStatusesRef = useContext44(Internals33.VisualModePropStatusesRefContext);
   const {
     setDragOverrides,
     clearDragOverrides,
     setEffectDragOverrides,
     clearEffectDragOverrides,
     setPropStatuses
-  } = useContext44(Internals32.VisualModeSettersContext);
-  const { overrideIdToNodePathMappings } = useContext44(Internals32.OverrideIdsToNodePathsGettersContext);
+  } = useContext44(Internals33.VisualModeSettersContext);
+  const { overrideIdToNodePathMappings } = useContext44(Internals33.OverrideIdsToNodePathsGettersContext);
   const svgRef = useRef28(null);
   const [mode, setMode] = useState54(() => easingToMode(state.initialEasing));
   const [bezier, setBezier] = useState54(() => easingToBezier(state.initialEasing));
@@ -27622,7 +27629,7 @@ var EasingEditor = ({ state, renderHeader }) => {
     const sequenceTargets = new Set;
     const effectTargets = new Set;
     for (const update of updates) {
-      const key = Internals32.makeSequencePropsSubscriptionKey(update.nodePath);
+      const key = Internals33.makeSequencePropsSubscriptionKey(update.nodePath);
       if (update.type === "sequence") {
         if (!sequenceTargets.has(key)) {
           sequenceTargets.add(key);
@@ -28402,7 +28409,7 @@ var getEasingSelectionFromCurrentKeyframes = ({
 
 // src/components/InspectorPanel/KeyframeEasingNavigator.tsx
 import { useCallback as useCallback91, useMemo as useMemo90 } from "react";
-import { Internals as Internals35, useVideoConfig as useVideoConfig4 } from "remotion";
+import { Internals as Internals36, useVideoConfig as useVideoConfig4 } from "remotion";
 
 // src/components/Timeline/TimelineKeyframeDiamondIcon.tsx
 import { jsx as jsx146, jsxs as jsxs72 } from "react/jsx-runtime";
@@ -28443,7 +28450,7 @@ import {
   LINEAR_KEYFRAME_EASING as LINEAR_KEYFRAME_EASING5
 } from "@remotion/studio-shared";
 import React98, { useCallback as useCallback90, useContext as useContext47, useMemo as useMemo89, useRef as useRef30 } from "react";
-import { Internals as Internals34, useVideoConfig as useVideoConfig3 } from "remotion";
+import { Internals as Internals35, useVideoConfig as useVideoConfig3 } from "remotion";
 
 // src/components/ContextMenu.tsx
 import { PlayerInternals as PlayerInternals9 } from "@remotion/player";
@@ -28782,7 +28789,7 @@ import {
   moveKeyframesInPropStatus
 } from "@remotion/studio-shared";
 import { useCallback as useCallback89, useContext as useContext46 } from "react";
-import { Internals as Internals33, useVideoConfig as useVideoConfig2 } from "remotion";
+import { Internals as Internals34, useVideoConfig as useVideoConfig2 } from "remotion";
 
 // src/components/Timeline/get-bounded-keyframe-drag-delta.ts
 var getBoundedKeyframeDragDelta = ({
@@ -28938,7 +28945,7 @@ var getTimelineSelectionsAfterEasingKeyframeDrag = ({
 var getCodeValueForTarget = ({
   propStatuses,
   nodePath
-}) => propStatuses[Internals33.makeSequencePropsSubscriptionKey(nodePath)];
+}) => propStatuses[Internals34.makeSequencePropsSubscriptionKey(nodePath)];
 var getTimelineKeyframeDragTarget = ({
   propStatuses,
   displayFrame,
@@ -29144,16 +29151,16 @@ var useTimelineKeyframeDrag = ({
   const videoConfig = useVideoConfig2();
   const timelineWidth = useContext46(TimelineWidthContext);
   const { previewServerState } = useContext46(StudioServerConnectionCtx);
-  const sequencesRef = useContext46(Internals33.SequenceManagerRefContext);
-  const { overrideIdToNodePathMappings } = useContext46(Internals33.OverrideIdsToNodePathsGettersContext);
-  const propStatusesRef = useContext46(Internals33.VisualModePropStatusesRefContext);
+  const sequencesRef = useContext46(Internals34.SequenceManagerRefContext);
+  const { overrideIdToNodePathMappings } = useContext46(Internals34.OverrideIdsToNodePathsGettersContext);
+  const propStatusesRef = useContext46(Internals34.VisualModePropStatusesRefContext);
   const {
     clearDragOverrides,
     clearEffectDragOverrides,
     setPropStatuses,
     setDragOverrides,
     setEffectDragOverrides
-  } = useContext46(Internals33.VisualModeSettersContext);
+  } = useContext46(Internals34.VisualModeSettersContext);
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
   const { clearDraggedKeyframes, setDraggedKeyframes } = useTimelineKeyframeDragState();
   return useCallback89((e) => {
@@ -29352,16 +29359,16 @@ var useTimelineEasingKeyframeDrag = ({
   const videoConfig = useVideoConfig2();
   const timelineWidth = useContext46(TimelineWidthContext);
   const { previewServerState } = useContext46(StudioServerConnectionCtx);
-  const sequencesRef = useContext46(Internals33.SequenceManagerRefContext);
-  const { overrideIdToNodePathMappings } = useContext46(Internals33.OverrideIdsToNodePathsGettersContext);
-  const propStatusesRef = useContext46(Internals33.VisualModePropStatusesRefContext);
+  const sequencesRef = useContext46(Internals34.SequenceManagerRefContext);
+  const { overrideIdToNodePathMappings } = useContext46(Internals34.OverrideIdsToNodePathsGettersContext);
+  const propStatusesRef = useContext46(Internals34.VisualModePropStatusesRefContext);
   const {
     clearDragOverrides,
     clearEffectDragOverrides,
     setPropStatuses,
     setDragOverrides,
     setEffectDragOverrides
-  } = useContext46(Internals33.VisualModeSettersContext);
+  } = useContext46(Internals34.VisualModeSettersContext);
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
   const { clearDraggedKeyframes } = useTimelineKeyframeDragState();
   return useCallback89((e) => {
@@ -29601,10 +29608,10 @@ var TimelineKeyframeEasingLineInteraction = ({ fromFrame, toFrame, nodePathInfo,
     pointerEvents: selectable ? "auto" : "none"
   }), [selectable, style4]);
   const { previewServerState } = useContext47(StudioServerConnectionCtx);
-  const sequencesRef = useContext47(Internals34.SequenceManagerRefContext);
-  const propStatusesRef = useContext47(Internals34.VisualModePropStatusesRefContext);
-  const { setPropStatuses } = useContext47(Internals34.VisualModeSettersContext);
-  const { overrideIdToNodePathMappings } = useContext47(Internals34.OverrideIdsToNodePathsGettersContext);
+  const sequencesRef = useContext47(Internals35.SequenceManagerRefContext);
+  const propStatusesRef = useContext47(Internals35.VisualModePropStatusesRefContext);
+  const { setPropStatuses } = useContext47(Internals35.VisualModeSettersContext);
+  const { overrideIdToNodePathMappings } = useContext47(Internals35.OverrideIdsToNodePathsGettersContext);
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
   const getTargetSelections = useCallback90(() => {
     const selectedEasings = getEasingSelections(currentSelection.current.selectedItems);
@@ -29913,7 +29920,7 @@ var TimelineNavigatorItem = ({ extendLineLeft, extendLineRight, item: item2, onS
 };
 var KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes, nodePathInfo }) => {
   const { isSelected, selectItems } = useTimelineSelection();
-  const setFrame = Internals35.useTimelineSetFrame();
+  const setFrame = Internals36.useTimelineSetFrame();
   const videoConfig = useVideoConfig4();
   const items = useMemo90(() => getKeyframeEasingNavigatorItems({
     includeEasings,
@@ -29932,7 +29939,7 @@ var KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes, no
     const frame = getNavigatorItemPlayheadFrame(item2);
     setFrame((current) => {
       const next = { ...current, [videoConfig.id]: frame };
-      Internals35.persistCurrentFrame(next);
+      Internals36.persistCurrentFrame(next);
       return next;
     });
     ensureFrameIsInViewport({
@@ -30019,7 +30026,7 @@ import {
   useMemo as useMemo91,
   useState as useState57
 } from "react";
-import { Internals as Internals36 } from "remotion";
+import { Internals as Internals37 } from "remotion";
 import { jsx as jsx151, jsxs as jsxs76, Fragment as Fragment27 } from "react/jsx-runtime";
 var comboStyle = {
   minWidth: 120
@@ -30071,7 +30078,7 @@ var getOutputValues = (onSelect, disabled) => {
   }));
 };
 var KeyframeSettings = ({ update }) => {
-  const { setPropStatuses } = useContext48(Internals36.VisualModeSettersContext);
+  const { setPropStatuses } = useContext48(Internals37.VisualModeSettersContext);
   const { previewServerState } = useContext48(StudioServerConnectionCtx);
   const { propStatus } = update;
   const [posterize, setPosterize] = useState57(propStatus.posterize ?? 0);
@@ -30363,7 +30370,7 @@ var useOpenSequenceInApps = (sequence) => {
 
 // src/components/Timeline/use-rename-sequence.ts
 import { useCallback as useCallback94, useContext as useContext51, useMemo as useMemo93 } from "react";
-import { Internals as Internals37 } from "remotion";
+import { Internals as Internals38 } from "remotion";
 var getSequenceNameSaveAction = ({
   editedName,
   currentDisplayName,
@@ -30387,11 +30394,11 @@ var useRenameSequence = ({
   sequence,
   validatedLocation
 }) => {
-  const { propStatuses } = useContext51(Internals37.VisualModePropStatusesContext);
-  const { setPropStatuses } = useContext51(Internals37.VisualModeSettersContext);
+  const { propStatuses } = useContext51(Internals38.VisualModePropStatusesContext);
+  const { setPropStatuses } = useContext51(Internals38.VisualModeSettersContext);
   const nodePath = nodePathInfo?.sequenceSubscriptionKey ?? null;
   const propStatusesForOverride = useMemo93(() => {
-    return nodePath ? Internals37.getPropStatusesCtx(propStatuses, nodePath) : undefined;
+    return nodePath ? Internals38.getPropStatusesCtx(propStatuses, nodePath) : undefined;
   }, [propStatuses, nodePath]);
   const codeNameStatus = propStatusesForOverride?.name;
   const fallbackDisplayName = sequence.controls?.componentName ?? "<Sequence>";
@@ -30467,7 +30474,7 @@ var useRenameSequence = ({
 
 // src/components/InspectorPanel/ConnectedCompositionsSection.tsx
 import { useCallback as useCallback98, useContext as useContext54, useMemo as useMemo96 } from "react";
-import { Internals as Internals40 } from "remotion";
+import { Internals as Internals41 } from "remotion";
 
 // src/helpers/get-connected-compositions.ts
 import { getConnectedCompositions } from "@remotion/canvas";
@@ -30742,7 +30749,7 @@ var CompositionOrStillIcon = ({ color, composition, style: style4 }) => {
 
 // src/components/InitialCompositionLoader.tsx
 import { useCallback as useCallback97, useContext as useContext53, useEffect as useEffect41 } from "react";
-import { Internals as Internals39 } from "remotion";
+import { Internals as Internals40 } from "remotion";
 
 // src/helpers/create-folder-tree.ts
 import { sortItemsByCommitOrder } from "@remotion/canvas";
@@ -31026,9 +31033,9 @@ var explorerSidebarTabs = createRef4();
 
 // src/components/use-select-asset.ts
 import { useCallback as useCallback96, useContext as useContext52 } from "react";
-import { Internals as Internals38 } from "remotion";
+import { Internals as Internals39 } from "remotion";
 var useSelectAsset = () => {
-  const { setCanvasContent } = useContext52(Internals38.CompositionSetters);
+  const { setCanvasContent } = useContext52(Internals39.CompositionSetters);
   const { setAssetFoldersExpanded } = useContext52(FolderContext);
   return useCallback96((asset) => {
     setCanvasContent({ type: "asset", asset });
@@ -31052,8 +31059,8 @@ var useSelectAsset = () => {
 // src/components/InitialCompositionLoader.tsx
 var useSelectComposition = () => {
   const { setCompositionFoldersExpanded } = useContext53(FolderContext);
-  const { setCanvasContent } = useContext53(Internals39.CompositionSetters);
-  const setFrame = Internals39.useTimelineSetFrame();
+  const { setCanvasContent } = useContext53(Internals40.CompositionSetters);
+  const setFrame = Internals40.useTimelineSetFrame();
   return useCallback97((c, push, frame = null) => {
     if (push) {
       pushUrl(`/${c.id}`);
@@ -31080,8 +31087,8 @@ var useSelectComposition = () => {
   }, [setCanvasContent, setCompositionFoldersExpanded, setFrame]);
 };
 var InitialCompositionLoader = () => {
-  const { compositions, canvasContent } = useContext53(Internals39.CompositionManager);
-  const { setCanvasContent } = useContext53(Internals39.CompositionSetters);
+  const { compositions, canvasContent } = useContext53(Internals40.CompositionManager);
+  const { setCanvasContent } = useContext53(Internals40.CompositionSetters);
   const { setCompositionListState } = useContext53(CompositionListContext);
   const selectComposition = useSelectComposition();
   const selectAsset = useSelectAsset();
@@ -31188,7 +31195,7 @@ var compositionContextMenuStyle = {
 var useConnectedCompositions = ({
   track
 }) => {
-  const { compositions } = useContext54(Internals40.CompositionManager);
+  const { compositions } = useContext54(Internals41.CompositionManager);
   return useMemo96(() => getConnectedCompositions({
     compositions,
     singleChildComponent: track.sequence.singleChildComponent
@@ -31434,10 +31441,10 @@ var SequenceInspectorSections = ({ track }) => {
 
 // src/components/InspectorPanel/use-track-for-selection.ts
 import { useContext as useContext56, useMemo as useMemo98 } from "react";
-import { Internals as Internals41 } from "remotion";
+import { Internals as Internals42 } from "remotion";
 var useTrackForSelection = (selection) => {
-  const { sequences } = useContext56(Internals41.SequenceManager);
-  const { overrideIdToNodePathMappings } = useContext56(Internals41.OverrideIdsToNodePathsGettersContext);
+  const { sequences } = useContext56(Internals42.SequenceManager);
+  const { overrideIdToNodePathMappings } = useContext56(Internals42.OverrideIdsToNodePathsGettersContext);
   return useMemo98(() => {
     if (selection.type === "guide") {
       return null;
@@ -31461,12 +31468,12 @@ var EasingInspector = ({ selection }) => {
   const track = useTrackForSelection(selection);
   const runtimeValues = useRuntimeValues(track?.sequence.controls ?? null);
   const videoConfig = useVideoConfig5();
-  const timelinePosition = Internals42.Timeline.useTimelinePosition();
-  const { sequences } = useContext57(Internals42.SequenceManager);
-  const { overrideIdToNodePathMappings } = useContext57(Internals42.OverrideIdsToNodePathsGettersContext);
-  const { propStatuses } = useContext57(Internals42.VisualModePropStatusesContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext57(Internals42.VisualModeDragOverridesContext);
-  const { setPropStatuses } = useContext57(Internals42.VisualModeSettersContext);
+  const timelinePosition = Internals43.Timeline.useTimelinePosition();
+  const { sequences } = useContext57(Internals43.SequenceManager);
+  const { overrideIdToNodePathMappings } = useContext57(Internals43.OverrideIdsToNodePathsGettersContext);
+  const { propStatuses } = useContext57(Internals43.VisualModePropStatusesContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext57(Internals43.VisualModeDragOverridesContext);
+  const { setPropStatuses } = useContext57(Internals43.VisualModeSettersContext);
   const { previewServerState } = useContext57(StudioServerConnectionCtx);
   const { selectItems } = useTimelineSelection();
   const parentSelection = useMemo99(() => getTimelineSelectionFromNodePathInfo(selection.nodePathInfo), [selection.nodePathInfo]);
@@ -31575,7 +31582,7 @@ var EasingInspector = ({ selection }) => {
       return;
     }
     const sourceFrame = timelinePosition - easingKeyframeDisplayOffset;
-    const value = Internals42.getEffectiveVisualModeValue({
+    const value = Internals43.getEffectiveVisualModeValue({
       propStatus: easingUpdate.propStatus,
       dragOverrideValue: easingDetails.dragOverrideValue,
       defaultValue: easingDetails.defaultValue,
@@ -31786,7 +31793,7 @@ import {
   useMemo as useMemo104,
   useState as useState61
 } from "react";
-import { Internals as Internals47, useVideoConfig as useVideoConfig7 } from "remotion";
+import { Internals as Internals48, useVideoConfig as useVideoConfig7 } from "remotion";
 
 // src/components/Timeline/TimelineEffectPropItem.tsx
 import {
@@ -31795,7 +31802,7 @@ import {
   optimisticUpdateForEffectPropStatuses as optimisticUpdateForEffectPropStatuses2
 } from "@remotion/studio-shared";
 import { useCallback as useCallback104, useContext as useContext61, useMemo as useMemo102 } from "react";
-import { Internals as Internals45 } from "remotion";
+import { Internals as Internals46 } from "remotion";
 
 // src/components/Timeline/get-copy-context-for-agents-menu-item.ts
 var getCopyContextForAgentsMenuItem = ({
@@ -31825,7 +31832,7 @@ var getCopyContextForAgentsMenuItem = ({
 // src/components/Timeline/TimelineKeyframeControls.tsx
 import { isSchemaFieldKeyframable } from "@remotion/studio-shared";
 import { useCallback as useCallback102, useContext as useContext60, useMemo as useMemo100 } from "react";
-import { Internals as Internals43, useVideoConfig as useVideoConfig6 } from "remotion";
+import { Internals as Internals44, useVideoConfig as useVideoConfig6 } from "remotion";
 
 // src/components/Timeline/get-keyframe-navigation.ts
 var isKeyframeInTimelineRange = (frame, durationInFrames) => {
@@ -31992,7 +31999,7 @@ var resolveKeyframeControlTarget = ({
   }
   const nodePath = nodePathInfo.sequenceSubscriptionKey;
   if (fieldNode.field.kind === "sequence-field") {
-    const sequencePropStatuses = Internals43.getPropStatusesCtx(propStatuses, nodePath);
+    const sequencePropStatuses = Internals44.getPropStatusesCtx(propStatuses, nodePath);
     const sequenceSelectedPropStatus = sequencePropStatuses?.[fieldNode.field.key] ?? null;
     if (sequenceSelectedPropStatus === null) {
       return null;
@@ -32017,7 +32024,7 @@ var resolveKeyframeControlTarget = ({
       effectIndex: null
     };
   }
-  const effectStatus = Internals43.getEffectPropStatusesCtx({
+  const effectStatus = Internals44.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex: fieldNode.field.effectIndex
@@ -32111,7 +32118,7 @@ function getCurrentKeyframeValue({
   dragOverrideValue
 }) {
   if (isKeyframedStatus(propStatus)) {
-    return Internals43.getEffectiveVisualModeValue({
+    return Internals44.getEffectiveVisualModeValue({
       propStatus,
       dragOverrideValue,
       frame: jsxFrame,
@@ -32120,7 +32127,7 @@ function getCurrentKeyframeValue({
     });
   }
   if (propStatus.status === "static") {
-    return Internals43.getEffectiveVisualModeValue({
+    return Internals44.getEffectiveVisualModeValue({
       propStatus,
       dragOverrideValue,
       frame: jsxFrame,
@@ -32172,11 +32179,11 @@ var TimelineKeyframeControls = ({
   mode = "timeline"
 }) => {
   const videoConfig = useVideoConfig6();
-  const timelinePosition = Internals43.Timeline.useTimelinePosition();
-  const setFrame = Internals43.useTimelineSetFrame();
-  const { setPropStatuses } = useContext60(Internals43.VisualModeSettersContext);
-  const { propStatuses } = useContext60(Internals43.VisualModePropStatusesContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext60(Internals43.VisualModeDragOverridesContext);
+  const timelinePosition = Internals44.Timeline.useTimelinePosition();
+  const setFrame = Internals44.useTimelineSetFrame();
+  const { setPropStatuses } = useContext60(Internals44.VisualModeSettersContext);
+  const { propStatuses } = useContext60(Internals44.VisualModePropStatusesContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext60(Internals44.VisualModeDragOverridesContext);
   const { previewServerState } = useContext60(StudioServerConnectionCtx);
   const { selectedItems, selectItems } = useTimelineSelection();
   const tracks = useTimelineKeyframeTracks();
@@ -32271,7 +32278,7 @@ var TimelineKeyframeControls = ({
   const seekToDisplayFrame = useCallback102((frame, direction) => {
     setFrame((current) => {
       const next = { ...current, [videoConfig.id]: frame };
-      Internals43.persistCurrentFrame(next);
+      Internals44.persistCurrentFrame(next);
       return next;
     });
     ensureFrameIsInViewport({
@@ -32432,7 +32439,7 @@ var TimelineKeyframeControls = ({
 
 // src/components/Timeline/TimelineKeyframedValue.tsx
 import { useCallback as useCallback103, useMemo as useMemo101 } from "react";
-import { Internals as Internals44 } from "remotion";
+import { Internals as Internals45 } from "remotion";
 import { jsx as jsx161 } from "react/jsx-runtime";
 var valuesEqual2 = (left, right) => {
   return JSON.stringify(left) === JSON.stringify(right);
@@ -32448,7 +32455,7 @@ var TimelineKeyframedValue = ({
   scaleLockNodePath
 }) => {
   const computedValue2 = useMemo101(() => {
-    const raw = Internals44.interpolateKeyframedStatus({
+    const raw = Internals45.interpolateKeyframedStatus({
       forceSpringAllowTail: false,
       frame: sourceFrame,
       status: propStatus
@@ -32464,7 +32471,7 @@ var TimelineKeyframedValue = ({
     codeValue: computedValue2
   }), [computedValue2]);
   const effectiveValue = useMemo101(() => {
-    return Internals44.getEffectiveVisualModeValue({
+    return Internals45.getEffectiveVisualModeValue({
       propStatus: fakeStatus,
       dragOverrideValue,
       frame: sourceFrame,
@@ -32525,19 +32532,19 @@ var TimelineComputedEffectPropValue = ({ field, propStatus, runtimeValueStore, v
   });
 };
 var TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFrame, runtimeValueStore }) => {
-  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext61(Internals45.VisualModeSettersContext);
-  const { getEffectDragOverrides } = useContext61(Internals45.VisualModeDragOverridesContext);
-  const { propStatuses: visualModePropStatuses } = useContext61(Internals45.VisualModePropStatusesContext);
+  const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = useContext61(Internals46.VisualModeSettersContext);
+  const { getEffectDragOverrides } = useContext61(Internals46.VisualModeDragOverridesContext);
+  const { propStatuses: visualModePropStatuses } = useContext61(Internals46.VisualModePropStatusesContext);
   const { previewServerState } = useContext61(StudioServerConnectionCtx);
   const clientId = previewServerState.type === "connected" ? previewServerState.clientId : null;
-  const effectStatus = Internals45.getEffectPropStatusesCtx({
+  const effectStatus = Internals46.getEffectPropStatusesCtx({
     propStatuses: visualModePropStatuses,
     nodePath,
     effectIndex: field.effectIndex
   });
   const propStatus = effectStatus.type === "can-update-effect" ? effectStatus.props?.[field.key] ?? null : null;
   const onDragValueChange = useCallback104((value) => {
-    const nextDragOverrideValue = propStatus !== null && isKeyframedStatus2(propStatus) ? Internals45.makeKeyframedDragOverride({
+    const nextDragOverrideValue = propStatus !== null && isKeyframedStatus2(propStatus) ? Internals46.makeKeyframedDragOverride({
       status: propStatus,
       frame: sourceFrame,
       value,
@@ -32545,7 +32552,7 @@ var TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFrame
         schema: field.effectSchema,
         key: field.key
       }) ? { type: "step1" } : undefined
-    }) : Internals45.makeStaticDragOverride(value);
+    }) : Internals46.makeStaticDragOverride(value);
     setEffectDragOverrides(nodePath, field.effectIndex, field.key, nextDragOverrideValue);
   }, [
     field.effectIndex,
@@ -32715,7 +32722,7 @@ var TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFrame
       validatedLocation
     });
   }
-  const effectiveValue = Internals45.getEffectiveVisualModeValue({
+  const effectiveValue = Internals46.getEffectiveVisualModeValue({
     propStatus,
     dragOverrideValue,
     defaultValue: field.fieldSchema.default,
@@ -32739,7 +32746,7 @@ var TimelineEffectPropValueAtCurrentFrame = ({
   keyframeDisplayOffset,
   runtimeValueStore
 }) => {
-  const timelinePosition = Internals45.Timeline.useTimelinePosition();
+  const timelinePosition = Internals46.Timeline.useTimelinePosition();
   return /* @__PURE__ */ jsx162(TimelineEffectPropValue, {
     field,
     nodePath,
@@ -32760,14 +32767,14 @@ var TimelineEffectPropItem = ({
 }) => {
   const { previewServerState } = useContext61(StudioServerConnectionCtx);
   const { canOpenInEditor: canOpenInEditor2, defaultEditorId } = useEditorOpening(previewServerState.type === "connected");
-  const { setPropStatuses } = useContext61(Internals45.VisualModeSettersContext);
-  const { propStatuses } = useContext61(Internals45.VisualModePropStatusesContext);
-  const { getEffectDragOverrides } = useContext61(Internals45.VisualModeDragOverridesContext);
+  const { setPropStatuses } = useContext61(Internals46.VisualModeSettersContext);
+  const { propStatuses } = useContext61(Internals46.VisualModePropStatusesContext);
+  const { getEffectDragOverrides } = useContext61(Internals46.VisualModeDragOverridesContext);
   const selection = useTimelineRowSelection(nodePathInfo);
   const style4 = useMemo102(() => {
     return field.typeName === "text-content" ? fieldRowBase : { ...fieldRowBase, height: field.rowHeight };
   }, [field.rowHeight, field.typeName]);
-  const effectStatus = useMemo102(() => Internals45.getEffectPropStatusesCtx({
+  const effectStatus = useMemo102(() => Internals46.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex: field.effectIndex
@@ -32923,7 +32930,7 @@ import {
   isSchemaFieldKeyframable as isSchemaFieldKeyframable3
 } from "@remotion/studio-shared";
 import React111, { useCallback as useCallback105, useContext as useContext62, useMemo as useMemo103 } from "react";
-import { Internals as Internals46 } from "remotion";
+import { Internals as Internals47 } from "remotion";
 import { jsx as jsx163 } from "react/jsx-runtime";
 var fieldRowBase2 = {};
 var inlineSourceFieldRow = {
@@ -32956,18 +32963,18 @@ var isResettableStatus2 = ({
   return JSON.stringify(effectiveCodeValue) !== JSON.stringify(defaultValue);
 };
 var Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
-  const { getDragOverrides } = useContext62(Internals46.VisualModeDragOverridesContext);
-  const { setDragOverrides, clearDragOverrides } = useContext62(Internals46.VisualModeSettersContext);
+  const { getDragOverrides } = useContext62(Internals47.VisualModeDragOverridesContext);
+  const { setDragOverrides, clearDragOverrides } = useContext62(Internals47.VisualModeSettersContext);
   const dragOverrideValue = useMemo103(() => {
     return nodePath === null ? undefined : (getDragOverrides(nodePath) ?? {})[field.key];
   }, [getDragOverrides, nodePath, field.key]);
-  const effectiveValue = Internals46.getEffectiveVisualModeValue({
+  const effectiveValue = Internals47.getEffectiveVisualModeValue({
     propStatus,
     dragOverrideValue,
     defaultValue: field.fieldSchema.default,
     shouldResortToDefaultValueIfUndefined: true
   });
-  const { setPropStatuses } = useContext62(Internals46.VisualModeSettersContext);
+  const { setPropStatuses } = useContext62(Internals47.VisualModeSettersContext);
   const { previewServerState } = useContext62(StudioServerConnectionCtx);
   const clientId = previewServerState.type === "connected" ? previewServerState.clientId : null;
   const onSave = useCallback105((value, options) => {
@@ -33018,7 +33025,7 @@ var Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
     if (nodePath === null) {
       throw new Error("Cannot drag value");
     }
-    setDragOverrides(nodePath, field.key, Internals46.makeStaticDragOverride(value));
+    setDragOverrides(nodePath, field.key, Internals47.makeStaticDragOverride(value));
   }, [setDragOverrides, nodePath, field.key]);
   const onDragEnd = useCallback105(() => {
     if (nodePath === null) {
@@ -33059,7 +33066,7 @@ var TimelineSequenceKeyframedValueAtSourceFrame = ({
   });
 };
 var TimelineSequenceKeyframedValueAtCurrentFrame = ({ keyframeDisplayOffset, ...props }) => {
-  const timelinePosition = Internals46.Timeline.useTimelinePosition();
+  const timelinePosition = Internals47.Timeline.useTimelinePosition();
   const resolvedKeyframeDisplayOffset = getKeyframeDisplayOffset({
     propStatus: props.propStatus,
     keyframeDisplayOffset
@@ -33071,8 +33078,8 @@ var TimelineSequenceKeyframedValueAtCurrentFrame = ({ keyframeDisplayOffset, ...
 };
 var TimelineSequenceKeyframedValueUnmemoized = (props) => {
   const { field, fileName, nodePath, schema, propStatus } = props;
-  const { getDragOverrides } = useContext62(Internals46.VisualModeDragOverridesContext);
-  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext62(Internals46.VisualModeSettersContext);
+  const { getDragOverrides } = useContext62(Internals47.VisualModeDragOverridesContext);
+  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext62(Internals47.VisualModeSettersContext);
   const { previewServerState } = useContext62(StudioServerConnectionCtx);
   const clientId = previewServerState.type === "connected" ? previewServerState.clientId : null;
   const dragOverrideValue = useMemo103(() => {
@@ -33094,7 +33101,7 @@ var TimelineSequenceKeyframedValueUnmemoized = (props) => {
     });
   }, [clientId, field.key, fileName, nodePath, schema, setPropStatuses]);
   const onKeyframedDragValueChangeAtFrame = useCallback105((value, sourceFrame) => {
-    setDragOverrides(nodePath, field.key, Internals46.makeKeyframedDragOverride({
+    setDragOverrides(nodePath, field.key, Internals47.makeKeyframedDragOverride({
       status: propStatus,
       frame: sourceFrame,
       value,
@@ -33136,14 +33143,14 @@ var TimelineSequencePropItem = ({
   keyframeControlsMode,
   runtimeValue
 }) => {
-  const { propStatuses: visualModePropStatuses } = useContext62(Internals46.VisualModePropStatusesContext);
-  const { getDragOverrides } = useContext62(Internals46.VisualModeDragOverridesContext);
-  const { setPropStatuses } = useContext62(Internals46.VisualModeSettersContext);
+  const { propStatuses: visualModePropStatuses } = useContext62(Internals47.VisualModePropStatusesContext);
+  const { getDragOverrides } = useContext62(Internals47.VisualModeDragOverridesContext);
+  const { setPropStatuses } = useContext62(Internals47.VisualModeSettersContext);
   const { previewServerState } = useContext62(StudioServerConnectionCtx);
   const { canOpenInEditor: canOpenInEditor2, defaultEditorId } = useEditorOpening(previewServerState.type === "connected");
   const selection = useTimelineRowSelection(nodePathInfo);
   const transform3DMode = useContext62(Transform3DModeContext);
-  const propStatusesForOverride = Internals46.getPropStatusesCtx(visualModePropStatuses, nodePath);
+  const propStatusesForOverride = Internals47.getPropStatusesCtx(visualModePropStatuses, nodePath);
   const propStatus = propStatusesForOverride?.[field.key] ?? null;
   const dragOverrideValue = useMemo103(() => {
     return (getDragOverrides(nodePath) ?? {})[field.key];
@@ -33380,15 +33387,15 @@ var KeyframeInspector = ({ selection }) => {
   const track = useTrackForSelection(selection);
   const runtimeValues = useRuntimeValues(track?.sequence.controls ?? null);
   const videoConfig = useVideoConfig7();
-  const { propStatuses } = useContext63(Internals47.VisualModePropStatusesContext);
+  const { propStatuses } = useContext63(Internals48.VisualModePropStatusesContext);
   const {
     clearDragOverrides,
     clearEffectDragOverrides,
     setDragOverrides,
     setEffectDragOverrides,
     setPropStatuses
-  } = useContext63(Internals47.VisualModeSettersContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext63(Internals47.VisualModeDragOverridesContext);
+  } = useContext63(Internals48.VisualModeSettersContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext63(Internals48.VisualModeDragOverridesContext);
   const { previewServerState } = useContext63(StudioServerConnectionCtx);
   const { selectItems } = useTimelineSelection();
   const [draftFrame, setDraftFrame] = useState61(selection.frame);
@@ -33416,7 +33423,7 @@ var KeyframeInspector = ({ selection }) => {
         includeTextContent: false
       });
       const sequenceField = sequenceFields?.find((candidate) => candidate.key === keyframeField.fieldKey) ?? null;
-      const sequencePropStatus = Internals47.getPropStatusesCtx(propStatuses, nodePath)?.[keyframeField.fieldKey] ?? null;
+      const sequencePropStatus = Internals48.getPropStatusesCtx(propStatuses, nodePath)?.[keyframeField.fieldKey] ?? null;
       if (!sequenceField || sequencePropStatus?.status !== "keyframed") {
         return null;
       }
@@ -33450,7 +33457,7 @@ var KeyframeInspector = ({ selection }) => {
       getEffectDragOverrides
     });
     const effectField = effectFields.find((candidate) => candidate.key === keyframeField.fieldKey) ?? null;
-    const effectStatus = Internals47.getEffectPropStatusesCtx({
+    const effectStatus = Internals48.getEffectPropStatusesCtx({
       propStatuses,
       nodePath,
       effectIndex: keyframeField.effectIndex
@@ -33751,7 +33758,7 @@ var KeyframeInspector = ({ selection }) => {
 
 // src/components/InspectorPanel/SequenceSelectionInspector.tsx
 import { useCallback as useCallback115, useContext as useContext69, useMemo as useMemo111 } from "react";
-import { Internals as Internals56 } from "remotion";
+import { Internals as Internals57 } from "remotion";
 
 // src/icons/audio.tsx
 import { jsx as jsx165 } from "react/jsx-runtime";
@@ -33828,7 +33835,7 @@ import {
   useRef as useRef35,
   useState as useState66
 } from "react";
-import { Internals as Internals52 } from "remotion";
+import { Internals as Internals53 } from "remotion";
 
 // src/icons/border-radius.tsx
 import { jsx as jsx169 } from "react/jsx-runtime";
@@ -33985,7 +33992,7 @@ import {
   useRef as useRef34,
   useState as useState64
 } from "react";
-import { Internals as Internals48 } from "remotion";
+import { Internals as Internals49 } from "remotion";
 
 // src/components/CaptionInspector.tsx
 import React115, { useCallback as useCallback109, useRef as useRef33, useState as useState63 } from "react";
@@ -34501,9 +34508,9 @@ var InlineCaptionInspector = ({
   validatedLocation
 }) => {
   const { previewServerState } = useContext64(StudioServerConnectionCtx);
-  const { propStatuses } = useContext64(Internals48.VisualModePropStatusesContext);
-  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext64(Internals48.VisualModeSettersContext);
-  const captionStatus = Internals48.getPropStatusesCtx(propStatuses, nodePath)?.captions;
+  const { propStatuses } = useContext64(Internals49.VisualModePropStatusesContext);
+  const { setPropStatuses, setDragOverrides, clearDragOverrides } = useContext64(Internals49.VisualModeSettersContext);
+  const captionStatus = Internals49.getPropStatusesCtx(propStatuses, nodePath)?.captions;
   const clientId = previewServerState.type === "connected" ? previewServerState.clientId : null;
   const canSave = !readOnlyStudio && clientId !== null && captionStatus?.status === "static";
   const [draftCaptions, setDraftCaptions] = useState64(captions);
@@ -34521,7 +34528,7 @@ var InlineCaptionInspector = ({
   }, [captions, clearDragOverrides, nodePath, runtimeSignature]);
   const updateCaptions = useCallback110((nextCaptions) => {
     setDraftCaptions(nextCaptions);
-    setDragOverrides(nodePath, "captions", Internals48.makeStaticDragOverride(nextCaptions));
+    setDragOverrides(nodePath, "captions", Internals49.makeStaticDragOverride(nextCaptions));
   }, [nodePath, setDragOverrides]);
   const cancelCaptions = useCallback110(() => {
     setDraftCaptions(savedCaptions.current);
@@ -34564,7 +34571,7 @@ var InlineCaptionInspector = ({
       return;
     }
     setDraftCaptions(nextCaptions);
-    setDragOverrides(nodePath, "captions", Internals48.makeStaticDragOverride(nextCaptions));
+    setDragOverrides(nodePath, "captions", Internals49.makeStaticDragOverride(nextCaptions));
     savedCaptions.current = nextCaptions;
     saveSequenceProps2({
       changes: [
@@ -34610,7 +34617,7 @@ var InlineCaptionInspector = ({
 };
 
 // src/components/InspectorPanel/inspector-section-collapse.ts
-import { Internals as Internals49 } from "remotion";
+import { Internals as Internals50 } from "remotion";
 var BORDER_KEYS = [
   "style.borderWidth",
   "style.borderStyle",
@@ -34696,7 +34703,7 @@ var isLayoutInactive = ({
   if (!schema) {
     return false;
   }
-  const flatSchema = Internals49.getFlatSchemaWithAllKeys(schema);
+  const flatSchema = Internals50.getFlatSchemaWithAllKeys(schema);
   const layoutKeys = LAYOUT_KEYS.filter((key) => flatSchema[key] !== undefined);
   if (layoutKeys.length === 0) {
     return false;
@@ -34760,7 +34767,7 @@ var getInspectorSectionActivity = ({
   } else if (group === "crop") {
     resolved = hasEveryStatus({ keys: CROP_KEYS, propStatuses });
   } else if (group === "layout") {
-    const flatSchema = schema ? Internals49.getFlatSchemaWithAllKeys(schema) : undefined;
+    const flatSchema = schema ? Internals50.getFlatSchemaWithAllKeys(schema) : undefined;
     const layoutKeys = LAYOUT_KEYS.filter((key) => flatSchema?.[key] !== undefined);
     resolved = layoutKeys.length > 0 && hasEveryStatus({ keys: layoutKeys, propStatuses });
   } else {
@@ -34900,7 +34907,7 @@ import React118 from "react";
 
 // src/components/Timeline/TimelineEffectItem.tsx
 import { useCallback as useCallback111, useContext as useContext65, useMemo as useMemo107, useState as useState65 } from "react";
-import { Internals as Internals50 } from "remotion";
+import { Internals as Internals51 } from "remotion";
 import { jsx as jsx183, jsxs as jsxs86 } from "react/jsx-runtime";
 var EFFECT_REORDER_MIME_TYPE = "application/remotion-effect-reorder";
 var currentEffectDrag = null;
@@ -34976,12 +34983,12 @@ var TimelineEffectItem = ({
   const { previewServerState } = useContext65(StudioServerConnectionCtx);
   const previewConnected = previewServerState.type === "connected";
   const canMutateEffects = canUseEffectOperations();
-  const { propStatuses } = useContext65(Internals50.VisualModePropStatusesContext);
-  const { setPropStatuses } = useContext65(Internals50.VisualModeSettersContext);
+  const { propStatuses } = useContext65(Internals51.VisualModePropStatusesContext);
+  const { setPropStatuses } = useContext65(Internals51.VisualModeSettersContext);
   const selection = useTimelineRowSelection(nodePathInfo);
   const containsSelection = useTimelineRowContainsSelection(nodePathInfo);
   const [dropIndicator, setDropIndicator] = useState65(null);
-  const effectStatus = useMemo107(() => Internals50.getEffectPropStatusesCtx({
+  const effectStatus = useMemo107(() => Internals51.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
     effectIndex
@@ -34996,7 +35003,7 @@ var TimelineEffectItem = ({
   const canToggle = previewConnected && canMutateEffects && disabledStatus?.status === "static";
   const deleteDisabled = !previewConnected || !canMutateEffects || effectStatus.type !== "can-update-effect" || !validatedLocation.source;
   const canReorder = previewConnected && canMutateEffects && effectStatus.type === "can-update-effect" && Boolean(validatedLocation.source);
-  const nodePathKey = useMemo107(() => Internals50.makeSequencePropsSubscriptionKey(nodePath), [nodePath]);
+  const nodePathKey = useMemo107(() => Internals51.makeSequencePropsSubscriptionKey(nodePath), [nodePath]);
   const onDeleteEffectFromSource = useCallback111(async () => {
     if (deleteDisabled) {
       return;
@@ -35445,13 +35452,13 @@ var propStatusHas3DTransformValue = ({
 
 // src/components/Timeline/use-timeline-expanded-tree.ts
 import { useCallback as useCallback112, useContext as useContext66, useMemo as useMemo108 } from "react";
-import { Internals as Internals51 } from "remotion";
+import { Internals as Internals52 } from "remotion";
 var useTimelineSequenceHasExpandableContent = ({
   sequence,
   nodePathInfo
 }) => {
-  const { propStatuses: visualModePropStatuses } = useContext66(Internals51.VisualModePropStatusesContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext66(Internals51.VisualModeDragOverridesContext);
+  const { propStatuses: visualModePropStatuses } = useContext66(Internals52.VisualModePropStatusesContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext66(Internals52.VisualModeDragOverridesContext);
   const { selectedItems } = useTimelineSelection();
   const selectedRowKeys = useMemo108(() => getSelectedTimelineExpandedRowKeys(selectedItems), [selectedItems]);
   const selectHasExpandableContent = useCallback112((runtimeValues) => {
@@ -35499,8 +35506,8 @@ var useTimelineExpandedTree = ({
 }) => {
   const { getIsExpanded } = useContext66(ExpandedTracksGetterContext);
   const { toggleTrack } = useContext66(ExpandedTracksSetterContext);
-  const { propStatuses: visualModePropStatuses } = useContext66(Internals51.VisualModePropStatusesContext);
-  const { getDragOverrides, getEffectDragOverrides } = useContext66(Internals51.VisualModeDragOverridesContext);
+  const { propStatuses: visualModePropStatuses } = useContext66(Internals52.VisualModePropStatusesContext);
+  const { getDragOverrides, getEffectDragOverrides } = useContext66(Internals52.VisualModeDragOverridesContext);
   const { selectedItems } = useTimelineSelection();
   const runtimeValues = useRuntimeValues(sequence.controls);
   const tree = useMemo108(() => buildTimelineTree({
@@ -35743,8 +35750,8 @@ var InspectorSequenceSection = ({
   const sequenceKey = getTimelineSequenceSelectionKey(nodePathInfo);
   const manuallyEnabled3DTransform = manuallyEnabledSequenceKeys.has(sequenceKey);
   const { previewServerState } = useContext67(StudioServerConnectionCtx);
-  const { getDragOverrides } = useContext67(Internals52.VisualModeDragOverridesContext);
-  const { setPropStatuses } = useContext67(Internals52.VisualModeSettersContext);
+  const { getDragOverrides } = useContext67(Internals53.VisualModeDragOverridesContext);
+  const { setPropStatuses } = useContext67(Internals53.VisualModeSettersContext);
   const { setSelectedModal } = useContext67(SetSelectedModalContext);
   const selectAsset = useSelectAsset();
   const mediaSrc = getTimelineAssetSrcFromSchema(sequence.controls, runtimeValues);
@@ -35881,7 +35888,7 @@ var InspectorSequenceSection = ({
   const controlGroups = useMemo109(() => getInspectorControlGroups(controlRows), [controlRows]);
   const layoutGroup = controlGroups.find((group) => group.id === "layout");
   const controlGroupsWithoutLayout = controlGroups.filter((group) => group.id !== "layout");
-  const sequencePropStatuses = Internals52.getPropStatusesCtx(propStatuses, nodePathInfo.sequenceSubscriptionKey);
+  const sequencePropStatuses = Internals53.getPropStatusesCtx(propStatuses, nodePathInfo.sequenceSubscriptionKey);
   const automaticallyEnabled3DTransform = useMemo109(() => {
     return [
       "style.translate",
@@ -35995,8 +36002,8 @@ var InspectorSequenceSection = ({
   const borderRadiusGroup = controlGroups.find((group) => group.id === "border-radius");
   const borderRadiusUsesShorthand = borderRadiusGroup?.rows.some(({ node }) => node.kind === "field" && node.field?.key === BORDER_RADIUS_SHORTHAND_KEY2);
   const borderRadiusConversion = getBorderRadiusConversion(sequencePropStatuses, getDragOverrides(nodePathInfo.sequenceSubscriptionKey));
-  const inlineCaptionValue = schema.captions?.type === "remotion-captions" ? runtimeValues.captions : null;
-  const inlineCaptions = Array.isArray(inlineCaptionValue) ? inlineCaptionValue : null;
+  const hasCaptionsSchema = schema.captions?.type === "remotion-captions";
+  const inlineCaptions = hasCaptionsSchema ? Array.isArray(runtimeValues.captions) ? runtimeValues.captions : [] : null;
   const showEffectsSection = nodePathInfo.supportsEffects || effectRows.length > 0;
   const canAddEffect = nodePathInfo.supportsEffects && previewServerState.type === "connected" && isStudioInteractivityEnabled() && Boolean(validatedLocation.source);
   const onAddEffect = useCallback113(() => {
@@ -36264,7 +36271,7 @@ var getSequenceFreezeFrameMenuItem = ({
 
 // src/components/InspectorPanel/AlignmentControls.tsx
 import { useCallback as useCallback114, useContext as useContext68, useMemo as useMemo110 } from "react";
-import { Internals as Internals55 } from "remotion";
+import { Internals as Internals56 } from "remotion";
 
 // src/icons/align-right.tsx
 import { jsx as jsx186, jsxs as jsxs88 } from "react/jsx-runtime";
@@ -36406,7 +36413,7 @@ var AlignTopIcon = (props) => {
 };
 
 // src/components/selected-outline-drag.ts
-import { Internals as Internals54 } from "remotion";
+import { Internals as Internals55 } from "remotion";
 import { NoReactInternals as NoReactInternals14 } from "remotion/no-react";
 
 // src/components/selected-outline-geometry.ts
@@ -38061,7 +38068,7 @@ var transformOriginFieldKey = "style.transformOrigin";
 var selectedOutlineDragThresholdPx = 4;
 
 // src/components/selected-outline-uv.ts
-import { Internals as Internals53 } from "remotion";
+import { Internals as Internals54 } from "remotion";
 var parseUvCoordinate2 = (value) => {
   if (Array.isArray(value) && value.length === 2 && value.every((item2) => typeof item2 === "number" && Number.isFinite(item2))) {
     return [value[0], value[1]];
@@ -38542,7 +38549,7 @@ var getSelectedUvHandles = ({
     if (!effect) {
       continue;
     }
-    const effectStatus = Internals53.getEffectPropStatusesCtx({
+    const effectStatus = Internals54.getEffectPropStatusesCtx({
       propStatuses,
       nodePath,
       effectIndex
@@ -38555,12 +38562,12 @@ var getSelectedUvHandles = ({
       continue;
     }
     const dragOverrides = getEffectDragOverrides(nodePath, effectIndex);
-    const activeSchema = Internals53.flattenActiveSchema(effect.schema, (key) => {
+    const activeSchema = Internals54.flattenActiveSchema(effect.schema, (key) => {
       const propStatus = effectStatus.props[key];
       if (propStatus?.status !== "static" && propStatus?.status !== "keyframed") {
         return;
       }
-      return Internals53.getEffectiveVisualModeValue({
+      return Internals54.getEffectiveVisualModeValue({
         propStatus,
         dragOverrideValue: dragOverrides[key],
         defaultValue: undefined,
@@ -38577,7 +38584,7 @@ var getSelectedUvHandles = ({
       if (propStatus?.status !== "static" && propStatus?.status !== "keyframed") {
         continue;
       }
-      effectValues[fieldKey] = Internals53.getEffectiveVisualModeValue({
+      effectValues[fieldKey] = Internals54.getEffectiveVisualModeValue({
         propStatus,
         dragOverrideValue: dragOverrides[fieldKey],
         defaultValue: fieldSchema.default,
@@ -39068,14 +39075,14 @@ var getSelectedOutlineActiveSchema = ({
   propStatus,
   frame
 }) => {
-  const { merged: valuesDotNotation } = Internals54.computeEffectiveSchemaValuesDotNotation({
+  const { merged: valuesDotNotation } = Internals55.computeEffectiveSchemaValuesDotNotation({
     schema,
     currentValue: currentRuntimeValueDotNotation,
     overrideValues: dragOverrides,
     propStatus,
     frame
   });
-  return Internals54.flattenActiveSchema(schema, (key) => valuesDotNotation[key]);
+  return Internals55.flattenActiveSchema(schema, (key) => valuesDotNotation[key]);
 };
 var getSelectedOutlineDragStates = ({
   dragTargets,
@@ -39085,7 +39092,7 @@ var getSelectedOutlineDragStates = ({
   return dragTargets.map((target) => {
     const dragOverrideValue = (getDragOverrides(target.nodePath) ?? {})[translateFieldKey];
     const sourceFrame = timelinePosition - target.keyframeDisplayOffset;
-    const effectiveValue = Internals54.getEffectiveVisualModeValue({
+    const effectiveValue = Internals55.getEffectiveVisualModeValue({
       propStatus: target.propStatus,
       dragOverrideValue,
       defaultValue: target.fieldDefault,
@@ -39095,7 +39102,7 @@ var getSelectedOutlineDragStates = ({
     const [startX, startY, startZ] = parseTranslate(String(effectiveValue ?? "0px 0px"));
     return {
       defaultValue: target.fieldDefault !== undefined ? JSON.stringify(target.fieldDefault) : null,
-      key: Internals54.makeSequencePropsSubscriptionKey(target.nodePath),
+      key: Internals55.makeSequencePropsSubscriptionKey(target.nodePath),
       sourceFrame,
       startX,
       startY,
@@ -39387,7 +39394,7 @@ var getSelectedOutlineScaleDragStates = ({
   return dragTargets.map((target) => {
     const dragOverrideValue = (getDragOverrides(target.nodePath) ?? {})[scaleFieldKey];
     const sourceFrame = timelinePosition - target.keyframeDisplayOffset;
-    const effectiveValue = Internals54.getEffectiveVisualModeValue({
+    const effectiveValue = Internals55.getEffectiveVisualModeValue({
       propStatus: target.propStatus,
       dragOverrideValue,
       defaultValue: target.fieldDefault,
@@ -39397,7 +39404,7 @@ var getSelectedOutlineScaleDragStates = ({
     const [startX, startY, startZ] = NoReactInternals14.parseScaleValue(effectiveValue);
     return {
       defaultValue: target.fieldDefault !== undefined ? JSON.stringify(target.fieldDefault) : null,
-      key: Internals54.makeSequencePropsSubscriptionKey(target.nodePath),
+      key: Internals55.makeSequencePropsSubscriptionKey(target.nodePath),
       sourceFrame,
       startX,
       startY,
@@ -39493,7 +39500,7 @@ var getSelectedOutlineRotationDragStates = ({
   return dragTargets.map((target) => {
     const dragOverrideValue = (getDragOverrides(target.nodePath) ?? {})[rotateFieldKey];
     const sourceFrame = timelinePosition - target.keyframeDisplayOffset;
-    const effectiveValue = Internals54.getEffectiveVisualModeValue({
+    const effectiveValue = Internals55.getEffectiveVisualModeValue({
       propStatus: target.propStatus,
       dragOverrideValue,
       defaultValue: target.fieldDefault,
@@ -39503,7 +39510,7 @@ var getSelectedOutlineRotationDragStates = ({
     const startValue = String(effectiveValue ?? "0deg");
     return {
       defaultValue: target.fieldDefault !== undefined ? JSON.stringify(target.fieldDefault) : null,
-      key: Internals54.makeSequencePropsSubscriptionKey(target.nodePath),
+      key: Internals55.makeSequencePropsSubscriptionKey(target.nodePath),
       sourceFrame,
       startDegrees: parseCssRotationToDegrees(startValue),
       startRotation: parseCssRotationToEuler(startValue),
@@ -39954,16 +39961,16 @@ var AlignmentButton = ({ onClick, title, Icon, disabled }) => {
 var AlignmentControls = ({ track }) => {
   const runtimeValues = useRuntimeValues(track.sequence.controls);
   const { previewServerState } = useContext68(StudioServerConnectionCtx);
-  const { propStatuses } = useContext68(Internals55.VisualModePropStatusesContext);
-  const { getDragOverrides } = useContext68(Internals55.VisualModeDragOverridesContext);
-  const { setPropStatuses } = useContext68(Internals55.VisualModeSettersContext);
-  const { canvasContent, compositions } = useContext68(Internals55.CompositionManager);
+  const { propStatuses } = useContext68(Internals56.VisualModePropStatusesContext);
+  const { getDragOverrides } = useContext68(Internals56.VisualModeDragOverridesContext);
+  const { setPropStatuses } = useContext68(Internals56.VisualModeSettersContext);
+  const { canvasContent, compositions } = useContext68(Internals56.CompositionManager);
   const currentCompositionMetadata = useMemo110(() => {
     if (canvasContent?.type !== "composition")
       return null;
     return compositions.find((c) => c.id === canvasContent.compositionId) ?? null;
   }, [canvasContent, compositions]);
-  const timelinePosition = Internals55.Timeline.useTimelinePosition();
+  const timelinePosition = Internals56.Timeline.useTimelinePosition();
   const handleAlign = useCallback114((direction) => {
     if (!isStudioInteractivityEnabled() || previewServerState.type !== "connected" || !track.nodePathInfo || !track.sequence.controls) {
       return;
@@ -39973,7 +39980,7 @@ var AlignmentControls = ({ track }) => {
       return;
     }
     const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
-    const nodePropStatuses = Internals55.getPropStatusesCtx(propStatuses, nodePath);
+    const nodePropStatuses = Internals56.getPropStatusesCtx(propStatuses, nodePath);
     const firstKeyframedStatus = Object.values(nodePropStatuses ?? {}).find((status) => status.status === "keyframed");
     const sourceFrame = timelinePosition - getKeyframeDisplayOffset({
       propStatus: firstKeyframedStatus,
@@ -40004,12 +40011,12 @@ var AlignmentControls = ({ track }) => {
     if (!currentCompositionMetadata?.width) {
       return;
     }
-    const compositionRect = Internals55.portalNode().getBoundingClientRect();
+    const compositionRect = Internals56.portalNode().getBoundingClientRect();
     if (compositionRect.width === 0 || compositionRect.height === 0) {
       return;
     }
     const scale = compositionRect.width / currentCompositionMetadata.width;
-    const currentTranslate = propStatus ? String(Internals55.getEffectiveVisualModeValue({
+    const currentTranslate = propStatus ? String(Internals56.getEffectiveVisualModeValue({
       propStatus,
       dragOverrideValue: dragOverrides[translateFieldKey],
       defaultValue: fieldSchema.default,
@@ -40080,7 +40087,7 @@ var AlignmentControls = ({ track }) => {
     return null;
   }
   const renderNodePath = track.nodePathInfo.sequenceSubscriptionKey;
-  const renderNodePropStatuses = Internals55.getPropStatusesCtx(propStatuses, renderNodePath);
+  const renderNodePropStatuses = Internals56.getPropStatusesCtx(propStatuses, renderNodePath);
   const firstRenderKeyframedStatus = Object.values(renderNodePropStatuses ?? {}).find((status) => status.status === "keyframed");
   const renderSourceFrame = timelinePosition - getKeyframeDisplayOffset({
     propStatus: firstRenderKeyframedStatus,
@@ -40159,9 +40166,9 @@ var largeActionIconStyle = {
   width: 20
 };
 var SplitSequenceQuickAction = ({ selection, track }) => {
-  const timelinePosition = Internals56.Timeline.useTimelinePosition();
-  const { propStatuses } = useContext69(Internals56.VisualModePropStatusesContext);
-  const sequencePropStatuses = useMemo111(() => Internals56.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey), [propStatuses, selection]);
+  const timelinePosition = Internals57.Timeline.useTimelinePosition();
+  const { propStatuses } = useContext69(Internals57.VisualModePropStatusesContext);
+  const sequencePropStatuses = useMemo111(() => Internals57.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey), [propStatuses, selection]);
   const eligibility = useMemo111(() => getTimelineSequenceSplitEligibility({
     selection,
     sequence: track.sequence,
@@ -40193,13 +40200,13 @@ var SplitSequenceQuickAction = ({ selection, track }) => {
   });
 };
 var SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
-  const timelinePosition = Internals56.Timeline.useTimelinePosition();
+  const timelinePosition = Internals57.Timeline.useTimelinePosition();
   const { previewServerState } = useContext69(StudioServerConnectionCtx);
-  const { propStatuses } = useContext69(Internals56.VisualModePropStatusesContext);
-  const { setPropStatuses } = useContext69(Internals56.VisualModeSettersContext);
+  const { propStatuses } = useContext69(Internals57.VisualModePropStatusesContext);
+  const { setPropStatuses } = useContext69(Internals57.VisualModeSettersContext);
   const confirm = useConfirmationDialog();
   const deleteTimelineItems = useDeleteTimelineItems();
-  const propStatusesForOverride = useMemo111(() => Internals56.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey), [propStatuses, selection.nodePathInfo.sequenceSubscriptionKey]);
+  const propStatusesForOverride = useMemo111(() => Internals57.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey), [propStatuses, selection.nodePathInfo.sequenceSubscriptionKey]);
   const freezeFrameMenuItem = getSequenceFreezeFrameMenuItem({
     clientId: previewServerState.type === "connected" && isStudioInteractivityEnabled() ? previewServerState.clientId : null,
     nodePath: selection.nodePathInfo.sequenceSubscriptionKey,
@@ -40421,7 +40428,7 @@ var SelectedInspector = ({ selection, readOnlyStudio }) => {
 // src/components/InspectorPanel.tsx
 import { jsx as jsx195, jsxs as jsxs93 } from "react/jsx-runtime";
 var InspectorPanel = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
-  const { canvasContent } = useContext70(Internals57.CompositionManager);
+  const { canvasContent } = useContext70(Internals58.CompositionManager);
   const { selectedItems } = useTimelineSelection();
   const sameSequenceInspectorSelection = useMemo112(() => getSameSequenceInspectorSelection(selectedItems), [selectedItems]);
   if (selectedItems.length === 0) {
@@ -40503,8 +40510,8 @@ var SchemaResetButton = ({ onClick }) => {
 };
 
 // src/components/RenderQueue/index.tsx
-import React136, { useContext as useContext80, useEffect as useEffect49, useMemo as useMemo123 } from "react";
-import { Internals as Internals60 } from "remotion";
+import React137, { useContext as useContext80, useEffect as useEffect50, useMemo as useMemo123 } from "react";
+import { Internals as Internals61 } from "remotion";
 
 // src/components/RenderQueue/caption-job-types.ts
 var isCaptionJob = (job) => {
@@ -40513,15 +40520,177 @@ var isCaptionJob = (job) => {
 
 // src/components/RenderQueue/CaptionQueueItem.tsx
 import {
-  useCallback as useCallback117,
+  useCallback as useCallback118,
   useContext as useContext71,
-  useEffect as useEffect46,
+  useEffect as useEffect47,
   useMemo as useMemo113,
+  useState as useState68
+} from "react";
+
+// src/components/ActionTooltip.tsx
+import {
+  useCallback as useCallback117,
+  useEffect as useEffect46,
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef36,
   useState as useState67
 } from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx197, jsxs as jsxs94, Fragment as Fragment33 } from "react/jsx-runtime";
+var triggerStyle2 = { display: "inline-flex" };
+var tooltipStyle = {
+  position: "fixed",
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  backgroundColor: TIMELINE_BACKGROUND_COLOR,
+  color: WHITE_ALPHA_90,
+  borderRadius: 6,
+  padding: "6px 8px",
+  fontSize: 12,
+  lineHeight: "16px",
+  whiteSpace: "pre-wrap",
+  overflowWrap: "anywhere",
+  maxWidth: "calc(100vw - 16px)",
+  boxShadow: SHADOW_TOWARDS_TOP,
+  pointerEvents: "none"
+};
+var labelStyle4 = {
+  font: "inherit",
+  color: "inherit",
+  minWidth: 0
+};
+var shortcutStyle = {
+  ...labelStyle4,
+  backgroundColor: WHITE_ALPHA_10,
+  borderRadius: 3,
+  padding: "0 4px",
+  minWidth: 16,
+  textAlign: "center",
+  whiteSpace: "nowrap",
+  flexShrink: 0
+};
+var visibleTooltipCount = 0;
+var lastTooltipHiddenAt = null;
+var TOOLTIP_SKIP_DELAY_WINDOW = 300;
+var ActionTooltip = ({ label: label3, shortcut, delay, dismissOnClick, children }) => {
+  const triggerRef = useRef36(null);
+  const tooltipRef = useRef36(null);
+  const timer = useRef36(null);
+  const [visible, setVisible] = useState67(false);
+  const [position, setPosition] = useState67(null);
+  const { currentZIndex } = useZIndex();
+  useLayoutEffect2(() => {
+    if (!visible) {
+      return;
+    }
+    visibleTooltipCount++;
+    return () => {
+      visibleTooltipCount--;
+      lastTooltipHiddenAt = Date.now();
+    };
+  }, [visible]);
+  const hide = useCallback117(() => {
+    if (timer.current !== null) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+    setVisible(false);
+    setPosition(null);
+  }, []);
+  const show = useCallback117(() => {
+    if (timer.current !== null) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+    setVisible(true);
+  }, []);
+  const onPointerEnter = useCallback117((event) => {
+    if (event.pointerType === "touch" || timer.current !== null || !event.currentTarget.contains(event.target)) {
+      return;
+    }
+    if (!delay || visibleTooltipCount > 0 || lastTooltipHiddenAt !== null && Date.now() - lastTooltipHiddenAt < TOOLTIP_SKIP_DELAY_WINDOW) {
+      show();
+      return;
+    }
+    timer.current = setTimeout(show, delay);
+  }, [delay, show]);
+  useEffect46(() => {
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        hide();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("blur", hide);
+    window.addEventListener("resize", hide);
+    window.addEventListener("scroll", hide, true);
+    return () => {
+      if (timer.current !== null) {
+        clearTimeout(timer.current);
+      }
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("blur", hide);
+      window.removeEventListener("resize", hide);
+      window.removeEventListener("scroll", hide, true);
+    };
+  }, [hide]);
+  useLayoutEffect2(() => {
+    if (!visible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+    const trigger = triggerRef.current.getBoundingClientRect();
+    const tooltip = tooltipRef.current.getBoundingClientRect();
+    const above = trigger.top - tooltip.height - 4;
+    setPosition({
+      left: Math.max(8, Math.min(trigger.left + (trigger.width - tooltip.width) / 2, window.innerWidth - tooltip.width - 8)),
+      top: Math.max(8, Math.min(above >= 8 ? above : trigger.bottom + 4, window.innerHeight - tooltip.height - 8))
+    });
+  }, [label3, shortcut, visible]);
+  return /* @__PURE__ */ jsxs94(Fragment33, {
+    children: [
+      /* @__PURE__ */ jsx197("span", {
+        ref: triggerRef,
+        style: triggerStyle2,
+        onPointerEnter,
+        onPointerLeave: hide,
+        onPointerDownCapture: dismissOnClick ? hide : undefined,
+        onClickCapture: dismissOnClick ? hide : undefined,
+        onFocus: (event) => {
+          if (event.currentTarget.contains(event.target)) {
+            show();
+          }
+        },
+        onBlur: hide,
+        children
+      }),
+      visible ? createPortal(/* @__PURE__ */ jsxs94("div", {
+        ref: tooltipRef,
+        role: "tooltip",
+        className: "css-reset",
+        style: {
+          ...tooltipStyle,
+          left: position?.left ?? 0,
+          top: position?.top ?? 0,
+          visibility: position ? "visible" : "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsx197("span", {
+            style: labelStyle4,
+            children: label3
+          }),
+          shortcut ? /* @__PURE__ */ jsx197("kbd", {
+            style: shortcutStyle,
+            children: shortcut
+          }) : null
+        ]
+      }), getPortal(currentZIndex)) : null
+    ]
+  });
+};
 
 // src/components/RenderQueue/CircularProgress.tsx
-import { jsx as jsx197 } from "react/jsx-runtime";
+import { jsx as jsx198 } from "react/jsx-runtime";
 var RENDER_STATUS_INDICATOR_SIZE = 16;
 var STROKE_WIDTH = 3;
 var container21 = {
@@ -40532,10 +40701,10 @@ var container21 = {
 var CircularProgress = ({ progress }) => {
   const r = RENDER_STATUS_INDICATOR_SIZE / 2 - STROKE_WIDTH;
   const circumference = r * Math.PI * 2;
-  return /* @__PURE__ */ jsx197("svg", {
+  return /* @__PURE__ */ jsx198("svg", {
     style: container21,
     viewBox: `0 0 ${RENDER_STATUS_INDICATOR_SIZE} ${RENDER_STATUS_INDICATOR_SIZE}`,
-    children: /* @__PURE__ */ jsx197("circle", {
+    children: /* @__PURE__ */ jsx198("circle", {
       r: RENDER_STATUS_INDICATOR_SIZE / 2 - STROKE_WIDTH,
       stroke: LIGHT_TEXT,
       fill: "none",
@@ -40568,16 +40737,16 @@ var renderQueueItemSubtitleStyle = {
 };
 
 // src/components/RenderQueue/SuccessIcon.tsx
-import { jsx as jsx198 } from "react/jsx-runtime";
+import { jsx as jsx199 } from "react/jsx-runtime";
 var iconStyle2 = {
   height: RENDER_STATUS_INDICATOR_SIZE,
   width: RENDER_STATUS_INDICATOR_SIZE
 };
 var SuccessIcon = () => {
-  return /* @__PURE__ */ jsx198("svg", {
+  return /* @__PURE__ */ jsx199("svg", {
     style: iconStyle2,
     viewBox: "0 0 512 512",
-    children: /* @__PURE__ */ jsx198("path", {
+    children: /* @__PURE__ */ jsx199("path", {
       fill: LIGHT_TEXT,
       d: "M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337l-17 17-17-17-64-64-17-17L160 222.1l17 17 47 47L335 175l17-17L385.9 192l-17 17z"
     })
@@ -40585,7 +40754,7 @@ var SuccessIcon = () => {
 };
 
 // src/components/RenderQueue/CaptionQueueItem.tsx
-import { jsx as jsx199, jsxs as jsxs94 } from "react/jsx-runtime";
+import { jsx as jsx200, jsxs as jsxs95 } from "react/jsx-runtime";
 var container22 = {
   padding: 12,
   display: "flex",
@@ -40627,7 +40796,7 @@ var removeIcon = {
 };
 var CaptionJobStatus = ({ job }) => {
   if (job.status === "running") {
-    return /* @__PURE__ */ jsx199("div", {
+    return /* @__PURE__ */ jsx200("div", {
       style: statusIcon,
       role: "progressbar",
       "aria-label": "Caption job progress",
@@ -40635,35 +40804,35 @@ var CaptionJobStatus = ({ job }) => {
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": Math.round(job.progress.value * 100),
-      children: /* @__PURE__ */ jsx199(CircularProgress, {
+      children: /* @__PURE__ */ jsx200(CircularProgress, {
         progress: Math.max(0.07, job.progress.value)
       })
     });
   }
   if (job.status === "done") {
-    return /* @__PURE__ */ jsx199(SuccessIcon, {});
+    return /* @__PURE__ */ jsx200(SuccessIcon, {});
   }
   if (job.status === "failed") {
-    return /* @__PURE__ */ jsx199("svg", {
+    return /* @__PURE__ */ jsx200("svg", {
       style: statusIcon,
       viewBox: "0 0 512 512",
-      children: /* @__PURE__ */ jsx199("path", {
+      children: /* @__PURE__ */ jsx200("path", {
         fill: FAIL_COLOR,
         d: "M0 160V352L160 512H352L512 352V160L352 0H160L0 160zm353.9 32l-17 17-47 47 47 47 17 17L320 353.9l-17-17-47-47-47 47-17 17L158.1 320l17-17 47-47-47-47-17-17L192 158.1l17 17 47 47 47-47 17-17L353.9 192z"
       })
     });
   }
-  return /* @__PURE__ */ jsx199("svg", {
+  return /* @__PURE__ */ jsx200("svg", {
     style: statusIcon,
     viewBox: "0 0 512 512",
-    children: /* @__PURE__ */ jsx199("path", {
+    children: /* @__PURE__ */ jsx200("path", {
       fill: LIGHT_TEXT,
       d: "M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"
     })
   });
 };
 var CaptionQueueItem = ({ job, selected }) => {
-  const [hovered, setHovered] = useState67(false);
+  const [hovered, setHovered] = useState68(false);
   const { removeCaptionJob } = useContext71(RenderQueueContext);
   const selectAsset = useSelectAsset();
   const isHoverable = job.status === "done";
@@ -40678,36 +40847,36 @@ var CaptionQueueItem = ({ job, selected }) => {
       WebkitUserSelect: "none"
     };
   }, [hovered, isHoverable, selected]);
-  const onPointerEnter = useCallback117(() => {
+  const onPointerEnter = useCallback118(() => {
     setHovered(true);
   }, []);
-  const onPointerLeave = useCallback117(() => {
+  const onPointerLeave = useCallback118(() => {
     setHovered(false);
   }, []);
-  const scrollCurrentIntoView = useCallback117(() => {
+  const scrollCurrentIntoView = useCallback118(() => {
     document.querySelector(`.${RENDER_QUEUE_ITEM_SELECTED_CLASSNAME}`)?.scrollIntoView({ behavior: "smooth" });
   }, []);
-  const onClick = useCallback117(() => {
+  const onClick = useCallback118(() => {
     if (job.status !== "done") {
       return;
     }
     selectAsset(job.outName);
     pushUrl(`/assets/${job.outName}`);
   }, [job, selectAsset]);
-  useEffect46(() => {
+  useEffect47(() => {
     if (selected) {
       scrollCurrentIntoView();
     }
   }, [scrollCurrentIntoView, selected]);
-  const onRemove = useCallback117((event) => {
+  const onRemove = useCallback118((event) => {
     event.stopPropagation();
     removeCaptionJob(job.id);
   }, [job.id, removeCaptionJob]);
-  const renderRemoveAction = useCallback117((color) => {
-    return /* @__PURE__ */ jsx199("svg", {
+  const renderRemoveAction = useCallback118((color) => {
+    return /* @__PURE__ */ jsx200("svg", {
       style: removeIcon,
       viewBox: "0 0 320 512",
-      children: /* @__PURE__ */ jsx199("path", {
+      children: /* @__PURE__ */ jsx200("path", {
         fill: color,
         d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
       })
@@ -40725,7 +40894,7 @@ var CaptionQueueItem = ({ job, selected }) => {
     }
     return job.outName;
   }, [job]);
-  return /* @__PURE__ */ jsxs94(Row, {
+  return /* @__PURE__ */ jsxs95(Row, {
     "data-render-queue-item": job.id,
     style: containerStyle10,
     align: "center",
@@ -40734,22 +40903,22 @@ var CaptionQueueItem = ({ job, selected }) => {
     onPointerLeave,
     className: selected ? RENDER_QUEUE_ITEM_SELECTED_CLASSNAME : undefined,
     children: [
-      /* @__PURE__ */ jsx199(CaptionJobStatus, {
+      /* @__PURE__ */ jsx200(CaptionJobStatus, {
         job
       }),
-      /* @__PURE__ */ jsx199(Spacing, {
+      /* @__PURE__ */ jsx200(Spacing, {
         x: 1
       }),
-      /* @__PURE__ */ jsxs94("div", {
+      /* @__PURE__ */ jsxs95("div", {
         style: right,
         children: [
-          /* @__PURE__ */ jsx199("div", {
+          /* @__PURE__ */ jsx200("div", {
             style: title,
             children: job.displayName
           }),
-          /* @__PURE__ */ jsx199("div", {
+          /* @__PURE__ */ jsx200("div", {
             style: subtitleContainer,
-            children: /* @__PURE__ */ jsx199("span", {
+            children: /* @__PURE__ */ jsx200("span", {
               style: subtitle2,
               title: message,
               children: message
@@ -40757,14 +40926,20 @@ var CaptionQueueItem = ({ job, selected }) => {
           })
         ]
       }),
-      /* @__PURE__ */ jsx199(Spacing, {
+      /* @__PURE__ */ jsx200(Spacing, {
         x: 1
       }),
-      job.status === "running" ? null : /* @__PURE__ */ jsx199(InlineAction, {
-        renderAction: renderRemoveAction,
-        onClick: onRemove,
-        title: "Remove",
-        variant: null
+      job.status === "running" ? null : /* @__PURE__ */ jsx200(ActionTooltip, {
+        label: "Clear",
+        shortcut: null,
+        delay: 800,
+        dismissOnClick: true,
+        children: /* @__PURE__ */ jsx200(InlineAction, {
+          renderAction: renderRemoveAction,
+          onClick: onRemove,
+          "aria-label": "Clear",
+          variant: null
+        })
       })
     ]
   });
@@ -40772,13 +40947,13 @@ var CaptionQueueItem = ({ job, selected }) => {
 
 // src/components/RenderQueue/RenderQueueItem.tsx
 import {
-  useCallback as useCallback128,
+  useCallback as useCallback129,
   useContext as useContext78,
-  useEffect as useEffect48,
+  useEffect as useEffect49,
   useMemo as useMemo121,
-  useState as useState69
+  useState as useState70
 } from "react";
-import { Internals as Internals59 } from "remotion";
+import { Internals as Internals60 } from "remotion";
 
 // src/components/RenderQueue/client-side-render-types.ts
 var isRestoredClientJob = (job) => {
@@ -40786,21 +40961,21 @@ var isRestoredClientJob = (job) => {
 };
 
 // src/components/RenderQueue/RenderQueueCancelledMessage.tsx
-import { jsx as jsx200 } from "react/jsx-runtime";
+import { jsx as jsx201 } from "react/jsx-runtime";
 var cancelledStyle = {
   ...renderQueueItemSubtitleStyle,
   color: LIGHT_TEXT,
   cursor: "default"
 };
 var RenderQueueCancelledMessage = () => {
-  return /* @__PURE__ */ jsx200("span", {
+  return /* @__PURE__ */ jsx201("span", {
     style: cancelledStyle,
     children: "Cancelled"
   });
 };
 
 // src/components/RenderQueue/RenderQueueCopyToClipboard.tsx
-import { useCallback as useCallback118 } from "react";
+import { useCallback as useCallback119 } from "react";
 
 // src/helpers/get-asset-metadata.ts
 import { staticFile as staticFile5 } from "remotion";
@@ -40946,7 +41121,7 @@ var getAssetMetadata = async (canvasContent, addTime) => {
 };
 
 // src/components/RenderQueue/RenderQueueCopyToClipboard.tsx
-import { jsx as jsx201 } from "react/jsx-runtime";
+import { jsx as jsx202 } from "react/jsx-runtime";
 var revealIconStyle = {
   height: 12,
   color: CURRENT_COLOR
@@ -40968,14 +41143,14 @@ var supportsCopyingToClipboard = (job) => {
 };
 var RenderQueueCopyToClipboard = ({ job }) => {
   const { copied, markCopied } = useCopyFeedback();
-  const renderCopyAction = useCallback118((color) => {
-    return /* @__PURE__ */ jsx201(CopyIcon, {
+  const renderCopyAction = useCallback119((color) => {
+    return /* @__PURE__ */ jsx202(CopyIcon, {
       copied,
       style: revealIconStyle,
       color
     });
   }, [copied]);
-  const onClick = useCallback118(async (e) => {
+  const onClick = useCallback119(async (e) => {
     e.stopPropagation();
     try {
       const src = `${remotion_outputsBase}/${job.outName}`;
@@ -40996,19 +41171,25 @@ var RenderQueueCopyToClipboard = ({ job }) => {
       showNotification(`Could not copy to clipboard: ${err.message}`, 2000);
     }
   }, [job.outName, markCopied]);
-  return /* @__PURE__ */ jsx201(InlineAction, {
-    variant: null,
-    title: "Copy to clipboard",
-    renderAction: renderCopyAction,
-    onClick
+  return /* @__PURE__ */ jsx202(ActionTooltip, {
+    label: "Copy to clipboard",
+    shortcut: null,
+    delay: 800,
+    dismissOnClick: true,
+    children: /* @__PURE__ */ jsx202(InlineAction, {
+      "aria-label": "Copy to clipboard",
+      variant: null,
+      renderAction: renderCopyAction,
+      onClick
+    })
   });
 };
 
 // src/components/RenderQueue/RenderQueueDownloadItem.tsx
-import { useCallback as useCallback119, useMemo as useMemo114 } from "react";
-import { jsx as jsx202 } from "react/jsx-runtime";
+import { useCallback as useCallback120, useMemo as useMemo114 } from "react";
+import { jsx as jsx203 } from "react/jsx-runtime";
 var RenderQueueDownloadItem = ({ job }) => {
-  const onClick = useCallback119((e) => {
+  const onClick = useCallback120((e) => {
     e.stopPropagation();
     if (job.status !== "done" || !job.getBlob) {
       return;
@@ -41025,35 +41206,41 @@ var RenderQueueDownloadItem = ({ job }) => {
       color: CURRENT_COLOR
     };
   }, []);
-  const renderAction = useCallback119((color) => {
-    return /* @__PURE__ */ jsx202("svg", {
+  const renderAction = useCallback120((color) => {
+    return /* @__PURE__ */ jsx203("svg", {
       style: icon5,
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 512 512",
-      children: /* @__PURE__ */ jsx202("path", {
+      children: /* @__PURE__ */ jsx203("path", {
         fill: color,
         d: "M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"
       })
     });
   }, [icon5]);
-  return /* @__PURE__ */ jsx202(InlineAction, {
-    variant: null,
-    renderAction,
-    onClick,
-    title: "Download"
+  return /* @__PURE__ */ jsx203(ActionTooltip, {
+    label: "Download",
+    shortcut: null,
+    delay: 800,
+    dismissOnClick: true,
+    children: /* @__PURE__ */ jsx203(InlineAction, {
+      "aria-label": "Download",
+      variant: null,
+      renderAction,
+      onClick
+    })
   });
 };
 
 // src/components/RenderQueue/RenderQueueError.tsx
-import { useCallback as useCallback120, useContext as useContext72 } from "react";
-import { jsx as jsx203 } from "react/jsx-runtime";
+import { useCallback as useCallback121, useContext as useContext72 } from "react";
+import { jsx as jsx204 } from "react/jsx-runtime";
 var outputLocation = {
   ...renderQueueItemSubtitleStyle
 };
 var RenderQueueError = ({ job }) => {
   const { setSelectedModal } = useContext72(SetSelectedModalContext);
   const { tabIndex } = useZIndex();
-  const onClick = useCallback120(() => {
+  const onClick = useCallback121(() => {
     setSelectedModal({
       type: "render-progress",
       jobId: job.id
@@ -41062,7 +41249,7 @@ var RenderQueueError = ({ job }) => {
   if (job.status !== "failed") {
     throw new Error("should not have rendered this component");
   }
-  return /* @__PURE__ */ jsx203("button", {
+  return /* @__PURE__ */ jsx204("button", {
     onClick,
     type: "button",
     style: outputLocation,
@@ -41073,12 +41260,12 @@ var RenderQueueError = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueItemCancelButton.tsx
-import { useCallback as useCallback121, useContext as useContext73, useMemo as useMemo115 } from "react";
-import { jsx as jsx204 } from "react/jsx-runtime";
+import { useCallback as useCallback122, useContext as useContext73, useMemo as useMemo115 } from "react";
+import { jsx as jsx205 } from "react/jsx-runtime";
 var RenderQueueCancelButton = ({ job }) => {
   const isClientJob = isClientRenderJob(job);
   const { cancelClientJob } = useContext73(RenderQueueContext);
-  const onClick = useCallback121((e) => {
+  const onClick = useCallback122((e) => {
     e.stopPropagation();
     if (isClientJob) {
       cancelClientJob(job.id);
@@ -41094,27 +41281,34 @@ var RenderQueueCancelButton = ({ job }) => {
       color: CURRENT_COLOR
     };
   }, []);
-  const renderAction = useCallback121((color) => {
-    return /* @__PURE__ */ jsx204("svg", {
+  const renderAction = useCallback122((color) => {
+    return /* @__PURE__ */ jsx205("svg", {
       style: icon5,
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 512 512",
-      children: /* @__PURE__ */ jsx204("path", {
+      children: /* @__PURE__ */ jsx205("path", {
         fill: color,
         d: "M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512 114.6 512 256z"
       })
     });
   }, [icon5]);
-  return /* @__PURE__ */ jsx204(InlineAction, {
-    renderAction,
-    onClick,
-    variant: null
+  return /* @__PURE__ */ jsx205(ActionTooltip, {
+    label: "Cancel render",
+    shortcut: null,
+    delay: 800,
+    dismissOnClick: true,
+    children: /* @__PURE__ */ jsx205(InlineAction, {
+      "aria-label": "Cancel render",
+      renderAction,
+      onClick,
+      variant: null
+    })
   });
 };
 
 // src/components/RenderQueue/RenderQueueItemStatus.tsx
-import React128, { useCallback as useCallback122, useContext as useContext74 } from "react";
-import { jsx as jsx205 } from "react/jsx-runtime";
+import React129, { useCallback as useCallback123, useContext as useContext74 } from "react";
+import { jsx as jsx206 } from "react/jsx-runtime";
 var iconStyle3 = {
   height: RENDER_STATUS_INDICATOR_SIZE,
   width: RENDER_STATUS_INDICATOR_SIZE
@@ -41128,15 +41322,15 @@ var invisibleStyle = {
 };
 var RenderQueueItemStatus = ({ job }) => {
   const { setSelectedModal } = useContext74(SetSelectedModalContext);
-  const [hovered, setHovered] = React128.useState(false);
+  const [hovered, setHovered] = React129.useState(false);
   const isClientJob = isClientRenderJob(job);
-  const onPointerEnter = useCallback122(() => {
+  const onPointerEnter = useCallback123(() => {
     setHovered(true);
   }, []);
-  const onPointerLeave = useCallback122(() => {
+  const onPointerLeave = useCallback123(() => {
     setHovered(false);
   }, []);
-  const onClick = useCallback122((e) => {
+  const onClick = useCallback123((e) => {
     e.stopPropagation();
     setSelectedModal({
       type: "render-progress",
@@ -41144,14 +41338,14 @@ var RenderQueueItemStatus = ({ job }) => {
     });
   }, [job.id, setSelectedModal]);
   if (job.status === "failed") {
-    return /* @__PURE__ */ jsx205("button", {
+    return /* @__PURE__ */ jsx206("button", {
       type: "button",
       style: invisibleStyle,
       onClick,
-      children: /* @__PURE__ */ jsx205("svg", {
+      children: /* @__PURE__ */ jsx206("svg", {
         style: iconStyle3,
         viewBox: "0 0 512 512",
-        children: /* @__PURE__ */ jsx205("path", {
+        children: /* @__PURE__ */ jsx206("path", {
           fill: FAIL_COLOR,
           d: "M0 160V352L160 512H352L512 352V160L352 0H160L0 160zm353.9 32l-17 17-47 47 47 47 17 17L320 353.9l-17-17-47-47-47 47-17 17L158.1 320l17-17 47-47-47-47-17-17L192 158.1l17 17 47 47 47-47 17-17L353.9 192z"
         })
@@ -41159,26 +41353,26 @@ var RenderQueueItemStatus = ({ job }) => {
     });
   }
   if (job.status === "idle") {
-    return /* @__PURE__ */ jsx205("svg", {
+    return /* @__PURE__ */ jsx206("svg", {
       style: iconStyle3,
       viewBox: "0 0 512 512",
-      children: /* @__PURE__ */ jsx205("path", {
+      children: /* @__PURE__ */ jsx206("path", {
         fill: LIGHT_TEXT,
         d: "M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"
       })
     });
   }
   if (job.status === "done") {
-    return /* @__PURE__ */ jsx205("button", {
+    return /* @__PURE__ */ jsx206("button", {
       type: "button",
       style: invisibleStyle,
       onPointerEnter,
       onPointerLeave,
       onClick,
-      children: /* @__PURE__ */ jsx205("svg", {
+      children: /* @__PURE__ */ jsx206("svg", {
         style: iconStyle3,
         viewBox: "0 0 512 512",
-        children: /* @__PURE__ */ jsx205("path", {
+        children: /* @__PURE__ */ jsx206("path", {
           fill: hovered ? WHITE : LIGHT_TEXT,
           d: "M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337l-17 17-17-17-64-64-17-17L160 222.1l17 17 47 47L335 175l17-17L385.9 192l-17 17z"
         })
@@ -41192,30 +41386,30 @@ var RenderQueueItemStatus = ({ job }) => {
     } else {
       progressValue = job.progress.value;
     }
-    return /* @__PURE__ */ jsx205("button", {
+    return /* @__PURE__ */ jsx206("button", {
       type: "button",
       style: invisibleStyle,
       onClick,
-      children: /* @__PURE__ */ jsx205(CircularProgress, {
+      children: /* @__PURE__ */ jsx206(CircularProgress, {
         progress: Math.max(0.07, progressValue)
       })
     });
   }
   if (job.status === "saving") {
-    return /* @__PURE__ */ jsx205("button", {
+    return /* @__PURE__ */ jsx206("button", {
       type: "button",
       style: invisibleStyle,
       onClick,
-      children: /* @__PURE__ */ jsx205(CircularProgress, {
+      children: /* @__PURE__ */ jsx206(CircularProgress, {
         progress: 0.95
       })
     });
   }
   if (job.status === "cancelled") {
-    return /* @__PURE__ */ jsx205("svg", {
+    return /* @__PURE__ */ jsx206("svg", {
       style: iconStyle3,
       viewBox: "0 0 512 512",
-      children: /* @__PURE__ */ jsx205("path", {
+      children: /* @__PURE__ */ jsx206("path", {
         fill: FAIL_COLOR,
         d: "M0 160V352L160 512H352L512 352V160L352 0H160L0 160zm353.9 32l-17 17-47 47 47 47 17 17L320 353.9l-17-17-47-47-47 47-17 17L158.1 320l17-17 47-47-47-47-17-17L192 158.1l17 17 47 47 47-47 17-17L353.9 192z"
       })
@@ -41225,11 +41419,11 @@ var RenderQueueItemStatus = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueOpenInFolder.tsx
-import { useCallback as useCallback123, useMemo as useMemo116 } from "react";
-import { jsx as jsx206 } from "react/jsx-runtime";
+import { useCallback as useCallback124, useMemo as useMemo116 } from "react";
+import { jsx as jsx207 } from "react/jsx-runtime";
 var RenderQueueOpenInFinderItem = ({ job }) => {
   const isBrowserStudio = getBrowserStudioOperations() !== null;
-  const onClick = useCallback123((e) => {
+  const onClick = useCallback124((e) => {
     e.stopPropagation();
     openInFileExplorer({ directory: job.outName }).catch((err) => {
       showNotification(`Could not open file: ${err.message}`, 2000);
@@ -41241,22 +41435,29 @@ var RenderQueueOpenInFinderItem = ({ job }) => {
       color: CURRENT_COLOR
     };
   }, []);
-  const renderAction = useCallback123((color) => {
-    return /* @__PURE__ */ jsx206(ExpandedFolderIconSolid, {
+  const renderAction = useCallback124((color) => {
+    return /* @__PURE__ */ jsx207(ExpandedFolderIconSolid, {
       style: icon5,
       color
     });
   }, [icon5]);
-  return isBrowserStudio ? null : /* @__PURE__ */ jsx206(InlineAction, {
-    renderAction,
-    onClick,
-    variant: null
+  return isBrowserStudio ? null : /* @__PURE__ */ jsx207(ActionTooltip, {
+    label: "Open in Folder",
+    shortcut: null,
+    delay: 800,
+    dismissOnClick: true,
+    children: /* @__PURE__ */ jsx207(InlineAction, {
+      "aria-label": "Open in Folder",
+      renderAction,
+      onClick,
+      variant: null
+    })
   });
 };
 
 // src/components/RenderQueue/RenderQueueOutputName.tsx
 import { useMemo as useMemo117 } from "react";
-import { jsx as jsx207 } from "react/jsx-runtime";
+import { jsx as jsx208 } from "react/jsx-runtime";
 var RenderQueueOutputName = ({ job }) => {
   const deletedOutputLocation = "deletedOutputLocation" in job && job.deletedOutputLocation;
   const style4 = useMemo117(() => {
@@ -41273,7 +41474,7 @@ var RenderQueueOutputName = ({ job }) => {
     }
     return job.outName;
   };
-  return /* @__PURE__ */ jsx207("span", {
+  return /* @__PURE__ */ jsx208("span", {
     style: style4,
     title: getTitle(),
     children: job.outName
@@ -41281,7 +41482,7 @@ var RenderQueueOutputName = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueProgressMessage.tsx
-import { useCallback as useCallback124, useContext as useContext75 } from "react";
+import { useCallback as useCallback125, useContext as useContext75 } from "react";
 
 // src/components/RenderQueue/client-render-progress.ts
 var formatEtaString = (timeRemainingInMilliseconds) => {
@@ -41310,7 +41511,7 @@ var getClientRenderProgressMessage = (progress) => {
 };
 
 // src/components/RenderQueue/RenderQueueProgressMessage.tsx
-import { jsx as jsx208 } from "react/jsx-runtime";
+import { jsx as jsx209 } from "react/jsx-runtime";
 var outputLocation2 = {
   ...renderQueueItemSubtitleStyle
 };
@@ -41321,14 +41522,14 @@ var RenderQueueProgressMessage = ({ job }) => {
   const { setSelectedModal } = useContext75(SetSelectedModalContext);
   const { tabIndex } = useZIndex();
   const isClientJob = isClientRenderJob(job);
-  const onClick = useCallback124(() => {
+  const onClick = useCallback125(() => {
     setSelectedModal({
       type: "render-progress",
       jobId: job.id
     });
   }, [job.id, setSelectedModal]);
   const message = isClientJob ? getClientRenderProgressMessage(job.progress) : job.progress.message;
-  return /* @__PURE__ */ jsx208("button", {
+  return /* @__PURE__ */ jsx209("button", {
     onClick,
     type: "button",
     style: outputLocation2,
@@ -41339,8 +41540,8 @@ var RenderQueueProgressMessage = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueRemoveItem.tsx
-import { useCallback as useCallback125, useContext as useContext76, useMemo as useMemo118 } from "react";
-import { Internals as Internals58 } from "remotion";
+import { useCallback as useCallback126, useContext as useContext76, useMemo as useMemo118 } from "react";
+import { Internals as Internals59 } from "remotion";
 
 // src/api/save-render-output.ts
 var throwIfNotOk = async (response) => {
@@ -41376,13 +41577,13 @@ var unregisterClientRender = async (id) => {
 };
 
 // src/components/RenderQueue/RenderQueueRemoveItem.tsx
-import { jsx as jsx209 } from "react/jsx-runtime";
+import { jsx as jsx210 } from "react/jsx-runtime";
 var RenderQueueRemoveItem = ({ job }) => {
   const isClientJob = isClientRenderJob(job);
   const { removeClientJob } = useContext76(RenderQueueContext);
-  const { canvasContent } = useContext76(Internals58.CompositionManager);
-  const { setCanvasContent } = useContext76(Internals58.CompositionSetters);
-  const onClick = useCallback125((e) => {
+  const { canvasContent } = useContext76(Internals59.CompositionManager);
+  const { setCanvasContent } = useContext76(Internals59.CompositionSetters);
+  const onClick = useCallback126((e) => {
     e.stopPropagation();
     if (isClientJob) {
       if (canvasContent && canvasContent.type === "output" && job.status === "done" && canvasContent.path === `/${job.outName}`) {
@@ -41402,27 +41603,33 @@ var RenderQueueRemoveItem = ({ job }) => {
       color: CURRENT_COLOR
     };
   }, []);
-  const renderAction = useCallback125((color) => {
-    return /* @__PURE__ */ jsx209("svg", {
+  const renderAction = useCallback126((color) => {
+    return /* @__PURE__ */ jsx210("svg", {
       style: icon5,
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 320 512",
-      children: /* @__PURE__ */ jsx209("path", {
+      children: /* @__PURE__ */ jsx210("path", {
         fill: color,
         d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
       })
     });
   }, [icon5]);
-  return /* @__PURE__ */ jsx209(InlineAction, {
-    renderAction,
-    onClick,
-    title: "Remove",
-    variant: null
+  return /* @__PURE__ */ jsx210(ActionTooltip, {
+    label: "Clear",
+    shortcut: null,
+    delay: 800,
+    dismissOnClick: true,
+    children: /* @__PURE__ */ jsx210(InlineAction, {
+      "aria-label": "Clear",
+      renderAction,
+      onClick,
+      variant: null
+    })
   });
 };
 
 // src/components/RenderQueue/RenderQueueRepeat.tsx
-import { useCallback as useCallback126, useContext as useContext77, useMemo as useMemo119 } from "react";
+import { useCallback as useCallback127, useContext as useContext77, useMemo as useMemo119 } from "react";
 
 // src/helpers/retry-payload.ts
 import { NoReactInternals as NoReactInternals15 } from "remotion/no-react";
@@ -41627,11 +41834,11 @@ var makeClientRetryPayload = (job) => {
 };
 
 // src/components/RenderQueue/RenderQueueRepeat.tsx
-import { jsx as jsx210 } from "react/jsx-runtime";
+import { jsx as jsx211 } from "react/jsx-runtime";
 var RenderQueueRepeatItem = ({ job }) => {
   const { setSelectedModal } = useContext77(SetSelectedModalContext);
   const isClientJob = isClientRenderJob(job);
-  const onClick = useCallback126((e) => {
+  const onClick = useCallback127((e) => {
     e.stopPropagation();
     if (isClientJob) {
       const retryPayload = makeClientRetryPayload(job);
@@ -41647,31 +41854,38 @@ var RenderQueueRepeatItem = ({ job }) => {
       color: CURRENT_COLOR
     };
   }, []);
-  const renderAction = useCallback126((color) => {
-    return /* @__PURE__ */ jsx210("svg", {
+  const renderAction = useCallback127((color) => {
+    return /* @__PURE__ */ jsx211("svg", {
       style: icon5,
       viewBox: "0 0 512 512",
-      children: /* @__PURE__ */ jsx210("path", {
+      children: /* @__PURE__ */ jsx211("path", {
         fill: color,
         d: "M386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H464c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3s163.8-62.5 226.3 0L386.3 160z"
       })
     });
   }, [icon5]);
-  return /* @__PURE__ */ jsx210(InlineAction, {
-    onClick,
-    renderAction,
-    variant: null
+  return /* @__PURE__ */ jsx211(ActionTooltip, {
+    label: "Retry",
+    shortcut: null,
+    delay: 800,
+    dismissOnClick: true,
+    children: /* @__PURE__ */ jsx211(InlineAction, {
+      "aria-label": "Retry",
+      onClick,
+      renderAction,
+      variant: null
+    })
   });
 };
 
 // src/components/RenderQueue/RenderQueueSavingMessage.tsx
-import { jsx as jsx211 } from "react/jsx-runtime";
+import { jsx as jsx212 } from "react/jsx-runtime";
 var savingStyle = {
   ...renderQueueItemSubtitleStyle,
   cursor: "default"
 };
 var RenderQueueSavingMessage = () => {
-  return /* @__PURE__ */ jsx211("span", {
+  return /* @__PURE__ */ jsx212("span", {
     style: savingStyle,
     children: "Saving to out/..."
   });
@@ -41995,17 +42209,17 @@ function newError(Definition) {
 }
 function $constructor(name, initializer, proto, params) {
   const zodProto = {};
-  function Internals59(def) {
+  function Internals60(def) {
     this.def = def;
     this.constr = _;
     this.traits = new Set;
   }
-  Internals59.prototype = zodProto;
+  Internals60.prototype = zodProto;
   const protoMembers = proto;
   const initialized = protoMembers && new WeakSet;
   function init(inst, def) {
     if (!inst._zod) {
-      _zodDesc.value = new Internals59(def);
+      _zodDesc.value = new Internals60(def);
       try {
         Object.defineProperty(inst, "_zod", _zodDesc);
       } finally {
@@ -43907,6 +44121,7 @@ var makeElementDragData = ({
   dimensions,
   displayName,
   durationInFrames,
+  initialProps,
   slug,
   sourceCode,
   installationMode
@@ -43922,6 +44137,7 @@ var makeElementDragData = ({
       dimensions,
       displayName,
       ...durationInFrames === undefined ? {} : { durationInFrames },
+      initialProps,
       ...installationMode === undefined ? {} : { installationMode },
       slug,
       sourceCode
@@ -43937,12 +44153,48 @@ var elementInstallationModeSchema = union([
   literal("component-owned-sequence")
 ]);
 var durationSchema = number2().check(int(), _positive(), _lte(1e8));
+var elementInitialPropsSchema = record(string2(), unknown());
+var initialPropNameRegex = /^[A-Za-z_$][0-9A-Za-z_$]*$/;
+var componentOwnedInstallationProps = new Set([
+  "durationInFrames",
+  "from",
+  "name"
+]);
+var isJsonCompatibleValue = (value, seen) => {
+  if (value === null || typeof value === "string" || typeof value === "boolean") {
+    return true;
+  }
+  if (typeof value === "number") {
+    return Number.isFinite(value);
+  }
+  if (typeof value !== "object" || seen.has(value)) {
+    return false;
+  }
+  seen.add(value);
+  const valid = Array.isArray(value) ? value.every((item2) => isJsonCompatibleValue(item2, seen)) : Object.getPrototypeOf(value) === Object.prototype && Object.values(value).every((item2) => isJsonCompatibleValue(item2, seen));
+  seen.delete(value);
+  return valid;
+};
+var isElementInitialProps = (value) => value === null || !Array.isArray(value) && typeof value === "object" && value !== null && Object.keys(value).every((key) => initialPropNameRegex.test(key)) && isJsonCompatibleValue(value, new Set);
+var hasValidElementInitialPropsForInstallationMode = ({
+  initialProps,
+  installationMode
+}) => {
+  if (installationMode !== "component-owned-sequence" || initialProps === null) {
+    return true;
+  }
+  if (Object.keys(initialProps).some((name) => componentOwnedInstallationProps.has(name))) {
+    return false;
+  }
+  return initialProps.style === undefined || initialProps.style !== null && typeof initialProps.style === "object" && !Array.isArray(initialProps.style);
+};
 var elementDragDataSchema = object({
   type: literal("remotion-element"),
   version: literal(1),
   element: object({
     dependencies: array(unknown()).check(_maxLength(100)),
     durationInFrames: optional(durationSchema),
+    initialProps: optional(nullable(elementInitialPropsSchema)),
     installationMode: optional(elementInstallationModeSchema),
     slug: slugSchema,
     displayName: string2().check(_minLength(1), _maxLength(119)),
@@ -43963,11 +44215,19 @@ var parseElementDragData = (value) => {
       }
       dependencies.push(dependency);
     }
+    const initialProps = parsed.data.element.initialProps ?? null;
+    if (!isElementInitialProps(initialProps) || !hasValidElementInitialPropsForInstallationMode({
+      initialProps,
+      installationMode: parsed.data.element.installationMode
+    })) {
+      return null;
+    }
     return makeElementDragData({
       dependencies,
       dimensions: parsed.data.element.dimensions ?? null,
       displayName: parsed.data.element.displayName,
       durationInFrames: parsed.data.element.durationInFrames,
+      initialProps,
       slug: parsed.data.element.slug,
       sourceCode: parsed.data.element.sourceCode,
       installationMode: parsed.data.element.installationMode
@@ -44081,6 +44341,7 @@ var makeDragData = (input2) => {
         dimensions: input2.dimensions,
         displayName: input2.displayName,
         durationInFrames: input2.durationInFrames,
+        initialProps: input2.initialProps ?? null,
         slug: input2.slug,
         sourceCode: input2.sourceCode,
         installationMode: input2.installationMode
@@ -44171,11 +44432,24 @@ var parseStudioElementPayload = (value) => {
   if (!parsed.success) {
     return null;
   }
-  const element = parseElementDragData(JSON.stringify({
-    type: parsed.data.type,
-    version: parsed.data.version,
-    element: parsed.data.element
-  }));
+  if (typeof parsed.data.element !== "object" || parsed.data.element === null || Array.isArray(parsed.data.element)) {
+    return null;
+  }
+  const rawInitialProps = Object.hasOwn(parsed.data.element, "initialProps") ? parsed.data.element.initialProps : null;
+  if (!isElementInitialProps(rawInitialProps)) {
+    return null;
+  }
+  let serializedElement;
+  try {
+    serializedElement = JSON.stringify({
+      type: parsed.data.type,
+      version: parsed.data.version,
+      element: parsed.data.element
+    });
+  } catch {
+    return null;
+  }
+  const element = parseElementDragData(serializedElement);
   if (element === null)
     return null;
   const payload = {
@@ -44885,7 +45159,7 @@ var StudioProtocolInternals = {
 };
 
 // src/components/RenderQueue/use-render-output-file-drag.ts
-import { useCallback as useCallback127, useEffect as useEffect47, useMemo as useMemo120, useState as useState68 } from "react";
+import { useCallback as useCallback128, useEffect as useEffect48, useMemo as useMemo120, useState as useState69 } from "react";
 var MAXIMUM_SAFE_FILE_DRAG_SIZE = 500 * 1024 * 1024;
 var getFilename = (outName) => {
   return outName.split(/[/\\]/).at(-1) ?? outName;
@@ -44895,8 +45169,8 @@ var isChrome = () => {
 };
 var useRenderOutputFileDrag = (job) => {
   const deletedOutputLocation = "deletedOutputLocation" in job && job.deletedOutputLocation;
-  const [isDragging, setIsDragging] = useState68(false);
-  const [clientFile, setClientFile] = useState68(null);
+  const [isDragging, setIsDragging] = useState69(false);
+  const [clientFile, setClientFile] = useState69(null);
   const clientBlobInfo = useMemo120(() => {
     if (!isClientRenderJob(job) || job.status !== "done" || job.getBlob === undefined) {
       return null;
@@ -44907,7 +45181,7 @@ var useRenderOutputFileDrag = (job) => {
     };
   }, [job]);
   const clientJobWithBlob = clientBlobInfo !== null;
-  useEffect47(() => {
+  useEffect48(() => {
     if (!clientBlobInfo || clientBlobInfo.sizeInBytes <= 0 || clientBlobInfo.sizeInBytes > MAXIMUM_SAFE_FILE_DRAG_SIZE || typeof File === "undefined" || typeof URL.createObjectURL !== "function") {
       setClientFile(null);
       return;
@@ -44939,7 +45213,7 @@ var useRenderOutputFileDrag = (job) => {
   }, [clientBlobInfo, job.outName]);
   const canUseFileDrag = typeof DataTransfer !== "undefined" && typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(any-pointer: fine)").matches && navigator.maxTouchPoints === 0 && isChrome();
   const canDrag = canUseFileDrag && job.status === "done" && job.type !== "sequence" && !deletedOutputLocation && (clientJobWithBlob ? clientFile !== null : true);
-  const onDragStart = useCallback127((event) => {
+  const onDragStart = useCallback128((event) => {
     if (!canDrag) {
       event.preventDefault();
       return;
@@ -44970,14 +45244,14 @@ var useRenderOutputFileDrag = (job) => {
       event.preventDefault();
     }
   }, [canDrag, clientFile, job.outName]);
-  const onDragEnd = useCallback127(() => {
+  const onDragEnd = useCallback128(() => {
     setIsDragging(false);
   }, []);
   return { canDrag, isDragging, onDragEnd, onDragStart };
 };
 
 // src/components/RenderQueue/RenderQueueItem.tsx
-import { jsx as jsx212, jsxs as jsxs95, Fragment as Fragment33 } from "react/jsx-runtime";
+import { jsx as jsx213, jsxs as jsxs96, Fragment as Fragment34 } from "react/jsx-runtime";
 var container23 = {
   padding: 12,
   display: "flex",
@@ -45006,15 +45280,15 @@ var subtitle3 = {
   overflow: "hidden"
 };
 var RenderQueueItem = ({ job, selected }) => {
-  const [hovered, setHovered] = useState69(false);
-  const { setCanvasContent } = useContext78(Internals59.CompositionSetters);
+  const [hovered, setHovered] = useState70(false);
+  const { setCanvasContent } = useContext78(Internals60.CompositionSetters);
   const isClientJob = isClientRenderJob(job);
   const isBrowserStudio = getBrowserStudioOperations() !== null;
   const { canDrag, isDragging, onDragEnd, onDragStart } = useRenderOutputFileDrag(job);
-  const onPointerEnter = useCallback128(() => {
+  const onPointerEnter = useCallback129(() => {
     setHovered(true);
   }, []);
-  const onPointerLeave = useCallback128(() => {
+  const onPointerLeave = useCallback129(() => {
     setHovered(false);
   }, []);
   const isHoverable = job.status === "done" && (isClientJob || job.type !== "sequence");
@@ -45029,7 +45303,7 @@ var RenderQueueItem = ({ job, selected }) => {
       WebkitUserSelect: "none"
     };
   }, [hovered, isHoverable, selected]);
-  const scrollCurrentIntoView = useCallback128(() => {
+  const scrollCurrentIntoView = useCallback129(() => {
     document.querySelector(`.${RENDER_QUEUE_ITEM_SELECTED_CLASSNAME}`)?.scrollIntoView({ behavior: "smooth" });
   }, []);
   const clientBlobInfo = useMemo121(() => {
@@ -45043,7 +45317,7 @@ var RenderQueueItem = ({ job, selected }) => {
       sizeInBytes: job.metadata.sizeInBytes
     };
   }, [isClientJob, job]);
-  const onClick = useCallback128(() => {
+  const onClick = useCallback129(() => {
     if (job.status !== "done") {
       return;
     }
@@ -45085,14 +45359,14 @@ var RenderQueueItem = ({ job, selected }) => {
     selected,
     setCanvasContent
   ]);
-  useEffect48(() => {
+  useEffect49(() => {
     if (selected) {
       scrollCurrentIntoView();
     }
   }, [scrollCurrentIntoView, selected]);
   const canCopyToClipboard = job.status === "done" && !isClientJob && supportsCopyingToClipboard(job);
   const canRepeat = (job.status === "done" || job.status === "failed" || job.status === "cancelled") && !(isClientRenderJob(job) && isRestoredClientJob(job));
-  return /* @__PURE__ */ jsxs95(Row, {
+  return /* @__PURE__ */ jsxs96(Row, {
     "data-render-queue-item": job.id,
     onPointerEnter,
     onPointerLeave,
@@ -45104,50 +45378,50 @@ var RenderQueueItem = ({ job, selected }) => {
     onDragEnd,
     className: selected ? RENDER_QUEUE_ITEM_SELECTED_CLASSNAME : undefined,
     children: [
-      /* @__PURE__ */ jsx212(RenderQueueItemStatus, {
+      /* @__PURE__ */ jsx213(RenderQueueItemStatus, {
         job
       }),
-      /* @__PURE__ */ jsx212(Spacing, {
+      /* @__PURE__ */ jsx213(Spacing, {
         x: 1
       }),
-      /* @__PURE__ */ jsxs95("div", {
+      /* @__PURE__ */ jsxs96("div", {
         style: right2,
         children: [
-          /* @__PURE__ */ jsx212("div", {
+          /* @__PURE__ */ jsx213("div", {
             style: title2,
             children: job.compositionId
           }),
-          /* @__PURE__ */ jsx212("div", {
+          /* @__PURE__ */ jsx213("div", {
             style: subtitle3,
-            children: job.status === "done" ? /* @__PURE__ */ jsx212(RenderQueueOutputName, {
+            children: job.status === "done" ? /* @__PURE__ */ jsx213(RenderQueueOutputName, {
               job
-            }) : job.status === "failed" ? /* @__PURE__ */ jsx212(RenderQueueError, {
+            }) : job.status === "failed" ? /* @__PURE__ */ jsx213(RenderQueueError, {
               job
-            }) : job.status === "running" ? /* @__PURE__ */ jsx212(RenderQueueProgressMessage, {
+            }) : job.status === "running" ? /* @__PURE__ */ jsx213(RenderQueueProgressMessage, {
               job
-            }) : job.status === "saving" ? /* @__PURE__ */ jsx212(RenderQueueSavingMessage, {}) : job.status === "cancelled" ? /* @__PURE__ */ jsx212(RenderQueueCancelledMessage, {}) : null
+            }) : job.status === "saving" ? /* @__PURE__ */ jsx213(RenderQueueSavingMessage, {}) : job.status === "cancelled" ? /* @__PURE__ */ jsx213(RenderQueueCancelledMessage, {}) : null
           })
         ]
       }),
-      /* @__PURE__ */ jsx212(Spacing, {
+      /* @__PURE__ */ jsx213(Spacing, {
         x: 1
       }),
-      !isDragging ? /* @__PURE__ */ jsxs95(Fragment33, {
+      !isDragging ? /* @__PURE__ */ jsxs96(Fragment34, {
         children: [
-          canCopyToClipboard ? /* @__PURE__ */ jsx212(RenderQueueCopyToClipboard, {
+          canCopyToClipboard ? /* @__PURE__ */ jsx213(RenderQueueCopyToClipboard, {
             job
           }) : null,
-          canRepeat ? /* @__PURE__ */ jsx212(RenderQueueRepeatItem, {
+          canRepeat ? /* @__PURE__ */ jsx213(RenderQueueRepeatItem, {
             job
           }) : null,
-          job.status === "running" ? /* @__PURE__ */ jsx212(RenderQueueCancelButton, {
+          job.status === "running" ? /* @__PURE__ */ jsx213(RenderQueueCancelButton, {
             job
-          }) : isBrowserStudio ? null : /* @__PURE__ */ jsx212(RenderQueueRemoveItem, {
+          }) : isBrowserStudio ? null : /* @__PURE__ */ jsx213(RenderQueueRemoveItem, {
             job
           }),
-          job.status === "done" ? clientBlobInfo ? /* @__PURE__ */ jsx212(RenderQueueDownloadItem, {
+          job.status === "done" ? clientBlobInfo ? /* @__PURE__ */ jsx213(RenderQueueDownloadItem, {
             job
-          }) : isBrowserStudio ? null : /* @__PURE__ */ jsx212(RenderQueueOpenInFinderItem, {
+          }) : isBrowserStudio ? null : /* @__PURE__ */ jsx213(RenderQueueOpenInFinderItem, {
             job
           }) : null
         ]
@@ -45160,15 +45434,15 @@ var RenderQueueItem = ({ job, selected }) => {
 var isVideoMattingJob = (job) => job.type === "video-matting";
 
 // src/components/RenderQueue/VideoMattingQueueItem.tsx
-import { useCallback as useCallback129, useContext as useContext79, useMemo as useMemo122, useState as useState70 } from "react";
+import { useCallback as useCallback130, useContext as useContext79, useMemo as useMemo122, useState as useState71 } from "react";
 
 // src/icons/ellipsis.tsx
-import { jsx as jsx213 } from "react/jsx-runtime";
+import { jsx as jsx214 } from "react/jsx-runtime";
 var EllipsisIcon = (props) => {
-  return /* @__PURE__ */ jsx213("svg", {
+  return /* @__PURE__ */ jsx214("svg", {
     ...props.svgProps,
     viewBox: "0 0 448 512",
-    children: /* @__PURE__ */ jsx213("path", {
+    children: /* @__PURE__ */ jsx214("path", {
       fill: props.fill,
       d: "M448 256a48 48 0 1 1-96 0 48 48 0 1 1 96 0zm-176 0a48 48 0 1 1-96 0 48 48 0 1 1 96 0zM48 304a48 48 0 1 1 0-96 48 48 0 1 1 0 96z"
     })
@@ -45176,7 +45450,7 @@ var EllipsisIcon = (props) => {
 };
 
 // src/components/RenderQueue/VideoMattingQueueItem.tsx
-import { jsx as jsx214, jsxs as jsxs96 } from "react/jsx-runtime";
+import { jsx as jsx215, jsxs as jsxs97 } from "react/jsx-runtime";
 var container24 = {
   borderRadius: 4,
   display: "flex",
@@ -45213,7 +45487,7 @@ var ellipsisIconStyle = {
 };
 var Status = ({ job }) => {
   if (job.status === "running") {
-    return /* @__PURE__ */ jsx214("div", {
+    return /* @__PURE__ */ jsx215("div", {
       style: statusIcon2,
       role: "progressbar",
       "aria-label": "Video matting progress",
@@ -45221,33 +45495,33 @@ var Status = ({ job }) => {
       "aria-valuemax": 100,
       "aria-valuenow": Math.round(job.progress.value * 100),
       "aria-valuetext": job.progress.message,
-      children: /* @__PURE__ */ jsx214(CircularProgress, {
+      children: /* @__PURE__ */ jsx215(CircularProgress, {
         progress: Math.max(0.07, job.progress.value)
       })
     });
   }
   if (job.status === "done")
-    return /* @__PURE__ */ jsx214(SuccessIcon, {});
+    return /* @__PURE__ */ jsx215(SuccessIcon, {});
   if (job.status === "failed")
-    return /* @__PURE__ */ jsx214("svg", {
+    return /* @__PURE__ */ jsx215("svg", {
       style: statusIcon2,
       viewBox: "0 0 512 512",
-      children: /* @__PURE__ */ jsx214("path", {
+      children: /* @__PURE__ */ jsx215("path", {
         fill: FAIL_COLOR,
         d: "M0 160V352L160 512H352L512 352V160L352 0H160L0 160zm353.9 32-64 64 64 64L320 353.9l-64-64-64 64L158.1 320l64-64-64-64L192 158.1l64 64 64-64z"
       })
     });
-  return /* @__PURE__ */ jsx214("svg", {
+  return /* @__PURE__ */ jsx215("svg", {
     style: statusIcon2,
     viewBox: "0 0 512 512",
-    children: /* @__PURE__ */ jsx214("path", {
+    children: /* @__PURE__ */ jsx215("path", {
       fill: LIGHT_TEXT,
       d: "M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0s256 114.6 256 256-114.6 256-256 256zM232 120v136c0 8 4 15.5 10.7 20l96 64 26.6-39.9-85.3-56.9V120z"
     })
   });
 };
 var VideoMattingQueueItem = ({ job, selected }) => {
-  const [hovered, setHovered] = useState70(false);
+  const [hovered, setHovered] = useState71(false);
   const { removeVideoMattingJob } = useContext79(RenderQueueContext);
   const selectAsset = useSelectAsset();
   const done = job.status === "done";
@@ -45262,11 +45536,11 @@ var VideoMattingQueueItem = ({ job, selected }) => {
   const messages = job.status === "idle" ? ["Queued for video matting"] : job.status === "running" ? [job.progress.message, job.progress.detail].filter((message) => message !== null) : job.status === "failed" ? [job.error.message] : [job.baseOutName, job.foregroundOutName];
   const tooltip = messages.join(`
 `);
-  const revealAsset = useCallback129((assetName) => {
+  const revealAsset = useCallback130((assetName) => {
     selectAsset(assetName);
     pushUrl(`/assets/${assetName}`);
   }, [selectAsset]);
-  const onClick = useCallback129(() => {
+  const onClick = useCallback130(() => {
     if (!done)
       return;
     revealAsset(job.foregroundOutName);
@@ -45299,19 +45573,19 @@ var VideoMattingQueueItem = ({ job, selected }) => {
       }
     ];
   }, [job.baseOutName, job.foregroundOutName, revealAsset]);
-  const onRemove = useCallback129((event) => {
+  const onRemove = useCallback130((event) => {
     event.stopPropagation();
     removeVideoMattingJob(job.id);
   }, [job.id, removeVideoMattingJob]);
-  const renderRemove = useCallback129((color) => /* @__PURE__ */ jsx214("svg", {
+  const renderRemove = useCallback130((color) => /* @__PURE__ */ jsx215("svg", {
     style: removeIcon2,
     viewBox: "0 0 320 512",
-    children: /* @__PURE__ */ jsx214("path", {
+    children: /* @__PURE__ */ jsx215("path", {
       fill: color,
       d: "M310.6 150.6 205.3 256l105.3 105.4-45.3 45.3L160 301.3 54.6 406.6 9.4 361.4 114.7 256 9.4 150.6l45.2-45.2L160 210.7l105.3-105.3z"
     })
   }), []);
-  return /* @__PURE__ */ jsxs96(Row, {
+  return /* @__PURE__ */ jsxs97(Row, {
     "data-render-queue-item": job.id,
     style: style4,
     align: "center",
@@ -45319,53 +45593,65 @@ var VideoMattingQueueItem = ({ job, selected }) => {
     onPointerEnter: () => setHovered(true),
     onPointerLeave: () => setHovered(false),
     children: [
-      /* @__PURE__ */ jsx214(Status, {
+      /* @__PURE__ */ jsx215(Status, {
         job
       }),
-      /* @__PURE__ */ jsx214(Spacing, {
+      /* @__PURE__ */ jsx215(Spacing, {
         x: 1
       }),
-      /* @__PURE__ */ jsxs96("div", {
+      /* @__PURE__ */ jsxs97("div", {
         style: right3,
         children: [
-          /* @__PURE__ */ jsx214("div", {
+          /* @__PURE__ */ jsx215("div", {
             style: title3,
             children: job.displayName
           }),
-          /* @__PURE__ */ jsx214("div", {
+          /* @__PURE__ */ jsx215("div", {
             style: subtitles,
             title: tooltip,
-            children: messages.map((message) => /* @__PURE__ */ jsx214("span", {
+            children: messages.map((message) => /* @__PURE__ */ jsx215("span", {
               style: subtitle4,
               children: message
             }, message))
           })
         ]
       }),
-      /* @__PURE__ */ jsx214(Spacing, {
+      /* @__PURE__ */ jsx215(Spacing, {
         x: 1
       }),
-      done ? /* @__PURE__ */ jsx214(InlineDropdown, {
-        renderAction: (color) => /* @__PURE__ */ jsx214(EllipsisIcon, {
-          fill: color,
-          svgProps: ellipsisIconStyle
-        }),
-        title: "Reveal video layer",
-        values: revealItems,
-        variant: null
+      done ? /* @__PURE__ */ jsx215(ActionTooltip, {
+        label: "Reveal video layer",
+        shortcut: null,
+        delay: 800,
+        dismissOnClick: true,
+        children: /* @__PURE__ */ jsx215(InlineDropdown, {
+          renderAction: (color) => /* @__PURE__ */ jsx215(EllipsisIcon, {
+            fill: color,
+            svgProps: ellipsisIconStyle
+          }),
+          "aria-label": "Reveal video layer",
+          values: revealItems,
+          variant: null
+        })
       }) : null,
-      job.status === "running" ? null : /* @__PURE__ */ jsx214(InlineAction, {
-        renderAction: renderRemove,
-        onClick: onRemove,
-        title: "Remove",
-        variant: null
+      job.status === "running" ? null : /* @__PURE__ */ jsx215(ActionTooltip, {
+        label: "Clear",
+        shortcut: null,
+        delay: 800,
+        dismissOnClick: true,
+        children: /* @__PURE__ */ jsx215(InlineAction, {
+          renderAction: renderRemove,
+          onClick: onRemove,
+          "aria-label": "Clear",
+          variant: null
+        })
       })
     ]
   });
 };
 
 // src/components/RenderQueue/index.tsx
-import { jsx as jsx215, jsxs as jsxs97 } from "react/jsx-runtime";
+import { jsx as jsx216, jsxs as jsxs98 } from "react/jsx-runtime";
 var errorExplanation3 = {
   fontSize: 13,
   color: LIGHT_TEXT,
@@ -45391,12 +45677,12 @@ var renderQueue = {
 };
 var RenderQueue = () => {
   const { jobs, captionJobs, videoMattingJobs } = useContext80(RenderQueueContext);
-  const { canvasContent } = useContext80(Internals60.CompositionManager);
+  const { canvasContent } = useContext80(Internals61.CompositionManager);
   const allJobs = useMemo123(() => [...jobs, ...captionJobs, ...videoMattingJobs].sort((a, b) => a.startedAt - b.startedAt), [jobs, captionJobs, videoMattingJobs]);
-  const previousJobCount = React136.useRef(allJobs.length);
+  const previousJobCount = React137.useRef(allJobs.length);
   const jobCount = allJobs.length;
-  const divRef = React136.useRef(null);
-  useEffect49(() => {
+  const divRef = React137.useRef(null);
+  useEffect50(() => {
     if (!divRef.current) {
       return;
     }
@@ -45437,35 +45723,35 @@ var RenderQueue = () => {
     return -1;
   }, [allJobs, canvasContent]);
   if (jobCount === 0) {
-    return /* @__PURE__ */ jsxs97("div", {
+    return /* @__PURE__ */ jsxs98("div", {
       style: explainer4,
       children: [
-        /* @__PURE__ */ jsx215(Spacing, {
+        /* @__PURE__ */ jsx216(Spacing, {
           y: 5
         }),
-        /* @__PURE__ */ jsx215("div", {
+        /* @__PURE__ */ jsx216("div", {
           style: errorExplanation3,
           children: "Renders, transcriptions and video matting jobs will show up here."
         }),
-        /* @__PURE__ */ jsx215(Spacing, {
+        /* @__PURE__ */ jsx216(Spacing, {
           y: 2,
           block: true
         })
       ]
     });
   }
-  return /* @__PURE__ */ jsx215("div", {
+  return /* @__PURE__ */ jsx216("div", {
     ref: divRef,
     style: renderQueue,
     className: ["css-reset", VERTICAL_SCROLLBAR_CLASSNAME].join(" "),
     children: allJobs.map((job, index) => {
-      return isCaptionJob(job) ? /* @__PURE__ */ jsx215(CaptionQueueItem, {
+      return isCaptionJob(job) ? /* @__PURE__ */ jsx216(CaptionQueueItem, {
         job,
         selected: selectedJob === index
-      }, job.id) : isVideoMattingJob(job) ? /* @__PURE__ */ jsx215(VideoMattingQueueItem, {
+      }, job.id) : isVideoMattingJob(job) ? /* @__PURE__ */ jsx216(VideoMattingQueueItem, {
         job,
         selected: selectedJob === index
-      }, job.id) : /* @__PURE__ */ jsx215(RenderQueueItem, {
+      }, job.id) : /* @__PURE__ */ jsx216(RenderQueueItem, {
         selected: selectedJob === index,
         job
       }, job.id);
@@ -45477,8 +45763,8 @@ var RenderQueue = () => {
 import { useContext as useContext81, useMemo as useMemo125 } from "react";
 
 // src/components/Tabs/index.tsx
-import { useCallback as useCallback130, useMemo as useMemo124, useState as useState71 } from "react";
-import { jsx as jsx216 } from "react/jsx-runtime";
+import { useCallback as useCallback131, useMemo as useMemo124, useState as useState72 } from "react";
+import { jsx as jsx217 } from "react/jsx-runtime";
 var tabsContainer = {
   display: "flex",
   flexDirection: "row"
@@ -45490,7 +45776,7 @@ var Tabs = ({ children, style: style4 }) => {
       ...style4
     };
   }, [style4]);
-  return /* @__PURE__ */ jsx216("div", {
+  return /* @__PURE__ */ jsx217("div", {
     style: definiteStyle,
     children
   });
@@ -45511,12 +45797,12 @@ var selectorButton = {
   WebkitUserSelect: "none"
 };
 var Tab = ({ children, onClick, onDragEnter, onDragLeave, style: style4, selected }) => {
-  const [hovered, setHovered] = useState71(false);
+  const [hovered, setHovered] = useState72(false);
   const { tabIndex } = useZIndex();
-  const onPointerEnter = useCallback130(() => {
+  const onPointerEnter = useCallback131(() => {
     setHovered(true);
   }, []);
-  const onPointerLeave = useCallback130(() => {
+  const onPointerLeave = useCallback131(() => {
     setHovered(false);
   }, []);
   const definiteStyle = useMemo124(() => ({
@@ -45527,7 +45813,7 @@ var Tab = ({ children, onClick, onDragEnter, onDragLeave, style: style4, selecte
     boxShadow: selected ? "none" : undefined,
     ...style4
   }), [hovered, selected, style4]);
-  return /* @__PURE__ */ jsx216("div", {
+  return /* @__PURE__ */ jsx217("div", {
     style: definiteStyle,
     role: "button",
     onClick,
@@ -45541,7 +45827,7 @@ var Tab = ({ children, onClick, onDragEnter, onDragLeave, style: style4, selecte
 };
 
 // src/components/RendersTab.tsx
-import { jsx as jsx217, jsxs as jsxs98, Fragment as Fragment34 } from "react/jsx-runtime";
+import { jsx as jsx218, jsxs as jsxs99, Fragment as Fragment35 } from "react/jsx-runtime";
 var row4 = {
   display: "flex",
   flexDirection: "row",
@@ -45573,17 +45859,17 @@ var RendersTab = ({ selected, onClick }) => {
       borderColor: LIGHT_TEXT
     };
   }, [failedJobs]);
-  return /* @__PURE__ */ jsx217(Tab, {
+  return /* @__PURE__ */ jsx218(Tab, {
     selected,
     onClick,
-    children: /* @__PURE__ */ jsxs98("div", {
+    children: /* @__PURE__ */ jsxs99("div", {
       style: row4,
       children: [
         "Jobs",
-        jobCount > 0 ? /* @__PURE__ */ jsxs98(Fragment34, {
+        jobCount > 0 ? /* @__PURE__ */ jsxs99(Fragment35, {
           children: [
-            /* @__PURE__ */ jsx217(Flex, {}),
-            /* @__PURE__ */ jsx217("div", {
+            /* @__PURE__ */ jsx218(Flex, {}),
+            /* @__PURE__ */ jsx218("div", {
               style: badgeStyle,
               children: jobCount
             })
@@ -45595,7 +45881,7 @@ var RendersTab = ({ selected, onClick }) => {
 };
 
 // src/components/OptionsPanel.tsx
-import { jsx as jsx218, jsxs as jsxs99 } from "react/jsx-runtime";
+import { jsx as jsx219, jsxs as jsxs100 } from "react/jsx-runtime";
 var localStorageKey = "remotion.sidebarPanel";
 var getSelectedPanel = () => {
   const panel = localStorage.getItem(localStorageKey);
@@ -45611,7 +45897,7 @@ var persistSelectedOptionsSidebarPanel = (panel) => {
   localStorage.setItem(localStorageKey, panel);
 };
 var OptionsPanel = ({ readOnlyStudio }) => {
-  const { props, updateProps } = useContext82(Internals61.EditorPropsContext);
+  const { props, updateProps } = useContext82(Internals62.EditorPropsContext);
   const isMobileLayout = useMobileLayout();
   const container25 = useMemo126(() => ({
     height: "100%",
@@ -45621,12 +45907,12 @@ var OptionsPanel = ({ readOnlyStudio }) => {
     flexDirection: "column",
     flex: 1
   }), [isMobileLayout]);
-  const [panel, setPanel] = useState72(getSelectedPanel);
-  const onInspectorSelected = useCallback131(() => {
+  const [panel, setPanel] = useState73(getSelectedPanel);
+  const onInspectorSelected = useCallback132(() => {
     setPanel("inspector");
     persistSelectedOptionsSidebarPanel("inspector");
   }, []);
-  const onRendersSelected = useCallback131(() => {
+  const onRendersSelected = useCallback132(() => {
     setPanel("renders");
     persistSelectedOptionsSidebarPanel("renders");
   }, []);
@@ -45642,7 +45928,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
       }
     };
   }, []);
-  const { compositions, canvasContent } = useContext82(Internals61.CompositionManager);
+  const { compositions, canvasContent } = useContext82(Internals62.CompositionManager);
   const composition = useMemo126(() => {
     if (canvasContent === null || canvasContent.type !== "composition") {
       return null;
@@ -45674,7 +45960,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
     }
     return props[composition.id] ?? composition.defaultProps ?? {};
   }, [composition, props]);
-  const saveToFile = useCallback131((updater) => {
+  const saveToFile = useCallback132((updater) => {
     if (readOnlyStudio) {
       return;
     }
@@ -45713,7 +45999,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
     }
     return !deepEqual(composition.defaultProps, currentDefaultProps);
   }, [readOnlyStudio, composition, currentDefaultProps]);
-  const resetToOriginal = useCallback131(() => {
+  const resetToOriginal = useCallback132(() => {
     if (!composition) {
       return;
     }
@@ -45723,7 +46009,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
       newProps: composition.defaultProps ?? {}
     });
   }, [composition, updateProps]);
-  const setDefaultProps = useCallback131((updater, { shouldSave }) => {
+  const setDefaultProps = useCallback132((updater, { shouldSave }) => {
     updateProps({
       id: compositionId,
       defaultProps: compositionDefaultProps,
@@ -45733,42 +46019,42 @@ var OptionsPanel = ({ readOnlyStudio }) => {
       saveToFile(updater);
     }
   }, [compositionId, compositionDefaultProps, saveToFile, updateProps]);
-  const onPointerDown = useCallback131((e) => {
+  const onPointerDown = useCallback132((e) => {
     e.stopPropagation();
   }, []);
-  return /* @__PURE__ */ jsxs99("div", {
+  return /* @__PURE__ */ jsxs100("div", {
     style: container25,
     className: "css-reset",
     onPointerDown,
     children: [
-      /* @__PURE__ */ jsx218("div", {
+      /* @__PURE__ */ jsx219("div", {
         style: tabsContainer2,
-        children: /* @__PURE__ */ jsxs99(Tabs, {
+        children: /* @__PURE__ */ jsxs100(Tabs, {
           children: [
-            /* @__PURE__ */ jsxs99(Tab, {
+            /* @__PURE__ */ jsxs100(Tab, {
               selected: panel === "inspector",
               onClick: onInspectorSelected,
               style: { justifyContent: "space-between" },
               children: [
                 "Inspector",
-                hasLocalModifications ? /* @__PURE__ */ jsx218(SchemaResetButton, {
+                hasLocalModifications ? /* @__PURE__ */ jsx219(SchemaResetButton, {
                   onClick: resetToOriginal
                 }) : null
               ]
             }),
-            /* @__PURE__ */ jsx218(RendersTab, {
+            /* @__PURE__ */ jsx219(RendersTab, {
               onClick: onRendersSelected,
               selected: panel === "renders"
             })
           ]
         })
       }),
-      panel === "inspector" ? /* @__PURE__ */ jsx218(InspectorPanel, {
+      panel === "inspector" ? /* @__PURE__ */ jsx219(InspectorPanel, {
         composition,
         currentDefaultProps,
         readOnlyStudio,
         setDefaultProps
-      }) : /* @__PURE__ */ jsx218(RenderQueue, {})
+      }) : /* @__PURE__ */ jsx219(RenderQueue, {})
     ]
   });
 };
@@ -45820,14 +46106,14 @@ var validatePublicOutputName = ({
 };
 
 // src/components/NewComposition/DismissableModal.tsx
-import { useCallback as useCallback132, useContext as useContext83 } from "react";
-import { jsx as jsx219 } from "react/jsx-runtime";
+import { useCallback as useCallback133, useContext as useContext83 } from "react";
+import { jsx as jsx220 } from "react/jsx-runtime";
 var DismissableModal = ({ children, panelStyle, ariaLabel }) => {
   const { setSelectedModal } = useContext83(SetSelectedModalContext);
-  const onQuit = useCallback132(() => {
+  const onQuit = useCallback133(() => {
     setSelectedModal(null);
   }, [setSelectedModal]);
-  return /* @__PURE__ */ jsx219(ModalContainer, {
+  return /* @__PURE__ */ jsx220(ModalContainer, {
     ariaLabel,
     onOutsideClick: onQuit,
     onEscape: onQuit,
@@ -45837,8 +46123,8 @@ var DismissableModal = ({ children, panelStyle, ariaLabel }) => {
 };
 
 // src/components/Tabs/vertical.tsx
-import { useCallback as useCallback133, useMemo as useMemo127, useState as useState73 } from "react";
-import { jsxs as jsxs100 } from "react/jsx-runtime";
+import { useCallback as useCallback134, useMemo as useMemo127, useState as useState74 } from "react";
+import { jsxs as jsxs101 } from "react/jsx-runtime";
 var selectorButton2 = {
   border: "none",
   flex: 1,
@@ -45854,12 +46140,12 @@ var selectorButton2 = {
   WebkitUserSelect: "none"
 };
 var VerticalTab = ({ children, onClick, renderIcon, style: style4, selected, autoFocus }) => {
-  const [hovered, setHovered] = useState73(false);
+  const [hovered, setHovered] = useState74(false);
   const { tabIndex } = useZIndex();
-  const onPointerEnter = useCallback133(() => {
+  const onPointerEnter = useCallback134(() => {
     setHovered(true);
   }, []);
-  const onPointerLeave = useCallback133(() => {
+  const onPointerLeave = useCallback134(() => {
     setHovered(false);
   }, []);
   const color = selected || hovered ? WHITE : LIGHT_TEXT;
@@ -45872,7 +46158,7 @@ var VerticalTab = ({ children, onClick, renderIcon, style: style4, selected, aut
       ...style4
     };
   }, [color, hovered, selected, style4]);
-  return /* @__PURE__ */ jsxs100("button", {
+  return /* @__PURE__ */ jsxs101("button", {
     autoFocus,
     style: definiteStyle,
     type: "button",
@@ -45888,7 +46174,7 @@ var VerticalTab = ({ children, onClick, renderIcon, style: style4, selected, aut
 };
 
 // src/components/RenderModal/RenderModalHr.tsx
-import { jsx as jsx220 } from "react/jsx-runtime";
+import { jsx as jsx221 } from "react/jsx-runtime";
 var hrStyle = {
   margin: "0 0 0 0",
   padding: "0 0 0 0",
@@ -45900,24 +46186,24 @@ var hrStyle = {
   marginBottom: 8
 };
 var RenderModalHr = () => {
-  return /* @__PURE__ */ jsx220("div", {
+  return /* @__PURE__ */ jsx221("div", {
     style: hrStyle
   });
 };
 
 // src/icons/models.tsx
-import { jsx as jsx221 } from "react/jsx-runtime";
+import { jsx as jsx222 } from "react/jsx-runtime";
 var ModelsIcon = ({
   color,
   ...props
-}) => /* @__PURE__ */ jsx221("svg", {
+}) => /* @__PURE__ */ jsx222("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 512 512",
   ...props,
-  children: /* @__PURE__ */ jsx221("path", {
+  children: /* @__PURE__ */ jsx222("path", {
     d: "M176 16c0-8.8-7.2-16-16-16s-16 7.2-16 16v48h-16c-35.3 0-64 28.7-64 64v16H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h48v64H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h48v64H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h48v16c0 35.3 28.7 64 64 64h16v48c0 8.8 7.2 16 16 16s16-7.2 16-16v-48h64v48c0 8.8 7.2 16 16 16s16-7.2 16-16v-48h64v48c0 8.8 7.2 16 16 16s16-7.2 16-16v-48h16c35.3 0 64-28.7 64-64v-16h48c8.8 0 16-7.2 16-16s-7.2-16-16-16h-48v-64h48c8.8 0 16-7.2 16-16s-7.2-16-16-16h-48v-64h48c8.8 0 16-7.2 16-16s-7.2-16-16-16h-48v-16c0-35.3-28.7-64-64-64h-16V16c0-8.8-7.2-16-16-16s-16 7.2-16 16v48h-64V16c0-8.8-7.2-16-16-16s-16 7.2-16 16v48h-64V16ZM416 128v256c0 17.7-14.3 32-32 32H128c-17.7 0-32-14.3-32-32V128c0-17.7 14.3-32 32-32h256c17.7 0 32 14.3 32 32ZM192 160c-17.7 0-32 14.3-32 32v128c0 17.7 14.3 32 32 32h128c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32H192Zm128 32v128H192V192h128Z",
     fill: color ?? CURRENT_COLOR_LOWERCASE
   })
 });
 
-export { getPortal, showNotification, NotificationCenter, subscribeToPreviewServerEvents, getNavigationWindow, pushUrl, clearUrl, reloadUrl, StudioServerConnectionCtx, PreviewServerConnection, useStudioConfigRevision, noop, compositionListRenderedRef, CompositionListContext, CompositionListProvider, ScaleLockContext, ScaleLockProvider, getCurrentZoom, setCurrentZoom, getCurrentFrame, setCurrentFrame, getCurrentDuration, setCurrentDuration, getCurrentFps, setCurrentFps, sliderAreaRef, scrollableRef, timelineVerticalScroll, TIMELINE_PADDING, TIMELINE_BORDER, TIMELINE_ITEM_BORDER_BOTTOM, buildTimelineTree, flattenVisibleTreeNodes, getTreeRowHeight, TIMELINE_LAYER_FILMSTRIP_HEIGHT, TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT, TIMELINE_LAYER_HEIGHT_AUDIO, TIMELINE_LIST_ITEM_ROW_HEIGHT, getTimelineLayerHeight, getXPositionOfItemInTimelineImperatively, TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM, getTimelineMinZoom, clampTimelineZoom, getTimelineZoom, getTimelineWidth, timelineZoomToNormalized, timelineZoomToSliderValue, normalizedToTimelineZoom, sliderValueToTimelineZoom, TIMELINE_ZOOM_SLIDER_PROPS, TimelineWidthContext, TimelineWidthProvider, redrawTimelineSliderFast, TimelineSlider, getTimelineContentWidth, EDGE_SCROLL_VERTICAL_INCREMENT, startTimelineEdgeAutoScroll, getFrameWhileScrollingLeft, isCursorInViewport, ensureFrameIsInViewport, scrollToTimelineXOffset, getScrollPositionForCursorOnLeftEdge, getScrollPositionForCursorOnRightEdge, getFrameIncrementFromWidth, getFrameWhileScrollingRight, getFrameFromX, getFrameFromTimelineDrop, viewportClientXToScrollContentX, ZoomPersistor, TimelineZoomCtx, TimelineZoomContext, SelectedModalContext, SetSelectedModalContext, StudioProtocolInternals, Transform3DModeStateContext, Transform3DModeStateProvider, calculateTimeline, timelineNodePathInfoToKey, timelineSequenceNodePathToKey, ModalHeader, toggleBooleanMapKey, openFolderKey, persistExpandedFolders, ExpandedFoldersContext, buildAssetFolderStructure, getKeysToExpand, createFolderTree, sortFolderTreeAlphabetically, FolderContext, FolderContextProvider, CollapsedFolderIcon, ExpandedFolderIcon, ExpandedFolderIconSolid, getRelativeFileLocation, formatFileLocation, formatContextForAgents, getOriginalPosition, getSourceMap, parseError, getOriginalLocationFromStack, openInEditor, openInCodingAgent, openOriginalPositionInEditor, useCachedCompositionComponentInfo, preloadCompositionComponentInfo, getOpenInNewWindowMenuItem, getCompositionMenuItems, getCompositionContextMenuItems, EllipsisIcon, useMobileLayout, menuContainerTowardsBottom, outerPortal, inlineCodeSnippet, MenuDivider, CaretDown, MenuContent, InlineDropdown, isCompositionStill, StillIcon, FilmIcon, CompositionOrStillIcon, ContextMenu, ContextMenuForTarget, hasResolvedStack, useResolvedStack, canShowUpdates, useUpdateStatus, SettingsProvider, useSettings, getPreferredEditorId, useEditorOpening, useDefaultCodingAgentInfo, explorerSidebarTabs, useSelectAsset, StaticFilesProvider, useStaticFiles, useSelectComposition, InitialCompositionLoader, Checkmark, ExpandedTracksGetterContext, ExpandedTracksSetterContext, ExpandedTracksProvider, optionsSidebarTabs, getKeyframeDisplayOffset, getNodeKeyframes, getNodeHasKeyframes, getTimelineEasingSegments, parseKeyframeFieldFromNodePath, filterTimelineExpandedTree, getSelectedTimelineExpandedRowKeys, isTimelineExpandedNodeSelected, getClipboardFigmaHtml, getClipboardImageFiles, getClipboardSvgMarkup, ShortcutHint, Button, ModalButton, ModalFooterContainer, useConfirmationDialog, ConfirmationDialog, addEffect, callAddKeyframes, callAddEffectKeyframe, findTrackForNodePathInfo, saveEffectProp, subscribeToSequenceProps, unsubscribeFromSequenceProps, saveSequenceProps2 as saveSequenceProps, duplicateSequencesFromSource, getTimelineSequenceSplitEligibility, splitTimelineSequenceFromSource, persistEditorShowGuidesOption, loadEditorShowGuidesOption, persistGuidesList, loadGuidesList, EditorShowGuidesContext, useDeleteTimelineItems, TIMELINE_SELECTED_BACKGROUND, TIMELINE_EXPANDED_SELECTED_BACKGROUND, TIMELINE_SELECTED_LABEL_BACKGROUND, getTimelineSelectedLabelStyle, getTimelineColor, getTimelineSelectedTrackHighlightStyle, TIMELINE_BACKGROUND, TIMELINE_TICKS_BACKGROUND, isTimelineSelectionModifierEvent, shouldSelectTimelineRowOnPointerDown, getTimelineSelectionFromNodePathInfo, getTimelineSequenceSelectionKey, TimelineSelectAllKeybindings, TimelineSelectableItemsProvider, TimelineSelectionProvider, useTimelineSelection, TIMELINE_MARQUEE_ITEM_ATTR, TIMELINE_SCRUBBER_ATTR, useCurrentTimelineSelectionStateAsRef, useTimelineMarqueeSelection, useTimelineMarqueeSelectableItem, useTimelineRowSelection, useTimelineKeyframeSelection, useTimelineGuideSelection, useTimelineRowContainsSelection, useTimelineRowHighlightBackground, getPreviewFileType, SegmentedButton, SidebarContext, SidebarContextProvider, getFileManagerName, getGitMenuItem, getConfigureDefaultAppsMenuItems, getOpenInMenuItems, useConfigureDefaultApps, InspectorOpenInEditor, addAssetCacheBust, getCachedMediaMetadata, useMediaMetadata, remotion_outputsBase, getAssetPreviewMetadata, getAssetMetadata, TRANSFORMERS_PACKAGE, withRequiredAuxiliaryPackages, installPackages, getMissingPackages, installRequiredPackages, prepareElementInstall, getFromForDrop, getAssetElementFromPath, hasSvgFile, getElementPositionForDrop, getCompositionPositionForDrop, pickFilesToImport, importAssets, importFigmaClipboard, insertSvgMarkup, importRemoteAsset, insertRemoteAudio, insertExistingAssets, insertComponent, insertComposition, insertElement, forceSpecificCursor, stopForcingSpecificCursor, ForceSpecificCursor, AudioIcon, AudioFileIcon, RightAlignInput, RemotionInput, RemTextarea, useRuntimeValue, useRuntimeValueSelector, useRuntimeValueSnapshots, cropFieldKeys, canEditSelectedOutlineCrop, translateFieldKey, scaleFieldKey, rotateFieldKey, transformOriginFieldKey, tuplesEqual2 as tuplesEqual, getUvHandlePosition, getUvHandleConnectionLines, getUvHandleConnectionEllipses, getUvEllipseInteractiveControls, getUvCoordinateForPoint, constrainUv, roundUvCoordinate, roundNumericUvEllipseValue, getSelectedUvHandles, parseTransformOrigin, parsedTransformOriginToUv, serializeTransformOrigin, pointToString, midpoint, dot, vectorLength, vectorBetween2 as vectorBetween, getAngleDegrees, getSelectedOutlineRotationDeltaDegrees, getRotationCursor, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequenceKeysContainingSelection, getOutlineSelectionInteraction, getSelectedEffectFieldsBySequenceKey, getSelectedCropInfo, getSelectedTransformOriginInfo, getSelectedRotationInfo, getSequencesWithSelectableOutlines, measureOutlines, measureOutlineTargets, outlinesAreEqual, parseCssRotation, parseTranslate, serializeTranslate, InputDragger, TimelineLayerEye, TimelineLayerEyeSpacer, getSelectedOutlineActiveSchema, getSelectedOutlineDragStates, getSelectedOutlineDragValues, applySelectedOutlineDragAxisLock, isSelectedOutlineDragPastThreshold, getSelectedOutlineDragChanges, getSelectedOutlineCropFollowingTransformOrigin, getSelectedOutlineCropDragValues, getSelectedOutlineCropDragChanges, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutline3DRotationDragValues, getSelectedOutlineRotationDragValues, selectedOutlineRotationSnapStepDegrees, snapSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationDragChanges, clearSelectedOutlineDragOverrides, getSelectedOutlineKeyboardNudgeDirection, clearSelectedOutlineScaleDragOverrides, clearSelectedOutlineRotationDragOverrides, compensateTranslateForTransformOrigin, getSelectedOutlineTransformOriginDragChanges, uvsEqual, getSelectedOutlineTransformOriginLockedAxis, applySelectedOutlineTransformOriginAxisLock, snapSelectedOutlineUv, snapSelectedOutlineTransformOriginUv, commitPendingInspectorFields, getConnectedCompositions, createDragAwareDoubleClickTracker, getCopyContextForAgentsMenuItem, getTimelineAssetLinkInfo, openTimelineAssetLink, propStatusHas3DTransformValue, openInRemotionConvert, getCachedImageMetadata, FileIcon, PicIcon, AssetFileIcon, useDeleteAsset, Tabs, Tab, ObserveDefaultProps, SeparationIcon, TranscriptionIcon, sectionHeader2 as sectionHeader, InspectorQuickAction, getStaticFileBaseName, getStaticFileRenameSelection, getRenamedStaticFilePath, validateStaticFileRename, useRenameStaticFile, downloadBlob, SegmentedControl, Combobox, InfoBubble, InlineRemoveButton, optionRow, label2 as label, rightRow, input, Checkbox, DataEditor, LicenseExplanation, FastRefreshContext, resolvedStackToSymbolicated, validateCompositionName, validateCompositionDimension, validateCompositionDuration, useRenameComposition, useCopyFeedback, CopyIcon, TimelineExpandArrowButton, TimelineExpandArrowSpacer, TimelineRowSelectedBackgroundContext, TimelineRowChrome, renderFrame, TimelineKeyframeDiamondIcon, TimelineKeyframeDragStateProvider, useTimelineKeyframeDragState, useTimelineKeyframeDrag, TimelineKeyframeEasingLine, useResolveStackAndReactToChange, useOpenSequenceInApps, useRenameSequence, TimelineKeyframeTracksProvider, SnowflakeIcon, FullscreenIcon, UploadIcon, TimelineExpandedRow, useTimelineSequenceHasExpandableContent, useTimelineExpandedTree, getSequenceFreezeFrameMenuItem, CircularProgress, SuccessIcon, isRestoredClientJob, RenderQueueOpenInFinderItem, getClientRenderProgressMessage, saveOutputFile, registerClientRender, makeRetryPayload, makeClientRetryPayload, persistSelectedOptionsSidebarPanel, OptionsPanel, getDefaultOutputBaseName, validatePublicOutputName, DismissableModal, VerticalTab, RenderModalHr, ModelsIcon };
+export { getPortal, showNotification, NotificationCenter, subscribeToPreviewServerEvents, getNavigationWindow, pushUrl, clearUrl, reloadUrl, StudioServerConnectionCtx, PreviewServerConnection, useStudioConfigRevision, noop, compositionListRenderedRef, CompositionListContext, CompositionListProvider, ScaleLockContext, ScaleLockProvider, getCurrentZoom, setCurrentZoom, getCurrentFrame, setCurrentFrame, getCurrentDuration, setCurrentDuration, getCurrentFps, setCurrentFps, sliderAreaRef, scrollableRef, timelineVerticalScroll, TIMELINE_PADDING, TIMELINE_BORDER, TIMELINE_ITEM_BORDER_BOTTOM, buildTimelineTree, flattenVisibleTreeNodes, getTreeRowHeight, TIMELINE_LAYER_FILMSTRIP_HEIGHT, TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT, TIMELINE_LAYER_HEIGHT_AUDIO, TIMELINE_LIST_ITEM_ROW_HEIGHT, getTimelineLayerHeight, getXPositionOfItemInTimelineImperatively, TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM, getTimelineMinZoom, clampTimelineZoom, getTimelineZoom, getTimelineWidth, timelineZoomToNormalized, timelineZoomToSliderValue, normalizedToTimelineZoom, sliderValueToTimelineZoom, TIMELINE_ZOOM_SLIDER_PROPS, TimelineWidthContext, TimelineWidthProvider, redrawTimelineSliderFast, TimelineSlider, getTimelineContentWidth, EDGE_SCROLL_VERTICAL_INCREMENT, startTimelineEdgeAutoScroll, getFrameWhileScrollingLeft, isCursorInViewport, ensureFrameIsInViewport, scrollToTimelineXOffset, getScrollPositionForCursorOnLeftEdge, getScrollPositionForCursorOnRightEdge, getFrameIncrementFromWidth, getFrameWhileScrollingRight, getFrameFromX, getFrameFromTimelineDrop, viewportClientXToScrollContentX, ZoomPersistor, TimelineZoomCtx, TimelineZoomContext, SelectedModalContext, SetSelectedModalContext, StudioProtocolInternals, Transform3DModeStateContext, Transform3DModeStateProvider, calculateTimeline, getPreviewFileType, timelineNodePathInfoToKey, timelineSequenceNodePathToKey, persistEditorShowGuidesOption, loadEditorShowGuidesOption, persistGuidesList, loadGuidesList, EditorShowGuidesContext, ModalHeader, toggleBooleanMapKey, openFolderKey, persistExpandedFolders, ExpandedFoldersContext, buildAssetFolderStructure, getKeysToExpand, createFolderTree, sortFolderTreeAlphabetically, FolderContext, FolderContextProvider, CollapsedFolderIcon, ExpandedFolderIcon, ExpandedFolderIconSolid, getRelativeFileLocation, formatFileLocation, formatContextForAgents, getOriginalPosition, getSourceMap, parseError, getOriginalLocationFromStack, openInEditor, openInCodingAgent, openOriginalPositionInEditor, useCachedCompositionComponentInfo, preloadCompositionComponentInfo, getOpenInNewWindowMenuItem, getCompositionMenuItems, getCompositionContextMenuItems, EllipsisIcon, useMobileLayout, menuContainerTowardsBottom, outerPortal, inlineCodeSnippet, MenuDivider, CaretDown, MenuContent, InlineDropdown, isCompositionStill, StillIcon, FilmIcon, CompositionOrStillIcon, ContextMenu, ContextMenuForTarget, hasResolvedStack, useResolvedStack, canShowUpdates, useUpdateStatus, SettingsProvider, useSettings, getPreferredEditorId, useEditorOpening, useDefaultCodingAgentInfo, explorerSidebarTabs, useSelectAsset, StaticFilesProvider, useStaticFiles, useSelectComposition, InitialCompositionLoader, Checkmark, ExpandedTracksGetterContext, ExpandedTracksSetterContext, ExpandedTracksProvider, optionsSidebarTabs, getKeyframeDisplayOffset, getNodeKeyframes, getNodeHasKeyframes, getTimelineEasingSegments, parseKeyframeFieldFromNodePath, filterTimelineExpandedTree, getSelectedTimelineExpandedRowKeys, isTimelineExpandedNodeSelected, getClipboardFigmaHtml, getClipboardImageFiles, getClipboardSvgMarkup, ShortcutHint, Button, ModalButton, ModalFooterContainer, useConfirmationDialog, ConfirmationDialog, addEffect, callAddKeyframes, callAddEffectKeyframe, findTrackForNodePathInfo, saveEffectProp, subscribeToSequenceProps, unsubscribeFromSequenceProps, saveSequenceProps2 as saveSequenceProps, duplicateSequencesFromSource, getTimelineSequenceSplitEligibility, splitTimelineSequenceFromSource, useDeleteTimelineItems, TIMELINE_SELECTED_BACKGROUND, TIMELINE_EXPANDED_SELECTED_BACKGROUND, TIMELINE_SELECTED_LABEL_BACKGROUND, getTimelineSelectedLabelStyle, getTimelineColor, getTimelineSelectedTrackHighlightStyle, TIMELINE_BACKGROUND, TIMELINE_TICKS_BACKGROUND, isTimelineSelectionModifierEvent, shouldSelectTimelineRowOnPointerDown, getTimelineSelectionFromNodePathInfo, getTimelineSequenceSelectionKey, TimelineSelectAllKeybindings, TimelineSelectableItemsProvider, TimelineSelectionProvider, useTimelineSelection, TIMELINE_MARQUEE_ITEM_ATTR, TIMELINE_SCRUBBER_ATTR, useCurrentTimelineSelectionStateAsRef, useTimelineMarqueeSelection, useTimelineMarqueeSelectableItem, useTimelineRowSelection, useTimelineKeyframeSelection, useTimelineGuideSelection, useTimelineRowContainsSelection, useTimelineRowHighlightBackground, ActionTooltip, SegmentedButton, SidebarContext, SidebarContextProvider, getFileManagerName, getGitMenuItem, getConfigureDefaultAppsMenuItems, getOpenInMenuItems, useConfigureDefaultApps, InspectorOpenInEditor, addAssetCacheBust, getCachedMediaMetadata, useMediaMetadata, remotion_outputsBase, getAssetPreviewMetadata, getAssetMetadata, TRANSFORMERS_PACKAGE, withRequiredAuxiliaryPackages, installPackages, getMissingPackages, installRequiredPackages, prepareElementInstall, getFromForDrop, getAssetElementFromPath, hasSvgFile, getElementPositionForDrop, getCompositionPositionForDrop, pickFilesToImport, importAssets, importFigmaClipboard, insertSvgMarkup, importRemoteAsset, insertRemoteAudio, insertExistingAssets, insertComponent, insertComposition, insertElement, forceSpecificCursor, stopForcingSpecificCursor, ForceSpecificCursor, AudioIcon, AudioFileIcon, RightAlignInput, RemotionInput, RemTextarea, useRuntimeValue, useRuntimeValueSelector, useRuntimeValueSnapshots, cropFieldKeys, canEditSelectedOutlineCrop, translateFieldKey, scaleFieldKey, rotateFieldKey, transformOriginFieldKey, tuplesEqual2 as tuplesEqual, getUvHandlePosition, getUvHandleConnectionLines, getUvHandleConnectionEllipses, getUvEllipseInteractiveControls, getUvCoordinateForPoint, constrainUv, roundUvCoordinate, roundNumericUvEllipseValue, getSelectedUvHandles, parseTransformOrigin, parsedTransformOriginToUv, serializeTransformOrigin, pointToString, midpoint, dot, vectorLength, vectorBetween2 as vectorBetween, getAngleDegrees, getSelectedOutlineRotationDeltaDegrees, getRotationCursor, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequenceKeysContainingSelection, getOutlineSelectionInteraction, getSelectedEffectFieldsBySequenceKey, getSelectedCropInfo, getSelectedTransformOriginInfo, getSelectedRotationInfo, getSequencesWithSelectableOutlines, measureOutlines, measureOutlineTargets, outlinesAreEqual, parseCssRotation, parseTranslate, serializeTranslate, InputDragger, TimelineLayerEye, TimelineLayerEyeSpacer, getSelectedOutlineActiveSchema, getSelectedOutlineDragStates, getSelectedOutlineDragValues, applySelectedOutlineDragAxisLock, isSelectedOutlineDragPastThreshold, getSelectedOutlineDragChanges, getSelectedOutlineCropFollowingTransformOrigin, getSelectedOutlineCropDragValues, getSelectedOutlineCropDragChanges, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutline3DRotationDragValues, getSelectedOutlineRotationDragValues, selectedOutlineRotationSnapStepDegrees, snapSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationDragChanges, clearSelectedOutlineDragOverrides, getSelectedOutlineKeyboardNudgeDirection, clearSelectedOutlineScaleDragOverrides, clearSelectedOutlineRotationDragOverrides, compensateTranslateForTransformOrigin, getSelectedOutlineTransformOriginDragChanges, uvsEqual, getSelectedOutlineTransformOriginLockedAxis, applySelectedOutlineTransformOriginAxisLock, snapSelectedOutlineUv, snapSelectedOutlineTransformOriginUv, commitPendingInspectorFields, getConnectedCompositions, createDragAwareDoubleClickTracker, getCopyContextForAgentsMenuItem, getTimelineAssetLinkInfo, openTimelineAssetLink, propStatusHas3DTransformValue, openInRemotionConvert, getCachedImageMetadata, FileIcon, PicIcon, AssetFileIcon, useDeleteAsset, Tabs, Tab, ObserveDefaultProps, SeparationIcon, TranscriptionIcon, sectionHeader2 as sectionHeader, InspectorQuickAction, getStaticFileBaseName, getStaticFileRenameSelection, getRenamedStaticFilePath, validateStaticFileRename, useRenameStaticFile, downloadBlob, SegmentedControl, Combobox, InfoBubble, InlineRemoveButton, optionRow, label2 as label, rightRow, input, Checkbox, DataEditor, LicenseExplanation, FastRefreshContext, resolvedStackToSymbolicated, slugifyName, validateCompositionName, validateCompositionDimension, validateCompositionDuration, useRenameComposition, useCopyFeedback, CopyIcon, TimelineExpandArrowButton, TimelineExpandArrowSpacer, TimelineRowSelectedBackgroundContext, TimelineRowChrome, renderFrame, TimelineKeyframeDiamondIcon, TimelineKeyframeDragStateProvider, useTimelineKeyframeDragState, useTimelineKeyframeDrag, TimelineKeyframeEasingLine, useResolveStackAndReactToChange, useOpenSequenceInApps, useRenameSequence, TimelineKeyframeTracksProvider, SnowflakeIcon, FullscreenIcon, UploadIcon, TimelineExpandedRow, useTimelineSequenceHasExpandableContent, useTimelineExpandedTree, getSequenceFreezeFrameMenuItem, CircularProgress, SuccessIcon, isRestoredClientJob, RenderQueueOpenInFinderItem, getClientRenderProgressMessage, saveOutputFile, registerClientRender, makeRetryPayload, makeClientRetryPayload, persistSelectedOptionsSidebarPanel, OptionsPanel, getDefaultOutputBaseName, validatePublicOutputName, DismissableModal, VerticalTab, RenderModalHr, ModelsIcon };