@remotion/studio 4.0.478 → 4.0.481

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -36,11 +36,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const TimelineExpandedRow_1 = require("./TimelineExpandedRow");
+const use_timeline_expanded_tree_1 = require("./use-timeline-expanded-tree");
 const expandedSectionBase = {
     color: 'white',
     fontFamily: 'Arial, Helvetica, sans-serif',
@@ -54,30 +53,16 @@ const separator = {
     borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
 };
 const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, nestedDepth, keyframeDisplayOffset, }) => {
-    const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
-    const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
-    const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
+    const { filteredTree, getIsExpanded, toggleTrack } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
-        getDragOverrides,
-        getEffectDragOverrides,
-        propStatuses: visualModePropStatuses,
-    }), [
-        sequence,
-        nodePathInfo,
-        getDragOverrides,
-        getEffectDragOverrides,
-        visualModePropStatuses,
-    ]);
-    const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded }), [tree, getIsExpanded]);
-    const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)({
-        sequence,
-        nodePathInfo,
-        getIsExpanded,
-        propStatuses: visualModePropStatuses,
-    }), [sequence, nodePathInfo, getIsExpanded, visualModePropStatuses]);
+    });
+    const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: filteredTree, getIsExpanded }), [filteredTree, getIsExpanded]);
+    const expandedHeight = (0, react_1.useMemo)(() => {
+        const totalRowsHeight = flat.reduce((sum, { node }) => sum + (0, timeline_layout_1.getTreeRowHeight)(node), 0);
+        const separators = Math.max(0, flat.length - 1);
+        return totalRowsHeight + separators;
+    }, [flat]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...expandedSectionBase,
@@ -86,7 +71,7 @@ const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, ne
     }, [expandedHeight]);
     const { schema } = sequence.controls;
     if (flat.length === 0) {
-        return jsx_runtime_1.jsx("div", { style: style, children: "No schema" });
+        return null;
     }
     return (jsx_runtime_1.jsx("div", { style: style, children: flat.map(({ node, depth }, i) => {
             return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset })

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatus, DragOverrideValue, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { CanUpdateSequencePropStatus, DragOverrideValue, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type TimelineSelection } from './TimelineSelection';
 export declare const getSelectedKeyframeControlNodePathInfos: ({ clickedNodePathInfo, selectedItems, }: {
@@ -11,6 +11,11 @@ export declare const shouldShowTimelineKeyframeControls: ({ propStatus, selected
     selected: boolean;
     keyframable: boolean;
 }) => boolean;
+export type TimelineKeyframeControlsMode = 'timeline' | 'inspector';
+export declare const shouldShowTimelineKeyframeNavigation: ({ propStatus, selected, }: {
+    readonly propStatus: CanUpdateSequencePropStatus;
+    readonly selected: boolean;
+}) => boolean;
 export declare const TimelineKeyframeControls: React.FC<{
     readonly fieldKey: string;
     readonly propStatus: CanUpdateSequencePropStatus;
@@ -19,7 +24,8 @@ export declare const TimelineKeyframeControls: React.FC<{
     readonly keyframeDisplayOffset: number;
     readonly defaultValue: unknown;
     readonly dragOverrideValue: DragOverrideValue | undefined;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
     readonly effectIndex: number | null;
     readonly nodePathInfo: SequenceNodePathInfo;
+    readonly mode?: TimelineKeyframeControlsMode;
 }>;

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineKeyframeControls = exports.shouldShowTimelineKeyframeControls = exports.getSelectedKeyframeControlNodePathInfos = void 0;
+exports.TimelineKeyframeControls = exports.shouldShowTimelineKeyframeNavigation = exports.shouldShowTimelineKeyframeControls = exports.getSelectedKeyframeControlNodePathInfos = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -255,6 +255,13 @@ const shouldShowTimelineKeyframeControls = ({ propStatus, selected, keyframable,
     return isKeyframedStatus(propStatus);
 };
 exports.shouldShowTimelineKeyframeControls = shouldShowTimelineKeyframeControls;
+const shouldShowTimelineKeyframeNavigation = ({ propStatus, selected, }) => {
+    if (selected) {
+        return true;
+    }
+    return isKeyframedStatus(propStatus);
+};
+exports.shouldShowTimelineKeyframeNavigation = shouldShowTimelineKeyframeNavigation;
 const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, defaultValue, dragOverrideValue, schema, effectIndex, nodePathInfo, }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
@@ -278,6 +285,18 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     }, [jsxFrame, propStatus]);
     const previousDisplayFrame = (0, react_1.useMemo)(() => (0, get_keyframe_navigation_1.getPreviousKeyframeDisplayFrame)(keyframes, timelinePosition, videoConfig.durationInFrames), [keyframes, timelinePosition, videoConfig.durationInFrames]);
     const nextDisplayFrame = (0, react_1.useMemo)(() => (0, get_keyframe_navigation_1.getNextKeyframeDisplayFrame)(keyframes, timelinePosition, videoConfig.durationInFrames), [keyframes, timelinePosition, videoConfig.durationInFrames]);
+    const propertySelected = (0, react_1.useMemo)(() => {
+        const propertySelection = (0, TimelineSelection_1.getTimelineSelectionFromNodePathInfo)(nodePathInfo);
+        if (propertySelection === null) {
+            return false;
+        }
+        const propertySelectionKey = (0, TimelineSelection_1.getTimelineSelectionKey)(propertySelection);
+        return selectedItems.some((selection) => (0, TimelineSelection_1.getTimelineSelectionKey)(selection) === propertySelectionKey);
+    }, [nodePathInfo, selectedItems]);
+    const showNavigationButtons = (0, exports.shouldShowTimelineKeyframeNavigation)({
+        propStatus,
+        selected: propertySelected,
+    });
     const keyframable = (0, studio_shared_1.isSchemaFieldKeyframable)({
         schema,
         key: fieldKey,
@@ -404,12 +423,14 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         ...navButtonStyle,
         cursor: previousDisabled ? 'default' : 'pointer',
         opacity: previousDisabled ? 0.35 : 1,
-    }), [previousDisabled]);
+        visibility: showNavigationButtons ? 'visible' : 'hidden',
+    }), [previousDisabled, showNavigationButtons]);
     const nextStyle = (0, react_1.useMemo)(() => ({
         ...navButtonStyle,
         cursor: nextDisabled ? 'default' : 'pointer',
         opacity: nextDisabled ? 0.35 : 1,
-    }), [nextDisabled]);
+        visibility: showNavigationButtons ? 'visible' : 'hidden',
+    }), [nextDisabled, showNavigationButtons]);
     const diamondStyle = (0, react_1.useMemo)(() => ({
         ...diamondButtonStyle,
         cursor: canToggleKeyframe && clientId ? 'pointer' : 'default',

package/dist/components/Timeline/TimelineKeyframeEasingLine.js

@@ -42,7 +42,6 @@ const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const modals_1 = require("../../state/modals");
 const ContextMenu_1 = require("../ContextMenu");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
@@ -85,7 +84,6 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const getTargetSelections = (0, react_1.useCallback)(() => {
         const selectedEasings = (0, update_selected_easing_1.getEasingSelections)(currentSelection.current.selectedItems);
         return selected ? selectedEasings : [selectionItem];
@@ -112,33 +110,6 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
         sequencesRef,
         setPropStatuses,
     ]);
-    const onOpenEasingEditor = (0, react_1.useCallback)(() => {
-        if (previewServerState.type !== 'connected') {
-            return;
-        }
-        const initialEasing = (0, update_selected_easing_1.getTimelineEasingValueForSelection)({
-            selection: selectionItem,
-            sequences: sequencesRef.current,
-            overrideIdsToNodePaths: overrideIdToNodePathMappings,
-            propStatuses: propStatusesRef.current,
-        });
-        if (initialEasing === null) {
-            return;
-        }
-        setSelectedModal({
-            type: 'easing-editor',
-            initialEasing,
-            selections: getTargetSelections(),
-        });
-    }, [
-        getTargetSelections,
-        overrideIdToNodePathMappings,
-        previewServerState,
-        propStatusesRef,
-        selectionItem,
-        sequencesRef,
-        setSelectedModal,
-    ]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
         return [
             {
@@ -148,7 +119,7 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
                 label: 'Linear',
                 leftItem: null,
                 disabled: previewServerState.type !== 'connected',
-                onClick: () => updateEasing('linear'),
+                onClick: () => updateEasing(studio_shared_1.LINEAR_KEYFRAME_EASING),
                 quickSwitcherLabel: null,
                 subMenu: null,
                 value: 'linear',
@@ -165,24 +136,8 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
                 subMenu: null,
                 value: preset.id,
             })),
-            {
-                type: 'divider',
-                id: 'edit-easing-divider',
-            },
-            {
-                type: 'item',
-                id: 'edit-easing',
-                keyHint: null,
-                label: 'Edit...',
-                leftItem: null,
-                disabled: previewServerState.type !== 'connected',
-                onClick: onOpenEasingEditor,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: 'edit-easing',
-            },
         ];
-    }, [onOpenEasingEditor, previewServerState.type, updateEasing]);
+    }, [previewServerState.type, updateEasing]);
     const onOpenContextMenu = (0, react_1.useCallback)((event) => {
         if (!selectable) {
             return false;

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

@@ -4,7 +4,7 @@ import type { SchemaFieldInfo, TimelineFieldOnDragValueChange } from '../../help
 export declare const TimelineKeyframedValue: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly propStatus: CanUpdateSequencePropStatusKeyframed;
-    readonly keyframeDisplayOffset: number;
+    readonly sourceFrame: number;
     readonly dragOverrideValue: DragOverrideValue | undefined;
     readonly onSave: (value: unknown, sourceFrame: number) => Promise<void>;
     readonly onDragValueChange: TimelineFieldOnDragValueChange;

package/dist/components/Timeline/TimelineKeyframedValue.js

@@ -8,19 +8,17 @@ const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const valuesEqual = (left, right) => {
     return JSON.stringify(left) === JSON.stringify(right);
 };
-const TimelineKeyframedValue = ({ field, propStatus, keyframeDisplayOffset, dragOverrideValue, onSave, onDragValueChange, onDragEnd, scaleLockNodePath, }) => {
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const jsxFrame = timelinePosition - keyframeDisplayOffset;
+const TimelineKeyframedValue = ({ field, propStatus, sourceFrame, dragOverrideValue, onSave, onDragValueChange, onDragEnd, scaleLockNodePath, }) => {
     const computedValue = (0, react_1.useMemo)(() => {
         const raw = remotion_1.Internals.interpolateKeyframedStatus({
-            frame: jsxFrame,
+            frame: sourceFrame,
             status: propStatus,
         });
         if (typeof raw === 'number') {
             return Math.round(raw * 100) / 100;
         }
         return raw;
-    }, [jsxFrame, propStatus]);
+    }, [propStatus, sourceFrame]);
     const fakeStatus = (0, react_1.useMemo)(() => ({
         status: 'static',
         codeValue: computedValue,
@@ -29,19 +27,19 @@ const TimelineKeyframedValue = ({ field, propStatus, keyframeDisplayOffset, drag
         return remotion_1.Internals.getEffectiveVisualModeValue({
             propStatus: fakeStatus,
             dragOverrideValue,
-            frame: jsxFrame,
+            frame: sourceFrame,
             defaultValue: field.fieldSchema.default,
             shouldResortToDefaultValueIfUndefined: true,
         });
-    }, [dragOverrideValue, fakeStatus, field.fieldSchema.default, jsxFrame]);
+    }, [dragOverrideValue, fakeStatus, field.fieldSchema.default, sourceFrame]);
     const onSaveIfChanged = (0, react_1.useCallback)((value) => {
-        const existingKeyframe = propStatus.keyframes.find((keyframe) => keyframe.frame === jsxFrame);
+        const existingKeyframe = propStatus.keyframes.find((keyframe) => keyframe.frame === sourceFrame);
         if (valuesEqual(value, computedValue) ||
             (existingKeyframe && valuesEqual(value, existingKeyframe.value))) {
             return Promise.resolve();
         }
-        return onSave(value, jsxFrame);
-    }, [computedValue, jsxFrame, onSave, propStatus.keyframes]);
+        return onSave(value, sourceFrame);
+    }, [computedValue, onSave, propStatus.keyframes, sourceFrame]);
     if (computedValue === null) {
         return null;
     }

package/dist/components/Timeline/TimelineNumberField.js

@@ -4,6 +4,7 @@ exports.TimelineNumberField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange, onDragEnd, propStatus, }) => {
     var _a, _b;
@@ -35,19 +36,12 @@ const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange,
     }, [onSave, propStatus]);
     const configuredStep = field.fieldSchema.type === 'number' ? field.fieldSchema.step : undefined;
     const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
