@remotion/studio 4.0.515 → 4.0.516

package/dist/components/TimelineCombobox.js

@@ -1,181 +1,46 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineCombobox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
-const react_1 = require("react");
-const react_dom_1 = __importDefault(require("react-dom"));
 const colors_1 = require("../helpers/colors");
-const mobile_layout_1 = require("../helpers/mobile-layout");
-const noop_1 = require("../helpers/noop");
 const caret_1 = require("../icons/caret");
-const z_index_1 = require("../state/z-index");
 const layout_1 = require("./layout");
-const is_menu_item_1 = require("./Menu/is-menu-item");
-const portals_1 = require("./Menu/portals");
-const styles_1 = require("./Menu/styles");
-const MenuContent_1 = require("./NewComposition/MenuContent");
-const container = {
-    boxSizing: 'border-box',
-    border: 'none',
-    borderRadius: 3,
-    height: 24,
-    padding: '0 4px',
-    fontFamily: 'inherit',
-    maxWidth: '100%',
+const SegmentedButton_1 = require("./SegmentedButton");
+const segmentedButtonStyle = {
+    height: 28,
 };
 const label = {
     flex: 'none',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
     fontFamily: 'inherit',
     fontSize: 12,
     lineHeight: '16px',
-    color: colors_1.WHITE_ALPHA_80,
     minWidth: 0,
+    overflow: 'hidden',
     textAlign: 'left',
+    textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
 };
 const TimelineCombobox = ({ values, selectedId, title, labelWidth = 32, renderLeftItem, unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
-    const [hovered, setIsHovered] = (0, react_1.useState)(false);
-    const [opened, setOpened] = (0, react_1.useState)(false);
-    const ref = (0, react_1.useRef)(null);
-    const { tabIndex, currentZIndex } = (0, z_index_1.useZIndex)();
-    const size = player_1.PlayerInternals.useElementSize(ref, {
-        triggerOnWindowResize: true,
-        shouldApplyCssTransforms: true,
-    });
-    const refresh = size === null || size === void 0 ? void 0 : size.refresh;
-    const onHide = (0, react_1.useCallback)(() => {
-        setOpened(false);
-    }, []);
-    const onOverlayPointerDown = (0, react_1.useCallback)((e) => {
-        e.stopPropagation();
-    }, []);
-    (0, react_1.useEffect)(() => {
-        const { current } = ref;
-        if (!current) {
-            return;
-        }
-        const onMouseEnter = () => setIsHovered(true);
-        const onMouseLeave = () => setIsHovered(false);
-        const onPointerDown = (e) => {
-            e.stopPropagation();
-            return setOpened((isOpened) => {
-                if (!isOpened) {
-                    refresh === null || refresh === void 0 ? void 0 : refresh();
-                }
-                return !isOpened;
-            });
-        };
-        const onClick = (e) => {
-            e.stopPropagation();
-            const isKeyboardInitiated = e.detail === 0;
-            if (!isKeyboardInitiated) {
-                return;
-            }
-            return setOpened((isOpened) => {
-                if (!isOpened) {
-                    refresh === null || refresh === void 0 ? void 0 : refresh();
-                    window.addEventListener('pointerup', (evt) => {
-                        if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
-                            setOpened(false);
-                        }
-                    }, { once: true });
-                }
-                return !isOpened;
-            });
-        };
-        current.addEventListener('mouseenter', onMouseEnter);
-        current.addEventListener('mouseleave', onMouseLeave);
-        current.addEventListener('pointerdown', onPointerDown);
-        current.addEventListener('click', onClick);
-        return () => {
-            current.removeEventListener('mouseenter', onMouseEnter);
-            current.removeEventListener('mouseleave', onMouseLeave);
-            current.removeEventListener('pointerdown', onPointerDown);
-            current.removeEventListener('click', onClick);
-        };
-    }, [refresh]);
-    const spaceToBottom = (0, react_1.useMemo)(() => {
-        const margin = 10;
-        if (size && opened) {
-            return size.windowSize.height - (size.top + size.height) - margin;
-        }
-        return 0;
-    }, [opened, size]);
-    const spaceToTop = (0, react_1.useMemo)(() => {
-        const margin = 10;
-        if (size && opened) {
-            return size.top - margin;
-        }
-        return 0;
-    }, [opened, size]);
-    const derivedMaxHeight = (0, react_1.useMemo)(() => {
-        return spaceToTop > spaceToBottom ? spaceToTop : spaceToBottom;
-    }, [spaceToBottom, spaceToTop]);
-    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
-    const portalStyle = (0, react_1.useMemo)(() => {
-        if (!opened || !size) {
-            return null;
-        }
-        const spaceToRight = size.windowSize.width - size.left;
-        const spaceToLeft = size.left + size.width;
-        const minSpaceRequired = isMobileLayout
-            ? styles_1.MAX_MOBILE_MENU_WIDTH
-            : styles_1.MAX_MENU_WIDTH;
-        const verticalLayout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
-        const canOpenOnLeft = spaceToLeft >= minSpaceRequired;
-        const canOpenOnRight = spaceToRight >= minSpaceRequired;
-        const horizontalLayout = canOpenOnRight ? 'left' : 'right';
-        return {
-            ...(verticalLayout === 'top'
-                ? {
-                    ...styles_1.menuContainerTowardsBottom,
-                    top: size.top + size.height,
-                }
-                : {
-                    ...styles_1.menuContainerTowardsTop,
-                    bottom: size.windowSize.height - size.top,
-                }),
-            ...(horizontalLayout === 'left'
-                ? { left: size.left }
-                : canOpenOnLeft
-                    ? { right: size.windowSize.width - size.left - size.width }
-                    : { left: 0 }),
-        };
-    }, [isMobileLayout, opened, size, spaceToBottom, spaceToTop]);
     const selected = values.find((value) => value.id === selectedId);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...container,
-            userSelect: 'none',
-            WebkitUserSelect: 'none',
-            display: 'inline-flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
-                hovered,
-                selected: opened,
-            }),
-        };
-    }, [hovered, opened]);
-    const foregroundColor = hovered || opened ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
-    const labelStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...label,
-            width: labelWidth,
-            color: foregroundColor,
-        };
-    }, [foregroundColor, labelWidth]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("button", { ref: ref, title: title, "aria-label": title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [renderLeftItem ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderLeftItem(foregroundColor), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
-                        ] })) : null, selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: labelStyle, children: selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(caret_1.CaretDown, { color: hovered || opened ? colors_1.WHITE : unhoveredIconColor })
-                ] }), portalStyle
-                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, onPointerDown: onOverlayPointerDown, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((value) => selected && value.id === selected.id), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
-                : null] }));
+    const segments = [
+        {
+            ariaLabel: title,
+            buttonId: null,
+            disabled: false,
+            idleColor: unhoveredIconColor,
+            leaveLeftSpace: true,
+            onOpenChange: null,
+            renderContent: (color) => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderLeftItem ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderLeftItem(color), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
+                        ] })) : null, selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: { ...label, width: labelWidth }, children: selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(caret_1.CaretDown, { color: color })
+                ] })),
+            segmentId: 'selector',
+            selectedId,
+            style: { fontFamily: 'inherit', padding: '0 4px' },
+            title,
+            type: 'menu',
+            values,
+        },
+    ];
+    return (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle, title: null }));
 };
 exports.TimelineCombobox = TimelineCombobox;

