@remotion/studio 4.0.525 → 4.0.526

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");
@@ -243,8 +243,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 +264,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 +335,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 +344,6 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         leftItem: null,
                         subMenu: null,
                         quickSwitcherLabel: 'Settings...',
-                        disabled: (browserStudioOperations === null && readOnlyStudio) ||
-                            type !== 'connected',
                     },
                     {
                         id: 'acknowledgements',
@@ -356,13 +359,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',
@@ -780,9 +783,8 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         closeMenu,
                         composition: currentComposition,
                         connectionStatus: type,
-                        editorId: defaultEditorId,
-                        editorName: defaultEditorName,
                         includeCompositionManagementItems: true,
+                        openInApps,
                         resolvedLocation: resolvedCompositionLocation,
                         setSelectedModal,
                         readOnlyStudio,
@@ -834,7 +836,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 +1059,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         mobileLayout,
         defaultEditorId,
         defaultEditorName,
+        openInApps,
         keyboardShortcutsDisabled,
         studioAskAIEnabled,
         askAIShortcut,
@@ -1072,6 +1075,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         showKeyboardShortcutsShortcut,
         toggleSnappingShortcut,
         browserStudioOperations,
+        studioConfigEditable,
         size.size,
         setSize,
         setEditorZoomGestures,

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

@@ -143,6 +143,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 +200,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/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.526",
 	"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.526",
+		"@remotion/whisper-webgpu": "4.0.526",
 		"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.526",
+		"@remotion/captions": "4.0.526",
+		"@remotion/media": "4.0.526",
+		"@remotion/media-utils": "4.0.526",
+		"@remotion/player": "4.0.526",
+		"@remotion/renderer": "4.0.526",
+		"@remotion/studio-codemods": "4.0.526",
+		"@remotion/studio-protocol": "4.0.526",
+		"@remotion/studio-shared": "4.0.526",
+		"@remotion/timeline-utils": "4.0.526",
+		"@remotion/web-renderer": "4.0.526",
+		"@remotion/zod-types": "4.0.526",
 		"@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.526",
 		"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.526",
+		"@remotion/video-matting": "4.0.526",
+		"@remotion/whisper-webgpu": "4.0.526",
 		"@testing-library/react": "16.1.0",
 		"@types/prismjs": "1.26.4",
 		"@types/semver": "7.5.3",

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;