@remotion/studio 4.0.513 → 4.0.514

package/dist/Studio.js

@@ -12,13 +12,14 @@ const use_static_files_1 = require("./components/use-static-files");
 const FastRefreshProvider_1 = require("./FastRefreshProvider");
 const inject_css_1 = require("./helpers/inject-css");
 const ResolveCompositionConfigInStudio_1 = require("./ResolveCompositionConfigInStudio");
+const composition_list_1 = require("./state/composition-list");
 const getServerDisconnectedDomElement = () => {
     return document.getElementById('server-disconnected-overlay');
 };
 const StudioInner = ({ rootComponent, readOnly }) => {
     var _a, _b, _c;
     return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', previewSampleRate: window.remotion_previewSampleRate, _experimentalKeepAudioContextAlive: (_c = window.remotion_experimentalKeepAudioContextAlive) !== null && _c !== void 0 ? _c : false, children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { children: [
-                            jsx_runtime_1.jsx(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
+                            jsx_runtime_1.jsx(composition_list_1.CompositionListProvider, { children: jsx_runtime_1.jsx(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }) }), readOnly
                                 ? null
                                 : (0, react_dom_1.createPortal)(jsx_runtime_1.jsx(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }) }) }) }));
 };

package/dist/components/AskAiModal.js

