@remotion/studio 4.0.513 → 4.0.515

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/api/install-package.js

@@ -3,10 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.installPackages = void 0;
 const remotion_1 = require("remotion");
 const call_api_1 = require("../components/call-api");
-const installPackages = (dependencies) => {
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const installPackages = async (dependencies) => {
     if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
         throw new Error('installPackages() is only available in the Studio');
     }
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (browserStudioOperations !== null) {
+        const response = await browserStudioOperations.packageInstallation.installPackages({
+            dependencies: [...dependencies],
+        });
+        if (!response.success) {
+            const error = new Error(response.reason);
+            error.stack = response.stack;
+            throw error;
+        }
+        return {};
+    }
     if (window.remotion_isReadOnlyStudio) {
         throw new Error('installPackages() is not available in Read-Only Studio');
     }

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.d.ts

@@ -14,7 +14,7 @@ export declare const getCanDragAsset: ({ readOnlyStudio, relativePath, }: {
     readOnlyStudio: boolean;
     relativePath: string;
 }) => boolean;
-export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerDisabled, mutationsDisabled, }: {
+export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }: {
     relativePath: string;
     fileManagerName: string;
     copyFileName: () => void;
@@ -22,6 +22,7 @@ export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName,
     openAssetInExplorer: () => void;
     renameAsset: () => void;
     deleteAsset: () => void;
+    fileExplorerAvailable: boolean;
     fileExplorerDisabled: boolean;
     mutationsDisabled: boolean;
 }) => ComboboxValue[];

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,
@@ -118,8 +117,8 @@ const getCanDragAsset = ({ readOnlyStudio, relativePath, }) => {
     return !readOnlyStudio && (0, import_assets_1.getAssetElementFromPath)(relativePath) !== null;
 };
 exports.getCanDragAsset = getCanDragAsset;
-const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerDisabled, mutationsDisabled, }) => {
-    return [
+const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }) => {
+    const items = [
         (0, open_in_new_window_1.getOpenInNewWindowMenuItem)(`/assets/${relativePath}`),
         {
             type: 'divider',
@@ -151,18 +150,20 @@ const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName,
             type: 'divider',
             id: 'asset-file-actions-divider',
         },
-        {
-            id: 'open-asset-in-explorer',
-            keyHint: null,
-            label: `Show in ${fileManagerName}`,
-            leftItem: null,
-            onClick: openAssetInExplorer,
-            quickSwitcherLabel: `Show asset in ${fileManagerName}`,
-            subMenu: null,
-            type: 'item',
-            value: 'open-asset-in-explorer',
-            disabled: fileExplorerDisabled,
-        },
+        fileExplorerAvailable
+            ? {
+                id: 'open-asset-in-explorer',
+                keyHint: null,
+                label: `Show in ${fileManagerName}`,
+                leftItem: null,
+                onClick: openAssetInExplorer,
+                quickSwitcherLabel: `Show asset in ${fileManagerName}`,
+                subMenu: null,
+                type: 'item',
+                value: 'open-asset-in-explorer',
+                disabled: fileExplorerDisabled,
+            }
+            : null,
         {
             id: 'rename-asset',
             keyHint: null,
@@ -188,6 +189,7 @@ const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName,
             disabled: mutationsDisabled,
         },
     ];
+    return items.filter(no_react_1.NoReactInternals.truthy);
 };
 exports.getAssetContextMenuItems = getAssetContextMenuItems;
 const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dropLocation, setDropLocation, readOnlyStudio, }) => {
@@ -433,6 +435,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             openAssetInExplorer,
             renameAsset,
             deleteAsset,
+            fileExplorerAvailable: (0, browser_studio_operations_1.getBrowserStudioOperations)() === null,
             fileExplorerDisabled,
             mutationsDisabled,
         });

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

