@remotion/studio 4.0.525 → 4.0.527

package/dist/components/Modals.js

@@ -18,6 +18,7 @@ const EffectPickerModal_1 = require("./EffectPickerModal");
 const ElementInstallConfirmation_1 = require("./ElementInstallConfirmation");
 const ElementLibraryModal_1 = require("./ElementLibraryModal");
 const FixComputedValueModal_1 = require("./FixComputedValueModal");
+const GenerateWithAgentModal_1 = require("./GenerateWithAgentModal");
 const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
 const DeleteFolder_1 = require("./NewComposition/DeleteFolder");
 const DuplicateComposition_1 = require("./NewComposition/DuplicateComposition");
@@ -104,12 +105,8 @@ const Modals = ({ readOnlyStudio }) => {
             })();
         });
     }, [confirm, isBrowserStudio, previewServerState, subscribeToEvent]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack, canvasCapture: modalContextType.canvasCapture })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType &&
-                modalContextType.type === 'settings' &&
-                (!isBrowserStudio ||
-                    modalContextType.initialTab === 'packages' ||
-                    modalContextType.initialTab === 'shortcuts') ? (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)) : null, modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack, canvasCapture: modalContextType.canvasCapture })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'settings' ? (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)) : null, modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'transcribe' ? (jsx_runtime_1.jsx(TranscriptionModalWithOptionalWhisper_1.TranscriptionModalWithOptionalWhisper, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'video-matting' ? (jsx_runtime_1.jsx(VideoMattingModalWithOptionalPackage_1.VideoMattingModalWithOptionalPackage, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'asset-selection' ? (jsx_runtime_1.jsx(AssetSelectorModal_1.AssetSelectorModal, { readOnlyStudio: readOnlyStudio, state: modalContextType })) : null, modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'element-install' && (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { state: modalContextType })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'transcribe' ? (jsx_runtime_1.jsx(TranscriptionModalWithOptionalWhisper_1.TranscriptionModalWithOptionalWhisper, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'video-matting' ? (jsx_runtime_1.jsx(VideoMattingModalWithOptionalPackage_1.VideoMattingModalWithOptionalPackage, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'generate-with-agent' ? (jsx_runtime_1.jsx(GenerateWithAgentModal_1.GenerateWithAgentModal, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'asset-selection' ? (jsx_runtime_1.jsx(AssetSelectorModal_1.AssetSelectorModal, { readOnlyStudio: readOnlyStudio, state: modalContextType })) : null, modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'element-install' && (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { state: modalContextType })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/ModelsSettings.js

@@ -36,8 +36,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModelsSettings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const optional_package_dependencies_1 = require("../helpers/optional-package-dependencies");
+const settings_tab_availability_1 = require("../helpers/settings-tab-availability");
 const Button_1 = require("./Button");
 const styles_1 = require("./InspectorPanel/styles");
 const OptionalPackageModal_1 = require("./OptionalPackageModal");
@@ -104,7 +107,7 @@ const errorStyle = {
     lineHeight: 1.4,
     margin: '8px 0 0',
 };
-const OptionalModelPackage = ({ children, label, packageName, style }) => {
+const OptionalModelPackage = ({ canInstall, children, label, packageName, style }) => {
     const installed = (0, OptionalPackageModal_1.useOptionalPackageInstalled)(packageName);
     const [installState, setInstallState] = (0, react_1.useState)({
         type: 'idle',
@@ -122,12 +125,20 @@ const OptionalModelPackage = ({ children, label, packageName, style }) => {
             jsx_runtime_1.jsxs("div", { style: headingRow, children: [
                     jsx_runtime_1.jsxs("div", { children: [
                             jsx_runtime_1.jsx("h3", { style: title, children: label }), jsx_runtime_1.jsx("p", { style: packageNameStyle, children: packageName })
-                        ] }), installed ? null : (jsx_runtime_1.jsx(Button_1.Button, { disabled: installState.type === 'installing', onClick: install, size: "compact", style: installButton, children: installState.type === 'installing' ? 'Installing…' : 'Install' }))] }), installed ? (jsx_runtime_1.jsx(react_1.Suspense, { fallback: jsx_runtime_1.jsx("p", { style: missingText, children: "Loading models\u2026" }), children: children })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsxs("p", { style: missingDescription, children: ["Install the package and ", optional_package_dependencies_1.TRANSFORMERS_PACKAGE, " to download and manage its models."] }), installState.type === 'error' ? (jsx_runtime_1.jsx("p", { style: errorStyle, children: installState.message })) : null] }))] }));
+                        ] }), installed || !canInstall ? null : (jsx_runtime_1.jsx(Button_1.Button, { disabled: installState.type === 'installing', onClick: install, size: "compact", style: installButton, children: installState.type === 'installing' ? 'Installing…' : 'Install' }))] }), installed ? (jsx_runtime_1.jsx(react_1.Suspense, { fallback: jsx_runtime_1.jsx("p", { style: missingText, children: "Loading models\u2026" }), children: children })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("p", { style: missingDescription, children: canInstall
+                            ? `Install the package and ${optional_package_dependencies_1.TRANSFORMERS_PACKAGE} to download and manage its models.`
+                            : 'Reconnect the Studio server to install this package and manage its models.' }), installState.type === 'error' ? (jsx_runtime_1.jsx("p", { style: errorStyle, children: installState.message })) : null] }))] }));
 };
 const ModelsSettings = () => {
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const canInstall = (0, settings_tab_availability_1.canInstallPackagesInStudio)({
+        isBrowserStudio: (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null,
+        previewServerConnected: previewServerState.type === 'connected',
+        readOnlyStudio: window.remotion_isReadOnlyStudio,
+    });
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("p", { style: overview, children: "Models are downloaded automatically when needed. You can also manage the browser cache here." }), jsx_runtime_1.jsx(OptionalModelPackage, { label: "Transcription", packageName: whisper_webgpu_capability_1.WHISPER_WEBGPU_PACKAGE, style: section, children: jsx_runtime_1.jsx(LazyWhisperModels, { description: null, indent: false, visible: true }) }), jsx_runtime_1.jsx(OptionalModelPackage, { label: "Video matting", packageName: video_matting_capability_1.VIDEO_MATTING_PACKAGE, style: lastSection, children: jsx_runtime_1.jsx(LazyVideoMattingModels, { description: null, indent: false, visible: true }) })
+            jsx_runtime_1.jsx("p", { style: overview, children: "Models are downloaded automatically when needed. You can also manage the browser cache here." }), jsx_runtime_1.jsx(OptionalModelPackage, { canInstall: canInstall, label: "Transcription", packageName: whisper_webgpu_capability_1.WHISPER_WEBGPU_PACKAGE, style: section, children: jsx_runtime_1.jsx(LazyWhisperModels, { description: null, indent: false, visible: true }) }), jsx_runtime_1.jsx(OptionalModelPackage, { canInstall: canInstall, label: "Video matting", packageName: video_matting_capability_1.VIDEO_MATTING_PACKAGE, style: lastSection, children: jsx_runtime_1.jsx(LazyVideoMattingModels, { description: null, indent: false, visible: true }) })
         ] }));
 };
 exports.ModelsSettings = ModelsSettings;

