@remotion/studio 4.0.512 → 4.0.514

package/dist/components/Timeline/TimelinePinchZoom.js

@@ -9,11 +9,11 @@ const timeline_zoom_1 = require("../../state/timeline-zoom");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 /**
- * Maps wheel deltaY to zoom delta. Must be large enough that typical ctrl+wheel
- * pinch steps change `TimelineZoomCtx` zoom by at least one 0.1 step after
- * `Math.round(z * 10) / 10` in `timeline-zoom.tsx` (0.005 was too small).
+ * Maps wheel deltaY to a multiplicative zoom change. Must be large enough that
+ * typical ctrl+wheel pinch steps change `TimelineZoomCtx` zoom by at least one
+ * 0.1 step after rounding in `clampTimelineZoom` (0.005 was too small at 1x).
  */
-const ZOOM_WHEEL_DELTA = 0.06;
+const ZOOM_WHEEL_SENSITIVITY = 0.06;
 const TimelinePinchZoom = () => {
     const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
@@ -60,7 +60,7 @@ const TimelinePinchZoom = () => {
         else if (deltaMode === WheelEvent.DOM_DELTA_PAGE) {
             scaledDeltaY *= scrollEl.clientHeight;
         }
-        setZoom(canvasContent.compositionId, (z) => z - scaledDeltaY * ZOOM_WHEEL_DELTA, { anchorFrame: null, anchorContentX });
+        setZoom(canvasContent.compositionId, (z) => z * Math.exp(-scaledDeltaY * ZOOM_WHEEL_SENSITIVITY), { anchorFrame: null, anchorContentX });
     }, [
         editorZoomGestures,
         isVideoComposition,

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

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

package/dist/components/Timeline/TimelineRowChrome.js

@@ -35,11 +35,9 @@ 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, selectionItem, onSelect, showSelectedBackground, containsSelection, hovered = false, isFieldRow, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, onPointerEnter, onPointerLeave, }) => {
-    const ref = (0, react_1.useRef)(null);
+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 indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
-    (0, TimelineSelection_1.useTimelineFocusableItem)(selectionItem, ref);
     const chromeColumnStyle = (0, react_1.useMemo)(() => ({
         alignItems: 'center',
         alignSelf: 'stretch',
@@ -60,6 +58,15 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
         e.stopPropagation();
         onSelect();
     }, [onSelect]);
+    const onDoubleClickIfNotInteractive = (0, react_1.useCallback)((e) => {
+        const { target } = e;
+        if (target instanceof Element &&
+            e.currentTarget.contains(target.closest('button, input, select, textarea, a, [contenteditable="true"]'))) {
+            e.stopPropagation();
+            return;
+        }
+        onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(e);
+    }, [onDoubleClick]);
     const highlightBackground = (0, TimelineSelection_1.getTimelineRowHighlightBackground)({
         showSelectedBackground,
         selected,
@@ -95,8 +102,8 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
     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] }));
     if (outerStyle) {
-        return (jsx_runtime_1.jsx("div", { ref: ref, style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
+        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 }) }));
     }
-    return (jsx_runtime_1.jsx("div", { ref: ref, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: innerRowStyle, children: chrome }));
+    return (jsx_runtime_1.jsx("div", { onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClickIfNotInteractive, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: innerRowStyle, children: chrome }));
 };
 exports.TimelineRowChrome = TimelineRowChrome;

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

@@ -1,13 +1,17 @@
 import React from 'react';
 import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusStatic, SequencePropsSubscriptionKey } from 'remotion';
