@remotion/studio 4.0.295 → 4.0.297

package/.turbo/turbo-make.log

@@ -1,6 +1,6 @@
 
 
-> @remotion/studio@4.0.295 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
 
-[63.65ms] Generated.
+[97.70ms] Generated.

package/dist/api/visual-control.js

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.visualControl = void 0;
+const remotion_1 = require("remotion");
 const VisualControls_1 = require("../visual-controls/VisualControls");
 const visualControl = (key, value, schema) => {
+    if ((0, remotion_1.getRemotionEnvironment)().isRendering) {
+        return value;
+    }
     if (!VisualControls_1.visualControlRef.current) {
         throw new Error('visualControlRef is not set');
     }

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-j') {
-                (_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/GlobalKeybindings.js

@@ -38,9 +38,9 @@ const GlobalKeybindings = () => {
             commandCtrlKey: true,
             preventDefault: true,
         });
-        const cmdJKey = keybindings.registerKeybinding({
+        const cmdIKey = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'j',
+            key: 'i',
             callback: () => {
                 var _a;
                 (_a = AskAiModal_1.askAiModalRef.current) === null || _a === void 0 ? void 0 : _a.toggle();
@@ -81,7 +81,7 @@ const GlobalKeybindings = () => {
             cKey.unregister();
             questionMark.unregister();
             cmdKKey.unregister();
-            cmdJKey.unregister();
+            cmdIKey.unregister();
         };
     }, [keybindings, setCheckerboard, setSelectedModal]);
     return null;

package/dist/components/KeyboardShortcutsExplainer.js

@@ -52,6 +52,6 @@ const li = {
     fontSize: 14,
 };
 const KeyboardShortcutsExplainer = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsxs)("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:", (0, jsx_runtime_1.jsxs)("ul", { style: ul, children: [(0, jsx_runtime_1.jsx)("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: "b) Config.setKeyboardShortcutsEnabled(false) being set or" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: " c) a Remotion version mismatch." })] })] })) : null, (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "A" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to beginning" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "E" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to end" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "G" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Go to frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Enter" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause & return to playback start" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Sidebar" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "B" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle left sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle right sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "G" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle both sidebars" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "View" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "F" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Enter fullscreen" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Esc" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Exit fullscreen" })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "R" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Render composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard background" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Quick Switcher" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Zoom" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "+" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom in" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "-" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom out" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "0" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reset zoom" })] }), ' ', (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Props Editor" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "S" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Save" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "AI" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Ask AI" })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsxs)("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:", (0, jsx_runtime_1.jsxs)("ul", { style: ul, children: [(0, jsx_runtime_1.jsx)("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: "b) Config.setKeyboardShortcutsEnabled(false) being set or" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: " c) a Remotion version mismatch." })] })] })) : null, (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "A" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to beginning" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "E" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to end" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "G" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Go to frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Enter" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause & return to playback start" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Sidebar" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "B" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle left sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle right sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "G" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle both sidebars" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "View" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "F" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Enter fullscreen" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Esc" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Exit fullscreen" })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "R" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Render composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard background" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Quick Switcher" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Zoom" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "+" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom in" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "-" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom out" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "0" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reset zoom" })] }), ' ', (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Props Editor" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "S" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Save" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "AI" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Ask AI" })] })] })] })] }));
 };
 exports.KeyboardShortcutsExplainer = KeyboardShortcutsExplainer;

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/index.mjs

@@ -473,6 +473,9 @@ var updateDefaultProps = ({
     }
   }));
 };
+// src/api/visual-control.ts
+import { getRemotionEnvironment as getRemotionEnvironment6 } from "remotion";
+
 // src/visual-controls/VisualControls.tsx
 import {
   createContext,
@@ -505,16 +508,19 @@ var SetVisualControlsContext = createContext({
 
 // src/api/visual-control.ts
 var visualControl = (key, value, schema) => {
+  if (getRemotionEnvironment6().isRendering) {
+    return value;
+  }
   if (!visualControlRef.current) {
     throw new Error("visualControlRef is not set");
   }
   return visualControlRef.current.globalVisualControl(key, value, schema);
 };
 // src/api/watch-public-folder.ts
-import { getRemotionEnvironment as getRemotionEnvironment6 } from "remotion";
+import { getRemotionEnvironment as getRemotionEnvironment7 } from "remotion";
 var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
 var watchPublicFolder = (callback) => {
-  if (!getRemotionEnvironment6().isStudio) {
+  if (!getRemotionEnvironment7().isStudio) {
     console.warn("The watchPublicFolder() API is only available while using the Remotion Studio.");
     return { cancel: () => {
       return;
@@ -533,9 +539,9 @@ var watchPublicFolder = (callback) => {
   return { cancel };
 };
 // src/api/watch-static-file.ts
-import { getRemotionEnvironment as getRemotionEnvironment7 } from "remotion";
+import { getRemotionEnvironment as getRemotionEnvironment8 } from "remotion";
 var watchStaticFile = (fileName, callback) => {
-  if (!getRemotionEnvironment7().isStudio) {
+  if (!getRemotionEnvironment8().isStudio) {
     console.warn("watchStaticFile() is only available while using the Remotion Studio.");
     return { cancel: () => {
       return;

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-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 () => {
@@ -6625,7 +6627,7 @@ var useMenuStructure = (closeMenu, readOnlyStudio) => {
               askAiModalRef.current?.toggle();
             },
             leftItem: null,
-            keyHint: `${cmdOrCtrlCharacter}+J`,
+            keyHint: `${cmdOrCtrlCharacter}+I`,
             subMenu: null,
             type: "item",
             quickSwitcherLabel: "Ask AI"
@@ -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: [
@@ -20773,9 +20811,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();
       },
@@ -20815,7 +20853,7 @@ var GlobalKeybindings = () => {
       cKey.unregister();
       questionMark.unregister();
       cmdKKey.unregister();
-      cmdJKey.unregister();
+      cmdIKey.unregister();
     };
   }, [keybindings, setCheckerboard, setSelectedModal]);
   return null;
@@ -22688,7 +22726,7 @@ var KeyboardShortcutsExplainer = () => {
                       }),
                       /* @__PURE__ */ jsx215("kbd", {
                         style: key4,
-                        children: "J"
+                        children: "I"
                       })
                     ]
                   }),
@@ -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-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 () => {
@@ -6630,7 +6632,7 @@ var useMenuStructure = (closeMenu, readOnlyStudio) => {
               askAiModalRef.current?.toggle();
             },
             leftItem: null,
-            keyHint: `${cmdOrCtrlCharacter}+J`,
+            keyHint: `${cmdOrCtrlCharacter}+I`,
             subMenu: null,
             type: "item",
             quickSwitcherLabel: "Ask AI"
@@ -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: [
@@ -21053,9 +21091,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();
       },
@@ -21095,7 +21133,7 @@ var GlobalKeybindings = () => {
       cKey.unregister();
       questionMark.unregister();
       cmdKKey.unregister();
-      cmdJKey.unregister();
+      cmdIKey.unregister();
     };
   }, [keybindings, setCheckerboard, setSelectedModal]);
   return null;
@@ -22968,7 +23006,7 @@ var KeyboardShortcutsExplainer = () => {
                       }),
                       /* @__PURE__ */ jsx216("kbd", {
                         style: key4,
-                        children: "J"
+                        children: "I"
                       })
                     ]
                   }),
@@ -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,