@remotion/studio 4.0.519 → 4.0.520

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/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/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;

package/dist/components/SelectedOutlineElement.js

@@ -45,7 +45,6 @@ const open_in_editor_1 = require("../helpers/open-in-editor");
 const modals_1 = require("../state/modals");
 const transform_3d_mode_1 = require("../state/transform-3d-mode");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
-const delete_jsx_node_api_1 = require("./delete-jsx-node-api");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const selected_outline_types_1 = require("./selected-outline-types");
@@ -57,6 +56,7 @@ const get_sequence_context_menu_items_1 = require("./Timeline/get-sequence-conte
 const timeline_asset_link_1 = require("./Timeline/timeline-asset-link");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const get_stack_1 = require("./Timeline/TimelineStack/get-stack");
+const use_delete_timeline_items_1 = require("./Timeline/use-delete-timeline-items");
 const use_default_editor_info_1 = require("./use-default-editor-info");
 const use_select_asset_1 = require("./use-select-asset");
 const use_selected_outline_control_target_1 = require("./use-selected-outline-control-target");
@@ -68,6 +68,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const updateResolvedStackTrace = (0, react_1.useContext)(remotion_1.Internals.SequenceStackTracesUpdateContext);
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    const deleteTimelineItems = (0, use_delete_timeline_items_1.useDeleteTimelineItems)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -180,38 +181,16 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
                     });
                 }
                 : null,
-            onDeleteSequenceFromSource: async () => {
+            onDeleteSequenceFromSource: () => {
                 if (sourceEditDisabled || previewServerState.type !== 'connected') {
                     return;
                 }
-                if (contextMenuTarget.nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
-                    const shouldDelete = await confirm({
-                        title: 'Delete sequence?',
-                        message: 'This sequence is programmatically duplicated ' +
-                            contextMenuTarget.nodePathInfo.numberOfSequencesWithThisNodePath +
-                            ' times in the code. Deleting removes all instances. Continue?',
-                        confirmLabel: 'Delete',
-                    });
-                    if (!shouldDelete) {
-                        return;
-                    }
-                }
-                try {
-                    const result = await (0, delete_jsx_node_api_1.deleteJsxNode)({
-                        nodes: [
-                            {
-                                fileName: nodePath.absolutePath,
-                                nodePath: nodePath.nodePath,
-                            },
-                        ],
-                    });
-                    if (!result.success) {
-                        (0, NotificationCenter_1.showNotification)(result.reason, 4000);
-                    }
-                }
-                catch (err) {
-                    (0, NotificationCenter_1.showNotification)(err.message, 4000);
-                }
+                deleteTimelineItems([
+                    {
+                        type: 'sequence',
+                        nodePathInfo: contextMenuTarget.nodePathInfo,
+                    },
+                ]);
             },
             onDisableSequenceInteractivity: () => {
                 if (disableInteractivityDisabled ||
@@ -343,6 +322,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         canConfigureApps,
         codingAgentInfo,
         confirm,
+        deleteTimelineItems,
         editorInfo,
         getTarget,
         onSelect,

package/dist/components/Timeline/Timeline.js

@@ -48,6 +48,7 @@ const is_current_selected_still_1 = require("../../helpers/is-current-selected-s
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const use_sync_external_store_1 = require("../../helpers/use-sync-external-store");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const import_assets_1 = require("../import-assets");
@@ -296,7 +297,7 @@ const TimelineInner = () => {
         overrideIdToNodePathMappings,
         compositions,
     ]);
-    const pendingInsertedElementSelection = (0, react_1.useSyncExternalStore)(inserted_element_selection_1.subscribeToInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection);
+    const pendingInsertedElementSelection = (0, use_sync_external_store_1.useSyncExternalStore)(inserted_element_selection_1.subscribeToInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection);
     const { fastRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
     const pendingSelectionStart = (0, react_1.useRef)(null);
     const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();

package/dist/components/Timeline/TimelineAssetField.js

@@ -23,6 +23,7 @@ const sourceActions = {
     display: 'flex',
     flex: 1,
     gap: 4,
+    margin: '0 4px',
     minWidth: 0,
 };
 const standaloneSourceActionStyle = {