@remotion/studio 4.0.468 → 4.0.470

package/dist/components/Timeline/{TimelineEffectFieldRow.js → TimelineEffectPropItem.js}

@@ -1,29 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineEffectFieldRow = void 0;
+exports.TimelineEffectPropItem = 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 client_id_1 = require("../../helpers/client-id");
-const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_api_1 = require("../call-api");
+const ContextMenu_1 = require("../ContextMenu");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
+const save_effect_prop_1 = require("./save-effect-prop");
 const save_prop_queue_1 = require("./save-prop-queue");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
+const TimelineFieldLabel_1 = require("./TimelineFieldLabel");
+const TimelineKeyframeControls_1 = require("./TimelineKeyframeControls");
+const TimelineKeyframedValue_1 = require("./TimelineKeyframedValue");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
-const fieldRowBase = {
-    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
-};
-const fieldName = {
-    fontSize: 12,
-    color: 'rgba(255, 255, 255, 0.8)',
-    userSelect: 'none',
-};
-const Value = ({ field, nodePath, validatedLocation }) => {
+const TimelineSelection_1 = require("./TimelineSelection");
+const fieldRowBase = {};
+const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) => {
     var _a;
     var _b;
     const { setEffectDragOverrides, clearEffectDragOverrides, setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -130,6 +128,9 @@ const Value = ({ field, nodePath, validatedLocation }) => {
         throw new Error(`Unsupported effect status: ${effectStatus.reason}`);
     }
     if (propStatus === null || !propStatus.canUpdate) {
+        if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.reason) === 'keyframed') {
+            return (jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, keyframeDisplayOffset: keyframeDisplayOffset }));
+        }
         if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.reason) === 'computed') {
             return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) });
         }
@@ -143,17 +144,100 @@ const Value = ({ field, nodePath, validatedLocation }) => {
     });
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }));
 };
-const TimelineEffectFieldRow = ({ field, validatedLocation, rowDepth, nodePath }) => {
+const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, }) => {
     var _a;
+    var _b, _c;
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...fieldRowBase,
             height: field.rowHeight,
         };
     }, [field.rowHeight]);
-    const labelRowStyle = (0, react_1.useMemo)(() => (0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth), [rowDepth]);
-    return (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, children: [
-            jsx_runtime_1.jsx("div", { style: labelRowStyle, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_a = field.description) !== null && _a !== void 0 ? _a : field.key }) }), jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation })
+    const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectCodeValuesCtx({
+        codeValues,
+        nodePath,
+        effectIndex: field.effectIndex,
+    }), [codeValues, nodePath, field.effectIndex]);
+    const propStatus = effectStatus.type === 'can-update-effect'
+        ? ((_b = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a[field.key]) !== null && _b !== void 0 ? _b : null)
+        : null;
+    const dragOverrideValue = (0, react_1.useMemo)(() => {
+        const overrides = getEffectDragOverrides(nodePath, field.effectIndex);
+        return overrides[field.key];
+    }, [getEffectDragOverrides, nodePath, field.effectIndex, field.key]);
+    const keyframeControls = propStatus !== null &&
+        (0, TimelineKeyframeControls_1.shouldShowTimelineKeyframeControls)({
+            propStatus,
+            selected: selection.selected,
+        }) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: field.effectSchema, effectIndex: field.effectIndex })) : null;
+    const isNonDefault = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!propStatus || !propStatus.canUpdate) {
+            return false;
+        }
+        const effectiveCodeValue = (_a = propStatus.codeValue) !== null && _a !== void 0 ? _a : field.fieldSchema.default;
+        return (JSON.stringify(effectiveCodeValue) !==
+            JSON.stringify(field.fieldSchema.default));
+    }, [field.fieldSchema.default, propStatus]);
+    const canPerformReset = previewServerState.type === 'connected' &&
+        propStatus !== null &&
+        propStatus.canUpdate;
+    const onReset = (0, react_1.useCallback)(() => {
+        if (!canPerformReset ||
+            previewServerState.type !== 'connected' ||
+            !isNonDefault) {
+            return;
+        }
+        const defaultValue = field.fieldSchema.default !== undefined
+            ? JSON.stringify(field.fieldSchema.default)
+            : null;
+        (0, save_effect_prop_1.saveEffectProp)({
+            fileName: validatedLocation.source,
+            nodePath,
+            effectIndex: field.effectIndex,
+            fieldKey: field.key,
+            value: field.fieldSchema.default,
+            defaultValue,
+            schema: field.effectSchema,
+            setCodeValues,
+            clientId: previewServerState.clientId,
+        });
+    }, [
+        canPerformReset,
+        field.effectIndex,
+        field.effectSchema,
+        field.fieldSchema.default,
+        field.key,
+        isNonDefault,
+        nodePath,
+        previewServerState,
+        setCodeValues,
+        validatedLocation.source,
+    ]);
+    const contextMenuValues = (0, react_1.useMemo)(() => {
+        return [
+            {
+                type: 'item',
+                id: 'reset-effect-field',
+                keyHint: null,
+                label: 'Reset',
+                leftItem: null,
+                disabled: !canPerformReset,
+                onClick: onReset,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'reset-effect-field',
+            },
+        ];
+    }, [canPerformReset, onReset]);
+    const row = (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
+            jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }), jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: keyframeDisplayOffset }) })
         ] }));
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };
-exports.TimelineEffectFieldRow = TimelineEffectFieldRow;
+exports.TimelineEffectPropItem = TimelineEffectPropItem;

