@remotion/studio 4.0.506 → 4.0.508

package/dist/components/RenderQueue/actions.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyVisualControlChange = exports.callUpdateDefaultPropsApi = exports.getProjectInfo = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.applyCodemod = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addSequenceRenderJob = exports.addStillRenderJob = void 0;
 const no_react_1 = require("remotion/no-react");
 const call_api_1 = require("../call-api");
-const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, multiProcessOnLinux, beepOnFinish, metadata, chromeMode, mediaCacheSizeInBytes, }) => {
+const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, multiProcessOnLinux, beepOnFinish, metadata, chromeMode, mediaCacheSizeInBytes, licenseKey, }) => {
     return (0, call_api_1.callApi)('/api/render', {
         compositionId,
         type: 'still',
@@ -28,6 +28,7 @@ const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, f
         metadata,
         chromeMode,
         mediaCacheSizeInBytes,
+        licenseKey,
     });
 };
 exports.addStillRenderJob = addStillRenderJob;
@@ -63,7 +64,7 @@ const addSequenceRenderJob = ({ compositionId, outName, imageFormat, startFrame,
     });
 };
 exports.addSequenceRenderJob = addSequenceRenderJob;
-const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, gopSize, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, beepOnFinish, repro, forSeamlessAacConcatenation, separateAudioTo, metadata, hardwareAcceleration, chromeMode, mediaCacheSizeInBytes, sampleRate, }) => {
+const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, gopSize, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, beepOnFinish, repro, forSeamlessAacConcatenation, separateAudioTo, metadata, hardwareAcceleration, chromeMode, mediaCacheSizeInBytes, sampleRate, licenseKey, }) => {
     return (0, call_api_1.callApi)('/api/render', {
         compositionId,
         type: 'video',
@@ -112,6 +113,7 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, s
         chromeMode,
         mediaCacheSizeInBytes,
         sampleRate,
+        licenseKey,
     });
 };
 exports.addVideoRenderJob = addVideoRenderJob;

package/dist/components/RenderQueue/index.js

@@ -42,9 +42,6 @@ const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const context_1 = require("./context");
 const RenderQueueItem_1 = require("./RenderQueueItem");
-const separatorStyle = {
-    borderBottom: `1px solid ${colors_1.BLACK_HEX}`,
-};
 const errorExplanation = {
     fontSize: 14,
     color: colors_1.LIGHT_TEXT,
@@ -65,6 +62,8 @@ const renderQueue = {
     background: colors_1.BACKGROUND,
     flex: 1,
     overflowY: 'auto',
+    paddingTop: 4,
+    paddingBottom: 4,
 };
 const RenderQueue = () => {
     const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
@@ -105,7 +104,7 @@ const RenderQueue = () => {
             ] }));
     }
     return (jsx_runtime_1.jsx("div", { ref: divRef, style: renderQueue, className: ['css-reset', is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME].join(' '), children: jobs.map((j, index) => {
-            return (jsx_runtime_1.jsx("div", { style: index === jobs.length - 1 ? undefined : separatorStyle, children: jsx_runtime_1.jsx(RenderQueueItem_1.RenderQueueItem, { selected: selectedJob === index, job: j }) }, j.id));
+            return (jsx_runtime_1.jsx(RenderQueueItem_1.RenderQueueItem, { selected: selectedJob === index, job: j }, j.id));
         }) }));
 };
 exports.RenderQueue = RenderQueue;

package/dist/components/RenderQueue/use-render-output-file-drag.d.ts

@@ -0,0 +1,8 @@
+import type { DragEventHandler } from 'react';
+import type { AnyRenderJob } from './context';
+export declare const useRenderOutputFileDrag: (job: AnyRenderJob) => {
+    canDrag: boolean;
+    isDragging: boolean;
+    onDragEnd: () => void;
+    onDragStart: DragEventHandler<HTMLDivElement>;
+};

