@remotion/studio 4.0.295 → 4.0.297

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-j") {
-        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 () => {
@@ -6688,7 +6690,7 @@ var openExternal = (link) => {
               askAiModalRef.current?.toggle();
             },
             leftItem: null,
-            keyHint: `${cmdOrCtrlCharacter}+J`,
+            keyHint: `${cmdOrCtrlCharacter}+I`,
             subMenu: null,
             type: "item",
             quickSwitcherLabel: "Ask AI"
@@ -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
   };
 });
 
@@ -21487,9 +21525,9 @@ var GlobalKeybindings = () => {
       commandCtrlKey: true,
       preventDefault: true
     });
-    const cmdJKey = keybindings.registerKeybinding({
+    const cmdIKey = keybindings.registerKeybinding({
       event: "keydown",
-      key: "j",
+      key: "i",
       callback: () => {
         askAiModalRef.current?.toggle();
       },
@@ -21529,7 +21567,7 @@ var GlobalKeybindings = () => {
       cKey.unregister();
       questionMark.unregister();
       cmdKKey.unregister();
-      cmdJKey.unregister();
+      cmdIKey.unregister();
     };
   }, [keybindings, setCheckerboard, setSelectedModal]);
   return null;
@@ -23421,7 +23459,7 @@ var left3, key4, right2, container47, title4, keyboardShortcutsDisabled, ul, li,
                       }),
                       /* @__PURE__ */ jsx215("kbd", {
                         style: key4,
-                        children: "J"
+                        children: "I"
                       })
                     ]
                   }),
@@ -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/dist/helpers/use-menu-structure.js

@@ -552,7 +552,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             (_a = AskAiModal_1.askAiModalRef.current) === null || _a === void 0 ? void 0 : _a.toggle();
                         },
                         leftItem: null,
-                        keyHint: `${ShortcutHint_1.cmdOrCtrlCharacter}+J`,
+                        keyHint: `${ShortcutHint_1.cmdOrCtrlCharacter}+I`,
                         subMenu: null,
                         type: 'item',
                         quickSwitcherLabel: 'Ask AI',

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
   },
   "name": "@remotion/studio",
-  "version": "4.0.295",
+  "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.295",
-    "@remotion/player": "4.0.295",
-    "@remotion/media-parser": "4.0.295",
-    "@remotion/renderer": "4.0.295",
-    "@remotion/studio-shared": "4.0.295",
-    "@remotion/media-utils": "4.0.295",
-    "@remotion/zod-types": "4.0.295"
+    "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.295"
+    "@remotion/eslint-config-internal": "4.0.297"
   },
   "publishConfig": {
     "access": "public"