package/dist/components/Timeline/TimelineExpandArrowButton.js

@@ -21,6 +21,10 @@ const arrowButton = {
     outline: 'none',
     lineHeight: 1,
 };
+const arrowSpacer = {
+    ...arrowButton,
+    cursor: 'default',
+};
 const svgStyle = { display: 'block' };
 const TimelineExpandArrowButton = ({ isExpanded, onClick, label, disabled = false }) => {
     const style = (0, react_1.useMemo)(() => {
@@ -35,6 +39,6 @@ const TimelineExpandArrowButton = ({ isExpanded, onClick, label, disabled = fals
 };
 exports.TimelineExpandArrowButton = TimelineExpandArrowButton;
 const TimelineExpandArrowSpacer = () => {
-    return jsx_runtime_1.jsx("div", { style: arrowButton });
+    return jsx_runtime_1.jsx("div", { style: arrowSpacer });
 };
 exports.TimelineExpandArrowSpacer = TimelineExpandArrowSpacer;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const TimelineExpandedKeyframeRow: React.NamedExoticComponent<{
+    readonly height: number;
+    readonly keyframes: {
+        frame: number;
+        value: unknown;
+    }[];
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly showSeparator: boolean;
+}>;

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -0,0 +1,55 @@
+"use strict";
+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.TimelineExpandedKeyframeRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const TimelineKeyframeDiamond_1 = require("./TimelineKeyframeDiamond");
+const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const row = {
+    position: 'relative',
+};
+const rowSeparator = {
+    height: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
+};
+const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, nodePathInfo, showSeparator }) => {
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const { selected: rowSelected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowSelected && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth) })) : null, keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] })
+        ] }));
+};
+exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized);

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

@@ -13,4 +13,5 @@ export declare const TimelineExpandedRow: React.FC<{
     readonly validatedLocation: CodePosition;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: SequenceSchema;
+    readonly keyframeDisplayOffset: number;
 }>;

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -1,44 +1,62 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_row_layout_1 = require("./timeline-row-layout");
-const TimelineEffectFieldRow_1 = require("./TimelineEffectFieldRow");
-const TimelineEffectGroupRow_1 = require("./TimelineEffectGroupRow");
+const TimelineEffectItem_1 = require("./TimelineEffectItem");
+const TimelineEffectPropItem_1 = require("./TimelineEffectPropItem");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
-const TimelineFieldRow_1 = require("./TimelineFieldRow");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
+const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineSequencePropItem_1 = require("./TimelineSequencePropItem");
 const rowLabel = {
     fontSize: 12,
     color: 'rgba(255, 255, 255, 0.8)',
     userSelect: 'none',
 };
-const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, }) => {
+const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, }) => {
     const rowDepth = (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: depth });
