@remotion/studio 4.0.519 → 4.0.521

package/dist/components/NewComposition/NewComposition.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NewComposition = exports.NewCompositionFields = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const canvas_1 = require("@remotion/canvas");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_static_files_1 = require("../../api/get-static-files");
@@ -9,7 +10,6 @@ const write_static_file_1 = require("../../api/write-static-file");
 const colors_1 = require("../../helpers/colors");
 const get_folder_id_1 = require("../../helpers/get-folder-id");
 const install_required_package_1 = require("../../helpers/install-required-package");
-const sort_by_nonce_history_1 = require("../../helpers/sort-by-nonce-history");
 const use_create_composition_1 = require("../../helpers/use-create-composition");
 const Checkmark_1 = require("../../icons/Checkmark");
 const folder_1 = require("../../icons/folder");
@@ -83,7 +83,7 @@ const NewCompositionFields = ({ heightValidationMessage, inputRef, nameValidatio
             ? folders
                 .slice()
                 .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }))
-            : (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(folders);
+            : (0, canvas_1.sortItemsByCommitOrder)(folders, (folder) => folder.order);
         const appendFolders = (parent) => {
             sortedFolders
                 .filter((folder) => folder.parent === parent)

package/dist/components/PlayPause.js

@@ -79,19 +79,8 @@ const PlayPauseInner = ({ playbackRate, loop, bufferStateDelayInMilliseconds, mu
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [showBufferIndicator, setShowBufferState] = (0, react_1.useState)(false);
-    const { play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, emitter, getCurrentFrame, isPlaying, } = player_1.PlayerInternals.usePlayerMethods();
-    const [playing, setPlaying] = (0, react_1.useState)(isPlaying);
-    (0, react_1.useEffect)(() => {
-        const onPlay = () => setPlaying(true);
-        const onPause = () => setPlaying(false);
-        setPlaying(isPlaying());
-        emitter.addEventListener('play', onPlay);
-        emitter.addEventListener('pause', onPause);
-        return () => {
-            emitter.removeEventListener('play', onPlay);
-            emitter.removeEventListener('pause', onPause);
-        };
-    }, [emitter, isPlaying]);
+    const { play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, emitter, getCurrentFrame, } = player_1.PlayerInternals.usePlayerMethods();
+    const playing = remotion_1.Internals.usePlaying();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     (0, react_1.useEffect)(() => {
         if (isStill) {

package/dist/components/PreviewToolbar.js

@@ -98,7 +98,7 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                         !showCompositionControls ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) })
                         ] }))] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, { hidden: isMobileLayout }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
-                    jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact", narrow: isMobileLayout }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
+                    jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout ? null : jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact", narrow: isMobileLayout }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
                 ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {})
         ] }));
 };

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
+const create_folder_tree_1 = require("../../helpers/create-folder-tree");
 const get_preview_file_type_1 = require("../../helpers/get-preview-file-type");
 const is_composition_still_1 = require("../../helpers/is-composition-still");
 const url_state_1 = require("../../helpers/url-state");
@@ -19,6 +20,7 @@ const use_select_asset_1 = require("../use-select-asset");
 const use_static_files_1 = require("../use-static-files");
 const algolia_search_1 = require("./algolia-search");
 const asset_search_1 = require("./asset-search");
+const composition_search_1 = require("./composition-search");
 const fuzzy_search_1 = require("./fuzzy-search");
 const NoResults_1 = require("./NoResults");
 const QuickSwitcherResult_1 = require("./QuickSwitcherResult");
