@remotion/studio 4.0.461 → 4.0.463

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -5,6 +5,8 @@ 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 TimelineEffectGroupRow_1 = require("./TimelineEffectGroupRow");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineFieldRow_1 = require("./TimelineFieldRow");
 const TimelineListItem_1 = require("./TimelineListItem");
@@ -33,13 +35,22 @@ const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTr
         paddingLeft,
     }), [node, paddingLeft]);
     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, nodePath: nodePath, validatedLocation: validatedLocation, nestedDepth: nestedDepth, style: groupStyle, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
+        }
         const isExpanded = getIsExpanded(node.nodePathInfo);
         return (jsx_runtime_1.jsxs("div", { style: groupStyle, children: [
                 jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.nodePathInfo), label: `${node.label} section`, disabled: false }), jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label })
             ] }));
     }
     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;
 }>;

package/dist/components/Timeline/TimelineFieldRow.js

@@ -2,12 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineFieldRow = 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 Padder_1 = require("./Padder");
+const save_sequence_prop_1 = require("./save-sequence-prop");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const fieldRowBase = {
     display: 'flex',
@@ -27,16 +26,9 @@ const fieldLabelRow = {
     alignItems: 'center',
     gap: 6,
 };
-const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth, nodePath, schema, }) => {
-    var _a, _b;
-    const { getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const codeValuesForOverride = getCodeValues(nodePath);
-    const codeValue = (_a = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
-    if (codeValue === null) {
-        throw new Error('Unexpectedly got null code value for field' + field.key);
-    }
     const dragOverrideValue = (0, react_1.useMemo)(() => {
         var _a;
         return nodePath === null
@@ -45,16 +37,12 @@ const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth,
     }, [getDragOverrides, nodePath, field.key]);
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
         codeValue,
-        runtimeValue: field.currentRuntimeValue,
         dragOverrideValue,
         defaultValue: field.fieldSchema.default,
         shouldResortToDefaultValueIfUndefined: true,
     });
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const onSave = (0, react_1.useCallback)((value) => {
-        if (!codeValuesForOverride || !validatedLocation || !nodePath) {
-            return Promise.reject(new Error('Cannot save'));
-        }
         if (!codeValue || !codeValue.canUpdate) {
             return Promise.reject(new Error('Cannot save'));
         }
@@ -69,42 +57,17 @@ const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth,
             codeValue.codeValue === undefined) {
             return Promise.resolve();
         }
-        let previousUpdate;
-        // Optimistic update to prevent flicker
-        setCodeValues(nodePath, (prev) => {
-            previousUpdate = prev;
-            return (0, studio_shared_1.optimisticUpdateForCodeValues)({
-                previous: prev,
-                fieldKey: field.key,
-                value,
-                schema,
-            });
-        });
-        return (0, call_api_1.callApi)('/api/save-sequence-props', {
+        return (0, save_sequence_prop_1.saveSequenceProp)({
             fileName: validatedLocation.source,
             nodePath,
-            key: field.key,
-            value: stringifiedValue,
+            fieldKey: field.key,
+            value,
             defaultValue,
             schema,
-        })
-            .then((data) => {
-            setCodeValues(nodePath, () => data);
-        })
-            .catch(() => {
-            // In case something went wrong, undo optimistic update
-            if (previousUpdate) {
-                setCodeValues(nodePath, (current) => {
-                    if (previousUpdate) {
-                        return previousUpdate;
-                    }
-                    return current;
-                });
-            }
+            setCodeValues,
         });
     }, [
         codeValue,
-        codeValuesForOverride,
         field.fieldSchema.default,
         field.key,
         nodePath,
@@ -124,6 +87,13 @@ const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth,
         }
         clearDragOverrides(nodePath);
     }, [clearDragOverrides, nodePath]);
+    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }));
+};
+const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth, nodePath, schema, }) => {
+    var _a, _b;
+    const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const codeValuesForOverride = remotion_1.Internals.getCodeValuesCtx(visualModeCodeValues, nodePath);
+    const codeValue = (_a = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
     const style = (0, react_1.useMemo)(() => {
         return {
             ...fieldRowBase,
@@ -131,8 +101,10 @@ const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth,
             paddingLeft,
         };
     }, [field.rowHeight, paddingLeft]);
+    if (codeValue === null) {
+        return null;
+    }
     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: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }) }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue })
