@remotion/studio 4.0.461 → 4.0.462

package/dist/components/ExpandedTracksProvider.js

@@ -2,8 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandedTracksProvider = exports.ExpandedTracksSetterContext = exports.ExpandedTracksGetterContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
-const nodePathInfoToKey = (info) => JSON.stringify([info.nodePath, info.index]);
+const nodePathInfoToExpandedKey = (info) => [
+    (0, studio_shared_1.stringifySequenceExpandedRowKey)(info.sequenceSubscriptionKey),
+    info.auxiliaryKeys.join('.'),
+    info.index,
+].join('.');
 const LOCAL_STORAGE_KEY = 'remotion.editor.expandedTracks';
 const loadExpandedTracks = () => {
     if (typeof window === 'undefined') {
@@ -38,7 +43,7 @@ const ExpandedTracksProvider = ({ children }) => {
     const [expandedTracks, setExpandedTracks] = (0, react_1.useState)(loadExpandedTracks);
     const toggleTrack = (0, react_1.useCallback)((nodePathInfo) => {
         setExpandedTracks((prev) => {
-            const key = nodePathInfoToKey(nodePathInfo);
+            const key = nodePathInfoToExpandedKey(nodePathInfo);
             const next = { ...prev, [key]: !prev[key] };
             window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(next));
             return next;
@@ -47,7 +52,7 @@ const ExpandedTracksProvider = ({ children }) => {
     const getterValue = (0, react_1.useMemo)(() => ({
         getIsExpanded: (nodePathInfo) => {
             var _a;
-            return (_a = expandedTracks[nodePathInfoToKey(nodePathInfo)]) !== null && _a !== void 0 ? _a : false;
+            return (_a = expandedTracks[nodePathInfoToExpandedKey(nodePathInfo)]) !== null && _a !== void 0 ? _a : false;
         },
     }), [expandedTracks]);
     const setterValue = (0, react_1.useMemo)(() => ({ toggleTrack }), [toggleTrack]);

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

@@ -1,7 +1,8 @@
-import type React from 'react';
-import type { SequenceSchema } from 'remotion';
-export declare const SubscribeToNodePaths: React.FC<{
+import { type FC } from 'react';
+import type { EffectDefinition, SequenceSchema } from 'remotion';
+export declare const SubscribeToNodePaths: FC<{
     readonly overrideId: string;
     readonly schema: SequenceSchema;
     readonly stack: string;
+    readonly effects: readonly EffectDefinition<unknown>[];
 }>;

package/dist/components/Timeline/SubscribeToNodePaths.js

@@ -1,13 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubscribeToNodePaths = void 0;
+const react_1 = require("react");
+const no_react_1 = require("remotion/no-react");
 const use_resolved_stack_1 = require("./use-resolved-stack");
 const use_sequence_props_subscription_1 = require("./use-sequence-props-subscription");
-const SubscribeToNodePaths = ({ overrideId, schema, stack }) => {
+const SubscribeToNodePaths = ({ overrideId, schema, stack, effects }) => {
     const originalLocation = (0, use_resolved_stack_1.useResolvedStack)(stack);
+    const effectSubscriptions = (0, react_1.useMemo)(() => {
+        return effects
+            .map((effect) => {
+            return effect.schema;
+        })
+            .filter(no_react_1.NoReactInternals.truthy);
+    }, [effects]);
     (0, use_sequence_props_subscription_1.useSequencePropsSubscription)({
         overrideId,
         schema,
+        effects: effectSubscriptions,
         originalLocation,
     });
     return null;

package/dist/components/Timeline/Timeline.js

@@ -103,7 +103,7 @@ const TimelineInner = () => {
                 if (!sequence.controls || !previewConnected || !sequence.stack) {
                     return null;
                 }
-                return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, schema: sequence.controls.schema, stack: sequence.stack }, sequence.id));
+                return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, schema: sequence.controls.schema, stack: sequence.stack, effects: sequence.effects }, sequence.id));
             }), jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}), jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
                     jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
                                 jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+export declare const TimelineColorField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly effectiveValue: unknown;
+    readonly propStatus: CanUpdateSequencePropStatus;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onDragEnd: () => void;
+}>;

