@remotion/studio 4.0.525 → 4.0.527

package/dist/helpers/settings-tab-availability.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSafeSettingsTab = exports.getAvailableSettingsTabs = exports.canInstallPackagesInStudio = exports.canEditStudioConfig = void 0;
+const canEditStudioConfig = ({ isBrowserStudio, previewServerConnected, readOnlyStudio, }) => {
+    return previewServerConnected && !readOnlyStudio && !isBrowserStudio;
+};
+exports.canEditStudioConfig = canEditStudioConfig;
+const canInstallPackagesInStudio = (studioMode) => {
+    return studioMode.isBrowserStudio || (0, exports.canEditStudioConfig)(studioMode);
+};
+exports.canInstallPackagesInStudio = canInstallPackagesInStudio;
+const getAvailableSettingsTabs = ({ isBrowserStudio, packageManagerAvailable, previewServerConnected, readOnlyStudio, showUpdates, }) => {
+    const studioMode = {
+        isBrowserStudio,
+        previewServerConnected,
+        readOnlyStudio,
+    };
+    const canEditConfig = (0, exports.canEditStudioConfig)(studioMode);
+    const canInstallPackages = (0, exports.canInstallPackagesInStudio)(studioMode) &&
+        (isBrowserStudio || packageManagerAvailable);
+    return [
+        ...(canEditConfig ? ['studio', 'rendering'] : []),
+        'shortcuts',
+        ...(canInstallPackages ? ['packages'] : []),
+        ...(canEditConfig ? ['skills'] : []),
+        ...(isBrowserStudio || !readOnlyStudio ? ['models'] : []),
+        ...(canEditConfig ? ['apps', 'license'] : []),
+        ...(showUpdates ? ['updates'] : []),
+    ];
+};
+exports.getAvailableSettingsTabs = getAvailableSettingsTabs;
+const getSafeSettingsTab = (requestedTab, availableTabs) => {
+    return availableTabs.includes(requestedTab) ? requestedTab : 'shortcuts';
+};
+exports.getSafeSettingsTab = getSafeSettingsTab;

package/dist/helpers/studio-runtime-config.d.ts

@@ -2,6 +2,6 @@ export declare const DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
 export declare const getStudioAskAIEnabled: () => boolean;
 export declare const getStudioInteractivityEnabled: () => boolean;
 export declare const getStudioKeyboardShortcutsEnabled: () => boolean;
-export declare const getStudioKeyboardShortcuts: () => Partial<Record<"askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "pickColor" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut", import("@remotion/studio-shared").StudioKeyboardShortcutValue>> | null;
+export declare const getStudioKeyboardShortcuts: () => Partial<Record<"askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "pickColor" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "splitSequences" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut", import("@remotion/studio-shared").StudioKeyboardShortcutValue>> | null;
 export declare const getStudioMaxTimelineTracks: () => number | null;
 export declare const getStudioBufferStateDelayInMilliseconds: () => number;

package/dist/helpers/use-keybinding.d.ts

