@remotion/studio 4.0.469 → 4.0.470

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

@@ -5,6 +5,7 @@ type Props = {
     readonly dragging: boolean;
     readonly type: 'in' | 'out';
     readonly atFrame: number;
+    readonly onPointerDown?: (e: React.PointerEvent<HTMLDivElement>) => void;
 };
 export declare const TimelineInOutPointerHandle: React.FC<Props>;
 export {};

package/dist/components/Timeline/TimelineInOutPointerHandle.js

@@ -18,7 +18,7 @@ const line = {
 };
 exports.inPointerHandle = (0, react_1.createRef)();
 exports.outPointerHandle = (0, react_1.createRef)();
-const InnerTimelineInOutPointerHandle = ({ atFrame, dragging, timelineWidth, type }) => {
+const InnerTimelineInOutPointerHandle = ({ atFrame, dragging, onPointerDown, timelineWidth, type }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const style = (0, react_1.useMemo)(() => {
         return {
@@ -27,17 +27,18 @@ const InnerTimelineInOutPointerHandle = ({ atFrame, dragging, timelineWidth, typ
                 ? colors_1.LIGHT_TRANSPARENT
                 : 'rgba(255, 255, 255, 0.1)',
             transform: `translateX(${(0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(atFrame, videoConfig.durationInFrames, timelineWidth)}px)`,
+            top: 0,
         };
     }, [atFrame, dragging, timelineWidth, videoConfig.durationInFrames]);
-    return (jsx_runtime_1.jsx("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style }));
+    return (jsx_runtime_1.jsx("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style, onPointerDown: onPointerDown }));
 };
-const TimelineInOutPointerHandle = ({ dragging, type, atFrame, }) => {
+const TimelineInOutPointerHandle = ({ dragging, onPointerDown, type, atFrame, }) => {
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     // When switching from a content which has no timeline (still or asset preview)
     // the timeline first needs to mount, so we need to wait for the timeline width
     if (timelineWidth === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx(InnerTimelineInOutPointerHandle, { atFrame: atFrame, dragging: dragging, timelineWidth: timelineWidth, type: type }));
+    return (jsx_runtime_1.jsx(InnerTimelineInOutPointerHandle, { atFrame: atFrame, dragging: dragging, onPointerDown: onPointerDown, timelineWidth: timelineWidth, type: type }));
 };
 exports.TimelineInOutPointerHandle = TimelineInOutPointerHandle;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatus, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+export declare const shouldShowTimelineKeyframeControls: ({ propStatus, selected, }: {
+    propStatus: CanUpdateSequencePropStatus | null;
+    selected: boolean;
+}) => boolean;
+export declare const TimelineKeyframeControls: React.FC<{
+    readonly fieldKey: string;
+    readonly propStatus: CanUpdateSequencePropStatus;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly fileName: string;
+    readonly keyframeDisplayOffset: number;
+    readonly defaultValue: unknown;
+    readonly dragOverrideValue: unknown | undefined;
+    readonly schema: SequenceSchema;
+    readonly effectIndex: number | null;
+}>;

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -0,0 +1,217 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineKeyframeControls = exports.shouldShowTimelineKeyframeControls = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
+const call_add_keyframe_1 = require("./call-add-keyframe");
+const call_delete_keyframe_1 = require("./call-delete-keyframe");
+const get_keyframe_navigation_1 = require("./get-keyframe-navigation");
+const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
+const TimelineSelection_1 = require("./TimelineSelection");
+const controlsContainerStyle = {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    gap: 2,
+    marginRight: 4,
+};
+const navButtonStyle = {
+    alignItems: 'center',
+    background: 'none',
+    border: 'none',
+    color: 'white',
+    cursor: 'pointer',
+    display: 'flex',
+    flexShrink: 0,
+    fontSize: 8,
+    height: 12,
+    justifyContent: 'center',
+    lineHeight: 1,
+    outline: 'none',
+    padding: 0,
+    userSelect: 'none',
+    width: 10,
+};
+const diamondButtonStyle = {
+    ...navButtonStyle,
+    height: 10,
+    width: 10,
+};
+const svgStyle = { display: 'block' };
+const getCurrentKeyframeValue = ({ propStatus, jsxFrame, defaultValue, dragOverrideValue, }) => {
+    if (propStatus.canUpdate) {
+        return remotion_1.Internals.getEffectiveVisualModeValue({
+            codeValue: propStatus,
+            dragOverrideValue,
+            defaultValue,
+            shouldResortToDefaultValueIfUndefined: true,
+        });
+    }
+    if (propStatus.reason === 'keyframed') {
+        return remotion_1.Internals.interpolateKeyframedStatus({
+            frame: jsxFrame,
+            status: propStatus,
+        });
+    }
+    return null;
+};
+const shouldShowTimelineKeyframeControls = ({ propStatus, selected, }) => {
+    if (propStatus === null) {
+        return false;
+    }
+    if (selected) {
+        return true;
+    }
+    return (TimelineSelection_1.SELECTION_ENABLED &&
+        !propStatus.canUpdate &&
+        propStatus.reason === 'keyframed');
+};
+exports.shouldShowTimelineKeyframeControls = shouldShowTimelineKeyframeControls;
+const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, defaultValue, dragOverrideValue, schema, effectIndex, }) => {
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const setFrame = remotion_1.Internals.useTimelineSetFrame();
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const clientId = previewServerState.type === 'connected'
+        ? previewServerState.clientId
+        : null;
+    const jsxFrame = timelinePosition - keyframeDisplayOffset;
+    const keyframes = (0, react_1.useMemo)(() => (0, get_timeline_keyframes_1.getTimelineKeyframes)(propStatus, keyframeDisplayOffset), [propStatus, keyframeDisplayOffset]);
+    const hasKeyframeAtCurrentFrame = (0, react_1.useMemo)(() => {
+        if (propStatus.canUpdate || propStatus.reason === 'computed') {
+            return false;
+        }
+        return (0, get_keyframe_navigation_1.hasKeyframeAtSourceFrame)(propStatus.keyframes, jsxFrame);
+    }, [jsxFrame, propStatus]);
+    const previousDisplayFrame = (0, react_1.useMemo)(() => (0, get_keyframe_navigation_1.getPreviousKeyframeDisplayFrame)(keyframes, timelinePosition), [keyframes, timelinePosition]);
+    const nextDisplayFrame = (0, react_1.useMemo)(() => (0, get_keyframe_navigation_1.getNextKeyframeDisplayFrame)(keyframes, timelinePosition), [keyframes, timelinePosition]);
+    const canToggleKeyframe = propStatus.canUpdate || propStatus.reason === 'keyframed';
+    const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
+        setFrame((current) => {
+            const next = { ...current, [videoConfig.id]: frame };
+            remotion_1.Internals.persistCurrentFrame(next);
+            return next;
+        });
+    }, [setFrame, videoConfig.id]);
+    const onPrevious = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        if (previousDisplayFrame !== null) {
+            seekToDisplayFrame(previousDisplayFrame);
+        }
+    }, [previousDisplayFrame, seekToDisplayFrame]);
+    const onNext = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        if (nextDisplayFrame !== null) {
+            seekToDisplayFrame(nextDisplayFrame);
+        }
+    }, [nextDisplayFrame, seekToDisplayFrame]);
+    const onToggleKeyframe = (0, react_1.useCallback)(async (e) => {
+        e.stopPropagation();
+        if (!clientId || !canToggleKeyframe) {
+            return;
+        }
+        if (hasKeyframeAtCurrentFrame &&
+            !propStatus.canUpdate &&
+            propStatus.reason === 'keyframed') {
+            if (effectIndex === null) {
+                await (0, call_delete_keyframe_1.callDeleteSequenceKeyframe)({
+                    fileName,
+                    nodePath,
+                    fieldKey,
+                    sourceFrame: jsxFrame,
+                    schema,
+                    setCodeValues,
+                    clientId,
+                });
+                return;
+            }
+            await (0, call_delete_keyframe_1.callDeleteEffectKeyframe)({
+                fileName,
+                nodePath,
+                effectIndex,
+                fieldKey,
+                sourceFrame: jsxFrame,
+                schema,
+                setCodeValues,
+                clientId,
+            });
+            return;
+        }
+        const value = getCurrentKeyframeValue({
+            propStatus,
+            jsxFrame,
+            defaultValue,
+            dragOverrideValue,
+        });
+        if (value === null) {
+            return;
+        }
+        if (effectIndex === null) {
+            await (0, call_add_keyframe_1.callAddSequenceKeyframe)({
+                fileName,
+                nodePath,
+                fieldKey,
+                sourceFrame: jsxFrame,
+                value,
+                schema,
+                setCodeValues,
+                clientId,
+            });
+            return;
+        }
+        await (0, call_add_keyframe_1.callAddEffectKeyframe)({
+            fileName,
+            nodePath,
+            effectIndex,
+            fieldKey,
+            sourceFrame: jsxFrame,
+            value,
+            schema,
+            setCodeValues,
+            clientId,
+        });
+    }, [
+        canToggleKeyframe,
+        clientId,
+        defaultValue,
+        dragOverrideValue,
+        effectIndex,
+        fieldKey,
+        fileName,
+        hasKeyframeAtCurrentFrame,
+        jsxFrame,
+        nodePath,
+        propStatus,
+        schema,
+        setCodeValues,
+    ]);
+    const previousDisabled = previousDisplayFrame === null;
+    const nextDisabled = nextDisplayFrame === null;
+    const previousStyle = (0, react_1.useMemo)(() => ({
+        ...navButtonStyle,
+        cursor: previousDisabled ? 'default' : 'pointer',
+        opacity: previousDisabled ? 0.35 : 1,
+    }), [previousDisabled]);
+    const nextStyle = (0, react_1.useMemo)(() => ({
+        ...navButtonStyle,
+        cursor: nextDisabled ? 'default' : 'pointer',
+        opacity: nextDisabled ? 0.35 : 1,
+    }), [nextDisabled]);
+    const diamondStyle = (0, react_1.useMemo)(() => ({
+        ...diamondButtonStyle,
+        backgroundColor: hasKeyframeAtCurrentFrame ? colors_1.BLUE : colors_1.LIGHT_TEXT,
+        borderRadius: 1,
+        boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.4)',
+        cursor: canToggleKeyframe && clientId ? 'pointer' : 'default',
+        opacity: canToggleKeyframe && clientId ? 1 : 0.35,
+        transform: 'rotate(45deg)',
+    }), [canToggleKeyframe, clientId, hasKeyframeAtCurrentFrame]);
+    return (jsx_runtime_1.jsxs("div", { style: controlsContainerStyle, children: [
+            jsx_runtime_1.jsx("button", { type: "button", style: previousStyle, disabled: previousDisabled, onPointerDown: previousDisabled ? undefined : onPrevious, "aria-label": "Go to previous keyframe", title: "Previous keyframe", children: jsx_runtime_1.jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M5 1L2 4L5 7Z", fill: "#ccc" }) }) }), jsx_runtime_1.jsx("button", { type: "button", style: diamondStyle, disabled: !canToggleKeyframe || !clientId, onPointerDown: canToggleKeyframe && clientId ? onToggleKeyframe : undefined, "aria-label": hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', title: hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe' }), jsx_runtime_1.jsx("button", { type: "button", style: nextStyle, disabled: nextDisabled, onPointerDown: nextDisabled ? undefined : onNext, "aria-label": "Go to next keyframe", title: "Next keyframe", children: jsx_runtime_1.jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M3 1L6 4L3 7Z", fill: "#ccc" }) }) })
+        ] }));
+};
+exports.TimelineKeyframeControls = TimelineKeyframeControls;

package/dist/components/Timeline/TimelineKeyframeDiamond.js

@@ -49,7 +49,6 @@ const diamondBase = {
     backgroundColor: colors_1.LIGHT_TEXT,
     borderRadius: 1,
     boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.4)',
-    pointerEvents: 'none',
 };
 const TimelineKeyframeDiamondUnmemoized = ({ frame, rowHeight, nodePathInfo }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
@@ -61,11 +60,10 @@ const TimelineKeyframeDiamondUnmemoized = ({ frame, rowHeight, nodePathInfo }) =
         }
         return {
             ...diamondBase,
-            backgroundColor: selected
-                ? TimelineSelection_1.TIMELINE_SELECTED_LABEL_BACKGROUND
-                : colors_1.LIGHT_TEXT,
+            backgroundColor: colors_1.LIGHT_TEXT,
+            outline: selected ? '2px solid ' + colors_1.BLUE : 'none',
             border: 'none',
-            cursor: 'default',
+            cursor: 'pointer',
             left: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, timelineWidth) - timeline_layout_1.TIMELINE_PADDING,
             padding: 0,
             pointerEvents: 'auto',
