@remotion/studio 4.0.437 → 4.0.438

package/dist/components/Timeline/Timeline.js

@@ -38,8 +38,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const calculate_timeline_1 = require("../../helpers/calculate-timeline");
+const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const SplitterContainer_1 = require("../Splitter/SplitterContainer");
 const SplitterElement_1 = require("../Splitter/SplitterElement");
@@ -68,6 +70,10 @@ const noop = () => undefined;
 const TimelineInner = () => {
     var _a;
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { expandedTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
+        previewServerState.type === 'connected';
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const timeline = (0, react_1.useMemo)(() => {
         if (!videoConfig) {
@@ -91,9 +97,15 @@ const TimelineInner = () => {
     const inner = (0, react_1.useMemo)(() => {
         return {
             height: shown.reduce((acc, track) => {
+                var _a;
+                const isExpanded = visualModeEnabled && ((_a = expandedTracks[track.sequence.id]) !== null && _a !== void 0 ? _a : false);
                 return (acc +
                     (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type === 'video' ? 'video' : 'other') +
-                    Number(timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM));
+                    Number(timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM) +
+                    (isExpanded
+                        ? (0, timeline_layout_1.getExpandedTrackHeight)(track.sequence.controls) +
+                            timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM
+                        : 0));
             }, 0) +
                 timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM +
                 (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
@@ -103,7 +115,7 @@ const TimelineInner = () => {
             minHeight: '100%',
             overflowX: 'hidden',
         };
-    }, [hasBeenCut, shown]);
+    }, [hasBeenCut, shown, expandedTracks, visualModeEnabled]);
     return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(TimelineWidthProvider_1.TimelineWidthProvider, { children: jsx_runtime_1.jsx("div", { style: inner, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
                         jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
                                     jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})

package/dist/esm/{chunk-5dvr7831.js → chunk-ba0scebn.js}

@@ -20773,6 +20773,33 @@ var calculateTimeline = ({
   });
 };
 
+// src/components/ExpandedTracksProvider.tsx
+import { createContext as createContext21, useCallback as useCallback96, useMemo as useMemo101, useState as useState67 } from "react";
+import { jsx as jsx188 } from "react/jsx-runtime";
+var ExpandedTracksContext = createContext21({
+  expandedTracks: {},
+  toggleTrack: () => {
+    throw new Error("ExpandedTracksContext not initialized");
+  }
+});
+var ExpandedTracksProvider = ({ children }) => {
+  const [expandedTracks, setExpandedTracks] = useState67({});
+  const toggleTrack = useCallback96((id) => {
+    setExpandedTracks((prev) => ({
+      ...prev,
+      [id]: !prev[id]
+    }));
+  }, []);
+  const value = useMemo101(() => ({
+    expandedTracks,
+    toggleTrack
+  }), [expandedTracks, toggleTrack]);
+  return /* @__PURE__ */ jsx188(ExpandedTracksContext.Provider, {
+    value,
+    children
+  });
+};
+
 // src/components/Timeline/is-collapsed.ts
 var isTrackHidden = (track) => {
   if (!track.sequence.parent) {
@@ -20812,19 +20839,19 @@ var MaxTimelineTracksReached = () => {
 // src/components/Timeline/TimelineDragHandler.tsx
 import { PlayerInternals as PlayerInternals16 } from "@remotion/player";
 import {
-  useCallback as useCallback96,
+  useCallback as useCallback97,
   useContext as useContext65,
   useEffect as useEffect65,
-  useMemo as useMemo102,
+  useMemo as useMemo103,
   useRef as useRef36,
-  useState as useState67
+  useState as useState68
 } from "react";
 import { Internals as Internals47, useVideoConfig as useVideoConfig4 } from "remotion";
 
 // src/components/Timeline/TimelineInOutPointer.tsx
 import { createRef as createRef10, useContext as useContext63 } from "react";
 import { Internals as Internals46 } from "remotion";
-import { jsx as jsx188, jsxs as jsxs90, Fragment as Fragment27 } from "react/jsx-runtime";
+import { jsx as jsx189, jsxs as jsxs90, Fragment as Fragment27 } from "react/jsx-runtime";
 var areaHighlight = {
   position: "absolute",
   backgroundColor: "rgba(0, 0, 0, 0.5)",
@@ -20843,7 +20870,7 @@ var TimelineInOutPointer = () => {
   }
   return /* @__PURE__ */ jsxs90(Fragment27, {
     children: [
-      inFrame !== null && /* @__PURE__ */ jsx188("div", {
+      inFrame !== null && /* @__PURE__ */ jsx189("div", {
         ref: inMarkerAreaRef,
         style: {
           ...areaHighlight,
@@ -20851,7 +20878,7 @@ var TimelineInOutPointer = () => {
           width: getXPositionOfItemInTimelineImperatively(inFrame, videoConfig.durationInFrames, timelineWidth)
         }
       }),
-      outFrame !== null && /* @__PURE__ */ jsx188("div", {
+      outFrame !== null && /* @__PURE__ */ jsx189("div", {
         ref: outMarkerAreaRef,
         style: {
           ...areaHighlight,
@@ -20864,9 +20891,9 @@ var TimelineInOutPointer = () => {
 };
 
 // src/components/Timeline/TimelineInOutPointerHandle.tsx
-import { createRef as createRef11, useContext as useContext64, useMemo as useMemo101 } from "react";
+import { createRef as createRef11, useContext as useContext64, useMemo as useMemo102 } from "react";
 import { useVideoConfig as useVideoConfig3 } from "remotion";
-import { jsx as jsx189 } from "react/jsx-runtime";
+import { jsx as jsx190 } from "react/jsx-runtime";
 var line3 = {
   height: "100%",
   width: 1,
@@ -20880,14 +20907,14 @@ var inPointerHandle = createRef11();
 var outPointerHandle = createRef11();
 var InnerTimelineInOutPointerHandle = ({ atFrame, dragging, timelineWidth, type }) => {
   const videoConfig = useVideoConfig3();
-  const style10 = useMemo101(() => {
+  const style10 = useMemo102(() => {
     return {
       ...line3,
       backgroundColor: dragging ? LIGHT_TRANSPARENT : "rgba(255, 255, 255, 0.1)",
       transform: `translateX(${getXPositionOfItemInTimelineImperatively(atFrame, videoConfig.durationInFrames, timelineWidth)}px)`
     };
   }, [atFrame, dragging, timelineWidth, videoConfig.durationInFrames]);
-  return /* @__PURE__ */ jsx189("div", {
+  return /* @__PURE__ */ jsx190("div", {
     ref: type === "in" ? inPointerHandle : outPointerHandle,
     style: style10
   });
@@ -20901,7 +20928,7 @@ var TimelineInOutPointerHandle = ({
   if (timelineWidth === null) {
     return null;
   }
-  return /* @__PURE__ */ jsx189(InnerTimelineInOutPointerHandle, {
+  return /* @__PURE__ */ jsx190(InnerTimelineInOutPointerHandle, {
     atFrame,
     dragging,
     timelineWidth,
@@ -20910,7 +20937,7 @@ var TimelineInOutPointerHandle = ({
 };
 
 // src/components/Timeline/TimelineDragHandler.tsx
-import { jsx as jsx190, jsxs as jsxs91 } from "react/jsx-runtime";
+import { jsx as jsx191, jsxs as jsxs91 } from "react/jsx-runtime";
 var inner = {
   overflowY: "auto",
   overflowX: "hidden"
@@ -20935,7 +20962,7 @@ var TimelineDragHandler = () => {
   const video = Internals47.useUnsafeVideoConfig();
   const { zoom: zoomMap } = useContext65(TimelineZoomCtx);
   const { canvasContent } = useContext65(Internals47.CompositionManager);
-  const containerStyle3 = useMemo102(() => {
+  const containerStyle3 = useMemo103(() => {
     if (!canvasContent || canvasContent.type !== "composition") {
       return {};
     }
@@ -20948,10 +20975,10 @@ var TimelineDragHandler = () => {
   if (!canvasContent || canvasContent.type !== "composition") {
     return null;
   }
-  return /* @__PURE__ */ jsx190("div", {
+  return /* @__PURE__ */ jsx191("div", {
     ref: sliderAreaRef,
     style: containerStyle3,
-    children: video ? /* @__PURE__ */ jsx190(Inner2, {}) : null
+    children: video ? /* @__PURE__ */ jsx191(Inner2, {}) : null
   });
 };
 var Inner2 = () => {
@@ -20962,11 +20989,11 @@ var Inner2 = () => {
   });
   const { isHighestContext } = useZIndex();
   const setFrame = Internals47.useTimelineSetFrame();
-  const [inOutDragging, setInOutDragging] = useState67({
+  const [inOutDragging, setInOutDragging] = useState68({
     dragging: false
   });
   const timelineWidth = useContext65(TimelineWidthContext);
-  const get = useCallback96((frame2) => {
+  const get = useCallback97((frame2) => {
     if (timelineWidth === null) {
       throw new Error("timeline width is not yet determined");
     }
@@ -20976,7 +21003,7 @@ var Inner2 = () => {
   const left3 = size4?.left ?? 0;
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
   const { setInAndOutFrames } = useTimelineSetInOutFramePosition();
-  const [dragging, setDragging] = useState67({
+  const [dragging, setDragging] = useState68({
     dragging: false
   });
   const { playing, play, pause, seek } = PlayerInternals16.usePlayer();
@@ -20987,7 +21014,7 @@ var Inner2 = () => {
       scroller.current = null;
     }
   };
-  const onPointerDown = useCallback96((e) => {
+  const onPointerDown = useCallback97((e) => {
     if (e.button !== 0) {
       return;
     }
@@ -21053,7 +21080,7 @@ var Inner2 = () => {
     get,
     outFrame
   ]);
-  const onPointerMoveScrubbing = useCallback96((e) => {
+  const onPointerMoveScrubbing = useCallback97((e) => {
     if (!videoConfig) {
       return;
     }
@@ -21123,7 +21150,7 @@ var Inner2 = () => {
       seek(frame2);
     }
   }, [videoConfig, dragging.dragging, left3, width, seek]);
-  const onPointerMoveInOut = useCallback96((e) => {
+  const onPointerMoveInOut = useCallback97((e) => {
     if (!videoConfig) {
       return;
     }
@@ -21159,7 +21186,7 @@ var Inner2 = () => {
       outMarkerAreaRef.current.style.width = String(width - get(outFrame) - offset) + "px";
     }
   }, [get, inFrame, inOutDragging, outFrame, videoConfig, width]);
-  const onPointerUpScrubbing = useCallback96((e) => {
+  const onPointerUpScrubbing = useCallback97((e) => {
     stopInterval();
     document.body.style.userSelect = "";
     document.body.style.webkitUserSelect = "";
@@ -21187,7 +21214,7 @@ var Inner2 = () => {
       play();
     }
   }, [dragging, left3, play, videoConfig, setFrame, width]);
-  const onPointerUpInOut = useCallback96((e) => {
+  const onPointerUpInOut = useCallback97((e) => {
     document.body.style.userSelect = "";
     document.body.style.webkitUserSelect = "";
     if (!videoConfig) {
@@ -21273,7 +21300,7 @@ var Inner2 = () => {
       window.removeEventListener("pointerup", onPointerUpInOut);
     };
   }, [inOutDragging.dragging, onPointerMoveInOut, onPointerUpInOut]);
-  const inContextMenu = useMemo102(() => {
+  const inContextMenu = useMemo103(() => {
     return [
       {
         id: "hide-in",
@@ -21298,7 +21325,7 @@ var Inner2 = () => {
       }
     ];
   }, [setInAndOutFrames, videoConfig.id]);
-  const outContextMenu = useMemo102(() => {
+  const outContextMenu = useMemo103(() => {
     return [
       {
         id: "hide-out",
@@ -21327,21 +21354,21 @@ var Inner2 = () => {
     style: style10,
     onPointerDown,
     children: [
-      /* @__PURE__ */ jsx190("div", {
+      /* @__PURE__ */ jsx191("div", {
         style: inner,
         className: VERTICAL_SCROLLBAR_CLASSNAME
       }),
-      inFrame !== null && /* @__PURE__ */ jsx190(ContextMenu, {
+      inFrame !== null && /* @__PURE__ */ jsx191(ContextMenu, {
         values: inContextMenu,
-        children: /* @__PURE__ */ jsx190(TimelineInOutPointerHandle, {
+        children: /* @__PURE__ */ jsx191(TimelineInOutPointerHandle, {
           type: "in",
           atFrame: inFrame,
           dragging: inOutDragging.dragging === "in"
         })
       }),
-      outFrame !== null && /* @__PURE__ */ jsx190(ContextMenu, {
+      outFrame !== null && /* @__PURE__ */ jsx191(ContextMenu, {
         values: outContextMenu,
-        children: /* @__PURE__ */ jsx190(TimelineInOutPointerHandle, {
+        children: /* @__PURE__ */ jsx191(TimelineInOutPointerHandle, {
           type: "out",
           dragging: inOutDragging.dragging === "out",
           atFrame: outFrame
@@ -21359,33 +21386,6 @@ import { useRef as useRef40 } from "react";
 import { useCallback as useCallback106, useContext as useContext70, useMemo as useMemo111 } from "react";
 import { Internals as Internals51 } from "remotion";
 
-// src/components/ExpandedTracksProvider.tsx
-import { createContext as createContext21, useCallback as useCallback97, useMemo as useMemo103, useState as useState68 } from "react";
-import { jsx as jsx191 } from "react/jsx-runtime";
-var ExpandedTracksContext = createContext21({
-  expandedTracks: {},
-  toggleTrack: () => {
-    throw new Error("ExpandedTracksContext not initialized");
-  }
-});
-var ExpandedTracksProvider = ({ children }) => {
-  const [expandedTracks, setExpandedTracks] = useState68({});
-  const toggleTrack = useCallback97((id) => {
-    setExpandedTracks((prev) => ({
-      ...prev,
-      [id]: !prev[id]
-    }));
-  }, []);
-  const value = useMemo103(() => ({
-    expandedTracks,
-    toggleTrack
-  }), [expandedTracks, toggleTrack]);
-  return /* @__PURE__ */ jsx191(ExpandedTracksContext.Provider, {
-    value,
-    children
-  });
-};
-
 // src/components/Timeline/TimelineExpandedSection.tsx
 import React137, { useMemo as useMemo108 } from "react";
 
@@ -23976,6 +23976,9 @@ var noop3 = () => {
 };
 var TimelineInner = () => {
   const { sequences } = useContext75(Internals57.SequenceManager);
+  const { expandedTracks } = useContext75(ExpandedTracksContext);
+  const { previewServerState } = useContext75(StudioServerConnectionCtx);
+  const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) && previewServerState.type === "connected";
   const videoConfig = Internals57.useUnsafeVideoConfig();
   const timeline = useMemo118(() => {
     if (!videoConfig) {
@@ -23999,14 +24002,15 @@ var TimelineInner = () => {
   const inner2 = useMemo118(() => {
     return {
       height: shown.reduce((acc, track) => {
-        return acc + getTimelineLayerHeight(track.sequence.type === "video" ? "video" : "other") + Number(TIMELINE_ITEM_BORDER_BOTTOM);
+        const isExpanded = visualModeEnabled && (expandedTracks[track.sequence.id] ?? false);
+        return acc + getTimelineLayerHeight(track.sequence.type === "video" ? "video" : "other") + Number(TIMELINE_ITEM_BORDER_BOTTOM) + (isExpanded ? getExpandedTrackHeight(track.sequence.controls) + TIMELINE_ITEM_BORDER_BOTTOM : 0);
       }, 0) + TIMELINE_ITEM_BORDER_BOTTOM + (hasBeenCut ? MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) + TIMELINE_TIME_INDICATOR_HEIGHT,
       display: "flex",
       flex: 1,
       minHeight: "100%",
       overflowX: "hidden"
     };
-  }, [hasBeenCut, shown]);
+  }, [hasBeenCut, shown, expandedTracks, visualModeEnabled]);
   return /* @__PURE__ */ jsx214("div", {
     ref: timelineVerticalScroll,
     style: container45,

package/dist/esm/internals.mjs

@@ -20792,6 +20792,33 @@ var calculateTimeline = ({
   });
 };
 
+// src/components/ExpandedTracksProvider.tsx
+import { createContext as createContext21, useCallback as useCallback96, useMemo as useMemo101, useState as useState67 } from "react";
+import { jsx as jsx188 } from "react/jsx-runtime";
+var ExpandedTracksContext = createContext21({
+  expandedTracks: {},
+  toggleTrack: () => {
+    throw new Error("ExpandedTracksContext not initialized");
+  }
+});
+var ExpandedTracksProvider = ({ children }) => {
+  const [expandedTracks, setExpandedTracks] = useState67({});
+  const toggleTrack = useCallback96((id) => {
+    setExpandedTracks((prev) => ({
+      ...prev,
+      [id]: !prev[id]
+    }));
+  }, []);
+  const value = useMemo101(() => ({
+    expandedTracks,
+    toggleTrack
+  }), [expandedTracks, toggleTrack]);
+  return /* @__PURE__ */ jsx188(ExpandedTracksContext.Provider, {
+    value,
+    children
+  });
+};
+
 // src/components/Timeline/is-collapsed.ts
 var isTrackHidden = (track) => {
   if (!track.sequence.parent) {
@@ -20831,19 +20858,19 @@ var MaxTimelineTracksReached = () => {
 // src/components/Timeline/TimelineDragHandler.tsx
 import { PlayerInternals as PlayerInternals16 } from "@remotion/player";
 import {
-  useCallback as useCallback96,
+  useCallback as useCallback97,
   useContext as useContext65,
   useEffect as useEffect65,
-  useMemo as useMemo102,
+  useMemo as useMemo103,
   useRef as useRef36,
-  useState as useState67
+  useState as useState68
 } from "react";
 import { Internals as Internals47, useVideoConfig as useVideoConfig4 } from "remotion";
 
 // src/components/Timeline/TimelineInOutPointer.tsx
 import { createRef as createRef10, useContext as useContext63 } from "react";
 import { Internals as Internals46 } from "remotion";
-import { jsx as jsx188, jsxs as jsxs90, Fragment as Fragment27 } from "react/jsx-runtime";
+import { jsx as jsx189, jsxs as jsxs90, Fragment as Fragment27 } from "react/jsx-runtime";
 var areaHighlight = {
   position: "absolute",
   backgroundColor: "rgba(0, 0, 0, 0.5)",
@@ -20862,7 +20889,7 @@ var TimelineInOutPointer = () => {
   }
   return /* @__PURE__ */ jsxs90(Fragment27, {
     children: [
-      inFrame !== null && /* @__PURE__ */ jsx188("div", {
+      inFrame !== null && /* @__PURE__ */ jsx189("div", {
         ref: inMarkerAreaRef,
         style: {
           ...areaHighlight,
@@ -20870,7 +20897,7 @@ var TimelineInOutPointer = () => {
           width: getXPositionOfItemInTimelineImperatively(inFrame, videoConfig.durationInFrames, timelineWidth)
         }
       }),
-      outFrame !== null && /* @__PURE__ */ jsx188("div", {
+      outFrame !== null && /* @__PURE__ */ jsx189("div", {
         ref: outMarkerAreaRef,
         style: {
           ...areaHighlight,
@@ -20883,9 +20910,9 @@ var TimelineInOutPointer = () => {
 };
 
 // src/components/Timeline/TimelineInOutPointerHandle.tsx
-import { createRef as createRef11, useContext as useContext64, useMemo as useMemo101 } from "react";
+import { createRef as createRef11, useContext as useContext64, useMemo as useMemo102 } from "react";
 import { useVideoConfig as useVideoConfig3 } from "remotion";
-import { jsx as jsx189 } from "react/jsx-runtime";
+import { jsx as jsx190 } from "react/jsx-runtime";
 var line3 = {
   height: "100%",
   width: 1,
@@ -20899,14 +20926,14 @@ var inPointerHandle = createRef11();
 var outPointerHandle = createRef11();
 var InnerTimelineInOutPointerHandle = ({ atFrame, dragging, timelineWidth, type }) => {
   const videoConfig = useVideoConfig3();
-  const style10 = useMemo101(() => {
+  const style10 = useMemo102(() => {
     return {
       ...line3,
       backgroundColor: dragging ? LIGHT_TRANSPARENT : "rgba(255, 255, 255, 0.1)",
       transform: `translateX(${getXPositionOfItemInTimelineImperatively(atFrame, videoConfig.durationInFrames, timelineWidth)}px)`
     };
   }, [atFrame, dragging, timelineWidth, videoConfig.durationInFrames]);
-  return /* @__PURE__ */ jsx189("div", {
+  return /* @__PURE__ */ jsx190("div", {
     ref: type === "in" ? inPointerHandle : outPointerHandle,
     style: style10
   });
@@ -20920,7 +20947,7 @@ var TimelineInOutPointerHandle = ({
   if (timelineWidth === null) {
     return null;
   }
-  return /* @__PURE__ */ jsx189(InnerTimelineInOutPointerHandle, {
+  return /* @__PURE__ */ jsx190(InnerTimelineInOutPointerHandle, {
     atFrame,
     dragging,
     timelineWidth,
@@ -20929,7 +20956,7 @@ var TimelineInOutPointerHandle = ({
 };
 
 // src/components/Timeline/TimelineDragHandler.tsx
-import { jsx as jsx190, jsxs as jsxs91 } from "react/jsx-runtime";
+import { jsx as jsx191, jsxs as jsxs91 } from "react/jsx-runtime";
 var inner = {
   overflowY: "auto",
   overflowX: "hidden"
@@ -20954,7 +20981,7 @@ var TimelineDragHandler = () => {
   const video = Internals47.useUnsafeVideoConfig();
   const { zoom: zoomMap } = useContext65(TimelineZoomCtx);
   const { canvasContent } = useContext65(Internals47.CompositionManager);
-  const containerStyle3 = useMemo102(() => {
+  const containerStyle3 = useMemo103(() => {
     if (!canvasContent || canvasContent.type !== "composition") {
       return {};
     }
@@ -20967,10 +20994,10 @@ var TimelineDragHandler = () => {
   if (!canvasContent || canvasContent.type !== "composition") {
     return null;
   }
-  return /* @__PURE__ */ jsx190("div", {
+  return /* @__PURE__ */ jsx191("div", {
     ref: sliderAreaRef,
     style: containerStyle3,
-    children: video ? /* @__PURE__ */ jsx190(Inner2, {}) : null
+    children: video ? /* @__PURE__ */ jsx191(Inner2, {}) : null
   });
 };
 var Inner2 = () => {
@@ -20981,11 +21008,11 @@ var Inner2 = () => {
   });
   const { isHighestContext } = useZIndex();
   const setFrame = Internals47.useTimelineSetFrame();
-  const [inOutDragging, setInOutDragging] = useState67({
+  const [inOutDragging, setInOutDragging] = useState68({
     dragging: false
   });
   const timelineWidth = useContext65(TimelineWidthContext);
-  const get = useCallback96((frame2) => {
+  const get = useCallback97((frame2) => {
     if (timelineWidth === null) {
       throw new Error("timeline width is not yet determined");
     }
@@ -20995,7 +21022,7 @@ var Inner2 = () => {
   const left3 = size4?.left ?? 0;
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
   const { setInAndOutFrames } = useTimelineSetInOutFramePosition();
-  const [dragging, setDragging] = useState67({
+  const [dragging, setDragging] = useState68({
     dragging: false
   });
   const { playing, play, pause, seek } = PlayerInternals16.usePlayer();
@@ -21006,7 +21033,7 @@ var Inner2 = () => {
       scroller.current = null;
     }
   };
-  const onPointerDown = useCallback96((e) => {
+  const onPointerDown = useCallback97((e) => {
     if (e.button !== 0) {
       return;
     }
@@ -21072,7 +21099,7 @@ var Inner2 = () => {
     get,
     outFrame
   ]);
-  const onPointerMoveScrubbing = useCallback96((e) => {
+  const onPointerMoveScrubbing = useCallback97((e) => {
     if (!videoConfig) {
       return;
     }
@@ -21142,7 +21169,7 @@ var Inner2 = () => {
       seek(frame2);
     }
   }, [videoConfig, dragging.dragging, left3, width, seek]);
-  const onPointerMoveInOut = useCallback96((e) => {
+  const onPointerMoveInOut = useCallback97((e) => {
     if (!videoConfig) {
       return;
     }
@@ -21178,7 +21205,7 @@ var Inner2 = () => {
       outMarkerAreaRef.current.style.width = String(width - get(outFrame) - offset) + "px";
     }
   }, [get, inFrame, inOutDragging, outFrame, videoConfig, width]);
-  const onPointerUpScrubbing = useCallback96((e) => {
+  const onPointerUpScrubbing = useCallback97((e) => {
     stopInterval();
     document.body.style.userSelect = "";
     document.body.style.webkitUserSelect = "";
@@ -21206,7 +21233,7 @@ var Inner2 = () => {
       play();
     }
   }, [dragging, left3, play, videoConfig, setFrame, width]);
-  const onPointerUpInOut = useCallback96((e) => {
+  const onPointerUpInOut = useCallback97((e) => {
     document.body.style.userSelect = "";
     document.body.style.webkitUserSelect = "";
     if (!videoConfig) {
@@ -21292,7 +21319,7 @@ var Inner2 = () => {
       window.removeEventListener("pointerup", onPointerUpInOut);
     };
   }, [inOutDragging.dragging, onPointerMoveInOut, onPointerUpInOut]);
-  const inContextMenu = useMemo102(() => {
+  const inContextMenu = useMemo103(() => {
     return [
       {
         id: "hide-in",
@@ -21317,7 +21344,7 @@ var Inner2 = () => {
       }
     ];
   }, [setInAndOutFrames, videoConfig.id]);
-  const outContextMenu = useMemo102(() => {
+  const outContextMenu = useMemo103(() => {
     return [
       {
         id: "hide-out",
@@ -21346,21 +21373,21 @@ var Inner2 = () => {
     style: style10,
     onPointerDown,
     children: [
-      /* @__PURE__ */ jsx190("div", {
+      /* @__PURE__ */ jsx191("div", {
         style: inner,
         className: VERTICAL_SCROLLBAR_CLASSNAME
       }),
-      inFrame !== null && /* @__PURE__ */ jsx190(ContextMenu, {
+      inFrame !== null && /* @__PURE__ */ jsx191(ContextMenu, {
         values: inContextMenu,
-        children: /* @__PURE__ */ jsx190(TimelineInOutPointerHandle, {
+        children: /* @__PURE__ */ jsx191(TimelineInOutPointerHandle, {
           type: "in",
           atFrame: inFrame,
           dragging: inOutDragging.dragging === "in"
         })
       }),
-      outFrame !== null && /* @__PURE__ */ jsx190(ContextMenu, {
+      outFrame !== null && /* @__PURE__ */ jsx191(ContextMenu, {
         values: outContextMenu,
-        children: /* @__PURE__ */ jsx190(TimelineInOutPointerHandle, {
+        children: /* @__PURE__ */ jsx191(TimelineInOutPointerHandle, {
           type: "out",
           dragging: inOutDragging.dragging === "out",
           atFrame: outFrame
@@ -21378,33 +21405,6 @@ import { useRef as useRef40 } from "react";
 import { useCallback as useCallback106, useContext as useContext70, useMemo as useMemo111 } from "react";
 import { Internals as Internals51 } from "remotion";
 
-// src/components/ExpandedTracksProvider.tsx
-import { createContext as createContext21, useCallback as useCallback97, useMemo as useMemo103, useState as useState68 } from "react";
-import { jsx as jsx191 } from "react/jsx-runtime";
-var ExpandedTracksContext = createContext21({
-  expandedTracks: {},
-  toggleTrack: () => {
-    throw new Error("ExpandedTracksContext not initialized");
-  }
-});
-var ExpandedTracksProvider = ({ children }) => {
-  const [expandedTracks, setExpandedTracks] = useState68({});
-  const toggleTrack = useCallback97((id) => {
-    setExpandedTracks((prev) => ({
-      ...prev,
-      [id]: !prev[id]
-    }));
-  }, []);
-  const value = useMemo103(() => ({
-    expandedTracks,
-    toggleTrack
-  }), [expandedTracks, toggleTrack]);
-  return /* @__PURE__ */ jsx191(ExpandedTracksContext.Provider, {
-    value,
-    children
-  });
-};
-
 // src/components/Timeline/TimelineExpandedSection.tsx
 import React137, { useMemo as useMemo108 } from "react";
 
@@ -23995,6 +23995,9 @@ var noop3 = () => {
 };
 var TimelineInner = () => {
   const { sequences } = useContext75(Internals57.SequenceManager);
+  const { expandedTracks } = useContext75(ExpandedTracksContext);
+  const { previewServerState } = useContext75(StudioServerConnectionCtx);
+  const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) && previewServerState.type === "connected";
   const videoConfig = Internals57.useUnsafeVideoConfig();
   const timeline = useMemo118(() => {
     if (!videoConfig) {
@@ -24018,14 +24021,15 @@ var TimelineInner = () => {
   const inner2 = useMemo118(() => {
     return {
       height: shown.reduce((acc, track) => {
-        return acc + getTimelineLayerHeight(track.sequence.type === "video" ? "video" : "other") + Number(TIMELINE_ITEM_BORDER_BOTTOM);
+        const isExpanded = visualModeEnabled && (expandedTracks[track.sequence.id] ?? false);
+        return acc + getTimelineLayerHeight(track.sequence.type === "video" ? "video" : "other") + Number(TIMELINE_ITEM_BORDER_BOTTOM) + (isExpanded ? getExpandedTrackHeight(track.sequence.controls) + TIMELINE_ITEM_BORDER_BOTTOM : 0);
       }, 0) + TIMELINE_ITEM_BORDER_BOTTOM + (hasBeenCut ? MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) + TIMELINE_TIME_INDICATOR_HEIGHT,
       display: "flex",
       flex: 1,
       minHeight: "100%",
       overflowX: "hidden"
     };
-  }, [hasBeenCut, shown]);
+  }, [hasBeenCut, shown, expandedTracks, visualModeEnabled]);
   return /* @__PURE__ */ jsx214("div", {
     ref: timelineVerticalScroll,
     style: container45,

package/dist/esm/previewEntry.mjs

@@ -21449,6 +21449,33 @@ var calculateTimeline = ({
   });
 };
 
+// src/components/ExpandedTracksProvider.tsx
+import { createContext as createContext21, useCallback as useCallback97, useMemo as useMemo101, useState as useState69 } from "react";
+import { jsx as jsx191 } from "react/jsx-runtime";
+var ExpandedTracksContext = createContext21({
+  expandedTracks: {},
+  toggleTrack: () => {
+    throw new Error("ExpandedTracksContext not initialized");
+  }
+});
+var ExpandedTracksProvider = ({ children }) => {
+  const [expandedTracks, setExpandedTracks] = useState69({});
+  const toggleTrack = useCallback97((id) => {
+    setExpandedTracks((prev) => ({
+      ...prev,
+      [id]: !prev[id]
+    }));
+  }, []);
+  const value = useMemo101(() => ({
+    expandedTracks,
+    toggleTrack
+  }), [expandedTracks, toggleTrack]);
+  return /* @__PURE__ */ jsx191(ExpandedTracksContext.Provider, {
+    value,
+    children
+  });
+};
+
 // src/components/Timeline/is-collapsed.ts
 var isTrackHidden = (track) => {
   if (!track.sequence.parent) {
@@ -21488,19 +21515,19 @@ var MaxTimelineTracksReached = () => {
 // src/components/Timeline/TimelineDragHandler.tsx
 import { PlayerInternals as PlayerInternals16 } from "@remotion/player";
 import {
-  useCallback as useCallback97,
+  useCallback as useCallback98,
   useContext as useContext65,
   useEffect as useEffect66,
-  useMemo as useMemo102,
+  useMemo as useMemo103,
   useRef as useRef36,
-  useState as useState69
+  useState as useState70
 } from "react";
 import { Internals as Internals47, useVideoConfig as useVideoConfig4 } from "remotion";
 
 // src/components/Timeline/TimelineInOutPointer.tsx
 import { createRef as createRef11, useContext as useContext63 } from "react";
 import { Internals as Internals46 } from "remotion";
-import { jsx as jsx191, jsxs as jsxs91, Fragment as Fragment27 } from "react/jsx-runtime";
+import { jsx as jsx192, jsxs as jsxs91, Fragment as Fragment27 } from "react/jsx-runtime";
 var areaHighlight = {
   position: "absolute",
   backgroundColor: "rgba(0, 0, 0, 0.5)",
@@ -21519,7 +21546,7 @@ var TimelineInOutPointer = () => {
   }
   return /* @__PURE__ */ jsxs91(Fragment27, {
     children: [
-      inFrame !== null && /* @__PURE__ */ jsx191("div", {
+      inFrame !== null && /* @__PURE__ */ jsx192("div", {
         ref: inMarkerAreaRef,
         style: {
           ...areaHighlight,
@@ -21527,7 +21554,7 @@ var TimelineInOutPointer = () => {
           width: getXPositionOfItemInTimelineImperatively(inFrame, videoConfig.durationInFrames, timelineWidth)
         }
       }),
-      outFrame !== null && /* @__PURE__ */ jsx191("div", {
+      outFrame !== null && /* @__PURE__ */ jsx192("div", {
         ref: outMarkerAreaRef,
         style: {
           ...areaHighlight,
@@ -21540,9 +21567,9 @@ var TimelineInOutPointer = () => {
 };
 
 // src/components/Timeline/TimelineInOutPointerHandle.tsx
-import { createRef as createRef12, useContext as useContext64, useMemo as useMemo101 } from "react";
+import { createRef as createRef12, useContext as useContext64, useMemo as useMemo102 } from "react";
 import { useVideoConfig as useVideoConfig3 } from "remotion";
-import { jsx as jsx192 } from "react/jsx-runtime";
+import { jsx as jsx193 } from "react/jsx-runtime";
 var line3 = {
   height: "100%",
   width: 1,
@@ -21556,14 +21583,14 @@ var inPointerHandle = createRef12();
 var outPointerHandle = createRef12();
 var InnerTimelineInOutPointerHandle = ({ atFrame, dragging, timelineWidth, type }) => {
   const videoConfig = useVideoConfig3();
-  const style10 = useMemo101(() => {
+  const style10 = useMemo102(() => {
     return {
       ...line3,
       backgroundColor: dragging ? LIGHT_TRANSPARENT : "rgba(255, 255, 255, 0.1)",
       transform: `translateX(${getXPositionOfItemInTimelineImperatively(atFrame, videoConfig.durationInFrames, timelineWidth)}px)`
     };
   }, [atFrame, dragging, timelineWidth, videoConfig.durationInFrames]);
-  return /* @__PURE__ */ jsx192("div", {
+  return /* @__PURE__ */ jsx193("div", {
     ref: type === "in" ? inPointerHandle : outPointerHandle,
     style: style10
   });
@@ -21577,7 +21604,7 @@ var TimelineInOutPointerHandle = ({
   if (timelineWidth === null) {
     return null;
   }
-  return /* @__PURE__ */ jsx192(InnerTimelineInOutPointerHandle, {
+  return /* @__PURE__ */ jsx193(InnerTimelineInOutPointerHandle, {
     atFrame,
     dragging,
     timelineWidth,
@@ -21586,7 +21613,7 @@ var TimelineInOutPointerHandle = ({
 };
 
 // src/components/Timeline/TimelineDragHandler.tsx
-import { jsx as jsx193, jsxs as jsxs92 } from "react/jsx-runtime";
+import { jsx as jsx194, jsxs as jsxs92 } from "react/jsx-runtime";
 var inner = {
   overflowY: "auto",
   overflowX: "hidden"
@@ -21611,7 +21638,7 @@ var TimelineDragHandler = () => {
   const video = Internals47.useUnsafeVideoConfig();
   const { zoom: zoomMap } = useContext65(TimelineZoomCtx);
   const { canvasContent } = useContext65(Internals47.CompositionManager);
-  const containerStyle3 = useMemo102(() => {
+  const containerStyle3 = useMemo103(() => {
     if (!canvasContent || canvasContent.type !== "composition") {
       return {};
     }
@@ -21624,10 +21651,10 @@ var TimelineDragHandler = () => {
   if (!canvasContent || canvasContent.type !== "composition") {
     return null;
   }
-  return /* @__PURE__ */ jsx193("div", {
+  return /* @__PURE__ */ jsx194("div", {
     ref: sliderAreaRef,
     style: containerStyle3,
-    children: video ? /* @__PURE__ */ jsx193(Inner2, {}) : null
+    children: video ? /* @__PURE__ */ jsx194(Inner2, {}) : null
   });
 };
 var Inner2 = () => {
@@ -21638,11 +21665,11 @@ var Inner2 = () => {
   });
   const { isHighestContext } = useZIndex();
   const setFrame = Internals47.useTimelineSetFrame();
-  const [inOutDragging, setInOutDragging] = useState69({
+  const [inOutDragging, setInOutDragging] = useState70({
     dragging: false
   });
   const timelineWidth = useContext65(TimelineWidthContext);
-  const get = useCallback97((frame2) => {
+  const get = useCallback98((frame2) => {
     if (timelineWidth === null) {
       throw new Error("timeline width is not yet determined");
     }
@@ -21652,7 +21679,7 @@ var Inner2 = () => {
   const left3 = size4?.left ?? 0;
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
   const { setInAndOutFrames } = useTimelineSetInOutFramePosition();
-  const [dragging, setDragging] = useState69({
+  const [dragging, setDragging] = useState70({
     dragging: false
   });
   const { playing, play, pause, seek } = PlayerInternals16.usePlayer();
@@ -21663,7 +21690,7 @@ var Inner2 = () => {
       scroller.current = null;
     }
   };
-  const onPointerDown = useCallback97((e) => {
+  const onPointerDown = useCallback98((e) => {
     if (e.button !== 0) {
       return;
     }
@@ -21729,7 +21756,7 @@ var Inner2 = () => {
     get,
     outFrame
   ]);
-  const onPointerMoveScrubbing = useCallback97((e) => {
+  const onPointerMoveScrubbing = useCallback98((e) => {
     if (!videoConfig) {
       return;
     }
@@ -21799,7 +21826,7 @@ var Inner2 = () => {
       seek(frame2);
     }
   }, [videoConfig, dragging.dragging, left3, width, seek]);
-  const onPointerMoveInOut = useCallback97((e) => {
+  const onPointerMoveInOut = useCallback98((e) => {
     if (!videoConfig) {
       return;
     }
@@ -21835,7 +21862,7 @@ var Inner2 = () => {
       outMarkerAreaRef.current.style.width = String(width - get(outFrame) - offset) + "px";
     }
   }, [get, inFrame, inOutDragging, outFrame, videoConfig, width]);
-  const onPointerUpScrubbing = useCallback97((e) => {
+  const onPointerUpScrubbing = useCallback98((e) => {
     stopInterval();
     document.body.style.userSelect = "";
     document.body.style.webkitUserSelect = "";
@@ -21863,7 +21890,7 @@ var Inner2 = () => {
       play();
     }
   }, [dragging, left3, play, videoConfig, setFrame, width]);
-  const onPointerUpInOut = useCallback97((e) => {
+  const onPointerUpInOut = useCallback98((e) => {
     document.body.style.userSelect = "";
     document.body.style.webkitUserSelect = "";
     if (!videoConfig) {
@@ -21949,7 +21976,7 @@ var Inner2 = () => {
       window.removeEventListener("pointerup", onPointerUpInOut);
     };
   }, [inOutDragging.dragging, onPointerMoveInOut, onPointerUpInOut]);
-  const inContextMenu = useMemo102(() => {
+  const inContextMenu = useMemo103(() => {
     return [
       {
         id: "hide-in",
@@ -21974,7 +22001,7 @@ var Inner2 = () => {
       }
     ];
   }, [setInAndOutFrames, videoConfig.id]);
-  const outContextMenu = useMemo102(() => {
+  const outContextMenu = useMemo103(() => {
     return [
       {
         id: "hide-out",
@@ -22003,21 +22030,21 @@ var Inner2 = () => {
     style: style10,
     onPointerDown,
     children: [
-      /* @__PURE__ */ jsx193("div", {
+      /* @__PURE__ */ jsx194("div", {
         style: inner,
         className: VERTICAL_SCROLLBAR_CLASSNAME
       }),
-      inFrame !== null && /* @__PURE__ */ jsx193(ContextMenu, {
+      inFrame !== null && /* @__PURE__ */ jsx194(ContextMenu, {
         values: inContextMenu,
-        children: /* @__PURE__ */ jsx193(TimelineInOutPointerHandle, {
+        children: /* @__PURE__ */ jsx194(TimelineInOutPointerHandle, {
           type: "in",
           atFrame: inFrame,
           dragging: inOutDragging.dragging === "in"
         })
       }),
-      outFrame !== null && /* @__PURE__ */ jsx193(ContextMenu, {
+      outFrame !== null && /* @__PURE__ */ jsx194(ContextMenu, {
         values: outContextMenu,
-        children: /* @__PURE__ */ jsx193(TimelineInOutPointerHandle, {
+        children: /* @__PURE__ */ jsx194(TimelineInOutPointerHandle, {
           type: "out",
           dragging: inOutDragging.dragging === "out",
           atFrame: outFrame
@@ -22035,33 +22062,6 @@ import { useRef as useRef40 } from "react";
 import { useCallback as useCallback107, useContext as useContext70, useMemo as useMemo111 } from "react";
 import { Internals as Internals51 } from "remotion";
 
-// src/components/ExpandedTracksProvider.tsx
-import { createContext as createContext21, useCallback as useCallback98, useMemo as useMemo103, useState as useState70 } from "react";
-import { jsx as jsx194 } from "react/jsx-runtime";
-var ExpandedTracksContext = createContext21({
-  expandedTracks: {},
-  toggleTrack: () => {
-    throw new Error("ExpandedTracksContext not initialized");
-  }
-});
-var ExpandedTracksProvider = ({ children }) => {
-  const [expandedTracks, setExpandedTracks] = useState70({});
-  const toggleTrack = useCallback98((id) => {
-    setExpandedTracks((prev) => ({
-      ...prev,
-      [id]: !prev[id]
-    }));
-  }, []);
-  const value = useMemo103(() => ({
-    expandedTracks,
-    toggleTrack
-  }), [expandedTracks, toggleTrack]);
-  return /* @__PURE__ */ jsx194(ExpandedTracksContext.Provider, {
-    value,
-    children
-  });
-};
-
 // src/components/Timeline/TimelineExpandedSection.tsx
 import React139, { useMemo as useMemo108 } from "react";
 
@@ -24652,6 +24652,9 @@ var noop3 = () => {
 };
 var TimelineInner = () => {
   const { sequences } = useContext75(Internals57.SequenceManager);
+  const { expandedTracks } = useContext75(ExpandedTracksContext);
+  const { previewServerState } = useContext75(StudioServerConnectionCtx);
+  const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) && previewServerState.type === "connected";
   const videoConfig = Internals57.useUnsafeVideoConfig();
   const timeline = useMemo118(() => {
     if (!videoConfig) {
@@ -24675,14 +24678,15 @@ var TimelineInner = () => {
   const inner2 = useMemo118(() => {
     return {
       height: shown.reduce((acc, track) => {
-        return acc + getTimelineLayerHeight(track.sequence.type === "video" ? "video" : "other") + Number(TIMELINE_ITEM_BORDER_BOTTOM);
+        const isExpanded = visualModeEnabled && (expandedTracks[track.sequence.id] ?? false);
+        return acc + getTimelineLayerHeight(track.sequence.type === "video" ? "video" : "other") + Number(TIMELINE_ITEM_BORDER_BOTTOM) + (isExpanded ? getExpandedTrackHeight(track.sequence.controls) + TIMELINE_ITEM_BORDER_BOTTOM : 0);
       }, 0) + TIMELINE_ITEM_BORDER_BOTTOM + (hasBeenCut ? MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) + TIMELINE_TIME_INDICATOR_HEIGHT,
       display: "flex",
       flex: 1,
       minHeight: "100%",
       overflowX: "hidden"
     };
-  }, [hasBeenCut, shown]);
+  }, [hasBeenCut, shown, expandedTracks, visualModeEnabled]);
   return /* @__PURE__ */ jsx217("div", {
     ref: timelineVerticalScroll,
     style: container46,

package/dist/esm/renderEntry.mjs

@@ -208,7 +208,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-5dvr7831.js").then(({ StudioInternals }) => {
+    import("./chunk-ba0scebn.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.437",
+	"version": "4.0.438",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -26,13 +26,13 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.437",
-		"@remotion/player": "4.0.437",
-		"@remotion/media-utils": "4.0.437",
-		"@remotion/renderer": "4.0.437",
-		"@remotion/web-renderer": "4.0.437",
-		"@remotion/studio-shared": "4.0.437",
-		"@remotion/zod-types": "4.0.437",
+		"remotion": "4.0.438",
+		"@remotion/player": "4.0.438",
+		"@remotion/media-utils": "4.0.438",
+		"@remotion/renderer": "4.0.438",
+		"@remotion/web-renderer": "4.0.438",
+		"@remotion/studio-shared": "4.0.438",
+		"@remotion/zod-types": "4.0.438",
 		"mediabunny": "1.39.2",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
@@ -43,7 +43,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.437",
+		"@remotion/eslint-config-internal": "4.0.438",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},