@remotion/studio 4.0.515 → 4.0.517

package/dist/components/Timeline/TimelineFieldRowContent.js

@@ -3,36 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineFieldRowContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineFieldLabel_1 = require("./TimelineFieldLabel");
-const TimelineRowChrome_1 = require("./TimelineRowChrome");
-const TimelineRowLayoutContext_1 = require("./TimelineRowLayoutContext");
+const TimelineSelection_1 = require("./TimelineSelection");
 const Transform3DModeContext_1 = require("./Transform3DModeContext");
-const stackedHeaderStyle = {
-    display: 'flex',
-    flex: `0 0 ${timeline_layout_1.SCHEMA_FIELD_ROW_HEIGHT}px`,
-    minWidth: 0,
+const stackedValueStyle = {
+    ...timeline_field_row_layout_1.timelineFieldValueColumnStyle,
+    paddingLeft: TimelineSelection_1.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING,
 };
-const stackedLabelStyle = {
-    flex: 1,
-    minWidth: 0,
-};
-const TimelineFieldRowContent = ({ field, rowDepth, selected, keyframeControls, children }) => {
+const TimelineFieldRowContent = ({ field, rowDepth, selected, children }) => {
     var _a;
     const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
-    const { keyframeControlsPlacement } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const stacked = (0, timeline_field_row_layout_1.isTimelineFieldStacked)({ field, transform3DMode });
-    const compactStacked = stacked && field.typeName !== 'text-content';
     const label = (jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selected, label: (_a = field.description) !== null && _a !== void 0 ? _a : field.key, stacked: stacked }));
-    const value = (jsx_runtime_1.jsx("div", { style: compactStacked
-            ? timeline_field_row_layout_1.timelineCompactStackedFieldValueColumnStyle
-            : timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: children }));
-    const controls = keyframeControlsPlacement === 'after-label' ? (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowKeyframeControlsColumn, { depth: rowDepth, children: keyframeControls })) : null;
+    const value = (jsx_runtime_1.jsx("div", { style: stacked ? stackedValueStyle : timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: children }));
     if (stacked) {
-        return (jsx_runtime_1.jsxs("div", { style: timeline_field_row_layout_1.timelineStackedFieldContentStyle, children: [controls ? (jsx_runtime_1.jsxs("div", { style: stackedHeaderStyle, children: [
-                        jsx_runtime_1.jsx("div", { style: stackedLabelStyle, children: label }), controls] })) : (label), value] }));
+        return (jsx_runtime_1.jsxs("div", { style: timeline_field_row_layout_1.timelineStackedFieldContentStyle, children: [label, value] }));
     }
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [label, controls, value] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [label, value] }));
 };
 exports.TimelineFieldRowContent = TimelineFieldRowContent;

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

@@ -1,6 +1,5 @@
 import React from 'react';
 export declare const TimelineImageInfo: React.FC<{
     readonly src: string;
-    readonly visualizationWidth: number;
     readonly offsetInPixels: number;
 }>;

package/dist/components/Timeline/TimelineImageInfo.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineImageInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const timeline_utils_1 = require("@remotion/timeline-utils");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -14,38 +13,20 @@ const containerStyle = {
     display: 'flex',
     borderTopLeftRadius: 2,
     borderBottomLeftRadius: 2,
+    backgroundRepeat: 'repeat-x',
+    backgroundSize: 'auto 100%',
+    backgroundPositionY: 0,
 };