package/dist/components/TimelineInOutToggle.js

@@ -22,6 +22,9 @@ const style = {
     width: 17,
     height: 17,
 };
+const buttonStyle = {
+    width: 18,
+};
 exports.inOutHandles = (0, react_1.createRef)();
 exports.defaultInOutValue = { inFrame: null, outFrame: null };
 const TimelineInOutPointToggle = () => {
@@ -243,7 +246,7 @@ const TimelineInOutPointToggle = () => {
         };
     }, [confId, onInMark, onInOutClear, onOutMark]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? color : colors_1.BLUE, style: style })) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? color : colors_1.BLUE, style: style })) })
+            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), style: buttonStyle, onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? color : colors_1.BLUE, style: style })) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), style: buttonStyle, onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? color : colors_1.BLUE, style: style })) })
         ] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/components/duplicate-jsx-node-api.d.ts

@@ -0,0 +1,2 @@
+import type { DuplicateJsxNodeRequest, DuplicateJsxNodeResponse } from '@remotion/studio-shared';
+export declare const duplicateJsxNode: (request: DuplicateJsxNodeRequest) => Promise<DuplicateJsxNodeResponse>;

package/dist/components/duplicate-jsx-node-api.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.duplicateJsxNode = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+const duplicateJsxNode = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.duplicateJsxNode(request)
+        : (0, call_api_1.callApi)('/api/duplicate-jsx-node', request);
+};
+exports.duplicateJsxNode = duplicateJsxNode;