package/dist/components/NewComposition/CancelButton.js

@@ -15,7 +15,7 @@ const style = {
     alignItems: 'center',
 };
 const CancelIcon = (props) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 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: "M507.3 155.3C513.5 149.1 513.5 138.9 507.3 132.7C501.1 126.5 490.9 126.5 484.7 132.7L320 297.4L155.3 132.7C149.1 126.5 138.9 126.5 132.7 132.7C126.5 138.9 126.5 149.1 132.7 155.3L297.4 320L132.7 484.7C126.5 490.9 126.5 501.1 132.7 507.3C138.9 513.5 149.1 513.5 155.3 507.3L320 342.6L484.7 507.3C490.9 513.5 501.1 513.5 507.3 507.3C513.5 501.1 513.5 490.9 507.3 484.7L342.6 320L507.3 155.3z" }) }));
 };
 exports.CancelIcon = CancelIcon;
 const CancelButton = ({ onPress, ...props }) => {

package/dist/components/Notifications/NotificationCenter.d.ts

@@ -4,6 +4,5 @@ type CreatedNotification = {
     replaceContent: (newContent: React.ReactNode, durationInMs: number | null) => void;
 };
 export declare const showNotification: (content: React.ReactNode, durationInMs: number | null) => CreatedNotification;
-export declare const showCannotAddSequenceDropNotification: () => void;
 export declare const NotificationCenter: React.FC;
 export {};

package/dist/components/Notifications/NotificationCenter.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NotificationCenter = exports.showCannotAddSequenceDropNotification = exports.showNotification = void 0;
+exports.NotificationCenter = exports.showNotification = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = __importDefault(require("react-dom"));
@@ -32,27 +32,6 @@ const showNotification = (content, durationInMs) => {
     });
 };
 exports.showNotification = showNotification;