-    const stepDecimals = (0, react_1.useMemo)(() => configuredStep === undefined ? null : (0, timeline_field_utils_1.getDecimalPlaces)(configuredStep), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
-        const num = Number(v);
-        if (stepDecimals === null) {
-            const digits = (0, timeline_field_utils_1.getDecimalPlaces)(num);
-            return digits === 0 ? String(num) : num.toFixed(digits);
-        }
-        return (0, timeline_field_utils_1.formatTimelineNumber)({
-            decimalPlaces: stepDecimals,
-            fixed: true,
-            value: num,
+        return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+            fieldSchema: field.fieldSchema,
+            value: v,
         });
-    }, [stepDecimals]);
+    }, [field.fieldSchema]);
     return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : effectiveValue, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: field.fieldSchema.type === 'number'
             ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
             : -Infinity, max: field.fieldSchema.type === 'number'

package/dist/components/Timeline/TimelineRotationField.js

@@ -4,6 +4,7 @@ exports.TimelineRotationField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const timeline_rotation_utils_1 = require("./timeline-rotation-utils");
 const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
@@ -66,13 +67,11 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
         }
     }, [propStatus, onSave, serializeValue]);
     const formatter = (0, react_1.useCallback)((v) => {
-        const formatted = (0, timeline_field_utils_1.formatTimelineNumber)({
-            decimalPlaces,
-            fixed: false,
-            value: (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(v)),
+        return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+            fieldSchema: field.fieldSchema,
+            value: v,
         });
-        return `${formatted}\u00B0`;
-    }, [decimalPlaces]);
+    }, [field.fieldSchema]);
     return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : degrees, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }));
 };
 exports.TimelineRotationField = TimelineRotationField;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { TimelineSelectionInteraction } from './TimelineSelection';
