@remotion/studio 4.0.460 → 4.0.461

package/dist/esm/previewEntry.mjs

@@ -25,7 +25,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 // src/previewEntry.tsx
 import ReactDOM10 from "react-dom/client";
 import { Internals as Internals77 } from "remotion";
-import { NoReactInternals as NoReactInternals16 } from "remotion/no-react";
+import { NoReactInternals as NoReactInternals17 } from "remotion/no-react";
 
 // src/components/NoRegisterRoot.tsx
 import { useEffect, useState } from "react";
@@ -2301,6 +2301,7 @@ var parseError = async (error, contextLines) => {
 };
 
 // src/error-overlay/react-overlay/utils/unmapper.ts
+import { sourceContentFor } from "@jridgewell/trace-mapping";
 import { Internals } from "remotion";
 
 // src/error-overlay/react-overlay/utils/get-lines-around.ts
@@ -2317,9 +2318,9 @@ function getLinesAround(line, count, lines) {
 }
 
 // src/error-overlay/react-overlay/utils/get-source-map.ts
-import { SourceMapConsumer } from "source-map";
-var getOriginalPosition = (source_map, line, column) => {
-  const result = source_map.originalPositionFor({
+import { TraceMap, originalPositionFor } from "@jridgewell/trace-mapping";
+var getOriginalPosition = (sourceMap, line, column) => {
+  const result = originalPositionFor(sourceMap, {
     line,
     column
   });
@@ -2352,12 +2353,12 @@ async function getSourceMap(fileUri, fileContents) {
       throw new Error("Sorry, non-base64 inline source-map encoding is not supported.");
     }
     const converted = window.atob(sm.substring(match2[0].length));
-    return new SourceMapConsumer(JSON.parse(converted));
+    return new TraceMap(JSON.parse(converted));
   }
   const index = fileUri.lastIndexOf("/");
   const url = fileUri.substring(0, index + 1) + sm;
   const obj = await fetch(url).then((res) => res.json());
-  return new SourceMapConsumer(obj);
+  return new TraceMap(obj);
 }
 
 // src/error-overlay/react-overlay/utils/unmapper.ts
@@ -2390,7 +2391,7 @@ var unmap = async (frames, contextLines) => {
     const pos = getOriginalPosition(map, frame2.frame.lineNumber, frame2.frame.columnNumber);
     const { functionName } = frame2.frame;
     let hasSource = null;
-    hasSource = pos.source ? map.sourceContentFor(pos.source, false) : null;
+    hasSource = pos.source ? sourceContentFor(map, pos.source) : null;
     const scriptCode = hasSource && pos.line ? getLinesAround(pos.line, contextLines, hasSource.split(`
 `)) : null;
     return {
@@ -2800,6 +2801,7 @@ import { interpolate } from "remotion";
 import {
   getFieldsToShow
 } from "@remotion/studio-shared";
+import { NoReactInternals } from "remotion/no-react";
 import {
   SCHEMA_FIELD_ROW_HEIGHT,
   UNSUPPORTED_FIELD_ROW_HEIGHT,
@@ -2816,10 +2818,15 @@ var getEffectSchemaLabels = (effect) => {
   if (!effect.definition.schema) {
     return [];
   }
-  return Object.entries(effect.definition.schema).map(([key, fieldSchema]) => ({
-    key,
-    description: fieldSchema.description
-  }));
+  return Object.entries(effect.definition.schema).map(([key, fieldSchema]) => {
+    if (fieldSchema.type === "hidden") {
+      return null;
+    }
+    return {
+      key,
+      description: fieldSchema.description
+    };
+  }).filter(NoReactInternals.truthy);
 };
 var buildTimelineTree = ({
   sequence,
@@ -2832,19 +2839,28 @@ var buildTimelineTree = ({
   if (sequence.effects.length > 0) {
     roots.push({
       kind: "group",
-      nodePathInfo: { nodePath: [...nodePath, "effects"], index },
+      nodePathInfo: {
+        nodePath: [...nodePath, "effects"],
+        index,
+        numberOfSequencesWithThisNodePath: 0
+      },
       label: "Effects",
       children: sequence.effects.map((effect, i) => {
         const effectNodePath = [...nodePath, "effects", i];
         return {
           kind: "group",
-          nodePathInfo: { nodePath: effectNodePath, index },
+          nodePathInfo: {
+            nodePath: effectNodePath,
+            index,
+            numberOfSequencesWithThisNodePath: 0
+          },
           label: effect.definition.label,
           children: getEffectSchemaLabels(effect).map((label2) => ({
             kind: "field",
             nodePathInfo: {
               nodePath: [...effectNodePath, label2.key],
-              index
+              index,
+              numberOfSequencesWithThisNodePath: 0
             },
             label: label2.description ?? label2.key,
             field: null
@@ -2864,7 +2880,11 @@ var buildTimelineTree = ({
     for (const f of controlFields) {
       roots.push({
         kind: "field",
-        nodePathInfo: { nodePath: [...nodePath, "controls", f.key], index },
+        nodePathInfo: {
+          nodePath: [...nodePath, "controls", f.key],
+          index,
+          numberOfSequencesWithThisNodePath: 0
+        },
         label: f.description ?? f.key,
         field: f
       });
@@ -2900,13 +2920,12 @@ var getExpandedTrackHeight = ({
   sequence,
   nodePathInfo,
   getIsExpanded,
-  getDragOverrides,
   getCodeValues
 }) => {
   const tree = buildTimelineTree({
     sequence,
     nodePathInfo,
-    getDragOverrides,
+    getDragOverrides: () => ({}),
     getCodeValues
   });
   const flat = flattenVisibleTreeNodes({ nodes: tree, getIsExpanded });
@@ -3012,9 +3031,9 @@ var TimelineSlider = () => {
   if (videoConfig === null || timelineWidth === null) {
     return null;
   }
-  return /* @__PURE__ */ jsx29(Inner, {});
+  return /* @__PURE__ */ jsx29(TimelineSliderInner, {});
 };
-var Inner = () => {
+var TimelineSliderInner = () => {
   const videoConfig = useVideoConfig();
   const timelinePosition = Internals3.Timeline.useTimelinePosition();
   const ref = useRef5(null);
@@ -4252,7 +4271,7 @@ var PreviewServerConnection = ({ children, readOnlyStudio }) => {
 
 // src/helpers/use-asset-drag-events.ts
 import { useCallback as useCallback17, useEffect as useEffect16, useMemo as useMemo17, useRef as useRef9 } from "react";
-import { NoReactInternals } from "remotion/no-react";
+import { NoReactInternals as NoReactInternals2 } from "remotion/no-react";
 function useAssetDragEvents({
   name,
   parentFolder,
@@ -4261,7 +4280,7 @@ function useAssetDragEvents({
 }) {
   const dragDepthRef = useRef9(0);
   const combinedParents = useMemo17(() => {
-    return [parentFolder, name].filter(NoReactInternals.truthy).join("/");
+    return [parentFolder, name].filter(NoReactInternals2.truthy).join("/");
   }, [name, parentFolder]);
   const isDropDiv = useMemo17(() => {
     return dropLocation === combinedParents;
@@ -4301,7 +4320,7 @@ import React30, {
   useState as useState17
 } from "react";
 import { Internals as Internals7 } from "remotion";
-import { NoReactInternals as NoReactInternals3 } from "remotion/no-react";
+import { NoReactInternals as NoReactInternals4 } from "remotion/no-react";
 
 // src/helpers/copy-text.ts
 var copyText = (cmd) => {
@@ -4504,7 +4523,7 @@ var InlineAction = ({
 };
 
 // src/components/RenderQueue/actions.ts
-import { NoReactInternals as NoReactInternals2 } from "remotion/no-react";
+import { NoReactInternals as NoReactInternals3 } from "remotion/no-react";
 
 // src/components/call-api.ts
 var callApi = (endpoint, body, signal) => {
@@ -4561,7 +4580,7 @@ var addStillRenderJob = ({
     chromiumOptions,
     delayRenderTimeout,
     envVariables,
-    serializedInputPropsWithCustomSchema: NoReactInternals2.serializeJSONWithSpecialTypes({
+    serializedInputPropsWithCustomSchema: NoReactInternals3.serializeJSONWithSpecialTypes({
       data: inputProps,
       staticBase: window.remotion_staticBase,
       indent: undefined
@@ -4613,7 +4632,7 @@ var addSequenceRenderJob = ({
     delayRenderTimeout,
     envVariables,
     concurrency,
-    serializedInputPropsWithCustomSchema: NoReactInternals2.serializeJSONWithSpecialTypes({
+    serializedInputPropsWithCustomSchema: NoReactInternals3.serializeJSONWithSpecialTypes({
       data: inputProps,
       staticBase: window.remotion_staticBase,
       indent: undefined
@@ -4699,7 +4718,7 @@ var addVideoRenderJob = ({
     disallowParallelEncoding,
     chromiumOptions,
     envVariables,
-    serializedInputPropsWithCustomSchema: NoReactInternals2.serializeJSONWithSpecialTypes({
+    serializedInputPropsWithCustomSchema: NoReactInternals3.serializeJSONWithSpecialTypes({
       data: inputProps,
       staticBase: window.remotion_staticBase,
       indent: undefined
@@ -4773,7 +4792,7 @@ var getProjectInfo = (signal) => {
 var callUpdateDefaultPropsApi = (compositionId, defaultProps, enumPaths) => {
   return callApi("/api/update-default-props", {
     compositionId,
-    defaultProps: NoReactInternals2.serializeJSONWithSpecialTypes({
+    defaultProps: NoReactInternals3.serializeJSONWithSpecialTypes({
       data: defaultProps,
       indent: undefined,
       staticBase: window.remotion_staticBase
@@ -4940,7 +4959,7 @@ var AssetFolderTree = ({
   readOnlyStudio
 }) => {
   const combinedParents = useMemo19(() => {
-    return [parentFolder, name].filter(NoReactInternals3.truthy).join("/");
+    return [parentFolder, name].filter(NoReactInternals4.truthy).join("/");
   }, [name, parentFolder]);
   return /* @__PURE__ */ jsxs18("div", {
     children: [
@@ -7422,7 +7441,7 @@ import { useCallback as useCallback100, useMemo as useMemo105, useState as useSt
 // src/helpers/use-menu-structure.tsx
 import { useContext as useContext22, useMemo as useMemo42 } from "react";
 import { Internals as Internals19 } from "remotion";
-import { NoReactInternals as NoReactInternals5 } from "remotion/no-react";
+import { NoReactInternals as NoReactInternals6 } from "remotion/no-react";
 
 // src/api/restart-studio.ts
 import { getRemotionEnvironment as getRemotionEnvironment2 } from "remotion";
@@ -8845,7 +8864,7 @@ import {
   useImperativeHandle as useImperativeHandle10
 } from "react";
 import { Internals as Internals18 } from "remotion";
-import { NoReactInternals as NoReactInternals4 } from "remotion/no-react";
+import { NoReactInternals as NoReactInternals5 } from "remotion/no-react";
 
 // src/icons/timelineInOutPointer.tsx
 import { jsx as jsx79 } from "react/jsx-runtime";
@@ -8916,7 +8935,7 @@ var getTooltipText = (pointType, key) => [
   `Mark ${pointType}`,
   areKeyboardShortcutsDisabled() ? null : `(${key})`,
   "- right click to clear"
-].filter(NoReactInternals4.truthy).join(" ");
+].filter(NoReactInternals5.truthy).join(" ");
 var style4 = {
   width: 16,
   height: 16
@@ -9437,7 +9456,7 @@ var getFileMenu = ({
       quickSwitcherLabel: "Open in editor..."
     } : null,
     getGitMenuItem()
-  ].filter(NoReactInternals5.truthy);
+  ].filter(NoReactInternals6.truthy);
   if (items.length === 0) {
     return null;
   }
@@ -10180,7 +10199,7 @@ var itemToSearchResult = (item, setSelectedModal, prefixes) => {
         ...prefixes,
         getItemLabel(item)
       ]);
-    }).flat(1).filter(NoReactInternals5.truthy);
+    }).flat(1).filter(NoReactInternals6.truthy);
   }
   return [
     {
@@ -10202,7 +10221,7 @@ var makeSearchResults = (actions, setSelectedModal) => {
       }
       return itemToSearchResult(item, setSelectedModal, []);
     });
-  }).flat(Infinity).filter(NoReactInternals5.truthy);
+  }).flat(Infinity).filter(NoReactInternals6.truthy);
   return items;
 };
 
@@ -10354,7 +10373,7 @@ import { useContext as useContext23, useEffect as useEffect32, useState as useSt
 import { Internals as Internals20 } from "remotion";
 
 // src/components/Timeline/TimelineStack/get-stack.ts
-import { SourceMapConsumer as SourceMapConsumer2 } from "source-map";
+import { TraceMap as TraceMap2 } from "@jridgewell/trace-mapping";
 
 // src/helpers/get-location-of-sequence.ts
 var getLocationOfSequence = (stack2) => {
@@ -10393,40 +10412,23 @@ var getLocationOfFunctionCall = (stack2, functionName) => {
 };
 
 // src/components/Timeline/TimelineStack/get-stack.ts
-var waiters = [];
-var sourceMapConsumerCache = {};
-var isCreating = {};
+var traceMapCache = {};
+var traceMapPromises = {};
 var getSourceMapCache = async (fileName) => {
-  if (sourceMapConsumerCache[fileName]) {
-    return sourceMapConsumerCache[fileName];
-  }
-  if (isCreating[fileName]) {
-    return new Promise((resolve) => {
-      waiters.push({
-        id: String(Math.random()),
-        forFileName: fileName,
-        resolve
-      });
-    });
+  if (traceMapCache[fileName]) {
+    return traceMapCache[fileName];
   }
-  isCreating[fileName] = true;
-  const res = await fetch(`${fileName}.map`);
-  const json = await res.json();
-  const map = await new Promise((resolve) => {
-    SourceMapConsumer2.with(json, null, (consumer) => {
-      resolve(consumer);
-    });
-  });
-  waiters.filter((w) => {
-    if (w.forFileName === fileName) {
-      w.resolve(map);
-      return false;
-    }
-    return true;
+  if (traceMapPromises[fileName]) {
+    return traceMapPromises[fileName];
+  }
+  traceMapPromises[fileName] = fetch(`${fileName}.map`).then((res) => res.json()).then((json) => {
+    const map = new TraceMap2(json);
+    traceMapCache[fileName] = map;
+    return map;
+  }).finally(() => {
+    delete traceMapPromises[fileName];
   });
-  sourceMapConsumerCache[fileName] = map;
-  isCreating[fileName] = false;
-  return map;
+  return traceMapPromises[fileName];
 };
 var getOriginalLocationFromStack = async (stack2, type) => {
   const location2 = type === "sequence" ? getLocationOfSequence(stack2) : getLocationOfFunctionCall(stack2, "visualControl");
@@ -10488,7 +10490,8 @@ var baseStyle = {
   color: "inherit",
   textDecoration: "none",
   fontSize: "inherit",
-  textUnderlineOffset: 2
+  textUnderlineOffset: 2,
+  whiteSpace: "nowrap"
 };
 var compositionNameStyle = {
   ...baseStyle,
@@ -10652,9 +10655,9 @@ var MenuBuildIndicator = () => {
       }) : /* @__PURE__ */ jsx86("div", {
         style: noSpinner
       }),
-      isClickable ? /* @__PURE__ */ jsx86(Spacing, {
+      /* @__PURE__ */ jsx86(Spacing, {
         x: 0.5
-      }) : null,
+      }),
       isClickable ? /* @__PURE__ */ jsx86("a", {
         style: projectNameHovered ? projectNameLinkHovered : projectNameLink,
         title: projectNameTitle,
@@ -10904,7 +10907,7 @@ var useStudioCanvasDimensions = ({
 
 // src/components/EditorGuides/Guide.tsx
 import { memo, useCallback as useCallback41, useContext as useContext27, useMemo as useMemo48 } from "react";
-import { NoReactInternals as NoReactInternals6 } from "remotion/no-react";
+import { NoReactInternals as NoReactInternals7 } from "remotion/no-react";
 
 // src/components/ForceSpecificCursor.tsx
 import React60, { useMemo as useMemo47 } from "react";
@@ -11028,7 +11031,7 @@ var GuideComp = ({ guide, canvasDimensions, scale }) => {
         className: [
           "__remotion_editor_guide_content",
           selectedGuideId === guide.id || hoveredGuideId === guide.id ? "__remotion_editor_guide_selected" : null
-        ].filter(NoReactInternals6.truthy).join(" ")
+        ].filter(NoReactInternals7.truthy).join(" ")
       })
     })
   });
@@ -12268,7 +12271,7 @@ import { useCallback as useCallback45, useContext as useContext35, useEffect as
 import { Internals as Internals31 } from "remotion";
 
 // src/helpers/document-title.ts
-import { NoReactInternals as NoReactInternals7 } from "remotion/no-react";
+import { NoReactInternals as NoReactInternals8 } from "remotion/no-react";
 var currentItemName = null;
 var renderJobs = [];
 var setCurrentCanvasContentId = (id) => {
@@ -12296,7 +12299,7 @@ var updateTitle = () => {
   document.title = [
     getProgressInBrackets(currentItemName, renderJobs),
     `${currentCompTitle} ${suffix}`
-  ].filter(NoReactInternals7.truthy).join(" ");
+  ].filter(NoReactInternals8.truthy).join(" ");
 };
 var getProgressInBrackets = (selectedCompositionId, jobs) => {
   const currentRender = jobs.find((job) => job.status === "running");
@@ -12772,7 +12775,7 @@ import { useContext as useContext41 } from "react";
 // src/components/RenderModal/DataEditor.tsx
 import React96, { useCallback as useCallback72, useContext as useContext40, useMemo as useMemo86, useState as useState55 } from "react";
 import { getInputProps } from "remotion";
-import { NoReactInternals as NoReactInternals10 } from "remotion/no-react";
+import { NoReactInternals as NoReactInternals11 } from "remotion/no-react";
 
 // src/components/NewComposition/ValidationMessage.tsx
 import { useMemo as useMemo57 } from "react";
@@ -12904,7 +12907,7 @@ var Item = ({ selected, onClick, children }) => {
 };
 
 // src/components/RenderModal/get-render-modal-warnings.ts
-import { NoReactInternals as NoReactInternals8 } from "remotion/no-react";
+import { NoReactInternals as NoReactInternals9 } from "remotion/no-react";
 var getInputPropsWarning = ({
   cliProps,
   propsEditType
@@ -12967,13 +12970,13 @@ var getRenderModalWarnings = ({
     staticFileUsed(customFileUsed, inJSONEditor),
     mapUsed(jsMapUsed, inJSONEditor),
     setUsed(jsSetUsed, inJSONEditor)
-  ].filter(NoReactInternals8.truthy);
+  ].filter(NoReactInternals9.truthy);
 };
 
 // src/components/RenderModal/RenderModalJSONPropsEditor.tsx
 import React71, { useCallback as useCallback49, useEffect as useEffect44, useMemo as useMemo60 } from "react";
 import { useContext as useContext38 } from "react";
-import { NoReactInternals as NoReactInternals9 } from "remotion/no-react";
+import { NoReactInternals as NoReactInternals10 } from "remotion/no-react";
 
 // src/components/RenderModal/SchemaEditor/deep-equal.ts
 function deepEqual(a, b) {
@@ -13281,7 +13284,7 @@ var parseJS = (value, schema) => {
 };
 var parseJSON = (str, schema) => {
   try {
-    const value = NoReactInternals9.deserializeJSONWithSpecialTypes(str);
+    const value = NoReactInternals10.deserializeJSONWithSpecialTypes(str);
     const zodValidation = zodSafeParse(schema, value);
     return { str, value, validJSON: true, zodValidation };
   } catch (e) {
@@ -16443,7 +16446,7 @@ var DataEditor = ({
       return null;
     }
     const value = defaultProps;
-    return NoReactInternals10.serializeJSONWithSpecialTypes({
+    return NoReactInternals11.serializeJSONWithSpecialTypes({
       data: value,
       indent: 2,
       staticBase: window.remotion_staticBase
@@ -17575,7 +17578,7 @@ var RenderQueueRemoveItem = ({ job }) => {
 import { useCallback as useCallback83, useContext as useContext48, useMemo as useMemo92 } from "react";
 
 // src/helpers/retry-payload.ts
-import { NoReactInternals as NoReactInternals11 } from "remotion/no-react";
+import { NoReactInternals as NoReactInternals12 } from "remotion/no-react";
 var makeRetryPayload = (job) => {
   const defaults = window.remotion_renderDefaults;
   if (!defaults) {
@@ -17611,7 +17614,7 @@ var makeRetryPayload = (job) => {
       initialHeadless: job.chromiumOptions.headless,
       initialIgnoreCertificateErrors: job.chromiumOptions.ignoreCertificateErrors,
       initialDarkMode: job.chromiumOptions.darkMode,
-      defaultProps: NoReactInternals11.deserializeJSONWithSpecialTypes(job.serializedInputPropsWithCustomSchema),
+      defaultProps: NoReactInternals12.deserializeJSONWithSpecialTypes(job.serializedInputPropsWithCustomSchema),
       inFrameMark: null,
       outFrameMark: null,
       initialOffthreadVideoCacheSizeInBytes: job.offthreadVideoCacheSizeInBytes,
@@ -17663,7 +17666,7 @@ var makeRetryPayload = (job) => {
       initialHeadless: job.chromiumOptions.headless,
       initialIgnoreCertificateErrors: job.chromiumOptions.ignoreCertificateErrors,
       initialDarkMode: job.chromiumOptions.darkMode,
-      defaultProps: NoReactInternals11.deserializeJSONWithSpecialTypes(job.serializedInputPropsWithCustomSchema),
+      defaultProps: NoReactInternals12.deserializeJSONWithSpecialTypes(job.serializedInputPropsWithCustomSchema),
       initialStillImageFormat: defaults.stillImageFormat,
       inFrameMark: job.startFrame,
       outFrameMark: job.endFrame,
@@ -17718,7 +17721,7 @@ var makeRetryPayload = (job) => {
       initialHeadless: job.chromiumOptions.headless,
       initialIgnoreCertificateErrors: job.chromiumOptions.ignoreCertificateErrors,
       initialDarkMode: job.chromiumOptions.darkMode,
-      defaultProps: NoReactInternals11.deserializeJSONWithSpecialTypes(job.serializedInputPropsWithCustomSchema),
+      defaultProps: NoReactInternals12.deserializeJSONWithSpecialTypes(job.serializedInputPropsWithCustomSchema),
       inFrameMark: job.startFrame,
       outFrameMark: job.endFrame,
       initialOffthreadVideoCacheSizeInBytes: job.offthreadVideoCacheSizeInBytes,
@@ -18172,7 +18175,7 @@ import React111, { useContext as useContext53 } from "react";
 
 // src/components/VisualControls/VisualControlHandle.tsx
 import { useCallback as useCallback86, useContext as useContext52, useEffect as useEffect53, useState as useState59 } from "react";
-import { NoReactInternals as NoReactInternals12 } from "remotion/no-react";
+import { NoReactInternals as NoReactInternals13 } from "remotion/no-react";
 
 // src/fast-refresh-context.ts
 import { createContext as createContext20 } from "react";
@@ -18314,7 +18317,7 @@ var VisualControlHandle = ({ value, keyName }) => {
         changes: [
           {
             id: keyName,
-            newValueSerialized: val === undefined ? "" : NoReactInternals12.serializeJSONWithSpecialTypes({
+            newValueSerialized: val === undefined ? "" : NoReactInternals13.serializeJSONWithSpecialTypes({
               data: val,
               indent: 2,
               staticBase: window.remotion_staticBase
@@ -18602,12 +18605,12 @@ var loadLoopOption = () => {
 
 // src/components/CheckboardToggle.tsx
 import { useCallback as useCallback88, useContext as useContext55 } from "react";
-import { NoReactInternals as NoReactInternals13 } from "remotion/no-react";
+import { NoReactInternals as NoReactInternals14 } from "remotion/no-react";
 import { jsx as jsx168 } from "react/jsx-runtime";
 var accessibilityLabel2 = [
   "Show transparency as checkerboard",
   areKeyboardShortcutsDisabled() ? null : "(T)"
-].filter(NoReactInternals13.truthy).join(" ");
+].filter(NoReactInternals14.truthy).join(" ");
 var CheckboardToggle = () => {
   const { checkerboard, setCheckerboard } = useContext55(CheckerboardContext);
   const onClick = useCallback88(() => {
@@ -18723,12 +18726,12 @@ var FpsCounter = ({ playbackSpeed }) => {
 // src/components/FullscreenToggle.tsx
 import { useCallback as useCallback89, useContext as useContext56, useEffect as useEffect55 } from "react";
 import { Internals as Internals38 } from "remotion";
-import { NoReactInternals as NoReactInternals14 } from "remotion/no-react";
+import { NoReactInternals as NoReactInternals15 } from "remotion/no-react";
 import { jsx as jsx169 } from "react/jsx-runtime";
 var accessibilityLabel3 = [
   "Enter fullscreen preview",
   areKeyboardShortcutsDisabled() ? null : "(F)"
-].filter(NoReactInternals14.truthy).join(" ");
+].filter(NoReactInternals15.truthy).join(" ");
 var FullScreenToggle = () => {
   const keybindings = useKeybinding();
   const { setSize } = useContext56(Internals38.PreviewSizeContext);
@@ -19536,7 +19539,7 @@ var RenderButton = ({
     };
   }, []);
   const video = Internals42.useVideo();
-  const getCurrentFrame2 = PlayerInternals14.useFrameImperative();
+  const { getCurrentFrame: getCurrentFrame2 } = PlayerInternals14.usePlayer();
   const { props } = useContext58(Internals42.EditorPropsContext);
   const openServerRenderModal = useCallback94((copyCommandOnly) => {
     if (!video) {
@@ -21273,7 +21276,7 @@ var calculateTimeline = ({
       hash: actualHash,
       cascadedStart,
       cascadedDuration: sequence.duration,
-      nodePathInfo: nodePath ? { nodePath, index: 0 } : null
+      nodePathInfo: nodePath ? { nodePath, index: 0, numberOfSequencesWithThisNodePath: 0 } : null
     });
   }
   const uniqueTracks = [];
@@ -21297,12 +21300,29 @@ var calculateTimeline = ({
     if (track.nodePathInfo === null) {
       return track;
     }
-    const key4 = JSON.stringify(track.nodePathInfo.nodePath);
+    const key4 = track.nodePathInfo.nodePath.join(".");
     const index = nodePathIndexCounters.get(key4) ?? 0;
     nodePathIndexCounters.set(key4, index + 1);
     return {
       ...track,
-      nodePathInfo: { nodePath: track.nodePathInfo.nodePath, index }
+      nodePathInfo: {
+        nodePath: track.nodePathInfo.nodePath,
+        index,
+        numberOfSequencesWithThisNodePath: 0
+      }
+    };
+  }).map((track) => {
+    if (track.nodePathInfo === null) {
+      return track;
+    }
+    const key4 = track.nodePathInfo.nodePath.join(".");
+    return {
+      ...track,
+      nodePathInfo: {
+        nodePath: track.nodePathInfo.nodePath,
+        index: track.nodePathInfo.index,
+        numberOfSequencesWithThisNodePath: nodePathIndexCounters.get(key4) ?? 0
+      }
     };
   });
 };
@@ -21354,7 +21374,7 @@ var SequencePropsObserver = () => {
       if (event.type !== "sequence-props-updated") {
         return;
       }
-      setCodeValues(event.nodePath, event.result);
+      setCodeValues(event.nodePath, () => event.result);
     };
     const unsubscribe = subscribeToEvent("sequence-props-updated", handleEvent);
     return () => {
@@ -21435,7 +21455,7 @@ var acquireSequencePropsSubscription = ({
         entries.delete(key4);
       }
       acquired.promise.then((result) => {
-        if (!result.canUpdate) {
+        if (!result.success) {
           return;
         }
         return callApi("/api/unsubscribe-from-sequence-props", {
@@ -21482,13 +21502,13 @@ var useSequencePropsSubscription = ({
       schema,
       clientId,
       applyOnce: (result) => {
-        if (!result.canUpdate) {
+        if (!result.success) {
           return;
         }
-        setCodeValues(result.nodePath, result);
+        setCodeValues(result.nodePath, () => result.status);
       },
       applyEach: (result) => {
-        if (!result.canUpdate) {
+        if (!result.success) {
           return;
         }
         setOverrideIdToNodePath(overrideId, result.nodePath);
@@ -21522,7 +21542,7 @@ var SubscribeToNodePaths = ({ overrideId, schema, stack: stack2 }) => {
 
 // src/components/Timeline/TimelineDragHandler.tsx
 import { PlayerInternals as PlayerInternals16 } from "@remotion/player";
-import {
+import React132, {
   useCallback as useCallback101,
   useContext as useContext71,
   useEffect as useEffect67,
@@ -21662,10 +21682,10 @@ var TimelineDragHandler = () => {
   return /* @__PURE__ */ jsx196("div", {
     ref: sliderAreaRef,
     style: containerStyle2,
-    children: video ? /* @__PURE__ */ jsx196(Inner2, {}) : null
+    children: video ? /* @__PURE__ */ jsx196(TimelineDragHandlerInnerMemo, {}) : null
   });
 };
-var Inner2 = () => {
+var TimelineDragHandlerInner = () => {
   const videoConfig = useVideoConfig4();
   const size3 = PlayerInternals16.useElementSize(scrollableRef, {
     triggerOnWindowResize: true,
@@ -22064,9 +22084,10 @@ var Inner2 = () => {
     ]
   });
 };
+var TimelineDragHandlerInnerMemo = React132.memo(TimelineDragHandlerInner);
 
 // src/components/Timeline/TimelineHeightContainer.tsx
-import { useMemo as useMemo112 } from "react";
+import React136, { useMemo as useMemo112 } from "react";
 
 // src/components/Timeline/use-timeline-height.ts
 import { useContext as useContext73, useMemo as useMemo111 } from "react";
@@ -22295,13 +22316,13 @@ var TimelineTimeIndicators = () => {
   if (video === null) {
     return null;
   }
-  return /* @__PURE__ */ jsx199(Inner3, {
+  return /* @__PURE__ */ jsx199(TimelineTimeIndicatorsInner, {
     durationInFrames: video.durationInFrames,
     fps: video.fps,
     windowWidth: sliderTrack
   });
 };
-var Inner3 = ({ windowWidth, durationInFrames, fps }) => {
+var TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) => {
   const ref2 = useRef39(null);
   useEffect69(() => {
     const currentRef = ref2.current;
@@ -22387,30 +22408,22 @@ var useTimelineHeight = ({
 }) => {
   const { getIsExpanded } = useContext73(ExpandedTracksGetterContext);
   const { previewServerState } = useContext73(StudioServerConnectionCtx);
-  const { getDragOverrides, getCodeValues } = useContext73(Internals53.VisualModeGettersContext);
-  const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) && previewServerState.type === "connected";
+  const { getCodeValues } = useContext73(Internals53.VisualModeCodeValuesContext);
+  const previewServerConnected = previewServerState.type === "connected";
   return useMemo111(() => {
     const tracksHeight = shown.reduce((acc, track) => {
-      const isExpanded = visualModeEnabled && track.nodePathInfo !== null && getIsExpanded(track.nodePathInfo);
+      const isExpanded = previewServerConnected && track.nodePathInfo !== null && getIsExpanded(track.nodePathInfo);
       const layerHeight = getTimelineLayerHeight(track.sequence.type) + TIMELINE_ITEM_BORDER_BOTTOM;
       const expandedHeight = isExpanded && track.nodePathInfo ? getExpandedTrackHeight({
         sequence: track.sequence,
         nodePathInfo: track.nodePathInfo,
         getIsExpanded,
-        getDragOverrides,
         getCodeValues
       }) + TIMELINE_ITEM_BORDER_BOTTOM : 0;
       return acc + layerHeight + expandedHeight;
     }, 0);
     return tracksHeight + TIMELINE_ITEM_BORDER_BOTTOM + (hasBeenCut ? MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) + TIMELINE_TIME_INDICATOR_HEIGHT;
-  }, [
-    shown,
-    hasBeenCut,
-    visualModeEnabled,
-    getIsExpanded,
-    getDragOverrides,
-    getCodeValues
-  ]);
+  }, [shown, hasBeenCut, previewServerConnected, getIsExpanded, getCodeValues]);
 };
 
 // src/components/Timeline/TimelineHeightContainer.tsx
@@ -22421,7 +22434,7 @@ var baseStyle2 = {
   minHeight: "100%",
   overflowX: "hidden"
 };
-var TimelineHeightContainer = ({ shown, hasBeenCut, children }) => {
+var TimelineHeightContainerInner = ({ shown, hasBeenCut, children }) => {
   const height = useTimelineHeight({ shown, hasBeenCut });
   const style10 = useMemo112(() => ({ ...baseStyle2, height }), [height]);
   return /* @__PURE__ */ jsx200("div", {
@@ -22429,6 +22442,7 @@ var TimelineHeightContainer = ({ shown, hasBeenCut, children }) => {
     children
   });
 };
+var TimelineHeightContainer = React136.memo(TimelineHeightContainerInner);
 
 // src/components/Timeline/TimelineList.tsx
 import { PlayerInternals as PlayerInternals18 } from "@remotion/player";
@@ -22496,7 +22510,7 @@ var TimelineExpandArrowButton = ({ isExpanded, onClick, label: label9, disabled
       style: svgStyle,
       children: /* @__PURE__ */ jsx202("path", {
         d: "M2 1L6 4L2 7Z",
-        fill: "white"
+        fill: "#ccc"
       })
     })
   });
@@ -22515,6 +22529,7 @@ import { Internals as Internals55 } from "remotion";
 import { useMemo as useMemo120 } from "react";
 
 // src/components/Timeline/TimelineFieldRow.tsx
+import { optimisticUpdateForCodeValues } from "@remotion/studio-shared";
 import { useCallback as useCallback109, useContext as useContext74, useMemo as useMemo119 } from "react";
 import { Internals as Internals54 } from "remotion";
 
@@ -22524,21 +22539,21 @@ import { jsx as jsx203 } from "react/jsx-runtime";
 var checkboxContainer = {
   marginLeft: 8
 };
-var TimelineBooleanField = ({ field, codeValue, effectiveValue, canUpdate, onSave }) => {
+var TimelineBooleanField = ({ field, propStatus, effectiveValue, onSave }) => {
   const checked = Boolean(effectiveValue);
   const onChange = useCallback104(() => {
     const newValue = !checked;
-    if (canUpdate && newValue !== codeValue) {
-      onSave(field.key, newValue);
+    if (propStatus.canUpdate && newValue !== propStatus.codeValue) {
+      onSave(newValue);
     }
-  }, [canUpdate, onSave, field.key, checked, codeValue]);
+  }, [propStatus, onSave, checked]);
   return /* @__PURE__ */ jsx203("div", {
     style: checkboxContainer,
     children: /* @__PURE__ */ jsx203(Checkbox, {
       checked,
       onChange,
       name: field.key,
-      disabled: !canUpdate,
+      disabled: !propStatus.canUpdate,
       variant: "small"
     })
   });
@@ -22552,9 +22567,8 @@ var comboboxStyle = {
 };
 var TimelineEnumField = ({
   field,
-  codeValue,
+  propStatus,
   effectiveValue,
-  canUpdate,
   onSave,
   onDragValueChange,
   onDragEnd
@@ -22566,14 +22580,14 @@ var TimelineEnumField = ({
   const variantKeys = Object.keys(fieldSchema.variants);
   const current = String(effectiveValue ?? fieldSchema.default);
   const onSelect = useCallback105((newValue) => {
-    if (!canUpdate || newValue === codeValue) {
+    if (!propStatus.canUpdate || newValue === propStatus.codeValue) {
       return;
     }
-    onDragValueChange(field.key, newValue);
-    onSave(field.key, newValue).finally(() => {
+    onDragValueChange(newValue);
+    onSave(newValue).finally(() => {
       onDragEnd();
     });
-  }, [canUpdate, codeValue, field.key, onSave, onDragValueChange, onDragEnd]);
+  }, [propStatus, onSave, onDragValueChange, onDragEnd]);
   const items = useMemo115(() => {
     return variantKeys.map((key4) => ({
       type: "item",
@@ -22585,9 +22599,9 @@ var TimelineEnumField = ({
       leftItem: null,
       subMenu: null,
       quickSwitcherLabel: null,
-      disabled: !canUpdate
+      disabled: !propStatus.canUpdate
     }));
-  }, [variantKeys, onSelect, canUpdate]);
+  }, [variantKeys, onSelect, propStatus]);
   return /* @__PURE__ */ jsx204(Combobox, {
     small: true,
     title: field.key,
@@ -22615,20 +22629,19 @@ import { jsx as jsx205 } from "react/jsx-runtime";
 var TimelineNumberField = ({
   field,
   effectiveValue,
-  canUpdate,
   onSave,
   onDragValueChange,
   onDragEnd,
-  codeValue
+  propStatus
 }) => {
   const [dragValue, setDragValue] = useState72(null);
   const onValueChange = useCallback106((newVal) => {
     setDragValue(newVal);
-    onDragValueChange(field.key, newVal);
-  }, [onDragValueChange, field.key]);
+    onDragValueChange(newVal);
+  }, [onDragValueChange]);
   const onValueChangeEnd = useCallback106((newVal) => {
-    if (canUpdate && newVal !== codeValue) {
-      onSave(field.key, newVal).finally(() => {
+    if (propStatus.canUpdate && newVal !== propStatus.codeValue) {
+      onSave(newVal).finally(() => {
         setDragValue(null);
         onDragEnd();
       });
@@ -22636,18 +22649,18 @@ var TimelineNumberField = ({
       setDragValue(null);
       onDragEnd();
     }
-  }, [canUpdate, onSave, field.key, codeValue, onDragEnd]);
+  }, [onSave, propStatus, onDragEnd]);
   const onTextChange = useCallback106((newVal) => {
-    if (canUpdate) {
+    if (propStatus.canUpdate) {
       const parsed = Number(newVal);
-      if (!Number.isNaN(parsed) && parsed !== codeValue) {
+      if (!Number.isNaN(parsed) && propStatus.canUpdate && parsed !== propStatus.codeValue) {
         setDragValue(parsed);
-        onSave(field.key, parsed).catch(() => {
+        onSave(parsed).catch(() => {
           setDragValue(null);
         });
       }
     }
-  }, [canUpdate, onSave, field.key, codeValue]);
+  }, [onSave, propStatus]);
   const step = field.fieldSchema.type === "number" ? field.fieldSchema.step ?? 1 : 1;
   const stepDecimals = useMemo116(() => getDecimalPlaces(step), [step]);
   const formatter = useCallback106((v) => {
@@ -22697,8 +22710,7 @@ var parseCssRotationToDegrees = (value) => {
 var TimelineRotationField = ({
   field,
   effectiveValue,
-  codeValue,
-  canUpdate,
+  propStatus,
   onSave,
   onDragValueChange,
   onDragEnd
@@ -22707,12 +22719,12 @@ var TimelineRotationField = ({
   const degrees = useMemo117(() => parseCssRotationToDegrees(String(effectiveValue ?? "0deg")), [effectiveValue]);
   const onValueChange = useCallback107((newVal) => {
     setDragValue(newVal);
-    onDragValueChange(field.key, `${newVal}deg`);
-  }, [onDragValueChange, field.key]);
+    onDragValueChange(`${newVal}deg`);
+  }, [onDragValueChange]);
   const onValueChangeEnd = useCallback107((newVal) => {
     const newStr = `${newVal}deg`;
-    if (canUpdate && newStr !== codeValue) {
-      onSave(field.key, newStr).finally(() => {
+    if (propStatus.canUpdate && newStr !== propStatus.codeValue) {
+      onSave(newStr).finally(() => {
         setDragValue(null);
         onDragEnd();
       });
@@ -22720,21 +22732,21 @@ var TimelineRotationField = ({
       setDragValue(null);
       onDragEnd();
     }
-  }, [canUpdate, onSave, field.key, codeValue, onDragEnd]);
+  }, [propStatus, onSave, onDragEnd]);
   const onTextChange = useCallback107((newVal) => {
-    if (canUpdate) {
+    if (propStatus.canUpdate) {
       const parsed = Number(newVal);
       if (!Number.isNaN(parsed)) {
         const newStr = `${parsed}deg`;
-        if (newStr !== codeValue) {
+        if (newStr !== propStatus.codeValue) {
           setDragValue(parsed);
-          onSave(field.key, newStr).catch(() => {
+          onSave(newStr).catch(() => {
             setDragValue(null);
           });
         }
       }
     }
-  }, [canUpdate, onSave, field.key, codeValue]);
+  }, [propStatus, onSave]);
   const step = field.fieldSchema.type === "rotation" ? field.fieldSchema.step ?? 1 : 1;
   const stepDecimals = useMemo117(() => getDecimalPlaces(step), [step]);
   const formatter = useCallback107((v) => {
@@ -22783,9 +22795,8 @@ var containerStyle2 = {
 };
 var TimelineTranslateField = ({
   field,
-  codeValue,
+  propStatus,
   effectiveValue,
-  canUpdate,
   onSave,
   onDragValueChange,
   onDragEnd
@@ -22805,13 +22816,13 @@ var TimelineTranslateField = ({
   const onXChange = useCallback108((newVal) => {
     setDragX(newVal);
     const currentY = dragY ?? codeY;
-    onDragValueChange(field.key, makeString(newVal, currentY));
-  }, [onDragValueChange, field.key, dragY, codeY, makeString]);
+    onDragValueChange(makeString(newVal, currentY));
+  }, [onDragValueChange, dragY, codeY, makeString]);
   const onXChangeEnd = useCallback108((newVal) => {
     const currentY = dragY ?? codeY;
     const newStr = makeString(newVal, currentY);
-    if (canUpdate && newStr !== codeValue) {
-      onSave(field.key, newStr).finally(() => {
+    if (propStatus.canUpdate && newStr !== propStatus.codeValue) {
+      onSave(newStr).finally(() => {
         setDragX(null);
         onDragEnd();
       });
@@ -22819,39 +22830,30 @@ var TimelineTranslateField = ({
       setDragX(null);
       onDragEnd();
     }
-  }, [
-    dragY,
-    codeY,
-    makeString,
-    canUpdate,
-    codeValue,
-    onSave,
-    field.key,
-    onDragEnd
-  ]);
+  }, [dragY, codeY, makeString, propStatus, onSave, onDragEnd]);
   const onXTextChange = useCallback108((newVal) => {
-    if (canUpdate) {
+    if (propStatus.canUpdate) {
       const parsed = Number(newVal);
       if (!Number.isNaN(parsed)) {
         const currentY = dragY ?? codeY;
         const newStr = makeString(parsed, currentY);
-        if (newStr !== codeValue) {
+        if (newStr !== propStatus.codeValue) {
           setDragX(parsed);
-          onSave(field.key, newStr);
+          onSave(newStr);
         }
       }
     }
-  }, [canUpdate, dragY, codeY, makeString, codeValue, onSave, field.key]);
+  }, [propStatus, dragY, codeY, makeString, onSave]);
   const onYChange = useCallback108((newVal) => {
     setDragY(newVal);
     const currentX = dragX ?? codeX;
-    onDragValueChange(field.key, makeString(currentX, newVal));
-  }, [onDragValueChange, field.key, dragX, codeX, makeString]);
+    onDragValueChange(makeString(currentX, newVal));
+  }, [onDragValueChange, dragX, codeX, makeString]);
   const onYChangeEnd = useCallback108((newVal) => {
     const currentX = dragX ?? codeX;
     const newStr = makeString(currentX, newVal);
-    if (canUpdate && newStr !== codeValue) {
-      onSave(field.key, newStr).finally(() => {
+    if (propStatus.canUpdate && newStr !== propStatus.codeValue) {
+      onSave(newStr).finally(() => {
         setDragY(null);
         onDragEnd();
       });
@@ -22859,31 +22861,22 @@ var TimelineTranslateField = ({
       setDragY(null);
       onDragEnd();
     }
-  }, [
-    dragX,
-    codeX,
-    makeString,
-    canUpdate,
-    codeValue,
-    onSave,
-    field.key,
-    onDragEnd
-  ]);
+  }, [dragX, codeX, makeString, propStatus, onSave, onDragEnd]);
   const onYTextChange = useCallback108((newVal) => {
-    if (canUpdate) {
+    if (propStatus.canUpdate) {
       const parsed = Number(newVal);
       if (!Number.isNaN(parsed)) {
         const currentX = dragX ?? codeX;
         const newStr = makeString(currentX, parsed);
-        if (newStr !== codeValue) {
+        if (newStr !== propStatus.codeValue) {
           setDragY(parsed);
-          onSave(field.key, newStr).catch(() => {
+          onSave(newStr).catch(() => {
             setDragY(null);
           });
         }
       }
     }
-  }, [canUpdate, onSave, field.key, codeValue, dragX, codeX, makeString]);
+  }, [propStatus, onSave, dragX, codeX, makeString]);
   return /* @__PURE__ */ jsxs95("span", {
     style: containerStyle2,
     children: [
@@ -22945,18 +22938,16 @@ var TimelineFieldValue = ({
   onDragValueChange,
   onDragEnd,
   propStatus,
-  canUpdate,
-  effectiveValue,
-  codeValue
+  effectiveValue
 }) => {
-  const wrapperStyle = canUpdate === null || canUpdate === false ? notEditableBackground : undefined;
+  const wrapperStyle = !propStatus.canUpdate ? notEditableBackground : undefined;
   if (!field.supported) {
     return /* @__PURE__ */ jsx208("span", {
       style: unsupportedLabel,
       children: "unsupported"
     });
   }
-  if (propStatus !== null && !propStatus.canUpdate) {
+  if (!propStatus.canUpdate) {
     if (propStatus.reason === "computed") {
       return /* @__PURE__ */ jsx208("span", {
         style: unsupportedLabel,
@@ -22965,24 +22956,14 @@ var TimelineFieldValue = ({
     }
     throw new Error(`Unsupported prop status: ${propStatus.reason}`);
   }
-  if (propStatus === null) {
-    return /* @__PURE__ */ jsx208("span", {
-      style: notEditableBackground,
-      children: /* @__PURE__ */ jsx208("span", {
-        style: unsupportedLabel,
-        children: "error"
-      })
-    });
-  }
   if (field.typeName === "number") {
     return /* @__PURE__ */ jsx208("span", {
       style: wrapperStyle,
       children: /* @__PURE__ */ jsx208(TimelineNumberField, {
         field,
         effectiveValue,
-        canUpdate,
         onSave,
-        codeValue,
+        propStatus,
         onDragValueChange,
         onDragEnd
       })
@@ -22994,8 +22975,7 @@ var TimelineFieldValue = ({
       children: /* @__PURE__ */ jsx208(TimelineRotationField, {
         field,
         effectiveValue,
-        codeValue,
-        canUpdate,
+        propStatus,
         onSave,
         onDragValueChange,
         onDragEnd
@@ -23008,8 +22988,7 @@ var TimelineFieldValue = ({
       children: /* @__PURE__ */ jsx208(TimelineTranslateField, {
         field,
         effectiveValue,
-        codeValue,
-        canUpdate,
+        propStatus,
         onSave,
         onDragValueChange,
         onDragEnd
@@ -23021,8 +23000,7 @@ var TimelineFieldValue = ({
       style: wrapperStyle,
       children: /* @__PURE__ */ jsx208(TimelineBooleanField, {
         field,
-        codeValue,
-        canUpdate,
+        propStatus,
         onSave,
         effectiveValue
       })
@@ -23033,8 +23011,7 @@ var TimelineFieldValue = ({
       style: inlineWrapper,
       children: /* @__PURE__ */ jsx208(TimelineEnumField, {
         field,
-        codeValue,
-        canUpdate,
+        propStatus,
         onSave,
         effectiveValue,
         onDragValueChange,
@@ -23076,10 +23053,14 @@ var TimelineFieldRow = ({
   nodePath,
   schema
 }) => {
-  const { getDragOverrides, getCodeValues } = useContext74(Internals54.VisualModeGettersContext);
+  const { getCodeValues } = useContext74(Internals54.VisualModeCodeValuesContext);
+  const { getDragOverrides } = useContext74(Internals54.VisualModeDragOverridesContext);
   const { setDragOverrides, clearDragOverrides } = useContext74(Internals54.VisualModeSettersContext);
   const codeValuesForOverride = getCodeValues(nodePath);
   const codeValue = codeValuesForOverride?.[field.key] ?? null;
+  if (codeValue === null) {
+    throw new Error("Unexpectedly got null code value for field" + field.key);
+  }
   const dragOverrideValue = useMemo119(() => {
     return nodePath === null ? undefined : (getDragOverrides(nodePath) ?? {})[field.key];
   }, [getDragOverrides, nodePath, field.key]);
@@ -23091,43 +23072,66 @@ var TimelineFieldRow = ({
     shouldResortToDefaultValueIfUndefined: true
   });
   const { setCodeValues } = useContext74(Internals54.VisualModeSettersContext);
-  const onSave = useCallback109((key4, value) => {
+  const onSave = useCallback109((value) => {
     if (!codeValuesForOverride || !validatedLocation || !nodePath) {
       return Promise.reject(new Error("Cannot save"));
     }
-    const status = codeValuesForOverride[key4];
-    if (!status || !status.canUpdate) {
+    if (!codeValue || !codeValue.canUpdate) {
       return Promise.reject(new Error("Cannot save"));
     }
     const defaultValue = field.fieldSchema.default !== undefined ? JSON.stringify(field.fieldSchema.default) : null;
+    const stringifiedValue = JSON.stringify(value);
+    if (value === codeValue.codeValue) {
+      return Promise.resolve();
+    }
+    if (defaultValue === stringifiedValue && codeValue.codeValue === undefined) {
+      return Promise.resolve();
+    }
+    let previousUpdate;
+    setCodeValues(nodePath, (prev) => {
+      previousUpdate = prev;
+      return optimisticUpdateForCodeValues({
+        previous: prev,
+        fieldKey: field.key,
+        value,
+        schema
+      });
+    });
     return callApi("/api/save-sequence-props", {
       fileName: validatedLocation.source,
       nodePath,
-      key: key4,
-      value: JSON.stringify(value),
+      key: field.key,
+      value: stringifiedValue,
       defaultValue,
       schema
     }).then((data) => {
-      if (data.success) {
-        setCodeValues(nodePath, data.newStatus);
-        return;
+      setCodeValues(nodePath, () => data);
+    }).catch(() => {
+      if (previousUpdate) {
+        setCodeValues(nodePath, (current) => {
+          if (previousUpdate) {
+            return previousUpdate;
+          }
+          return current;
+        });
       }
-      return Promise.reject(new Error(data.reason));
     });
   }, [
+    codeValue,
     codeValuesForOverride,
     field.fieldSchema.default,
+    field.key,
     nodePath,
     schema,
     setCodeValues,
     validatedLocation
   ]);
-  const onDragValueChange = useCallback109((key4, value) => {
+  const onDragValueChange = useCallback109((value) => {
     if (nodePath === null) {
       throw new Error("Cannot drag value");
     }
-    setDragOverrides(nodePath, key4, value);
-  }, [setDragOverrides, nodePath]);
+    setDragOverrides(nodePath, field.key, value);
+  }, [setDragOverrides, nodePath, field.key]);
   const onDragEnd = useCallback109(() => {
     if (nodePath === null) {
       throw new Error("Cannot clear drag value");
@@ -23160,9 +23164,7 @@ var TimelineFieldRow = ({
         onSave,
         onDragValueChange,
         onDragEnd,
-        canUpdate: codeValue?.canUpdate ?? false,
-        effectiveValue,
-        codeValue
+        effectiveValue
       })
     ]
   });
@@ -23265,7 +23267,8 @@ var separator = {
 var TimelineExpandedSection = ({ sequence, originalLocation, nodePathInfo, nestedDepth }) => {
   const { getIsExpanded } = useContext75(ExpandedTracksGetterContext);
   const { toggleTrack } = useContext75(ExpandedTracksSetterContext);
-  const { getDragOverrides, getCodeValues } = useContext75(Internals55.VisualModeGettersContext);
+  const { getCodeValues } = useContext75(Internals55.VisualModeCodeValuesContext);
+  const { getDragOverrides } = useContext75(Internals55.VisualModeDragOverridesContext);
   const validatedLocation = useMemo121(() => {
     if (!originalLocation || !originalLocation.source || !originalLocation.line) {
       return null;
@@ -23287,9 +23290,8 @@ var TimelineExpandedSection = ({ sequence, originalLocation, nodePathInfo, neste
     sequence,
     nodePathInfo,
     getIsExpanded,
-    getDragOverrides,
     getCodeValues
-  }), [sequence, nodePathInfo, getIsExpanded, getDragOverrides, getCodeValues]);
+  }), [sequence, nodePathInfo, getIsExpanded, getCodeValues]);
   const style10 = useMemo121(() => {
     return {
       ...expandedSectionBase,
@@ -23402,15 +23404,8 @@ var TimelineLayerEye = ({ onInvoked, hidden, type }) => {
 };
 
 // src/components/Timeline/TimelineStack/index.tsx
-import { SOURCE_MAP_ENDPOINT } from "@remotion/studio-shared";
 import { useCallback as useCallback111, useContext as useContext76, useMemo as useMemo122, useState as useState75 } from "react";
-import { SourceMapConsumer as SourceMapConsumer3 } from "source-map";
 import { jsx as jsx213, jsxs as jsxs99, Fragment as Fragment31 } from "react/jsx-runtime";
-var publicPath = window.remotion_publicPath === "/" ? "" : window.remotion_publicPath;
-var withoutSlashInTheEnd = publicPath.endsWith("/") ? publicPath.slice(0, -1) : publicPath;
-SourceMapConsumer3.initialize({
-  "lib/mappings.wasm": withoutSlashInTheEnd + SOURCE_MAP_ENDPOINT
-});
 var TimelineStack = ({ isCompact, sequence, originalLocation }) => {
   const [stackHovered, setStackHovered] = useState75(false);
   const [titleHovered, setTitleHovered] = useState75(false);
@@ -23572,13 +23567,10 @@ var INDENT = 10;
 var TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) => {
   const nodePath = nodePathInfo?.nodePath ?? null;
   const { previewServerState } = useContext77(StudioServerConnectionCtx);
-  const visualModeEnvEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED);
   const previewConnected = previewServerState.type === "connected";
-  const visualModeActive = visualModeEnvEnabled && previewConnected;
   const { hidden, setHidden } = useContext77(Internals56.SequenceVisibilityToggleContext);
   const { getIsExpanded } = useContext77(ExpandedTracksGetterContext);
   const { toggleTrack } = useContext77(ExpandedTracksSetterContext);
-  const { getIsJsxInMapCallback } = useContext77(Internals56.VisualModeGettersContext);
   const originalLocation = useResolvedStack(sequence.stack ?? null);
   const validatedLocation = useMemo123(() => {
     if (!originalLocation || !originalLocation.source || !originalLocation.line) {
@@ -23597,8 +23589,8 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) => {
     if (!validatedLocation?.source || !nodePath) {
       return;
     }
-    if (getIsJsxInMapCallback(nodePath)) {
-      const message = "This sequence is rendered inside a .map() callback. Duplicating inserts another copy in that callback (affecting each list item). Continue?";
+    if (nodePathInfo && nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
+      const message = "This sequence is programmatically duplicated " + nodePathInfo.numberOfSequencesWithThisNodePath + " times in the code. Duplicating inserts another copy. Continue?";
       if (!window.confirm(message)) {
         return;
       }
@@ -23616,13 +23608,13 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) => {
     } catch (err) {
       showNotification(err.message, 4000);
     }
-  }, [nodePath, validatedLocation?.source, getIsJsxInMapCallback]);
+  }, [nodePath, validatedLocation?.source, nodePathInfo]);
   const onDeleteSequenceFromSource = useCallback112(async () => {
     if (!validatedLocation?.source || !nodePath) {
       return;
     }
-    if (getIsJsxInMapCallback(nodePath)) {
-      const message = "This sequence is rendered inside a .map() callback. Deleting removes all sequences in that callback. Continue?";
+    if (nodePathInfo && nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
+      const message = "This sequence is programmatically duplicated " + nodePathInfo.numberOfSequencesWithThisNodePath + " times in the code. Deleting removes all instances. Continue?";
       if (!window.confirm(message)) {
         return;
       }
@@ -23640,9 +23632,9 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) => {
     } catch (err) {
       showNotification(err.message, 4000);
     }
-  }, [nodePath, validatedLocation?.source, getIsJsxInMapCallback]);
+  }, [nodePath, validatedLocation?.source, nodePathInfo]);
   const contextMenuValues = useMemo123(() => {
-    if (!visualModeEnvEnabled) {
+    if (!previewConnected) {
       return [];
     }
     return [
@@ -23686,9 +23678,9 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) => {
     duplicateDisabled,
     onDeleteSequenceFromSource,
     onDuplicateSequenceFromSource,
-    visualModeEnvEnabled
+    previewConnected
   ]);
-  const isExpanded = visualModeActive && nodePathInfo !== null && getIsExpanded(nodePathInfo);
+  const isExpanded = previewConnected && nodePathInfo !== null && getIsExpanded(nodePathInfo);
   const onToggleExpand = useCallback112(() => {
     if (nodePathInfo === null) {
       return;
@@ -23739,7 +23731,7 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) => {
         /* @__PURE__ */ jsx214(Padder, {
           depth: nestedDepth
         }),
-        visualModeActive ? hasExpandableContent ? /* @__PURE__ */ jsx214(TimelineExpandArrowButton, {
+        previewConnected ? hasExpandableContent ? /* @__PURE__ */ jsx214(TimelineExpandArrowButton, {
           isExpanded,
           onClick: onToggleExpand,
           label: "track properties",
@@ -23755,11 +23747,11 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) => {
   });
   return /* @__PURE__ */ jsxs100(Fragment32, {
     children: [
-      visualModeEnvEnabled ? /* @__PURE__ */ jsx214(ContextMenu, {
+      previewConnected ? /* @__PURE__ */ jsx214(ContextMenu, {
         values: contextMenuValues,
         children: trackRow
       }) : trackRow,
-      visualModeActive && isExpanded && hasExpandableContent && nodePathInfo ? /* @__PURE__ */ jsx214(TimelineExpandedSection, {
+      previewConnected && isExpanded && hasExpandableContent && nodePathInfo ? /* @__PURE__ */ jsx214(TimelineExpandedSection, {
         sequence,
         originalLocation,
         nodePathInfo,
@@ -24113,7 +24105,7 @@ var TimelineScrollable = ({ children }) => {
 };
 
 // src/components/Timeline/TimelineTracks.tsx
-import { useContext as useContext81, useMemo as useMemo128 } from "react";
+import React156, { useContext as useContext81, useMemo as useMemo128 } from "react";
 import { Internals as Internals61 } from "remotion";
 
 // src/components/Timeline/TimelineSequence.tsx
@@ -24236,268 +24228,15 @@ var useMaxMediaDuration = (s, fps) => {
 
 // src/components/AudioWaveform.tsx
 import {
+  drawBars,
   getLoopDisplayWidth,
-  shouldTileLoopDisplay
+  loadWaveformPeaks,
+  makeAudioWaveformWorker,
+  shouldTileLoopDisplay,
+  sliceWaveformPeaks
 } from "@remotion/timeline-utils";
 import { useEffect as useEffect73, useMemo as useMemo125, useRef as useRef42, useState as useState77 } from "react";
 import { Internals as Internals59 } from "remotion";
-
-// src/make-audio-waveform-worker.ts
-var makeAudioWaveformWorker = () => {
-  return new Worker(new URL("./audio-waveform-worker.mjs", import.meta.url), {
-    type: "module"
-  });
-};
-
-// src/components/parse-color.ts
-var colorCache = new Map;
-var parseColor = (color) => {
-  const cached = colorCache.get(color);
-  if (cached)
-    return cached;
-  const ctx = new OffscreenCanvas(1, 1).getContext("2d");
-  ctx.fillStyle = color;
-  ctx.fillRect(0, 0, 1, 1);
-  const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
-  const result = [r, g, b, a];
-  colorCache.set(color, result);
-  return result;
-};
-
-// src/components/draw-peaks.ts
-var CLIPPING_COLOR = "#FF7F50";
-var drawBars = (canvas, peaks, color, volume, width) => {
-  const ctx = canvas.getContext("2d");
-  if (!ctx) {
-    throw new Error("Failed to get canvas context");
-  }
-  const { height } = canvas;
-  const w = canvas.width;
-  if (w === 0 || height === 0) {
-    return;
-  }
-  ctx.clearRect(0, 0, w, height);
-  if (volume === 0)
-    return;
-  const [r, g, b, a] = parseColor(color);
-  const [cr, cg, cb, ca] = parseColor(CLIPPING_COLOR);
-  const imageData = ctx.createImageData(w, height);
-  const { data } = imageData;
-  const numBars = width;
-  for (let barIndex = 0;barIndex < numBars; barIndex++) {
-    const x = barIndex;
-    if (x >= w)
-      break;
-    const peakIndex = Math.floor(barIndex / numBars * peaks.length);
-    const peak = peaks[peakIndex] || 0;
-    const scaledPeak = peak * volume;
-    const halfBar = Math.max(0, Math.min(height / 2, scaledPeak * height / 2));
-    if (halfBar === 0)
-      continue;
-    const mid = height / 2;
-    const barY = Math.round(mid - halfBar);
-    const barEnd = Math.round(mid + halfBar);
-    const isClipping = scaledPeak > 1;
-    const clipTopEnd = isClipping ? Math.min(barY + 2, barEnd) : barY;
-    const clipBotStart = isClipping ? Math.max(barEnd - 2, barY) : barEnd;
-    for (let y = barY;y < clipTopEnd; y++) {
-      const idx = (y * w + x) * 4;
-      data[idx] = cr;
-      data[idx + 1] = cg;
-      data[idx + 2] = cb;
-      data[idx + 3] = ca;
-    }
-    for (let y = clipTopEnd;y < clipBotStart; y++) {
-      const idx = (y * w + x) * 4;
-      data[idx] = r;
-      data[idx + 1] = g;
-      data[idx + 2] = b;
-      data[idx + 3] = a;
-    }
-    for (let y = clipBotStart;y < barEnd; y++) {
-      const idx = (y * w + x) * 4;
-      data[idx] = cr;
-      data[idx + 1] = cg;
-      data[idx + 2] = cb;
-      data[idx + 3] = ca;
-    }
-  }
-  ctx.putImageData(imageData, 0, 0);
-};
-
-// src/components/load-waveform-peaks.ts
-import { ALL_FORMATS as ALL_FORMATS3, AudioSampleSink, Input as Input3, UrlSource as UrlSource3 } from "mediabunny";
-
-// src/components/waveform-peak-processor.ts
-var emitWaveformProgress = ({
-  completedPeaks,
-  final,
-  onProgress,
-  peaks,
-  totalPeaks
-}) => {
-  onProgress?.({
-    peaks,
-    completedPeaks,
-    totalPeaks,
-    final
-  });
-};
-var createWaveformPeakProcessor = ({
-  totalPeaks,
-  samplesPerPeak,
-  onProgress,
-  progressIntervalInMs,
-  now
-}) => {
-  const peaks = new Float32Array(totalPeaks);
-  let peakIndex = 0;
-  let peakMax = 0;
-  let sampleInPeak = 0;
-  let lastProgressAt = 0;
-  let lastProgressPeak = 0;
-  const emitProgress = (force) => {
-    const timestamp = now();
-    if (!force && peakIndex === lastProgressPeak && sampleInPeak === 0) {
-      return;
-    }
-    if (!force && timestamp - lastProgressAt < progressIntervalInMs) {
-      return;
-    }
-    lastProgressAt = timestamp;
-    lastProgressPeak = peakIndex;
-    emitWaveformProgress({
-      peaks,
-      completedPeaks: peakIndex,
-      totalPeaks,
-      final: force,
-      onProgress
-    });
-  };
-  return {
-    peaks,
-    processSampleChunk: (floats, channels) => {
-      const frameCount = Math.floor(floats.length / Math.max(1, channels));
-      for (let frame2 = 0;frame2 < frameCount; frame2++) {
-        let framePeak = 0;
-        for (let channel = 0;channel < channels; channel++) {
-          const sampleIndex = frame2 * channels + channel;
-          const abs = Math.abs(floats[sampleIndex] ?? 0);
-          if (abs > framePeak) {
-            framePeak = abs;
-          }
-        }
-        if (framePeak > peakMax) {
-          peakMax = framePeak;
-        }
-        sampleInPeak++;
-        if (sampleInPeak >= samplesPerPeak) {
-          if (peakIndex < totalPeaks) {
-            peaks[peakIndex] = peakMax;
-          }
-          peakIndex++;
-          peakMax = 0;
-          sampleInPeak = 0;
-        }
-      }
-      emitProgress(false);
-    },
-    finalize: () => {
-      if (sampleInPeak > 0 && peakIndex < totalPeaks) {
-        peaks[peakIndex] = peakMax;
-        peakIndex++;
-      }
-      emitProgress(true);
-    }
-  };
-};
-
-// src/components/load-waveform-peaks.ts
-var TARGET_SAMPLE_RATE = 100;
-var DEFAULT_PROGRESS_INTERVAL_IN_MS = 50;
-var peaksCache = new Map;
-async function loadWaveformPeaks(url, signal, options) {
-  const cached = peaksCache.get(url);
-  if (cached) {
-    emitWaveformProgress({
-      peaks: cached,
-      completedPeaks: cached.length,
-      totalPeaks: cached.length,
-      final: true,
-      onProgress: options?.onProgress
-    });
-    return cached;
-  }
-  const input2 = new Input3({
-    formats: ALL_FORMATS3,
-    source: new UrlSource3(url)
-  });
-  try {
-    const audioTrack = await input2.getPrimaryAudioTrack();
-    if (!audioTrack) {
-      return new Float32Array(0);
-    }
-    if (await audioTrack.isLive()) {
-      throw new Error("Live streams are not currently supported by Remotion. Sorry! Source: " + url);
-    }
-    if (await audioTrack.isRelativeToUnixEpoch()) {
-      throw new Error("Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: " + url);
-    }
-    const sampleRate = await audioTrack.getSampleRate();
-    const durationInSeconds = await audioTrack.getDurationFromMetadata({ skipLiveWait: true }) ?? await audioTrack.computeDuration({ skipLiveWait: true });
-    const totalPeaks = Math.ceil(durationInSeconds * TARGET_SAMPLE_RATE);
-    const samplesPerPeak = Math.max(1, Math.floor(sampleRate / TARGET_SAMPLE_RATE));
-    const sink = new AudioSampleSink(audioTrack);
-    const processor = createWaveformPeakProcessor({
-      totalPeaks,
-      samplesPerPeak,
-      onProgress: options?.onProgress,
-      progressIntervalInMs: options?.progressIntervalInMs ?? DEFAULT_PROGRESS_INTERVAL_IN_MS,
-      now: () => Date.now()
-    });
-    for await (const sample of sink.samples()) {
-      if (signal.aborted) {
-        sample.close();
-        return new Float32Array(0);
-      }
-      const bytesNeeded = sample.allocationSize({
-        format: "f32",
-        planeIndex: 0
-      });
-      const floats = new Float32Array(bytesNeeded / 4);
-      sample.copyTo(floats, { format: "f32", planeIndex: 0 });
-      const channels = Math.max(1, sample.numberOfChannels);
-      sample.close();
-      processor.processSampleChunk(floats, channels);
-    }
-    processor.finalize();
-    const { peaks } = processor;
-    peaksCache.set(url, peaks);
-    return peaks;
-  } finally {
-    input2.dispose();
-  }
-}
-
-// src/components/slice-waveform-peaks.ts
-var sliceWaveformPeaks = ({
-  durationInFrames,
-  fps,
-  peaks,
-  playbackRate,
-  startFrom
-}) => {
-  if (peaks.length === 0) {
-    return peaks;
-  }
-  const startTimeInSeconds = startFrom / fps;
-  const durationInSeconds = durationInFrames / fps * playbackRate;
-  const startPeakIndex = Math.floor(startTimeInSeconds * TARGET_SAMPLE_RATE);
-  const endPeakIndex = Math.ceil((startTimeInSeconds + durationInSeconds) * TARGET_SAMPLE_RATE);
-  return peaks.subarray(Math.max(0, startPeakIndex), Math.min(peaks.length, endPeakIndex));
-};
-
-// src/components/AudioWaveform.tsx
 import { jsx as jsx217, jsxs as jsxs102 } from "react/jsx-runtime";
 var EMPTY_PEAKS = new Float32Array(0);
 var canRetryCanvasTransfer = (err) => {
@@ -24546,7 +24285,13 @@ var drawLoopedWaveform = ({
   const targetCanvas = document.createElement("canvas");
   targetCanvas.width = Math.max(1, Math.ceil(loopWidth));
   targetCanvas.height = h;
-  drawBars(targetCanvas, peaks, "rgba(255, 255, 255, 0.6)", volume, targetCanvas.width);
+  drawBars({
+    canvas: targetCanvas,
+    peaks,
+    color: "rgba(255, 255, 255, 0.6)",
+    volume,
+    width: targetCanvas.width
+  });
   canvas.width = w;
   canvas.height = h;
   const ctx = canvas.getContext("2d");
@@ -24709,7 +24454,13 @@ var AudioWaveform = ({
         })
       });
     } else {
-      drawBars(canvasElement, portionPeaks ?? EMPTY_PEAKS, "rgba(255, 255, 255, 0.6)", vol, w);
+      drawBars({
+        canvas: canvasElement,
+        peaks: portionPeaks ?? EMPTY_PEAKS,
+        color: "rgba(255, 255, 255, 0.6)",
+        volume: vol,
+        width: w
+      });
     }
   }, [
     canUseWorkerPath,
@@ -25205,7 +24956,7 @@ var TimelineSequenceFn = ({ s }) => {
   if (windowWidth === null) {
     return null;
   }
-  return /* @__PURE__ */ jsx223(Inner4, {
+  return /* @__PURE__ */ jsx223(TimelineSequenceInner, {
     windowWidth,
     s
   });
@@ -25282,7 +25033,7 @@ var TimelineSequenceCurrentFrame = ({
     ]
   });
 };
-var Inner4 = ({ s, windowWidth }) => {
+var TimelineSequenceInner = ({ s, windowWidth }) => {
   const video = Internals60.useVideo();
   const maxMediaDuration = useMaxMediaDuration(s, video?.fps ?? 30);
   const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
@@ -25380,22 +25131,20 @@ var getExpandedPlaceholderStyle = ({
   sequence,
   nodePathInfo,
   getIsExpanded,
-  getDragOverrides,
   getCodeValues
 }) => ({
   height: getExpandedTrackHeight({
     sequence,
     nodePathInfo,
     getIsExpanded,
-    getDragOverrides,
     getCodeValues
   }) + TIMELINE_ITEM_BORDER_BOTTOM
 });
-var TimelineTracks = ({ timeline, hasBeenCut }) => {
+var TimelineTracksInner = ({ timeline, hasBeenCut }) => {
   const { getIsExpanded } = useContext81(ExpandedTracksGetterContext);
   const { previewServerState } = useContext81(StudioServerConnectionCtx);
-  const { getDragOverrides, getCodeValues } = useContext81(Internals61.VisualModeGettersContext);
-  const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) && previewServerState.type === "connected";
+  const { getCodeValues } = useContext81(Internals61.VisualModeCodeValuesContext);
+  const previewServerConnected = previewServerState.type === "connected";
   const timelineStyle = useMemo128(() => {
     return {
       ...timelineContent,
@@ -25425,12 +25174,11 @@ var TimelineTracks = ({ timeline, hasBeenCut }) => {
                     s: track.sequence
                   })
                 }),
-                visualModeEnabled && isExpanded && track.nodePathInfo ? /* @__PURE__ */ jsx224("div", {
+                isExpanded && track.nodePathInfo && previewServerConnected ? /* @__PURE__ */ jsx224("div", {
                   style: getExpandedPlaceholderStyle({
                     sequence: track.sequence,
                     nodePathInfo: track.nodePathInfo,
                     getIsExpanded,
-                    getDragOverrides,
                     getCodeValues
                   })
                 }) : null
@@ -25443,6 +25191,7 @@ var TimelineTracks = ({ timeline, hasBeenCut }) => {
     ]
   });
 };
+var TimelineTracks = React156.memo(TimelineTracksInner);
 
 // src/components/Timeline/Timeline.tsx
 import { jsx as jsx225, jsxs as jsxs108 } from "react/jsx-runtime";
@@ -25477,15 +25226,16 @@ var TimelineInner = () => {
   const filtered = useMemo129(() => {
     return timeline.filter((t) => !isTrackHidden(t) && t.sequence.from <= durationInFrames && t.sequence.duration > 0 && t.sequence.showInTimeline);
   }, [durationInFrames, timeline]);
-  const shown = filtered.slice(0, MAX_TIMELINE_TRACKS);
+  const shown = useMemo129(() => {
+    return filtered.length > MAX_TIMELINE_TRACKS ? filtered.slice(0, MAX_TIMELINE_TRACKS) : filtered;
+  }, [filtered]);
   const hasBeenCut = filtered.length > shown.length;
-  const visualModeEnvEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED);
   return /* @__PURE__ */ jsxs108("div", {
     ref: timelineVerticalScroll,
     style: container44,
     className: "css-reset " + VERTICAL_SCROLLBAR_CLASSNAME,
     children: [
-      visualModeEnvEnabled ? sequences.map((sequence) => {
+      sequences.map((sequence) => {
         if (!sequence.controls || !previewConnected || !sequence.stack) {
           return null;
         }
@@ -25494,7 +25244,7 @@ var TimelineInner = () => {
           schema: sequence.controls.schema,
           stack: sequence.stack
         }, sequence.id);
-      }) : null,
+      }),
       /* @__PURE__ */ jsx225(SequencePropsObserver, {}),
       /* @__PURE__ */ jsxs108(TimelineWidthProvider, {
         children: [
@@ -26968,7 +26718,7 @@ var isValidJSON = (value) => {
     return false;
   }
 };
-var Inner5 = () => {
+var Inner = () => {
   const [value, setValue] = useState82(() => {
     const override = Internals68.getInputPropsOverride();
     if (override) {
@@ -27050,7 +26800,7 @@ var Inner5 = () => {
 };
 var OverrideInputPropsModal = () => {
   return /* @__PURE__ */ jsx240(DismissableModal, {
-    children: /* @__PURE__ */ jsx240(Inner5, {})
+    children: /* @__PURE__ */ jsx240(Inner, {})
   });
 };
 
@@ -27831,7 +27581,7 @@ var KeyboardShortcutsExplainer = () => {
 };
 
 // src/components/QuickSwitcher/algolia-search.ts
-import { NoReactInternals as NoReactInternals15 } from "remotion/no-react";
+import { NoReactInternals as NoReactInternals16 } from "remotion/no-react";
 var ALGOLIA_API_KEY = "3e42dbd4f895fe93ff5cf40d860c4a85";
 var ALGOLIA_APPLICATION_ID = "PLSDUOL1CA";
 var AGOLIA_SEARCH_URL = "https://plsduol1ca-dsn.algolia.net/1/indexes/*/queries";
@@ -27873,7 +27623,7 @@ var algoliaSearch = async (query) => {
         window.open(hit.url);
       }
     };
-  }).filter(NoReactInternals15.truthy);
+  }).filter(NoReactInternals16.truthy);
 };
 var splitMatchIntoTitleAndSubtitle = (match) => {
   const main = match.type === "content" ? match._highlightResult.content : match._highlightResult.hierarchy[match.type];
@@ -36733,14 +36483,13 @@ import { jsx as jsx311, jsxs as jsxs160 } from "react/jsx-runtime";
 var getServerDisconnectedDomElement = () => {
   return document.getElementById("server-disconnected-overlay");
 };
-var StudioInner = ({ rootComponent, readOnly, visualModeEnabled }) => {
+var StudioInner = ({ rootComponent, readOnly }) => {
   return /* @__PURE__ */ jsx311(Internals76.CompositionManagerProvider, {
     onlyRenderComposition: null,
     currentCompositionMetadata: null,
     initialCompositions: [],
     initialCanvasContent: null,
     children: /* @__PURE__ */ jsx311(Internals76.RemotionRootContexts, {
-      visualModeEnabled,
       frameState: null,
       audioEnabled: window.remotion_audioEnabled,
       videoEnabled: window.remotion_videoEnabled,
@@ -36764,15 +36513,14 @@ var StudioInner = ({ rootComponent, readOnly, visualModeEnabled }) => {
     })
   });
 };
-var Studio = ({ rootComponent, readOnly, visualModeEnabled }) => {
+var Studio = ({ rootComponent, readOnly }) => {
   useLayoutEffect5(() => {
     injectCSS();
   }, []);
   return /* @__PURE__ */ jsx311(FastRefreshProvider, {
     children: /* @__PURE__ */ jsx311(StudioInner, {
       rootComponent,
-      readOnly,
-      visualModeEnabled
+      readOnly
     })
   });
 };
@@ -36799,7 +36547,7 @@ var getRootForElement = () => {
 };
 var renderToDOM = (content7) => {
   if (!ReactDOM10.createRoot) {
-    if (NoReactInternals16.ENABLE_V5_BREAKING_CHANGES) {
+    if (NoReactInternals17.ENABLE_V5_BREAKING_CHANGES) {
       throw new Error("Remotion 5.0 does only support React 18+. However, ReactDOM.createRoot() is undefined.");
     }
     ReactDOM10.render(content7, Internals77.getPreviewDomElement());
@@ -36811,7 +36559,6 @@ renderToDOM(/* @__PURE__ */ jsx312(NoRegisterRoot, {}));
 Internals77.waitForRoot((NewRoot) => {
   renderToDOM(/* @__PURE__ */ jsx312(Studio, {
     readOnly: false,
-    rootComponent: NewRoot,
-    visualModeEnabled: Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED)
+    rootComponent: NewRoot
   }));
 });