@@ -76,7 +74,10 @@ const TimelineKeyframeDiamondUnmemoized = ({ frame, rowHeight, nodePathInfo }) =
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (e.button === 0) {
             e.stopPropagation();
-            onSelect();
+            onSelect({
+                shiftKey: e.shiftKey,
+                toggleKey: e.metaKey || e.ctrlKey,
+            });
         }
     }, [onSelect]);
     if (style === null) {

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatusKeyframed } from 'remotion';
+import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TimelineKeyframedValue: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly propStatus: CanUpdateSequencePropStatusKeyframed;
+    readonly keyframeDisplayOffset: number;
+}>;

package/dist/components/Timeline/TimelineKeyframedValue.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineKeyframedValue = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const TimelineSchemaField_1 = require("./TimelineSchemaField");
+const wrapperStyle = {
+    opacity: 0.5,
+    pointerEvents: 'none',
+};
+const noop = () => undefined;
+const noopAsync = () => Promise.resolve();
+const TimelineKeyframedValue = ({ field, propStatus, keyframeDisplayOffset }) => {
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const jsxFrame = timelinePosition - keyframeDisplayOffset;
+    const computedValue = (0, react_1.useMemo)(() => {
+        const raw = remotion_1.Internals.interpolateKeyframedStatus({
+            frame: jsxFrame,
+            status: propStatus,
+        });
+        if (typeof raw === 'number') {
+            return Math.round(raw * 100) / 100;
+        }
+        return raw;
+    }, [jsxFrame, propStatus]);
+    const fakeStatus = (0, react_1.useMemo)(() => ({
+        canUpdate: true,
+        codeValue: computedValue,
+    }), [computedValue]);
+    if (computedValue === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("div", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: fakeStatus, effectiveValue: computedValue, onSave: noopAsync, onDragValueChange: noop, onDragEnd: noop }) }));
+};
+exports.TimelineKeyframedValue = TimelineKeyframedValue;