+import { type TimelineSelection } from './TimelineSelection';
 export declare const TimelineRowChrome: React.FC<{
     readonly depth: number;
     readonly eye: React.ReactNode;
@@ -9,6 +10,7 @@ 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

@@ -23,8 +23,10 @@ const keyframeControlsColumnBaseStyle = {
     flexShrink: 0,
     justifyContent: 'flex-start',
 };
-const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, onSelect, showSelectedBackground, containsSelection, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, }) => {
+const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, selectionItem, onSelect, showSelectedBackground, containsSelection, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, }) => {
+    const ref = (0, react_1.useRef)(null);
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
+    (0, TimelineSelection_1.useTimelineFocusableItem)(selectionItem, ref);
     const keyframeControlsColumnStyle = (0, react_1.useMemo)(() => ({
         ...keyframeControlsColumnBaseStyle,
         width: (0, timeline_row_layout_1.getTimelineRowLeftChromeWidth)(depth),
@@ -73,8 +75,8 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
     const chrome = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx("div", { style: leftChromeStyle, children: keyframeControls ? (jsx_runtime_1.jsx("div", { style: keyframeControlsColumnStyle, children: keyframeControls })) : (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: onDoubleClick, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
+        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, children: jsx_runtime_1.jsx("div", { 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: onDoubleClick, 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, style: innerRowStyle, children: chrome }));
 };
 exports.TimelineRowChrome = TimelineRowChrome;

package/dist/components/Timeline/TimelineScaleField.js

@@ -7,6 +7,7 @@ const no_react_1 = require("remotion/no-react");
 const colors_1 = require("../../helpers/colors");
 const scale_lock_1 = require("../../state/scale-lock");
 const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const leftDraggerStyle = {
@@ -98,17 +99,12 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
     const max = field.fieldSchema.type === 'scale'
         ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
         : Infinity;
-    const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
-        defaultDecimalPlaces: 3,
-        step: configuredStep,
-    }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
-        return (0, timeline_field_utils_1.formatTimelineNumber)({
-            decimalPlaces,
-            fixed: true,
+        return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+            fieldSchema: field.fieldSchema,
             value: v,
         });
-    }, [decimalPlaces]);
+    }, [field.fieldSchema]);
     const getDragStart = (0, react_1.useCallback)(() => {
         if (dragStartRef.current === null) {
             dragStartRef.current = [dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY];

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

@@ -1,5 +1,7 @@
 import React, { type CSSProperties } from 'react';
+import { type GetDragOverrides, type GetEffectDragOverrides, type PropStatuses } from 'remotion';
 import type { SequenceNodePathInfo, TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import { type GetIsExpanded } from '../ExpandedTracksProvider';
 export declare const TIMELINE_SELECTED_BACKGROUND = "#3B3F42";
 export declare const TIMELINE_SELECTED_LABEL_BACKGROUND = "#B0B0B0";
 export declare const TIMELINE_SELECTED_LABEL_TEXT = "black";
@@ -64,6 +66,7 @@ export type TimelineSelectionState = {
     readonly selectedItems: readonly TimelineSelection[];
     readonly anchor: TimelineSelection | null;
 };
+export declare const EMPTY_TIMELINE_SELECTION_STATE: TimelineSelectionState;
 export type TimelineMarqueeRect = {
     readonly left: number;
     readonly top: number;
@@ -81,6 +84,11 @@ export declare const getTimelineSelectionAfterInteraction: ({ currentState, clic
     readonly interaction: TimelineSelectionInteraction;
     readonly allSelectableItems: readonly TimelineSelection[];
 }) => TimelineSelectionState;
+export declare const getAvailableTimelineSelectionState: ({ availableKeys, availableItemsByKey, state, }: {
+    readonly availableKeys: ReadonlySet<string>;
+    readonly availableItemsByKey?: ReadonlyMap<string, TimelineSelection> | undefined;
+    readonly state: TimelineSelectionState;
+}) => TimelineSelectionState;
 export declare const getNormalizedTimelineMarqueeRect: ({ startX, startY, currentX, currentY, }: {
     readonly startX: number;
     readonly startY: number;
@@ -108,10 +116,10 @@ type TimelineSelectionContextValue = {
     readonly canSelect: boolean;
     readonly selectedItems: readonly TimelineSelection[];
     readonly isSelected: (item: TimelineSelection) => boolean;
-    readonly selectItem: (item: TimelineSelection, interaction?: TimelineSelectionInteraction) => void;
+    readonly selectItem: (item: TimelineSelection, interaction?: TimelineSelectionInteraction, allSelectableItems?: readonly TimelineSelection[]) => void;
     readonly selectItems: (items: readonly TimelineSelection[]) => void;
-    readonly registerSelectableItem: (item: TimelineSelection) => () => void;
     readonly registerMarqueeSelectableItem: (item: TimelineSelection, getRect: () => DOMRect | null) => () => void;
+    readonly registerFocusableItem: (item: TimelineSelection, getRect: () => DOMRect | null) => () => void;
     readonly getMarqueeSelection: (marqueeRect: TimelineMarqueeRect, lockedSelectionKind: TimelineMarqueeSelectionKind | null) => {
         readonly lockedSelectionKind: TimelineMarqueeSelectionKind | null;
         readonly selectedItems: readonly TimelineSelection[];
@@ -119,13 +127,30 @@ type TimelineSelectionContextValue = {
     readonly containsSelection: (nodePathInfo: SequenceNodePathInfo) => boolean;
     readonly clearSelection: () => void;
 };
+export declare const TimelineSelectionOrderProvider: React.FC<{
+    readonly children: React.ReactNode;
+    readonly items: readonly TimelineSelection[];
+}>;
 export declare const getTimelineSelectionFromNodePathInfo: (nodePathInfo: SequenceNodePathInfo | null) => TimelineSelection | null;
 export declare const getTimelineSelectionKey: (item: TimelineSelection) => string;
 export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TrackWithHash, "nodePathInfo">[]) => TimelineSelection[];
+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 timeline: readonly TrackWithHash[];
+    readonly timelinePosition: number;
+}) => TimelineSelection[];
 export declare const getTimelineSequenceSelectionKey: (nodePathInfo: SequenceNodePathInfo) => string;
 export declare const TimelineSelectAllKeybindings: React.FC<{
     readonly timeline: readonly TrackWithHash[];
 }>;
+export declare const TimelineSelectableItemsProvider: React.FC<{
+    readonly children: React.ReactNode;
+    readonly timeline: readonly TrackWithHash[];
+}>;
 export declare const TimelineSelectionProvider: React.FC<{
     readonly children: React.ReactNode;
 }>;
@@ -138,6 +163,7 @@ 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;