-const CANNOT_ADD_SEQUENCE_DROP_NOTIFICATION = 'Cannot insert this item: This composition component cannot accept a new <Sequence>.';
-const CANNOT_ADD_SEQUENCE_NOTIFICATION_DURATION = 3000;
-let cannotAddSequenceNotification = null;
-let cannotAddSequenceDismissTimeout = null;
-const showCannotAddSequenceDropNotification = () => {
-    if (cannotAddSequenceNotification === null) {
-        cannotAddSequenceNotification = (0, exports.showNotification)(CANNOT_ADD_SEQUENCE_DROP_NOTIFICATION, null);
-    }
-    else {
-        cannotAddSequenceNotification.replaceContent(CANNOT_ADD_SEQUENCE_DROP_NOTIFICATION, null);
-    }
-    if (cannotAddSequenceDismissTimeout !== null) {
-        clearTimeout(cannotAddSequenceDismissTimeout);
-    }
-    cannotAddSequenceDismissTimeout = setTimeout(() => {
-        cannotAddSequenceNotification === null || cannotAddSequenceNotification === void 0 ? void 0 : cannotAddSequenceNotification.dismiss();
-        cannotAddSequenceNotification = null;
-        cannotAddSequenceDismissTimeout = null;
-    }, CANNOT_ADD_SEQUENCE_NOTIFICATION_DURATION);
-};
-exports.showCannotAddSequenceDropNotification = showCannotAddSequenceDropNotification;
 const NotificationCenter = () => {
     const [notifications, setNotifications] = (0, react_1.useState)([]);
     const { currentZIndex } = (0, z_index_1.useZIndex)();

package/dist/components/Preview.js

@@ -47,6 +47,9 @@ const PIXEL_GRID_MIN_SCALE = 4;
 const containerStyle = (options) => {
     return {
         transform: `scale(${options.scale})`,
+        // Keep the scaled composition on its own layer so the checkerboard does
+        // not bleed through its edges at fractional preview scales.
+        willChange: 'transform',
         marginLeft: options.xCorrection,
         marginTop: options.yCorrection,
         width: options.width,

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js

@@ -29,6 +29,7 @@ const quickSwitcherTrigger = {
     flex: 1,
     appearance: 'none',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     ...(0, hoverable_1.hoverableStyle)({
         idleBackground: colors_1.WHITE_ALPHA_06,
         hoverBackground: colors_1.WHITE_ALPHA_06,

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -49,6 +49,7 @@ const modeItem = {
     fontSize: 13,
     cursor: 'pointer',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const modeInactive = {
     ...modeItem,

package/dist/components/QuickSwitcher/QuickSwitcherResult.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.QuickSwitcherResult = exports.isQuickSwitcherResultSelectable = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const noop_1 = require("../../helpers/noop");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
@@ -17,7 +16,7 @@ const composition_menu_items_1 = require("../composition-menu-items");
 const ContextMenu_1 = require("../ContextMenu");
 const layout_1 = require("../layout");
 const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
-const use_default_editor_info_1 = require("../use-default-editor-info");
+const use_open_in_menu_apps_1 = require("../use-open-in-menu-apps");
 const shared_1 = require("./shared");
 const isQuickSwitcherResultSelectable = (result) => {
     return result.type !== 'folder';
@@ -67,9 +66,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
     const onSelected = result.type === 'folder' ? null : result.onSelected;
     const composition = result.type === 'composition' ? result.composition : null;
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
-        .previewServerState.type;
-    const { defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(connectionStatus === 'connected');
+    const { connectionStatus, openInApps } = (0, use_open_in_menu_apps_1.useOpenInMenuApps)();
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = composition === null || composition === void 0 ? void 0 : composition.stack) !== null && _a !== void 0 ? _a : null);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
         if (composition === null) {
@@ -79,9 +76,8 @@ const QuickSwitcherResult = ({ result, selected }) => {
             closeMenu: noop_1.noop,
             composition,
             connectionStatus,
-            editorId: defaultEditorId,
-            editorName: defaultEditorName,
             includeCompositionManagementItems: true,
+            openInApps,
             resolvedLocation,
             setSelectedModal,
             readOnlyStudio: window.remotion_isReadOnlyStudio,
@@ -89,8 +85,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
     }, [
         composition,
         connectionStatus,
-        defaultEditorId,
-        defaultEditorName,
+        openInApps,
         resolvedLocation,
         setSelectedModal,
     ]);

package/dist/components/RadioButton.js

@@ -29,6 +29,7 @@ const row = {
     padding: '4px 8px',
     textAlign: 'left',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     width: 'calc(100% + 16px)',
 };
 const circle = {

package/dist/components/RenderModal/DataEditor.js

@@ -274,6 +274,9 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, prop
     if (!unresolvedComposition.defaultProps) {
         return jsx_runtime_1.jsx(SchemaErrorMessages_1.NoDefaultProps, { mode: schemaErrorMode });
     }
+    // <Composition> normalizes omitted defaultProps to an empty object.
+    // Avoid rendering field editors with undefined values in that case.
+    const emptyDefaultPropsAreInvalid = Object.keys(defaultProps).length === 0 && !zodValidationResult.success;
     const shouldRenderControlRow = !hideModeControls || (!hideWarningButton && warnings.length > 0);
     const shouldRenderWarningMessages = showWarning && warnings.length > 0;
     const compactLayout = layout === 'inspector';
@@ -284,6 +287,6 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, prop
                                 jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: warning.message, align: "flex-start", type: "warning", size: compactLayout ? 'compact' : 'default', action: warning.resolveLink ? (jsx_runtime_1.jsx("a", { href: warning.resolveLink, target: "_blank", rel: "noopener noreferrer", style: compactLayout
                                             ? compactResolveLinkStyle
                                             : resolveLinkStyle, children: "Resolve" })) : null })] }, warning.id)))
-                        : null] })) : null, mode === 'schema' ? (jsx_runtime_1.jsx(SchemaEditor_1.SchemaEditor, { value: defaultProps, setValue: setDefaultProps, schema: schema, scrollableContainer: !compactLayout, contentInset: compactLayout ? InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING : undefined, errorMode: schemaErrorMode })) : (jsx_runtime_1.jsx(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}, setValue: jsonEditorSetValue, onSave: onSave, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema, compositionId: unresolvedComposition.id, layout: layout }))] }));
+                        : null] })) : null, mode === 'schema' ? (emptyDefaultPropsAreInvalid ? (jsx_runtime_1.jsx(SchemaErrorMessages_1.InvalidDefaultProps, { zodValidationResult: zodValidationResult })) : (jsx_runtime_1.jsx(SchemaEditor_1.SchemaEditor, { value: defaultProps, setValue: setDefaultProps, schema: schema, scrollableContainer: !compactLayout, contentInset: compactLayout ? InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING : undefined, errorMode: schemaErrorMode }))) : (jsx_runtime_1.jsx(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}, setValue: jsonEditorSetValue, onSave: onSave, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema, compositionId: unresolvedComposition.id, layout: layout }))] }));
 };
 exports.DataEditor = DataEditor;

