@remotion/studio 4.0.471 → 4.0.473

package/dist/components/Preview.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoPreview = exports.getPreviewFileType = void 0;
+exports.VideoPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
@@ -8,12 +8,15 @@ const remotion_1 = require("remotion");
 const ErrorLoader_1 = require("../error-overlay/remotion-overlay/ErrorLoader");
 const checkerboard_background_1 = require("../helpers/checkerboard-background");
 const colors_1 = require("../helpers/colors");
+const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const checkerboard_1 = require("../state/checkerboard");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const RenderPreview_1 = require("./RenderPreview");
 const SelectedOutlineOverlay_1 = require("./SelectedOutlineOverlay");
 const Spinner_1 = require("./Spinner");
 const StaticFilePreview_1 = require("./StaticFilePreview");
+const should_clear_selection_on_pointer_down_1 = require("./Timeline/should-clear-selection-on-pointer-down");
+const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const centeredContainer = {
     display: 'flex',
     flex: 1,
@@ -33,36 +36,6 @@ const assetMetadataErrorContainer = {
     height: '100%',
     overflowY: 'auto',
 };
-const getPreviewFileType = (fileName) => {
-    var _a;
-    if (!fileName) {
-        return 'other';
-    }
-    const audioExtensions = ['mp3', 'wav', 'ogg', 'aac'];
-    const videoExtensions = ['mp4', 'avi', 'mkv', 'mov', 'webm'];
-    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
-    const fileExtension = (_a = fileName.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-    if (fileExtension === undefined) {
-        throw new Error('File extension is undefined');
-    }
-    if (audioExtensions.includes(fileExtension)) {
-        return 'audio';
-    }
-    if (videoExtensions.includes(fileExtension)) {
-        return 'video';
-    }
-    if (imageExtensions.includes(fileExtension)) {
-        return 'image';
-    }
-    if (fileExtension === 'json') {
-        return 'json';
-    }
-    if (fileExtension === 'txt') {
-        return 'txt';
-    }
-    return 'other';
-};
-exports.getPreviewFileType = getPreviewFileType;
 const checkerboardSize = 49;
 const containerStyle = (options) => {
     return {
@@ -126,7 +99,7 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
             overflow: canvasContent.type === 'composition' ? 'visible' : 'hidden',
             justifyContent: canvasContent.type === 'asset' ? 'center' : 'flex-start',
             alignItems: canvasContent.type === 'asset' &&
-                (0, exports.getPreviewFileType)(canvasContent.asset) === 'audio'
+                (0, get_preview_file_type_1.getPreviewFileType)(canvasContent.asset) === 'audio'
                 ? 'center'
                 : 'normal',
         };
@@ -154,6 +127,8 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
 };
 const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) => {
     const { checkerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
+    const { clearSelection } = (0, TimelineSelection_1.useTimelineSelection)();
+    const portalContainer = (0, react_1.useRef)(null);
     const style = (0, react_1.useMemo)(() => {
         return containerStyle({
             checkerboard,
@@ -178,6 +153,21 @@ const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions })
             current === null || current === void 0 ? void 0 : current.removeChild(remotion_1.Internals.portalNode());
         };
     }, []);
-    const portalContainer = (0, react_1.useRef)(null);
+    const onPointerDown = (0, react_1.useCallback)((event) => {
+        if (!(0, should_clear_selection_on_pointer_down_1.shouldClearSelectionOnPointerDown)(event)) {
+            return;
+        }
+        clearSelection();
+    }, [clearSelection]);
+    (0, react_1.useEffect)(() => {
+        const { current } = portalContainer;
+        if (!current) {
+            return;
+        }
+        current.addEventListener('pointerdown', onPointerDown);
+        return () => {
+            current.removeEventListener('pointerdown', onPointerDown);
+        };
+    }, [onPointerDown]);
     return jsx_runtime_1.jsx("div", { ref: portalContainer, style: style });
 };

package/dist/components/PreviewToolbar.js

@@ -16,12 +16,14 @@ const FullscreenToggle_1 = require("./FullscreenToggle");
 const layout_1 = require("./layout");
 const LoopToggle_1 = require("./LoopToggle");
 const MuteToggle_1 = require("./MuteToggle");
+const OutlineToggle_1 = require("./OutlineToggle");
 const PlaybackKeyboardShortcutsManager_1 = require("./PlaybackKeyboardShortcutsManager");
 const PlaybackRatePersistor_1 = require("./PlaybackRatePersistor");
 const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
 const PlayPause_1 = require("./PlayPause");
 const RenderButton_1 = require("./RenderButton");
 const SizeSelector_1 = require("./SizeSelector");
+const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
 const TOOLBAR_HEIGHT = 50;
@@ -70,6 +72,16 @@ const sideContainer = {
 const padding = {
     width: timeline_layout_1.TIMELINE_PADDING,
 };
+const toolbarControl = {
+    display: 'contents',
+};
+const PreviewToolbarControl = ({ children }) => {
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
+    }, []);
+    return (jsx_runtime_1.jsx("div", { style: toolbarControl, onPointerDown: onPointerDown, children: children }));
+};
 const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
     const { playbackRate, setPlaybackRate } = remotion_1.Internals.usePlaybackRate();
     const { mediaMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
@@ -136,12 +148,13 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
     return (jsx_runtime_1.jsxs("div", { ref: previewToolbarRef, style: isMobileLayout ? mobileContainer : container, className: "css-reset", children: [
             jsx_runtime_1.jsx("div", { ref: leftScrollIndicatorRef, style: scrollIndicatorLeft }), isMobileLayout ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
-                            jsx_runtime_1.jsx("div", { style: padding }), jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, {})
-                        ] }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), isVideoComposition ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate, muted: mediaMuted }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
-                ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
-                    jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
+                            jsx_runtime_1.jsx("div", { style: padding }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, {}) })
+                        ] }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), isVideoComposition ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate, muted: mediaMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
+                ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) }), TimelineSelection_1.ENABLE_OUTLINES ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })) : null] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
+                    jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
                 ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {}), jsx_runtime_1.jsx("div", { ref: rightScrollIndicatorRef, style: scrollIndicatorRight })
         ] }));
 };