package/dist/components/Timeline/TimelineColorField.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineColorField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const no_react_1 = require("remotion/no-react");
+const colors_1 = require("../../helpers/colors");
+const eyedropper_1 = require("../../icons/eyedropper");
+const z_index_1 = require("../../state/z-index");
+const SWATCH_WIDTH = 20;
+const SWATCH_HEIGHT = 15;
+const containerStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 3,
+};
+const swatchWrapperBase = {
+    position: 'relative',
+    width: SWATCH_WIDTH,
+    height: SWATCH_HEIGHT,
+    display: 'inline-block',
+    borderRadius: 3,
+    overflow: 'hidden',
+    cursor: 'pointer',
+    borderStyle: 'solid',
+    borderWidth: 1,
+};
+const hiddenInputStyle = {
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    opacity: 0,
+    cursor: 'pointer',
+    border: 'none',
+    padding: 0,
+    margin: 0,
+};
+const swatchFillStyle = {
+    width: '100%',
+    height: '100%',
+};
+const eyedropperButtonBase = {
+    background: 'transparent',
+    border: 'none',
+    padding: 0,
+    margin: 0,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 20,
+    height: 20,
+    color: 'rgba(255, 255, 255, 0.7)',
+};
+const eyedropperIconStyle = {
+    width: 16,
+    height: 16,
+};
+// Normalizes any color string the user provided (e.g. `red`, `rgb(...)`, `#fff`)
+// into a `#rrggbb` string that `<input type="color">` accepts.
+const toHex = (value) => {
+    try {
+        const argb = no_react_1.NoReactInternals.processColor(value);
+        const r = (argb >>> 16) & 0xff;
+        const g = (argb >>> 8) & 0xff;
+        const b = argb & 0xff;
+        return `#${r.toString(16).padStart(2, '0')}${g
+            .toString(16)
+            .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    }
+    catch (_a) {
+        return '#000000';
+    }
+};
+const hasEyeDropper = () => typeof window !== 'undefined' && 'EyeDropper' in window;
+const TimelineColorField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
+    const inputRef = (0, react_1.useRef)(null);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const commitTimeoutRef = (0, react_1.useRef)(null);
+    const pendingCommitRef = (0, react_1.useRef)(null);
+    // `<input type="color">` doesn't fire an event when dismissed; debounce
+    // commits and flush any pending commit on unmount so we never lose the
+    // final value.
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (commitTimeoutRef.current) {
+                clearTimeout(commitTimeoutRef.current);
+            }
+            if (pendingCommitRef.current) {
+                pendingCommitRef.current();
+            }
+        };
+    }, []);
+    const currentValue = typeof effectiveValue === 'string'
+        ? effectiveValue
+        : field.fieldSchema.type === 'color'
+            ? field.fieldSchema.default
+            : '';
+    const hexValue = (0, react_1.useMemo)(() => toHex(currentValue), [currentValue]);
+    const onColorChange = (0, react_1.useCallback)((e) => {
+        const newValue = e.target.value;
+        if (!propStatus.canUpdate) {
+            return;
+        }
+        onDragValueChange(newValue);
+        if (commitTimeoutRef.current) {
+            clearTimeout(commitTimeoutRef.current);
+        }
+        const commit = () => {
+            pendingCommitRef.current = null;
+            if (propStatus.canUpdate && newValue !== propStatus.codeValue) {
+                onSave(newValue);
+            }
+            onDragEnd();
+        };
+        pendingCommitRef.current = commit;
+        commitTimeoutRef.current = setTimeout(() => {
+            commitTimeoutRef.current = null;
+            commit();
+        }, 500);
+    }, [onSave, onDragValueChange, onDragEnd, propStatus]);
+    const onPickColor = (0, react_1.useCallback)(() => {
+        // `EyeDropper` is a Chromium-only API; it's feature-detected at render
+        // time so this only runs in supported browsers.
+        const EyeDropperCtor = typeof window !== 'undefined'
+            ? window.EyeDropper
+            : undefined;
+        if (!EyeDropperCtor) {
+            return;
+        }
+        const eyeDropper = new EyeDropperCtor();
+        eyeDropper
+            .open()
+            .then((result) => {
+            if (propStatus.canUpdate && result.sRGBHex !== propStatus.codeValue) {
+                onSave(result.sRGBHex);
+            }
+        })
+            .catch(() => {
+            // User aborted or picker failed; safe to ignore.
+        });
+    }, [onSave, propStatus]);
+    const swatchWrapperStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...swatchWrapperBase,
+            borderColor: isHovered || isFocused
+                ? colors_1.INPUT_BORDER_COLOR_HOVERED
+                : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+            cursor: propStatus.canUpdate ? 'pointer' : 'not-allowed',
+            marginLeft: 5,
+        };
+    }, [isFocused, isHovered, propStatus.canUpdate]);
+    const swatchFill = (0, react_1.useMemo)(() => {
+        return {
+            ...swatchFillStyle,
+            backgroundColor: currentValue || hexValue,
+            position: 'absolute',
+            display: 'block',
+        };
+    }, [currentValue, hexValue]);
+    const onMouseEnter = (0, react_1.useCallback)(() => setIsHovered(true), []);
+    const onMouseLeave = (0, react_1.useCallback)(() => setIsHovered(false), []);
+    const onFocus = (0, react_1.useCallback)(() => setIsFocused(true), []);
+    const onBlur = (0, react_1.useCallback)(() => setIsFocused(false), []);
+    const onSwatchClick = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!propStatus.canUpdate) {
+            return;
+        }
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    }, [propStatus.canUpdate]);
+    const showEyeDropper = hasEyeDropper();
+    return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
+            jsx_runtime_1.jsxs("span", { style: swatchWrapperStyle, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onSwatchClick, title: currentValue, children: [
+                    jsx_runtime_1.jsx("span", { style: swatchFill }), jsx_runtime_1.jsx("input", { ref: inputRef, type: "color", value: hexValue, onChange: onColorChange, onFocus: onFocus, onBlur: onBlur, disabled: !propStatus.canUpdate, name: field.key, tabIndex: tabIndex, style: hiddenInputStyle })
+                ] }), showEyeDropper ? (jsx_runtime_1.jsx("button", { type: "button", onClick: onPickColor, disabled: !propStatus.canUpdate, style: eyedropperButtonBase, tabIndex: tabIndex, title: "Pick color from screen", "aria-label": "Pick color from screen", children: jsx_runtime_1.jsx(eyedropper_1.EyedropperIcon, { style: eyedropperIconStyle }) })) : null] }));
+};
+exports.TimelineColorField = TimelineColorField;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SequencePropsSubscriptionKey } from 'remotion';
+import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+import type { EffectSchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TimelineEffectFieldRow: React.FC<{
+    readonly field: EffectSchemaFieldInfo;
+    readonly validatedLocation: CodePosition;
+    readonly paddingLeft: number;
+    readonly nestedDepth: number;
+    readonly nodePath: SequencePropsSubscriptionKey;
+}>;

package/dist/components/Timeline/TimelineEffectFieldRow.js

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineEffectFieldRow = 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 timeline_layout_1 = require("../../helpers/timeline-layout");
+const call_api_1 = require("../call-api");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const Padder_1 = require("./Padder");
+const TimelineSchemaField_1 = require("./TimelineSchemaField");
+const fieldRowBase = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+};
+const fieldName = {
+    fontSize: 12,
+    color: 'rgba(255, 255, 255, 0.8)',
+    userSelect: 'none',
+};
+const fieldLabelRow = {
+    flex: '0 0 50%',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+};
+const Value = ({ field, nodePath, validatedLocation }) => {
+    var _a;
+    var _b;
+    const { setEffectDragOverrides, clearEffectDragOverrides, setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
+        codeValues: visualModeCodeValues,
+        nodePath,
+        effectIndex: 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 onDragValueChange = (0, react_1.useCallback)((value) => {
+        setEffectDragOverrides(nodePath, field.effectIndex, field.key, value);
+    }, [setEffectDragOverrides, nodePath, field.effectIndex, field.key]);
+    const onDragEnd = (0, react_1.useCallback)(() => {
+        clearEffectDragOverrides(nodePath, field.effectIndex);
+    }, [clearEffectDragOverrides, nodePath, field.effectIndex]);
+    const dragOverrideValue = (0, react_1.useMemo)(() => {
+        const overrides = getEffectDragOverrides(nodePath, field.effectIndex);
+        return overrides[field.key];
+    }, [getEffectDragOverrides, nodePath, field.effectIndex, field.key]);
+    const onSave = (0, react_1.useCallback)((value) => {
+        if (!validatedLocation) {
+            return Promise.reject(new Error('Cannot save'));
+        }
+        if (!propStatus) {
+            return Promise.reject(new Error('Cannot save'));
+        }
+        if (!propStatus.canUpdate) {
+            return Promise.reject(new Error('Cannot save'));
+        }
+        const defaultValue = field.fieldSchema.default !== undefined
+            ? JSON.stringify(field.fieldSchema.default)
+            : null;
+        const stringifiedValue = JSON.stringify(value);
+        if (value === propStatus.codeValue) {
+            return Promise.resolve();
+        }
+        if (defaultValue === stringifiedValue &&
+            propStatus.codeValue === undefined) {
+            return Promise.resolve();
+        }
+        let previousUpdate;
+        setCodeValues(nodePath, (prev) => {
+            previousUpdate = prev;
+            return (0, studio_shared_1.optimisticUpdateForEffectCodeValues)({
+                previous: prev,
+                effectIndex: field.effectIndex,
+                fieldKey: field.key,
+                value,
+                schema: field.effectSchema,
+            });
+        });
+        return (0, call_api_1.callApi)('/api/save-effect-props', {
+            fileName: validatedLocation.source,
+            sequenceNodePath: nodePath,
+            effectIndex: field.effectIndex,
+            key: field.key,
+            value: stringifiedValue,
+            defaultValue,
+            schema: field.effectSchema,
+        })
+            .then((data) => {
+            setCodeValues(nodePath, (prev) => {
+                if (!prev.canUpdate) {
+                    return prev;
+                }
+                const idx = prev.effects.findIndex((e) => e.effectIndex === field.effectIndex);
+                if (idx === -1) {
+                    return {
+                        ...prev,
+                        effects: [...prev.effects, data],
+                    };
+                }
+                const next = [...prev.effects];
+                next[idx] = data;
+                return { ...prev, effects: next };
+            });
+        })
+            .catch((err) => {
+            setCodeValues(nodePath, (current) => {
+                if (previousUpdate) {
+                    return previousUpdate;
+                }
+                return current;
+            });
+            (0, NotificationCenter_1.showNotification)(`Could not save effect prop: ${err instanceof Error ? err.message : String(err)}`, 4000);
+        });
+    }, [
+        field.effectIndex,
+        field.effectSchema,
+        field.fieldSchema.default,
+        field.key,
+        nodePath,
+        propStatus,
+        setCodeValues,
+        validatedLocation,
+    ]);
+    if (effectStatus.type === 'cannot-update-effect') {
+        if (effectStatus.reason === 'computed') {
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "computed" });
+        }
+        if (effectStatus.reason === 'not-call-expression') {
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not inline" });
+        }
+        if (effectStatus.reason === 'not-found') {
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not found in code" });
+        }
+        throw new Error(`Unsupported effect status: ${effectStatus.reason}`);
+    }
+    if (effectStatus.type === 'cannot-update-sequence') {
+        if (effectStatus.reason === 'not-found') {
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not found in code" });
+        }
+        if (effectStatus.reason === 'error') {
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "error" });
+        }
+        throw new Error(`Unsupported effect status: ${effectStatus.reason}`);
+    }
+    if (propStatus === null || !propStatus.canUpdate) {
+        return null;
+    }
+    const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
+        codeValue: propStatus,
+        dragOverrideValue,
+        defaultValue: field.fieldSchema.default,
+        shouldResortToDefaultValueIfUndefined: true,
+    });
+    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }));
+};
+const TimelineEffectFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth, nodePath }) => {
+    var _a;
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...fieldRowBase,
+            height: field.rowHeight,
+            paddingLeft,
+        };
+    }, [field.rowHeight, paddingLeft]);
+    return (jsx_runtime_1.jsxs("div", { style: style, children: [
+            jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx("div", { style: fieldLabelRow, 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 })
+        ] }));
+};
+exports.TimelineEffectFieldRow = TimelineEffectFieldRow;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SequenceSchema, SequenceNodePath } from 'remotion';
+import type { SequenceSchema, SequencePropsSubscriptionKey } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { TimelineTreeNode } from '../../helpers/timeline-layout';
@@ -10,7 +10,7 @@ export declare const TimelineExpandedRow: React.FC<{
     readonly nestedDepth: number;
     readonly getIsExpanded: GetIsExpanded;
     readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
-    readonly validatedLocation: CodePosition | null;
-    readonly nodePath: SequenceNodePath;
+    readonly validatedLocation: CodePosition;
+    readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: SequenceSchema;
 }>;

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const Padder_1 = require("./Padder");
+const TimelineEffectFieldRow_1 = require("./TimelineEffectFieldRow");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineFieldRow_1 = require("./TimelineFieldRow");
 const TimelineListItem_1 = require("./TimelineListItem");
@@ -39,7 +40,13 @@ const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTr
             ] }));
     }
     if (node.field) {
-        return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: node.field, validatedLocation: validatedLocation, paddingLeft: paddingLeft, nestedDepth: nestedDepth, nodePath: nodePath, schema: schema }));
+        if (node.field.kind === 'effect-field') {
+            return (jsx_runtime_1.jsx(TimelineEffectFieldRow_1.TimelineEffectFieldRow, { field: node.field, validatedLocation: validatedLocation, paddingLeft: paddingLeft, nestedDepth: nestedDepth, nodePath: nodePath }));
+        }
+        if (node.field.kind === 'sequence-field') {
+            return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: node.field, validatedLocation: validatedLocation, paddingLeft: paddingLeft, nestedDepth: nestedDepth, nodePath: nodePath, schema: schema }));
+        }
+        throw new Error('Unexpected field kind: ' + JSON.stringify(node.field));
     }
     return (jsx_runtime_1.jsxs("div", { style: labelOnlyStyle, children: [
             jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label })

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { type TSequence } from 'remotion';
-import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineExpandedSection: React.FC<{
     readonly sequence: TSequence;
-    readonly originalLocation: OriginalPosition | null;
+    readonly validatedLocation: CodePosition;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly nestedDepth: number;
 }>;

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -53,37 +53,24 @@ const separator = {
     height: 1,
     backgroundColor: colors_1.TIMELINE_TRACK_SEPARATOR,
 };
-const TimelineExpandedSection = ({ sequence, originalLocation, nodePathInfo, nestedDepth }) => {
+const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, nestedDepth }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const { getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const validatedLocation = (0, react_1.useMemo)(() => {
-        var _a;
-        if (!originalLocation ||
-            !originalLocation.source ||
-            !originalLocation.line) {
-            return null;
-        }
-        return {
-            source: originalLocation.source,
-            line: originalLocation.line,
-            column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
-        };
-    }, [originalLocation]);
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
         getDragOverrides,
-        getCodeValues,
-    }), [sequence, nodePathInfo, getDragOverrides, getCodeValues]);
+        codeValues: visualModeCodeValues,
+    }), [sequence, nodePathInfo, getDragOverrides, visualModeCodeValues]);
     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,
-        getCodeValues,
-    }), [sequence, nodePathInfo, getIsExpanded, getCodeValues]);
+        codeValues: visualModeCodeValues,
+    }), [sequence, nodePathInfo, getIsExpanded, visualModeCodeValues]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...expandedSectionBase,
@@ -95,7 +82,7 @@ const TimelineExpandedSection = ({ sequence, originalLocation, nodePathInfo, nes
         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.nodePath, 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 })
                 ] }, JSON.stringify(node.nodePathInfo)));
         }) }));
 };

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

@@ -1,13 +1,13 @@
 import React from 'react';
-import type { SequenceNodePath } from 'remotion';
+import type { SequencePropsSubscriptionKey } from 'remotion';
 import type { SequenceSchema } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
 export declare const TimelineFieldRow: React.FC<{
     readonly field: SchemaFieldInfo;
-    readonly validatedLocation: CodePosition | null;
+    readonly validatedLocation: CodePosition;
     readonly paddingLeft: number;
     readonly nestedDepth: number;
-    readonly nodePath: SequenceNodePath;
+    readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: SequenceSchema;
 }>;