package/dist/components/RenderModal/SchemaEditor/scroll-to-default-props-path.d.ts

@@ -2,3 +2,4 @@ import React from 'react';
 export declare const DEFAULT_PROPS_PATH_CLASSNAME = "__remotion-default-props-editor-label";
 export declare const DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME = "__remotion-default-props-editor-label-active";
 export declare const defaultPropsEditorScrollableAreaRef: React.RefObject<HTMLDivElement | null>;
+export declare const expandDefaultPropsEditorRef: React.RefObject<((onExpanded: () => void) => void) | null>;

package/dist/components/RenderModal/SchemaEditor/scroll-to-default-props-path.js

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultPropsEditorScrollableAreaRef = exports.DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME = exports.DEFAULT_PROPS_PATH_CLASSNAME = void 0;
+exports.expandDefaultPropsEditorRef = exports.defaultPropsEditorScrollableAreaRef = exports.DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME = exports.DEFAULT_PROPS_PATH_CLASSNAME = void 0;
 const react_1 = __importDefault(require("react"));
 exports.DEFAULT_PROPS_PATH_CLASSNAME = '__remotion-default-props-editor-label';
 exports.DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME = '__remotion-default-props-editor-label-active';
 exports.defaultPropsEditorScrollableAreaRef = react_1.default.createRef();