-        ] }));
+            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: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }) }), codeValue.canUpdate ? (jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, codeValue: codeValue })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: codeValue }))] }));
 };
 exports.TimelineFieldRow = TimelineFieldRow;

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

@@ -1,5 +1,7 @@
+import React from 'react';
 export declare const TimelineLayerEye: React.FC<{
-    onInvoked: (type: 'enable' | 'disable') => void;
-    hidden: boolean;
-    type: 'eye' | 'speaker';
+    readonly onInvoked: (type: 'enable' | 'disable') => void;
+    readonly hidden: boolean;
+    readonly type: 'eye' | 'speaker' | 'effect';
 }>;
+export declare const TimelineLayerEyeSpacer: React.FC;

package/dist/components/Timeline/TimelineLayerEye.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineLayerEye = void 0;
+exports.TimelineLayerEyeSpacer = exports.TimelineLayerEye = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
@@ -9,6 +9,10 @@ const eyeIcon = {
     color: 'currentColor',
     pointerEvents: 'none',
 };
+const effectIcon = {
+    ...eyeIcon,
+    width: 15,
+};
 const speakerIcon = {
     ...eyeIcon,
     height: 10,
@@ -34,6 +38,9 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
         if (type === 'speaker') {
             return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 10 14", fill: "none", style: speakerIcon, children: jsx_runtime_1.jsx("path", { d: "M9.40938 0.0869018C9.76875 0.249402 10 0.605652 10 0.999402V12.9994C10 13.3932 9.76875 13.7494 9.40938 13.9119C9.05 14.0744 8.62813 14.0088 8.33438 13.7463L4.11875 9.9994H2C0.896875 9.9994 0 9.10253 0 7.9994V5.9994C0 4.89628 0.896875 3.9994 2 3.9994H4.11875L8.33438 0.252527C8.62813 -0.0099732 9.05 -0.0724732 9.40938 0.0869018Z", fill: color }) }));
         }
+        if (type === 'effect') {
+            return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 16 16", fill: "none", style: effectIcon, children: jsx_runtime_1.jsx("path", { d: "M4.405 4.48C4.575 3.82 4.865 3.325 5.275 2.995C5.695 2.665 6.25 2.5 6.94 2.5H9.235V4.06H7.045C6.555 4.06 6.235 4.3 6.085 4.78L5.83 5.68H7.975V7.255H5.395L3.805 13H2.02L3.625 7.255H1.96V5.68H4.075L4.405 4.48ZM8.57102 9.085L6.87602 5.68H8.79602L9.86102 7.99L11.991 5.68H14.331L10.686 9.415L12.426 13H10.491L9.35102 10.585L7.02602 13H4.68602L8.57102 9.085Z", fill: "white" }) }));
+        }
         return (jsx_runtime_1.jsx("svg", { style: eyeIcon, viewBox: "0 0 24 16", fill: "none", children: jsx_runtime_1.jsx("path", { d: "M24 7.551C24 7.551 19.748 16 12.015 16C4.835 16 0 7.551 0 7.551C0 7.551 4.446 0 12.015 0C19.709 0 24 7.551 24 7.551ZM17 8C17 5.243 14.757 3 12 3C9.243 3 7 5.243 7 8C7 10.757 9.243 13 12 13C14.757 13 17 10.757 17 8Z", fill: color }) }));
     }, [hidden, type]);
     const onPointerDown = (0, react_1.useCallback)((e) => {
@@ -54,3 +61,13 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
     return (jsx_runtime_1.jsx("div", { style: container, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
 };
 exports.TimelineLayerEye = TimelineLayerEye;
+const spacerStyle = {
+    width: 16,
+    height: 16,
+    marginRight: 6,
+    flexShrink: 0,
+};
+const TimelineLayerEyeSpacer = () => {
+    return jsx_runtime_1.jsx("div", { style: spacerStyle });
+};
+exports.TimelineLayerEyeSpacer = TimelineLayerEyeSpacer;

package/dist/components/Timeline/TimelineListItem.js

@@ -12,6 +12,7 @@ const ContextMenu_1 = require("../ContextMenu");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const Padder_1 = require("./Padder");
+const save_sequence_prop_1 = require("./save-sequence-prop");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
@@ -19,14 +20,16 @@ const TimelineStack_1 = require("./TimelineStack");
 const use_resolved_stack_1 = require("./use-resolved-stack");
 exports.INDENT = 10;
 const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) => {
-    var _a, _b;
-    const nodePath = (_a = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.nodePath) !== null && _a !== void 0 ? _a : null;
+    var _a;
+    var _b, _c;
+    const nodePath = (_b = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _b !== void 0 ? _b : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
-    const { hidden, setHidden } = (0, react_1.useContext)(remotion_1.Internals.SequenceVisibilityToggleContext);
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const originalLocation = (0, use_resolved_stack_1.useResolvedStack)((_b = sequence.stack) !== null && _b !== void 0 ? _b : null);
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const originalLocation = (0, use_resolved_stack_1.useResolvedStack)((_c = sequence.stack) !== null && _c !== void 0 ? _c : null);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -59,7 +62,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         try {
             const result = await (0, call_api_1.callApi)('/api/duplicate-jsx-node', {
                 fileName: validatedLocation.source,
-                nodePath,
+                nodePath: nodePath.nodePath,
             });
             if (result.success) {
                 (0, NotificationCenter_1.showNotification)('Duplicated sequence in source file', 2000);
@@ -88,7 +91,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         try {
             const result = await (0, call_api_1.callApi)('/api/delete-jsx-node', {
                 fileName: validatedLocation.source,
-                nodePath,
+                nodePath: nodePath.nodePath,
             });
             if (result.success) {
                 (0, NotificationCenter_1.showNotification)('Removed sequence from source file', 2000);
@@ -155,18 +158,53 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         }
         toggleTrack(nodePathInfo);
     }, [nodePathInfo, toggleTrack]);
+    const codeValuesForOverride = (0, react_1.useMemo)(() => {
+        return nodePath
+            ? remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)
+            : undefined;
+    }, [codeValues, nodePath]);
+    const codeHiddenStatus = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride.hidden;
     const isItemHidden = (0, react_1.useMemo)(() => {
         var _a;
-        return (_a = hidden[sequence.id]) !== null && _a !== void 0 ? _a : false;
-    }, [hidden, sequence.id]);
+        const codeValue = codeHiddenStatus && codeHiddenStatus.canUpdate
+            ? codeHiddenStatus.codeValue
+            : undefined;
+        const runtimeValue = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation.hidden;
+        const effective = (codeValue !== null && codeValue !== void 0 ? codeValue : runtimeValue);
+        return effective !== null && effective !== void 0 ? effective : false;
+    }, [codeHiddenStatus, (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation]);
     const onToggleVisibility = (0, react_1.useCallback)((type) => {
-        setHidden((prev) => {
-            return {
-                ...prev,
-                [sequence.id]: type !== 'enable',
-            };
+        if (!sequence.controls ||
+            !nodePath ||
+            !validatedLocation ||
+            !codeValuesForOverride ||
+            !codeHiddenStatus ||
+            !codeHiddenStatus.canUpdate) {
+            return;
+        }
+        const newValue = type !== 'enable';
+        const { schema } = sequence.controls;
+        const fieldSchema = schema.hidden;
+        const defaultValue = fieldSchema && fieldSchema.type === 'boolean'
+            ? JSON.stringify(fieldSchema.default)
+            : null;
+        (0, save_sequence_prop_1.saveSequenceProp)({
+            fileName: validatedLocation.source,
+            nodePath,
+            fieldKey: 'hidden',
+            value: newValue,
+            defaultValue,
+            schema,
+            setCodeValues,
         });
-    }, [sequence.id, setHidden]);
+    }, [
+        codeHiddenStatus,
+        codeValuesForOverride,
+        nodePath,
+        sequence.controls,
+        setCodeValues,
+        validatedLocation,
+    ]);
     const outer = (0, react_1.useMemo)(() => {
         return {
             height: (0, timeline_layout_1.getTimelineLayerHeight)(sequence.type) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
@@ -188,12 +226,18 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         };
     }, []);
     const hasExpandableContent = Boolean(sequence.controls) || sequence.effects.length > 0;
-    const trackRow = (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsxs("div", { style: inner, children: [
-                jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth }), previewConnected ? (hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
+    const canToggleVisibility = Boolean(sequence.controls) &&
+        nodePath !== null &&
+        validatedLocation !== null &&
+        codeHiddenStatus !== undefined &&
+        codeHiddenStatus !== null &&
+        codeHiddenStatus.canUpdate;
+    const trackRow = (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsxs("div", { style: inner, children: [canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth }), previewConnected ? (hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
             ] }) }));
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: trackRow })) : (trackRow), previewConnected &&
                 isExpanded &&
                 hasExpandableContent &&
-                nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth })) : null] }));
+                nodePathInfo &&
+                validatedLocation ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, validatedLocation: validatedLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth })) : null] }));
 };
 exports.TimelineListItem = TimelineListItem;

