@remotion/studio 4.0.494 → 4.0.496

package/dist/components/Timeline/TimelineRowLayoutContext.js

@@ -5,9 +5,15 @@ const react_1 = require("react");
 const timeline_row_layout_1 = require("./timeline-row-layout");
 exports.INSPECTOR_TIMELINE_ROW_LAYOUT = {
     basePadding: timeline_row_layout_1.INSPECTOR_ROW_BASE_PADDING,
+    highlightSelectedLabel: false,
     keyframeControlsPadding: 0,
+    rowBorderRadius: 4,
+    rowHorizontalMargin: 4,
 };
 exports.TimelineRowLayoutContext = (0, react_1.createContext)({
     basePadding: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
+    highlightSelectedLabel: true,
     keyframeControlsPadding: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
+    rowBorderRadius: 0,
+    rowHorizontalMargin: 0,
 });

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

@@ -2,11 +2,12 @@ import React from 'react';
 import type { _InternalTypes, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineSequenceItem: React.FC<{
+    readonly children: React.ReactNode;
     readonly sequence: TSequence;
     readonly connectedCompositions: readonly _InternalTypes['AnyComposition'][];
     readonly nestedDepth: number;
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly keyframeDisplayOffset: number;
     readonly sequenceFrameOffset: number;
-    readonly trackIndex: number;
+    readonly siblingIndex: number;
 }>;

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -115,6 +115,14 @@ const sequenceReorderLineBase = {
     right: 0,
     zIndex: 1,
 };
+const sequenceReorderAfterLineWrapper = {
+    height: 0,
+    position: 'relative',
+};
+const sequenceReorderAfterLine = {
+    ...sequenceReorderLineBase,
+    top: -1,
+};
 const sequenceReorderRejectionStyle = {
     backgroundColor: colors_1.BLACK_ALPHA_85,
     border: colors_1.BORDER_WHITE_ALPHA_20,
@@ -147,7 +155,7 @@ const getSequenceReorderDragData = (dataTransfer) => {
     try {
         const parsed = JSON.parse(value);
         if (typeof parsed.nodePathKey === 'string' &&
-            typeof parsed.trackIndex === 'number' &&
+            typeof parsed.siblingIndex === 'number' &&
             (typeof parsed.parentId === 'string' || parsed.parentId === null) &&
             typeof parsed.fileName === 'string' &&
             parsed.nodePath &&
@@ -163,7 +171,7 @@ const getSequenceReorderDragData = (dataTransfer) => {
 const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
-const TimelineSequenceItem = ({ connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, trackIndex, }) => {
+const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, siblingIndex, }) => {
     var _a, _b, _c;
     var _d, _e, _f;
     const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
@@ -328,12 +336,12 @@ const TimelineSequenceItem = ({ connectedCompositions, nestedDepth, sequence, no
         }
         const rect = e.currentTarget.getBoundingClientRect();
         const before = e.clientY < rect.top + rect.height / 2;
-        const insertionIndex = before ? trackIndex : trackIndex + 1;
+        const insertionIndex = before ? siblingIndex : siblingIndex + 1;
         const toIndex = getDestinationIndex({
-            fromIndex: dragData.trackIndex,
+            fromIndex: dragData.siblingIndex,
             insertionIndex,
         });
-        if (toIndex === dragData.trackIndex) {
+        if (toIndex === dragData.siblingIndex) {
             return {
                 type: 'invalid',
                 reason: 'This sequence is already in that position.',
@@ -349,7 +357,7 @@ const TimelineSequenceItem = ({ connectedCompositions, nestedDepth, sequence, no
         nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath,
         nodePathKey,
         parentId,
-        trackIndex,
+        siblingIndex,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
     const onSequenceDragStart = (0, react_1.useCallback)((e) => {
@@ -363,7 +371,7 @@ const TimelineSequenceItem = ({ connectedCompositions, nestedDepth, sequence, no
         const dragData = {
             nodePath,
             nodePathKey,
-            trackIndex,
+            siblingIndex,
             parentId,
             fileName: validatedLocation.source,
         };
@@ -376,7 +384,7 @@ const TimelineSequenceItem = ({ connectedCompositions, nestedDepth, sequence, no
         nodePath,
         nodePathKey,
         parentId,
-        trackIndex,
+        siblingIndex,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
     const onSequenceDragEnd = (0, react_1.useCallback)(() => {
@@ -747,12 +755,12 @@ const TimelineSequenceItem = ({ connectedCompositions, nestedDepth, sequence, no
         validatedLocation !== null &&
         ((_c = sequence.controls) === null || _c === void 0 ? void 0 : _c.supportsEffects) === true;
     const sequenceReorderLineStyle = (0, react_1.useMemo)(() => {
-        if (!sequenceDropIndicator) {
+        if (sequenceDropIndicator !== 'before') {
             return null;
         }
         return {
             ...sequenceReorderLineBase,
-            ...(sequenceDropIndicator === 'before' ? { top: -1 } : { bottom: -1 }),
+            top: -1,
         };
     }, [sequenceDropIndicator]);
     const onEffectDragOver = (0, react_1.useCallback)((e) => {
@@ -813,6 +821,6 @@ const TimelineSequenceItem = ({ connectedCompositions, nestedDepth, sequence, no
                 isExpanded &&
                 hasExpandableContent &&
                 nodePathInfo &&
-                validatedLocation ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, validatedLocation: validatedLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth, keyframeDisplayOffset: keyframeDisplayOffset })) : null] }));
+                validatedLocation ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, validatedLocation: validatedLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth, keyframeDisplayOffset: keyframeDisplayOffset })) : null, children, sequenceDropIndicator === 'after' ? (jsx_runtime_1.jsx("div", { style: sequenceReorderAfterLineWrapper, children: jsx_runtime_1.jsx("div", { style: sequenceReorderAfterLine }) })) : null] }));
 };
 exports.TimelineSequenceItem = TimelineSequenceItem;

package/dist/components/Timeline/nest-timeline-tracks.d.ts

@@ -0,0 +1,8 @@
+export type NestedTimelineTrack<T> = {
+    readonly track: T;
+    readonly siblingIndex: number;
+    readonly children: NestedTimelineTrack<T>[];
+};
+export declare const nestTimelineTracks: <T extends {
+    readonly depth: number;
+}>(timeline: readonly T[]) => NestedTimelineTrack<T>[];

package/dist/components/Timeline/nest-timeline-tracks.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nestTimelineTracks = void 0;
+const nestTimelineTracks = (timeline) => {
+    const roots = [];
+    const stack = [];
+    for (let trackIndex = 0; trackIndex < timeline.length; trackIndex++) {
+        const track = timeline[trackIndex];
+        while (stack.length > 0 &&
+            stack[stack.length - 1].track.depth >= track.depth) {
+            stack.pop();
+        }
+        const parent = stack[stack.length - 1];
+        const siblings = parent ? parent.children : roots;
+        const nestedTrack = {
+            track,
+            siblingIndex: siblings.length,
+            children: [],
+        };
+        siblings.push(nestedTrack);
+        stack.push(nestedTrack);
+    }
+    return roots;
+};
+exports.nestTimelineTracks = nestTimelineTracks;

package/dist/components/Timeline/timeline-scroll-logic.d.ts

@@ -44,12 +44,16 @@ export declare const viewportClientXToScrollContentX: ({ clientX, scrollEl, }: {
     clientX: number;
     scrollEl: HTMLDivElement;
 }) => number;
-export declare const zoomAndPreserveCursor: ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, anchorFrame, anchorContentX, }: {
-    oldZoom: number;
-    newZoom: number;
+export declare const getScrollLeftToKeepCursorInPlace: ({ anchorContentX, oldScrollLeft, oldTimelineWidth, newTimelineWidth, }: {
+    anchorContentX: number;
+    oldScrollLeft: number;
+    oldTimelineWidth: number;
+    newTimelineWidth: number;
+}) => number;
+export declare const prepareToPreserveTimelineCursor: ({ currentFrame, currentDurationInFrames, anchorFrame, anchorContentX, }: {
     currentFrame: number;
     currentDurationInFrames: number;
     anchorFrame: number | null;
     /** Prefer this over `anchorFrame` when not null (subpixel-accurate anchor). */
     anchorContentX: number | null;
-}) => void;
+}) => () => void;

package/dist/components/Timeline/timeline-scroll-logic.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.zoomAndPreserveCursor = exports.viewportClientXToScrollContentX = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
+exports.prepareToPreserveTimelineCursor = exports.getScrollLeftToKeepCursorInPlace = exports.viewportClientXToScrollContentX = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_refs_1 = require("./timeline-refs");
@@ -214,24 +214,38 @@ const viewportClientXToScrollContentX = ({ clientX, scrollEl, }) => {
     return clampedClientX + scrollEl.scrollLeft - rect.left;
 };
 exports.viewportClientXToScrollContentX = viewportClientXToScrollContentX;
-const zoomAndPreserveCursor = ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, anchorFrame, anchorContentX, }) => {
-    const ratio = newZoom / oldZoom;
-    if (ratio === 1) {
-        return;
-    }
+const getScrollLeftToKeepCursorInPlace = ({ anchorContentX, oldScrollLeft, oldTimelineWidth, newTimelineWidth, }) => {
+    const oldUsableWidth = getUsableTimelineWidth(oldTimelineWidth);
+    const newUsableWidth = getUsableTimelineWidth(newTimelineWidth);
+    const clampedAnchorContentX = Math.min(Math.max(anchorContentX, timeline_layout_1.TIMELINE_PADDING), timeline_layout_1.TIMELINE_PADDING + oldUsableWidth);
+    const cursorX = clampedAnchorContentX - oldScrollLeft;
+    const anchorInUsableWidth = clampedAnchorContentX - timeline_layout_1.TIMELINE_PADDING;
+    const newAnchorContentX = timeline_layout_1.TIMELINE_PADDING + (anchorInUsableWidth / oldUsableWidth) * newUsableWidth;
+    return newAnchorContentX - cursorX;
+};
+exports.getScrollLeftToKeepCursorInPlace = getScrollLeftToKeepCursorInPlace;
+const prepareToPreserveTimelineCursor = ({ currentFrame, currentDurationInFrames, anchorFrame, anchorContentX, }) => {
     const { current } = timeline_refs_1.scrollableRef;
     if (!current) {
-        return;
+        return () => undefined;
     }
-    const frameIncrement = getFrameIncrement(currentDurationInFrames);
+    const oldTimelineWidth = current.scrollWidth;
+    const oldScrollLeft = current.scrollLeft;
+    const frameIncrement = (0, exports.getFrameIncrementFromWidth)(currentDurationInFrames, oldTimelineWidth);
     const frameForScroll = anchorFrame !== null && anchorFrame !== void 0 ? anchorFrame : currentFrame;
     const prevCursorPosition = anchorContentX !== null
-        ? Math.min(Math.max(anchorContentX, 0), current.scrollWidth)
+        ? anchorContentX
         : frameIncrement * frameForScroll + timeline_layout_1.TIMELINE_PADDING;
-    const newCursorPosition = ratio * (prevCursorPosition - timeline_layout_1.TIMELINE_PADDING) + timeline_layout_1.TIMELINE_PADDING;
-    current.scrollLeft += newCursorPosition - prevCursorPosition;
-    // Playhead position is synced in `TimelineSlider` `useLayoutEffect` using
-    // measured `sliderAreaRef.clientWidth` so it matches layout after zoom
-    // (avoids fighting React `style` with stale `timelineWidth` during pinch).
+    return () => {
+        if (timeline_refs_1.scrollableRef.current !== current) {
+            return;
+        }
+        current.scrollLeft = (0, exports.getScrollLeftToKeepCursorInPlace)({
+            anchorContentX: prevCursorPosition,
+            oldScrollLeft,
+            oldTimelineWidth,
+            newTimelineWidth: current.scrollWidth,
+        });
+    };
 };
-exports.zoomAndPreserveCursor = zoomAndPreserveCursor;
+exports.prepareToPreserveTimelineCursor = prepareToPreserveTimelineCursor;

package/dist/components/import-assets.d.ts

@@ -43,6 +43,7 @@ export declare const getAssetElementForDroppedFile: ({ fileType, src, }: {
     } | null;
     position: InsertableCompositionElementPosition | null;
 } | null;
+export declare const hasSvgFile: (files: File[]) => boolean;
 export declare const getElementPositionForDrop: ({ dimensions, dropPosition, }: {
     dimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
@@ -67,12 +68,27 @@ export declare const getComponentDimensions: (component: {
 export declare const pickFilesToImport: ({ multiple, }?: {
     readonly multiple?: boolean | undefined;
 }) => Promise<File[]>;
-export declare const importAssets: ({ compositionFile, compositionId, destinationDimensions, dropPosition, files, }: {
+export declare const importAssets: ({ compositionFile, compositionId, destinationDimensions, dropPosition, files, svgImportMode, }: {
     compositionFile: string;
     compositionId: string;
     destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
     files: File[];
+    svgImportMode: "image" | "inline";
+}) => Promise<void>;
+export declare const importFigmaClipboard: ({ compositionFile, compositionId, destinationDimensions, dropPosition, html, }: {
+    compositionFile: string;
+    compositionId: string;
+    destinationDimensions: Dimensions | null;
+    dropPosition: InsertElementDropPosition | null;
+    html: string;
+}) => Promise<void>;
+export declare const insertSvgMarkup: ({ compositionFile, compositionId, destinationDimensions, dropPosition, markup, }: {
+    compositionFile: string;
+    compositionId: string;
+    destinationDimensions: Dimensions | null;
+    dropPosition: InsertElementDropPosition | null;
+    markup: string;
 }) => Promise<void>;
 export declare const importRemoteAsset: ({ compositionFile, compositionId, destinationDimensions, dropPosition, url, }: {
     compositionFile: string;

package/dist/components/import-assets.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertElement = exports.insertComposition = exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getComponentDimensions = exports.getAssetPositionForDrop = exports.getCompositionPositionForDrop = exports.getElementPositionForDrop = exports.getAssetElementForDroppedFile = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
+exports.insertElement = exports.insertComposition = exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.insertSvgMarkup = exports.importFigmaClipboard = exports.importAssets = exports.pickFilesToImport = exports.getComponentDimensions = exports.getAssetPositionForDrop = exports.getCompositionPositionForDrop = exports.getElementPositionForDrop = exports.hasSvgFile = exports.getAssetElementForDroppedFile = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
 const media_utils_1 = require("@remotion/media-utils");
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const get_static_files_1 = require("../api/get-static-files");
 const write_static_file_1 = require("../api/write-static-file");
+const clipboard_figma_1 = require("../helpers/clipboard-figma");
 const install_required_package_1 = require("../helpers/install-required-package");
 const call_api_1 = require("./call-api");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -156,12 +157,15 @@ const getAssetElementForDroppedFile = ({ fileType, src, }) => {
     return (0, exports.getAssetElementFromPath)(src);
 };
 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 '<Img>';
+        return '<CanvasImage>';
     }
     if (element.assetType === 'video') {
         return '<Video>';
@@ -406,7 +410,7 @@ const notifyUnsupportedFiles = (unsupportedFiles) => {
         (0, NotificationCenter_1.showNotification)(`Skipped ${unsupportedFiles.length} unsupported files`, 3000);
     }
 };
-const insertAssetElement = async ({ compositionFile, compositionId, element, }) => {
+const insertCompositionElement = async ({ compositionFile, compositionId, element, }) => {
     const requiredPackage = (0, studio_shared_1.getRequiredPackageForInsertableElement)(element);
     await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [requiredPackage] : []);
     const result = await (0, call_api_1.callApi)('/api/insert-jsx-element', {
@@ -423,13 +427,16 @@ const insertAssetElement = async ({ compositionFile, compositionId, element, })
 const downloadRemoteAsset = (url) => {
     return (0, call_api_1.callApi)('/api/download-remote-asset', { url });
 };
-const importAssets = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, files, }) => {
+const importAssets = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, files, svgImportMode, }) => {
     var _a;
     if (files.length === 0) {
         return;
     }
     const staticFiles = (0, get_static_files_1.getStaticFiles)();
     const differentExistingFile = files.find((file) => {
+        if (isSvgFile(file) && svgImportMode === 'inline') {
+            return false;
+        }
         return staticFiles.some((existingStaticFile) => existingStaticFile.name === file.name &&
             existingStaticFile.sizeInBytes !== file.size);
     });
@@ -453,6 +460,28 @@ const importAssets = async ({ compositionFile, compositionId, destinationDimensi
         for (const file of files) {
             const contents = await file.arrayBuffer();
             const fileType = (0, studio_shared_1.detectFileType)(new Uint8Array(contents));
+            const dimensions = await getFileDimensionsOrNull({ file, fileType });
+            if (isSvgFile(file) && svgImportMode === 'inline') {
+                const svgInserted = await insertCompositionElement({
+                    compositionFile,
+                    compositionId,
+                    element: {
+                        type: 'svg',
+                        markup: new TextDecoder().decode(contents),
+                        position: (0, exports.getAssetPositionForDrop)({
+                            assetDimensions: dimensions,
+                            destinationDimensions,
+                            dropPosition,
+                        }),
+                    },
+                });
+                if (!svgInserted) {
+                    notifyAddedStaticFiles();
+                    return;
+                }
+                insertedLabels.push('<Interactive.Svg>');
+                continue;
+            }
             const element = (0, exports.getAssetElementForDroppedFile)({
                 fileType,
                 src: file.name,
@@ -470,9 +499,8 @@ const importAssets = async ({ compositionFile, compositionId, destinationDimensi
                 });
                 addedStaticFiles.push(file.name);
             }
-            const dimensions = await getFileDimensionsOrNull({ file, fileType });
             const resolvedDimensions = (_a = element.dimensions) !== null && _a !== void 0 ? _a : dimensions;
-            const inserted = await insertAssetElement({
+            const inserted = await insertCompositionElement({
                 compositionFile,
                 compositionId,
                 element: {
@@ -500,6 +528,63 @@ const importAssets = async ({ compositionFile, compositionId, destinationDimensi
     }
 };
 exports.importAssets = importAssets;
+const importFigmaClipboard = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, html, }) => {
+    try {
+        const converted = await (0, call_api_1.callApi)('/api/convert-figma-clipboard-to-svg', {
+            html,
+        });
+        if (!converted.success) {
+            (0, NotificationCenter_1.showNotification)((0, clipboard_figma_1.formatFigmaClipboardErrorNotification)(converted.reason), 8000);
+            return;
+        }
+        await (0, exports.insertSvgMarkup)({
+            compositionFile,
+            compositionId,
+            destinationDimensions,
+            dropPosition,
+            markup: converted.svg,
+        });
+    }
+    catch (error) {
+        (0, NotificationCenter_1.showNotification)((0, clipboard_figma_1.formatFigmaClipboardErrorNotification)(error instanceof Error ? error.message : String(error)), 8000);
+    }
+};
+exports.importFigmaClipboard = importFigmaClipboard;
+const insertSvgMarkup = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, markup, }) => {
+    try {
+        const objectUrl = URL.createObjectURL(new Blob([markup], { type: 'image/svg+xml' }));
+        let dimensions = null;
+        try {
+            dimensions = await getImageDimensions({
+                revokeObjectUrl: true,
+                src: objectUrl,
+            });
+        }
+        catch (_a) {
+            dimensions = null;
+        }
+        const inserted = await insertCompositionElement({
+            compositionFile,
+            compositionId,
+            element: {
+                type: 'svg',
+                markup,
+                position: (0, exports.getAssetPositionForDrop)({
+                    assetDimensions: dimensions,
+                    destinationDimensions,
+                    dropPosition,
+                }),
+            },
+        });
+        if (inserted) {
+            notifyInsertedAssets(['<Interactive.Svg>']);
+        }
+    }
+    catch (error) {
+        (0, NotificationCenter_1.showNotification)(`Could not add SVG: ${error instanceof Error ? error.message : String(error)}`, 4000);
+    }
+};
+exports.insertSvgMarkup = insertSvgMarkup;
 const importRemoteAsset = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, url, }) => {
     try {
         const { assetPath, created, element } = await downloadRemoteAsset(url);
@@ -510,7 +595,7 @@ const importRemoteAsset = async ({ compositionFile, compositionId, destinationDi
             (0, NotificationCenter_1.showNotification)('Cannot add remote asset: Unsupported asset type', 3000);
             return;
         }
-        const inserted = await insertAssetElement({
+        const inserted = await insertCompositionElement({
             compositionFile,
             compositionId,
             element: {
@@ -546,7 +631,7 @@ const insertRemoteAudio = async ({ compositionFile, compositionId, url, }) => {
         position: null,
     };
     try {
-        const inserted = await insertAssetElement({
+        const inserted = await insertCompositionElement({
             compositionFile,
             compositionId,
             element,
@@ -576,7 +661,7 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
                 continue;
             }
             const dimensions = (_a = element.dimensions) !== null && _a !== void 0 ? _a : (await getStaticAssetDimensionsOrNull(assetPath));
-            const inserted = await insertAssetElement({
+            const inserted = await insertCompositionElement({
                 compositionFile,
                 compositionId,
                 element: {
@@ -604,7 +689,7 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
 exports.insertExistingAssets = insertExistingAssets;
 const insertComponent = async ({ component, compositionFile, compositionId, dropPosition, }) => {
     try {
-        const inserted = await insertAssetElement({
+        const inserted = await insertCompositionElement({
             compositionFile,
             compositionId,
             element: {
@@ -655,7 +740,7 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
             width: calculated.width,
             height: calculated.height,
         };
-        const inserted = await insertAssetElement({
+        const inserted = await insertCompositionElement({
             compositionFile,
             compositionId,
             element: {

package/dist/components/layout.d.ts

@@ -1,6 +1,8 @@
 import type { HTMLAttributes } from 'react';
 import React from 'react';
 export declare const SPACING_UNIT = 8;
+export declare const COMPACT_CONTROL_ROW_HEIGHT = 28;
+export declare const COMPACT_INLINE_ROW_HEIGHT = 22;
 export declare const Spacing: React.FC<{
     readonly x?: number;
     readonly y?: number;

package/dist/components/layout.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Column = exports.Row = exports.Flex = exports.Spacing = exports.SPACING_UNIT = void 0;
+exports.Column = exports.Row = exports.Flex = exports.Spacing = exports.COMPACT_INLINE_ROW_HEIGHT = exports.COMPACT_CONTROL_ROW_HEIGHT = exports.SPACING_UNIT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 exports.SPACING_UNIT = 8;
+exports.COMPACT_CONTROL_ROW_HEIGHT = 28;
+exports.COMPACT_INLINE_ROW_HEIGHT = 22;
 const Spacing = ({ x = 0, y = 0, block = false }) => {
     const style = (0, react_1.useMemo)(() => {
         return {

package/dist/components/open-in-new-window.d.ts

@@ -0,0 +1,2 @@
+import type { SelectionItem } from './NewComposition/ComboBox';
+export declare const getOpenInNewWindowMenuItem: (route: string) => SelectionItem;

package/dist/components/open-in-new-window.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOpenInNewWindowMenuItem = void 0;
+const url_state_1 = require("../helpers/url-state");
+const getOpenInNewWindowMenuItem = (route) => {
+    return {
+        id: 'open-in-new-window',
+        keyHint: null,
+        label: 'Open in new window',
+        leftItem: null,
+        onClick: () => {
+            var _a, _b;
+            const screen = window.screen;
+            const width = Math.min(1200, Math.floor(screen.availWidth * 0.8));
+            const height = Math.min(800, Math.floor(screen.availHeight * 0.8));
+            const displayLeft = (_a = screen.availLeft) !== null && _a !== void 0 ? _a : 0;
+            const displayTop = (_b = screen.availTop) !== null && _b !== void 0 ? _b : 0;
+            const left = Math.round(Math.min(Math.max(window.screenX + (window.outerWidth - width) / 2, displayLeft), displayLeft + screen.availWidth - width));
+            const top = Math.round(Math.min(Math.max(window.screenY + (window.outerHeight - height) / 2, displayTop), displayTop + screen.availHeight - height));
+            window.open((0, url_state_1.getUrlForRoute)(route), '_blank', `popup,width=${width},height=${height},left=${left},top=${top}`);
+        },
+        quickSwitcherLabel: null,
+        subMenu: null,
+        type: 'item',
+        value: 'open-in-new-window',
+    };
+};
+exports.getOpenInNewWindowMenuItem = getOpenInNewWindowMenuItem;

package/dist/components/selected-outline-measurement.d.ts

@@ -58,10 +58,11 @@ type SelectedTransformOriginInfo = {
     readonly displayFrame: number | null;
 };
 export declare const getSelectedTransformOriginInfo: (selectedItems: readonly TimelineSelection[]) => SelectedTransformOriginInfo | null;
-export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideIdsToNodePaths, compositions, }: {
+export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideIdsToNodePaths, compositions, timelinePosition, }: {
     readonly sequences: readonly TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly compositions?: readonly import("remotion").AnyComposition[] | undefined;
+    readonly timelinePosition: number;
 }) => SequenceWithSelectedOutline[];
 export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineTarget[]) => SelectedOutline[];
 export declare const outlinesAreEqual: (a: readonly SelectedOutline[], b: readonly SelectedOutline[]) => boolean;

package/dist/components/selected-outline-measurement.js

@@ -306,7 +306,7 @@ const getSelectedTransformOriginInfo = (selectedItems) => {
     };
 };
 exports.getSelectedTransformOriginInfo = getSelectedTransformOriginInfo;
-const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths, compositions = [], }) => {
+const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths, compositions = [], timelinePosition, }) => {
     return (0, calculate_timeline_1.calculateTimeline)({
         sequences: [...sequences],
         overrideIdsToNodePaths,
@@ -317,6 +317,8 @@ const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths,
             return false;
         }
         return (track.sequence.showInTimeline &&
+            timelinePosition >= track.sequence.from &&
+            timelinePosition < track.sequence.from + track.sequence.duration &&
             track.nodePathInfo.auxiliaryKeys.length === 0);
     })
         .filter((track) => track.sequence.refForOutline !== null)