@@ -63,7 +63,7 @@ const AskAiModal = () => {
     if (state === 'never-opened') {
         return null;
     }
-    return (jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: { display: state === 'visible' ? 'block' : 'none' }, children: jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { noZIndex: state === 'hidden', onOutsideClick: onQuit, onEscape: onQuit, children: [
+    return (jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteFillElement, { style: { display: state === 'visible' ? 'block' : 'none' }, children: jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { noZIndex: state === 'hidden', onOutsideClick: onQuit, onEscape: onQuit, children: [
                 jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Ask AI", onClose: onQuit }), jsx_runtime_1.jsx("iframe", { ref: iframe, frameBorder: 0, style: container, src: "https://www.remotion.dev/ai-embed", allow: "clipboard-read; clipboard-write" })
             ] }) }));
 };

package/dist/components/AssetSelector.js

@@ -75,6 +75,8 @@ const label = {
 };
 const baseList = {
     overflowY: 'auto',
+    paddingTop: 4,
+    paddingBottom: 4,
 };
 const AssetSelector = ({ readOnlyStudio }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();

package/dist/components/AssetSelectorItem.js

@@ -80,11 +80,10 @@ const itemStyle = {
     alignItems: 'center',
     marginBottom: 1,
     marginLeft: 4,
-    marginRight: 4,
     appearance: 'none',
     border: 'none',
     borderRadius: 4,
-    width: 'calc(100% - 8px)',
+    width: 'calc(100% - 4px)',
     textAlign: 'left',
     backgroundColor: colors_1.BACKGROUND,
     height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,

package/dist/components/AudioWaveform.d.ts

@@ -6,8 +6,11 @@ export declare const AudioWaveform: React.NamedExoticComponent<{
     readonly visualizationWidth: number;
     readonly startFrom: number;
     readonly durationInFrames: number;
+    readonly displayOffsetInFrames: number;
+    readonly displayDurationInFrames: number;
     readonly volume: string | number;
     readonly doesVolumeChange: boolean;
+    readonly muted: boolean;
     readonly playbackRate: number;
     readonly loopDisplay: LoopDisplay | undefined;
 }>;

package/dist/components/AudioWaveform.js

@@ -74,6 +74,8 @@ const waveformCanvasStyle = {
 };
 const volumeCanvasStyle = {
     position: 'absolute',
+    width: '100%',
+    height: '100%',
 };
 const parseVolume = (volume) => {
     if (typeof volume === 'number') {
@@ -81,35 +83,7 @@ const parseVolume = (volume) => {
     }
     return volume.split(',').map((v) => Number(v));
 };
-const drawLoopedWaveform = ({ canvas, peaks, volume, visualizationWidth, loopWidth, }) => {
-    const h = canvas.height;
-    const w = Math.ceil(visualizationWidth);
-    const targetCanvas = document.createElement('canvas');
-    targetCanvas.width = Math.max(1, Math.ceil(loopWidth));
-    targetCanvas.height = h;
-    (0, timeline_utils_1.drawBars)({
-        canvas: targetCanvas,
-        peaks,
-        color: colors_1.WHITE_ALPHA_60,
-        volume,
-        width: targetCanvas.width,
-    });
-    canvas.width = w;
-    canvas.height = h;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) {
-        throw new Error('Failed to get canvas context');
-    }
-    const pattern = ctx.createPattern(targetCanvas, 'repeat-x');
-    if (!pattern) {
-        return;
-    }
-    pattern.setTransform(new DOMMatrix().scaleSelf(loopWidth / targetCanvas.width, 1));
-    ctx.clearRect(0, 0, w, h);
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, w, h);
-};
-const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, visualizationWidth, volume, doesVolumeChange, playbackRate, loopDisplay, }) => {
+const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayOffsetInFrames, displayDurationInFrames, visualizationWidth, volume, doesVolumeChange, muted, playbackRate, loopDisplay, }) => {
     const [peaks, setPeaks] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
     const [waveformCanvasKey, setWaveformCanvasKey] = (0, react_1.useState)(0);
@@ -125,6 +99,23 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, visualiz
     const latestRequestId = (0, react_1.useRef)(0);
     const shouldRenderVolumeOverlay = doesVolumeChange && typeof volume === 'string';
     const parsedVolume = (0, react_1.useMemo)(() => parseVolume(volume), [volume]);
+    const visibleVolume = (0, react_1.useMemo)(() => {
+        if (muted) {
+            return 0;
+        }
+        return (0, timeline_utils_1.getVisibleWaveformVolume)({
+            displayDurationInFrames,
+            displayOffsetInFrames,
+            loopDisplay,
+            volume: parsedVolume,
+        });
+    }, [
+        displayDurationInFrames,
+        displayOffsetInFrames,
+        loopDisplay,
+        muted,
+        parsedVolume,
+    ]);
     (0, react_1.useEffect)(() => {
         if (canUseWorkerPath) {
             return;
@@ -203,17 +194,20 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, visualiz
         if (canUseWorkerPath || !peaks) {
             return null;
         }
-        return (0, timeline_utils_1.sliceWaveformPeaks)({
-            durationInFrames: (0, timeline_utils_1.shouldTileLoopDisplay)(loopDisplay)
-                ? loopDisplay.durationInFrames
-                : durationInFrames,
+        return (0, timeline_utils_1.sliceVisibleWaveformPeaks)({
+            displayDurationInFrames,
+            displayOffsetInFrames,
+            durationInFrames,
             fps: vidConf.fps,
+            loopDisplay,
             peaks,
             playbackRate,
             startFrom,
         });
     }, [
         canUseWorkerPath,
+        displayDurationInFrames,
+        displayOffsetInFrames,
         durationInFrames,
         loopDisplay,
         peaks,
@@ -226,8 +220,9 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, visualiz
         if (!canvasElement) {
             return;
         }
-        const h = height;
-        const w = Math.ceil(visualizationWidth);
+        const pixelRatio = window.devicePixelRatio;
+        const h = Math.ceil(height * pixelRatio);
+        const w = Math.ceil(visualizationWidth * pixelRatio);
         if (canUseWorkerPath) {
             const worker = waveformWorker.current;
             if (!worker || !hasTransferredCanvas.current) {
@@ -241,9 +236,11 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, visualiz
                 src,
                 width: w,
                 height: h,
-                volume: parsedVolume,
+                volume: visibleVolume,
                 startFrom,
                 durationInFrames,
+                displayOffsetInFrames,
+                displayDurationInFrames,
                 fps: vidConf.fps,
                 playbackRate,
                 loopDisplay,
@@ -253,39 +250,27 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, visualiz
         }
         canvasElement.width = w;
         canvasElement.height = h;
-        if ((0, timeline_utils_1.shouldTileLoopDisplay)(loopDisplay)) {
-            drawLoopedWaveform({
-                canvas: canvasElement,
-                peaks: portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS,
-                volume: parsedVolume,
-                visualizationWidth,
-                loopWidth: (0, timeline_utils_1.getLoopDisplayWidth)({
-                    visualizationWidth,
-                    loopDisplay,
-                }),
-            });
-        }
-        else {
-            (0, timeline_utils_1.drawBars)({
-                canvas: canvasElement,
-                peaks: portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS,
-                color: colors_1.WHITE_ALPHA_60,
-                volume: parsedVolume,
-                width: w,
-            });
-        }
+        (0, timeline_utils_1.drawBars)({
+            canvas: canvasElement,
+            peaks: portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS,
+            color: colors_1.WHITE_ALPHA_60,
+            volume: visibleVolume,
+            width: w,
+        });
     }, [
         canUseWorkerPath,
+        displayDurationInFrames,
+        displayOffsetInFrames,
         durationInFrames,
         height,
         loopDisplay,
         playbackRate,
-        parsedVolume,
         portionPeaks,
         src,
         startFrom,
         vidConf.fps,
         visualizationWidth,
+        visibleVolume,
         waveformCanvasKey,
     ]);
     (0, react_1.useEffect)(() => {
@@ -296,24 +281,26 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, visualiz
         if (!volumeCanvasElement) {
             return;
         }
-        const h = height;
+        const pixelRatio = window.devicePixelRatio;
+        const h = Math.ceil(height * pixelRatio);
+        const w = Math.ceil(visualizationWidth * pixelRatio);
         const context = volumeCanvasElement.getContext('2d');
         if (!context) {
             return;
         }
-        volumeCanvasElement.width = Math.ceil(visualizationWidth);
+        volumeCanvasElement.width = w;
         volumeCanvasElement.height = h;
-        context.clearRect(0, 0, visualizationWidth, h);
-        if (!Array.isArray(parsedVolume)) {
+        context.clearRect(0, 0, w, h);
+        if (!Array.isArray(visibleVolume)) {
             return;
         }
         context.beginPath();
         context.moveTo(0, h);
-        parsedVolume.forEach((v, index) => {
-            const x = parsedVolume.length <= 1
+        visibleVolume.forEach((v, index) => {
+            const x = visibleVolume.length <= 1
                 ? 0
-                : (index / (parsedVolume.length - 1)) * visualizationWidth;
-            const y = (1 - v) * (h - timeline_layout_1.TIMELINE_BORDER * 2) + 1;
+                : (index / (visibleVolume.length - 1)) * w;
+            const y = (1 - v) * (h - timeline_layout_1.TIMELINE_BORDER * 2 * pixelRatio) + pixelRatio;
             if (index === 0) {
                 context.moveTo(x, y);
             }
@@ -322,8 +309,9 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, visualiz
             }
         });
         context.strokeStyle = colors_1.WHITE_ALPHA_70;
+        context.lineWidth = pixelRatio;
         context.stroke();
-    }, [height, parsedVolume, shouldRenderVolumeOverlay, visualizationWidth]);
+    }, [height, shouldRenderVolumeOverlay, visibleVolume, visualizationWidth]);
     if (error) {
         return null;
     }

package/dist/components/Canvas.js

@@ -9,6 +9,7 @@ const studio_protocol_1 = require("@remotion/studio-protocol");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_static_files_1 = require("../api/get-static-files");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const clipboard_figma_1 = require("../helpers/clipboard-figma");
 const clipboard_images_1 = require("../helpers/clipboard-images");
@@ -35,6 +36,7 @@ const EditorGuides_1 = __importDefault(require("./EditorGuides"));
 const EditorRuler_1 = require("./EditorRuler");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
+const element_install_api_1 = require("./element-install-api");
 const element_install_request_1 = require("./element-install-request");
 const ElementInstallConfirmation_1 = require("./ElementInstallConfirmation");
 const handle_drop_1 = require("./handle-drop");
@@ -618,6 +620,33 @@ const Canvas = ({ canvasContent, size }) => {
             setPendingElementInstallRequests((requests) => [...requests, request]);
         });
     }, []);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        var _b;
+        if (!canInstallElements ||
+            compositionFile === null ||
+            currentCompositionId === null) {
+            return;
+        }
+        const initialElement = (_b = (_a = (0, browser_studio_operations_1.getBrowserStudioOperations)()) === null || _a === void 0 ? void 0 : _a.consumeInitialElement()) !== null && _b !== void 0 ? _b : null;
+        if (initialElement === null) {
+            return;
+        }
+        (0, element_install_request_1.enqueueElementInstallRequest)({
+            clientId: 'browser-studio',
+            compositionFile,
+            compositionId: currentCompositionId,
+            createdAt: Date.now(),
+            element: initialElement.element,
+            from: null,
+            id: crypto.randomUUID(),
+            position: null,
+            source: {
+                origin: initialElement.sourceOrigin,
+                type: 'browser-studio-link',
+            },
+        });
+    }, [canInstallElements, compositionFile, currentCompositionId]);
     (0, react_1.useEffect)(() => {
         if (activeElementInstallRequest !== null ||
             pendingElementInstallRequests.length === 0) {
@@ -636,8 +665,9 @@ const Canvas = ({ canvasContent, size }) => {
         }
         let canceled = false;
         const handleInstallRequest = async () => {
+            var _a;
             setInstallingElementName(activeElementInstallRequest.element.displayName);
-            const preflight = await (0, call_api_1.callApi)('/api/prepare-element-install', {
+            const preflight = await (0, element_install_api_1.prepareElementInstall)({
                 compositionFile: activeElementInstallRequest.compositionFile,
                 compositionId: activeElementInstallRequest.compositionId,
                 element: activeElementInstallRequest.element,
@@ -661,12 +691,17 @@ const Canvas = ({ canvasContent, size }) => {
                 .map((dependency) => dependency.version === null
                 ? dependency.name
                 : `${dependency.name}@${dependency.version}`);
-            const sourceLabel = activeElementInstallRequest.source.type === 'studio-protocol'
-                ? activeElementInstallRequest.source.origin
-                : 'Unverified drag-and-drop payload';
+            const { source } = activeElementInstallRequest;
+            const sourceLabel = source.type === 'studio-protocol'
+                ? source.origin
+                : source.type === 'browser-studio-link'
+                    ? ((_a = source.origin) !== null && _a !== void 0 ? _a : 'Unverified Browser Studio link')
+                    : 'Unverified drag-and-drop payload';
+            const sourceIsUnverified = source.type === 'drag-and-drop' ||
+                (source.type === 'browser-studio-link' && source.origin === null);
             const accepted = await confirm({
                 title: 'Install Element',
-                message: (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { displayName: activeElementInstallRequest.element.displayName, sourceLabel: sourceLabel, sourceIsUnverified: activeElementInstallRequest.source.type === 'drag-and-drop', compositionId: activeElementInstallRequest.compositionId, filePath: preflight.plan.filePath, overwritesExistingFile: preflight.plan.expectedFileState.exists, dependenciesToReview: dependenciesToReview, missingPackages: missingPackages, sourceCode: activeElementInstallRequest.element.sourceCode })),
+                message: (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { displayName: activeElementInstallRequest.element.displayName, sourceLabel: sourceLabel, sourceIsUnverified: sourceIsUnverified, compositionId: activeElementInstallRequest.compositionId, filePath: preflight.plan.filePath, overwritesExistingFile: preflight.plan.expectedFileState.exists, dependenciesToReview: dependenciesToReview, missingPackages: missingPackages, sourceCode: activeElementInstallRequest.element.sourceCode, usesBrowserDependencyResolution: (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null })),
                 confirmLabel: 'Install',
                 cancelLabel: 'Cancel',
             });

package/dist/components/CanvasOrLoading.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const ErrorLoader_1 = require("../error-overlay/remotion-overlay/ErrorLoader");
 const colors_1 = require("../helpers/colors");
+const composition_list_1 = require("../state/composition-list");
 const timeline_zoom_1 = require("../state/timeline-zoom");
 const Canvas_1 = require("./Canvas");
 const FramePersistor_1 = require("./FramePersistor");
@@ -29,6 +30,7 @@ const CanvasOrLoading = ({ size }) => {
     const resolved = remotion_1.Internals.useResolvedVideoConfig(null);
     const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { compositionListState } = (0, react_1.useContext)(composition_list_1.CompositionListContext);
     const { error: renderError } = (0, react_1.useContext)(RenderErrorContext_1.RenderErrorContext);
     (0, react_1.useEffect)(() => {
         if ((resolved === null || resolved === void 0 ? void 0 : resolved.type) !== 'success' &&
@@ -48,6 +50,9 @@ const CanvasOrLoading = ({ size }) => {
         return (jsx_runtime_1.jsx(ErrorLoading, { error: renderError, calculateMetadataContext: false }));
     }
     if (!canvasContent) {
+        if (compositionListState !== 'ready') {
+            return null;
+        }
         const compname = window.location.pathname.replace('/', '');
         return (jsx_runtime_1.jsx("div", { style: container, className: "css-reset", children: jsx_runtime_1.jsxs("div", { style: RunningCalculateMetadata_1.loaderLabel, children: ["Composition with ID ", compname, " not found."] }) }));
     }

package/dist/components/CompositionSelector.js

@@ -116,6 +116,8 @@ const CompositionSelector = () => {
         return {
             flex: 1,
             overflowY: 'auto',
+            paddingTop: 4,
+            paddingBottom: 4,
             backgroundColor: rootDragHovered ? colors_1.WHITE_ALPHA_12 : colors_1.BACKGROUND,
         };
     }, [rootDragHovered]);

package/dist/components/ConfigureDefaultEditorModal.js

@@ -10,6 +10,7 @@ const CodingAgentIcon_1 = require("./CodingAgentIcon");
 const layout_1 = require("./layout");
 const ComboBox_1 = require("./NewComposition/ComboBox");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const layout_2 = require("./RenderModal/layout");
 const SettingsContext_1 = require("./SettingsContext");
 const use_auto_save_config_1 = require("./use-auto-save-config");
 const container = {
@@ -20,7 +21,6 @@ const container = {
 };
 const content = {
     flex: 1,
-    padding: 16,
 };
 const description = {
     color: colors_1.LIGHT_TEXT,
@@ -29,16 +29,18 @@ const description = {
     lineHeight: 1.5,
     margin: 0,
 };
-const title = {
-    color: colors_1.LIGHT_TEXT,
-    fontFamily: 'sans-serif',
-    fontSize: 14,
-    lineHeight: 1.5,
-    margin: 0,
-};
 const comboBoxStyle = {
     boxSizing: 'border-box',
-    width: '100%',
+    width: 180,
+};
+const rightDescription = {
+    ...description,
+    textAlign: 'right',
+};
+const rightColumn = {
+    ...layout_2.rightRow,
+    alignItems: 'flex-end',
+    flexDirection: 'column',
 };
 const appLabel = {
     display: 'flex',
@@ -192,8 +194,12 @@ const DefaultEditorSettings = () => {
     });
     const displayedError = error !== null && error !== void 0 ? error : settingsError;
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs("div", { style: content, children: [
-                jsx_runtime_1.jsx("p", { style: title, children: "Default editor" }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), editorInfo === null && displayedError === null ? (jsx_runtime_1.jsx("p", { style: description, children: "Loading installed editors..." })) : null, (editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.length) === 0 ? (jsx_runtime_1.jsx("p", { style: description, children: "No supported editors were found on this computer." })) : null, editorInfo === null ? null : (jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: editorValues, selectedId: selectedEditor !== null && selectedEditor !== void 0 ? selectedEditor : NO_PREFERENCE_ID, style: comboBoxStyle, title: "Default editor" })), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true }), jsx_runtime_1.jsx("p", { style: title, children: "Default coding agent" }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), codingAgentInfo === null && displayedError === null ? (jsx_runtime_1.jsx("p", { style: description, children: "Loading installed coding agents..." })) : null, (codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.length) === 0 ? (jsx_runtime_1.jsx("p", { style: description, children: "No supported coding agents were found on this computer." })) : null, codingAgentInfo === null ? null : (jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codingAgentValues, selectedId: selectedCodingAgent !== null && selectedCodingAgent !== void 0 ? selectedCodingAgent : NO_PREFERENCE_ID, style: comboBoxStyle, title: "Default coding agent" })), displayedError ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                        jsx_runtime_1.jsx(layout_1.Spacing, { y: 1.5 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: displayedError, align: "flex-start", type: "error" })
+                jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                        jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Default editor" }), jsx_runtime_1.jsxs("div", { style: rightColumn, children: [editorInfo === null && displayedError === null ? (jsx_runtime_1.jsx("p", { style: rightDescription, children: "Loading installed editors..." })) : null, (editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.length) === 0 ? (jsx_runtime_1.jsx("p", { style: rightDescription, children: "No supported editors were found on this computer." })) : null, editorInfo === null ? null : (jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: editorValues, selectedId: selectedEditor !== null && selectedEditor !== void 0 ? selectedEditor : NO_PREFERENCE_ID, style: comboBoxStyle, title: "Default editor" }))] })
+                    ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                        jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Default coding agent" }), jsx_runtime_1.jsxs("div", { style: rightColumn, children: [codingAgentInfo === null && displayedError === null ? (jsx_runtime_1.jsx("p", { style: rightDescription, children: "Loading installed coding agents..." })) : null, (codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.length) === 0 ? (jsx_runtime_1.jsx("p", { style: rightDescription, children: "No supported coding agents were found on this computer." })) : null, codingAgentInfo === null ? null : (jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codingAgentValues, selectedId: selectedCodingAgent !== null && selectedCodingAgent !== void 0 ? selectedCodingAgent : NO_PREFERENCE_ID, style: comboBoxStyle, title: "Default coding agent" }))] })
+                    ] }), displayedError ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(layout_1.Spacing, { y: 1.5 }), jsx_runtime_1.jsx("div", { style: { paddingLeft: 16, paddingRight: 16 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: displayedError, align: "flex-start", type: "error" }) })
                     ] })) : null] }) }));
 };
 exports.DefaultEditorSettings = DefaultEditorSettings;