@@ -108,7 +110,9 @@ const mapModeToQuery = (mode) => {
     throw new Error('no mode' + mode);
 };
 const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio, assetSelection, compositionSelection, }) => {
-    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    var _a;
+    var _b;
+    const { compositions, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const [state, setState] = (0, react_1.useState)(() => {
         return {
@@ -201,37 +205,45 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
                 ...assetResults,
             ];
         }
-        return (0, fuzzy_search_1.fuzzySearch)(actualQuery, compositions
-            .filter((c) => c.id !== (compositionSelection === null || compositionSelection === void 0 ? void 0 : compositionSelection.excludeCompositionId))
-            .map((c) => {
+        const tree = (0, create_folder_tree_1.createFolderTree)(compositions.filter((composition) => composition.id !== (compositionSelection === null || compositionSelection === void 0 ? void 0 : compositionSelection.excludeCompositionId)), folders, {});
+        return (0, composition_search_1.searchCompositionTree)({ items: tree, query: actualQuery }).map((result) => {
+            if (result.type === 'folder') {
+                return result;
+            }
+            const { composition } = result;
             return {
-                id: 'composition-' + c.id,
-                title: c.id,
+                id: 'composition-' + composition.id,
+                title: composition.id,
                 type: 'composition',
+                composition,
+                level: result.level,
                 onSelected: () => {
                     var _a;
                     if (compositionSelection !== null) {
-                        compositionSelection.onSelected(c);
+                        compositionSelection.onSelected(composition);
                         setSelectedModal(null);
                         return;
                     }
-                    selectComposition(c, true);
+                    selectComposition(composition, true);
                     setSelectedModal(null);
-                    const selector = `.__remotion-composition[data-compname="${c.id}"]`;
-                    (_a = remotion_1.Internals.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.expandComposition(c.id);
+                    const selector = `.__remotion-composition[data-compname="${composition.id}"]`;
+                    (_a = remotion_1.Internals.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.expandComposition(composition.id);
                     waitForElm(selector).then(() => {
                         var _a;
                         (_a = document
                             .querySelector(selector)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'center' });
                     });
                 },
-                compositionType: (0, is_composition_still_1.isCompositionStill)(c) ? 'still' : 'composition',
+                compositionType: (0, is_composition_still_1.isCompositionStill)(composition)
+                    ? 'still'
+                    : 'composition',
             };
-        }));
+        });
     }, [
         mode,
         actualQuery,
         compositions,
+        folders,
         menuActions,
         docResults,
         assetSearch,
@@ -319,7 +331,9 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
     const onTextChange = (0, react_1.useCallback)((e) => {
         setState({ query: e.target.value, selectedIndex: 0 });
     }, []);
-    const selectedIndexRounded = (0, shared_1.loopIndex)(state.selectedIndex, resultsArray.length);
+    const selectableResults = resultsArray.filter(QuickSwitcherResult_1.isQuickSwitcherResultSelectable);
+    const selectedIndexRounded = (0, shared_1.loopIndex)(state.selectedIndex, selectableResults.length);
+    const selectedResultId = (_b = (_a = selectableResults[selectedIndexRounded]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null;
     const focusInput = (0, react_1.useCallback)(() => {
         var _a;
         if (!isTouchscreen) {
@@ -369,8 +383,8 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
                 ] })), jsx_runtime_1.jsx("div", { style: assetSelection === null && compositionSelection === null
                     ? content
                     : contentWithoutModeSelector, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, type: "text", style: isTouchscreen ? touchscreenInput : input, autoFocus: !isTouchscreen, status: "ok", value: state.query, onChange: onTextChange, placeholder: placeholder, rightAlign: false }) }), jsx_runtime_1.jsx("div", { style: results, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: showEmptyDocSearch ||
-                    showSearchLoadingState ? null : resultsArray.length === 0 ? (jsx_runtime_1.jsx(NoResults_1.QuickSwitcherNoResults, { mode: mode, query: actualQuery })) : (resultsArray.map((result, i) => {
-                    return (jsx_runtime_1.jsx(QuickSwitcherResult_1.QuickSwitcherResult, { selected: selectedIndexRounded === i, result: result }, result.id));
+                    showSearchLoadingState ? null : resultsArray.length === 0 ? (jsx_runtime_1.jsx(NoResults_1.QuickSwitcherNoResults, { mode: mode, query: actualQuery })) : (resultsArray.map((result) => {
+                    return (jsx_runtime_1.jsx(QuickSwitcherResult_1.QuickSwitcherResult, { selected: selectedResultId === result.id, result: result }, result.id));
                 })) })
         ] }));
 };

package/dist/components/QuickSwitcher/QuickSwitcherResult.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
+import type { _InternalTypes } from 'remotion';
 import type { AssetFileType } from '../../helpers/get-preview-file-type';
 type QuickSwitcherResultDetail = {
     type: 'asset';
     fileType: AssetFileType;
 } | {
     type: 'composition';
+    composition: _InternalTypes['AnyComposition'];
     compositionType: 'composition' | 'still';
+    level: number;
 } | {
     type: 'menu-item';
 } | {
@@ -15,7 +18,17 @@ type QuickSwitcherResultDetail = {
     titleLine: string;
     subtitleLine: string;
 };
-export type TQuickSwitcherResult = {
+export type TQuickSwitcherResult = ({
+    title: string;
+    id: string;
+    onSelected: () => void;
+} & QuickSwitcherResultDetail) | {
+    title: string;
+    id: string;
+    type: 'folder';
+    level: number;
+};
+export declare const isQuickSwitcherResultSelectable: (result: TQuickSwitcherResult) => result is {
     title: string;
     id: string;
     onSelected: () => void;

package/dist/components/QuickSwitcher/QuickSwitcherResult.js

@@ -1,16 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.QuickSwitcherResult = void 0;
+exports.QuickSwitcherResult = exports.isQuickSwitcherResultSelectable = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const noop_1 = require("../../helpers/noop");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const folder_1 = require("../../icons/folder");
 const still_1 = require("../../icons/still");
 const upload_1 = require("../../icons/upload");
 const video_1 = require("../../icons/video");
+const modals_1 = require("../../state/modals");
 const AssetFileIcon_1 = require("../AssetFileIcon");
+const composition_menu_items_1 = require("../composition-menu-items");
+const ContextMenu_1 = require("../ContextMenu");
 const layout_1 = require("../layout");
+const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
+const use_default_editor_info_1 = require("../use-default-editor-info");
 const shared_1 = require("./shared");
+const isQuickSwitcherResultSelectable = (result) => {
+    return result.type !== 'folder';
+};
+exports.isQuickSwitcherResultSelectable = isQuickSwitcherResultSelectable;
 const container = {
     paddingLeft: 16,
     paddingRight: 16,
@@ -48,10 +60,44 @@ const labelContainer = {
     paddingBottom: 5,
 };
 const QuickSwitcherResult = ({ result, selected }) => {
+    var _a;
     const [hovered, setIsHovered] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const onSelected = result.type === 'folder' ? null : result.onSelected;
+    const composition = result.type === 'composition' ? result.composition : null;
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
+    const { defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(connectionStatus === 'connected');
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = composition === null || composition === void 0 ? void 0 : composition.stack) !== null && _a !== void 0 ? _a : null);
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
+        if (composition === null) {
+            return [];
+        }
+        return (0, composition_menu_items_1.getCompositionContextMenuItems)({
+            closeMenu: noop_1.noop,
+            composition,
+            connectionStatus,
+            editorId: defaultEditorId,
+            editorName: defaultEditorName,
+            includeCompositionManagementItems: true,
+            resolvedLocation,
+            setSelectedModal,
+            readOnlyStudio: window.remotion_isReadOnlyStudio,
+        });
+    }, [
+        composition,
+        connectionStatus,
+        defaultEditorId,
+        defaultEditorName,
+        resolvedLocation,
+        setSelectedModal,
+    ]);
     (0, react_1.useEffect)(() => {
+        if (result.type === 'folder') {
+            return;
+        }
         const { current } = ref;
         if (!current) {
             return;
@@ -64,14 +110,14 @@ const QuickSwitcherResult = ({ result, selected }) => {
             current.removeEventListener('mouseenter', onMouseEnter);
             current.removeEventListener('mouseleave', onMouseLeave);
         };
-    }, []);
+    }, [result.type]);
     (0, react_1.useEffect)(() => {
-        if (!selected) {
+        if (!selected || onSelected === null) {
             return;
         }
         const binding = keybindings.registerKeybinding({
             key: 'Enter',
-            callback: result.onSelected,
+            callback: onSelected,
             commandCtrlKey: false,
             event: 'keydown',
             preventDefault: true,
@@ -82,18 +128,23 @@ const QuickSwitcherResult = ({ result, selected }) => {
         return () => {
             binding.unregister();
         };
-    }, [keybindings, result.onSelected, selected]);
+    }, [keybindings, onSelected, selected]);
     (0, shared_1.useScrollIntoViewOnSelected)(ref, selected);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...container,
-            backgroundColor: hovered || selected ? colors_1.WHITE_ALPHA_06 : colors_1.TRANSPARENT,
+            paddingLeft: result.type === 'folder' || result.type === 'composition'
+                ? 16 + result.level * 8
+                : container.paddingLeft,
+            backgroundColor: result.type !== 'folder' && (hovered || selected)
+                ? colors_1.WHITE_ALPHA_06
+                : colors_1.TRANSPARENT,
         };
-    }, [hovered, selected]);
+    }, [hovered, result, selected]);
     const labelStyle = (0, react_1.useMemo)(() => {
         return {
             ...(result.type === 'search-result' ? searchLabel : label),
-            color: result.type === 'search-result'
+            color: result.type === 'search-result' || result.type === 'folder'
                 ? colors_1.LIGHT_TEXT
                 : selected || hovered
                     ? colors_1.WHITE
@@ -101,7 +152,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
             fontSize: shared_1.QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE,
         };
     }, [hovered, result.type, selected]);