+exports.expandDefaultPropsEditorRef = react_1.default.createRef();

package/dist/components/RenderModal/WebRenderModal.js

@@ -7,6 +7,8 @@ const web_renderer_1 = require("@remotion/web-renderer");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
+const client_id_1 = require("../../helpers/client-id");
+const settings_tab_availability_1 = require("../../helpers/settings-tab-availability");
 const audio_1 = require("../../icons/audio");
 const certificate_1 = require("../../icons/certificate");
 const file_1 = require("../../icons/file");
@@ -86,6 +88,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const { addClientStillJob, addClientVideoJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     if (!context) {
         throw new Error('Should not be able to render without resolving comp first');
     }
@@ -107,6 +110,11 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
             : 'still');
     const [tab, setTab] = (0, react_1.useState)('general');
     const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
+    const canEditConfig = (0, settings_tab_availability_1.canEditStudioConfig)({
+        isBrowserStudio,
+        previewServerConnected: previewServerState.type === 'connected',
+        readOnlyStudio: window.remotion_isReadOnlyStudio,
+    });
     const [imageFormat, setImageFormat] = (0, react_1.useState)(() => initialStillImageFormat !== null && initialStillImageFormat !== void 0 ? initialStillImageFormat : 'png');
     const [frame, setFrame] = (0, react_1.useState)(() => initialFrame);
     const [logLevel, setLogLevel] = (0, react_1.useState)(() => initialLogLevel);
@@ -420,11 +428,11 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                     jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsxs(Button_1.Button, { autoFocus: true, onClick: onAddToQueue, style: render_modals_1.buttonStyle, disabled: !outnameValidation.valid, children: ["Render ", renderMode, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
                         ] })
                 ] }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