package/dist/components/Timeline/TimelineNumberField.js

@@ -31,7 +31,7 @@ const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange,
                 propStatus.canUpdate &&
                 parsed !== propStatus.codeValue) {
                 setDragValue(parsed);
-                onSave(parsed).catch(() => {
+                onSave(parsed).finally(() => {
                     setDragValue(null);
                 });
             }

package/dist/components/Timeline/TimelineRotationField.js

@@ -53,7 +53,7 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
                 const newStr = `${parsed}deg`;
                 if (newStr !== propStatus.codeValue) {
                     setDragValue(parsed);
-                    onSave(newStr).catch(() => {
+                    onSave(newStr).finally(() => {
                         setDragValue(null);
                     });
                 }

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

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

package/dist/components/Timeline/TimelineSchemaField.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineFieldValue = void 0;
+exports.TimelineFieldValue = exports.TimelineNonEditableStatus = exports.UnsupportedStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const TimelineBooleanField_1 = require("./TimelineBooleanField");
+const TimelineColorField_1 = require("./TimelineColorField");
 const TimelineEnumField_1 = require("./TimelineEnumField");
 const TimelineNumberField_1 = require("./TimelineNumberField");
 const TimelineRotationField_1 = require("./TimelineRotationField");
@@ -20,19 +21,24 @@ const notEditableBackground = {
 const inlineWrapper = {
     fontSize: 12,
 };
+const UnsupportedStatus = ({ label }) => {
+    return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: label });
+};
+exports.UnsupportedStatus = UnsupportedStatus;
+const TimelineNonEditableStatus = ({ propStatus }) => {
+    if (propStatus.canUpdate) {
+        return null;
+    }
+    if (propStatus.reason === 'computed') {
+        return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "computed" });
+    }
+    throw new Error(`Unsupported prop status: ${propStatus.reason}`);
+};
+exports.TimelineNonEditableStatus = TimelineNonEditableStatus;
 const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, effectiveValue, }) => {
     const wrapperStyle = !propStatus.canUpdate
         ? notEditableBackground
         : undefined;
-    if (!field.supported) {
-        return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "unsupported" });
-    }
-    if (!propStatus.canUpdate) {
-        if (propStatus.reason === 'computed') {
-            return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "computed" });
-        }
-        throw new Error(`Unsupported prop status: ${propStatus.reason}`);
-    }
     if (field.typeName === 'number') {
         return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineNumberField_1.TimelineNumberField, { field: field, effectiveValue: effectiveValue, onSave: onSave, propStatus: propStatus, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
     }
@@ -45,9 +51,12 @@ const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propS
     if (field.typeName === 'boolean') {
         return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineBooleanField_1.TimelineBooleanField, { field: field, propStatus: propStatus, onSave: onSave, effectiveValue: effectiveValue }) }));
     }