@@ -41,19 +41,6 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const EMPTY_PEAKS = new Float32Array(0);
-// Recreate the canvas after Fast Refresh because an already transferred canvas
-// cannot be handed to OffscreenCanvas again.
-const canRetryCanvasTransfer = (err) => {
-    return err instanceof DOMException && err.name === 'InvalidStateError';
-};
-const canUseAudioWaveformWorker = () => {
-    if (typeof Worker === 'undefined' ||
-        typeof OffscreenCanvas === 'undefined' ||
-        typeof HTMLCanvasElement === 'undefined') {
-        return false;
-    }
-    return 'transferControlToOffscreen' in HTMLCanvasElement.prototype;
-};
 const getContainerStyle = (height) => {
     return {
         display: 'flex',
@@ -64,9 +51,6 @@ const getContainerStyle = (height) => {
         height,
     };
 };
-const getWaveformErrorMessage = () => {
-    return new Error('No waveform available. The audio could not be decoded or may not support CORS.');
-};
 const waveformCanvasStyle = {
     pointerEvents: 'none',
     width: '100%',
@@ -74,6 +58,8 @@ const waveformCanvasStyle = {
 };
 const volumeCanvasStyle = {
     position: 'absolute',
+    width: '100%',
+    height: '100%',
 };
 const parseVolume = (volume) => {
     if (typeof volume === 'number') {
@@ -81,139 +67,62 @@ 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);
-    const canUseWorkerPath = (0, react_1.useMemo)(() => canUseAudioWaveformWorker(), []);
     const vidConf = remotion_1.Internals.useUnsafeVideoConfig();
     if (vidConf === null) {
         throw new Error('Expected video config');
     }
     const waveformCanvas = (0, react_1.useRef)(null);
     const volumeCanvas = (0, react_1.useRef)(null);
-    const waveformWorker = (0, react_1.useRef)(null);
-    const hasTransferredCanvas = (0, react_1.useRef)(false);
-    const latestRequestId = (0, react_1.useRef)(0);
     const shouldRenderVolumeOverlay = doesVolumeChange && typeof volume === 'string';
     const parsedVolume = (0, react_1.useMemo)(() => parseVolume(volume), [volume]);
-    (0, react_1.useEffect)(() => {
-        if (canUseWorkerPath) {
-            return;
+    const visibleVolume = (0, react_1.useMemo)(() => {
+        if (muted) {
+            return 0;
         }
-        const controller = new AbortController();
+        return (0, timeline_utils_1.getVisibleWaveformVolume)({
+            displayDurationInFrames,
+            displayOffsetInFrames,
+            loopDisplay,
+            volume: parsedVolume,
+        });
+    }, [
+        displayDurationInFrames,
+        displayOffsetInFrames,
+        loopDisplay,
+        muted,
+        parsedVolume,
+    ]);
+    // Layout effect so that a cache hit sets the peaks synchronously and the
+    // waveform is painted on the very first frame after mounting.
+    (0, react_1.useLayoutEffect)(() => {
         setPeaks(null);
         setError(null);
-        (0, timeline_utils_1.loadWaveformPeaks)(src, controller.signal)
-            .then((p) => {
-            if (!controller.signal.aborted) {
-                setPeaks(p);
-            }
-        })
-            .catch((err) => {
-            if (!controller.signal.aborted) {
-                setError(err);
-            }
-        });
-        return () => controller.abort();
-    }, [canUseWorkerPath, src]);
-    (0, react_1.useEffect)(() => {
-        if (!canUseWorkerPath) {
-            return;
-        }
-        const canvasElement = waveformCanvas.current;
-        if (!canvasElement || hasTransferredCanvas.current) {
-            return;
-        }
-        const worker = (0, timeline_utils_1.makeAudioWaveformWorker)();
-        let workerFailed = false;
-        waveformWorker.current = worker;
-        worker.addEventListener('message', (event) => {
-            if (event.data.type === 'error') {
-                if (event.data.requestId !== latestRequestId.current) {
-                    return;
-                }
-                setError(new Error(event.data.message));
-            }
-        });
-        worker.addEventListener('error', (event) => {
-            event.preventDefault();
-            workerFailed = true;
-            if (worker !== waveformWorker.current) {
-                return;
-            }
-            worker.terminate();
-            waveformWorker.current = null;
-            hasTransferredCanvas.current = false;
-            setError(getWaveformErrorMessage());
+        return (0, timeline_utils_1.subscribeToWaveformPeaks)({
+            src,
+            onPeaks: (p) => setPeaks(p),
+            onError: (err) => setError(err),
         });
-        let offscreen;
-        try {
-            offscreen = canvasElement.transferControlToOffscreen();
-        }
-        catch (err) {
-            worker.terminate();
-            waveformWorker.current = null;
-            if (canRetryCanvasTransfer(err)) {
-                setWaveformCanvasKey((key) => key + 1);
-                return;
-            }
-            throw err;
-        }
-        hasTransferredCanvas.current = true;
-        worker.postMessage({ type: 'init', canvas: offscreen }, [offscreen]);
-        return () => {
-            if (!workerFailed) {
-                worker.postMessage({ type: 'dispose' });
-            }
-            worker.terminate();
-            waveformWorker.current = null;
-            hasTransferredCanvas.current = false;
-        };
-    }, [canUseWorkerPath, waveformCanvasKey]);
+    }, [src]);
     const portionPeaks = (0, react_1.useMemo)(() => {
-        if (canUseWorkerPath || !peaks) {
+        if (!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,
@@ -221,74 +130,28 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, visualiz
         startFrom,
         vidConf.fps,
     ]);
-    (0, react_1.useEffect)(() => {
+    // Drawing must happen in a layout effect: when the timeline zooms, the
+    // canvas CSS box resizes in the same commit, and painting the bitmap
+    // before the browser paints avoids showing a stretched stale waveform.
+    (0, react_1.useLayoutEffect)(() => {
         const { current: canvasElement } = waveformCanvas;
         if (!canvasElement) {
             return;
         }
-        const h = height;
-        const w = Math.ceil(visualizationWidth);
-        if (canUseWorkerPath) {
-            const worker = waveformWorker.current;
-            if (!worker || !hasTransferredCanvas.current) {
-                return;
-            }
-            latestRequestId.current += 1;
-            setError(null);
-            const message = {
-                type: 'render',
-                requestId: latestRequestId.current,
-                src,
-                width: w,
-                height: h,
-                volume: parsedVolume,
-                startFrom,
-                durationInFrames,
-                fps: vidConf.fps,
-                playbackRate,
-                loopDisplay,
-            };
-            worker.postMessage(message);
-            return;
-        }
+        const pixelRatio = window.devicePixelRatio;
+        const h = Math.ceil(height * pixelRatio);
+        const w = Math.ceil(visualizationWidth * pixelRatio);
         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,
-            });
-        }
-    }, [
-        canUseWorkerPath,
-        durationInFrames,
-        height,
-        loopDisplay,
-        playbackRate,
-        parsedVolume,
-        portionPeaks,
-        src,
-        startFrom,
-        vidConf.fps,
-        visualizationWidth,
-        waveformCanvasKey,
-    ]);
-    (0, react_1.useEffect)(() => {
+        (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,
+        });
+    }, [height, portionPeaks, visibleVolume, visualizationWidth]);
+    (0, react_1.useLayoutEffect)(() => {
         if (!shouldRenderVolumeOverlay) {
             return;
         }
@@ -296,24 +159,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,15 +187,16 @@ 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;
     }
-    if (!canUseWorkerPath && !peaks) {
+    if (!peaks) {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: getContainerStyle(height), children: [
-            jsx_runtime_1.jsx("canvas", { ref: waveformCanvas, style: waveformCanvasStyle }, waveformCanvasKey), shouldRenderVolumeOverlay ? (jsx_runtime_1.jsx("canvas", { ref: volumeCanvas, style: volumeCanvasStyle })) : null] }));
+            jsx_runtime_1.jsx("canvas", { ref: waveformCanvas, style: waveformCanvasStyle }), shouldRenderVolumeOverlay ? (jsx_runtime_1.jsx("canvas", { ref: volumeCanvas, style: volumeCanvasStyle })) : null] }));
 };
 exports.AudioWaveform = react_1.default.memo(AudioWaveformInner);

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]);