@remotion/studio 4.0.486 → 4.0.487

package/dist/esm/renderEntry.mjs

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

package/dist/helpers/retry-payload.js

@@ -203,6 +203,7 @@ const makeClientRetryPayload = (job) => {
         initialMuted: job.type === 'client-video' ? job.muted : null,
         initialTransparent: job.type === 'client-video' ? job.transparent : null,
         initialAllowHtmlInCanvas: job.allowHtmlInCanvas,
+        initialPageResponsiveness: job.type === 'client-video' ? job.pageResponsiveness : 'disabled',
     };
 };
 exports.makeClientRetryPayload = makeClientRetryPayload;

package/dist/helpers/use-menu-structure.js

@@ -10,6 +10,7 @@ const AskAiModal_1 = require("../components/AskAiModal");
 const composition_menu_items_1 = require("../components/composition-menu-items");
 const layout_1 = require("../components/layout");
 const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
+const actions_1 = require("../components/RenderQueue/actions");
 const SizeSelector_1 = require("../components/SizeSelector");
 const use_resolved_stack_1 = require("../components/Timeline/use-resolved-stack");
 const TimelineInOutToggle_1 = require("../components/TimelineInOutToggle");
@@ -19,6 +20,7 @@ const canvas_ref_1 = require("../state/canvas-ref");
 const checkerboard_1 = require("../state/checkerboard");
 const editor_guides_1 = require("../state/editor-guides");
 const editor_rulers_1 = require("../state/editor-rulers");
+const editor_snapping_1 = require("../state/editor-snapping");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const modals_1 = require("../state/modals");
 const sidebar_1 = require("../state/sidebar");
@@ -123,10 +125,10 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
                 quickSwitcherLabel: 'Render on web...',
             }
             : null,
-        window.remotion_editorName && !readOnlyStudio
+        !readOnlyStudio
             ? {
                 type: 'divider',
-                id: 'open-in-editor-divider',
+                id: 'open-project-divider',
             }
             : null,
         window.remotion_editorName && !readOnlyStudio
@@ -158,6 +160,26 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
                 leftItem: null,
                 subMenu: null,
                 quickSwitcherLabel: 'Open in editor...',
+                disabled: previewServerState !== 'connected',
+            }
+            : null,
+        !readOnlyStudio
+            ? {
+                id: 'open-project-in-explorer',
+                value: 'open-project-in-explorer',
+                label: 'Open in Explorer',
+                onClick: () => {
+                    closeMenu();
+                    (0, actions_1.openInFileExplorer)({ directory: window.remotion_cwd }).catch((err) => {
+                        (0, NotificationCenter_1.showNotification)(`Could not open project: ${err.message}`, 2000);
+                    });
+                },
+                type: 'item',
+                keyHint: null,
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: 'Open project in Explorer',
+                disabled: previewServerState !== 'connected',
             }
             : null,
         (0, get_git_menu_item_1.getGitMenuItem)(),
@@ -180,6 +202,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const { editorZoomGestures, setEditorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const { editorShowRulers, setEditorShowRulers } = (0, react_1.useContext)(editor_rulers_1.EditorShowRulersContext);
     const { editorShowGuides, setEditorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const { editorSnapping, setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const { size, setSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
@@ -380,6 +403,22 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             ? 'Hide Guides'
                             : 'Show Guides',
                     },
+                    {
+                        id: 'enable-snapping',
+                        keyHint: (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : 'Shift+M',
+                        label: 'Enable Snapping',
+                        onClick: () => {
+                            closeMenu();
+                            setEditorSnapping((c) => !c);
+                        },
+                        type: 'item',
+                        value: 'enable-snapping',
+                        leftItem: editorSnapping ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                        subMenu: null,
+                        quickSwitcherLabel: editorSnapping
+                            ? 'Disable Snapping'
+                            : 'Enable Snapping',
+                    },
                     {
                         id: 'timeline-divider-1',
                         type: 'divider',
@@ -882,6 +921,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         editorZoomGestures,
         editorShowRulers,
         editorShowGuides,
+        editorSnapping,
         sidebarCollapsedStateLeft,
         sidebarCollapsedStateRight,
         checkerboard,
@@ -893,6 +933,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         setEditorZoomGestures,
         setEditorShowRulers,
         setEditorShowGuides,
+        setEditorSnapping,
         setSidebarCollapsedState,
         setCheckerboard,
         setSelectedModal,

package/dist/icons/magnet.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const MagnetIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/icons/magnet.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MagnetIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const MagnetIcon = (props) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { transform: "rotate(180 256 256)", d: "M32 176v112c0 123.7 100.3 224 224 224s224-100.3 224-224V176H352v112c0 53-43 96-96 96s-96-43-96-96V176H32zm0-48h128V64c0-17.7-14.3-32-32-32H64C46.3 32 32 46.3 32 64v64zm320 0h128V64c0-17.7-14.3-32-32-32h-64c-17.7 0-32 14.3-32 32v64z" }) }));
+};
+exports.MagnetIcon = MagnetIcon;

package/dist/icons/react.d.ts

@@ -0,0 +1,5 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const ReactIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;