-const TimelineImageInfo = ({ src, visualizationWidth, offsetInPixels }) => {
-    const ref = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const { current } = ref;
-        if (!current) {
-            return;
-        }
-        const canvas = document.createElement('canvas');
-        canvas.width = visualizationWidth * window.devicePixelRatio;
-        canvas.height = HEIGHT * window.devicePixelRatio;
-        canvas.style.width = visualizationWidth + 'px';
-        canvas.style.height = HEIGHT + 'px';
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        current.appendChild(canvas);
-        const img = new Image();
-        img.crossOrigin = 'anonymous';
-        img.onload = () => {
-            (0, timeline_utils_1.drawRepeatingImageThumbnail)({
-                canvas,
-                image: img,
-                offsetInPixels: offsetInPixels * window.devicePixelRatio,
-            });
+const TimelineImageInfo = ({ src, offsetInPixels }) => {
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...containerStyle,
+            // This is Studio UI, not a Remotion composition that needs to wait for
+            // background images before rendering.
+            backgroundImage: `url(${JSON.stringify(src)})`,
+            backgroundPositionX: -offsetInPixels,
         };
-        img.src = src;
-        return () => {
-            current.removeChild(canvas);
-        };
-    }, [offsetInPixels, src, visualizationWidth]);
-    return jsx_runtime_1.jsx("div", { ref: ref, style: containerStyle });
+    }, [offsetInPixels, src]);
+    return jsx_runtime_1.jsx("div", { style: style });
 };
 exports.TimelineImageInfo = TimelineImageInfo;

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

@@ -1,10 +1,9 @@
 import React from 'react';
 import type { CanUpdateSequencePropStatus, DragOverrideValue, InteractivitySchema, SequencePropsSubscriptionKey } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-import { type TimelineSelection } from './TimelineSelection';
 export declare const getSelectedKeyframeControlNodePathInfos: ({ clickedNodePathInfo, selectedItems, }: {
     readonly clickedNodePathInfo: SequenceNodePathInfo;
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
 }) => readonly SequenceNodePathInfo[];
 export declare const shouldShowTimelineKeyframeControls: ({ propStatus, selected, keyframable, }: {
     propStatus: CanUpdateSequencePropStatus | null;

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -15,6 +15,7 @@ const call_delete_keyframe_1 = require("./call-delete-keyframe");
 const get_easing_selection_after_keyframe_delete_1 = require("./get-easing-selection-after-keyframe-delete");
 const get_keyframe_navigation_1 = require("./get-keyframe-navigation");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
+const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineKeyframeDiamondIcon_1 = require("./TimelineKeyframeDiamondIcon");
 const TimelineKeyframeTracksContext_1 = require("./TimelineKeyframeTracksContext");
 const TimelineSelection_1 = require("./TimelineSelection");
@@ -405,23 +406,28 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         timelinePosition,
         tracks,
     ]);