-    return (jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }))) : result.type === 'asset' ? (jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { fileType: result.fileType, color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : result.type === 'select-file' ? (jsx_runtime_1.jsx(upload_1.UploadIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: selectFileIconStyle })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: result.type === 'search-result' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    const row = (jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: onSelected !== null && onSelected !== void 0 ? onSelected : undefined, children: [result.type === 'composition' ? (result.compositionType === 'still' ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }))) : result.type === 'folder' ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: colors_1.LIGHT_TEXT, style: iconStyle })) : result.type === 'asset' ? (jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { fileType: result.fileType, color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : result.type === 'select-file' ? (jsx_runtime_1.jsx(upload_1.UploadIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: selectFileIconStyle })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: result.type === 'search-result' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx("div", { 
                             // eslint-disable-next-line react/no-danger
                             dangerouslySetInnerHTML: {
@@ -113,5 +164,9 @@ const QuickSwitcherResult = ({ result, selected }) => {
                             }, style: labelStyle })
                     ] })) : (jsx_runtime_1.jsx("div", { style: labelStyle, children: result.title })) })
         ] }, result.id));
+    if (composition === null) {
+        return row;
+    }
+    return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.QuickSwitcherResult = QuickSwitcherResult;

package/dist/components/QuickSwitcher/asset-search.d.ts