+import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
-export declare const TIMELINE_COMPUTED_EFFECT_FIX_LINK = "https://www.remotion.dev/docs/studio/interactivity-best-practices#keep-effects-editable";
 export declare const UnsupportedStatus: React.FC<{
-    readonly label: string;
-    readonly fixHref?: string;
+    readonly label: React.ReactNode;
+    readonly onFix?: () => void;
+    readonly formattedValue: boolean;
 }>;
 export declare const TimelineNonEditableStatus: React.FC<{
     readonly propStatus: CanUpdateSequencePropStatusFalse;
+    readonly field: SchemaFieldInfo;
+    readonly runtimeValue: unknown;
+    readonly validatedLocation: CodePosition;
 }>;
 export declare const TimelineFieldValue: React.FC<{
     readonly field: SchemaFieldInfo;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -1,18 +1,47 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+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.TimelineFieldValue = exports.TimelineNonEditableStatus = exports.UnsupportedStatus = exports.TIMELINE_COMPUTED_EFFECT_FIX_LINK = void 0;
+exports.TimelineFieldValue = exports.TimelineNonEditableStatus = exports.UnsupportedStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
-const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
+const modals_1 = require("../../state/modals");
+const SettingsContext_1 = require("../SettingsContext");
+const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const TimelineArrayField_1 = require("./TimelineArrayField");
 const TimelinePrimitiveFieldValue_1 = require("./TimelinePrimitiveFieldValue");
-const INTERACTIVITY_BEST_PRACTICES_DOCS = 'https://www.remotion.dev/docs/studio/interactivity-best-practices';
-const TIMELINE_COMPUTED_VALUE_FIX_LINK = `${INTERACTIVITY_BEST_PRACTICES_DOCS}#keep-editable-values-visible`;
-exports.TIMELINE_COMPUTED_EFFECT_FIX_LINK = `${INTERACTIVITY_BEST_PRACTICES_DOCS}#keep-effects-editable`;
 const unsupportedStatusWrapper = {
     alignItems: 'center',
     display: 'inline-flex',
@@ -25,6 +54,13 @@ const unsupportedLabel = {
     fontSize: 12,
     fontStyle: 'italic',
 };
+const computedValue = {
+    color: colors_1.WHITE_ALPHA_40,
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    fontSize: 12,
+    lineHeight: '18px',
+    pointerEvents: 'none',
+};
 const fixLinkBase = {
     color: colors_1.LIGHT_TEXT,
     display: 'inline-block',
@@ -34,8 +70,13 @@ const fixLinkBase = {
     lineHeight: 1,
     textDecoration: 'none',
     width: 17,
+    appearance: 'none',
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    padding: 0,
 };
-const UnsupportedStatus = ({ label, fixHref }) => {
+const UnsupportedStatus = ({ label, onFix, formattedValue }) => {
     const [hovered, setHovered] = react_1.default.useState(false);
     const [focused, setFocused] = react_1.default.useState(false);
     const visible = hovered || focused;
@@ -53,12 +94,29 @@ const UnsupportedStatus = ({ label, fixHref }) => {
         event.stopPropagation();
     };
     return (jsx_runtime_1.jsxs("span", { style: unsupportedStatusWrapper, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
-            jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: label }), fixHref ? (jsx_runtime_1.jsx("a", { href: fixHref, target: "_blank", rel: "noreferrer", style: fixLink, title: "Open docs to fix computed Studio values", onClick: stopMousePropagation, onDoubleClick: stopMousePropagation, onPointerDown: stopPointerPropagation, onFocus: () => setFocused(true), onBlur: () => setFocused(false), tabIndex: visible ? 0 : -1, children: "Fix" })) : null] }));
+            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) => {
+                    stopMousePropagation(event);
+                    onFix();
+                }, onDoubleClick: stopMousePropagation, onPointerDown: stopPointerPropagation, onFocus: () => setFocused(true), onBlur: () => setFocused(false), tabIndex: visible ? 0 : -1, children: "Fix" })) : null] }));
 };
 exports.UnsupportedStatus = UnsupportedStatus;
-const TimelineNonEditableStatus = ({ propStatus }) => {
+const TimelineNonEditableStatus = ({ propStatus, field, runtimeValue, validatedLocation }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const { remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
+    const onFix = (0, react_1.useCallback)(() => {
+        var _a;
+        setSelectedModal({
+            type: 'fix-computed-value',
+            prop: field.key,
+            context: `${validatedLocation.source}:${validatedLocation.line}:${validatedLocation.column}`,
+            remotionInteractivitySkillAvailable: (_a = remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.remotionInteractivitySkillAvailable) !== null && _a !== void 0 ? _a : false,
+        });
+    }, [field.key, remotionSkillsInfo, setSelectedModal, validatedLocation]);
     if (propStatus.status === 'computed') {
-        return (jsx_runtime_1.jsx(exports.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus), fixHref: TIMELINE_COMPUTED_VALUE_FIX_LINK }));
+        return (jsx_runtime_1.jsx(exports.UnsupportedStatus, { label: (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+                fieldSchema: field.fieldSchema,
+                value: runtimeValue,
+            }), onFix: onFix, formattedValue: true }));
     }
 };
 exports.TimelineNonEditableStatus = TimelineNonEditableStatus;