-                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { color: color, style: render_modals_1.icon }) })), children: "General" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(input_props_1.InputPropsIcon, { color: color, style: render_modals_1.icon }) })), children: "Input Props" }), renderMode !== 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: render_modals_1.icon }) })), children: "Picture" })) : null, renderMode === 'video' || renderMode === 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { color: color, style: render_modals_1.icon }) })), children: "Audio" })) : null, jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Other" }), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: false, onClick: () => setSelectedModal({
+                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { color: color, style: render_modals_1.icon }) })), children: "General" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(input_props_1.InputPropsIcon, { color: color, style: render_modals_1.icon }) })), children: "Input Props" }), renderMode !== 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: render_modals_1.icon }) })), children: "Picture" })) : null, renderMode === 'video' || renderMode === 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { color: color, style: render_modals_1.icon }) })), children: "Audio" })) : null, jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Other" }), canEditConfig ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: false, onClick: () => setSelectedModal({
                                     type: 'settings',
                                     initialTab: 'license',
                                     initialPublicLicenseKey: publicLicenseKey,
-                                }), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { color: color, style: render_modals_1.icon }) })), children: "License" }))] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
+                                }), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })) : null] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
                                 canUpdate: false,
                                 reason: 'render dialogue',
                                 determined: false,

package/dist/components/RenderQueue/CaptionQueueItem.js

