@remotion/studio 4.0.471 → 4.0.473

package/dist/components/ShowOutlinesProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ShowOutlinesProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/components/ShowOutlinesProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowOutlinesProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editor_outlines_1 = require("../state/editor-outlines");
+const ShowOutlinesProvider = ({ children }) => {
+    const [editorShowOutlines, setEditorShowOutlinesState] = (0, react_1.useState)(() => (0, editor_outlines_1.loadEditorShowOutlinesOption)());
+    const setEditorShowOutlines = (0, react_1.useCallback)((newValue) => {
+        setEditorShowOutlinesState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, editor_outlines_1.persistEditorShowOutlinesOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const editorShowOutlinesCtx = (0, react_1.useMemo)(() => {
+        return {
+            editorShowOutlines,
+            setEditorShowOutlines,
+        };
+    }, [editorShowOutlines, setEditorShowOutlines]);
+    return (jsx_runtime_1.jsx(editor_outlines_1.EditorShowOutlinesContext.Provider, { value: editorShowOutlinesCtx, children: children }));
+};
+exports.ShowOutlinesProvider = ShowOutlinesProvider;

package/dist/components/SizeSelector.js

@@ -4,10 +4,10 @@ exports.SizeSelector = exports.getUniqueSizes = exports.getPreviewSizeLabel = vo
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const Checkmark_1 = require("../icons/Checkmark");
 const ControlButton_1 = require("./ControlButton");
 const ComboBox_1 = require("./NewComposition/ComboBox");
-const Preview_1 = require("./Preview");
 const commonPreviewSizes = [
     {
         size: 'auto',
@@ -83,11 +83,11 @@ const SizeSelector = () => {
             return true;
         }
         if (canvasContent.type === 'asset' &&
-            zoomableFileTypes.includes((0, Preview_1.getPreviewFileType)(canvasContent.asset))) {
+            zoomableFileTypes.includes((0, get_preview_file_type_1.getPreviewFileType)(canvasContent.asset))) {
             return true;
         }
         if (canvasContent.type === 'output' &&
-            zoomableFileTypes.includes((0, Preview_1.getPreviewFileType)(canvasContent.path))) {
+            zoomableFileTypes.includes((0, get_preview_file_type_1.getPreviewFileType)(canvasContent.path))) {
             return true;
         }
         return false;

package/dist/components/Splitter/SplitterContainer.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SplitterContainer = exports.containerColumn = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const timeline_1 = require("../../state/timeline");
 const SplitterContext_1 = require("./SplitterContext");
@@ -46,6 +47,14 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         persistFlex,
         ref,
     ]);
+    (0, react_1.useEffect)(() => {
+        const frame = requestAnimationFrame(() => {
+            player_1.PlayerInternals.updateAllElementsSizes();
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+        };
+    });
     return (jsx_runtime_1.jsx(SplitterContext_1.SplitterContext.Provider, { value: value, children: jsx_runtime_1.jsx("div", { ref: ref, style: orientation === 'horizontal' ? exports.containerColumn : containerRow, children: children }) }));
 };
 exports.SplitterContainer = SplitterContainer;

package/dist/components/Splitter/SplitterHandle.js

@@ -18,97 +18,92 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
     if (!context) {
         throw new Error('Cannot find splitter context');
     }
-    const [lastPointerUp, setLastPointerUp] = (0, react_1.useState)(() => Date.now());
     const ref = (0, react_1.useRef)(null);
+    // Keep the latest props/context readable inside the long-lived pointerdown
+    // listener without re-subscribing it on every render.
+    const latest = (0, react_1.useRef)({ context, allowToCollapse, onCollapse });
+    latest.current = { context, allowToCollapse, onCollapse };
     (0, react_1.useEffect)(() => {
-        if (context.isDragging.current) {
-            return;
-        }
         const { current } = ref;
         if (!current) {
             return;
         }
-        const getNewValue = (e, clamp) => {
-            if (!context.isDragging.current) {
-                throw new Error('cannot get value if not dragging');
-            }
-            if (!context.ref.current) {
-                throw new Error('domRect is not mounted');
-            }
-            const { width, height } = context.ref.current.getBoundingClientRect();
-            const change = (() => {
-                if (context.orientation === 'vertical') {
-                    return ((e.clientX - context.isDragging.current.x) /
-                        (width - exports.SPLITTER_HANDLE_SIZE));
-                }
-                return ((e.clientY - context.isDragging.current.y) /
-                    (height - exports.SPLITTER_HANDLE_SIZE));
-            })();
-            const newFlex = context.flexValue + change;
-            if (clamp) {
-                return Math.min(context.maxFlex, Math.max(context.minFlex, newFlex));
-            }
-            return newFlex;
-        };
+        // Cleanup for the listeners that only exist for the duration of a drag.
+        let endDrag = null;
         const onPointerDown = (e) => {
-            var _a;
             if (e.button !== 0) {
                 return;
             }
-            context.isDragging.current = {
-                x: e.clientX,
-                y: e.clientY,
+            // Prevent deselection of currently selected items
+            e.stopPropagation();
+            // Capture the context and starting flex once, at drag start. The flex
+            // value updates on every pointermove, so it must not be re-read live.
+            const dragContext = latest.current.context;
+            const start = { x: e.clientX, y: e.clientY };
+            const startFlex = dragContext.flexValue;
+            dragContext.isDragging.current = start;
+            (0, ForceSpecificCursor_1.forceSpecificCursor)(dragContext.orientation === 'horizontal' ? 'row-resize' : 'col-resize');
+            current.classList.add('remotion-splitter-active');
+            const getNewValue = (ev, clamp) => {
+                if (!dragContext.ref.current) {
+                    throw new Error('domRect is not mounted');
+                }
+                const { width, height } = dragContext.ref.current.getBoundingClientRect();
+                const change = dragContext.orientation === 'vertical'
+                    ? (ev.clientX - start.x) / (width - exports.SPLITTER_HANDLE_SIZE)
+                    : (ev.clientY - start.y) / (height - exports.SPLITTER_HANDLE_SIZE);
+                const newFlex = startFlex + change;
+                if (clamp) {
+                    return Math.min(dragContext.maxFlex, Math.max(dragContext.minFlex, newFlex));
+                }
+                return newFlex;
             };
-            (0, ForceSpecificCursor_1.forceSpecificCursor)(context.orientation === 'horizontal' ? 'row-resize' : 'col-resize');
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.add('remotion-splitter-active');
-            window.addEventListener('pointerup', (ev) => {
-                if (!context.isDragging.current) {
+            endDrag = () => {
+                dragContext.isDragging.current = false;
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                current.classList.remove('remotion-splitter-active');
+                window.removeEventListener('pointermove', onPointerMove);
+                window.removeEventListener('pointerup', onPointerUp);
+                endDrag = null;
+                player_1.PlayerInternals.updateAllElementsSizes();
+            };
+            const onPointerMove = (ev) => {
+                if (!dragContext.isDragging.current) {
                     return;
                 }
-                context.persistFlex(getNewValue(ev, true));
-                cleanup();
-                setLastPointerUp(Date.now());
-            }, { once: true });
-            window.addEventListener('pointermove', onPointerMove);
-        };
-        const onPointerMove = (e) => {
-            if (context.isDragging.current) {
-                const val = getNewValue(e, true);
-                context.setFlexValue(val);
-                if (allowToCollapse === 'left') {
-                    const unclamped = getNewValue(e, false);
-                    if (unclamped < context.minFlex / 2) {
-                        cleanup();
-                        onCollapse();
-                        setLastPointerUp(Date.now());
+                dragContext.setFlexValue(getNewValue(ev, true));
+                const collapse = latest.current.allowToCollapse;
+                if (collapse === 'left') {
+                    const unclamped = getNewValue(ev, false);
+                    if (unclamped < dragContext.minFlex / 2) {
+                        endDrag === null || endDrag === void 0 ? void 0 : endDrag();
+                        latest.current.onCollapse();
                     }
                 }
-                if (allowToCollapse === 'right') {
-                    const unclamped = 1 - getNewValue(e, false);
-                    if (unclamped < (1 - context.maxFlex) / 2) {
-                        cleanup();
-                        onCollapse();
-                        setLastPointerUp(Date.now());
+                else if (collapse === 'right') {
+                    const unclamped = 1 - getNewValue(ev, false);
+                    if (unclamped < (1 - dragContext.maxFlex) / 2) {
+                        endDrag === null || endDrag === void 0 ? void 0 : endDrag();
+                        latest.current.onCollapse();
                     }
                 }
-            }
-        };
-        const cleanup = () => {
-            var _a;
-            context.isDragging.current = false;
-            (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.remove('remotion-splitter-active');
-            current.removeEventListener('pointerdown', onPointerDown);
-            window.removeEventListener('pointermove', onPointerMove);
-            player_1.PlayerInternals.updateAllElementsSizes();
+            };
+            const onPointerUp = (ev) => {
+                if (!dragContext.isDragging.current) {
+                    return;
+                }
+                dragContext.persistFlex(getNewValue(ev, true));
+                endDrag === null || endDrag === void 0 ? void 0 : endDrag();
+            };
+            window.addEventListener('pointermove', onPointerMove);
+            window.addEventListener('pointerup', onPointerUp);
         };
         current.addEventListener('pointerdown', onPointerDown);
         return () => {
-            if (!context.isDragging.current) {
-                cleanup();
-            }
+            current.removeEventListener('pointerdown', onPointerDown);
+            endDrag === null || endDrag === void 0 ? void 0 : endDrag();
         };
-    }, [allowToCollapse, context, context.flexValue, lastPointerUp, onCollapse]);
+    }, []);
     (0, react_1.useEffect)(() => {
         const { current } = ref;
         if (!current) {

package/dist/components/StaticFilePreview.js

@@ -6,8 +6,8 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const FilePreview_1 = require("./FilePreview");
-const Preview_1 = require("./Preview");
 const use_static_files_1 = require("./use-static-files");
 const msgStyle = {
     fontSize: 13,
@@ -21,7 +21,7 @@ const errMsgStyle = {
     color: colors_1.LIGHT_TEXT,
 };
 const StaticFilePreview = ({ currentAsset, assetMetadata }) => {
-    const fileType = (0, Preview_1.getPreviewFileType)(currentAsset);
+    const fileType = (0, get_preview_file_type_1.getPreviewFileType)(currentAsset);
     const staticFileSrc = (0, remotion_1.staticFile)(currentAsset);
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)

package/dist/components/Timeline/KeyframeSettingsModal.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatusKeyframed, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+export type KeyframeSettingsModalState = {
+    type: 'keyframe-settings';
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    fieldKey: string;
+    fieldLabel: string;
+    status: CanUpdateSequencePropStatusKeyframed;
+    schema: SequenceSchema;
+    effectIndex: number | null;
+};
+export declare const KeyframeSettingsModal: React.FC<{
+    readonly state: KeyframeSettingsModalState;
+}>;

package/dist/components/Timeline/KeyframeSettingsModal.js

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyframeSettingsModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
+const modals_1 = require("../../state/modals");
+const Button_1 = require("../Button");
+const layout_1 = require("../layout");
+const ModalButton_1 = require("../ModalButton");
+const ModalFooter_1 = require("../ModalFooter");
+const ModalHeader_1 = require("../ModalHeader");
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const DismissableModal_1 = require("../NewComposition/DismissableModal");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const call_update_keyframe_settings_1 = require("./call-update-keyframe-settings");
+const container = {
+    padding: 16,
+    width: 520,
+};
+const row = {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'space-between',
+    marginBottom: 12,
+};
+const label = {
+    fontSize: 13,
+};
+const helperText = {
+    color: 'rgba(255, 255, 255, 0.6)',
+    fontSize: 12,
+    lineHeight: 1.4,
+    marginTop: 4,
+};
+const comboStyle = {
+    minWidth: 150,
+};
+const posterizeInputStyle = {
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    borderRadius: 4,
+    minWidth: 64,
+    textAlign: 'right',
+};
+const extrapolateOptions = [
+    'extend',
+    'clamp',
+    'identity',
+    'wrap',
+];
+const labelForExtrapolate = (value) => value[0].toUpperCase() + value.slice(1);
+const getExtrapolateValues = (onSelect) => {
+    return extrapolateOptions.map((value) => ({
+        type: 'item',
+        id: value,
+        keyHint: null,
+        label: labelForExtrapolate(value),
+        leftItem: null,
+        disabled: false,
+        onClick: () => onSelect(value),
+        quickSwitcherLabel: null,
+        subMenu: null,
+        value,
+    }));
+};
+const KeyframeSettingsModal = ({ state }) => {
+    var _a;
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const [left, setLeft] = (0, react_1.useState)(state.status.clamping.left);
+    const [right, setRight] = (0, react_1.useState)(state.status.clamping.right);
+    const [posterize, setPosterize] = (0, react_1.useState)((_a = state.status.posterize) !== null && _a !== void 0 ? _a : 0);
+    const [saving, setSaving] = (0, react_1.useState)(false);
+    const canEditClamping = state.status.interpolationFunction === 'interpolate';
+    const close = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    const leftOptions = (0, react_1.useMemo)(() => getExtrapolateValues(setLeft), []);
+    const rightOptions = (0, react_1.useMemo)(() => getExtrapolateValues(setRight), []);
+    const onPosterizeChange = (0, react_1.useCallback)((value) => {
+        setPosterize(Math.max(0, Math.round(value)));
+    }, []);
+    const posterizeFormatter = (0, react_1.useCallback)((value) => {
+        const numericValue = Number(value);
+        return String(Math.round(numericValue));
+    }, []);
+    const onSave = (0, react_1.useCallback)(() => {
+        if (previewServerState.type !== 'connected') {
+            return;
+        }
+        const settings = {
+            clamping: canEditClamping ? { left, right } : undefined,
+            posterize: posterize <= 0 ? undefined : posterize,
+        };
+        setSaving(true);
+        const promise = state.effectIndex === null
+            ? (0, call_update_keyframe_settings_1.callUpdateSequenceKeyframeSettings)({
+                fileName: state.fileName,
+                nodePath: state.nodePath,
+                fieldKey: state.fieldKey,
+                settings,
+                schema: state.schema,
+                setCodeValues,
+                clientId: previewServerState.clientId,
+            })
+            : (0, call_update_keyframe_settings_1.callUpdateEffectKeyframeSettings)({
+                fileName: state.fileName,
+                nodePath: state.nodePath,
+                effectIndex: state.effectIndex,
+                fieldKey: state.fieldKey,
+                settings,
+                schema: state.schema,
+                setCodeValues,
+                clientId: previewServerState.clientId,
+            });
+        promise.then(close).finally(() => {
+            setSaving(false);
+        });
+    }, [
+        canEditClamping,
+        close,
+        left,
+        posterize,
+        previewServerState,
+        right,
+        setCodeValues,
+        state,
+    ]);
+    const saveDisabled = saving || previewServerState.type !== 'connected';
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Keyframe settings: ${state.fieldLabel}` }), jsx_runtime_1.jsxs("div", { style: container, children: [canEditClamping ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsxs("div", { style: row, children: [
+                                    jsx_runtime_1.jsx("div", { style: label, children: "Extrapolate left" }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: leftOptions, selectedId: left, title: "Extrapolate left", style: comboStyle })
+                                ] }), jsx_runtime_1.jsxs("div", { style: row, children: [
+                                    jsx_runtime_1.jsx("div", { style: label, children: "Extrapolate right" }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: rightOptions, selectedId: right, title: "Extrapolate right", style: comboStyle })
+                                ] })
+                        ] })) : null, jsx_runtime_1.jsxs("div", { style: row, children: [
+                            jsx_runtime_1.jsxs("div", { children: [
+                                    jsx_runtime_1.jsx("div", { style: label, children: "Posterize" }), jsx_runtime_1.jsx("div", { style: helperText, children: "Use 0 to turn posterization off." })
+                                ] }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: posterize, status: "ok", onValueChange: onPosterizeChange, onValueChangeEnd: onPosterizeChange, onTextChange: () => undefined, min: 0, step: 1, formatter: posterizeFormatter, rightAlign: true, style: posterizeInputStyle })
+                        ] })
+                ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { justify: "flex-end", align: "center", children: [
+                        jsx_runtime_1.jsx(Button_1.Button, { onClick: close, children: "Cancel" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(ModalButton_1.ModalButton, { onClick: onSave, disabled: saveDisabled, children: "Save" })
+                    ] }) })
+        ] }));
+};
+exports.KeyframeSettingsModal = KeyframeSettingsModal;

package/dist/components/Timeline/Timeline.js

@@ -44,6 +44,7 @@ const is_current_selected_still_1 = require("../../helpers/is-current-selected-s
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
+const import_assets_1 = require("../import-assets");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const SplitterContainer_1 = require("../Splitter/SplitterContainer");
@@ -77,12 +78,14 @@ const container = {
     backgroundColor: colors_1.BACKGROUND,
 };
 const noop = () => undefined;
-const TimelineClearSelectionArea = ({ children }) => {
+const TimelineContextMenuArea = ({ children }) => {
     var _a, _b;
-    const { clearSelection } = (0, TimelineSelection_1.useTimelineSelection)();
     const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [isAddingSolid, setIsAddingSolid] = (0, react_1.useState)(false);
+    const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const previewConnected = previewServerState.type === 'connected';
     const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
@@ -97,20 +100,18 @@ const TimelineClearSelectionArea = ({ children }) => {
         compositionFile,
         compositionId: currentCompositionId,
     });
-    // Selection-triggering click handlers in children call e.stopPropagation(),
-    // so any pointerdown that bubbles up here is by definition on empty space
-    // and should clear the current selection.
-    const onPointerDown = (0, react_1.useCallback)((e) => {
-        if (e.button !== 0) {
-            return;
-        }
-        clearSelection();
-    }, [clearSelection]);
-    const canInsertSolid = (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
+    const canInsertSolid = previewConnected &&
+        (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
         currentCompositionId !== null &&
         compositionFile !== null &&
         videoConfig !== null &&
         !isAddingSolid;
+    const canInsertAsset = previewConnected &&
+        !window.remotion_isReadOnlyStudio &&
+        (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
+        currentCompositionId !== null &&
+        compositionFile !== null &&
+        !isAddingAsset;
     const insertSolid = (0, react_1.useCallback)(async () => {
         if (!canInsertSolid ||
             currentCompositionId === null ||
@@ -142,6 +143,28 @@ const TimelineClearSelectionArea = ({ children }) => {
             setIsAddingSolid(false);
         }
     }, [canInsertSolid, compositionFile, currentCompositionId, videoConfig]);
+    const insertAsset = (0, react_1.useCallback)(async () => {
+        if (!canInsertAsset ||
+            currentCompositionId === null ||
+            compositionFile === null) {
+            return;
+        }
+        const files = await (0, import_assets_1.pickFilesToImport)();
+        if (files.length === 0) {
+            return;
+        }
+        setIsAddingAsset(true);
+        try {
+            await (0, import_assets_1.importAssets)({
+                files,
+                compositionFile,
+                compositionId: currentCompositionId,
+            });
+        }
+        finally {
+            setIsAddingAsset(false);
+        }
+    }, [canInsertAsset, compositionFile, currentCompositionId]);
     const contextMenuItems = (0, react_1.useMemo)(() => {
         return [
             {
@@ -156,9 +179,21 @@ const TimelineClearSelectionArea = ({ children }) => {
                 quickSwitcherLabel: null,
                 disabled: !canInsertSolid,
             },
+            {
+                type: 'item',
+                id: 'insert-asset',
+                label: 'Add asset',
+                value: 'insert-asset',
+                onClick: insertAsset,
+                keyHint: null,
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+                disabled: !canInsertAsset,
+            },
         ];
-    }, [insertSolid, canInsertSolid]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { ref: timeline_refs_1.timelineVerticalScroll, values: contextMenuItems, onOpen: null, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: onPointerDown, children: children }));
+    }, [insertSolid, canInsertSolid, insertAsset, canInsertAsset]);
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { ref: timeline_refs_1.timelineVerticalScroll, values: contextMenuItems, onOpen: null, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: children }));
 };
 const TimelineInner = () => {
     var _a;
@@ -188,7 +223,7 @@ const TimelineInner = () => {
             : filtered;
     }, [filtered]);
     const hasBeenCut = filtered.length > shown.length;
-    return (jsx_runtime_1.jsxs(TimelineClearSelectionArea, { children: [sequences.map((sequence) => {
+    return (jsx_runtime_1.jsxs(TimelineContextMenuArea, { children: [sequences.map((sequence) => {
                 if (!sequence.controls || !previewConnected || !sequence.getStack()) {
                     return null;
                 }

package/dist/components/Timeline/TimelineArrayField.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+export declare const TimelineArrayField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly effectiveValue: unknown;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onDragEnd: () => void;
+}>;