@remotion/studio 4.0.485 → 4.0.487

package/dist/components/Timeline/save-sequence-prop.d.ts

@@ -1,4 +1,6 @@
+import { type SaveSequencePropSourceEdit } from '@remotion/studio-shared';
 import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
+import { type MoveEffectKeyframeChange, type MoveSequenceKeyframeChange } from './call-move-keyframe';
 export type SetPropStatuses = (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
 export type SaveSequencePropChange = {
     fileName: string;
@@ -7,13 +9,18 @@ export type SaveSequencePropChange = {
     value: unknown;
     defaultValue: string | null;
     schema: InteractivitySchema;
+    sourceEdit?: SaveSequencePropSourceEdit;
 };
 type SaveSequencePropsOptions = {
     changes: SaveSequencePropChange[];
+    movedKeyframes?: {
+        sequenceKeyframes: MoveSequenceKeyframeChange[];
+        effectKeyframes: MoveEffectKeyframeChange[];
+    };
     setPropStatuses: SetPropStatuses;
     clientId: string;
     undoLabel: string;
     redoLabel: string;
 };
-export declare const saveSequenceProps: ({ changes, setPropStatuses, clientId, undoLabel, redoLabel, }: SaveSequencePropsOptions) => Promise<void>;
+export declare const saveSequenceProps: ({ changes, movedKeyframes, setPropStatuses, clientId, undoLabel, redoLabel, }: SaveSequencePropsOptions) => Promise<void>;
 export {};

package/dist/components/Timeline/save-sequence-prop.js

@@ -3,12 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.saveSequenceProps = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
+const call_move_keyframe_1 = require("./call-move-keyframe");
 const save_prop_queue_1 = require("./save-prop-queue");
-const saveSequenceProps = ({ changes, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
-    if (changes.length === 0) {
+const serializeSequencePropValue = (value) => {
+    if (value === undefined) {
+        return { type: 'undefined' };
+    }
+    return { type: 'json', serialized: JSON.stringify(value) };
+};
+const saveSequenceProps = ({ changes, movedKeyframes, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
+    var _a, _b;
+    const sequenceKeyframes = (_a = movedKeyframes === null || movedKeyframes === void 0 ? void 0 : movedKeyframes.sequenceKeyframes) !== null && _a !== void 0 ? _a : [];
+    const effectKeyframes = (_b = movedKeyframes === null || movedKeyframes === void 0 ? void 0 : movedKeyframes.effectKeyframes) !== null && _b !== void 0 ? _b : [];
+    if (changes.length === 0 &&
+        sequenceKeyframes.length === 0 &&
+        effectKeyframes.length === 0) {
         return Promise.resolve();
     }
-    if (changes.length === 1) {
+    if (changes.length === 1 &&
+        sequenceKeyframes.length === 0 &&
+        effectKeyframes.length === 0) {
         const change = changes[0];
         if (change === undefined) {
             throw new Error('Expected a sequence prop change');
@@ -23,24 +37,33 @@ const saveSequenceProps = ({ changes, setPropStatuses, clientId, undoLabel, redo
                 defaultValue: change.defaultValue,
                 schema: change.schema,
             }),
-            apiCall: () => (0, call_api_1.callApi)('/api/save-sequence-props', {
-                edits: [
-                    {
-                        fileName: change.fileName,
-                        nodePath: change.nodePath,
-                        key: change.fieldKey,
-                        value: JSON.stringify(change.value),
-                        defaultValue: change.defaultValue,
-                        schema: change.schema,
-                    },
-                ],
-                clientId,
-                undoLabel,
-                redoLabel,
-            }),
+            apiCall: () => {
+                var _a;
+                return (0, call_api_1.callApi)('/api/save-sequence-props', {
+                    edits: [
+                        {
+                            fileName: change.fileName,
+                            nodePath: change.nodePath,
+                            key: change.fieldKey,
+                            value: serializeSequencePropValue(change.value),
+                            defaultValue: change.defaultValue,
+                            schema: change.schema,
+                            sourceEdit: (_a = change.sourceEdit) !== null && _a !== void 0 ? _a : null,
+                        },
+                    ],
+                    clientId,
+                    undoLabel,
+                    redoLabel,
+                });
+            },
             errorLabel: 'Could not save sequence prop',
         });
     }
+    (0, call_move_keyframe_1.applyOptimisticKeyframeMoves)({
+        sequenceKeyframes,
+        effectKeyframes,
+        setPropStatuses,
+    });
     for (const change of changes) {
         setPropStatuses(change.nodePath, (prev) => (0, studio_shared_1.optimisticUpdateForPropStatuses)({
             previous: prev,
@@ -52,15 +75,36 @@ const saveSequenceProps = ({ changes, setPropStatuses, clientId, undoLabel, redo
     }
     return (0, call_api_1.callApi)('/api/save-sequence-props', {
         edits: changes.map((change) => {
+            var _a;
             return {
                 fileName: change.fileName,
                 nodePath: change.nodePath,
                 key: change.fieldKey,
-                value: JSON.stringify(change.value),
+                value: serializeSequencePropValue(change.value),
                 defaultValue: change.defaultValue,
                 schema: change.schema,
+                sourceEdit: (_a = change.sourceEdit) !== null && _a !== void 0 ? _a : null,
             };
         }),
+        movedKeyframes: {
+            sequenceKeyframes: sequenceKeyframes.map((keyframe) => ({
+                fileName: keyframe.fileName,
+                nodePath: keyframe.nodePath,
+                key: keyframe.fieldKey,
+                fromFrame: keyframe.fromFrame,
+                toFrame: keyframe.toFrame,
+                schema: keyframe.schema,
+            })),
+            effectKeyframes: effectKeyframes.map((keyframe) => ({
+                fileName: keyframe.fileName,
+                sequenceNodePath: keyframe.nodePath,
+                effectIndex: keyframe.effectIndex,
+                key: keyframe.fieldKey,
+                fromFrame: keyframe.fromFrame,
+                toFrame: keyframe.toFrame,
+                schema: keyframe.schema,
+            })),
+        },
         clientId,
         undoLabel,
         redoLabel,

package/dist/components/Timeline/timeline-rotation-field-utils.d.ts

@@ -0,0 +1,5 @@
+export declare const formatTimelineRotationFieldValue: ({ decimalPlaces, fieldSchema, value, }: {
+    readonly decimalPlaces: number;
+    readonly fieldSchema: import("remotion").VisibleFieldSchema;
+    readonly value: string | number;
+}) => string;

package/dist/components/Timeline/timeline-rotation-field-utils.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatTimelineRotationFieldValue = void 0;
+const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
+const timeline_rotation_utils_1 = require("./timeline-rotation-utils");
+const formatTimelineRotationFieldValue = ({ decimalPlaces, fieldSchema, value, }) => {
+    return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+        fieldSchema,
+        value: fieldSchema.type === 'rotation-css' &&
+            typeof value === 'number' &&
+            Number.isFinite(value)
+            ? (0, timeline_rotation_utils_1.serializeCssRotation)(value, decimalPlaces)
+            : value,
+    });
+};
+exports.formatTimelineRotationFieldValue = formatTimelineRotationFieldValue;

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

@@ -172,9 +172,12 @@ const getFrameIncrement = (durationInFrames) => {
     return (0, exports.getFrameIncrementFromWidth)(durationInFrames, width);
 };
 const getFrameIncrementFromWidth = (durationInFrames, width) => {
-    return (width - timeline_layout_1.TIMELINE_PADDING * 2) / durationInFrames;
+    return getUsableTimelineWidth(width) / durationInFrames;
 };
 exports.getFrameIncrementFromWidth = getFrameIncrementFromWidth;
+const getUsableTimelineWidth = (width) => {
+    return Math.max(1, width - timeline_layout_1.TIMELINE_PADDING * 2);
+};
 const getFrameWhileScrollingRight = ({ durationInFrames, width, }) => {
     var _a, _b;
     const nextFrame = calculateFrameWhileScrollingRight({
@@ -193,7 +196,7 @@ const getFrameWhileScrollingRight = ({ durationInFrames, width, }) => {
 exports.getFrameWhileScrollingRight = getFrameWhileScrollingRight;
 const getFrameFromX = ({ clientX, durationInFrames, width, extrapolate, }) => {
     const pos = clientX - timeline_layout_1.TIMELINE_PADDING;
-    const frame = Math.min(durationInFrames - 1, Math.round((0, remotion_1.interpolate)(pos, [0, width - timeline_layout_1.TIMELINE_PADDING * 2], [0, durationInFrames], {
+    const frame = Math.min(durationInFrames - 1, Math.round((0, remotion_1.interpolate)(pos, [0, getUsableTimelineWidth(width)], [0, durationInFrames], {
         extrapolateLeft: extrapolate,
         extrapolateRight: extrapolate,
     })));

package/dist/components/TimelineInOutToggle.js

@@ -239,7 +239,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: jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : 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: jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : colors_1.BLUE, style: style }) })
+            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? colors_1.WHITE : 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: jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? colors_1.WHITE : colors_1.BLUE, style: style }) })
         ] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/components/UpdateCheck.js

@@ -13,7 +13,7 @@ const buttonStyle = {
     color: colors_1.BLUE,
     border: 'none',
     fontWeight: 'bold',
-    backgroundColor: 'transparent',
+    backgroundColor: colors_1.TRANSPARENT,
     cursor: 'pointer',
     fontSize: 14,
     display: 'inline-flex',
@@ -90,6 +90,6 @@ const UpdateCheck = () => {
     return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, type: "button", title: hasKnownBugs ? 'Bugfixes available' : 'Update available', children: hasKnownBugs ? ('Bugfixes available') : (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
                 height: 16,
                 width: 16,
-            }, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: "currentcolor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM135.1 217.4c-4.5 4.2-7.1 10.1-7.1 16.3c0 12.3 10 22.3 22.3 22.3H208v96c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V256h57.7c12.3 0 22.3-10 22.3-22.3c0-6.2-2.6-12.1-7.1-16.3L269.8 117.5c-3.8-3.5-8.7-5.5-13.8-5.5s-10.1 2-13.8 5.5L135.1 217.4z" }) })) }));
+            }, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR_LOWERCASE, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM135.1 217.4c-4.5 4.2-7.1 10.1-7.1 16.3c0 12.3 10 22.3 22.3 22.3H208v96c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V256h57.7c12.3 0 22.3-10 22.3-22.3c0-6.2-2.6-12.1-7.1-16.3L269.8 117.5c-3.8-3.5-8.7-5.5-13.8-5.5s-10.1 2-13.8 5.5L135.1 217.4z" }) })) }));
 };
 exports.UpdateCheck = UpdateCheck;

package/dist/components/UpdateModal/OpenIssueButton.js

@@ -23,7 +23,7 @@ const OpenIssueButton = ({ link }) => {
         window.open(link, '_blank');
     }, [link]);
     const svgFillColor = (0, react_1.useMemo)(() => {
-        return hovered ? 'white' : colors_1.LIGHT_TEXT;
+        return hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT;
     }, [hovered]);
     const openInEditorSvg = (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: svgStyle, children: jsx_runtime_1.jsx("path", { fill: svgFillColor, d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" }) }));
     const onPointerEnter = (0, react_1.useCallback)(() => {

package/dist/components/VisualControls/ClickableFileName.js

@@ -8,8 +8,8 @@ const open_in_editor_1 = require("../../helpers/open-in-editor");
 const Fieldset_1 = require("../RenderModal/SchemaEditor/Fieldset");
 const source_attribution_1 = require("../Timeline/TimelineStack/source-attribution");
 const container = {
-    paddingLeft: Fieldset_1.SCHEMA_EDITOR_FIELDSET_PADDING,
-    paddingTop: Fieldset_1.SCHEMA_EDITOR_FIELDSET_PADDING / 2,
+    paddingLeft: (0, Fieldset_1.getSchemaEditorFieldsetPadding)(),
+    paddingTop: (0, Fieldset_1.getSchemaEditorFieldsetPadding)() / 2,
 };
 const ClickableFileName = ({ originalFileName, }) => {
     const [titleHovered, setTitleHovered] = (0, react_1.useState)(false);
@@ -24,8 +24,8 @@ const ClickableFileName = ({ originalFileName, }) => {
         return {
             fontSize: 12,
             cursor: originalFileName.type === 'loaded' ? 'pointer' : undefined,
-            borderBottom: hoverEffect ? '1px solid #fff' : 'none',
-            color: hoverEffect ? '#fff' : colors_1.LIGHT_COLOR,
+            borderBottom: hoverEffect ? colors_1.BORDER_WHITE : 'none',
+            color: hoverEffect ? colors_1.WHITE_HEX : colors_1.LIGHT_COLOR,
         };
     }, [originalFileName, hoverEffect]);
     const onClick = (0, react_1.useCallback)(async () => {

package/dist/components/VisualControls/VisualControlsContent.js

@@ -37,15 +37,23 @@ exports.VisualControlsContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const VisualControls_1 = require("../../visual-controls/VisualControls");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
+const Fieldset_1 = require("../RenderModal/SchemaEditor/Fieldset");
 const SchemaSeparationLine_1 = require("../RenderModal/SchemaEditor/SchemaSeparationLine");
 const VisualControlHandle_1 = require("./VisualControlHandle");
+const rootInset = (0, Fieldset_1.getSchemaEditorRootInset)(InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING);
+const container = {
+    boxSizing: 'border-box',
+    paddingLeft: rootInset,
+    paddingRight: rootInset,
+};
 const VisualControlsContent = () => {
     const { handles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
     const entries = Object.entries(handles);
     if (entries.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { children: entries.map(([key, value], i) => {
+    return (jsx_runtime_1.jsx("div", { style: container, children: entries.map(([key, value], i) => {
             return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
                     jsx_runtime_1.jsx(VisualControlHandle_1.VisualControlHandle, { keyName: key, value: value }), i === entries.length - 1 ? null : jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaSeparationLine, {})] }, key));
         }) }));

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

@@ -8,7 +8,9 @@ const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const hasEffectDragType = (dataTransfer) => {
     const types = Array.from(dataTransfer.types);
     const hasExplicitEffectType = types.includes(studio_shared_1.EFFECT_DRAG_MIME_TYPE);
-    if (!hasExplicitEffectType && hasImportableAssetDragType(dataTransfer)) {
+    if (!hasExplicitEffectType &&
+        (hasNonEffectRemotionDragType(dataTransfer) ||
+            hasNonRemotionImportableAssetDragType(dataTransfer))) {
         return false;
     }
     return types.some((type) => type === studio_shared_1.EFFECT_DRAG_MIME_TYPE || isGenericDragType(type));
@@ -21,13 +23,33 @@ exports.hasExplicitEffectDragType = hasExplicitEffectDragType;
 const isGenericDragType = (type) => {
     return type === 'application/json' || type === 'text/plain';
 };
-const hasImportableAssetDragType = (dataTransfer) => {
-    return Array.from(dataTransfer.types).some((type) => type === 'Files' ||
-        type === studio_shared_1.ASSET_DRAG_MIME_TYPE ||
-        type === studio_shared_1.COMPONENT_DRAG_MIME_TYPE ||
-        type === studio_shared_1.SFX_DRAG_MIME_TYPE ||
-        type === 'text/uri-list' ||
-        type === 'text/html');
+const isNonEffectRemotionDragType = (mimeType) => {
+    switch (mimeType) {
+        case studio_shared_1.EFFECT_DRAG_MIME_TYPE:
+            return false;
+        case studio_shared_1.ASSET_DRAG_MIME_TYPE:
+        case studio_shared_1.COMPOSITION_DRAG_MIME_TYPE:
+        case studio_shared_1.COMPONENT_DRAG_MIME_TYPE:
+        case studio_shared_1.ELEMENT_DRAG_MIME_TYPE:
+        case studio_shared_1.SFX_DRAG_MIME_TYPE:
+            return true;
+        default:
+            mimeType;
+            throw new Error(`Unhandled Remotion drag MIME type: ${mimeType}`);
+    }
+};
+const hasNonEffectRemotionDragType = (dataTransfer) => {
+    return Array.from(dataTransfer.types).some((type) => {
+        if (!(0, studio_shared_1.isRemotionDragMimeType)(type)) {
+            return false;
+        }
+        return isNonEffectRemotionDragType(type);
+    });
+};
+const hasNonRemotionImportableAssetDragType = (dataTransfer) => {
+    return Array.from(dataTransfer.types).some((type) => {
+        return type === 'Files' || type === 'text/uri-list' || type === 'text/html';
+    });
 };
 const getEffectDragData = (dataTransfer) => {
     for (const type of [

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

@@ -1,4 +1,4 @@
-import { type ComponentProp, type FileType, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
+import { type CompositionDragData, type ComponentProp, type FileType, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
 import type { Dimensions } from '../helpers/is-current-selected-still';
 export type InsertElementDropPosition = {
     readonly centerX: number;
@@ -72,6 +72,12 @@ export declare const insertComponent: ({ component, compositionFile, composition
     compositionId: string;
     dropPosition: InsertElementDropPosition | null;
 }) => Promise<void>;
+export declare const insertComposition: ({ composition, compositionFile, compositionId, dropPosition, }: {
+    composition: CompositionDragData;
+    compositionFile: string;
+    compositionId: string;
+    dropPosition: InsertElementDropPosition | null;
+}) => Promise<void>;
 export declare const insertElement: ({ compositionFile, compositionId, dropPosition, element, }: {
     compositionFile: string;
     compositionId: string;
@@ -80,6 +86,6 @@ export declare const insertElement: ({ compositionFile, compositionId, dropPosit
         slug: string;
         displayName: string;
         sourceCode: string;
-        dimensions: import("@remotion/studio-shared").ComponentDimensions;
+        dimensions: import("@remotion/studio-shared").ComponentDimensions | null;
     };
 }) => Promise<void>;

package/dist/components/import-assets.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertElement = exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getComponentDimensions = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
+exports.insertElement = exports.insertComposition = exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getComponentDimensions = 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 install_required_package_1 = require("../helpers/install-required-package");
@@ -569,6 +570,59 @@ const insertComponent = async ({ component, compositionFile, compositionId, drop
     }
 };
 exports.insertComponent = insertComponent;
+const serializeResolvedPropsForSourceCode = (props) => {
+    return no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
+        data: props,
+        indent: undefined,
+        staticBase: window.remotion_staticBase,
+    }).serializedString;
+};
+const insertComposition = async ({ composition, compositionFile, compositionId, dropPosition, }) => {
+    if (composition.compositionId === compositionId) {
+        (0, NotificationCenter_1.showNotification)('Cannot add a composition to itself', 3000);
+        return;
+    }
+    if (composition.compositionFile === null) {
+        (0, NotificationCenter_1.showNotification)('Could not find composition source file', 3000);
+        return;
+    }
+    try {
+        const resolver = remotion_1.Internals.resolveCompositionsRef.current;
+        if (!resolver) {
+            throw new Error('No composition resolver available');
+        }
+        const calculated = await resolver.resolveComposition(composition.compositionId);
+        const dimensions = {
+            width: calculated.width,
+            height: calculated.height,
+        };
+        const inserted = await insertAssetElement({
+            compositionFile,
+            compositionId,
+            element: {
+                type: 'composition',
+                compositionId: composition.compositionId,
+                compositionFile: composition.compositionFile,
+                durationInFrames: calculated.durationInFrames,
+                width: calculated.width,
+                height: calculated.height,
+                serializedResolvedPropsWithCustomSchema: serializeResolvedPropsForSourceCode(calculated.props),
+                position: getCenteredPosition({
+                    dimensions,
+                    dropPosition,
+                }),
+            },
+        });
+        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);
+    }
+};
+exports.insertComposition = insertComposition;
 const insertElement = async ({ compositionFile, compositionId, dropPosition, element, }) => {
     try {
         const response = await (0, call_api_1.callApi)('/api/insert-element', {

package/dist/components/options-sidebar-tabs.d.ts

@@ -2,3 +2,4 @@ export declare const optionsSidebarTabs: import("react").RefObject<{
     selectInspectorPanel: () => void;
     selectRendersPanel: () => void;
 } | null>;
+export declare const selectOptionsSidebarInspectorPanel: () => void;

package/dist/components/options-sidebar-tabs.js

@@ -1,5 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.optionsSidebarTabs = void 0;
+exports.selectOptionsSidebarInspectorPanel = exports.optionsSidebarTabs = void 0;
 const react_1 = require("react");
 exports.optionsSidebarTabs = (0, react_1.createRef)();
+const selectOptionsSidebarInspectorPanel = () => {
+    var _a;
+    (_a = exports.optionsSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectInspectorPanel();
+};
+exports.selectOptionsSidebarInspectorPanel = selectOptionsSidebarInspectorPanel;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.outlinesAreEqual = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedTransformOriginInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
+const colors_1 = require("../helpers/colors");
 const get_box_quads_ponyfill_1 = require("../helpers/get-box-quads-ponyfill");
 const selected_outline_geometry_1 = require("./selected-outline-geometry");
 const selected_outline_types_1 = require("./selected-outline-types");
@@ -53,7 +54,7 @@ const getRotationCursor = (rotation) => {
         ? ''
         : `<g transform="rotate(${normalizedRotation} 32 32)">`;
     const transformEnd = normalizedRotation === 0 ? '' : '</g>';
-    const svg = `<svg width="24" height="24" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">${transform}<g transform="scale(0.876712329)" filter="url(#filter0_d_1_14)"><path d="M10.9111 17.7687C10.3413 18.3701 10.367 19.3195 10.9684 19.8893L20.7687 29.1738C21.3701 29.7436 22.3195 29.7179 22.8893 29.1165C23.459 28.5151 23.4334 27.5657 22.832 26.996L14.1206 18.7431L22.3735 10.0316C22.9432 9.43022 22.9176 8.48082 22.3162 7.91107C21.7148 7.34133 20.7654 7.36699 20.1956 7.96839L10.9111 17.7687ZM49.3923 58.3118C49.9509 58.9235 50.8996 58.9667 51.5114 58.4081L61.481 49.3055C62.0927 48.7469 62.1359 47.7981 61.5773 47.1863C61.0187 46.5745 60.0699 46.5314 59.4581 47.09L50.5963 55.1812L42.5051 46.3194C41.9465 45.7076 40.9977 45.6645 40.386 46.2231C39.7742 46.7817 39.7311 47.7304 40.2896 48.3422L49.3923 58.3118ZM12.6747 18.7431L13 19.8893C22.1283 19.6426 30.7584 21.4283 37.8564 26.6927C44.8518 31.8809 49.734 39.8538 49 56H50.5963H51.5114C52.2774 39.1461 47.6482 30.2198 39.6436 24.2831C31.7416 18.4224 22.3717 17.2467 13 17.5L12.6747 18.7431Z" fill="black"/><path d="M19.1064 6.93652C20.2459 5.73379 22.1448 5.68278 23.3477 6.82227C24.5505 7.96181 24.6022 9.86076 23.4629 11.0635L18.7373 16.0508C26.3487 16.4239 33.9128 18.1651 40.5371 23.0781C44.7339 26.1907 48.0794 30.1189 50.2568 35.4834C51.9666 39.6958 52.9327 44.7395 53.0742 50.8867L58.4463 45.9824C59.6697 44.8654 61.5673 44.9514 62.6846 46.1748C63.8018 47.3985 63.7155 49.296 62.4922 50.4131L52.5225 59.5156C51.337 60.5979 49.5196 60.5507 48.3916 59.4346L48.2842 59.3232L39.1816 49.3535C38.0648 48.1301 38.1507 46.2324 39.374 45.1152C40.5975 43.9979 42.4961 44.0841 43.6133 45.3076L47.4756 49.5381C47.1908 44.7613 46.2876 40.9448 44.9482 37.8291C43.0666 33.4521 40.2851 30.3614 36.9629 27.8975C31.8259 24.0875 25.8071 22.1663 19.2891 21.5732L23.8633 25.9072C25.0662 27.0468 25.1178 28.9457 23.9785 30.1484C22.8746 31.3135 21.0576 31.3982 19.8516 30.3662L19.7373 30.2627L9.93652 20.9785C8.73384 19.839 8.6828 17.9401 9.82227 16.7373L19.1064 6.93652Z" stroke="white" stroke-width="3"/></g>${transformEnd}<defs><filter id="filter0_d_1_14" x="0" y="0" width="72.4696" height="72.3004" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="3.75"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_14"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_14" result="shape"/></filter></defs></svg>`;
+    const svg = `<svg width="24" height="24" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">${transform}<g transform="scale(0.876712329)" filter="url(#filter0_d_1_14)"><path d="M10.9111 17.7687C10.3413 18.3701 10.367 19.3195 10.9684 19.8893L20.7687 29.1738C21.3701 29.7436 22.3195 29.7179 22.8893 29.1165C23.459 28.5151 23.4334 27.5657 22.832 26.996L14.1206 18.7431L22.3735 10.0316C22.9432 9.43022 22.9176 8.48082 22.3162 7.91107C21.7148 7.34133 20.7654 7.36699 20.1956 7.96839L10.9111 17.7687ZM49.3923 58.3118C49.9509 58.9235 50.8996 58.9667 51.5114 58.4081L61.481 49.3055C62.0927 48.7469 62.1359 47.7981 61.5773 47.1863C61.0187 46.5745 60.0699 46.5314 59.4581 47.09L50.5963 55.1812L42.5051 46.3194C41.9465 45.7076 40.9977 45.6645 40.386 46.2231C39.7742 46.7817 39.7311 47.7304 40.2896 48.3422L49.3923 58.3118ZM12.6747 18.7431L13 19.8893C22.1283 19.6426 30.7584 21.4283 37.8564 26.6927C44.8518 31.8809 49.734 39.8538 49 56H50.5963H51.5114C52.2774 39.1461 47.6482 30.2198 39.6436 24.2831C31.7416 18.4224 22.3717 17.2467 13 17.5L12.6747 18.7431Z" fill="${colors_1.BLACK}"/><path d="M19.1064 6.93652C20.2459 5.73379 22.1448 5.68278 23.3477 6.82227C24.5505 7.96181 24.6022 9.86076 23.4629 11.0635L18.7373 16.0508C26.3487 16.4239 33.9128 18.1651 40.5371 23.0781C44.7339 26.1907 48.0794 30.1189 50.2568 35.4834C51.9666 39.6958 52.9327 44.7395 53.0742 50.8867L58.4463 45.9824C59.6697 44.8654 61.5673 44.9514 62.6846 46.1748C63.8018 47.3985 63.7155 49.296 62.4922 50.4131L52.5225 59.5156C51.337 60.5979 49.5196 60.5507 48.3916 59.4346L48.2842 59.3232L39.1816 49.3535C38.0648 48.1301 38.1507 46.2324 39.374 45.1152C40.5975 43.9979 42.4961 44.0841 43.6133 45.3076L47.4756 49.5381C47.1908 44.7613 46.2876 40.9448 44.9482 37.8291C43.0666 33.4521 40.2851 30.3614 36.9629 27.8975C31.8259 24.0875 25.8071 22.1663 19.2891 21.5732L23.8633 25.9072C25.0662 27.0468 25.1178 28.9457 23.9785 30.1484C22.8746 31.3135 21.0576 31.3982 19.8516 30.3662L19.7373 30.2627L9.93652 20.9785C8.73384 19.839 8.6828 17.9401 9.82227 16.7373L19.1064 6.93652Z" stroke="${colors_1.WHITE}" stroke-width="3"/></g>${transformEnd}<defs><filter id="filter0_d_1_14" x="0" y="0" width="72.4696" height="72.3004" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="3.75"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_14"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_14" result="shape"/></filter></defs></svg>`;
     return `url("data:image/svg+xml,${encodeURIComponent(svg)}") 12 12, alias`;
 };
 exports.getRotationCursor = getRotationCursor;

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

@@ -0,0 +1,36 @@
+import type { Guide } from '../state/editor-guides';
+import type { SelectedOutline } from './selected-outline-geometry';
+export declare const selectedOutlineSnapThresholdPx = 10;
+export declare const selectedOutlineSnapIndicatorColor = "#ff00ff";
+export type SelectedOutlineSnapAxis = 'x' | 'y';
+export type SelectedOutlineSnapTargetType = 'canvas-left' | 'canvas-right' | 'canvas-top' | 'canvas-bottom' | 'canvas-horizontal-center' | 'canvas-vertical-center' | 'guide-vertical' | 'guide-horizontal';
+export type SelectedOutlineSnapTarget = {
+    readonly axis: SelectedOutlineSnapAxis;
+    readonly position: number;
+    readonly type: SelectedOutlineSnapTargetType;
+};
+export type SelectedOutlineSnapEdge = 'left' | 'right' | 'center-x' | 'top' | 'bottom' | 'center-y';
+export type SelectedOutlineSnapPoint = {
+    readonly distance: number;
+    readonly edge: SelectedOutlineSnapEdge;
+    readonly target: SelectedOutlineSnapTarget;
+};
+export type SelectedOutlineSnapResult = {
+    readonly activeSnapPoints: readonly SelectedOutlineSnapPoint[];
+    readonly snapOffsetX: number | null;
+    readonly snapOffsetY: number | null;
+};
+export declare const getSelectedOutlineSnapTargets: ({ compositionHeight, compositionWidth, guides, }: {
+    readonly compositionHeight: number;
+    readonly compositionWidth: number;
+    readonly guides: readonly Guide[];
+}) => readonly SelectedOutlineSnapTarget[];
+export declare const findSelectedOutlineSnap: ({ allowX, allowY, deltaX, deltaY, outlines, scale, targets, }: {
+    readonly allowX: boolean;
+    readonly allowY: boolean;
+    readonly deltaX: number;
+    readonly deltaY: number;
+    readonly outlines: readonly SelectedOutline[];
+    readonly scale: number;
+    readonly targets: readonly SelectedOutlineSnapTarget[];
+}) => SelectedOutlineSnapResult;