package/dist/components/Timeline/TimelineList.js

@@ -2,29 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
-const TimelineListItem_1 = require("./TimelineListItem");
-const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineSequenceItem_1 = require("./TimelineSequenceItem");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const container = {
     flex: 1,
     background: colors_1.BACKGROUND,
 };
 const TimelineList = ({ timeline }) => {
-    const { clearSelection } = (0, TimelineSelection_1.useTimelineSelection)();
-    // Selection-triggering click handlers in children call e.stopPropagation(),
-    // so any pointerdown that bubbles up here is by definition on empty space
-    // and should clear the current selection.
-    const onPointerDown = (0, react_1.useCallback)((e) => {
-        if (e.button !== 0) {
-            return;
-        }
-        clearSelection();
-    }, [clearSelection]);
-    return (jsx_runtime_1.jsxs("div", { style: container, onPointerDown: onPointerDown, children: [
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
             jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
-                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineListItem_1.TimelineListItem, { nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo }, track.sequence.id) }, track.sequence.id));
+                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset }, track.sequence.id) }, track.sequence.id));
             })] }));
 };
 exports.TimelineList = TimelineList;

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

@@ -1,13 +1,15 @@
 import React from 'react';
+import type { TimelineSelectionInteraction } from './TimelineSelection';
 export declare const TimelineRowChrome: React.FC<{
     readonly depth: number;
     readonly eye: React.ReactNode;
+    readonly keyframeControls?: React.ReactNode;
     readonly arrow: React.ReactNode;
     readonly children: React.ReactNode;
     readonly style: React.CSSProperties;
     readonly selected: boolean;
     readonly selectable: boolean;
-    readonly onSelect: () => void;
+    readonly onSelect: (interaction?: TimelineSelectionInteraction) => void;
     readonly showSelectedBackground: boolean;
     readonly containsSelection: boolean;
     readonly outerHeight: number | null;

package/dist/components/Timeline/TimelineRowChrome.js

@@ -11,19 +11,36 @@ const rowBase = {
     alignItems: 'stretch',
     display: 'flex',
 };
-const chromeColumnStyle = {
+const leftChromeStyle = {
     alignItems: 'center',
     alignSelf: 'stretch',
     display: 'flex',
     flexShrink: 0,
-    paddingLeft: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
 };
-const TimelineRowChrome = ({ depth, eye, arrow, children, style, selected, selectable, onSelect, showSelectedBackground, containsSelection, outerHeight, onDoubleClick, }) => {
+const keyframeControlsColumnStyle = {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    justifyContent: 'flex-start',
+    marginRight: -(timeline_row_layout_1.TIMELINE_KEYFRAME_CONTROLS_WIDTH - timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING),
+    width: timeline_row_layout_1.TIMELINE_KEYFRAME_CONTROLS_WIDTH,
+};
+const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, onSelect, showSelectedBackground, containsSelection, outerHeight, onDoubleClick, }) => {
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
+    const chromeColumnStyle = (0, react_1.useMemo)(() => ({
+        alignItems: 'center',
+        alignSelf: 'stretch',
+        display: 'flex',
+        flexShrink: 0,
+        paddingLeft: keyframeControls ? 0 : timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
+    }), [keyframeControls]);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (e.button === 0) {
             e.stopPropagation();
-            onSelect();
+            onSelect({
+                shiftKey: e.shiftKey,
+                toggleKey: e.metaKey || e.ctrlKey,
+            });
         }
     }, [onSelect]);
     const onContextMenu = (0, react_1.useCallback)((e) => {
@@ -52,7 +69,8 @@ const TimelineRowChrome = ({ depth, eye, arrow, children, style, selected, selec
         };
     }, [outerHeight, highlightBackground]);
     const chrome = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] }), children] }));