package/dist/icons/react.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ReactIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", children: jsx_runtime_1.jsx("path", { fill: color, d: "M392.8 65.2C375.8 60.3 358.1 70.2 353.2 87.2L225.2 535.2C220.3 552.2 230.2 569.9 247.2 574.8C264.2 579.7 281.9 569.8 286.8 552.8L414.8 104.8C419.7 87.8 409.8 70.1 392.8 65.2zM457.4 201.3C444.9 213.8 444.9 234.1 457.4 246.6L530.8 320L457.4 393.4C444.9 405.9 444.9 426.2 457.4 438.7C469.9 451.2 490.2 451.2 502.7 438.7L598.7 342.7C611.2 330.2 611.2 309.9 598.7 297.4L502.7 201.4C490.2 188.9 469.9 188.9 457.4 201.4zM182.7 201.3C170.2 188.8 149.9 188.8 137.4 201.3L41.4 297.3C28.9 309.8 28.9 330.1 41.4 342.6L137.4 438.6C149.9 451.1 170.2 451.1 182.7 438.6C195.2 426.1 195.2 405.8 182.7 393.3L109.3 320L182.6 246.6C195.1 234.1 195.1 213.8 182.6 201.3z" }) }));
+};
+exports.ReactIcon = ReactIcon;

package/dist/state/editor-guides.d.ts

@@ -14,8 +14,8 @@ export type GuideState = {
     setDraggingGuideId: (cb: (prevState: string | null) => string | null) => void;
     setHoveredGuideId: (cb: (prevState: string | null) => string | null) => void;
     hoveredGuideId: string | null;
-    shouldCreateGuideRef: React.MutableRefObject<boolean>;
-    shouldDeleteGuideRef: React.MutableRefObject<boolean>;
+    shouldCreateGuideRef: React.RefObject<boolean>;
+    shouldDeleteGuideRef: React.RefObject<boolean>;
 };
 export declare const persistEditorShowGuidesOption: (option: boolean) => void;
 export declare const loadEditorShowGuidesOption: () => boolean;

package/dist/state/editor-snapping.d.ts

@@ -0,0 +1,8 @@
+type State = {
+    editorSnapping: boolean;
+    setEditorSnapping: (cb: (prevState: boolean) => boolean) => void;
+};
+export declare const persistEditorSnappingOption: (option: boolean) => void;
+export declare const loadEditorSnappingOption: () => boolean;
+export declare const EditorSnappingContext: import("react").Context<State>;
+export {};

package/dist/state/editor-snapping.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorSnappingContext = exports.loadEditorSnappingOption = exports.persistEditorSnappingOption = void 0;
+const react_1 = require("react");
+const key = 'remotion.editorSnapping';
+const persistEditorSnappingOption = (option) => {
+    localStorage.setItem(key, String(option));
+};
+exports.persistEditorSnappingOption = persistEditorSnappingOption;
+const loadEditorSnappingOption = () => {
+    const item = localStorage.getItem(key);
+    return item !== 'false';
+};
+exports.loadEditorSnappingOption = loadEditorSnappingOption;
+exports.EditorSnappingContext = (0, react_1.createContext)({
+    editorSnapping: true,
+    setEditorSnapping: () => undefined,
+});

package/dist/state/modals.d.ts

@@ -1,7 +1,7 @@
 import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, OpenGlRenderer, PixelFormat, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import type { HardwareAccelerationOption } from '@remotion/renderer/client';
 import type { PackageManager, RenderDefaults } from '@remotion/studio-shared';
-import type { RenderStillOnWebImageFormat, WebRendererAudioCodec, WebRendererContainer, WebRendererHardwareAcceleration, WebRendererQuality, WebRendererVideoCodec } from '@remotion/web-renderer';
+import type { RenderStillOnWebImageFormat, WebRendererAudioCodec, WebRendererContainer, WebRendererHardwareAcceleration, WebRendererPageResponsiveness, WebRendererQuality, WebRendererVideoCodec } from '@remotion/web-renderer';
 import type React from 'react';
 import type { SequencePropsSubscriptionKey, _InternalTypes } from 'remotion';
 import type { CompType } from '../components/NewComposition/DuplicateComposition';
@@ -33,6 +33,7 @@ export type WebRenderModalState = {
     initialLicenseKey: string | null;
     initialMediaCacheSizeInBytes: number | null;
     initialAllowHtmlInCanvas: boolean;
+    initialPageResponsiveness: WebRendererPageResponsiveness;
 };
 export type RenderModalState = {
     type: 'server-render';

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.486",
+	"version": "4.0.487",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,17 +25,17 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"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",
+		"remotion": "4.0.487",
+		"@remotion/canvas-capture": "4.0.487",
+		"@remotion/player": "4.0.487",
+		"@remotion/media-utils": "4.0.487",
+		"@remotion/renderer": "4.0.487",
+		"@remotion/web-renderer": "4.0.487",
+		"@remotion/studio-shared": "4.0.487",
+		"@remotion/timeline-utils": "4.0.487",
+		"@remotion/zod-types": "4.0.487",
 		"@jridgewell/trace-mapping": "0.3.31",
-		"mediabunny": "1.50.3",
+		"mediabunny": "1.50.7",
 		"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.486",
+		"@remotion/eslint-config-internal": "4.0.487",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},