@remotion/studio 4.0.499 → 4.0.501

package/dist/helpers/use-create-composition.js

@@ -2,9 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCreateComposition = exports.getUniqueCompositionName = void 0;
 const react_1 = require("react");
-const remotion_1 = require("remotion");
+const InitialCompositionLoader_1 = require("../components/InitialCompositionLoader");
 const actions_1 = require("../components/RenderQueue/actions");
-const url_state_1 = require("./url-state");
 const validate_new_comp_data_1 = require("./validate-new-comp-data");
 const toPascalCase = (value) => {
     var _a;
@@ -48,7 +47,7 @@ const getUniqueCompositionName = (compositions) => {
 };
 exports.getUniqueCompositionName = getUniqueCompositionName;
 const useCreateComposition = ({ compositions, durationInFrames, folderName, newId, parentName, selectedFrameRate, size, }) => {
-    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const componentName = (0, react_1.useMemo)(() => toPascalCase(newId), [newId]);
     const nameValidationMessage = (0, react_1.useMemo)(() => {
         return (0, validate_new_comp_data_1.validateCompositionName)(newId, compositions);
@@ -94,11 +93,14 @@ const useCreateComposition = ({ compositions, durationInFrames, folderName, newI
         });
         if (result.success) {
             await waitForComposition(newId);
-            setCanvasContent({ type: 'composition', compositionId: newId });
-            (0, url_state_1.pushUrl)(`/${newId}`);
+            selectComposition({
+                id: newId,
+                folderName,
+                parentFolderName: parentName,
+            }, true);
         }
         return result;
-    }, [codemod, newId, setCanvasContent]);
+    }, [codemod, folderName, newId, parentName, selectComposition]);
     return {
         codemod,
         createComposition,

package/dist/helpers/use-keybinding.js

@@ -4,6 +4,7 @@ exports.useKeybinding = exports.areKeyboardShortcutsDisabled = void 0;
 const react_1 = require("react");
 const keybindings_1 = require("../state/keybindings");
 const z_index_1 = require("../state/z-index");
+const is_mac_1 = require("./is-mac");
 const studio_runtime_config_1 = require("./studio-runtime-config");
 if (!(0, studio_runtime_config_1.getStudioKeyboardShortcutsEnabled)()) {
     // eslint-disable-next-line no-console
@@ -29,9 +30,7 @@ const useKeybinding = () => {
             };
         }
         const listener = (e) => {
-            const commandKey = window.navigator.platform.startsWith('Mac')
-                ? e.metaKey
-                : e.ctrlKey;
+            const commandKey = is_mac_1.isMac ? e.metaKey : e.ctrlKey;
             // Apparently, e.key can be undefined in Edge:
             // https://github.com/remotion-dev/remotion/issues/5637
             if (!e.key) {

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

@@ -24,9 +24,11 @@ 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");
+const browser_studio_operations_1 = require("./browser-studio-operations");
 const check_fullscreen_support_1 = require("./check-fullscreen-support");
 const client_id_1 = require("./client-id");
 const colors_1 = require("./colors");
+const download_blob_1 = require("./download-blob");
 const get_file_manager_name_1 = require("./get-file-manager-name");
 const get_git_menu_item_1 = require("./get-git-menu-item");
 const mobile_layout_1 = require("./mobile-layout");
@@ -39,10 +41,19 @@ const openExternal = (link) => {
 };
 const rotate = {
     transform: `rotate(90deg)`,
+    color: 'inherit',
+};
+const iconContainer = {
+    color: 'inherit',
+};
+const iconPath = {
+    color: 'inherit',
 };
 const ICON_SIZE = 16;
 const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelectedModal, }) => {
     const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    const downloadProject = browserStudioOperations === null || browserStudioOperations === void 0 ? void 0 : browserStudioOperations.downloadProject;
     const items = [
         readOnlyStudio
             ? null
@@ -125,6 +136,29 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
             subMenu: null,
             quickSwitcherLabel: 'Render on web...',
         },
+        downloadProject
+            ? {
+                id: 'download-project',
+                value: 'download-project',
+                label: 'Download project',
+                onClick: async () => {
+                    closeMenu();
+                    try {
+                        const { data, fileName } = await downloadProject();
+                        const arrayBuffer = data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength);
+                        (0, download_blob_1.downloadBlob)(new Blob([arrayBuffer], { type: 'application/zip' }), fileName);
+                    }
+                    catch (error) {
+                        (0, NotificationCenter_1.showNotification)(`Could not download project: ${error instanceof Error ? error.message : String(error)}`, 2000);
+                    }
+                },
+                type: 'item',
+                keyHint: null,
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: 'Download project',
+            }
+            : null,
         !readOnlyStudio
             ? {
                 type: 'divider',
@@ -235,7 +269,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         let struct = [
             {
                 id: 'remotion',
-                label: (jsx_runtime_1.jsx(layout_1.Row, { align: "center", justify: "center", children: jsx_runtime_1.jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: jsx_runtime_1.jsx("path", { fill: colors_1.WHITE_HEX, stroke: colors_1.WHITE_HEX, strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }) })),
+                label: (jsx_runtime_1.jsx(layout_1.Row, { align: "center", justify: "center", style: iconContainer, children: jsx_runtime_1.jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, stroke: colors_1.CURRENT_COLOR, style: iconPath, strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }) })),
                 leaveLeftPadding: false,
                 items: [
                     {
@@ -574,6 +608,8 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                                 type: 'quick-switcher',
                                 mode: 'compositions',
                                 invocationTimestamp: Date.now(),
+                                assetSelection: null,
+                                compositionSelection: null,
                             });
                         },
                         type: 'item',
@@ -762,6 +798,8 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                                 type: 'quick-switcher',
                                 mode: 'docs',
                                 invocationTimestamp: Date.now(),
+                                assetSelection: null,
+                                compositionSelection: null,
                             });
                         },
                         keyHint: '?',