package/dist/components/Timeline/TimelineScrollable.js

@@ -8,11 +8,13 @@ const is_menu_item_1 = require("../Menu/is-menu-item");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineAssetDropIndicator_1 = require("./TimelineAssetDropIndicator");
 const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineViewport_1 = require("./TimelineViewport");
 const outer = {
     width: '100%',
     height: '100%',
     overflowX: 'auto',
     overflowY: 'hidden',
+    overscrollBehaviorX: 'none',
     position: 'relative',
     backgroundColor: TimelineSelection_1.TIMELINE_BACKGROUND,
 };
@@ -33,7 +35,7 @@ const TimelineScrollable = ({ children }) => {
         };
     }, []);
     return (jsx_runtime_1.jsxs("div", { ref: timeline_refs_1.scrollableRef, "data-timeline-scrollable": "true", style: outer, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, onPointerDownCapture: onPointerDownCapture, children: [
-            jsx_runtime_1.jsx("div", { style: containerStyle, children: children }), jsx_runtime_1.jsx(TimelineAssetDropIndicator_1.TimelineAssetDropIndicator, {}), marqueeRect === null ? null : (jsx_runtime_1.jsx("div", { style: {
+            jsx_runtime_1.jsx(TimelineViewport_1.TimelineViewportProvider, { scrollable: timeline_refs_1.scrollableRef, children: jsx_runtime_1.jsx("div", { style: containerStyle, children: children }) }), jsx_runtime_1.jsx(TimelineAssetDropIndicator_1.TimelineAssetDropIndicator, {}), marqueeRect === null ? null : (jsx_runtime_1.jsx("div", { style: {
                     ...marqueeStyle,
                     height: marqueeRect.bottom - marqueeRect.top,
                     left: marqueeRect.left,

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

@@ -125,12 +125,12 @@ export declare const extendTimelineMarqueeSelection: ({ currentSelection, marque
 }) => readonly TimelineSelection[];
 type TimelineSelectionContextValue = {
     readonly canSelect: boolean;
+    readonly revealRequest: TimelineSelectionRevealRequest | null;
     readonly selectedItems: readonly TimelineSelection[];
     readonly isSelected: (item: TimelineSelection) => boolean;
     readonly selectItem: (item: TimelineSelection, interaction?: TimelineSelectionInteraction, allSelectableItems?: readonly TimelineSelection[], options?: TimelineSelectionOptions) => void;
     readonly selectItems: (items: readonly TimelineSelection[], options?: TimelineSelectionOptions) => void;
     readonly registerMarqueeSelectableItem: (item: TimelineSelection, getRect: () => DOMRect | null) => () => void;
-    readonly registerFocusableItem: (item: TimelineSelection, getElement: () => Element | null) => () => void;
     readonly getMarqueeSelection: (marqueeRect: TimelineMarqueeRect, lockedSelectionKind: TimelineMarqueeSelectionKind | null) => {
         readonly lockedSelectionKind: TimelineMarqueeSelectionKind | null;
         readonly selectedItems: readonly TimelineSelection[];
@@ -145,6 +145,10 @@ export declare const TimelineSelectionOrderProvider: React.FC<{
 type TimelineSelectionOptions = {
     readonly reveal?: boolean;
 };
+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[];
@@ -181,7 +185,6 @@ export declare const useTimelineMarqueeSelection: () => {
     onPointerDownCapture: (event: React.PointerEvent<HTMLDivElement>) => void;
 };
 export declare const useTimelineMarqueeSelectableItem: (item: TimelineSelection | null, ref: React.RefObject<Element | null>) => void;
-export declare const useTimelineFocusableItem: (item: TimelineSelection | null, ref: React.RefObject<Element | null>) => void;
 export declare const useTimelineRowSelection: (nodePathInfo: SequenceNodePathInfo | null) => {
     onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
     selectable: boolean;

package/dist/components/Timeline/TimelineSelection.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.getTimelineSequenceSelectionForEscape = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_HOVER_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
+exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.getTimelineSequenceSelectionForEscape = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_HOVER_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
@@ -21,6 +22,7 @@ const imperative_state_1 = require("./imperative-state");
 const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const timeline_refs_1 = require("./timeline-refs");
+const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineClipboardKeybindings_1 = require("./TimelineClipboardKeybindings");
 const TimelineDeleteKeybindings_1 = require("./TimelineDeleteKeybindings");
 exports.TIMELINE_SELECTED_BACKGROUND = colors_1.TIMELINE_SELECTED_BACKGROUND_COLOR;
@@ -294,12 +296,12 @@ const extendTimelineMarqueeSelection = ({ currentSelection, marqueeSelection, })
 exports.extendTimelineMarqueeSelection = extendTimelineMarqueeSelection;
 const defaultTimelineSelectionContextValue = {
     canSelect: false,
+    revealRequest: null,
     selectedItems: [],
     isSelected: () => false,
     selectItem: () => undefined,
     selectItems: () => undefined,
     registerMarqueeSelectableItem: () => () => undefined,
-    registerFocusableItem: () => () => undefined,
     getMarqueeSelection: () => ({
         lockedSelectionKind: null,
         selectedItems: [],
@@ -317,7 +319,6 @@ const TimelineSelectionOrderProvider = ({ children, items }) => {
 };
 exports.TimelineSelectionOrderProvider = TimelineSelectionOrderProvider;
 const CurrentTimelineSelectionContext = (0, react_1.createContext)(null);
-const TIMELINE_SELECTION_REVEAL_RETRY_COUNT = 2;
 const parseEffectIndex = (effectIndex) => {
     const parsed = Number(effectIndex);
     if (!Number.isInteger(parsed) || parsed < 0) {
@@ -644,13 +645,12 @@ const TimelineSelectionProvider = ({ children }) => {
     const canSelect = (0, interactivity_enabled_1.isStudioSelectionEnabled)() &&
         (previewServerState.type === 'connected' ||
             window.remotion_isReadOnlyStudio);
+    const keyframeOperationsAvailable = (0, browser_studio_operations_1.canUseKeyframeOperations)();
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
     const selectionAnchor = (0, react_1.useRef)(null);
     const selectionScope = (0, react_1.useRef)(null);
     const marqueeSelectableItems = (0, react_1.useRef)(new Map());
     const marqueeRegistrationCounter = (0, react_1.useRef)(0);
-    const focusableItems = (0, react_1.useRef)(new Map());
-    const focusableRegistrationCounter = (0, react_1.useRef)(0);
     const [revealRequest, setRevealRequest] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         if (!canSelect) {
@@ -661,7 +661,9 @@ const TimelineSelectionProvider = ({ children }) => {
         }
     }, [canSelect]);
     const canSelectItem = (0, react_1.useCallback)((item) => canSelect &&
-        (!window.remotion_isReadOnlyStudio || item.type === 'sequence'), [canSelect]);
+        (!window.remotion_isReadOnlyStudio ||
+            keyframeOperationsAvailable ||
+            item.type === 'sequence'), [canSelect, keyframeOperationsAvailable]);
     const getCurrentAvailableSelectionState = (0, react_1.useCallback)((currentSelectedItems) => {
         if (selectionScope.current !== timelineSelectionScope) {
             return exports.EMPTY_TIMELINE_SELECTION_STATE;
@@ -673,58 +675,11 @@ const TimelineSelectionProvider = ({ children }) => {
     }, [timelineSelectionScope]);
     const availableSelectionState = getCurrentAvailableSelectionState(selectedItems);
     const availableSelectedItems = availableSelectionState.selectedItems;
-    const revealSelectionKey = (0, react_1.useCallback)((selectedKey) => {
-        let cancelled = false;
-        let animationFrame = null;
-        const reveal = (attempt) => {
-            var _a;
-            var _b;
-            if (cancelled) {
-                return;
-            }
-            const scrollParent = timeline_refs_1.timelineVerticalScroll.current;
-            const focusableRegistrations = focusableItems.current.get(selectedKey);
-            const focusableElement = scrollParent && focusableRegistrations
-                ? [...focusableRegistrations.values()]
-                    .sort((a, b) => a.order - b.order)
-                    .map((registered) => registered.getElement())
-                    .find((element) => element !== null && scrollParent.contains(element))
-                : null;
-            const rect = (_b = focusableElement === null || focusableElement === void 0 ? void 0 : focusableElement.getBoundingClientRect()) !== null && _b !== void 0 ? _b : (_a = marqueeSelectableItems.current.get(selectedKey)) === null || _a === void 0 ? void 0 : _a.getRect();
-            if (!scrollParent || !rect) {
-                if (attempt < TIMELINE_SELECTION_REVEAL_RETRY_COUNT) {
-                    animationFrame = requestAnimationFrame(() => reveal(attempt + 1));
-                }
-                return;
-            }
-            const parentRect = scrollParent.getBoundingClientRect();
-            if (rect.top >= parentRect.top && rect.bottom <= parentRect.bottom) {
-                return;
-            }
-            const elementCenter = rect.top + rect.height / 2;
-            const parentCenter = parentRect.top + parentRect.height / 2;
-            scrollParent.scrollTop += elementCenter - parentCenter;
-        };
-        animationFrame = requestAnimationFrame(() => reveal(0));
-        return () => {
-            cancelled = true;
-            if (animationFrame !== null) {
-                cancelAnimationFrame(animationFrame);
-            }
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (revealRequest === null) {
-            return;
-        }
-        return revealSelectionKey(revealRequest.key);
-    }, [revealRequest, revealSelectionKey]);
     const requestRevealSelectionItem = (0, react_1.useCallback)((item) => {
-        const key = (0, exports.getTimelineSelectionKey)(item);
         setRevealRequest((previousRequest) => {
             var _a;
             return ({
-                key,
+                item,
                 token: ((_a = previousRequest === null || previousRequest === void 0 ? void 0 : previousRequest.token) !== null && _a !== void 0 ? _a : 0) + 1,
             });
         });
@@ -832,25 +787,6 @@ const TimelineSelectionProvider = ({ children }) => {
             marqueeSelectableItems.current.delete(key);
         };
     }, []);
-    const registerFocusableItem = (0, react_1.useCallback)((item, getElement) => {
-        var _a;
-        const key = (0, exports.getTimelineSelectionKey)(item);
-        const registrationOrder = focusableRegistrationCounter.current;
-        focusableRegistrationCounter.current += 1;
-        const registrations = (_a = focusableItems.current.get(key)) !== null && _a !== void 0 ? _a : new Map();
-        registrations.set(registrationOrder, {
-            getElement,
-            order: registrationOrder,
-        });
-        focusableItems.current.set(key, registrations);
-        return () => {
-            const latestRegistrations = focusableItems.current.get(key);
-            latestRegistrations === null || latestRegistrations === void 0 ? void 0 : latestRegistrations.delete(registrationOrder);
-            if ((latestRegistrations === null || latestRegistrations === void 0 ? void 0 : latestRegistrations.size) === 0) {
-                focusableItems.current.delete(key);
-            }
-        };
-    }, []);
     const getMarqueeSelectionForRect = (0, react_1.useCallback)((marqueeRect, lockedSelectionKind) => {
         const candidates = [...marqueeSelectableItems.current.values()]
             .sort((a, b) => a.order - b.order)
@@ -891,23 +827,23 @@ const TimelineSelectionProvider = ({ children }) => {
     }, [availableSelectedItems]);
     const value = (0, react_1.useMemo)(() => ({
         canSelect,
+        revealRequest,
         selectedItems: availableSelectedItems,
         isSelected,
         selectItem,
         selectItems,
         registerMarqueeSelectableItem,
-        registerFocusableItem,
         getMarqueeSelection: getMarqueeSelectionForRect,
         containsSelection,
         clearSelection,
     }), [
         canSelect,
+        revealRequest,
         availableSelectedItems,
         isSelected,
         selectItem,
         selectItems,
         registerMarqueeSelectableItem,
-        registerFocusableItem,
         getMarqueeSelectionForRect,
         containsSelection,
         clearSelection,
@@ -938,6 +874,7 @@ const useTimelineMarqueeSelection = () => {
     const { isHighestContext } = (0, z_index_1.useZIndex)();
     const [marqueeRect, setMarqueeRect] = (0, react_1.useState)(null);
     const onPointerDownCapture = (0, react_1.useCallback)((event) => {
+        var _a, _b;
         if (!isHighestContext) {
             return;
         }
@@ -955,15 +892,18 @@ const useTimelineMarqueeSelection = () => {
             return;
         }
         const { currentTarget: target } = event;
+        const scrollable = timeline_refs_1.scrollableRef.current;
+        const verticalScroll = timeline_refs_1.timelineVerticalScroll.current;
+        const initialScrollLeft = (_a = scrollable === null || scrollable === void 0 ? void 0 : scrollable.scrollLeft) !== null && _a !== void 0 ? _a : 0;
+        const initialScrollTop = (_b = verticalScroll === null || verticalScroll === void 0 ? void 0 : verticalScroll.scrollTop) !== null && _b !== void 0 ? _b : 0;
         const initialBounds = target.getBoundingClientRect();
-        const marqueeBounds = {
-            bottom: initialBounds.bottom,
-            left: initialBounds.left,
-            right: initialBounds.right,
-            top: initialBounds.top,
-        };
         const start = (0, exports.getClampedTimelineMarqueePoint)({
-            bounds: marqueeBounds,
+            bounds: {
+                bottom: initialBounds.bottom,
+                left: initialBounds.left,
+                right: initialBounds.right,
+                top: initialBounds.top,
+            },
             x: event.clientX,
             y: event.clientY,
         });
@@ -975,34 +915,64 @@ const useTimelineMarqueeSelection = () => {
         document.body.style.webkitUserSelect = 'none';
         let hasDragged = false;
         let lockedSelectionKind = null;
+        let lastClientX = event.clientX;
+        let lastClientY = event.clientY;
         const extendSelection = event.metaKey || event.ctrlKey;
         const selectionBeforeMarquee = selectedItems;
-        const cleanup = () => {
-            document.body.style.userSelect = previousUserSelect;
-            document.body.style.webkitUserSelect = previousWebkitUserSelect;
-            setMarqueeRect(null);
-        };
         const updateSelection = (clientX, clientY) => {
+            var _a, _b, _c;
+            lastClientX = clientX;
+            lastClientY = clientY;
+            // The container moves when the timeline scrolls vertically, so read
+            // the bounds live. Restrict them to the visible viewport of the
+            // vertical scroller so the fixed-positioned marquee cannot paint
+            // outside the visible timeline area.
+            const liveBounds = target.getBoundingClientRect();
+            const verticalRect = (_a = verticalScroll === null || verticalScroll === void 0 ? void 0 : verticalScroll.getBoundingClientRect()) !== null && _a !== void 0 ? _a : null;
+            const bounds = {
+                bottom: verticalRect === null
+                    ? liveBounds.bottom
+                    : Math.min(liveBounds.bottom, verticalRect.bottom),
+                left: liveBounds.left,
+                right: liveBounds.right,
+                top: verticalRect === null
+                    ? liveBounds.top
+                    : Math.max(liveBounds.top, verticalRect.top),
+            };
+            // The anchor is fixed to timeline content, not to the screen:
+            // compensate for any scrolling that happened since pointerdown so the
+            // marquee keeps covering the originally spanned content while
+            // edge auto-scrolling. It is deliberately not clamped to the bounds -
+            // it may sit outside the viewport, and the selection should still
+            // include everything between it and the pointer.
+            const scrollDeltaX = ((_b = scrollable === null || scrollable === void 0 ? void 0 : scrollable.scrollLeft) !== null && _b !== void 0 ? _b : 0) - initialScrollLeft;
+            const scrollDeltaY = ((_c = verticalScroll === null || verticalScroll === void 0 ? void 0 : verticalScroll.scrollTop) !== null && _c !== void 0 ? _c : 0) - initialScrollTop;
+            const anchorX = startX - scrollDeltaX;
+            const anchorY = startY - scrollDeltaY;
             const current = (0, exports.getClampedTimelineMarqueePoint)({
-                bounds: marqueeBounds,
+                bounds,
                 x: clientX,
                 y: clientY,
             });
             if (!hasDragged &&
-                Math.max(Math.abs(current.x - startX), Math.abs(current.y - startY)) <
-                    3) {
+                Math.max(Math.abs(current.x - anchorX), Math.abs(current.y - anchorY)) < 3) {
                 return;
             }
             hasDragged = true;
             const rect = (0, exports.getNormalizedTimelineMarqueeRect)({
                 currentX: current.x,
                 currentY: current.y,
-                startX,
-                startY,
+                startX: anchorX,
+                startY: anchorY,
             });
             const nextSelection = getMarqueeSelection(rect, lockedSelectionKind);
             lockedSelectionKind = nextSelection.lockedSelectionKind;
-            setMarqueeRect(rect);
+            setMarqueeRect({
+                bottom: Math.min(rect.bottom, bounds.bottom),
+                left: Math.max(rect.left, bounds.left),
+                right: Math.min(rect.right, bounds.right),
+                top: Math.max(rect.top, bounds.top),
+            });
             selectItems(extendSelection
                 ? (0, exports.extendTimelineMarqueeSelection)({
                     currentSelection: selectionBeforeMarquee,
@@ -1010,8 +980,35 @@ const useTimelineMarqueeSelection = () => {
                 })
                 : nextSelection.selectedItems);
         };
+        const autoScroll = (0, timeline_scroll_logic_1.startTimelineEdgeAutoScroll)({
+            includeVertical: true,
+            onTick: (directions) => {
+                if (scrollable && directions.x !== null) {
+                    scrollable.scrollLeft +=
+                        directions.x === 'left' ? -timeline_scroll_logic_1.SCROLL_INCREMENT : timeline_scroll_logic_1.SCROLL_INCREMENT;
+                }
+                if (verticalScroll && directions.y !== null) {
+                    verticalScroll.scrollTop +=
+                        directions.y === 'up'
+                            ? -timeline_scroll_logic_1.EDGE_SCROLL_VERTICAL_INCREMENT
+                            : timeline_scroll_logic_1.EDGE_SCROLL_VERTICAL_INCREMENT;
+                }
+                updateSelection(lastClientX, lastClientY);
+            },
+        });
+        const cleanup = () => {
+            autoScroll.stop();
+            document.body.style.userSelect = previousUserSelect;
+            document.body.style.webkitUserSelect = previousWebkitUserSelect;
+            setMarqueeRect(null);
+        };
         const onPointerMove = (moveEvent) => {
             updateSelection(moveEvent.clientX, moveEvent.clientY);
+            // Only auto-scroll for an actual marquee drag, not a plain click
+            // near an edge
+            if (hasDragged) {
+                autoScroll.update(moveEvent);
+            }
         };
         (0, pointer_session_1.startCapturedPointerSession)({
             event,
@@ -1049,16 +1046,6 @@ const useTimelineMarqueeSelectableItem = (item, ref) => {
     }, [item, ref, registerMarqueeSelectableItem]);
 };
 exports.useTimelineMarqueeSelectableItem = useTimelineMarqueeSelectableItem;
-const useTimelineFocusableItem = (item, ref) => {
-    const { registerFocusableItem } = (0, exports.useTimelineSelection)();
-    (0, react_1.useEffect)(() => {
-        if (item === null) {
-            return;
-        }
-        return registerFocusableItem(item, () => ref.current);
-    }, [item, ref, registerFocusableItem]);
-};
-exports.useTimelineFocusableItem = useTimelineFocusableItem;
 const useTimelineRowSelection = (nodePathInfo) => {
     const { canSelect, isSelected, selectItem } = (0, exports.useTimelineSelection)();
     const selectableTimelineItemsRef = (0, react_1.useContext)(SelectableTimelineItemsContext);