+    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(node.nodePathInfo);
+    const labelStyle = react_1.default.useMemo(() => ({
+        ...rowLabel,
+        ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selection.selected, true),
+        alignSelf: 'stretch',
+        alignItems: 'center',
+        color: (0, TimelineSelection_1.getTimelineColor)(selection.selected, true),
+        display: 'flex',
+        flex: 1,
+        minWidth: 0,
+        paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+    }), [selection.selected]);
     if (node.kind === 'group') {
         if (node.effectInfo) {
-            return (jsx_runtime_1.jsx(TimelineEffectGroupRow_1.TimelineEffectGroupRow, { label: node.label, nodePathInfo: node.nodePathInfo, effectIndex: node.effectInfo.effectIndex, effectSchema: node.effectInfo.effectSchema, documentationLink: node.effectInfo.documentationLink, nodePath: nodePath, validatedLocation: validatedLocation, rowDepth: rowDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
+            return (
+            // A single effect
+            jsx_runtime_1.jsx(TimelineEffectItem_1.TimelineEffectItem, { label: node.label, nodePathInfo: node.nodePathInfo, effectIndex: node.effectInfo.effectIndex, effectSchema: node.effectInfo.effectSchema, documentationLink: node.effectInfo.documentationLink, nodePath: nodePath, validatedLocation: validatedLocation, rowDepth: rowDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
         }
+        // Group like "Effects"
         const isExpanded = getIsExpanded(node.nodePathInfo);
         return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.nodePathInfo), label: `${node.label} section`, disabled: false }), style: {
                 height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
-                paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
-            }, children: jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label }) }));
+            }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
     }
     if (node.field) {
         if (node.field.kind === 'effect-field') {
-            return (jsx_runtime_1.jsx(TimelineEffectFieldRow_1.TimelineEffectFieldRow, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath }));
+            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset }));
         }
         if (node.field.kind === 'sequence-field') {
-            return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, schema: schema }));
+            return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset }));
         }
         throw new Error('Unexpected field kind: ' + JSON.stringify(node.field));
     }
     return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: {
             height: (0, timeline_layout_1.getTreeRowHeight)(node),
-            paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
-        }, children: jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label }) }));
+        }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
 };
 exports.TimelineExpandedRow = TimelineExpandedRow;

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

@@ -7,4 +7,5 @@ export declare const TimelineExpandedSection: React.FC<{
     readonly validatedLocation: CodePosition;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly nestedDepth: number;
+    readonly keyframeDisplayOffset: number;
 }>;

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -50,10 +50,10 @@ const expandedSectionBase = {
     borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
 };
 const separator = {
-    height: 1,
-    backgroundColor: colors_1.TIMELINE_TRACK_SEPARATOR,
+    height: 0,
+    borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
 };
-const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, nestedDepth }) => {
+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 { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
@@ -89,7 +89,7 @@ const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, ne
         return jsx_runtime_1.jsx("div", { style: style, children: "No schema" });
     }
     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 })