+    if (field.typeName === 'color') {
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineColorField_1.TimelineColorField, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }) }));
+    }
     if (field.typeName === 'enum') {
         return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineEnumField_1.TimelineEnumField, { field: field, propStatus: propStatus, onSave: onSave, effectiveValue: effectiveValue, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
     }
-    return (jsx_runtime_1.jsx("span", { style: { ...unsupportedLabel, fontStyle: 'normal' }, children: String(effectiveValue) }));
+    throw new Error(`Unsupported field type: ${field.typeName}`);
 };
 exports.TimelineFieldValue = TimelineFieldValue;

package/dist/components/Timeline/TimelineTracks.js

@@ -52,18 +52,18 @@ const content = {
 const timelineContent = {
     minHeight: '100%',
 };
-const getExpandedPlaceholderStyle = ({ sequence, nodePathInfo, getIsExpanded, getCodeValues, }) => ({
+const getExpandedPlaceholderStyle = ({ sequence, nodePathInfo, getIsExpanded, codeValues, }) => ({
     height: (0, timeline_layout_1.getExpandedTrackHeight)({
         sequence,
         nodePathInfo,
         getIsExpanded,
-        getCodeValues,
+        codeValues,
     }) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
 });
 const TimelineTracksInner = ({ timeline, hasBeenCut }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const previewServerConnected = previewServerState.type === 'connected';
     const timelineStyle = (0, react_1.useMemo)(() => {
         return {
@@ -86,7 +86,7 @@ const TimelineTracksInner = ({ timeline, hasBeenCut }) => {
                                         sequence: track.sequence,
                                         nodePathInfo: track.nodePathInfo,
                                         getIsExpanded,
-                                        getCodeValues,
+                                        codeValues,
                                     }) })) : null] }, track.sequence.id));
                     })] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };

