@remotion/studio 4.0.484 → 4.0.486

package/dist/icons/step-forward.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StepForward = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
 const StepForward = (props) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M384 44v424c0 6.6-5.4 12-12 12h-48c-6.6 0-12-5.4-12-12V291.6l-195.5 181C95.9 489.7 64 475.4 64 448V64c0-27.4 31.9-41.7 52.5-24.6L312 219.3V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12z" }) }));
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M384 44v424c0 6.6-5.4 12-12 12h-48c-6.6 0-12-5.4-12-12V291.6l-195.5 181C95.9 489.7 64 475.4 64 448V64c0-27.4 31.9-41.7 52.5-24.6L312 219.3V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12z" }) }));
 };
 exports.StepForward = StepForward;

package/dist/icons/undo.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UndoIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
 const UndoIcon = (props) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M88 256L232 256C241.7 256 250.5 250.2 254.2 241.2C257.9 232.2 255.9 221.9 249 215L202.3 168.3C277.6 109.7 386.6 115 455.8 184.2C530.8 259.2 530.8 380.7 455.8 455.7C380.8 530.7 259.3 530.7 184.3 455.7C174.1 445.5 165.3 434.4 157.9 422.7C148.4 407.8 128.6 403.4 113.7 412.9C98.8 422.4 94.4 442.2 103.9 457.1C113.7 472.7 125.4 487.5 139 501C239 601 401 601 501 501C601 401 601 239 501 139C406.8 44.7 257.3 39.3 156.7 122.8L105 71C98.1 64.2 87.8 62.1 78.8 65.8C69.8 69.5 64 78.3 64 88L64 232C64 245.3 74.7 256 88 256z" }) }));
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M88 256L232 256C241.7 256 250.5 250.2 254.2 241.2C257.9 232.2 255.9 221.9 249 215L202.3 168.3C277.6 109.7 386.6 115 455.8 184.2C530.8 259.2 530.8 380.7 455.8 455.7C380.8 530.7 259.3 530.7 184.3 455.7C174.1 445.5 165.3 434.4 157.9 422.7C148.4 407.8 128.6 403.4 113.7 412.9C98.8 422.4 94.4 442.2 103.9 457.1C113.7 472.7 125.4 487.5 139 501C239 601 401 601 501 501C601 401 601 239 501 139C406.8 44.7 257.3 39.3 156.7 122.8L105 71C98.1 64.2 87.8 62.1 78.8 65.8C69.8 69.5 64 78.3 64 88L64 232C64 245.3 74.7 256 88 256z" }) }));
 };
 exports.UndoIcon = UndoIcon;

package/dist/previewEntry.js

@@ -9,9 +9,10 @@ const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const NoRegisterRoot_1 = require("./components/NoRegisterRoot");
 const entry_basic_1 = require("./error-overlay/entry-basic");
+const colors_1 = require("./helpers/colors");
 const client_2 = require("./hot-middleware-client/client");
 const Studio_1 = require("./Studio");
-remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultPreviewCSS(null, '#1f2428'));
+remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultPreviewCSS(null, colors_1.BACKGROUND_HEX));
 if (!window.__remotionOverlayStarted) {
     window.__remotionOverlayStarted = true;
     try {

package/dist/renderEntry.js

@@ -49,6 +49,7 @@ const react_1 = require("react");
 const client_1 = __importDefault(require("react-dom/client"));
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
+const colors_1 = require("./helpers/colors");
 let currentBundleMode = {
     type: 'index',
 };
@@ -58,7 +59,7 @@ const setBundleMode = (state) => {
 const getBundleMode = () => {
     return currentBundleMode;
 };
-remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultPreviewCSS(null, '#1f2428'));
+remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultPreviewCSS(null, colors_1.BACKGROUND_HEX));
 const getCanSerializeDefaultProps = (object) => {
     try {
         const str = JSON.stringify(object);
@@ -93,7 +94,7 @@ const DelayedSpinner = () => {
             alignItems: 'center',
             fontSize: 13,
             opacity: 0.6,
-            color: 'white',
+            color: colors_1.WHITE,
             fontFamily: 'Helvetica, Arial, sans-serif',
         }, children: "Loading Studio" }));
 };
