@remotion/studio 4.0.296 → 4.0.297

package/.turbo/turbo-make.log

@@ -1,6 +1,6 @@
 
 
-> @remotion/studio@4.0.296 make /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.297 make /Users/jonathanburger/remotion/packages/studio
 > tsc -d && bun --env-file=../.env.bundle bundle.ts
 
-[64.51ms] Generated.
+[97.70ms] Generated.

package/dist/components/AskAiModal.js

@@ -32,10 +32,13 @@ const AskAiModal = () => {
     (0, react_1.useEffect)(() => {
         const onMessage = (event) => {
             var _a;
-            const json = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
-            if (json.type === 'cmd-i') {
-                (_a = exports.askAiModalRef.current) === null || _a === void 0 ? void 0 : _a.toggle();
+            try {
+                const json = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
+                if (json.type === 'cmd-i') {
+                    (_a = exports.askAiModalRef.current) === null || _a === void 0 ? void 0 : _a.toggle();
+                }
             }
+            catch (_b) { }
         };
         window.addEventListener('message', onMessage);
         return () => {

package/dist/components/Splitter/SplitterHandle.js

@@ -8,11 +8,9 @@ const SplitterContext_1 = require("./SplitterContext");
 exports.SPLITTER_HANDLE_SIZE = 3;
 const containerRow = {
     height: exports.SPLITTER_HANDLE_SIZE,
-    cursor: 'row-resize',
 };
 const containerColumn = {
     width: exports.SPLITTER_HANDLE_SIZE,
-    cursor: 'col-resize',
 };
 const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
     const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
@@ -108,6 +106,44 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             }
         };
     }, [allowToCollapse, context, context.flexValue, lastPointerUp, onCollapse]);
+    (0, react_1.useEffect)(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        let isMouseDown = false;
+        const onMouseDown = () => {
+            isMouseDown = true;
+        };
+        const onMouseUp = () => {
+            isMouseDown = false;
+        };
+        const onMouseEnter = (e) => {
+            if (e.button !== 0) {
+                return;
+            }
+            if (isMouseDown) {
+                return;
+            }
+            current.classList.add('remotion-splitter-hover');
+        };
+        const onMouseLeave = (e) => {
+            if (e.button !== 0) {
+                return;
+            }
+            current.classList.remove('remotion-splitter-hover');
+        };
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        window.addEventListener('mousedown', onMouseDown);
+        window.addEventListener('mouseup', onMouseUp);
+        return () => {
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+            window.removeEventListener('mousedown', onMouseDown);
+            window.removeEventListener('mouseup', onMouseUp);
+        };
+    }, []);
     return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: [
             'remotion-splitter',
             context.orientation === 'horizontal'

package/dist/esm/internals.mjs

@@ -4400,10 +4400,12 @@ var AskAiModal = () => {
   }), []);
   useEffect14(() => {
     const onMessage = (event) => {
-      const json = typeof event.data === "string" ? JSON.parse(event.data) : event.data;
-      if (json.type === "cmd-i") {
-        askAiModalRef.current?.toggle();
-      }
+      try {
+        const json = typeof event.data === "string" ? JSON.parse(event.data) : event.data;
+        if (json.type === "cmd-i") {
+          askAiModalRef.current?.toggle();
+        }
+      } catch {}
     };
     window.addEventListener("message", onMessage);
     return () => {
@@ -18012,12 +18014,10 @@ import { useContext as useContext55, useEffect as useEffect55, useRef as useRef3
 import { jsx as jsx177 } from "react/jsx-runtime";
 var SPLITTER_HANDLE_SIZE = 3;
 var containerRow2 = {
-  height: SPLITTER_HANDLE_SIZE,
-  cursor: "row-resize"
+  height: SPLITTER_HANDLE_SIZE
 };
 var containerColumn2 = {
-  width: SPLITTER_HANDLE_SIZE,
-  cursor: "col-resize"
+  width: SPLITTER_HANDLE_SIZE
 };
 var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
   const context = useContext55(SplitterContext);
@@ -18109,6 +18109,44 @@ var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
       }
     };
   }, [allowToCollapse, context, context.flexValue, lastPointerUp, onCollapse]);