package/dist/components/RenderButton.js

@@ -102,7 +102,9 @@ const RenderButton = ({ readOnlyStudio, }) => {
         shouldApplyCssTransforms: true,
     });
     const refresh = size === null || size === void 0 ? void 0 : size.refresh;
-    const onPointerDown = (0, react_1.useCallback)(() => {
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
         setDropdownOpened((o) => {
             if (!o) {
                 refresh === null || refresh === void 0 ? void 0 : refresh();
@@ -110,6 +112,10 @@ const RenderButton = ({ readOnlyStudio, }) => {
             return !o;
         });
     }, [refresh]);
+    const onMenuPointerDown = (0, react_1.useCallback)((e) => {
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
+    }, []);
     const onClickDropdown = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         const isKeyboardInitiated = e.detail === 0;
@@ -420,7 +426,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
                             ] }) }), shouldShowDropdown ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx("div", { style: dividerStyle }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: dropdownTriggerStyle, disabled: !readOnlyStudio && connectionStatus !== 'connected', className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) })
                         ] })) : null] }), portalStyle
-                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHideDropdown, onEscape: onHideDropdown, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: () => { }, onPreviousMenu: () => { }, values: dropdownValues, onHide: onHideDropdown, leaveLeftSpace: false, preselectIndex: dropdownValues.findIndex((v) => v.id === renderType), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHideDropdown, onEscape: onHideDropdown, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: () => { }, onPreviousMenu: () => { }, values: dropdownValues, onHide: onHideDropdown, leaveLeftSpace: false, preselectIndex: dropdownValues.findIndex((v) => v.id === renderType), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.RenderButton = RenderButton;

package/dist/components/RenderPreview.js

@@ -6,8 +6,8 @@ const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
+const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const FilePreview_1 = require("./FilePreview");
-const Preview_1 = require("./Preview");
 const msgStyle = {
     fontSize: 13,
     color: 'white',
@@ -20,7 +20,7 @@ const errMsgStyle = {
     color: colors_1.LIGHT_TEXT,
 };
 const RenderPreview = ({ path, assetMetadata, getBlob }) => {
-    const fileType = (0, Preview_1.getPreviewFileType)(path);
+    const fileType = (0, get_preview_file_type_1.getPreviewFileType)(path);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const [blobUrl, setBlobUrl] = (0, react_1.useState)(null);

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -1,45 +1,146 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatusTrue, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
-import { type TimelineSelection } from './Timeline/TimelineSelection';
+import type { CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, GetDragOverrides, OverrideIdToNodePaths, SequenceFieldSchema, SequencePropsSubscriptionKey, SequenceSchema, TSequence } from 'remotion';
+import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
+import { type SaveSequencePropChange } from './Timeline/save-sequence-prop';
+import { type TimelineSelection, type TimelineSelectionInteraction } from './Timeline/TimelineSelection';
 type OutlinePoint = {
     readonly x: number;
     readonly y: number;
 };
 type UvCoordinate = readonly [number, number];
+type UvCoordinateFieldSchema = Extract<SequenceFieldSchema, {
+    type: 'uv-coordinate';
+}>;
+type SelectedOutlineUvHandle = {
+    readonly clientId: string;
+    readonly codeValue: CanUpdateSequencePropStatusStatic;
+    readonly effectIndex: number;
+    readonly fieldDefault: UvCoordinate | undefined;
+    readonly fieldKey: string;
+    readonly fieldSchema: UvCoordinateFieldSchema;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly schema: SequenceSchema;
+    readonly value: UvCoordinate;
+};
+type UvConnectionHandle = Pick<SelectedOutlineUvHandle, 'effectIndex' | 'fieldKey' | 'fieldSchema' | 'value'>;
+type UvHandleConnectionLine = {
+    readonly key: string;
+    readonly from: OutlinePoint;
+    readonly to: OutlinePoint;
+};
 type SelectedOutlineDragTarget = {
-    readonly codeValue: CanUpdateSequencePropStatusTrue;
+    readonly codeValue: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
     readonly clientId: string;
     readonly fieldDefault: string | undefined;
+    readonly keyframeDisplayOffset: number;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly schema: SequenceSchema;
+};
+type ScaleFieldSchema = Extract<SequenceFieldSchema, {
+    type: 'scale';
+}>;
+type SelectedOutlineScaleDragTarget = {
+    readonly codeValue: CanUpdateSequencePropStatusStatic;
+    readonly clientId: string;
+    readonly fieldDefault: number | string | undefined;
+    readonly fieldSchema: ScaleFieldSchema;
+    readonly linked: boolean;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: SequenceSchema;
 };
 export type SelectedOutlineDragState = {
     readonly defaultValue: string | null;
     readonly key: string;
+    readonly sourceFrame: number;
     readonly startX: number;
     readonly startY: number;
     readonly target: SelectedOutlineDragTarget;
 };
+export type SelectedOutlineScaleDragState = {
+    readonly defaultValue: string | null;
+    readonly key: string;
+    readonly startX: number;
+    readonly startY: number;
+    readonly startZ: number;
+    readonly target: SelectedOutlineScaleDragTarget;
+};
+type SequenceWithSelectedOutline = {
+    readonly depth: number;
+    readonly keyframeDisplayOffset: number;
+    readonly key: string;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly sequence: TSequence;
+};
 export declare const getUvHandlePosition: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], uv: UvCoordinate) => OutlinePoint;