package/dist/components/effect-drag-and-drop.js

@@ -45,10 +45,7 @@ const addEffectToSequence = async ({ clientId, effect, fileName, nodePath, }) =>
             effectConfig: effect.config,
             clientId,
         });
-        if (result.success) {
-            (0, NotificationCenter_1.showNotification)(`Added ${effect.name}()`, 2000);
-        }
-        else {
+        if (!result.success) {
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);
         }
     }

package/dist/components/handle-drop.d.ts

@@ -1,7 +1,7 @@
 import type { Dimensions } from '../helpers/is-current-selected-still';
 import { type InsertElementDropPosition } from './import-assets';
 import type { SvgImportMode } from './SvgImportDialog';
-export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, preferCompositionStart, }: {
+export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, localFiles, preferCompositionStart, }: {
     chooseSvgImportMode: () => Promise<SvgImportMode | null>;
     compositionFile: string;
     compositionId: string;
@@ -10,5 +10,6 @@ export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, compos
     event: DragEvent;
     fps: number;
     from: number | null;
+    localFiles: File[] | null;
     preferCompositionStart: boolean;
 }) => Promise<void>;

package/dist/components/handle-drop.js

@@ -6,11 +6,11 @@ const drop_handler_data_1 = require("./drop-handler-data");
 const element_drag_and_drop_1 = require("./element-drag-and-drop");
 const element_install_request_1 = require("./element-install-request");
 const import_assets_1 = require("./import-assets");