@@ -8,7 +8,7 @@ export declare const useKeybinding: () => {
         triggerIfInputFieldFocused: boolean;
         keepRegisteredWhenNotHighestContext: boolean;
     } & ({
-        action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "pickColor" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut";
+        action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "pickColor" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "splitSequences" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut";
         key?: undefined;
         commandCtrlKey?: undefined;
     } | {

package/dist/helpers/use-keyboard-shortcut-label.d.ts

@@ -1,2 +1,2 @@
-export declare const useKeyboardShortcutLabel: (action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "pickColor" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => string;
-export declare const useKeyboardShortcutAriaKeyShortcuts: (action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "pickColor" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => string;
+export declare const useKeyboardShortcutLabel: (action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "pickColor" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "splitSequences" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => string;
+export declare const useKeyboardShortcutAriaKeyShortcuts: (action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "pickColor" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "splitSequences" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => string;

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

@@ -14,7 +14,7 @@ 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");
-const use_default_editor_info_1 = require("../components/use-default-editor-info");
+const use_open_in_menu_apps_1 = require("../components/use-open-in-menu-apps");
 const Checkmark_1 = require("../icons/Checkmark");
 const canvas_ref_1 = require("../state/canvas-ref");
 const checkerboard_1 = require("../state/checkerboard");
@@ -27,13 +27,13 @@ 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 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");
 const open_in_editor_1 = require("./open-in-editor");
 const pick_color_1 = require("./pick-color");
+const settings_tab_availability_1 = require("./settings-tab-availability");
 const studio_runtime_config_1 = require("./studio-runtime-config");
 const use_keybinding_1 = require("./use-keybinding");
 const use_keyboard_shortcut_label_1 = require("./use-keyboard-shortcut-label");
@@ -186,7 +186,7 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, editorName, editorId, previewS
         quickSwitcherLabel: null,
     };
 };
-const getRenderMenuItems = ({ closeMenu, previewServerState, readOnlyStudio, renderShortcut, }) => {
+const getRenderMenuItems = ({ closeMenu, previewServerState, readOnlyStudio, renderShortcut, compositionSelected, }) => {
     return [
         readOnlyStudio
             ? null
@@ -210,6 +210,7 @@ const getRenderMenuItems = ({ closeMenu, previewServerState, readOnlyStudio, ren
                 leftItem: null,
                 subMenu: null,
                 quickSwitcherLabel: 'Render...',
+                disabled: !compositionSelected,
             },
         {
             id: 'render-on-web',
@@ -225,6 +226,7 @@ const getRenderMenuItems = ({ closeMenu, previewServerState, readOnlyStudio, ren
             leftItem: null,
             subMenu: null,
             quickSwitcherLabel: 'Render in browser...',
+            disabled: !compositionSelected,
         },
         {
             type: 'divider',
@@ -243,8 +245,8 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     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;
-    const { defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(type === 'connected');
+    const { connectionStatus: type, openInApps } = (0, use_open_in_menu_apps_1.useOpenInMenuApps)();
+    const { defaultEditorId, defaultEditorName } = openInApps;
     const keyboardShortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     const resetZoomShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('resetZoom');
     const toggleSnappingShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleSnapping');
@@ -264,6 +266,11 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const isFullscreenSupported = (0, check_fullscreen_support_1.checkFullscreenSupport)();
     const { remotion_packageManager } = window;
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    const studioConfigEditable = (0, settings_tab_availability_1.canEditStudioConfig)({
+        isBrowserStudio: browserStudioOperations !== null,
+        previewServerConnected: type === 'connected',
+        readOnlyStudio,
+    });
     const sizePreselectIndex = sizes.findIndex((s) => String(size.size) === String(s.size));
     const mobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const currentComposition = (0, react_1.useMemo)(() => {
@@ -330,7 +337,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             closeMenu();
                             setSelectedModal({
                                 type: 'settings',
-                                initialTab: browserStudioOperations === null ? 'studio' : 'shortcuts',
+                                initialTab: studioConfigEditable ? 'studio' : 'shortcuts',
                                 initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
                             });
                         },
@@ -339,8 +346,6 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         leftItem: null,
                         subMenu: null,
                         quickSwitcherLabel: 'Settings...',
-                        disabled: (browserStudioOperations === null && readOnlyStudio) ||
-                            type !== 'connected',
                     },
                     {
                         id: 'acknowledgements',
@@ -356,13 +361,13 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         subMenu: null,
                         quickSwitcherLabel: 'Help: Acknowledgements',
                     },
-                    browserStudioOperations === null
+                    studioConfigEditable
                         ? {
                             type: 'divider',
                             id: 'timeline-divider-1',
                         }
                         : null,
-                    browserStudioOperations === null
+                    studioConfigEditable
                         ? {
                             id: 'restart-studio',
                             value: 'restart-studio',
@@ -775,14 +780,14 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         previewServerState: type,
                         readOnlyStudio,
                         renderShortcut,
+                        compositionSelected: currentComposition !== null,
                     }),
                     ...(0, composition_menu_items_1.getCompositionMenuItems)({
                         closeMenu,
                         composition: currentComposition,
                         connectionStatus: type,
-                        editorId: defaultEditorId,
-                        editorName: defaultEditorName,
                         includeCompositionManagementItems: true,
+                        openInApps,
                         resolvedLocation: resolvedCompositionLocation,
                         setSelectedModal,
                         readOnlyStudio,
@@ -834,7 +839,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         : null,
                     !(0, browser_studio_operations_1.canInstallPackages)() ||
                         (browserStudioOperations === null &&
-                            remotion_packageManager === 'unknown')
+                            (remotion_packageManager === 'unknown' || type !== 'connected'))
                         ? null
                         : {
                             id: 'install-packages',
@@ -1057,6 +1062,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         mobileLayout,
         defaultEditorId,
         defaultEditorName,
+        openInApps,
         keyboardShortcutsDisabled,
         studioAskAIEnabled,
         askAIShortcut,
@@ -1072,6 +1078,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         showKeyboardShortcutsShortcut,
         toggleSnappingShortcut,
         browserStudioOperations,
+        studioConfigEditable,
         size.size,
         setSize,
         setEditorZoomGestures,
@@ -1096,7 +1103,7 @@ const getItemLabel = (item) => {
     }
     return (_a = item.label) === null || _a === void 0 ? void 0 : _a.toString();
 };
-const itemToSearchResult = (item, setSelectedModal, prefixes) => {
+const itemToSearchResult = (item, setSelectedModal, prefixes, path) => {
     if (item.disabled) {
         return [];
     }
@@ -1106,23 +1113,26 @@ const itemToSearchResult = (item, setSelectedModal, prefixes) => {
             if (subItem.type !== 'item') {
                 return null;
             }
-            return itemToSearchResult(subItem, setSelectedModal, [
-                ...prefixes,
-                getItemLabel(item),
-            ]);
+            return itemToSearchResult(subItem, setSelectedModal, [...prefixes, getItemLabel(item)], [...path, subItem.id]);
         })
             .flat(1)
             .filter(no_react_1.NoReactInternals.truthy);
     }
+    const label = getItemLabel(item);
+    const distinctPrefixes = prefixes.filter((prefix, index) => prefix !== prefixes[index + 1]);
+    if (distinctPrefixes.length > 0 &&
+        label.startsWith(`${distinctPrefixes.at(-1)}: `)) {
+        distinctPrefixes.pop();
+    }
     return [
         {
             type: 'menu-item',
-            id: item.id,
+            id: path.join(':'),
             onSelected: () => {
                 setSelectedModal(null);
                 item.onClick(item.id, null);
             },
-            title: [...prefixes, getItemLabel(item)].join(': '),
+            title: [...distinctPrefixes, label].join(': '),
         },
     ];
 };
@@ -1133,7 +1143,7 @@ const makeSearchResults = (actions, setSelectedModal) => {
             if (item.type !== 'item') {
                 return null;
             }
-            return itemToSearchResult(item, setSelectedModal, []);
+            return itemToSearchResult(item, setSelectedModal, [], [menu.id, item.id]);
         });
     })
         .flat(Infinity)

package/dist/icons/lut.d.ts

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

package/dist/icons/lut.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LutFileIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LutFileIcon = ({ color, ...props }) => (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: "M537.7 64C522.8 64 508.4 68.7 496.3 77.5L286.1 230.3C257.1 251.4 240 285 240 320.9L240 321C234.8 320.3 229.4 320 224 320C153.3 320 96 377.3 96 448C96 463.5 98.8 478.4 103.8 492.2C111.4 513 98 544 75.8 544L48 544C39.2 544 32 551.2 32 560C32 568.8 39.2 576 48 576L224 576C294.7 576 352 518.7 352 448C352 442.6 351.7 437.2 351 432L351.1 432C386.9 432 420.6 414.9 441.7 385.9L594.5 175.7C603.3 163.7 608 149.2 608 134.3C608 95.5 576.5 64 537.7 64zM342.7 400C329.7 367.9 304.1 342.3 272 329.3L272 320.9C272 295.3 284.2 271.3 304.9 256.2L515.1 103.3C521.7 98.5 529.5 96 537.6 96C558.8 96 575.9 113.2 575.9 134.3C575.9 142.4 573.3 150.3 568.6 156.8L415.8 367.1C400.7 387.8 376.7 400 351.1 400L342.7 400zM320 448C320 501 277 544 224 544L127.6 544C128.3 542.7 129 541.4 129.7 540.2C138 523.5 141.4 501.3 133.9 481.2C130.1 470.9 128 459.8 128 448.1C128 395.1 171 352.1 224 352.1C277 352.1 320 395.1 320 448.1z" }) }));
+exports.LutFileIcon = LutFileIcon;

package/dist/icons/sparkles.d.ts

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

package/dist/icons/sparkles.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SparklesIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SparklesIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { ...props, fill: color, viewBox: "0 0 640 640", children: jsx_runtime_1.jsx("path", { d: "M390.6 268.1 529.2 320 390.6 371.9C381.9 375.1 375.1 382 371.8 390.7L320 529.2 268.1 390.6C264.9 381.9 258 375.1 249.3 371.8L110.8 320 249.4 268.1C258.1 264.9 264.9 258 268.2 249.3L320 110.8 371.9 249.4C375.1 258.1 382 264.9 390.7 268.2ZM401.8 238.1 342.5 79.6C339 70.2 330 64 320 64S301 70.2 297.5 79.6L238.2 238.2 79.6 297.5C70.2 301 64 310 64 320S70.2 339 79.6 342.5L238.2 401.9 297.6 560.5C301 569.8 310 576 320 576S339 569.8 342.5 560.4L401.9 401.8 560.5 342.4C569.8 339 576 330 576 320S569.8 301 560.4 297.5L401.8 238.2Z" }) }));
+exports.SparklesIcon = SparklesIcon;

package/dist/state/modals.d.ts

@@ -127,6 +127,11 @@ export type TranscriptionModalState = {
     displayName: string;
     audioStreamIndex: number | null;
     requestInit: Omit<RequestInit, 'signal'> | null;
+    target: {
+        fileName: string;
+        nodePath: SequencePropsSubscriptionKey;
+        durationInFrames: number | null;
+    } | null;
 };
 export type VideoMattingModalState = {
     type: 'video-matting';
@@ -143,6 +148,7 @@ export type CanvasCaptureImport = {
 export type ElementInstallPlan = {
     readonly compositionFile: string;
     readonly expectedFileState: ElementInstallExpectedFileState;
+    readonly filePath: string;
 };
 export type ElementInstallModalState = {
     readonly type: 'element-install';
@@ -199,8 +205,17 @@ export type ModalState = {
 } | {
     type: 'fix-computed-value';
     prop: string;
-    context: string;
-    remotionInteractivitySkillAvailable: boolean;
+    location: {
+        source: string;
+        line: number;
+        column: number;
+    };
+} | {
+    type: 'generate-with-agent';
+    location: {
+        source: string;
+        line: number;
+    } | null;
 } | {
     type: 'quick-switcher';
     mode: QuickSwitcherMode;

package/dist/state/timeline-zoom.js

@@ -7,6 +7,7 @@ const react_dom_1 = require("react-dom");
 const imperative_state_1 = require("../components/Timeline/imperative-state");
 const timeline_refs_1 = require("../components/Timeline/timeline-refs");
 const timeline_scroll_logic_1 = require("../components/Timeline/timeline-scroll-logic");
+const TimelineViewport_1 = require("../components/Timeline/TimelineViewport");
 const ZoomPersistor_1 = require("../components/ZoomPersistor");
 const get_timeline_max_zoom_1 = require("../helpers/get-timeline-max-zoom");
 exports.TimelineZoomCtx = (0, react_1.createContext)({
@@ -48,6 +49,9 @@ const TimelineZoomContext = ({ children }) => {
         // The new scroll range exists now, so the browser will not clamp the offset
         // against the previous width.
         preserveTimelineCursor();
+        // A large zoom can move beyond the old horizontal render window. Commit
+        // the new window before the browser paints the new scroll position.
+        (0, react_dom_1.flushSync)(TimelineViewport_1.syncTimelineViewport);
     }, []);
     const value = (0, react_1.useMemo)(() => {
         return {

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.525",
+	"version": "4.0.527",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -20,8 +20,8 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"peerDependencies": {
-		"@remotion/video-matting": "4.0.525",
-		"@remotion/whisper-webgpu": "4.0.525",
+		"@remotion/video-matting": "4.0.527",
+		"@remotion/whisper-webgpu": "4.0.527",
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
@@ -35,32 +35,32 @@
 	},
 	"dependencies": {
 		"@jridgewell/trace-mapping": "0.3.31",
-		"@remotion/canvas": "4.0.525",
-		"@remotion/captions": "4.0.525",
-		"@remotion/media": "4.0.525",
-		"@remotion/media-utils": "4.0.525",
-		"@remotion/player": "4.0.525",
-		"@remotion/renderer": "4.0.525",
-		"@remotion/studio-codemods": "4.0.525",
-		"@remotion/studio-protocol": "4.0.525",
-		"@remotion/studio-shared": "4.0.525",
-		"@remotion/timeline-utils": "4.0.525",
-		"@remotion/web-renderer": "4.0.525",
-		"@remotion/zod-types": "4.0.525",
+		"@remotion/canvas": "4.0.527",
+		"@remotion/captions": "4.0.527",
+		"@remotion/media": "4.0.527",
+		"@remotion/media-utils": "4.0.527",
+		"@remotion/player": "4.0.527",
+		"@remotion/renderer": "4.0.527",
+		"@remotion/codemods": "4.0.527",
+		"@remotion/studio-protocol": "4.0.527",
+		"@remotion/studio-shared": "4.0.527",
+		"@remotion/timeline-utils": "4.0.527",
+		"@remotion/web-renderer": "4.0.527",
+		"@remotion/zod-types": "4.0.527",
 		"@tanstack/react-virtual": "3.14.9",
 		"mediabunny": "1.56.1",
 		"memfs": "3.4.3",
 		"open": "8.4.2",
 		"prismjs": "1.30.0",
-		"remotion": "4.0.525",
+		"remotion": "4.0.527",
 		"semver": "7.5.3",
 		"zod": "4.5.4"
 	},
 	"devDependencies": {
 		"@happy-dom/global-registrator": "14.5.1",
-		"@remotion/eslint-config-internal": "4.0.525",
-		"@remotion/video-matting": "4.0.525",
-		"@remotion/whisper-webgpu": "4.0.525",
+		"@remotion/eslint-config-internal": "4.0.527",
+		"@remotion/video-matting": "4.0.527",
+		"@remotion/whisper-webgpu": "4.0.527",
 		"@testing-library/react": "16.1.0",
 		"@types/prismjs": "1.26.4",
 		"@types/semver": "7.5.3",

package/dist/components/delete-jsx-node-api.d.ts

@@ -1,2 +0,0 @@
-import type { DeleteJsxNodeRequest, DeleteJsxNodeResponse } from '@remotion/studio-shared';
-export declare const deleteJsxNode: (request: DeleteJsxNodeRequest) => Promise<DeleteJsxNodeResponse>;

package/dist/error-overlay/remotion-overlay/CodeFrame.js

@@ -1,62 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CodeFrame = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const LazySyntaxHighlightedSource_1 = require("../../components/LazySyntaxHighlightedSource");
-const is_menu_item_1 = require("../../components/Menu/is-menu-item");
-const colors_1 = require("../../helpers/colors");
-const container = {
-    display: 'flex',
-    flexDirection: 'row',
-    width: '100%',
-};
-const frame = {
-    backgroundColor: colors_1.ERROR_CODE_FRAME_BACKGROUND,
-    borderRadius: 6,
-    marginBottom: 20,
-    marginLeft: 14,
-    marginRight: 14,
-    overflowY: 'auto',
-};
-const lineNumber = {
-    whiteSpace: 'pre',
-    paddingRight: 12,
-    color: 'inherit',
-    fontSize: 14,
-    lineHeight: 1.7,
-    width: 60,
-    flexShrink: 0,
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    fontFamily: 'monospace',
-};
-const CodeFrame = ({ source, lineNumberWidth }) => {
-    return (jsx_runtime_1.jsx("div", { style: frame, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx("div", { style: { minWidth: '100%', width: 'max-content' }, children: source.map((s, j) => {
-                return (jsx_runtime_1.jsxs("div", { style: {
-                        ...container,
-                        backgroundColor: s.highlight
-                            ? colors_1.SELECTED_BACKGROUND
-                            : colors_1.TRANSPARENT,
-                    }, children: [
-                        jsx_runtime_1.jsx("div", { style: {
-                                ...lineNumber,
-                                backgroundColor: s.highlight
-                                    ? colors_1.TRANSPARENT
-                                    : colors_1.ERROR_CODE_FRAME_LINE_BACKGROUND,
-                                color: s.highlight ? colors_1.WHITE : colors_1.WHITE_ALPHA_40,
-                            }, children: String(s.lineNumber).padStart(lineNumberWidth, ' ') }), jsx_runtime_1.jsx("code", { className: "language-tsx", style: {
-                                fontFamily: 'monospace',
-                                fontSize: 14,
-                                color: '#9cdcfe',
-                                whiteSpace: 'pre',
-                                tabSize: 2,
-                                backgroundColor: colors_1.TRANSPARENT,
-                                lineHeight: 1.7,
-                                paddingRight: 12,
-                                paddingLeft: 12,
-                            }, children: jsx_runtime_1.jsx(LazySyntaxHighlightedSource_1.LazySyntaxHighlightedSource, { source: s.content }) })
-                    ] }, j));
-            }) }) }));
-};
-exports.CodeFrame = CodeFrame;