@remotion/studio 4.0.527 → 4.0.528

package/dist/components/AgentPrompt.js

@@ -60,7 +60,6 @@ const promptHeader = {
     justifyContent: 'space-between',
 };
 const skillRowContainer = {
-    borderTop: colors_1.BORDER_WHITE_ALPHA_12,
     marginTop: 10,
 };
 const skillError = { marginTop: 10 };
@@ -87,7 +86,7 @@ const AgentPrompt = ({ availableText, promptDetails, skillId }) => {
     const renderPromptCopy = (0, react_1.useCallback)((color) => (jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: promptCopied, color: color, style: copyIcon })), [promptCopied]);
     const renderInstallCopy = (0, react_1.useCallback)((color) => (jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: installCopied, color: color, style: copyIcon })), [installCopied]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [skillAvailable ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx("div", { style: text, children: "Install the Agent Skill first:" }), canInstallSkill && skill ? (jsx_runtime_1.jsx("div", { "aria-label": "Remotion Agent Skills", role: "list", style: skillRowContainer, children: jsx_runtime_1.jsx(SkillsSettings_1.SkillSettingsRow, { isLast: false, skill: skill }) })) : (jsx_runtime_1.jsxs("div", { style: commandField, children: [
+                    jsx_runtime_1.jsx("div", { style: text, children: "Install the Agent Skill first:" }), canInstallSkill && skill ? (jsx_runtime_1.jsx("div", { "aria-label": "Remotion Agent Skills", role: "list", style: skillRowContainer, children: jsx_runtime_1.jsx(SkillsSettings_1.SkillSettingsRow, { skill: skill }) })) : (jsx_runtime_1.jsxs("div", { style: commandField, children: [
                             jsx_runtime_1.jsx("pre", { style: code, children: installCommand }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: () => copy(installCommand, markInstallCopied), renderAction: renderInstallCopy, style: copyAction, title: "Copy command", variant: null })
                         ] })), skillActionError ? (jsx_runtime_1.jsx("div", { style: skillError, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: skillActionError, type: "error" }) })) : null] })), jsx_runtime_1.jsxs("div", { style: { ...promptHeader, marginTop: skillAvailable ? 0 : 16 }, children: [
                     jsx_runtime_1.jsx("div", { style: text, children: skillAvailable

package/dist/components/AudioWaveform.d.ts

@@ -13,4 +13,5 @@ export declare const AudioWaveform: React.NamedExoticComponent<{
     readonly muted: boolean;
     readonly playbackRate: number;
     readonly loopDisplay: LoopDisplay | undefined;
+    readonly loopDisplayOffsetInFrames: number;
 }>;

package/dist/components/AudioWaveform.js

@@ -40,6 +40,8 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const get_timeline_max_zoom_1 = require("../helpers/get-timeline-max-zoom");
+const resolve_studio_color_1 = require("../helpers/resolve-studio-color");
+const studio_pixel_ratio_1 = require("../helpers/studio-pixel-ratio");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const EMPTY_PEAKS = new Float32Array(0);
 const getContainerStyle = (height) => {
@@ -66,7 +68,7 @@ const parseVolume = (volume) => {
     }
     return volume.split(',').map((v) => Number(v));
 };
-const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayOffsetInFrames, displayDurationInFrames, visualizationWidth, volume, doesVolumeChange, muted, playbackRate, loopDisplay, }) => {
+const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayOffsetInFrames, displayDurationInFrames, visualizationWidth, volume, doesVolumeChange, muted, playbackRate, loopDisplay, loopDisplayOffsetInFrames, }) => {
     const [peaks, setPeaks] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
     const vidConf = remotion_1.Internals.useUnsafeVideoConfig();
@@ -85,16 +87,9 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         return (0, timeline_utils_1.getVisibleWaveformVolume)({
             displayDurationInFrames,
             displayOffsetInFrames,
-            loopDisplay,
             volume: parsedVolume,
         });
-    }, [
-        displayDurationInFrames,
-        displayOffsetInFrames,
-        loopDisplay,
-        muted,
-        parsedVolume,
-    ]);
+    }, [displayDurationInFrames, displayOffsetInFrames, 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)(() => {
@@ -113,7 +108,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         }
         return (0, timeline_utils_1.sliceVisibleWaveformPeaks)({
             displayDurationInFrames,
-            displayOffsetInFrames,
+            displayOffsetInFrames: displayOffsetInFrames + loopDisplayOffsetInFrames,
             durationInFrames,
             fps: vidConf.fps,
             loopDisplay,
@@ -127,6 +122,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         displayOffsetInFrames,
         durationInFrames,
         loopDisplay,
+        loopDisplayOffsetInFrames,
         peaks,
         playbackRate,
         startFrom,
@@ -141,7 +137,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         if (!canvasElement) {
             return;
         }
-        const pixelRatio = window.devicePixelRatio;
+        const pixelRatio = (0, studio_pixel_ratio_1.getStudioPixelRatio)();
         const h = Math.ceil(height * pixelRatio);
         const w = Math.ceil(visualizationWidth * pixelRatio);
         const drawingWidth = visualizationWidth * pixelRatio;
@@ -152,7 +148,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         (0, timeline_utils_1.drawBars)({
             canvas: canvasElement,
             peaks: portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS,
-            color: colors_1.WHITE_ALPHA_60,
+            color: (0, resolve_studio_color_1.resolveStudioColor)(colors_1.WHITE_ALPHA_60, getComputedStyle(canvasElement)),
             volume: visibleVolume,
             width: drawingWidth,
         });
@@ -165,7 +161,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         if (!volumeCanvasElement) {
             return;
         }
-        const pixelRatio = window.devicePixelRatio;
+        const pixelRatio = (0, studio_pixel_ratio_1.getStudioPixelRatio)();
         const h = Math.ceil(height * pixelRatio);
         const w = Math.ceil(visualizationWidth * pixelRatio);
         const drawingWidth = visualizationWidth * pixelRatio;
@@ -195,7 +191,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
                 context.lineTo(x, y);
             }
         });