-const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, preferCompositionStart, }) => {
+const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, localFiles, preferCompositionStart, }) => {
     var _a;
     var _b;
-    if ((0, drop_handler_data_1.isFileDragEvent)(event)) {
-        const files = Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
+    if (localFiles !== null || (0, drop_handler_data_1.isFileDragEvent)(event)) {
+        const files = localFiles !== null && localFiles !== void 0 ? localFiles : Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
         if (files.length === 0) {
             return;
         }

package/dist/components/import-assets.js

@@ -187,30 +187,6 @@ exports.getAssetElementForDroppedFile = getAssetElementForDroppedFile;
 const isSvgFile = (file) => file.name.toLowerCase().endsWith('.svg');
 const hasSvgFile = (files) => files.some(isSvgFile);
 exports.hasSvgFile = hasSvgFile;
-const getAssetLabel = (element) => {
-    if (element.type !== 'asset') {
-        throw new Error('Expected asset element');
-    }
-    if (element.assetType === 'image') {
-        return '<CanvasImage>';
-    }
-    if (element.assetType === 'video') {
-        return '<Video>';
-    }
-    if (element.assetType === 'gif') {
-        return '<Gif>';
-    }
-    if (element.assetType === 'animated-image') {
-        return '<AnimatedImage>';
-    }
-    if (element.assetType === 'audio') {
-        return '<Audio>';
-    }
-    throw new Error('Unsupported asset type');
-};
-const getComponentLabel = (component) => {
-    return `<${component.componentName}>`;
-};
 const getCenteredPosition = ({ dimensions, dropPosition, }) => {
     if (dropPosition === null) {
         return null;
@@ -478,14 +454,6 @@ const pickFilesToImport = ({ multiple = true, } = {}) => {
     });
 };
 exports.pickFilesToImport = pickFilesToImport;
-const notifyInsertedAssets = (insertedLabels) => {
-    if (insertedLabels.length === 1) {
-        (0, NotificationCenter_1.showNotification)(`Added ${insertedLabels[0]} to source file`, 2000);
-    }
-    else if (insertedLabels.length > 1) {
-        (0, NotificationCenter_1.showNotification)(`Added ${insertedLabels.length} assets to source file`, 2000);
-    }
-};
 const notifyUnsupportedFiles = (unsupportedFiles) => {
     if (unsupportedFiles.length === 1) {
         (0, NotificationCenter_1.showNotification)(`Cannot add ${unsupportedFiles[0]}: Unsupported file type`, 3000);
@@ -517,6 +485,10 @@ const insertCompositionElement = async ({ compositionFile, compositionId, elemen
     return true;
 };
 const downloadRemoteAsset = (url) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (browserStudioOperations) {
+        return browserStudioOperations.downloadRemoteAsset({ url });
+    }
     return (0, call_api_1.callApi)('/api/download-remote-asset', { url });
 };
 const importAssets = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, files, fps, from, preferCompositionStart, svgImportMode, }) => {
@@ -536,7 +508,6 @@ const importAssets = async ({ compositionFile, compositionId, destinationDimensi
         (0, NotificationCenter_1.showNotification)(`File with name ${differentExistingFile.name} already exists and is different`, 4000);
         return;
     }
-    const insertedLabels = [];
     const addedStaticFiles = [];
     const unsupportedFiles = [];
     const notifyAddedStaticFiles = () => {
@@ -576,7 +547,6 @@ const importAssets = async ({ compositionFile, compositionId, destinationDimensi
                     notifyAddedStaticFiles();
                     return;
                 }
-                insertedLabels.push('<Interactive.Svg>');
                 continue;
             }
             const element = (0, exports.getAssetElementForDroppedFile)({
@@ -626,10 +596,8 @@ const importAssets = async ({ compositionFile, compositionId, destinationDimensi
                 notifyAddedStaticFiles();
                 return;
             }
-            insertedLabels.push(getAssetLabel(element));
         }
         notifyAddedStaticFiles();
-        notifyInsertedAssets(insertedLabels);
         notifyUnsupportedFiles(unsupportedFiles);
     }
     catch (error) {
@@ -678,7 +646,7 @@ const insertSvgMarkup = async ({ compositionFile, compositionId, destinationDime
         catch (_a) {
             dimensions = null;
         }
-        const inserted = await insertCompositionElement({
+        await insertCompositionElement({
             compositionFile,
             compositionId,
             from: null,
@@ -692,9 +660,6 @@ const insertSvgMarkup = async ({ compositionFile, compositionId, destinationDime
                 }),
             },
         });
-        if (inserted) {
-            notifyInsertedAssets(['<Interactive.Svg>']);
-        }
     }
     catch (error) {
         (0, NotificationCenter_1.showNotification)(`Could not add SVG: ${error instanceof Error ? error.message : String(error)}`, 4000);
@@ -720,7 +685,7 @@ const importRemoteAsset = async ({ compositionFile, compositionId, destinationDi
                 fps,
             })
             : null;
-        const inserted = await insertCompositionElement({
+        await insertCompositionElement({
             compositionFile,
             compositionId,
             from: (0, exports.getFromForDrop)({
@@ -739,10 +704,6 @@ const importRemoteAsset = async ({ compositionFile, compositionId, destinationDi
                 }),
             },
         });
-        if (!inserted) {
-            return;
-        }
-        notifyInsertedAssets([getAssetLabel(element)]);
     }
     catch (error) {
         (0, NotificationCenter_1.showNotification)(`Could not add remote asset: ${error instanceof Error ? error.message : String(error)}`, 4000);
@@ -768,7 +729,7 @@ const insertRemoteAudio = async ({ compositionFile, compositionId, fps, from, pr
             }),
             position: null,
         };
-        const inserted = await insertCompositionElement({
+        await insertCompositionElement({
             compositionFile,
             compositionId,
             element,
@@ -778,10 +739,6 @@ const insertRemoteAudio = async ({ compositionFile, compositionId, fps, from, pr
                 preferCompositionStart,
             }),
         });
-        if (!inserted) {
-            return;
-        }
-        notifyInsertedAssets([getAssetLabel(element)]);
     }
     catch (error) {
         (0, NotificationCenter_1.showNotification)(`Could not add sound effect: ${error instanceof Error ? error.message : String(error)}`, 4000);
@@ -793,7 +750,6 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
     if (assetPaths.length === 0) {
         return;
     }
-    const insertedLabels = [];
     const unsupportedFiles = [];
     try {
         for (const assetPath of assetPaths) {
@@ -832,9 +788,7 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
             if (!inserted) {
                 return;
             }
-            insertedLabels.push(getAssetLabel(element));
         }
-        notifyInsertedAssets(insertedLabels);
         notifyUnsupportedFiles(unsupportedFiles);
     }
     catch (error) {
@@ -844,7 +798,7 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
 exports.insertExistingAssets = insertExistingAssets;
 const insertComponent = async ({ component, compositionFile, compositionId, dropPosition, from, preferCompositionStart, }) => {
     try {
-        const inserted = await insertCompositionElement({
+        await insertCompositionElement({
             compositionFile,
             compositionId,
             from: (0, exports.getFromForDrop)({
@@ -864,10 +818,6 @@ const insertComponent = async ({ component, compositionFile, compositionId, drop
                 }),
             },
         });
-        if (!inserted) {
-            return;
-        }
-        (0, NotificationCenter_1.showNotification)(`Added ${getComponentLabel(component)} to source file`, 2000);
     }
     catch (error) {
         (0, NotificationCenter_1.showNotification)(`Could not add component: ${error instanceof Error ? error.message : String(error)}`, 4000);
@@ -900,7 +850,7 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
             width: calculated.width,
             height: calculated.height,
         };
-        const inserted = await insertCompositionElement({
+        await insertCompositionElement({
             compositionFile,
             compositionId,
             from: (0, exports.getFromForDrop)({
@@ -922,10 +872,6 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
                 }),
             },
         });
-        if (!inserted) {
-            return;
-        }
-        (0, NotificationCenter_1.showNotification)(`Added ${composition.compositionId} to ${compositionId}`, 2000);
     }
     catch (error) {
         (0, NotificationCenter_1.showNotification)(`Could not add composition: ${error instanceof Error ? error.message : String(error)}`, 4000);
@@ -951,9 +897,7 @@ const insertElement = async ({ compositionFile, compositionId, element, expected
                 ? response.reason
                 : `Element file changed: ${response.conflict.filePath}`;
             (0, NotificationCenter_1.showNotification)(`Could not add Element: ${reason}`, 4000);
-            return;
         }
-        (0, NotificationCenter_1.showNotification)(`Added ${element.displayName} to source file`, 2000);
     }
     catch (error) {
         (0, NotificationCenter_1.showNotification)(`Could not add Element: ${error instanceof Error ? error.message : String(error)}`, 4000);

package/dist/components/keyboard-shortcuts.d.ts

@@ -0,0 +1,10 @@
+export type KeyboardShortcut = {
+    readonly action: string;
+    readonly chords: readonly (readonly string[])[];
+};
+export type KeyboardShortcutGroup = {
+    readonly name: string;
+    readonly shortcuts: readonly KeyboardShortcut[];
+};
+export declare const keyboardShortcutGroups: readonly KeyboardShortcutGroup[];
+export declare const askAIKeyboardShortcutGroup: KeyboardShortcutGroup;

package/dist/components/keyboard-shortcuts.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.askAIKeyboardShortcutGroup = exports.keyboardShortcutGroups = void 0;
+const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
+const is_mac_1 = require("../helpers/is-mac");
+exports.keyboardShortcutGroups = [
+    {
+        name: 'Playback',
+        shortcuts: [
+            { action: '1 second back', chords: [['Shift', '←']] },
+            { action: 'Previous frame', chords: [['←']] },
+            { action: 'Play / Pause', chords: [['Space']] },
+            { action: 'Next frame', chords: [['→']] },
+            { action: '1 second forward', chords: [['Shift', '→']] },
+            { action: 'Jump to beginning', chords: [['A']] },
+            { action: 'Jump to end', chords: [['E']] },
+            { action: 'Reverse playback', chords: [['J']] },
+            { action: 'Pause', chords: [['K']] },
+            { action: 'Play / Speed up', chords: [['L']] },
+            { action: 'Go to frame', chords: [['G']] },
+            {
+                action: 'Pause & return to playback start',
+                chords: [['Enter']],
+            },
+        ],
+    },
+    {
+        name: 'Sidebar',
+        shortcuts: [
+            {
+                action: 'Toggle left sidebar',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'B']],
+            },
+            {
+                action: 'Toggle right sidebar',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'J']],
+            },
+            {
+                action: 'Toggle both sidebars',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'G']],
+            },
+        ],
+    },
+    {
+        name: 'View',
+        shortcuts: [
+            { action: 'Enter fullscreen', chords: [['F']] },
+            { action: 'Exit fullscreen', chords: [['Esc']] },
+            { action: 'Enable snapping', chords: [['Shift', 'M']] },
+        ],
+    },
+    {
+        name: 'Navigation',
+        shortcuts: [
+            { action: 'Previous composition', chords: [['PageUp']] },
+            { action: 'Next composition', chords: [['PageDown']] },
+            {
+                action: 'Render, unless a sequence or prop is selected',
+                chords: [['R']],
+            },
+            {
+                action: 'Checkerboard, unless a sequence or prop is selected',
+                chords: [['T']],
+            },
+            { action: 'Show keyboard shortcuts', chords: [['?']] },
+            {
+                action: 'Quick Switcher',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'K']],
+            },
+        ],
+    },
+    {
+        name: 'Playback range',
+        shortcuts: [
+            { action: 'Set In Point', chords: [['I']] },
+            { action: 'Set Out Point', chords: [['O']] },
+            { action: 'Clear In/Out Points', chords: [['X']] },
+        ],
+    },
+    {
+        name: 'Zoom',
+        shortcuts: [
+            { action: 'Zoom in', chords: [['+']] },
+            { action: 'Zoom out', chords: [['-']] },
+            { action: 'Reset zoom', chords: [['0']] },
+        ],
+    },
+    {
+        name: 'Props Editor',
+        shortcuts: [
+            { action: 'Undo', chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'Z']] },
+            {
+                action: 'Redo',
+                chords: [
+                    is_mac_1.isMac
+                        ? [ShortcutHint_1.cmdOrCtrlCharacter, 'Shift', 'Z']
+                        : [ShortcutHint_1.cmdOrCtrlCharacter, 'Y'],
+                ],
+            },
+        ],
+    },
+    {
+        name: 'Interactivity',
+        shortcuts: [
+            { action: 'Select range / axis lock drag', chords: [['Shift']] },
+            { action: 'Toggle selection', chords: [[ShortcutHint_1.cmdOrCtrlCharacter]] },
+            {
+                action: 'Select sequence rows',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'A']],
+            },
+            { action: 'Select translate prop', chords: [['P']] },
+            { action: 'Select opacity prop', chords: [['T']] },
+            { action: 'Select rotate prop', chords: [['R']] },
+            { action: 'Select scale prop', chords: [['S']] },
+            {
+                action: 'Duplicate sequences',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'D']],
+            },
+            {
+                action: 'Copy effects / values',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'C']],
+            },
+            { action: 'Cut effects', chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'X']] },
+            {
+                action: 'Paste effects / values',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'V']],
+            },
+            { action: 'Delete / reset selection', chords: [['Del'], ['⌫']] },
+        ],
+    },
+];
+exports.askAIKeyboardShortcutGroup = {
+    name: 'AI',
+    shortcuts: [{ action: 'Ask AI', chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'I']] }],
+};

package/dist/components/selected-outline-control-layout.js

@@ -64,14 +64,10 @@ const getSelectedOutlineControlLayout = (points) => {
     const targetHalfSizeY = isSmallY ? targetHalfSize / 2 : targetHalfSize;
     const rotationHandleRadius = Math.max(targetHalfSizeX, targetHalfSizeY) * 1.5;
     const scaleEdges = ['top', 'right', 'bottom', 'left'].filter((edge) => {
-        // Preserve one scale control per axis when opposite edge targets would overlap.
-        if (edge === 'top') {
+        if (edge === 'top' || edge === 'bottom') {
             return !isTinyY;
         }
-        if (edge === 'left') {
-            return !isTinyX;
-        }
-        return true;
+        return !isTinyX;
     });
     const rotationCorners = ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => ({
         corner,