package/dist/components/Editor.js

@@ -44,6 +44,7 @@ const noop_1 = require("../helpers/noop");
 const studio_fit_padding_1 = require("../helpers/studio-fit-padding");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const canvas_ref_1 = require("../state/canvas-ref");
+const composition_list_1 = require("../state/composition-list");
 const scale_lock_1 = require("../state/scale-lock");
 const timeline_zoom_1 = require("../state/timeline-zoom");
 const z_index_1 = require("../state/z-index");
@@ -62,6 +63,20 @@ const background = {
     flexDirection: 'column',
     position: 'absolute',
 };
+const RootCompositionLoader = ({ Root }) => {
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(Root, {}), jsx_runtime_1.jsx(CompositionListRenderMarker, {})
+        ] }));
+};
+const CompositionListRenderMarker = () => {
+    (0, react_1.useLayoutEffect)(() => {
+        composition_list_1.compositionListRenderedRef.current = true;
+        return () => {
+            composition_list_1.compositionListRenderedRef.current = false;
+        };
+    }, []);
+    return null;
+};
 const Editor = ({ Root, readOnlyStudio }) => {
     (0, client_id_1.useStudioConfigRevision)();
     const [drawElement, setDrawElement] = (0, react_1.useState)(null);
@@ -97,7 +112,7 @@ const Editor = ({ Root, readOnlyStudio }) => {
     return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(timeline_zoom_1.TimelineZoomContext, { children: jsx_runtime_1.jsxs(SequencePropsSubscriptionProvider_1.SequencePropsSubscriptionProvider, { children: [
                     jsx_runtime_1.jsxs(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: [
                             jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsx(scale_lock_1.ScaleLockProvider, { children: jsx_runtime_1.jsxs("div", { style: background, children: [
-                                        jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null }), jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: setDrawRef, bufferStateDelayInMilliseconds: (0, studio_runtime_config_1.getStudioBufferStateDelayInMilliseconds)(), onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }) })
+                                        jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? (jsx_runtime_1.jsx(RootCompositionLoader, { Root: MemoRoot })) : null }), jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: setDrawRef, bufferStateDelayInMilliseconds: (0, studio_runtime_config_1.getStudioBufferStateDelayInMilliseconds)(), onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }) })
                                     ] }) })
                         ] }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})
                 ] }) }) }));