-        context.strokeStyle = colors_1.WHITE_ALPHA_70;
+        context.strokeStyle = (0, resolve_studio_color_1.resolveStudioColor)(colors_1.WHITE_ALPHA_70, getComputedStyle(volumeCanvasElement));
         context.lineWidth = pixelRatio;
         context.stroke();
     }, [height, shouldRenderVolumeOverlay, visibleVolume, visualizationWidth]);

package/dist/components/CodeFrame.js

@@ -61,7 +61,7 @@ const CodeFrame = ({ source, lineNumberWidth, fontSize, horizontalMargin }) => {
                                     display: 'block',
                                     fontFamily: 'monospace',
                                     fontSize,
-                                    color: '#9cdcfe',
+                                    color: colors_1.PRISM_VARIABLE_COLOR,
                                     whiteSpace: 'pre',
                                     tabSize: 2,
                                     backgroundColor: colors_1.TRANSPARENT,

package/dist/components/ColorPicker/checker.d.ts

@@ -1,4 +1,4 @@
 export declare const CHECKER_BACKGROUND_IMAGE: string;
 export declare const CHECKER_BACKGROUND_SIZE = "8px 8px";
 export declare const CHECKER_BACKGROUND_POSITION = "0 0, 0 4px, 4px -4px, -4px 0";
-export declare const CHECKER_BACKGROUND_COLOR = "#444";
+export declare const CHECKER_BACKGROUND_COLOR = "var(--remotion-studio-color-picker-checker-background-color)";

package/dist/components/CurrentAsset.js

@@ -16,9 +16,9 @@ const open_in_remotion_convert_1 = require("../helpers/open-in-remotion-convert"
 const render_codec_label_1 = require("../helpers/render-codec-label");
 const use_image_metadata_1 = require("../helpers/use-image-metadata");
 const use_media_metadata_1 = require("../helpers/use-media-metadata");
+const background_removal_1 = require("../icons/background-removal");
 const folder_1 = require("../icons/folder");
 const remotion_convert_1 = require("../icons/remotion-convert");
-const separation_1 = require("../icons/separation");
 const transcription_1 = require("../icons/transcription");
 const trash_1 = require("../icons/trash");
 const modals_1 = require("../state/modals");
@@ -194,6 +194,7 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
             type: 'video-matting',
             src,
             displayName: fileName,
+            target: null,
         });
     }, [fileName, fileType, mutationsDisabled, setSelectedModal, src]);
     const canRename = onAssetClick === undefined &&