-    const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
+    const seekToDisplayFrame = (0, react_1.useCallback)((frame, direction) => {
         setFrame((current) => {
             const next = { ...current, [videoConfig.id]: frame };
             remotion_1.Internals.persistCurrentFrame(next);
             return next;
         });
-    }, [setFrame, videoConfig.id]);
+        (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+            direction,
+            durationInFrames: videoConfig.durationInFrames,
+            frame,
+        });
+    }, [setFrame, videoConfig.durationInFrames, videoConfig.id]);
     const onPrevious = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         if (previousDisplayFrame !== null) {
-            seekToDisplayFrame(previousDisplayFrame);
+            seekToDisplayFrame(previousDisplayFrame, 'fit-left');
         }
     }, [previousDisplayFrame, seekToDisplayFrame]);
     const onNext = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         if (nextDisplayFrame !== null) {
-            seekToDisplayFrame(nextDisplayFrame);
+            seekToDisplayFrame(nextDisplayFrame, 'fit-right');
         }
     }, [nextDisplayFrame, seekToDisplayFrame]);
     const onToggleKeyframe = (0, react_1.useCallback)(async (e) => {

package/dist/components/Timeline/TimelinePlayCursorSyncer.js

@@ -19,10 +19,12 @@ const TimelinePlayCursorSyncer = () => {
     const compositionId = canvasContent && canvasContent.type === 'composition'
         ? canvasContent.compositionId
         : null;
+    // Asset previews have a synthetic video config, but no composition ID
+    // with which to look up a persisted timeline zoom.
     const zoom = compositionId
         ? ((_a = zoomMap[compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM)
-        : null;
-    if (zoom && video) {
+        : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+    if (video) {
         (0, imperative_state_1.setCurrentFrame)(timelinePosition);
         (0, imperative_state_1.setCurrentZoom)(zoom);
         (0, imperative_state_1.setCurrentDuration)(video.durationInFrames);

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -31,7 +31,7 @@ const isTimelinePrimitiveFieldInfo = (field) => {
 exports.isTimelinePrimitiveFieldInfo = isTimelinePrimitiveFieldInfo;
 const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, effectiveValue, scaleLockNodePath, }) => {
     if (field.typeName === 'number') {
-        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(TimelineNumberField_1.TimelineNumberField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+        return (jsx_runtime_1.jsx(TimelineNumberField_1.TimelineNumberField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }));
     }
     if (field.typeName === 'rotation-css' ||
         field.typeName === 'rotation-degrees') {

package/dist/components/Timeline/TimelineRotationField.js

@@ -14,10 +14,8 @@ const containerStyle = {
     gap: 4,
 };
 const compactDraggerStyle = {
-    paddingBottom: 2,
     paddingLeft: 2,
     paddingRight: 2,
-    paddingTop: 2,
 };
 const ROTATION_LABELS = ['X', 'Y', 'Z'];
 const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {

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

@@ -18,7 +18,6 @@ export declare const TimelineRowChrome: React.FC<{
     readonly showSelectedBackground: boolean;
     readonly containsSelection: boolean;
     readonly hovered?: boolean;
-    readonly isFieldRow: boolean;
     readonly outerHeight: number | null;
     readonly onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void;
     readonly onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;

package/dist/components/Timeline/TimelineRowChrome.js

@@ -69,8 +69,8 @@ const TimelineRowKeyframeControlsColumn = ({ children, depth }) => {
     return (jsx_runtime_1.jsx("div", { style: leftChromeStyle, children: jsx_runtime_1.jsx("div", { style: style, children: children }) }));
 };
 exports.TimelineRowKeyframeControlsColumn = TimelineRowKeyframeControlsColumn;
-const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, onSelect, showSelectedBackground, containsSelection, hovered = false, isFieldRow, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, onPointerEnter, onPointerLeave, }) => {
-    const { basePadding, keyframeControlsPlacement, rowBorderRadius, rowHorizontalMargin, } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
+const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, onSelect, showSelectedBackground, containsSelection, hovered = false, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, onPointerEnter, onPointerLeave, }) => {
+    const { basePadding, rowBorderRadius, rowHorizontalMargin } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const selectedBackground = (0, react_1.useContext)(exports.TimelineRowSelectedBackgroundContext);
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
     const chromeColumnStyle = (0, react_1.useMemo)(() => ({
@@ -135,8 +135,7 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
             backgroundColor: highlightBackground,
         };
     }, [outerHeight, highlightBackground]);
-    const shouldRenderLeftChrome = !isFieldRow || keyframeControlsPlacement === 'before-label';
-    const chrome = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [shouldRenderLeftChrome ? (keyframeControls ? (jsx_runtime_1.jsx(exports.TimelineRowKeyframeControlsColumn, { depth: depth, children: keyframeControls })) : (jsx_runtime_1.jsx("div", { style: leftChromeStyle, children: jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] }) }))) : null, children] }));
+    const chrome = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [keyframeControls ? (jsx_runtime_1.jsx(exports.TimelineRowKeyframeControlsColumn, { depth: depth, children: keyframeControls })) : (jsx_runtime_1.jsx("div", { style: leftChromeStyle, children: jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] }) })), children] }));
     if (outerStyle) {
         return (jsx_runtime_1.jsx("div", { style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClickIfNotInteractive, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
     }

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

@@ -2,7 +2,6 @@ type TimelineRowLayout = {
     readonly basePadding: number;
     readonly highlightSelectedLabel: boolean;
     readonly keyframeControlsPadding: number;
-    readonly keyframeControlsPlacement: 'before-label' | 'after-label';
     readonly rowBorderRadius: number;
     readonly rowHorizontalMargin: number;
 };

package/dist/components/Timeline/TimelineRowLayoutContext.js

@@ -2,21 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineRowLayoutContext = exports.INSPECTOR_TIMELINE_ROW_LAYOUT = void 0;
 const react_1 = require("react");
-const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 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,
-    keyframeControlsPlacement: 'after-label',
     rowBorderRadius: 4,
-    rowHorizontalMargin: InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING,
+    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,
-    keyframeControlsPlacement: 'before-label',
     rowBorderRadius: 0,
     rowHorizontalMargin: 0,
 });

package/dist/components/Timeline/TimelineScaleField.js

@@ -12,18 +12,14 @@ const timeline_field_utils_1 = require("./timeline-field-utils");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const leftDraggerStyle = {
-    paddingBottom: 2,
     paddingLeft: 0,
-    paddingTop: 2,
     textAlign: 'left',
-    width: 52,
+    width: 40,
 };
 const rightDraggerStyle = {
-    paddingBottom: 2,
     paddingRight: 0,
-    paddingTop: 2,
     textAlign: 'left',
-    width: 52,
+    width: 40,
 };
 const containerStyle = {
     alignItems: 'center',

package/dist/components/Timeline/TimelineSchemaField.js

@@ -37,6 +37,7 @@ exports.TimelineFieldValue = exports.TimelineNonEditableStatus = exports.Unsuppo
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
+const hoverable_1 = require("../../helpers/hoverable");
 const modals_1 = require("../../state/modals");
 const SettingsContext_1 = require("../SettingsContext");
 const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
@@ -62,7 +63,12 @@ const computedValue = {
     pointerEvents: 'none',
 };
 const fixLinkBase = {
-    color: colors_1.LIGHT_TEXT,
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.TRANSPARENT,
+        hoverBackground: colors_1.TRANSPARENT,
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
     display: 'inline-block',
     fontSize: 10,
     fontStyle: 'normal',
@@ -73,7 +79,7 @@ const fixLinkBase = {
     appearance: 'none',
     background: 'none',
     border: 'none',
-    cursor: 'pointer',
+    cursor: 'default',
     padding: 0,
 };
 const UnsupportedStatus = ({ label, onFix, formattedValue }) => {
@@ -94,7 +100,7 @@ const UnsupportedStatus = ({ label, onFix, formattedValue }) => {
         event.stopPropagation();
     };
     return (jsx_runtime_1.jsxs("span", { style: unsupportedStatusWrapper, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
-            jsx_runtime_1.jsx("span", { style: formattedValue ? computedValue : unsupportedLabel, inert: formattedValue, children: label }), onFix ? (jsx_runtime_1.jsx("button", { type: "button", style: fixLink, title: "Fix computed Studio value", onClick: (event) => {
+            jsx_runtime_1.jsx("span", { style: formattedValue ? computedValue : unsupportedLabel, inert: formattedValue, children: label }), onFix ? (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME} ${hoverable_1.HOVERABLE_CLASS_NAME}`, style: fixLink, title: "Fix computed Studio value", onClick: (event) => {
                     stopMousePropagation(event);
                     onFix();
                 }, onDoubleClick: stopMousePropagation, onPointerDown: stopPointerPropagation, onFocus: () => setFocused(true), onBlur: () => setFocused(false), tabIndex: visible ? 0 : -1, children: "Fix" })) : null] }));

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

@@ -1,3 +1,4 @@
+import { type CanvasSelectionInteraction, type CanvasSelectionItem, type CanvasSelectionSnapshot } from '@remotion/canvas';
 import React, { type CSSProperties } from 'react';
 import { type GetDragOverrides, type GetEffectDragOverrides, type PropStatuses } from 'remotion';
 import type { SequenceNodePathInfo, TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
@@ -20,46 +21,11 @@ export declare const getTimelineRowHighlightBackground: ({ showSelectedBackgroun
 }) => string | undefined;
 export declare const TIMELINE_BACKGROUND = "#15181B";
 export declare const TIMELINE_TICKS_BACKGROUND = "rgb(31,36,40)";
-export type TimelineSelection = {
-    readonly type: 'guide';
-    readonly guideId: string;
-} | {
-    readonly type: 'sequence';
-    readonly nodePathInfo: SequenceNodePathInfo;
-} | {
-    readonly type: 'sequence-prop';
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly key: string;
-} | {
-    readonly type: 'sequence-all-effects';
-    readonly nodePathInfo: SequenceNodePathInfo;
-} | {
-    readonly type: 'sequence-effect';
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly i: number;
-} | {
-    readonly type: 'sequence-effect-prop';
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly i: number;
-    readonly key: string;
-} | {
-    readonly type: 'keyframe';
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly frame: number;
-} | {
-    readonly type: 'easing';
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly fromFrame: number;
-    readonly toFrame: number;
-    readonly segmentIndex: number;
-};
+export type TimelineSelection = CanvasSelectionItem;
 export type TimelineEasingSelection = Extract<TimelineSelection, {
     type: 'easing';
 }>;
-export type TimelineSelectionInteraction = {
-    readonly shiftKey: boolean;
-    readonly toggleKey: boolean;
-};
+export type TimelineSelectionInteraction = CanvasSelectionInteraction;
 export declare const isTimelineSelectionModifierEvent: ({ shiftKey, metaKey, ctrlKey, }: {
     readonly shiftKey: boolean;
     readonly metaKey: boolean;
@@ -71,10 +37,7 @@ export declare const shouldSelectTimelineRowOnPointerDown: ({ selected, shiftKey
     readonly metaKey: boolean;
     readonly ctrlKey: boolean;
 }) => boolean;
-export type TimelineSelectionState = {
-    readonly selectedItems: readonly TimelineSelection[];
-    readonly anchor: TimelineSelection | null;
-};
+export type TimelineSelectionState = CanvasSelectionSnapshot;
 export declare const EMPTY_TIMELINE_SELECTION_STATE: TimelineSelectionState;
 export type TimelineMarqueeRect = {
     readonly left: number;
@@ -88,16 +51,16 @@ export type TimelineMarqueeSelectionCandidate = {
     readonly rect: TimelineMarqueeRect;
 };
 export declare const getTimelineSelectionAfterInteraction: ({ currentState, clickedItem, interaction, allSelectableItems, }: {
-    readonly currentState: TimelineSelectionState;
-    readonly clickedItem: TimelineSelection;
-    readonly interaction: TimelineSelectionInteraction;
-    readonly allSelectableItems: readonly TimelineSelection[];
-}) => TimelineSelectionState;
+    readonly currentState: CanvasSelectionSnapshot;
+    readonly clickedItem: CanvasSelectionItem;
+    readonly interaction: CanvasSelectionInteraction;
+    readonly allSelectableItems: readonly CanvasSelectionItem[];
+}) => CanvasSelectionSnapshot;
 export declare const getAvailableTimelineSelectionState: ({ availableKeys, availableItemsByKey, state, }: {
     readonly availableKeys: ReadonlySet<string>;
-    readonly availableItemsByKey?: ReadonlyMap<string, TimelineSelection> | undefined;
-    readonly state: TimelineSelectionState;
-}) => TimelineSelectionState;
+    readonly availableItemsByKey?: ReadonlyMap<string, CanvasSelectionItem> | undefined;
+    readonly state: CanvasSelectionSnapshot;
+}) => CanvasSelectionSnapshot;
 export declare const getNormalizedTimelineMarqueeRect: ({ startX, startY, currentX, currentY, }: {
     readonly startX: number;
     readonly startY: number;
@@ -119,12 +82,12 @@ export declare const getTimelineMarqueeSelection: ({ candidates, lockedSelection
     readonly marqueeRect: TimelineMarqueeRect;
 }) => {
     readonly lockedSelectionKind: TimelineMarqueeSelectionKind | null;
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly CanvasSelectionItem[];
 };
 export declare const extendTimelineMarqueeSelection: ({ currentSelection, marqueeSelection, }: {
-    readonly currentSelection: readonly TimelineSelection[];
-    readonly marqueeSelection: readonly TimelineSelection[];
-}) => readonly TimelineSelection[];
+    readonly currentSelection: readonly CanvasSelectionItem[];
+    readonly marqueeSelection: readonly CanvasSelectionItem[];
+}) => readonly CanvasSelectionItem[];
 type TimelineSelectionContextValue = {
     readonly canSelect: boolean;
     readonly revealRequest: TimelineSelectionRevealRequest | null;
@@ -151,23 +114,23 @@ type TimelineSelectionRevealRequest = {
     readonly item: TimelineSelection;
     readonly token: number;
 };
-export declare const getTimelineSelectionFromNodePathInfo: (nodePathInfo: SequenceNodePathInfo | null) => TimelineSelection | null;
-export declare const getTimelineSelectionKey: (item: TimelineSelection) => string;
-export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TimelineTrackData, "nodePathInfo">[]) => TimelineSelection[];
+export declare const getTimelineSelectionFromNodePathInfo: (nodePathInfo: SequenceNodePathInfo | null) => CanvasSelectionItem | null;
+export declare const getTimelineSelectionKey: (item: CanvasSelectionItem) => string;
+export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TimelineTrackData, "nodePathInfo">[]) => CanvasSelectionItem[];
 export declare const getSelectableTimelineItems: ({ getDragOverrides, getEffectDragOverrides, getIsExpanded, propStatuses, selectedItems, timeline, timelinePosition, }: {
     readonly getDragOverrides: GetDragOverrides;
     readonly getEffectDragOverrides: GetEffectDragOverrides;
     readonly getIsExpanded: GetIsExpanded;
     readonly propStatuses: PropStatuses;
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly CanvasSelectionItem[];
     readonly timeline: readonly TimelineTrackData[];
     readonly timelinePosition: number;
-}) => TimelineSelection[];
+}) => CanvasSelectionItem[];
 export declare const getTimelineSequenceSelectionKey: (nodePathInfo: SequenceNodePathInfo) => string;
 export declare const TimelineSelectAllKeybindings: React.FC<{
     readonly timeline: readonly TimelineTrackData[];
 }>;
-export declare const getTimelineSequenceSelectionForEscape: (selectedItems: readonly TimelineSelection[]) => {
+export declare const getTimelineSequenceSelectionForEscape: (selectedItems: readonly CanvasSelectionItem[]) => {
     readonly type: "sequence";
     readonly nodePathInfo: SequenceNodePathInfo;
 } | null;
@@ -186,17 +149,17 @@ export declare const useTimelineMarqueeSelection: () => {
     marqueeRect: TimelineMarqueeRect | null;
     onPointerDownCapture: (event: React.PointerEvent<HTMLDivElement>) => void;
 };
-export declare const useTimelineMarqueeSelectableItem: (item: TimelineSelection | null, ref: React.RefObject<Element | null>) => void;
+export declare const useTimelineMarqueeSelectableItem: (item: CanvasSelectionItem | null, ref: React.RefObject<Element | null>) => void;
 export declare const useTimelineRowSelection: (nodePathInfo: SequenceNodePathInfo | null) => {
-    onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    onSelect: (interaction?: CanvasSelectionInteraction | undefined) => void;
     selectable: boolean;
-    selectionItem: TimelineSelection | null;
+    selectionItem: CanvasSelectionItem | null;
     selected: boolean;
 };
 export declare const useTimelineKeyframeSelection: (nodePathInfo: SequenceNodePathInfo, frame: number) => {
-    onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    onSelect: (interaction?: CanvasSelectionInteraction | undefined) => void;
     selectable: boolean;
-    selectionItem: TimelineSelection;
+    selectionItem: CanvasSelectionItem;
     selected: boolean;
 };
 export declare const useTimelineEasingSelection: ({ nodePathInfo, fromFrame, toFrame, segmentIndex, }: {
@@ -205,7 +168,7 @@ export declare const useTimelineEasingSelection: ({ nodePathInfo, fromFrame, toF
     readonly toFrame: number;
     readonly segmentIndex: number;
 }) => {
-    onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    onSelect: (interaction?: CanvasSelectionInteraction | undefined) => void;
     selectable: boolean;
     selected: boolean;
     selectionItem: {
@@ -221,7 +184,7 @@ export declare const useTimelineGuideSelection: (guideId: string) => {
     onSelect: () => void;
     selectable: boolean;
     selected: boolean;
-    selectionItem: TimelineSelection;
+    selectionItem: CanvasSelectionItem;
 };
 export declare const useTimelineRowContainsSelection: (nodePathInfo: SequenceNodePathInfo | null) => boolean;
 export declare const useTimelineRowHighlightBackground: (nodePathInfo: SequenceNodePathInfo | null, { hovered, selectedBackground, }: {