+export declare const getUvHandleConnectionLines: ({ handles, points, }: {
+    readonly handles: readonly UvConnectionHandle[];
+    readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
+}) => UvHandleConnectionLine[];
 export declare const getUvCoordinateForPoint: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], point: OutlinePoint) => UvCoordinate;
+export declare const getOutlineSelectionInteraction: ({ shiftKey, metaKey, ctrlKey, }: {
+    readonly shiftKey: boolean;
+    readonly metaKey: boolean;
+    readonly ctrlKey: boolean;
+}) => TimelineSelectionInteraction;
 type SelectedEffectFields = {
     allFields: boolean;
     fieldKeys: Set<string>;
 };
 export declare const getSelectedEffectFieldsBySequenceKey: (selectedItems: readonly TimelineSelection[]) => Map<string, Map<number, SelectedEffectFields>>;
+export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideIdsToNodePaths, }: {
+    readonly sequences: readonly TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+}) => SequenceWithSelectedOutline[];
 export declare const getSelectedOutlineDragValues: ({ dragStates, deltaX, deltaY, }: {
     readonly dragStates: readonly SelectedOutlineDragState[];
     readonly deltaX: number;
     readonly deltaY: number;
 }) => Map<string, string>;
+export type SelectedOutlineStaticDragChange = SaveSequencePropChange & {
+    readonly type: 'static';
+};
+export type SelectedOutlineKeyframedDragChange = {
+    readonly type: 'keyframed';
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly fieldKey: string;
+    readonly sourceFrame: number;
+    readonly value: unknown;
+    readonly schema: SequenceSchema;
+    readonly clientId: string;
+};
+export type SelectedOutlineDragChange = SelectedOutlineStaticDragChange | SelectedOutlineKeyframedDragChange;
 export declare const getSelectedOutlineDragChanges: ({ dragStates, lastValues, }: {
     readonly dragStates: readonly SelectedOutlineDragState[];
     readonly lastValues: ReadonlyMap<string, string>;
+}) => SelectedOutlineDragChange[];
+export type SelectedOutlineScaleEdge = 'top' | 'right' | 'bottom' | 'left';
+type SelectedOutlineScaleEdgeInfo = {
+    readonly axis: 'x' | 'y';
+    readonly cursor: React.CSSProperties['cursor'];
+    readonly end: OutlinePoint;
+    readonly extent: number;
+    readonly normal: OutlinePoint;
+    readonly start: OutlinePoint;
+};
+export declare const getSelectedOutlineScaleEdgeInfo: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], edge: SelectedOutlineScaleEdge) => SelectedOutlineScaleEdgeInfo | null;
+export declare const getSelectedOutlineScaleDragStates: ({ dragTargets, getDragOverrides, }: {
+    readonly dragTargets: readonly SelectedOutlineScaleDragTarget[];
+    readonly getDragOverrides: GetDragOverrides;
+}) => SelectedOutlineScaleDragState[];
+export declare const getSelectedOutlineScaleDragValues: ({ axis, dragStates, scaleFactor, }: {
+    readonly axis: "x" | "y";
+    readonly dragStates: readonly SelectedOutlineScaleDragState[];
+    readonly scaleFactor: number;
+}) => Map<string, string | number>;
+export declare const getSelectedOutlineScaleDragChanges: ({ dragStates, lastValues, }: {
+    readonly dragStates: readonly SelectedOutlineScaleDragState[];
+    readonly lastValues: ReadonlyMap<string, string | number>;
 }) => {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
     fieldKey: string;
-    value: string;
+    value: string | number;
     defaultValue: string | null;
     schema: SequenceSchema;
 }[];