package/dist/components/ElementInstallConfirmation.d.ts

@@ -9,4 +9,5 @@ export declare const ElementInstallConfirmation: React.FC<{
     readonly dependenciesToReview: string[];
     readonly missingPackages: string[];
     readonly sourceCode: string;
+    readonly usesBrowserDependencyResolution: boolean;
 }>;

package/dist/components/ElementInstallConfirmation.js

@@ -171,7 +171,7 @@ const makeSourceControlsVisible = (sourceCode) => {
         return `\\u${(_a = character.codePointAt(0)) === null || _a === void 0 ? void 0 : _a.toString(16).padStart(4, '0')}`;
     });
 };
-const ElementInstallConfirmation = ({ displayName, sourceLabel, sourceIsUnverified, compositionId, filePath, overwritesExistingFile, dependenciesToReview, missingPackages, sourceCode, }) => {
+const ElementInstallConfirmation = ({ displayName, sourceLabel, sourceIsUnverified, compositionId, filePath, overwritesExistingFile, dependenciesToReview, missingPackages, sourceCode, usesBrowserDependencyResolution, }) => {
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
             jsx_runtime_1.jsxs("dl", { style: metadataStyle, "aria-label": "Installation details", children: [
                     jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
@@ -196,7 +196,9 @@ const ElementInstallConfirmation = ({ displayName, sourceLabel, sourceIsUnverifi
                                 ] }, packageName));
                         }) })
                 ] })) : null, jsx_runtime_1.jsxs("div", { style: warningStyle, children: [
-                    jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: warningIconStyle }), jsx_runtime_1.jsx("p", { style: warningDescriptionStyle, children: "This adds executable source code to your project. Package lifecycle scripts may also run during installation, with access to your files and the network." })
+                    jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: warningIconStyle }), jsx_runtime_1.jsxs("p", { style: warningDescriptionStyle, children: ["This adds executable source code to your project.", usesBrowserDependencyResolution
+                                ? null
+                                : ' Package lifecycle scripts may also run during installation, with access to your files and the network.'] })
                 ] }), jsx_runtime_1.jsxs("details", { style: sourceDetailsStyle, children: [
                     jsx_runtime_1.jsx("summary", { style: sourceSummaryStyle, children: "Source code" }), jsx_runtime_1.jsx("pre", { style: sourceCodeBlockStyle, children: jsx_runtime_1.jsx("code", { style: sourceCodeStyle, children: makeSourceControlsVisible(sourceCode) }) })
                 ] })

package/dist/components/FixComputedValueModal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ModalState } from '../state/modals';
+type FixComputedValueModalState = Extract<ModalState, {
+    type: 'fix-computed-value';
+}>;
+export declare const FixComputedValueModal: React.FC<{
+    readonly state: FixComputedValueModalState;
+}>;
+export {};