@@ -6,4 +6,3 @@ export declare const filterAssetsByType: ({ assets, query, }: {
     readonly assets: StaticFile[];
     readonly query: string;
 };
-export declare const getAssetSearchQueryForComponent: (componentIdentity: string | null) => string;

package/dist/components/QuickSwitcher/asset-search.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAssetSearchQueryForComponent = exports.filterAssetsByType = void 0;
+exports.filterAssetsByType = void 0;
 const get_preview_file_type_1 = require("../../helpers/get-preview-file-type");
 const typeFilterRegex = /(^|\s)type:([^\s]+)/gi;
 const filterAssetsByType = ({ assets, query, }) => {
@@ -26,18 +26,3 @@ const filterAssetsByType = ({ assets, query, }) => {
     };
 };
 exports.filterAssetsByType = filterAssetsByType;
-const componentAssetTypes = {
-    'dev.remotion.media.Audio': 'audio',
-    'dev.remotion.media.Video': 'video',
-    'dev.remotion.remotion.AnimatedImage': 'image',
-    'dev.remotion.remotion.CanvasImage': 'image',
-    'dev.remotion.remotion.Img': 'image',
-};
-const getAssetSearchQueryForComponent = (componentIdentity) => {
-    if (componentIdentity === null) {
-        return '';
-    }
-    const assetType = componentAssetTypes[componentIdentity];
-    return assetType ? `type:${assetType} ` : '';
-};
-exports.getAssetSearchQueryForComponent = getAssetSearchQueryForComponent;

package/dist/components/QuickSwitcher/composition-search.d.ts

@@ -0,0 +1,16 @@
+import type { _InternalTypes } from 'remotion';
+import type { CompositionSelectorItemType } from '../CompositionSelectorItem';
+export type CompositionSearchResult = {
+    readonly type: 'folder';
+    readonly id: string;
+    readonly title: string;
+    readonly level: number;
+} | {
+    readonly type: 'composition';
+    readonly composition: _InternalTypes['AnyComposition'];
+    readonly level: number;
+};
+export declare const searchCompositionTree: ({ items, query, }: {
+    readonly items: CompositionSelectorItemType[];
+    readonly query: string;
+}) => CompositionSearchResult[];

package/dist/components/QuickSwitcher/composition-search.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.searchCompositionTree = void 0;
+const normalizeSearchText = (text) => {
+    return text
+        .trim()
+        .toLowerCase()
+        .replace(/[\s/-]/g, '');
+};
+const getMatchScore = (query, candidate) => {
+    const normalizedCandidate = normalizeSearchText(candidate);
+    if (normalizedCandidate === query) {
+        return 400000 - normalizedCandidate.length;
+    }
+    if (normalizedCandidate.startsWith(query)) {
+        return 300000 - (normalizedCandidate.length - query.length);
+    }
+    const substringIndex = normalizedCandidate.indexOf(query);
+    if (substringIndex !== -1) {
+        return (200000 -
+            substringIndex * 100 -
+            (normalizedCandidate.length - query.length));
+    }
+    let previousIndex = -1;
+    let firstIndex = -1;
+    let gapCount = 0;
+    for (const character of query) {
+        const nextIndex = normalizedCandidate.indexOf(character, previousIndex + 1);
+        if (nextIndex === -1) {
+            return null;
+        }
+        if (firstIndex === -1) {
+            firstIndex = nextIndex;
+        }
+        else {
+            gapCount += nextIndex - previousIndex - 1;
+        }
+        previousIndex = nextIndex;
+    }
+    return (100000 -
+        gapCount * 100 -
+        firstIndex * 10 -
+        (normalizedCandidate.length - query.length));
+};
+const searchCompositionTree = ({ items, query, }) => {
+    const normalizedQuery = normalizeSearchText(query);
+    const filterAndRank = (treeItems, level, inheritedFolderScore) => {
+        const rankedItems = treeItems
+            .map((item, originalIndex) => {
+            if (item.type === 'composition') {
+                const compositionPath = [
+                    item.composition.parentFolderName,
+                    item.composition.folderName,
+                    item.composition.id,
+                ]
+                    .filter(Boolean)
+                    .join('/');
+                const idScore = normalizedQuery === ''
+                    ? 0
+                    : getMatchScore(normalizedQuery, item.composition.id);
+                const compositionPathScore = normalizedQuery === ''
+                    ? 0
+                    : getMatchScore(normalizedQuery, compositionPath);
+                const directScore = Math.max(idScore !== null && idScore !== void 0 ? idScore : -1, compositionPathScore !== null && compositionPathScore !== void 0 ? compositionPathScore : -1);
+                const score = Math.max(directScore, inheritedFolderScore !== null && inheritedFolderScore !== void 0 ? inheritedFolderScore : -1);
+                if (score === -1) {
+                    return null;
+                }
+                return {
+                    result: {
+                        type: 'composition',
+                        composition: item.composition,
+                        level,
+                        score,
+                    },
+                    originalIndex,
+                };
+            }
+            const fullPath = [item.parentName, item.folderName]
+                .filter(Boolean)
+                .join('/');
+            const nameScore = normalizedQuery === ''
+                ? 0
+                : getMatchScore(normalizedQuery, item.folderName);
+            const pathScore = normalizedQuery === '' ? 0 : getMatchScore(normalizedQuery, fullPath);
+            const directFolderScore = Math.max(nameScore !== null && nameScore !== void 0 ? nameScore : -1, pathScore !== null && pathScore !== void 0 ? pathScore : -1);
+            const folderScore = Math.max(directFolderScore === -1 ? -1 : directFolderScore - 1, inheritedFolderScore !== null && inheritedFolderScore !== void 0 ? inheritedFolderScore : -1);
+            const children = filterAndRank(item.items, level + 1, folderScore === -1 ? null : folderScore);
+            if (children.length === 0) {
+                return null;
+            }
+            return {
+                result: {
+                    type: 'folder',
+                    id: `folder-${fullPath}`,
+                    title: item.folderName,
+                    level,
+                    score: Math.max(folderScore, ...children.map((child) => child.score)),
+                    children,
+                },
+                originalIndex,
+            };
+        })
+            .filter((item) => item !== null);
+        if (normalizedQuery !== '') {
+            rankedItems.sort((a, b) => {
+                return (b.result.score - a.result.score || a.originalIndex - b.originalIndex);
+            });
+        }
+        return rankedItems.map((item) => item.result);
+    };
+    const flatten = (rankedItems) => {
+        return rankedItems.flatMap((item) => {
+            if (item.type === 'composition') {
+                return [
+                    {
+                        type: 'composition',
+                        composition: item.composition,
+                        level: item.level,
+                    },
+                ];
+            }
+            return [
+                {
+                    type: 'folder',
+                    id: item.id,
+                    title: item.title,
+                    level: item.level,
+                },
+                ...flatten(item.children),
+            ];
+        });
+    };
+    return flatten(filterAndRank(items, 0, null));
+};
+exports.searchCompositionTree = searchCompositionTree;

package/dist/components/RenderButton.js

@@ -282,7 +282,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
                 {
                     type: 'item',
                     id: 'client-render',
-                    label: 'Render on web',
+                    label: 'Render in browser',
                     value: 'client-render',
                     onClick: () => handleRenderTypeChange('client-render'),
                     keyHint: null,
@@ -336,7 +336,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
         ? 'Render'
         : renderType === 'render-command'
             ? 'Render via CLI'
-            : 'Render on web';
+            : 'Render in browser';
     const showRenderLabel = !narrow || renderType !== 'server-render';
     const segments = (0, react_1.useMemo)(() => {
         return [

package/dist/components/RenderModal/RenderStatusModal.js

@@ -41,6 +41,7 @@ const buttonRow = {
     justifyContent: 'flex-end',
 };
 const RenderStatusModal = ({ jobId, }) => {
+    var _a;
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { jobs, removeClientJob, cancelClientJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const job = jobs.find((j) => j.id === jobId);
@@ -88,9 +89,14 @@ const RenderStatusModal = ({ jobId, }) => {
     if (job.status === 'idle') {
         throw new Error('should not have rendered this modal');
     }
+    const errorDetails = job.status === 'failed'
+        ? ((_a = job.error.stack) === null || _a === void 0 ? void 0 : _a.split('\n')[0].includes(job.error.message))
+            ? job.error.stack
+            : [job.error.message, job.error.stack].filter(Boolean).join('\n')
+        : null;
     return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${job.compositionId}` }), jsx_runtime_1.jsxs("div", { style: container, children: [job.status === 'failed' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx("p", { children: "The render failed because of the following error:" }), jsx_runtime_1.jsx("div", { className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, style: codeBlock, children: job.error.stack })
+                            jsx_runtime_1.jsx("p", { children: "The render failed because of the following error:" }), jsx_runtime_1.jsx("div", { className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, style: codeBlock, children: errorDetails })
                         ] })) : null, (job.status === 'done' || job.status === 'running') &&
                         (isClientJob ? (jsx_runtime_1.jsx(ClientRenderProgress_1.ClientRenderProgress, { job: job })) : (jsx_runtime_1.jsx(GuiRenderStatus_1.GuiRenderStatus, { job: job }))), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsxs("div", { style: buttonRow, children: [job.status === 'running' ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: onClickOnCancel, children: "Cancel render" })) : (jsx_runtime_1.jsx(Button_1.Button, { onClick: onClickOnRemove, children: "Remove render" })), jsx_runtime_1.jsx(layout_1.Flex, {}), job.status === 'failed' ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: onRetry, children: "Retry" })) : null, jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(Button_1.Button, { onClick: onQuit, children: "Close" })
                         ] })

package/dist/components/RenderModal/ServerRenderModal.js

@@ -981,7 +981,7 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
         });
     }, [availablePixelFormats, pixelFormat]);
     return (jsx_runtime_1.jsxs("div", { style: render_modals_1.outerModalStyle, children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id} ${readOnlyStudio ? 'via CLI' : 'on the server'}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
                     jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsxs(Button_1.Button, { autoFocus: true, onClick: trigger, disabled: renderDisabled, style: {
                             ...render_modals_1.buttonStyle,
                             backgroundColor: outnameValidation.valid ? colors_1.BLUE : colors_1.BLUE_DISABLED,

package/dist/components/RenderModal/WebRenderModal.js

@@ -416,7 +416,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         pageResponsiveness,
     ]);
     return (jsx_runtime_1.jsxs("div", { style: render_modals_1.outerModalStyle, children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id} in the browser` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
                     jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsxs(Button_1.Button, { autoFocus: true, onClick: onAddToQueue, style: render_modals_1.buttonStyle, disabled: !outnameValidation.valid, children: ["Render ", renderMode, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
                         ] })
                 ] }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [

package/dist/components/RenderQueue/ClientRenderQueueProcessor.js

@@ -85,7 +85,7 @@ const ClientRenderQueueProcessor = () => {
                     progress: progress.progress,
                 });
             },
-            outputTarget: 'web-fs',
+            outputTarget: null,
             licenseKey: (_c = job.licenseKey) !== null && _c !== void 0 ? _c : undefined,
             pageResponsiveness: job.pageResponsiveness,
             allowHtmlInCanvas: job.allowHtmlInCanvas,

package/dist/components/ResetZoomButton.js

@@ -3,11 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResetZoomButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Button_1 = require("./Button");
+const colors_1 = require("../helpers/colors");
+const button = {
+    appearance: 'none',
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    border: `1px solid ${colors_1.BLACK_ALPHA_60}`,
+    borderRadius: 4,
+    color: colors_1.WHITE,
+    flexDirection: 'row',
+    fontFamily: 'inherit',
+    fontSize: 14,
+};
+const buttonContainer = {
+    cursor: 'pointer',
+    fontSize: 14,
+    padding: 10,
+};
 const ResetZoomButton = ({ onClick }) => {
     const onPointerDown = (0, react_1.useCallback)((event) => {
         event.stopPropagation();
     }, []);
-    return (jsx_runtime_1.jsx(Button_1.Button, { onClick: onClick, onPointerDown: onPointerDown, children: "Reset zoom" }));
+    return (jsx_runtime_1.jsx("button", { style: button, type: "button", onClick: onClick, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("div", { className: "css-reset", style: buttonContainer, children: "Reset zoom" }) }));
 };
 exports.ResetZoomButton = ResetZoomButton;