+  useEffect55(() => {
+    const { current } = ref;
+    if (!current) {
+      return;
+    }
+    let isMouseDown = false;
+    const onMouseDown = () => {
+      isMouseDown = true;
+    };
+    const onMouseUp = () => {
+      isMouseDown = false;
+    };
+    const onMouseEnter = (e) => {
+      if (e.button !== 0) {
+        return;
+      }
+      if (isMouseDown) {
+        return;
+      }
+      current.classList.add("remotion-splitter-hover");
+    };
+    const onMouseLeave = (e) => {
+      if (e.button !== 0) {
+        return;
+      }
+      current.classList.remove("remotion-splitter-hover");
+    };
+    current.addEventListener("mouseenter", onMouseEnter);
+    current.addEventListener("mouseleave", onMouseLeave);
+    window.addEventListener("mousedown", onMouseDown);
+    window.addEventListener("mouseup", onMouseUp);
+    return () => {
+      current.removeEventListener("mouseenter", onMouseEnter);
+      current.removeEventListener("mouseleave", onMouseLeave);
+      window.removeEventListener("mousedown", onMouseDown);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  }, []);
   return /* @__PURE__ */ jsx177("div", {
     ref,
     className: [
@@ -28388,6 +28426,10 @@ var ServerDisconnected = () => {
 // src/helpers/inject-css.ts
 import { Internals as Internals63 } from "remotion";
 var makeDefaultGlobalCSS = () => {
+  const unhoveredDragAreaFactor = 2;
+  const fromMiddle = 50 / unhoveredDragAreaFactor;
+  const hoveredDragAreaFactor = 6;
+  const fromMiddleHovered = 50 / hoveredDragAreaFactor;
   return `
   html {
     --remotion-cli-internals-blue: #0b84f3;
@@ -28405,43 +28447,51 @@ var makeDefaultGlobalCSS = () => {
   }
   
   .remotion-splitter-horizontal {
-    transform: scaleY(2);
+    transform: scaleY(${unhoveredDragAreaFactor});
     background: linear-gradient(
       to bottom,
-      transparent 25%,
-      black 25%,
-      black 75%,
-      transparent
+      transparent ${50 - fromMiddle}%,
+      black ${50 - fromMiddle}%,
+      black ${50 + fromMiddle}%,
+      transparent ${50 + fromMiddle}%
     );
   }
   
-  .remotion-splitter-horizontal:hover,
-  .remotion-splitter-horizontal.remotion-splitter-active {
+  .remotion-splitter-horizontal.remotion-splitter-active, .remotion-splitter-horizontal.remotion-splitter-hover {
     background: linear-gradient(
       to bottom,
-      var(--remotion-cli-internals-blue),
-      var(--remotion-cli-internals-blue)
+      transparent ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
+      transparent ${50 + fromMiddleHovered}%
     );
+    cursor: row-resize;
+    transform: scaleY(${hoveredDragAreaFactor});
+    z-index: 1000;
   }
   
   .remotion-splitter-vertical {
-    transform: scaleX(2);
+    transform: scaleX(${unhoveredDragAreaFactor});
     background: linear-gradient(
       to right,
-      transparent 25%,
-      black 25%,
-      black 75%,
-      transparent
+      transparent ${50 - fromMiddle}%,
+      black ${50 - fromMiddle}%,
+      black ${50 + fromMiddle}%,
+      transparent ${50 + fromMiddle}%
     );
   }
   
-  .remotion-splitter-vertical:hover,
-  .remotion-splitter-vertical.remotion-splitter-active {
+  .remotion-splitter-vertical.remotion-splitter-active, .remotion-splitter-vertical.remotion-splitter-hover {
     background: linear-gradient(
       to right,
-      var(--remotion-cli-internals-blue),
-      var(--remotion-cli-internals-blue)
+      transparent ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
+      transparent ${50 + fromMiddleHovered}%
     );
+    transform: scaleX(${hoveredDragAreaFactor});
+    cursor: col-resize;
+    z-index: 1000;
   }
   
   input::-webkit-outer-spin-button,

package/dist/esm/previewEntry.mjs

@@ -4405,10 +4405,12 @@ var AskAiModal = () => {
   }), []);
   useEffect14(() => {
     const onMessage = (event) => {
-      const json = typeof event.data === "string" ? JSON.parse(event.data) : event.data;
-      if (json.type === "cmd-i") {
-        askAiModalRef.current?.toggle();
-      }
+      try {
+        const json = typeof event.data === "string" ? JSON.parse(event.data) : event.data;
+        if (json.type === "cmd-i") {
+          askAiModalRef.current?.toggle();
+        }
+      } catch {}
     };
     window.addEventListener("message", onMessage);
     return () => {
@@ -18292,12 +18294,10 @@ import { useContext as useContext55, useEffect as useEffect55, useRef as useRef3
 import { jsx as jsx178 } from "react/jsx-runtime";
 var SPLITTER_HANDLE_SIZE = 3;
 var containerRow2 = {
-  height: SPLITTER_HANDLE_SIZE,
-  cursor: "row-resize"
+  height: SPLITTER_HANDLE_SIZE
 };
 var containerColumn2 = {
-  width: SPLITTER_HANDLE_SIZE,
-  cursor: "col-resize"
+  width: SPLITTER_HANDLE_SIZE
 };
 var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
   const context = useContext55(SplitterContext);
@@ -18389,6 +18389,44 @@ var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
       }
     };
   }, [allowToCollapse, context, context.flexValue, lastPointerUp, onCollapse]);
+  useEffect55(() => {
+    const { current } = ref;
+    if (!current) {
+      return;
+    }
+    let isMouseDown = false;
+    const onMouseDown = () => {
+      isMouseDown = true;
+    };
+    const onMouseUp = () => {
+      isMouseDown = false;
+    };
+    const onMouseEnter = (e) => {
+      if (e.button !== 0) {
+        return;
+      }
+      if (isMouseDown) {
+        return;
+      }
+      current.classList.add("remotion-splitter-hover");
+    };
+    const onMouseLeave = (e) => {
+      if (e.button !== 0) {
+        return;
+      }
+      current.classList.remove("remotion-splitter-hover");
+    };
+    current.addEventListener("mouseenter", onMouseEnter);
+    current.addEventListener("mouseleave", onMouseLeave);
+    window.addEventListener("mousedown", onMouseDown);
+    window.addEventListener("mouseup", onMouseUp);
+    return () => {
+      current.removeEventListener("mouseenter", onMouseEnter);
+      current.removeEventListener("mouseleave", onMouseLeave);
+      window.removeEventListener("mousedown", onMouseDown);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  }, []);
   return /* @__PURE__ */ jsx178("div", {
     ref,
     className: [
@@ -28668,6 +28706,10 @@ var ServerDisconnected = () => {
 // src/helpers/inject-css.ts
 import { Internals as Internals63 } from "remotion";
 var makeDefaultGlobalCSS = () => {
+  const unhoveredDragAreaFactor = 2;
+  const fromMiddle = 50 / unhoveredDragAreaFactor;
+  const hoveredDragAreaFactor = 6;
+  const fromMiddleHovered = 50 / hoveredDragAreaFactor;
   return `
   html {
     --remotion-cli-internals-blue: #0b84f3;
@@ -28685,43 +28727,51 @@ var makeDefaultGlobalCSS = () => {
   }
   
   .remotion-splitter-horizontal {
-    transform: scaleY(2);
+    transform: scaleY(${unhoveredDragAreaFactor});
     background: linear-gradient(
       to bottom,
-      transparent 25%,
-      black 25%,
-      black 75%,
-      transparent
+      transparent ${50 - fromMiddle}%,
+      black ${50 - fromMiddle}%,
+      black ${50 + fromMiddle}%,
+      transparent ${50 + fromMiddle}%
     );
   }
   
-  .remotion-splitter-horizontal:hover,
-  .remotion-splitter-horizontal.remotion-splitter-active {
+  .remotion-splitter-horizontal.remotion-splitter-active, .remotion-splitter-horizontal.remotion-splitter-hover {
     background: linear-gradient(
       to bottom,
-      var(--remotion-cli-internals-blue),
-      var(--remotion-cli-internals-blue)
+      transparent ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
+      transparent ${50 + fromMiddleHovered}%
     );
+    cursor: row-resize;
+    transform: scaleY(${hoveredDragAreaFactor});
+    z-index: 1000;
   }
   
   .remotion-splitter-vertical {
-    transform: scaleX(2);
+    transform: scaleX(${unhoveredDragAreaFactor});
     background: linear-gradient(
       to right,
-      transparent 25%,
-      black 25%,
-      black 75%,
-      transparent
+      transparent ${50 - fromMiddle}%,
+      black ${50 - fromMiddle}%,
+      black ${50 + fromMiddle}%,
+      transparent ${50 + fromMiddle}%
     );
   }
   
-  .remotion-splitter-vertical:hover,
-  .remotion-splitter-vertical.remotion-splitter-active {
+  .remotion-splitter-vertical.remotion-splitter-active, .remotion-splitter-vertical.remotion-splitter-hover {
     background: linear-gradient(
       to right,
-      var(--remotion-cli-internals-blue),
-      var(--remotion-cli-internals-blue)
+      transparent ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
+      transparent ${50 + fromMiddleHovered}%
     );
+    transform: scaleX(${hoveredDragAreaFactor});
+    cursor: col-resize;
+    z-index: 1000;
   }
   
   input::-webkit-outer-spin-button,

package/dist/esm/renderEntry.mjs

@@ -4421,10 +4421,12 @@ var container11, askAiModalRef, AskAiModal = () => {
   }), []);
   useEffect14(() => {
     const onMessage = (event) => {
-      const json = typeof event.data === "string" ? JSON.parse(event.data) : event.data;
-      if (json.type === "cmd-i") {
-        askAiModalRef.current?.toggle();
-      }
+      try {
+        const json = typeof event.data === "string" ? JSON.parse(event.data) : event.data;
+        if (json.type === "cmd-i") {
+          askAiModalRef.current?.toggle();
+        }
+      } catch {}
     };
     window.addEventListener("message", onMessage);
     return () => {
@@ -18692,6 +18694,44 @@ var SPLITTER_HANDLE_SIZE = 3, containerRow2, containerColumn2, SplitterHandle =
       }
     };
   }, [allowToCollapse, context, context.flexValue, lastPointerUp, onCollapse]);
+  useEffect55(() => {
+    const { current } = ref;
+    if (!current) {
+      return;
+    }
+    let isMouseDown = false;
+    const onMouseDown = () => {
+      isMouseDown = true;
+    };
+    const onMouseUp = () => {
+      isMouseDown = false;
+    };
+    const onMouseEnter = (e) => {
+      if (e.button !== 0) {
+        return;
+      }
+      if (isMouseDown) {
+        return;
+      }
+      current.classList.add("remotion-splitter-hover");
+    };
+    const onMouseLeave = (e) => {
+      if (e.button !== 0) {
+        return;
+      }
+      current.classList.remove("remotion-splitter-hover");
+    };
+    current.addEventListener("mouseenter", onMouseEnter);
+    current.addEventListener("mouseleave", onMouseLeave);
+    window.addEventListener("mousedown", onMouseDown);
+    window.addEventListener("mouseup", onMouseUp);
+    return () => {
+      current.removeEventListener("mouseenter", onMouseEnter);
+      current.removeEventListener("mouseleave", onMouseLeave);
+      window.removeEventListener("mousedown", onMouseDown);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  }, []);
   return /* @__PURE__ */ jsx177("div", {
     ref,
     className: [
@@ -18704,12 +18744,10 @@ var SPLITTER_HANDLE_SIZE = 3, containerRow2, containerColumn2, SplitterHandle =
 var init_SplitterHandle = __esm(() => {
   init_SplitterContext();
   containerRow2 = {
-    height: SPLITTER_HANDLE_SIZE,
-    cursor: "row-resize"
+    height: SPLITTER_HANDLE_SIZE
   };
   containerColumn2 = {
-    width: SPLITTER_HANDLE_SIZE,
-    cursor: "col-resize"
+    width: SPLITTER_HANDLE_SIZE
   };
 });
 
@@ -29441,6 +29479,10 @@ var init_ServerDisconnected = __esm(() => {
 // src/helpers/inject-css.ts
 import { Internals as Internals63 } from "remotion";
 var makeDefaultGlobalCSS = () => {
+  const unhoveredDragAreaFactor = 2;
+  const fromMiddle = 50 / unhoveredDragAreaFactor;
+  const hoveredDragAreaFactor = 6;
+  const fromMiddleHovered = 50 / hoveredDragAreaFactor;
   return `
   html {
     --remotion-cli-internals-blue: #0b84f3;
@@ -29458,43 +29500,51 @@ var makeDefaultGlobalCSS = () => {
   }
   
   .remotion-splitter-horizontal {
-    transform: scaleY(2);
+    transform: scaleY(${unhoveredDragAreaFactor});
     background: linear-gradient(
       to bottom,
-      transparent 25%,
-      black 25%,
-      black 75%,
-      transparent
+      transparent ${50 - fromMiddle}%,
+      black ${50 - fromMiddle}%,
+      black ${50 + fromMiddle}%,
+      transparent ${50 + fromMiddle}%
     );
   }
   
-  .remotion-splitter-horizontal:hover,
-  .remotion-splitter-horizontal.remotion-splitter-active {
+  .remotion-splitter-horizontal.remotion-splitter-active, .remotion-splitter-horizontal.remotion-splitter-hover {
     background: linear-gradient(
       to bottom,
-      var(--remotion-cli-internals-blue),
-      var(--remotion-cli-internals-blue)
+      transparent ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
+      transparent ${50 + fromMiddleHovered}%
     );
+    cursor: row-resize;
+    transform: scaleY(${hoveredDragAreaFactor});
+    z-index: 1000;
   }
   
   .remotion-splitter-vertical {
-    transform: scaleX(2);
+    transform: scaleX(${unhoveredDragAreaFactor});
     background: linear-gradient(
       to right,
-      transparent 25%,
-      black 25%,
-      black 75%,
-      transparent
+      transparent ${50 - fromMiddle}%,
+      black ${50 - fromMiddle}%,
+      black ${50 + fromMiddle}%,
+      transparent ${50 + fromMiddle}%
     );
   }
   
-  .remotion-splitter-vertical:hover,
-  .remotion-splitter-vertical.remotion-splitter-active {
+  .remotion-splitter-vertical.remotion-splitter-active, .remotion-splitter-vertical.remotion-splitter-hover {
     background: linear-gradient(
       to right,
-      var(--remotion-cli-internals-blue),
-      var(--remotion-cli-internals-blue)
+      transparent ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
+      transparent ${50 + fromMiddleHovered}%
     );
+    transform: scaleX(${hoveredDragAreaFactor});
+    cursor: col-resize;
+    z-index: 1000;
   }
   
   input::-webkit-outer-spin-button,

package/dist/helpers/inject-css.js

@@ -4,6 +4,10 @@ exports.injectCSS = void 0;
 const remotion_1 = require("remotion");
 const scroll_to_default_props_path_1 = require("../components/RenderModal/SchemaEditor/scroll-to-default-props-path");
 const makeDefaultGlobalCSS = () => {
+    const unhoveredDragAreaFactor = 2;
+    const fromMiddle = 50 / unhoveredDragAreaFactor;
+    const hoveredDragAreaFactor = 6;
+    const fromMiddleHovered = 50 / hoveredDragAreaFactor;
     return `
   html {
     --remotion-cli-internals-blue: #0b84f3;
@@ -21,43 +25,51 @@ const makeDefaultGlobalCSS = () => {
   }
   
   .remotion-splitter-horizontal {
-    transform: scaleY(2);
+    transform: scaleY(${unhoveredDragAreaFactor});
     background: linear-gradient(
       to bottom,
-      transparent 25%,
-      black 25%,
-      black 75%,
-      transparent
+      transparent ${50 - fromMiddle}%,
+      black ${50 - fromMiddle}%,
+      black ${50 + fromMiddle}%,
+      transparent ${50 + fromMiddle}%
     );
   }
   
-  .remotion-splitter-horizontal:hover,
-  .remotion-splitter-horizontal.remotion-splitter-active {
+  .remotion-splitter-horizontal.remotion-splitter-active, .remotion-splitter-horizontal.remotion-splitter-hover {
     background: linear-gradient(
       to bottom,
-      var(--remotion-cli-internals-blue),
-      var(--remotion-cli-internals-blue)
+      transparent ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
+      transparent ${50 + fromMiddleHovered}%
     );
+    cursor: row-resize;
+    transform: scaleY(${hoveredDragAreaFactor});
+    z-index: 1000;
   }
   
   .remotion-splitter-vertical {
-    transform: scaleX(2);
+    transform: scaleX(${unhoveredDragAreaFactor});
     background: linear-gradient(
       to right,
-      transparent 25%,
-      black 25%,
-      black 75%,
-      transparent
+      transparent ${50 - fromMiddle}%,
+      black ${50 - fromMiddle}%,
+      black ${50 + fromMiddle}%,
+      transparent ${50 + fromMiddle}%
     );
   }
   
-  .remotion-splitter-vertical:hover,
-  .remotion-splitter-vertical.remotion-splitter-active {
+  .remotion-splitter-vertical.remotion-splitter-active, .remotion-splitter-vertical.remotion-splitter-hover {
     background: linear-gradient(
       to right,
-      var(--remotion-cli-internals-blue),
-      var(--remotion-cli-internals-blue)
+      transparent ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
+      transparent ${50 + fromMiddleHovered}%
     );
+    transform: scaleX(${hoveredDragAreaFactor});
+    cursor: col-resize;
+    z-index: 1000;
   }
   
   input::-webkit-outer-spin-button,

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
   },
   "name": "@remotion/studio",
-  "version": "4.0.296",
+  "version": "4.0.297",
   "description": "APIs for interacting with the Remotion Studio",
   "main": "dist",
   "sideEffects": false,
@@ -23,20 +23,20 @@
     "source-map": "0.7.3",
     "open": "^8.4.2",
     "zod": "3.22.3",
-    "remotion": "4.0.296",
-    "@remotion/player": "4.0.296",
-    "@remotion/media-parser": "4.0.296",
-    "@remotion/renderer": "4.0.296",
-    "@remotion/media-utils": "4.0.296",
-    "@remotion/zod-types": "4.0.296",
-    "@remotion/studio-shared": "4.0.296"
+    "remotion": "4.0.297",
+    "@remotion/player": "4.0.297",
+    "@remotion/media-utils": "4.0.297",
+    "@remotion/renderer": "4.0.297",
+    "@remotion/studio-shared": "4.0.297",
+    "@remotion/media-parser": "4.0.297",
+    "@remotion/zod-types": "4.0.297"
   },
   "devDependencies": {
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "@types/semver": "^7.3.4",
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.296"
+    "@remotion/eslint-config-internal": "4.0.297"
   },
   "publishConfig": {
     "access": "public"