+            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 })
                 ] }, JSON.stringify(node.nodePathInfo)));
         }) }));
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type TSequence } from 'remotion';
+import type { TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineExpandedTrackKeyframes: React.NamedExoticComponent<{
     readonly sequence: TSequence;

package/dist/components/Timeline/TimelineExpandedTrackKeyframes.js

@@ -1,130 +1,19 @@
 "use strict";
-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;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedTrackKeyframes = 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 get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
-const timeline_layout_1 = require("../../helpers/timeline-layout");
-const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
-const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
-const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
-const row = {
-    position: 'relative',
-};
-const separator = {
-    height: 1,
-    backgroundColor: colors_1.TIMELINE_TRACK_SEPARATOR,
-};
-const section = {
-    borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
-};
-const diamondBase = {
-    position: 'absolute',
-    width: 8,
-    height: 8,
-    backgroundColor: colors_1.LIGHT_TEXT,
-    borderRadius: 1,
-    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.4)',
-    pointerEvents: 'none',
-};
-const getNodeKeyframes = ({ node, nodePath, codeValues, keyframeDisplayOffset, }) => {
-    var _a, _b;
-    if (node.kind !== 'field' || node.field === null) {
-        return [];
-    }
-    if (node.field.kind === 'sequence-field') {
-        return (0, get_timeline_keyframes_1.getTimelineKeyframes)((_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a[node.field.key], keyframeDisplayOffset);
-    }
-    const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
-        codeValues,
-        nodePath,
-        effectIndex: node.field.effectIndex,
-    });
-    return (0, get_timeline_keyframes_1.getTimelineKeyframes)(effectStatus.type === 'can-update-effect'
-        ? (_b = effectStatus.props) === null || _b === void 0 ? void 0 : _b[node.field.key]
-        : null, keyframeDisplayOffset);
-};
+const react_1 = __importDefault(require("react"));
+const TimelineExpandedKeyframeRow_1 = require("./TimelineExpandedKeyframeRow");
+const use_expanded_track_keyframe_rows_1 = require("./use-expanded-track-keyframe-rows");
 const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeDisplayOffset }) => {
-    const videoConfig = (0, remotion_1.useVideoConfig)();
-    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
-    const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
-    const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
+    const { rows, expandedHeight } = (0, use_expanded_track_keyframe_rows_1.useExpandedTrackKeyframeRows)({
         sequence,
         nodePathInfo,
-        getDragOverrides: () => ({}),
-        getEffectDragOverrides: () => ({}),
-        codeValues,
-    }), [codeValues, nodePathInfo, sequence]);
-    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,
-        codeValues,
-    }), [codeValues, getIsExpanded, nodePathInfo, sequence]);
-    const rows = (0, react_1.useMemo)(() => flat.map(({ node }) => ({
-        height: (0, timeline_layout_1.getTreeRowHeight)(node),
-        keyframes: getNodeKeyframes({
-            node,
-            nodePath: nodePathInfo.sequenceSubscriptionKey,
-            codeValues,
-            keyframeDisplayOffset,
-        }),
-        key: JSON.stringify(node.nodePathInfo),
-    })), [
-        codeValues,
-        flat,
         keyframeDisplayOffset,
-        nodePathInfo.sequenceSubscriptionKey,
-    ]);
-    return (jsx_runtime_1.jsx("div", { style: {
-            height: expandedHeight + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-        }, children: jsx_runtime_1.jsx("div", { style: { ...section, height: expandedHeight }, children: rows.map(({ height, keyframes, key }, 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("div", { style: { ...row, height }, children: timelineWidth === null
-                                ? null
-                                : keyframes.map((keyframe) => (jsx_runtime_1.jsx("div", { style: {
-                                        ...diamondBase,
-                                        left: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(keyframe.frame, videoConfig.durationInFrames, timelineWidth) - timeline_layout_1.TIMELINE_PADDING,
-                                        top: height / 2,
-                                        transform: 'translate(-50%, -50%) rotate(45deg)',
-                                    }, title: `Keyframe at frame ${keyframe.frame}` }, String(keyframe.frame)))) })
-                    ] }, key));
-            }) }) }));
+    });
+    return (jsx_runtime_1.jsx("div", { style: { height: expandedHeight }, children: rows.map((row, index) => (jsx_runtime_1.jsx(TimelineExpandedKeyframeRow_1.TimelineExpandedKeyframeRow, { height: row.height, keyframes: row.keyframes, nodePathInfo: row.nodePathInfo, showSeparator: index > 0 }, row.rowKey))) }));
 };
 exports.TimelineExpandedTrackKeyframes = react_1.default.memo(TimelineExpandedTrackKeyframesInner);

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const TimelineFieldLabel: React.FC<{
+    readonly rowDepth: number;
+    readonly selected: boolean;
+    readonly label: string;
+}>;

package/dist/components/Timeline/TimelineFieldLabel.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineFieldLabel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
+const TimelineSelection_1 = require("./TimelineSelection");
+const fieldNameBase = {
+    fontSize: 12,
+    color: 'rgba(255, 255, 255, 0.8)',
+    userSelect: 'none',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    flex: 1,
+    minWidth: 0,
+};
+const TimelineFieldLabel = ({ rowDepth, selected, label }) => {
+    const labelRowStyle = (0, react_1.useMemo)(() => ({
+        ...(0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth),
+        ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, true),
+        alignSelf: 'stretch',
+    }), [rowDepth, selected]);
+    const fieldNameStyle = (0, react_1.useMemo)(() => ({
+        ...fieldNameBase,
+        color: (0, TimelineSelection_1.getTimelineColor)(selected, true),
+    }), [selected]);
+    return (jsx_runtime_1.jsx("div", { style: labelRowStyle, children: jsx_runtime_1.jsx("span", { style: fieldNameStyle, title: label, children: label }) }));
+};
+exports.TimelineFieldLabel = TimelineFieldLabel;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TimelineInOutDragHandler: React.FC;