package/dist/components/RenderQueue/use-render-output-file-drag.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRenderOutputFileDrag = void 0;
+const studio_protocol_1 = require("@remotion/studio-protocol");
+const react_1 = require("react");
+const get_asset_metadata_1 = require("../../helpers/get-asset-metadata");
+const context_1 = require("./context");
+const MAXIMUM_SAFE_FILE_DRAG_SIZE = 500 * 1024 * 1024;
+const getFilename = (outName) => {
+    var _a;
+    return (_a = outName.split(/[/\\]/).at(-1)) !== null && _a !== void 0 ? _a : outName;
+};
+const isChrome = () => {
+    return (/Chrome\/\d/.test(navigator.userAgent) &&
+        !/(Edg|OPR|SamsungBrowser|YaBrowser)\//.test(navigator.userAgent));
+};
+const useRenderOutputFileDrag = (job) => {
+    const deletedOutputLocation = 'deletedOutputLocation' in job && job.deletedOutputLocation;
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const [clientFile, setClientFile] = (0, react_1.useState)(null);
+    const clientBlobInfo = (0, react_1.useMemo)(() => {
+        if (!(0, context_1.isClientRenderJob)(job) ||
+            job.status !== 'done' ||
+            job.getBlob === undefined) {
+            return null;
+        }
+        return {
+            getBlob: job.getBlob,
+            sizeInBytes: job.metadata.sizeInBytes,
+        };
+    }, [job]);
+    const clientJobWithBlob = clientBlobInfo !== null;
+    (0, react_1.useEffect)(() => {
+        if (!clientBlobInfo ||
+            clientBlobInfo.sizeInBytes <= 0 ||
+            clientBlobInfo.sizeInBytes > MAXIMUM_SAFE_FILE_DRAG_SIZE ||
+            typeof File === 'undefined' ||
+            typeof URL.createObjectURL !== 'function') {
+            setClientFile(null);
+            return;
+        }
+        let cancelled = false;
+        let objectUrl = null;
+        const filename = getFilename(job.outName);
+        clientBlobInfo
+            .getBlob()
+            .then((blob) => {
+            if (cancelled) {
+                return;
+            }
+            const file = new File([blob], filename, {
+                lastModified: blob instanceof File ? blob.lastModified : Date.now(),
+                type: blob.type,
+            });
+            objectUrl = URL.createObjectURL(file);
+            setClientFile({ file, objectUrl });
+        })
+            .catch(() => {
+            if (!cancelled) {
+                setClientFile(null);
+            }
+        });
+        return () => {
+            cancelled = true;
+            if (objectUrl) {
+                URL.revokeObjectURL(objectUrl);
+            }
+        };
+    }, [clientBlobInfo, job.outName]);
+    const canUseFileDrag = typeof DataTransfer !== 'undefined' &&
+        typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(any-pointer: fine)').matches &&
+        navigator.maxTouchPoints === 0 &&
+        isChrome();
+    const canDrag = canUseFileDrag &&
+        job.status === 'done' &&
+        job.type !== 'sequence' &&
+        !deletedOutputLocation &&
+        (clientJobWithBlob ? clientFile !== null : true);
+    const onDragStart = (0, react_1.useCallback)((event) => {
+        if (!canDrag) {
+            event.preventDefault();
+            return;
+        }
+        try {
+            const filename = getFilename(job.outName);
+            const source = clientFile
+                ? clientFile.objectUrl
+                : new URL(`${get_asset_metadata_1.remotion_outputsBase}/${job.outName}`, window.location.href).href;
+            const mimeType = (clientFile === null || clientFile === void 0 ? void 0 : clientFile.file.type) || 'application/octet-stream';
+            event.dataTransfer.clearData();
+            event.dataTransfer.effectAllowed = 'copy';
+            if (clientFile) {
+                const item = event.dataTransfer.items.add(clientFile.file);
+                if (item === null) {
+                    event.preventDefault();
+                    return;
+                }
+            }
+            else {
+                const dragData = studio_protocol_1.StudioProtocolInternals.makeDragData({
+                    type: 'render-output',
+                    outputPath: job.outName,
+                    fileName: filename,
+                });
+                event.dataTransfer.setData(dragData.mimeType, dragData.payload);
+            }
+            event.dataTransfer.setData('DownloadURL', `${mimeType}:${filename}:${source}`);
+            setIsDragging(true);
+        }
+        catch (_a) {
+            event.preventDefault();
+        }
+    }, [canDrag, clientFile, job.outName]);
+    const onDragEnd = (0, react_1.useCallback)(() => {
+        setIsDragging(false);
+    }, []);
+    return { canDrag, isDragging, onDragEnd, onDragStart };
+};
+exports.useRenderOutputFileDrag = useRenderOutputFileDrag;

package/dist/components/SegmentedControl.js

@@ -18,7 +18,6 @@ const item = {
     display: 'flex',
     fontSize: 15,
     padding: '4px 12px',
-    cursor: 'pointer',
     appearance: 'none',
     border: 'none',
     flex: 1,

package/dist/components/SelectedOutlineCanvasRotation.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SelectedOutline } from './selected-outline-geometry';
+import { type SelectedOutlineLayoutTarget, type SelectedOutlineTarget } from './selected-outline-types';
+export declare const SelectedOutlineCanvasRotation: React.FC<{
+    readonly getLatestTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
+    readonly layoutTarget: SelectedOutlineLayoutTarget;
+    readonly onDraggingChange: (dragging: boolean) => void;
+    readonly outline: SelectedOutline;
+}>;

package/dist/components/SelectedOutlineCanvasRotation.js

@@ -0,0 +1,237 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectedOutlineCanvasRotation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const pointer_session_1 = require("../helpers/pointer-session");
+const editor_snapping_1 = require("../state/editor-snapping");
+const canvas_rotation_cursor_1 = require("./canvas-rotation-cursor");
+const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const selected_outline_drag_1 = require("./selected-outline-drag");
+const selected_outline_measurement_1 = require("./selected-outline-measurement");
+const selected_outline_types_1 = require("./selected-outline-types");
+const svg_point_to_client_point_1 = require("./svg-point-to-client-point");
+const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
+const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
+const imperative_state_1 = require("./Timeline/imperative-state");
+const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
+const rotationDegreesPerPixel = 0.5;
+const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onDraggingChange, outline }) => {
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
+    const onPointerDown = react_1.default.useCallback((event) => {
+        var _a, _b;
+        if (event.button !== 0) {
+            return;
+        }
+        const target = getLatestTargetByKey(layoutTarget.key);
+        const rotationDrag = (_a = target === null || target === void 0 ? void 0 : target.rotationDrag) !== null && _a !== void 0 ? _a : null;
+        if (rotationDrag === null || !(target === null || target === void 0 ? void 0 : target.selectedForRotation)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if ((0, focus_inspector_field_1.commitPendingInspectorFields)()) {
+            return;
+        }
+        const svg = event.currentTarget.ownerSVGElement;
+        if (svg === null) {
+            return;
+        }
+        const startPointer = { x: event.clientX, y: event.clientY };
+        const center = (0, svg_point_to_client_point_1.svgPointToClientPoint)((0, selected_outline_measurement_1.getSelectedOutlineRotationPivot)({
+            dimensions: outline.dimensions,
+            points: (_b = outline.uncroppedPoints) !== null && _b !== void 0 ? _b : outline.points,
+            transformOriginValue: rotationDrag.transformOriginValue,
+        }), svg.getBoundingClientRect());
+        const dragStates = (0, selected_outline_drag_1.getSelectedOutlineRotationDragStates)({
+            dragTargets: [rotationDrag],
+            getDragOverrides,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
+        });
+        let previousAngle = (0, selected_outline_measurement_1.getAngleDegrees)(center, startPointer);
+        let accumulatedDelta = 0;
+        let lastValues = new Map();
+        let dragStarted = false;
+        const onPointerMove = (moveEvent) => {
+            var _a;
+            var _b;
+            moveEvent.preventDefault();
+            const screenDeltaX = moveEvent.clientX - startPointer.x;
+            const screenDeltaY = moveEvent.clientY - startPointer.y;
+            if (!dragStarted) {
+                if (!(0, selected_outline_drag_1.isSelectedOutlineDragPastThreshold)({
+                    deltaX: screenDeltaX,
+                    deltaY: screenDeltaY,
+                })) {
+                    return;
+                }
+                dragStarted = true;
+                onDraggingChange(true);
+            }
+            if (rotationDrag.transform3DMode) {
+                const startRotation = (_b = (_a = dragStates[0]) === null || _a === void 0 ? void 0 : _a.startRotation) !== null && _b !== void 0 ? _b : [0, 0, 0];
+                let rotationXDeltaDegrees = -screenDeltaY * rotationDegreesPerPixel;
+                let rotationYDeltaDegrees = screenDeltaX * rotationDegreesPerPixel;
+                if (moveEvent.shiftKey && editorSnapping) {
+                    rotationXDeltaDegrees =
+                        Math.round((startRotation[0] + rotationXDeltaDegrees) / 15) * 15 -
+                            startRotation[0];
+                    rotationYDeltaDegrees =
+                        Math.round((startRotation[1] + rotationYDeltaDegrees) / 15) * 15 -
+                            startRotation[1];
+                }
+                lastValues = (0, selected_outline_drag_1.getSelectedOutline3DRotationDragValues)({
+                    dragStates,
+                    rotationXDeltaDegrees,
+                    rotationYDeltaDegrees,
+                });
+                (0, ForceSpecificCursor_1.forceSpecificCursor)(canvas_rotation_cursor_1.canvasRotationCursor);
+            }
+            else {
+                const nextAngle = (0, selected_outline_measurement_1.getAngleDegrees)(center, {
+                    x: moveEvent.clientX,
+                    y: moveEvent.clientY,
+                });
+                accumulatedDelta += (0, selected_outline_measurement_1.getSelectedOutlineRotationDeltaDegrees)({
+                    from: previousAngle,
+                    to: nextAngle,
+                });
+                previousAngle = nextAngle;
+                const rotationDeltaDegrees = moveEvent.shiftKey && editorSnapping
+                    ? (0, selected_outline_drag_1.snapSelectedOutlineRotationDeltaDegrees)({
+                        dragStates,
+                        rotationDeltaDegrees: accumulatedDelta,
+                    })
+                    : accumulatedDelta;
+                lastValues = (0, selected_outline_drag_1.getSelectedOutlineRotationDragValues)({
+                    dragStates,
+                    rotationDeltaDegrees,
+                });
+                (0, ForceSpecificCursor_1.forceSpecificCursor)(canvas_rotation_cursor_1.canvasRotationCursor);
+            }
+            for (const dragState of dragStates) {
+                const value = lastValues.get(dragState.key);
+                if (value === undefined) {
+                    throw new Error('Expected rotation drag value to be available');
+                }
+                if (dragState.target.propStatus.status === 'keyframed') {
+                    setDragOverrides(dragState.target.nodePath, selected_outline_types_1.rotateFieldKey, remotion_1.Internals.makeKeyframedDragOverride({
+                        status: dragState.target.propStatus,
+                        frame: dragState.sourceFrame,
+                        value,
+                    }));
+                }
+                else {
+                    setDragOverrides(dragState.target.nodePath, selected_outline_types_1.rotateFieldKey, remotion_1.Internals.makeStaticDragOverride(value));
+                }
+            }
+        };
+        const onPointerUp = () => {
+            if (dragStarted) {
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                onDraggingChange(false);
+            }
+            const changes = (0, selected_outline_drag_1.getSelectedOutlineRotationDragChanges)({
+                dragStates,
+                lastValues,
+            });
+            if (changes.length === 0) {
+                (0, selected_outline_drag_1.clearSelectedOutlineRotationDragOverrides)({
+                    clearDragOverrides,
+                    dragStates,
+                });
+                return;
+            }
+            const staticChanges = changes.filter((change) => change.type === 'static');
+            const keyframedChanges = changes.filter((change) => change.type === 'keyframed');
+            Promise.all([
+                staticChanges.length > 0
+                    ? (0, save_sequence_prop_1.saveSequenceProps)({
+                        changes: staticChanges,
+                        addedKeyframes: null,
+                        movedKeyframes: null,
+                        setPropStatuses,
+                        clientId: rotationDrag.clientId,
+                        undoLabel: 'Rotate sequence',
+                        redoLabel: 'Rotate sequence back',
+                    })
+                    : Promise.resolve(),
+                (0, call_add_keyframe_1.callAddKeyframes)({
+                    sequenceKeyframes: keyframedChanges,
+                    effectKeyframes: [],
+                    setPropStatuses,
+                    clientId: rotationDrag.clientId,
+                }),
+            ])
+                .catch((error) => {
+                (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${error instanceof Error ? error.message : String(error)}`, 4000);
+            })
+                .finally(() => {
+                (0, selected_outline_drag_1.clearSelectedOutlineRotationDragOverrides)({
+                    clearDragOverrides,
+                    dragStates,
+                });
+            });
+        };
+        // The polygon gates pointer-down, while the stable overlay keeps the
+        // session alive after the pointer leaves the selected item.
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: svg,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
+    }, [
+        clearDragOverrides,
+        editorSnapping,
+        getDragOverrides,
+        getLatestTargetByKey,
+        layoutTarget.key,
+        onDraggingChange,
+        outline.dimensions,
+        outline.points,
+        outline.uncroppedPoints,
+        setDragOverrides,
+        setPropStatuses,
+    ]);
+    return (jsx_runtime_1.jsx("polygon", { points: outline.points.map((point) => `${point.x},${point.y}`).join(' '), fill: colors_1.TRANSPARENT, pointerEvents: "all", cursor: canvas_rotation_cursor_1.canvasRotationCursor, onPointerDown: onPointerDown, "data-remotion-studio-canvas-rotation": true }));
+};
+exports.SelectedOutlineCanvasRotation = SelectedOutlineCanvasRotation;

package/dist/components/SelectedOutlineElement.d.ts

@@ -1,26 +1,24 @@
 import React from 'react';
 import type { SelectedOutline } from './selected-outline-geometry';
-import { type SelectedOutlineSnapPoint, type SelectedOutlineSnapTarget } from './selected-outline-snap';
-import { type SelectedOutlineDragTarget, type SelectedOutlineRotationDragTarget, type SelectedOutlineScaleDragTarget, type SelectedOutlineTarget } from './selected-outline-types';
-import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
-export declare const SelectedOutlineTransformOriginHandle: React.FC<{
-    readonly outline: SelectedOutline;
-    readonly onDraggingChange: (dragging: boolean) => void;
-    readonly target: SelectedOutlineTarget | undefined;
-}>;
-export declare const SelectedOutlineElement: React.FC<{
-    readonly allDragTargets: readonly SelectedOutlineDragTarget[];
-    readonly allDragOutlines: readonly SelectedOutline[];
-    readonly allRotationDragTargets: readonly SelectedOutlineRotationDragTarget[];
-    readonly allScaleDragTargets: readonly SelectedOutlineScaleDragTarget[];
+import { type SelectedOutlineSnapPoint } from './selected-outline-snap';
+import { type SelectedOutlineDragTarget, type SelectedOutlineLayoutTarget, type SelectedOutlineRotationDragTarget, type SelectedOutlineScaleDragTarget, type SelectedOutlineTarget } from './selected-outline-types';
+import { type TimelineSelection, type TimelineSelectionInteraction } from './Timeline/TimelineSelection';
+type SelectedOutlineElementProps = {
+    readonly compositionHeight: number;
+    readonly compositionWidth: number;
     readonly dragging: boolean;
-    readonly hovered: boolean;
+    readonly getAllDragOutlines: () => readonly SelectedOutline[];
+    readonly getAllDragTargets: () => readonly SelectedOutlineDragTarget[];
+    readonly getAllRotationDragTargets: () => readonly SelectedOutlineRotationDragTarget[];
+    readonly getAllScaleDragTargets: () => readonly SelectedOutlineScaleDragTarget[];
+    readonly getLatestTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
+    readonly layoutTarget: SelectedOutlineLayoutTarget | undefined;
     readonly outline: SelectedOutline;
     readonly onDraggingChange: (dragging: boolean) => void;
-    readonly onHoverChange: (key: string | null) => void;
+    readonly onContextMenuOpenChange: (open: boolean) => void;
     readonly onSnapPointsChange: (snapPoints: readonly SelectedOutlineSnapPoint[]) => void;
     readonly onSelect: (item: TimelineSelection, interaction: TimelineSelectionInteraction) => void;
     readonly scale: number;
-    readonly snapTargets: readonly SelectedOutlineSnapTarget[];
-    readonly target: SelectedOutlineTarget | undefined;
-}>;
+};
+export declare const SelectedOutlineElement: React.NamedExoticComponent<SelectedOutlineElementProps>;
+export {};