@@ -251,7 +252,7 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
                     : '4px 0', children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }) }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "File", sectionId: "asset-file", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Video", sectionId: "asset-video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: mediaSections.audio.length > 0, label: "Audio", sectionId: "asset-audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsxs("div", { style: assetMetadataStyle, children: [mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))), src ? (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Average volume", children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: jsx_runtime_1.jsx(AssetAudioVolume_1.AssetAudioVolume, { src: (_d = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _d !== void 0 ? _d : null, waveformSampleRate: volumeMetadata
                                         ? Math.ceil(volumeMetadata.fps *
                                             get_timeline_max_zoom_1.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM)
-                                        : null }, (_e = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _e !== void 0 ? _e : src) }) })) : null] })) })) : null, jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "asset-actions", children: jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [fileManagerAvailable ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: fileManagerDisabled, onClick: onShowInFileManager, renderIcon: (color) => (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: color, style: quickActionIconStyle })), children: ["Show in ", fileManagerName] })) : null, src && (mediaMetadata === null || mediaMetadata === void 0 ? void 0 : mediaMetadata.hasAudioTrack) !== false ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTranscribe, renderIcon: (color) => (jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { color: color, style: quickActionIconStyle })), children: "Transcribe" })) : null, fileType === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTrackMatting, renderIcon: (color) => (jsx_runtime_1.jsx(separation_1.SeparationIcon, { color: color, style: quickActionIconStyle })), children: "Separate foreground" })) : null, src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
+                                        : null }, (_e = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _e !== void 0 ? _e : src) }) })) : null] })) })) : null, jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "asset-actions", children: jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [fileManagerAvailable ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: fileManagerDisabled, onClick: onShowInFileManager, renderIcon: (color) => (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: color, style: quickActionIconStyle })), children: ["Show in ", fileManagerName] })) : null, src && (mediaMetadata === null || mediaMetadata === void 0 ? void 0 : mediaMetadata.hasAudioTrack) !== false ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTranscribe, renderIcon: (color) => (jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { color: color, style: quickActionIconStyle })), children: "Transcribe" })) : null, fileType === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTrackMatting, renderIcon: (color) => (jsx_runtime_1.jsx(background_removal_1.BackgroundRemovalIcon, { color: color, style: quickActionIconStyle })), children: "Remove background" })) : null, src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
                                 jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: convertArrowStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
                             ] })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: quickActionIconStyle })), children: "Delete" })] }) })
         ] }));

package/dist/components/EditorRuler/Ruler.js

@@ -7,6 +7,7 @@ const colors_1 = require("../../helpers/colors");
 const editor_guide_selection_1 = require("../../helpers/editor-guide-selection");
 const editor_ruler_1 = require("../../helpers/editor-ruler");
 const ruler_canvas_size_1 = require("../../helpers/ruler-canvas-size");
+const studio_pixel_ratio_1 = require("../../helpers/studio-pixel-ratio");
 const editor_guides_1 = require("../../state/editor-guides");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const should_clear_selection_on_pointer_down_1 = require("../Timeline/should-clear-selection-on-pointer-down");
@@ -35,6 +36,7 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         orientation,
         size,
     });