package/dist/hot-middleware-client/client.js

@@ -107,9 +107,9 @@ const enableHotMiddleware = () => {
     window.__remotion_processHmrEvent = (hmrEvent) => {
         processMessage(hmrEvent);
     };
-    // Connect to /events immediately so HMR works before React mounts.
-    // PreviewServerConnection reuses the same EventSource via preview-server-events.
-    if (typeof window !== 'undefined' && typeof EventSource !== 'undefined') {
+    // Connect immediately so HMR works before React mounts. Browser Studio and
+    // the preview server share the same transport-neutral event subscription.
+    if (typeof window !== 'undefined') {
         if (!unsubscribeFromPreviewServerEvents) {
             unsubscribeFromPreviewServerEvents = (0, preview_server_events_1.subscribeToPreviewServerEvents)((event) => {
                 if (event.type === 'hmr') {

package/dist/icons/border-radius.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const BorderRadiusIcon: ({ color, ...props }: SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/border-radius.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BorderRadiusIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BorderRadiusIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 16 16", fill: "none", ...props, children: jsx_runtime_1.jsx("path", { d: "M2.5 3.5H6.5C10.4 3.5 12.5 5.6 12.5 9.5V13.5", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }) }));
+};
+exports.BorderRadiusIcon = BorderRadiusIcon;

package/dist/icons/caret.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const CaretRight: () => import("react/jsx-runtime").JSX.Element;
 export declare const CaretDown: React.FC<{
+    readonly color?: string;
     readonly small?: boolean;
 }>;
 export declare const AngleDown: React.FC<{

package/dist/icons/caret.js

@@ -18,8 +18,8 @@ const angleDown = {
 };
 const CaretRight = () => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 192 512", style: caret, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" }) }));
 exports.CaretRight = CaretRight;
-const CaretDown = ({ small = false, }) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", style: small ? caretDownSmall : caretDown, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
+const CaretDown = ({ color = colors_1.CURRENT_COLOR, small = false }) => {
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", style: small ? caretDownSmall : caretDown, children: jsx_runtime_1.jsx("path", { fill: color, d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
 };
 exports.CaretDown = CaretDown;
 const AngleDown = ({ down }) => {

package/dist/icons/fullscreen.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const FullscreenIcon: ({ color, ...props }: SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/fullscreen.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullscreenIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FullscreenIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z" }) }));
+exports.FullscreenIcon = FullscreenIcon;

package/dist/icons/pen.d.ts

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

package/dist/icons/pen.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PenIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PenIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M18.7 2.3a1 1 0 0 0-1.4 0L5.2 14.4a1 1 0 0 0-.26.46l-1.4 4.95a.5.5 0 0 0 .62.62l4.95-1.4a1 1 0 0 0 .46-.26L21.7 6.7a1 1 0 0 0 0-1.4l-3-3Zm-10.33 14.9-2.4.68.68-2.4L15.5 6.62l1.73 1.73-8.86 8.85Zm10.28-10.27L16.92 5.2 18 4.12l1.73 1.73-1.08 1.08Z" }) }));
+};
+exports.PenIcon = PenIcon;

package/dist/previewEntry.js

@@ -45,5 +45,5 @@ const renderToDOM = (content) => {
 };
 renderToDOM(jsx_runtime_1.jsx(NoRegisterRoot_1.NoRegisterRoot, {}));
 remotion_1.Internals.waitForRoot((NewRoot) => {
-    renderToDOM(jsx_runtime_1.jsx(Studio_1.Studio, { readOnly: false, rootComponent: NewRoot }));
+    renderToDOM(jsx_runtime_1.jsx(Studio_1.Studio, { readOnly: window.remotion_isReadOnlyStudio, rootComponent: NewRoot }));
 });

package/dist/state/modals.d.ts

@@ -4,6 +4,7 @@ import type { PackageManager, RenderDefaults } from '@remotion/studio-shared';
 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 { StaticFile } from '../api/get-static-files';
 import type { CompType } from '../components/NewComposition/DuplicateComposition';
 import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
@@ -159,6 +160,14 @@ export type ModalState = {
     type: 'quick-switcher';
     mode: QuickSwitcherMode;
     invocationTimestamp: number;
+    assetSelection: {
+        initialQuery: string;
+        onSelected: (asset: StaticFile) => void;
+    } | null;
+    compositionSelection: {
+        excludeCompositionId: string;
+        onSelected: (composition: _InternalTypes['AnyComposition']) => void;
+    } | null;
 } | AddEffectModalState | ConfirmationDialogState | SvgImportDialogState;
 export type ModalContextType = {
     selectedModal: ModalState | null;

package/dist/state/timeline-sequence-hover.d.ts

@@ -0,0 +1,17 @@
+import type { Dispatch, SetStateAction } from 'react';
+import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
+export type TimelineSequenceHover = {
+    readonly key: string;
+    readonly source: 'canvas' | 'timeline';
+};
+type TimelineSequenceHoverState = {
+    readonly hoveredSequence: TimelineSequenceHover | null;
+    readonly setHoveredSequence: Dispatch<SetStateAction<TimelineSequenceHover | null>>;
+};
+export declare const TimelineSequenceHoverContext: import("react").Context<TimelineSequenceHoverState>;
+export declare const useTimelineSequenceHover: (nodePathInfo: SequenceNodePathInfo | null) => {
+    hovered: boolean;
+    onPointerEnter: () => void;
+    onPointerLeave: () => void;
+};
+export {};

package/dist/state/timeline-sequence-hover.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineSequenceHover = exports.TimelineSequenceHoverContext = void 0;
+const react_1 = require("react");
+const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
+exports.TimelineSequenceHoverContext = (0, react_1.createContext)({
+    hoveredSequence: null,
+    setHoveredSequence: () => undefined,
+});
+const useTimelineSequenceHover = (nodePathInfo) => {
+    const { hoveredSequence, setHoveredSequence } = (0, react_1.useContext)(exports.TimelineSequenceHoverContext);
+    const sequenceKey = (0, react_1.useMemo)(() => nodePathInfo === null
+        ? null
+        : (0, timeline_node_path_key_1.timelineNodePathInfoToKey)({ ...nodePathInfo, auxiliaryKeys: [] }), [nodePathInfo]);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        if (sequenceKey === null) {
+            return;
+        }
+        setHoveredSequence({ key: sequenceKey, source: 'timeline' });
+    }, [sequenceKey, setHoveredSequence]);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHoveredSequence((currentHover) => {
+            if ((currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) !== 'timeline' ||
+                currentHover.key !== sequenceKey) {
+                return currentHover;
+            }
+            return null;
+        });
+    }, [sequenceKey, setHoveredSequence]);
+    const hovered = sequenceKey !== null && (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.key) === sequenceKey;
+    return (0, react_1.useMemo)(() => ({ hovered, onPointerEnter, onPointerLeave }), [hovered, onPointerEnter, onPointerLeave]);
+};
+exports.useTimelineSequenceHover = useTimelineSequenceHover;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.499",
+	"version": "4.0.501",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -24,17 +24,18 @@
 		"react-dom": ">=16.8.0"
 	},
 	"dependencies": {
-		"@remotion/drag-and-drop": "4.0.499",
+		"@remotion/drag-and-drop": "4.0.501",
 		"semver": "7.5.3",
-		"remotion": "4.0.499",
-		"@remotion/canvas-capture": "4.0.499",
-		"@remotion/player": "4.0.499",
-		"@remotion/media-utils": "4.0.499",
-		"@remotion/renderer": "4.0.499",
-		"@remotion/web-renderer": "4.0.499",
-		"@remotion/studio-shared": "4.0.499",
-		"@remotion/timeline-utils": "4.0.499",
-		"@remotion/zod-types": "4.0.499",
+		"remotion": "4.0.501",
+		"@remotion/canvas-capture": "4.0.501",
+		"@remotion/captions": "4.0.501",
+		"@remotion/player": "4.0.501",
+		"@remotion/media-utils": "4.0.501",
+		"@remotion/renderer": "4.0.501",
+		"@remotion/web-renderer": "4.0.501",
+		"@remotion/studio-shared": "4.0.501",
+		"@remotion/timeline-utils": "4.0.501",
+		"@remotion/zod-types": "4.0.501",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.50.8",
 		"memfs": "3.4.3",
@@ -45,7 +46,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.499",
+		"@remotion/eslint-config-internal": "4.0.501",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/helpers/get-timeline-sequence-hash.d.ts

@@ -1,6 +0,0 @@
-import type { TSequence } from 'remotion';
-export declare const getTimelineSequenceHash: (sequence: TSequence, allSequences: TSequence[], hashesUsedInRoot: {
-    [rootId: string]: string[];
-}, cache: {
-    [sequenceId: string]: string;
-}) => string;

package/dist/helpers/get-timeline-sequence-hash.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimelineSequenceHash = void 0;
-// The goal for this function is to calculate an as unique as possible identifier
-// for a sequence based on it's properties. A sequence can be registered multiple times
-// from main preview and from thumbnails and we use this to deduplicate it.
-// This is why we don't use `id` properties as they will
-// differ as a hash.
-const getTimelineSequenceHash = (sequence, allSequences, hashesUsedInRoot, cache) => {
-    if (cache[sequence.id]) {
-        return cache[sequence.id];
-    }
-    const parent = allSequences.find((a) => a.id === sequence.parent);
-    const baseHash = [
-        parent
-            ? (0, exports.getTimelineSequenceHash)(parent, allSequences, hashesUsedInRoot, cache)
-            : null,
-        sequence.displayName,
-        sequence.duration,
-        sequence.from,
-        sequence.type,
-        sequence.type === 'audio' ? sequence.src : null,
-        sequence.type === 'audio' ? sequence.volume : null,
-        sequence.type === 'video' ? sequence.src : null,
-        sequence.type === 'video' ? sequence.volume : null,
-    ].join('-');
-    const actualHash = baseHash +
-        hashesUsedInRoot[sequence.rootId].filter((h) => h === baseHash).length;
-    hashesUsedInRoot[sequence.rootId].push(baseHash);
-    cache[sequence.id] = actualHash;
-    return actualHash;
-};
-exports.getTimelineSequenceHash = getTimelineSequenceHash;