@@ -68,7 +68,7 @@ const CaptionQueueItem = ({ job, selected }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { removeCaptionJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
-    const isHoverable = job.status === 'done';
+    const isHoverable = job.status === 'done' && job.target === null;
     const containerStyle = (0, react_1.useMemo)(() => {
         return {
             ...container,
@@ -95,6 +95,9 @@ const CaptionQueueItem = ({ job, selected }) => {
         if (job.status !== 'done') {
             return;
         }
+        if (job.target !== null) {
+            return;
+        }
         selectAsset(job.outName);
         (0, url_state_1.pushUrl)(`/assets/${job.outName}`);
     }, [job, selectAsset]);
@@ -120,7 +123,7 @@ const CaptionQueueItem = ({ job, selected }) => {
         if (job.status === 'failed') {
             return job.error.message;
         }
-        return job.outName;
+        return job.target === null ? job.outName : 'Captions added to composition';
     }, [job]);
     return (jsx_runtime_1.jsxs(layout_1.Row, { "data-render-queue-item": job.id, style: containerStyle, align: "center", onClick: onClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, className: selected ? item_style_1.RENDER_QUEUE_ITEM_SELECTED_CLASSNAME : undefined, children: [
             jsx_runtime_1.jsx(CaptionJobStatus, { job: job }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs("div", { style: right, children: [

package/dist/components/RenderQueue/CaptionQueueProcessor.js

@@ -4,6 +4,9 @@ exports.CaptionQueueProcessor = void 0;
 const whisper_webgpu_1 = require("@remotion/whisper-webgpu");
 const react_1 = require("react");
 const write_static_file_1 = require("../../api/write-static-file");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
+const install_required_package_1 = require("../../helpers/install-required-package");
+const call_api_1 = require("../call-api");
 const resample_media_to_16_khz_1 = require("../Transcription/resample-media-to-16-khz");
 const context_1 = require("./context");
 const load_model_for_job_1 = require("./load-model-for-job");
@@ -73,14 +76,38 @@ const CaptionQueueProcessor = () => {
             const { captions } = (0, whisper_webgpu_1.toCaptions)({
                 whisperWebGpuOutput: transcription,
             });
-            updateCaptionJobProgress(job.id, {
-                message: `Saving ${job.outName}...`,
-                value: 0.95,
-            });
-            await (0, write_static_file_1.writeStaticFile)({
-                contents: JSON.stringify(captions, null, 2),
-                filePath: job.outName,
-            });
+            if (job.target === null) {
+                updateCaptionJobProgress(job.id, {
+                    message: `Saving ${job.outName}...`,
+                    value: 0.95,
+                });
+                await (0, write_static_file_1.writeStaticFile)({
+                    contents: JSON.stringify(captions, null, 2),
+                    filePath: job.outName,
+                });
+            }
+            else {
+                updateCaptionJobProgress(job.id, {
+                    message: 'Adding Basic captions...',
+                    value: 0.95,
+                });
+                await (0, install_required_package_1.installRequiredPackages)([
+                    { name: '@remotion/captions', version: null },
+                ]);
+                const request = {
+                    fileName: job.target.fileName,
+                    nodePath: job.target.nodePath.nodePath,
+                    durationInFrames: job.target.durationInFrames,
+                    captions,
+                };
+                const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+                const response = browserStudioOperations
+                    ? await browserStudioOperations.insertBasicCaptions(request)
+                    : await (0, call_api_1.callApi)('/api/insert-basic-captions', request);
+                if (!response.success) {
+                    throw new Error(response.reason);
+                }
+            }
             captionCount = captions.length;
         }
         catch (error) {

package/dist/components/RenderQueue/VideoMattingQueueItem.js

@@ -71,6 +71,7 @@ const VideoMattingQueueItem = ({ job, selected }) => {
             selected,
         }),
         userSelect: 'none',
+        WebkitUserSelect: 'none',
     }), [done, hovered, selected]);
     const messages = job.status === 'idle'
         ? ['Queued for video matting']

package/dist/components/RenderQueue/caption-job-types.d.ts

@@ -1,4 +1,5 @@
 import type { WhisperWebGpuModel, WhisperWebGpuTask } from '@remotion/whisper-webgpu';
+import type { SequencePropsSubscriptionKey } from 'remotion';
 export type CaptionJobProgress = {
     message: string;
     value: number;
@@ -24,6 +25,11 @@ export type AddCaptionJobParams = {
     audioStreamIndex: number | null;
     requestInit: Omit<RequestInit, 'signal'> | null;
     outName: string;
+    target: {
+        fileName: string;
+        nodePath: SequencePropsSubscriptionKey;
+        durationInFrames: number | null;
+    } | null;
     model: WhisperWebGpuModel;
     language: string | null;
     task: WhisperWebGpuTask;

package/dist/components/RenderQueue/index.js

@@ -108,6 +108,7 @@ const RenderQueue = () => {
             for (let i = 0; i < allJobs.length; i++) {
                 const job = allJobs[i];
                 if ((0, caption_job_types_1.isCaptionJob)(job) &&
+                    job.target === null &&
                     job.status === 'done' &&
                     canvasContent.asset === job.outName) {
                     return i;

package/dist/components/RendersTab.js

@@ -14,6 +14,8 @@ const row = {
     color: 'inherit',
     alignItems: 'center',
     flex: 1,
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const badge = {
     height: 16,
@@ -23,6 +25,8 @@ const badge = {
     display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const RendersTab = ({ selected, onClick }) => {
     const { jobs, captionJobs } = (0, react_1.useContext)(context_1.RenderQueueContext);

package/dist/components/SelectedOutlineElement.js

@@ -140,6 +140,8 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         selectComposition,
     ]);
     const onContextMenuOpen = react_1.default.useCallback(async () => {
+        var _a;
+        var _b;
         const contextMenuTarget = getTarget();
         if (contextMenuTarget === undefined) {
             return false;
@@ -170,10 +172,14 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
             previewServerState.type === 'connected';
         const canCrop = contextMenuTarget.canCrop && !sourceEditDisabled;
         const canRotate = !sourceEditDisabled;
+        const outlineElement = (_b = (_a = contextMenuTarget.sequence.refForOutline) === null || _a === void 0 ? void 0 : _a.current) !== null && _b !== void 0 ? _b : null;
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
             assetLinkInfo,
             canOpenInEditor,
             codingAgentInfo,
+            copyImageElement: contextMenuTarget.sequence.type === 'image'
+                ? outlineElement
+                : (0, get_sequence_context_menu_items_1.findCopyableFrameElement)(outlineElement),
             deleteDisabled: sourceEditDisabled,
             disableInteractivityDisabled,
             duplicateDisabled: sourceEditDisabled || isProgrammaticallyDuplicated,

package/dist/components/SelectedOutlineSnapIndicators.d.ts

@@ -1,6 +1,12 @@
 import React from 'react';
 import { type SelectedOutlineSnapPoint } from './selected-outline-snap';
 export type UpdateSelectedOutlineSnapPoints = (snapPoints: readonly SelectedOutlineSnapPoint[]) => void;
+export declare const SelectedOutlineSnapLines: React.FC<{
+    readonly compositionHeight: number;
+    readonly compositionWidth: number;
+    readonly scale: number;
+    readonly snapPoints: readonly SelectedOutlineSnapPoint[];
+}>;
 export declare const SelectedOutlineSnapIndicators: React.FC<{
     readonly compositionHeight: number;
     readonly compositionWidth: number;

package/dist/components/SelectedOutlineSnapIndicators.js

@@ -1,9 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineSnapIndicators = void 0;
+exports.SelectedOutlineSnapIndicators = exports.SelectedOutlineSnapLines = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const selected_outline_snap_1 = require("./selected-outline-snap");
+const SelectedOutlineSnapLines = ({ compositionHeight, compositionWidth, scale, snapPoints }) => {
+    if (snapPoints.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("g", { pointerEvents: "none", children: snapPoints.map((snapPoint) => {
+            if (snapPoint.target.axis === 'x') {
+                const x = snapPoint.target.position * scale;
+                return (jsx_runtime_1.jsx("line", { x1: x, x2: x, y1: 0, y2: compositionHeight * scale, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
+            }
+            const y = snapPoint.target.position * scale;
+            return (jsx_runtime_1.jsx("line", { x1: 0, x2: compositionWidth * scale, y1: y, y2: y, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
+        }) }));
+};
+exports.SelectedOutlineSnapLines = SelectedOutlineSnapLines;
 const SelectedOutlineSnapIndicators = ({ compositionHeight, compositionWidth, scale, updateSnapPointsRef }) => {
     const [activeSnapPoints, setActiveSnapPoints] = (0, react_1.useState)([]);
     (0, react_1.useLayoutEffect)(() => {
@@ -14,16 +28,6 @@ const SelectedOutlineSnapIndicators = ({ compositionHeight, compositionWidth, sc
             }
         };
     }, [updateSnapPointsRef]);
-    if (activeSnapPoints.length === 0) {
-        return null;
-    }
-    return (jsx_runtime_1.jsx("g", { pointerEvents: "none", children: activeSnapPoints.map((snapPoint) => {
-            if (snapPoint.target.axis === 'x') {
-                const x = snapPoint.target.position * scale;
-                return (jsx_runtime_1.jsx("line", { x1: x, x2: x, y1: 0, y2: compositionHeight * scale, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
-            }
-            const y = snapPoint.target.position * scale;
-            return (jsx_runtime_1.jsx("line", { x1: 0, x2: compositionWidth * scale, y1: y, y2: y, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
-        }) }));
+    return (jsx_runtime_1.jsx(exports.SelectedOutlineSnapLines, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, scale: scale, snapPoints: activeSnapPoints }));
 };
 exports.SelectedOutlineSnapIndicators = SelectedOutlineSnapIndicators;

package/dist/components/SequencePropsSubscriptionProvider.d.ts

@@ -1,4 +1,7 @@
 import type { OverrideIdToNodePaths, TSequence } from 'remotion';
+export declare const OverrideIdToNodePathMappingsRefContext: import("react").Context<{
+    readonly current: OverrideIdToNodePaths;
+}>;
 export declare const getReadOnlyOverrideIdToNodePathMappings: (sequences: readonly TSequence[]) => OverrideIdToNodePaths;
 export declare const SequencePropsSubscriptionProvider: React.FC<{
     readonly children: React.ReactNode;