+            jsx_runtime_1.jsxs("div", { style: leftChromeStyle, children: [keyframeControls ? (jsx_runtime_1.jsx("div", { style: keyframeControlsColumnStyle, children: keyframeControls })) : null, 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, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
     }

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

@@ -1,39 +1,83 @@
 import React, { type CSSProperties } from 'react';
-import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import type { SequenceNodePathInfo, TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TIMELINE_SELECTED_BACKGROUND = "#3B3F42";
 export declare const TIMELINE_SELECTED_LABEL_BACKGROUND = "#B0B0B0";
 export declare const TIMELINE_SELECTED_LABEL_TEXT = "black";
 export declare const TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = 2;
 export declare const getTimelineSelectedLabelStyle: (selected: boolean, subcategory: boolean) => CSSProperties;
 export declare const getTimelineColor: (selected: boolean, subcategory: boolean) => "black" | "rgba(255, 255, 255, 0.8)";
-export declare const TIMELINE_SELECTED_TRACK_HIGHLIGHT_STYLE: CSSProperties;
+export declare const getTimelineSelectedTrackHighlightStyle: (timelineWidth: number) => CSSProperties;
 export declare const SELECTION_ENABLED = false;
-export type TimelineSelection = {
-    readonly type: 'row';
+export declare const TIMELINE_TOP_DRAG = false;
+export declare const ENABLE_OUTLINES = false;
+type TimelineSelectionBase = {
     readonly nodePathInfo: SequenceNodePathInfo;
-} | {
+};
+export type TimelineSelection = (TimelineSelectionBase & {
+    readonly type: 'sequence';
+}) | (TimelineSelectionBase & {
+    readonly type: 'sequence-prop';
+    readonly key: string;
+}) | (TimelineSelectionBase & {
+    readonly type: 'sequence-all-effects';
+}) | (TimelineSelectionBase & {
+    readonly type: 'sequence-effect';
+    readonly i: number;
+}) | (TimelineSelectionBase & {
+    readonly type: 'sequence-effect-prop';
+    readonly i: number;
+    readonly key: string;
+}) | (TimelineSelectionBase & {
     readonly type: 'keyframe';
-    readonly nodePathInfo: SequenceNodePathInfo;
     readonly frame: number;
+});
+export type TimelineSelectionInteraction = {
+    readonly shiftKey: boolean;
+    readonly toggleKey: boolean;
 };
+export declare const isTimelineSelectionModifierEvent: ({ shiftKey, metaKey, ctrlKey, }: {
+    readonly shiftKey: boolean;
+    readonly metaKey: boolean;
+    readonly ctrlKey: boolean;
+}) => boolean;
+export type TimelineSelectionState = {
+    readonly selectedItems: readonly TimelineSelection[];
+    readonly anchor: TimelineSelection | null;
+};
+export declare const getTimelineSelectionAfterInteraction: ({ currentState, clickedItem, interaction, allSelectableItems, }: {
+    readonly currentState: TimelineSelectionState;
+    readonly clickedItem: TimelineSelection;
+    readonly interaction: TimelineSelectionInteraction;
+    readonly allSelectableItems: readonly TimelineSelection[];
+}) => TimelineSelectionState;
 type TimelineSelectionContextValue = {
     readonly canSelect: boolean;
+    readonly selectedItems: readonly TimelineSelection[];
     readonly isSelected: (item: TimelineSelection) => boolean;
-    readonly selectItem: (item: TimelineSelection) => void;
+    readonly selectItem: (item: TimelineSelection, interaction?: TimelineSelectionInteraction) => void;
+    readonly selectItems: (items: readonly TimelineSelection[]) => void;
+    readonly registerSelectableItem: (item: TimelineSelection) => () => void;
     readonly containsSelection: (nodePathInfo: SequenceNodePathInfo) => boolean;
     readonly clearSelection: () => void;
 };
+export declare const getTimelineSelectionFromNodePathInfo: (nodePathInfo: SequenceNodePathInfo | null) => TimelineSelection | null;
+export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TrackWithHash, "nodePathInfo">[]) => TimelineSelection[];
+export declare const getTimelineSequenceSelectionKey: (nodePathInfo: SequenceNodePathInfo) => string;
+export declare const TimelineSelectAllKeybindings: React.FC<{
+    readonly timeline: readonly TrackWithHash[];
+}>;
 export declare const TimelineSelectionProvider: React.FC<{
     readonly children: React.ReactNode;
 }>;
 export declare const useTimelineSelection: () => TimelineSelectionContextValue;
+export declare const useCurrentTimelineSelectionStateAsRef: () => React.RefObject<TimelineSelectionContextValue>;
 export declare const useTimelineRowSelection: (nodePathInfo: SequenceNodePathInfo | null) => {
-    onSelect: () => void;
+    onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
     selectable: boolean;
     selected: boolean;
 };
 export declare const useTimelineKeyframeSelection: (nodePathInfo: SequenceNodePathInfo, frame: number) => {
-    onSelect: () => void;
+    onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
     selectable: boolean;
     selected: boolean;
 };