@@ -142,7 +143,7 @@ const GetVideoComposition = ({ state }) => {
             width: currentCompositionMetadata.width,
             height: currentCompositionMetadata.height,
             display: 'flex',
-            backgroundColor: 'transparent',
+            backgroundColor: colors_1.TRANSPARENT,
         } }));
 };
 const DEFAULT_ROOT_COMPONENT_TIMEOUT = 10000;

package/dist/state/modals.d.ts

@@ -105,6 +105,13 @@ export type AddEffectModalState = {
 };
 export type ModalState = {
     type: 'new-comp';
+    folderName: string | null;
+    parentName: string | null;
+    stack: string | null;
+} | {
+    type: 'new-folder';
+    parentName: string | null;
+    stack: string | null;
 } | {
     type: 'duplicate-comp';
     compositionId: string;

package/dist/state/timeline-zoom.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineZoomContext = exports.TimelineZoomCtx = exports.TIMELINE_MAX_ZOOM = exports.TIMELINE_MIN_ZOOM = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_dom_1 = require("react-dom");
 const imperative_state_1 = require("../components/Timeline/imperative-state");
 const timeline_scroll_logic_1 = require("../components/Timeline/timeline-scroll-logic");
 const ZoomPersistor_1 = require("../components/ZoomPersistor");
@@ -17,21 +18,23 @@ exports.TimelineZoomCtx = (0, react_1.createContext)({
 const TimelineZoomContext = ({ children }) => {
     const [zoom, setZoomState] = (0, react_1.useState)(() => (0, ZoomPersistor_1.getZoomFromLocalStorage)());
     const setZoom = (0, react_1.useCallback)((compositionId, callback, options) => {
-        setZoomState((prevZoomMap) => {
-            var _a, _b, _c, _d;
-            const newZoomWithFloatingPointErrors = Math.min(exports.TIMELINE_MAX_ZOOM, Math.max(exports.TIMELINE_MIN_ZOOM, callback((_a = prevZoomMap[compositionId]) !== null && _a !== void 0 ? _a : exports.TIMELINE_MIN_ZOOM)));
-            const newZoom = Math.round(newZoomWithFloatingPointErrors * 10) / 10;
-            const anchorFrame = (_b = options === null || options === void 0 ? void 0 : options.anchorFrame) !== null && _b !== void 0 ? _b : null;
-            const anchorContentX = (_c = options === null || options === void 0 ? void 0 : options.anchorContentX) !== null && _c !== void 0 ? _c : null;
-            (0, timeline_scroll_logic_1.zoomAndPreserveCursor)({
-                oldZoom: (_d = prevZoomMap[compositionId]) !== null && _d !== void 0 ? _d : exports.TIMELINE_MIN_ZOOM,
-                newZoom,
-                currentDurationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                currentFrame: (0, imperative_state_1.getCurrentFrame)(),
-                anchorFrame,
-                anchorContentX,
+        (0, react_dom_1.flushSync)(() => {
+            setZoomState((prevZoomMap) => {
+                var _a, _b, _c, _d;
+                const newZoomWithFloatingPointErrors = Math.min(exports.TIMELINE_MAX_ZOOM, Math.max(exports.TIMELINE_MIN_ZOOM, callback((_a = prevZoomMap[compositionId]) !== null && _a !== void 0 ? _a : exports.TIMELINE_MIN_ZOOM)));
+                const newZoom = Math.round(newZoomWithFloatingPointErrors * 10) / 10;
+                const anchorFrame = (_b = options === null || options === void 0 ? void 0 : options.anchorFrame) !== null && _b !== void 0 ? _b : null;
+                const anchorContentX = (_c = options === null || options === void 0 ? void 0 : options.anchorContentX) !== null && _c !== void 0 ? _c : null;
+                (0, timeline_scroll_logic_1.zoomAndPreserveCursor)({
+                    oldZoom: (_d = prevZoomMap[compositionId]) !== null && _d !== void 0 ? _d : exports.TIMELINE_MIN_ZOOM,
+                    newZoom,
+                    currentDurationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                    currentFrame: (0, imperative_state_1.getCurrentFrame)(),
+                    anchorFrame,
+                    anchorContentX,
+                });
+                return { ...prevZoomMap, [compositionId]: newZoom };
             });
-            return { ...prevZoomMap, [compositionId]: newZoom };
         });
     }, []);
     const value = (0, react_1.useMemo)(() => {

package/dist/state/z-index.d.ts

@@ -4,6 +4,7 @@ export declare const HigherZIndex: React.FC<{
     readonly onOutsideClick: (target: Node) => void;
     readonly children: React.ReactNode;
     readonly disabled?: boolean;
+    readonly outsideClickButton?: 'any' | 'primary';
 }>;
 export declare const useZIndex: () => {
     currentZIndex: number;

package/dist/state/z-index.js

@@ -31,7 +31,7 @@ const EscapeHook = ({ onEscape }) => {
     }, [keybindings, onEscape]);
     return null;
 };
-const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled }) => {
+const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled, outsideClickButton = 'any', }) => {
     const context = (0, react_1.useContext)(ZIndexContext);
     const highestContext = (0, react_1.useContext)(highest_z_index_1.HighestZIndexContext);
     const containerRef = (0, react_1.useRef)(null);
@@ -52,6 +52,9 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled }) => {
         let onUp = null;
         const listener = (downEvent) => {
             var _a;
+            if (outsideClickButton === 'primary' && downEvent.button !== 0) {
+                return;
+            }
             const outsideClick = !((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(downEvent.target));
             if (!outsideClick) {
                 return;
@@ -83,7 +86,13 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled }) => {
             onUp = null;
             return window.removeEventListener('pointerdown', listener, true);
         };
-    }, [currentIndex, disabled, highestContext.highestIndex, onOutsideClick]);
+    }, [
+        currentIndex,
+        disabled,
+        highestContext.highestIndex,
+        onOutsideClick,
+        outsideClickButton,
+    ]);
     const value = (0, react_1.useMemo)(() => {
         return {
             currentIndex,

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.484",
+	"version": "4.0.486",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,17 +25,17 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.484",
-		"@remotion/canvas-capture": "4.0.484",
-		"@remotion/player": "4.0.484",
-		"@remotion/media-utils": "4.0.484",
-		"@remotion/renderer": "4.0.484",
-		"@remotion/web-renderer": "4.0.484",
-		"@remotion/studio-shared": "4.0.484",
-		"@remotion/timeline-utils": "4.0.484",
-		"@remotion/zod-types": "4.0.484",
+		"remotion": "4.0.486",
+		"@remotion/canvas-capture": "4.0.486",
+		"@remotion/player": "4.0.486",
+		"@remotion/media-utils": "4.0.486",
+		"@remotion/renderer": "4.0.486",
+		"@remotion/web-renderer": "4.0.486",
+		"@remotion/studio-shared": "4.0.486",
+		"@remotion/timeline-utils": "4.0.486",
+		"@remotion/zod-types": "4.0.486",
 		"@jridgewell/trace-mapping": "0.3.31",
-		"mediabunny": "1.47.0",
+		"mediabunny": "1.50.3",
 		"memfs": "3.4.3",
 		"open": "8.4.2",
 		"zod": "4.3.6"
@@ -44,7 +44,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.484",
+		"@remotion/eslint-config-internal": "4.0.486",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/esm/chunk-6jf1natv.js

@@ -1,25 +0,0 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __toESM = (mod, isNodeMode, target) => {
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: () => mod[key],
-        enumerable: true
-      });
-  return to;
-};
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-export { __toESM, __require };