+    const pixelRatio = (0, studio_pixel_ratio_1.getStudioPixelRatio)();
     (0, react_1.useEffect)(() => {
         (0, editor_ruler_1.drawMarkingOnRulerCanvas)({
             scale,
@@ -45,8 +47,8 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
             orientation,
             rulerCanvasRef,
             guideHighlight,
-            canvasHeight: rulerHeight * window.devicePixelRatio,
-            canvasWidth: rulerWidth * window.devicePixelRatio,
+            canvasHeight: rulerHeight * pixelRatio,
+            canvasWidth: rulerWidth * pixelRatio,
         });
     }, [
         scale,
@@ -59,6 +61,7 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         size,
         rulerHeight,
         rulerWidth,
+        pixelRatio,
     ]);
     const rulerStyle = (0, react_1.useMemo)(() => ({
         position: 'absolute',
@@ -107,6 +110,6 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         onPointerSessionStart,
         canCreateGuides,
     ]);
-    return (jsx_runtime_1.jsx("canvas", { ref: rulerCanvasRef, width: rulerWidth * window.devicePixelRatio, height: rulerHeight * window.devicePixelRatio, style: rulerStyle, "aria-label": `${isVerticalRuler ? 'Vertical' : 'Horizontal'} ruler`, "aria-readonly": !canCreateGuides, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', onPointerDown: onPointerDown }));
+    return (jsx_runtime_1.jsx("canvas", { ref: rulerCanvasRef, width: rulerWidth * pixelRatio, height: rulerHeight * pixelRatio, style: rulerStyle, "aria-label": `${isVerticalRuler ? 'Vertical' : 'Horizontal'} ruler`, "aria-readonly": !canCreateGuides, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', onPointerDown: onPointerDown }));
 };
 exports.default = Ruler;

package/dist/components/EffectPickerModal.js

@@ -6,19 +6,17 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
-const effects_1 = require("../icons/effects");
 const external_link_1 = require("../icons/external-link");
 const modals_1 = require("../state/modals");
 const ContextMenu_1 = require("./ContextMenu");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
 const effect_picker_search_1 = require("./effect-picker-search");
-const layout_1 = require("./layout");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const DismissableModal_1 = require("./NewComposition/DismissableModal");
 const RemInput_1 = require("./NewComposition/RemInput");
 const shared_1 = require("./QuickSwitcher/shared");
 const container = {
-    width: 400,
+    width: 440,
 };
 const panelStyle = {
     borderRadius: 6,
@@ -68,9 +66,13 @@ const aboutEffectsIcon = {
     width: 12,
 };
 const resultList = {
-    height: 320,
+    height: 420,
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+    alignContent: 'start',
+    gap: 4,
     overflowY: 'auto',
-    paddingBottom: 10,
+    padding: '0 12px 10px',
 };
 const noResults = {
     color: colors_1.LIGHT_TEXT,
@@ -80,40 +82,34 @@ const noResults = {
 const resultContainer = {
     cursor: 'default',
     display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingLeft: 16,
-    paddingRight: 16,
-    marginBottom: 1,
-    marginLeft: 4,
-    marginRight: 4,
+    flexDirection: 'column',
+    gap: 1,
+    padding: '3px 3px 1px',
+    minWidth: 0,
     borderRadius: 4,
 };
-const iconStyle = {
-    width: 18,
-    height: 18,
-    flexShrink: 0,
-};
-const labelContainer = {
-    flex: 1,
-    minWidth: 0,
+const previewFrame = {
+    width: '100%',
+    aspectRatio: '3 / 2',
+    position: 'relative',
+    backgroundColor: colors_1.WHITE_ALPHA_06,
+    borderRadius: 3,
     overflow: 'hidden',
-    paddingTop: 5,
-    paddingBottom: 5,
 };
-const label = {
-    fontSize: shared_1.QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
+const preview = {
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
 };
-const category = {
-    color: colors_1.LIGHT_TEXT,
-    fontSize: 11,
-    flexShrink: 0,
+const label = {
+    fontSize: shared_1.QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE - 2,
+    overflowWrap: 'anywhere',
 };
 const EffectPickerResult = ({ item, selected, onSelected }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
+    const [previewLoaded, setPreviewLoaded] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     (0, shared_1.useScrollIntoViewOnSelected)(ref, selected);
     const style = (0, react_1.useMemo)(() => {
@@ -151,7 +147,10 @@ const EffectPickerResult = ({ item, selected, onSelected }) => {
         ];
     }, [item]);
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [
-                jsx_runtime_1.jsx(effects_1.EffectsIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: jsx_runtime_1.jsx("div", { style: labelStyle, children: item.label }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: category, children: item.category })
+                jsx_runtime_1.jsx("div", { style: previewFrame, children: jsx_runtime_1.jsx("img", { src: `https://www.remotion.dev${(0, studio_shared_1.getEffectPreviewSource)(item)}`, alt: (0, studio_shared_1.getEffectPreviewAlt)(item), style: {
+                            ...preview,
+                            visibility: previewLoaded ? 'visible' : 'hidden',
+                        }, loading: "lazy", onLoad: () => setPreviewLoaded(true) }) }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.label })
             ] }) }));
 };
 const EffectPickerContent = ({ state }) => {
@@ -171,15 +170,22 @@ const EffectPickerContent = ({ state }) => {
             clientId: state.clientId,
             effect: item.effect,
             fileName: state.fileName,
-            nodePath: state.nodePath,
+            nodePathInfo: state.nodePathInfo,
+            selectItems: state.selectItems,
         });
-    }, [setSelectedModal, state.clientId, state.fileName, state.nodePath]);
-    const onArrowDown = (0, react_1.useCallback)(() => {
-        setSelectedIndex((i) => i + 1);
-    }, []);
-    const onArrowUp = (0, react_1.useCallback)(() => {
-        setSelectedIndex((i) => i - 1);
-    }, []);
+    }, [
+        setSelectedModal,
+        state.clientId,
+        state.fileName,
+        state.nodePathInfo,
+        state.selectItems,
+    ]);
+    const moveSelection = (0, react_1.useCallback)((offset) => {
+        if (results.length === 0) {
+            return;
+        }
+        setSelectedIndex((i) => (((i + offset) % results.length) + results.length) % results.length);
+    }, [results.length]);
     const onEnter = (0, react_1.useCallback)(() => {
         if (selectedIndexRounded === -1) {
             return;
@@ -189,7 +195,7 @@ const EffectPickerContent = ({ state }) => {
     (0, react_1.useEffect)(() => {
         const downBinding = keybindings.registerKeybinding({
             key: 'ArrowDown',
-            callback: onArrowDown,
+            callback: () => moveSelection(3),
             commandCtrlKey: false,
             event: 'keydown',
             preventDefault: true,
@@ -198,7 +204,25 @@ const EffectPickerContent = ({ state }) => {
         });
         const upBinding = keybindings.registerKeybinding({
             key: 'ArrowUp',
-            callback: onArrowUp,
+            callback: () => moveSelection(-3),
+            commandCtrlKey: false,
+            event: 'keydown',
+            preventDefault: true,
+            triggerIfInputFieldFocused: true,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const rightBinding = keybindings.registerKeybinding({
+            key: 'ArrowRight',
+            callback: () => moveSelection(1),
+            commandCtrlKey: false,
+            event: 'keydown',
+            preventDefault: true,
+            triggerIfInputFieldFocused: true,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const leftBinding = keybindings.registerKeybinding({
+            key: 'ArrowLeft',
+            callback: () => moveSelection(-1),
             commandCtrlKey: false,
             event: 'keydown',
             preventDefault: true,
@@ -217,9 +241,11 @@ const EffectPickerContent = ({ state }) => {
         return () => {
             downBinding.unregister();
             upBinding.unregister();
+            rightBinding.unregister();
+            leftBinding.unregister();
             enterBinding.unregister();
         };
-    }, [keybindings, onArrowDown, onArrowUp, onEnter]);
+    }, [keybindings, moveSelection, onEnter]);
     const onTextChange = (0, react_1.useCallback)((e) => {
         setQuery(e.target.value);
         setSelectedIndex(0);

package/dist/components/ElementInstallConfirmation.js

@@ -234,15 +234,15 @@ const makeSourceControlsVisible = (sourceCode) => {
 };
 const ElementLibraryAddConfirmation = ({ displayName, origin, url }) => {
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsxs("dl", { style: metadataStyle, "aria-label": "Catalog details", children: [displayName === null ? null : (jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
+            jsx_runtime_1.jsxs("dl", { style: metadataStyle, "aria-label": "Element Library details", children: [displayName === null ? null : (jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
                             jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "Display name" }), jsx_runtime_1.jsx("dd", { style: metadataDescriptionStyle, children: displayName })
                         ] })), jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
                             jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "Request source" }), jsx_runtime_1.jsx("dd", { style: metadataDescriptionStyle, children: origin })
                         ] }), jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
-                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "Catalog URL" }), jsx_runtime_1.jsx("dd", { style: metadataDescriptionStyle, children: jsx_runtime_1.jsx("code", { style: codeStyle, children: url }) })
+                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "Element Library URL" }), jsx_runtime_1.jsx("dd", { style: metadataDescriptionStyle, children: jsx_runtime_1.jsx("code", { style: codeStyle, children: url }) })
                         ] })
                 ] }), jsx_runtime_1.jsxs("div", { style: warningStyle, children: [
-                    jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: warningIconStyle }), jsx_runtime_1.jsxs("p", { style: warningDescriptionStyle, children: ["This adds the catalog to", ' ', jsx_runtime_1.jsx("strong", { style: browseElementsStyle, children: "Browse Elements" }),
+                    jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: warningIconStyle }), jsx_runtime_1.jsxs("p", { style: warningDescriptionStyle, children: ["This adds the Element Library to", ' ', jsx_runtime_1.jsx("strong", { style: browseElementsStyle, children: "Browse Elements" }),
                             " when nothing is selected on the canvas. It is saved in", ' ', jsx_runtime_1.jsx("code", { style: codeStyle, children: "remotion.config.ts" }),
                             "."] })
                 ] })

package/dist/components/ElementLibrariesSettings.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ElementLibrariesSettings: React.FC;

package/dist/components/ElementLibrariesSettings.js

@@ -0,0 +1,200 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElementLibrariesSettings = 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 browse_elements_1 = require("../icons/browse-elements");
+const trash_1 = require("../icons/trash");
+const ActionTooltip_1 = require("./ActionTooltip");
+const Button_1 = require("./Button");
+const call_api_1 = require("./call-api");
+const InlineAction_1 = require("./InlineAction");
+const styles_1 = require("./InspectorPanel/styles");
+const RemInput_1 = require("./NewComposition/RemInput");
+const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const SettingsContext_1 = require("./SettingsContext");
+const Spinner_1 = require("./Spinner");
+const REMOTION_ELEMENTS_URL = 'https://www.remotion.dev/elements';
+const container = {
+    alignSelf: 'flex-start',
+    boxSizing: 'border-box',
+    flex: 1,
+    minWidth: 0,
+    width: '100%',
+};
+const description = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 13,
+    lineHeight: 1.5,
+    margin: '16px 16px 12px',
+};
+const addLibraryHeading = {
+    ...styles_1.sectionHeader,
+    margin: '12px 0 0',
+    padding: '4px 16px',
+};
+const libraryRow = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 10,
+    minHeight: 38,
+    padding: '4px 16px',
+};
+const libraryIcon = {
+    flexShrink: 0,
+    height: 22,
+    width: 22,
+};
+const libraryDetails = {
+    alignItems: 'flex-start',
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    minWidth: 0,
+};
+const libraryName = {
+    fontSize: 13,
+    maxWidth: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const libraryUrlStyle = {
+    cursor: 'pointer',
+    fontSize: 12,
+    maxWidth: '100%',
+    minWidth: 0,
+    outline: 'none',
+    overflow: 'hidden',
+    textDecoration: 'none',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const inputRow = {
+    display: 'flex',
+    gap: 8,
+    padding: '4px 16px',
+};
+const input = {
+    flex: 1,
+    minWidth: 0,
+};
+const message = {
+    padding: '4px 16px',
+};
+const trashIcon = {
+    height: 14,
+    width: 14,
+};
+const ElementLibrariesSettings = () => {
+    var _a;
+    const { studioRuntimeConfig } = (0, SettingsContext_1.useSettings)();
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const [url, setUrl] = (0, react_1.useState)('');
+    const [displayName, setDisplayName] = (0, react_1.useState)('');
+    const [busy, setBusy] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [hoveredUrl, setHoveredUrl] = (0, react_1.useState)(null);
+    const libraries = ((_a = studioRuntimeConfig === null || studioRuntimeConfig === void 0 ? void 0 : studioRuntimeConfig.elementLibraries) !== null && _a !== void 0 ? _a : []).filter((library) => library.url !== REMOTION_ELEMENTS_URL);
+    let normalizedUrl = null;
+    try {
+        const parsedUrl = new URL(url.trim());
+        if (parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:') {
+            normalizedUrl = parsedUrl.href;
+        }
+    }
+    catch (_b) {
+        // Keep the Add button disabled until a valid URL is entered.
+    }
+    const duplicate = normalizedUrl === REMOTION_ELEMENTS_URL ||
+        libraries.some((library) => library.url === normalizedUrl);
+    const canSave = previewServerState.type === 'connected' && busy === null;
+    const addLibrary = (0, react_1.useCallback)(async () => {
+        if (!canSave || normalizedUrl === null || duplicate) {
+            return;
+        }
+        setBusy('add');
+        setError(null);
+        try {
+            const response = await (0, call_api_1.callApi)('/api/update-config', {
+                clientId: previewServerState.clientId,
+                updates: [
+                    {
+                        setter: 'addElementLibrary',
+                        type: 'set',
+                        value: displayName.trim()
+                            ? { url: normalizedUrl, displayName: displayName.trim() }
+                            : { url: normalizedUrl },
+                    },
+                ],
+            });
+            if (!response.success) {
+                setError(response.reason);
+                return;
+            }
+            setUrl('');
+            setDisplayName('');
+        }
+        catch (err) {
+            setError(err.message);
+        }
+        finally {
+            setBusy(null);
+        }
+    }, [canSave, displayName, duplicate, normalizedUrl, previewServerState]);
+    const removeLibrary = (0, react_1.useCallback)(async (libraryUrl) => {
+        if (previewServerState.type !== 'connected' || busy !== null) {
+            return;
+        }
+        setBusy(libraryUrl);
+        setError(null);
+        try {
+            const response = await (0, call_api_1.callApi)('/api/update-config', {
+                clientId: previewServerState.clientId,
+                updates: [
+                    {
+                        setter: 'addElementLibrary',
+                        type: 'delete',
+                        value: libraryUrl,
+                    },
+                ],
+            });
+            if (!response.success) {
+                setError(response.reason);
+            }
+        }
+        catch (err) {
+            setError(err.message);
+        }
+        finally {
+            setBusy(null);
+        }
+    }, [busy, previewServerState]);
+    const renderTrash = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: trashIcon });
+    }, []);
+    return (jsx_runtime_1.jsxs("section", { style: container, children: [
+            jsx_runtime_1.jsx("p", { style: description, children: "Add libraries to browse their elements in Studio." }), jsx_runtime_1.jsxs("div", { role: "list", "aria-label": "Element Libraries", children: [
+                    jsx_runtime_1.jsxs("div", { role: "listitem", style: libraryRow, children: [
+                            jsx_runtime_1.jsx(browse_elements_1.BrowseElementsIcon, { "aria-hidden": true, color: colors_1.LIGHT_TEXT, style: libraryIcon }), jsx_runtime_1.jsxs("div", { style: libraryDetails, children: [
+                                    jsx_runtime_1.jsx("div", { style: libraryName, children: "Remotion Elements" }), jsx_runtime_1.jsx("a", { href: REMOTION_ELEMENTS_URL, target: "_blank", rel: "noopener noreferrer", style: {
+                                            ...libraryUrlStyle,
+                                            color: hoveredUrl === REMOTION_ELEMENTS_URL ? colors_1.WHITE : colors_1.LIGHT_TEXT,
+                                        }, onMouseEnter: () => setHoveredUrl(REMOTION_ELEMENTS_URL), onMouseLeave: () => setHoveredUrl(null), children: REMOTION_ELEMENTS_URL.replace(/^https?:\/\//, '') })
+                                ] })
+                        ] }), libraries.map((library) => {
+                        var _a, _b;
+                        return (jsx_runtime_1.jsxs("div", { role: "listitem", style: libraryRow, children: [
+                                jsx_runtime_1.jsx(browse_elements_1.BrowseElementsIcon, { "aria-hidden": true, color: colors_1.LIGHT_TEXT, style: libraryIcon }), jsx_runtime_1.jsxs("div", { style: libraryDetails, children: [
+                                        jsx_runtime_1.jsx("div", { style: libraryName, children: (_a = library.displayName) !== null && _a !== void 0 ? _a : new URL(library.url).host }), jsx_runtime_1.jsx("a", { href: library.url, target: "_blank", rel: "noopener noreferrer", style: {
+                                                ...libraryUrlStyle,
+                                                color: hoveredUrl === library.url ? colors_1.WHITE : colors_1.LIGHT_TEXT,
+                                            }, onMouseEnter: () => setHoveredUrl(library.url), onMouseLeave: () => setHoveredUrl(null), children: library.url.replace(/^https?:\/\//, '') })
+                                    ] }), busy === library.url ? (jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 14 })) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Remove", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Remove ${(_b = library.displayName) !== null && _b !== void 0 ? _b : library.url}`, title: "", disabled: !canSave, onClick: () => removeLibrary(library.url), renderAction: renderTrash, variant: null }) }))] }, library.url));
+                    })] }), jsx_runtime_1.jsx("h3", { style: addLibraryHeading, children: "Add new library" }), jsx_runtime_1.jsxs("div", { style: inputRow, children: [
+                    jsx_runtime_1.jsx(RemInput_1.RemotionInput, { "aria-label": "Element Library URL", placeholder: "https://example.com/elements", status: "ok", rightAlign: false, style: input, value: url, onChange: (event) => setUrl(event.target.value) }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { "aria-label": "Element Library name", placeholder: "Name (optional)", status: "ok", rightAlign: false, style: input, value: displayName, onChange: (event) => setDisplayName(event.target.value) })
+                ] }), jsx_runtime_1.jsx("div", { style: inputRow, children: jsx_runtime_1.jsx(Button_1.Button, { disabled: !canSave || normalizedUrl === null || duplicate, onClick: addLibrary, size: "compact", children: busy === 'add' ? 'Adding…' : '+ Add Element Library' }) }), duplicate ? (jsx_runtime_1.jsx("div", { style: message, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: "This library is already added." }) })) : null, error ? (jsx_runtime_1.jsx("div", { style: message, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "error", message: error }) })) : null] }));
+};
+exports.ElementLibrariesSettings = ElementLibrariesSettings;

package/dist/components/InitialCompositionLoader.js

@@ -15,7 +15,9 @@ const use_static_files_1 = require("./use-static-files");
 const useSelectComposition = () => {
     const { setCompositionFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
-    const setFrame = remotion_1.Internals.useTimelineSetFrame();
+    // A supplied frame is explicit navigation (for example, opening a nested
+    // composition at its sequence's frame). Plain selection does not seek.
+    const setFrame = remotion_1.Internals.Timeline.useTimelineSeekFrame();
     return (0, react_1.useCallback)((c, push, frame = null) => {
         var _a;
         if (push) {