package/dist/components/Timeline/TimelineTranslateField.js

@@ -65,7 +65,9 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
                 const newStr = makeString(parsed, currentY);
                 if (newStr !== propStatus.codeValue) {
                     setDragX(parsed);
-                    onSave(newStr);
+                    onSave(newStr).finally(() => {
+                        setDragX(null);
+                    });
                 }
             }
         }
@@ -98,7 +100,7 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
                 const newStr = makeString(currentX, parsed);
                 if (newStr !== propStatus.codeValue) {
                     setDragY(parsed);
-                    onSave(newStr).catch(() => {
+                    onSave(newStr).finally(() => {
                         setDragY(null);
                     });
                 }

package/dist/components/Timeline/save-effect-prop.d.ts

@@ -0,0 +1,12 @@
+import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SetCodeValues } from './save-sequence-prop';
+export declare const saveEffectProp: ({ fileName, nodePath, effectIndex, fieldKey, value, defaultValue, schema, setCodeValues, }: {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    effectIndex: number;
+    fieldKey: string;
+    value: unknown;
+    defaultValue: string | null;
+    schema: SequenceSchema;
+    setCodeValues: SetCodeValues;
+}) => Promise<void>;

package/dist/components/Timeline/save-effect-prop.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.saveEffectProp = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const call_api_1 = require("../call-api");
+const save_prop_queue_1 = require("./save-prop-queue");
+const saveEffectProp = ({ fileName, nodePath, effectIndex, fieldKey, value, defaultValue, schema, setCodeValues, }) => {
+    return (0, save_prop_queue_1.enqueueSavePropChange)({
+        nodePath,
+        setCodeValues,
+        applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForEffectCodeValues)({
+            previous: prev,
+            effectIndex,
+            fieldKey,
+            value,
+            schema,
+        }),
+        apiCall: () => (0, call_api_1.callApi)('/api/save-effect-props', {
+            fileName,
+            sequenceNodePath: nodePath,
+            effectIndex,
+            key: fieldKey,
+            value: JSON.stringify(value),
+            defaultValue,
+            schema,
+        }),
+        mergeServerResponse: (prev, data) => {
+            if (!prev.canUpdate) {
+                return prev;
+            }
+            const idx = prev.effects.findIndex((e) => e.effectIndex === effectIndex);
+            if (idx === -1) {
+                return { ...prev, effects: [...prev.effects, data] };
+            }
+            const nextEffects = [...prev.effects];
+            nextEffects[idx] = data;
+            return { ...prev, effects: nextEffects };
+        },
+        errorLabel: 'Could not save effect prop',
+    });
+};
+exports.saveEffectProp = saveEffectProp;