@remotion/studio 4.0.478 → 4.0.479

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

@@ -1,5 +1,5 @@
 import { type EffectClipboardParam } from '@remotion/studio-shared';
-import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
 type SaveEffectPropBase = {
     fileName: string;
@@ -7,7 +7,7 @@ type SaveEffectPropBase = {
     effectIndex: number;
     fieldKey: string;
     defaultValue: string | null;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     setPropStatuses: SetPropStatuses;
     clientId: string;
 };

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

@@ -1,4 +1,4 @@
-import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 export type SetPropStatuses = (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
 export type SaveSequencePropChange = {
     fileName: string;
@@ -6,7 +6,7 @@ export type SaveSequencePropChange = {
     fieldKey: string;
     value: unknown;
     defaultValue: string | null;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 type SaveSequencePropsOptions = {
     changes: SaveSequencePropChange[];

package/dist/components/Timeline/sequence-props-subscription-store.d.ts

@@ -1,4 +1,4 @@
-import type { SequenceNodePath, SequenceSchema } from 'remotion';
+import type { SequenceNodePath, InteractivitySchema } from 'remotion';
 import { callApi } from '../call-api';
 type SubscribeResult = Awaited<ReturnType<typeof callApi<'/api/subscribe-to-sequence-props'>>>;
 type ApplyResult = (result: SubscribeResult) => void;
@@ -6,9 +6,9 @@ export declare const acquireSequencePropsSubscription: ({ fileName, line, column
     fileName: string;
     line: number;
     column: number;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     componentIdentity: string | null;
-    effects: SequenceSchema[];
+    effects: InteractivitySchema[];
     nodePath: SequenceNodePath | null;
     clientId: string;
     applyOnce: ApplyResult;

package/dist/components/Timeline/timeline-field-display-utils.d.ts

@@ -0,0 +1,5 @@
+import type { InteractivitySchemaField } from 'remotion';
+export declare const formatTimelineFieldValueForDisplay: ({ fieldSchema, value, }: {
+    readonly fieldSchema: InteractivitySchemaField | undefined;
+    readonly value: unknown;
+}) => string;

package/dist/components/Timeline/timeline-field-display-utils.js

@@ -0,0 +1,244 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatTimelineFieldValueForDisplay = void 0;
+const timeline_field_utils_1 = require("./timeline-field-utils");
+const timeline_rotation_utils_1 = require("./timeline-rotation-utils");
+const timeline_translate_utils_1 = require("./timeline-translate-utils");
+const transform_origin_utils_1 = require("./transform-origin-utils");
+const DISPLAY_FALLBACK_DECIMAL_PLACES = 3;
+const DEFAULT_SCALE_VALUE = [1, 1, 1];
+const getFiniteNumericValue = (value) => {
+    if (typeof value !== 'number' && typeof value !== 'string') {
+        return null;
+    }
+    const numericValue = Number(value);
+    return Number.isFinite(numericValue) ? numericValue : null;
+};
+const parseScaleStringForDisplay = (value) => {
+    var _a, _b;
+    const parts = value.trim().split(/\s+/);
+    if (parts.length < 1 || parts.length > 3 || parts[0] === '') {
+        return null;
+    }
+    const parsed = parts.map((part) => Number(part));
+    if (!parsed.every((part) => Number.isFinite(part))) {
+        return null;
+    }
+    const x = parsed[0];
+    const y = (_a = parsed[1]) !== null && _a !== void 0 ? _a : x;
+    const z = (_b = parsed[2]) !== null && _b !== void 0 ? _b : 1;
+    return [x, y, z];
+};
+const parseScaleValueForDisplay = (value) => {
+    var _a;
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? [value, value, 1] : DEFAULT_SCALE_VALUE;
+    }
+    if (typeof value === 'string') {
+        return (_a = parseScaleStringForDisplay(value)) !== null && _a !== void 0 ? _a : DEFAULT_SCALE_VALUE;
+    }
+    return DEFAULT_SCALE_VALUE;
+};
+const formatUnknownNumberForDisplay = (value) => {
+    if (!Number.isFinite(value)) {
+        return String(value);
+    }
+    return (0, timeline_field_utils_1.formatTimelineNumber)({
+        decimalPlaces: DISPLAY_FALLBACK_DECIMAL_PLACES,
+        fixed: false,
+        value: (0, timeline_field_utils_1.normalizeTimelineNumber)(value),
+    });
+};
+const normalizeUnknownForDisplay = (value) => {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return (0, timeline_field_utils_1.roundToDecimalPlaces)((0, timeline_field_utils_1.normalizeTimelineNumber)(value), DISPLAY_FALLBACK_DECIMAL_PLACES);
+    }
+    if (Array.isArray(value)) {
+        return value.map(normalizeUnknownForDisplay);
+    }
+    if (value && typeof value === 'object') {
+        return Object.fromEntries(Object.entries(value).map(([key, item]) => [
+            key,
+            normalizeUnknownForDisplay(item),
+        ]));
+    }
+    return value;
+};
+const formatUnknownTimelineValueForDisplay = (value) => {
+    var _a;
+    if (typeof value === 'number') {
+        return formatUnknownNumberForDisplay(value);
+    }
+    if (value === null ||
+        typeof value === 'string' ||
+        typeof value === 'boolean' ||
+        typeof value === 'bigint') {
+        return String(value);
+    }
+    if (value === undefined) {
+        return 'undefined';
+    }
+    try {
+        return (_a = JSON.stringify(normalizeUnknownForDisplay(value))) !== null && _a !== void 0 ? _a : String(value);
+    }
+    catch (_b) {
+        return String(value);
+    }
+};
+const formatNumberTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    const numericValue = getFiniteNumericValue(value);
+    if (numericValue === null) {
+        return null;
+    }
+    const stepDecimals = fieldSchema.step === undefined ? null : (0, timeline_field_utils_1.getDecimalPlaces)(fieldSchema.step);
+    if (stepDecimals === null) {
+        const digits = (0, timeline_field_utils_1.getDecimalPlaces)(numericValue);
+        return digits === 0 ? String(numericValue) : numericValue.toFixed(digits);
+    }
+    return (0, timeline_field_utils_1.formatTimelineNumber)({
+        decimalPlaces: stepDecimals,
+        fixed: true,
+        value: numericValue,
+    });
+};
+const formatRotationTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    const configuredStep = fieldSchema.type === 'rotation-css' ||
+        fieldSchema.type === 'rotation-degrees'
+        ? fieldSchema.step
+        : undefined;
+    const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 1,
+        step: configuredStep,
+    });
+    const degrees = fieldSchema.type === 'rotation-css'
+        ? (0, timeline_rotation_utils_1.parseCssRotationToDegrees)(String(value !== null && value !== void 0 ? value : '0deg'))
+        : getFiniteNumericValue(value);
+    if (degrees === null || !Number.isFinite(degrees)) {
+        return null;
+    }
+    return `${(0, timeline_field_utils_1.formatTimelineNumber)({
+        decimalPlaces,
+        fixed: false,
+        value: (0, timeline_field_utils_1.normalizeTimelineNumber)(degrees),
+    })}\u00B0`;
+};
+const formatScaleTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 3,
+        step: fieldSchema.step,
+    });
+    const formatScalePart = (part) => (0, timeline_field_utils_1.formatTimelineNumber)({
+        decimalPlaces,
+        fixed: true,
+        value: part,
+    });
+    const [x, y, z] = parseScaleValueForDisplay(value);
+    const parts = x === y && z === 1 ? [x] : z === 1 ? [x, y] : [x, y, z];
+    return parts.map(formatScalePart).join(' ');
+};
+const formatTranslateCoordinateForDisplay = (value, decimalPlaces) => `${(0, timeline_field_utils_1.formatTimelineNumber)({
+    decimalPlaces,
+    fixed: false,
+    value,
+})}px`;
+const formatTranslateTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 1,
+        step: fieldSchema.step,
+    });
+    const numericValue = getFiniteNumericValue(value);
+    if (numericValue !== null) {
+        return formatTranslateCoordinateForDisplay(numericValue, decimalPlaces);
+    }
+    const [x, y] = (0, timeline_translate_utils_1.parseTranslate)(String(value !== null && value !== void 0 ? value : '0px 0px'));
+    return (0, timeline_translate_utils_1.serializeTranslate)(x, y, decimalPlaces);
+};
+const formatTransformOriginAxisValueForDisplay = ({ decimalPlaces, unit, value, }) => {
+    return `${(0, timeline_field_utils_1.formatTimelineNumber)({
+        decimalPlaces,
+        fixed: false,
+        value,
+    })}${unit}`;
+};
+const formatTransformOriginTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 2,
+        step: fieldSchema.step,
+    });
+    const numericValue = getFiniteNumericValue(value);
+    if (numericValue !== null) {
+        return formatTransformOriginAxisValueForDisplay({
+            decimalPlaces,
+            unit: '%',
+            value: numericValue,
+        });
+    }
+    const parsed = (0, transform_origin_utils_1.parseTransformOrigin)(value);
+    if (parsed === null) {
+        return null;
+    }
+    const xy = `${formatTransformOriginAxisValueForDisplay({
+        decimalPlaces,
+        unit: parsed.x.unit,
+        value: parsed.x.value,
+    })} ${formatTransformOriginAxisValueForDisplay({
+        decimalPlaces,
+        unit: parsed.y.unit,
+        value: parsed.y.value,
+    })}`;
+    return parsed.z === null ? xy : `${xy} ${parsed.z}`;
+};
+const formatUvCoordinatePartForDisplay = (value, decimalPlaces) => (0, timeline_field_utils_1.formatTimelineNumber)({
+    decimalPlaces,
+    fixed: true,
+    value,
+});
+const formatUvCoordinateTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 2,
+        step: fieldSchema.step,
+    });
+    const numericValue = getFiniteNumericValue(value);
+    if (numericValue !== null) {
+        return formatUvCoordinatePartForDisplay(numericValue, decimalPlaces);
+    }
+    if (!Array.isArray(value) ||
+        value.length !== 2 ||
+        !value.every((item) => typeof item === 'number' && Number.isFinite(item))) {
+        return null;
+    }
+    return `${formatUvCoordinatePartForDisplay(value[0], decimalPlaces)}, ${formatUvCoordinatePartForDisplay(value[1], decimalPlaces)}`;
+};
+const formatTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    var _a, _b, _c, _d, _e;
+    if (!fieldSchema) {
+        return formatUnknownTimelineValueForDisplay(value);
+    }
+    switch (fieldSchema.type) {
+        case 'number':
+            return ((_a = formatNumberTimelineFieldValueForDisplay({ fieldSchema, value })) !== null && _a !== void 0 ? _a : formatUnknownTimelineValueForDisplay(value));
+        case 'rotation-css':
+        case 'rotation-degrees':
+            return ((_b = formatRotationTimelineFieldValueForDisplay({ fieldSchema, value })) !== null && _b !== void 0 ? _b : formatUnknownTimelineValueForDisplay(value));
+        case 'scale':
+            return formatScaleTimelineFieldValueForDisplay({ fieldSchema, value });
+        case 'translate':
+            return ((_c = formatTranslateTimelineFieldValueForDisplay({ fieldSchema, value })) !== null && _c !== void 0 ? _c : formatUnknownTimelineValueForDisplay(value));
+        case 'transform-origin':
+            return ((_d = formatTransformOriginTimelineFieldValueForDisplay({
+                fieldSchema,
+                value,
+            })) !== null && _d !== void 0 ? _d : formatUnknownTimelineValueForDisplay(value));
+        case 'uv-coordinate':
+            return ((_e = formatUvCoordinateTimelineFieldValueForDisplay({ fieldSchema, value })) !== null && _e !== void 0 ? _e : formatUnknownTimelineValueForDisplay(value));
+        case 'array':
+        case 'boolean':
+        case 'color':
+        case 'enum':
+        case 'hidden':
+            return formatUnknownTimelineValueForDisplay(value);
+        default:
+            return formatUnknownTimelineValueForDisplay(value);
+    }
+};
+exports.formatTimelineFieldValueForDisplay = formatTimelineFieldValueForDisplay;

package/dist/components/Timeline/update-selected-easing.d.ts

@@ -1,8 +1,51 @@
-import type { OverrideIdToNodePaths, PropStatuses, TSequence } from 'remotion';
+import type { CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusEasing, DragOverrideValue, OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, InteractivitySchema, TSequence } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
 import type { TimelineEasingSelection, TimelineSelection } from './TimelineSelection';
 export type EasingSelection = TimelineEasingSelection;
-export type TimelineEasingValue = 'linear' | [number, number, number, number];
+export type TimelineEasingValue = CanUpdateSequencePropStatusEasing;
+export type SelectedEasingUpdate = {
+    readonly type: 'sequence';
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly fieldKey: string;
+    readonly schema: InteractivitySchema;
+    readonly segmentIndex: number;
+    readonly currentEasing: TimelineEasingValue;
+    readonly propStatus: CanUpdateSequencePropStatusKeyframed;
+} | {
+    readonly type: 'effect';
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly effectIndex: number;
+    readonly fieldKey: string;
+    readonly schema: InteractivitySchema;
+    readonly segmentIndex: number;
+    readonly currentEasing: TimelineEasingValue;
+    readonly propStatus: CanUpdateSequencePropStatusKeyframed;
+};
+export declare const getSelectedEasingUpdate: ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }: {
+    selection: {
+        readonly type: "easing";
+        readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
+        readonly fromFrame: number;
+        readonly toFrame: number;
+        readonly segmentIndex: number;
+    };
+    sequences: TSequence[];
+    overrideIdsToNodePaths: OverrideIdToNodePaths;
+    propStatuses: PropStatuses;
+}) => SelectedEasingUpdate | null;
+export declare const getSelectedEasingUpdates: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }: {
+    readonly selections: readonly TimelineSelection[];
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly propStatuses: PropStatuses;
+}) => SelectedEasingUpdate[];
+export declare const makeEasingDragOverride: ({ status, segmentIndex, easing, }: {
+    readonly status: CanUpdateSequencePropStatusKeyframed;
+    readonly segmentIndex: number;
+    readonly easing: CanUpdateSequencePropStatusEasing;
+}) => DragOverrideValue;
 export declare const getEasingSelections: (selections: readonly TimelineSelection[]) => {
     readonly type: "easing";
     readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
@@ -21,7 +64,7 @@ export declare const getTimelineEasingValueForSelection: ({ selection, sequences
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     propStatuses: PropStatuses;
-}) => TimelineEasingValue | null;
+}) => CanUpdateSequencePropStatusEasing | null;
 export declare const updateSelectedTimelineEasings: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, setPropStatuses, clientId, easing, }: {
     selections: readonly TimelineSelection[];
     sequences: TSequence[];
@@ -29,5 +72,5 @@ export declare const updateSelectedTimelineEasings: ({ selections, sequences, ov
     propStatuses: PropStatuses;
     setPropStatuses: SetPropStatuses;
     clientId: string;
-    easing: TimelineEasingValue;
+    easing: CanUpdateSequencePropStatusEasing;
 }) => Promise<void> | null;

package/dist/components/Timeline/update-selected-easing.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateSelectedTimelineEasings = exports.getTimelineEasingValueForSelection = exports.getEasingSelections = void 0;
+exports.updateSelectedTimelineEasings = exports.getTimelineEasingValueForSelection = exports.getEasingSelections = exports.makeEasingDragOverride = exports.getSelectedEasingUpdates = exports.getSelectedEasingUpdate = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const call_update_keyframe_settings_1 = require("./call-update-keyframe-settings");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
@@ -42,7 +43,8 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
             fieldKey: field.fieldKey,
             schema: sequence.controls.schema,
             segmentIndex: selection.segmentIndex,
-            currentEasing: (_c = sequencePropStatus.easing[selection.segmentIndex]) !== null && _c !== void 0 ? _c : 'linear',
+            currentEasing: (_c = sequencePropStatus.easing[selection.segmentIndex]) !== null && _c !== void 0 ? _c : studio_shared_1.LINEAR_KEYFRAME_EASING,
+            propStatus: sequencePropStatus,
         };
     }
     const effect = sequence.effects[field.effectIndex];
@@ -69,15 +71,46 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
         fieldKey: field.fieldKey,
         schema: effect.schema,
         segmentIndex: selection.segmentIndex,
-        currentEasing: (_d = effectPropStatus.easing[selection.segmentIndex]) !== null && _d !== void 0 ? _d : 'linear',
+        currentEasing: (_d = effectPropStatus.easing[selection.segmentIndex]) !== null && _d !== void 0 ? _d : studio_shared_1.LINEAR_KEYFRAME_EASING,
+        propStatus: effectPropStatus,
     };
 };
+exports.getSelectedEasingUpdate = getSelectedEasingUpdate;
+const getSelectedEasingUpdates = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    return (0, exports.getEasingSelections)(selections)
+        .map((selection) => (0, exports.getSelectedEasingUpdate)({
+        selection,
+        sequences,
+        overrideIdsToNodePaths,
+        propStatuses,
+    }))
+        .filter((update) => update !== null);
+};
+exports.getSelectedEasingUpdates = getSelectedEasingUpdates;
+const makeEasingDragOverride = ({ status, segmentIndex, easing, }) => {
+    const nextEasing = [...status.easing];
+    while (nextEasing.length < status.keyframes.length - 1) {
+        nextEasing.push(studio_shared_1.LINEAR_KEYFRAME_EASING);
+    }
+    if (nextEasing.length > status.keyframes.length - 1) {
+        nextEasing.length = status.keyframes.length - 1;
+    }
+    nextEasing[segmentIndex] = easing;
+    return {
+        type: 'keyframed',
+        status: {
+            ...status,
+            easing: nextEasing,
+        },
+    };
+};
+exports.makeEasingDragOverride = makeEasingDragOverride;
 const getEasingSelections = (selections) => selections.filter(isEasingSelection);
 exports.getEasingSelections = getEasingSelections;
 const getTimelineEasingValueForSelection = ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     var _a;
     var _b;
-    return ((_b = (_a = getSelectedEasingUpdate({
+    return ((_b = (_a = (0, exports.getSelectedEasingUpdate)({
         selection,
         sequences,
         overrideIdsToNodePaths,
@@ -90,14 +123,12 @@ const updateSelectedTimelineEasings = ({ selections, sequences, overrideIdsToNod
     if (easingSelections.length === 0) {
         return null;
     }
-    const updates = easingSelections
-        .map((selection) => getSelectedEasingUpdate({
-        selection,
+    const updates = (0, exports.getSelectedEasingUpdates)({
+        selections: easingSelections,
         sequences,
         overrideIdsToNodePaths,
         propStatuses,
-    }))
-        .filter((update) => update !== null);
+    });
     if (updates.length === 0) {
         return null;
     }

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.d.ts

@@ -0,0 +1,13 @@
+import type { CanUpdateSequencePropStatus, SequencePropsSubscriptionKey, TSequence } from 'remotion';
+import type { ComboboxValue } from '../NewComposition/ComboBox';
+import { type SetPropStatuses } from './save-sequence-prop';
+export declare const useSequenceFreezeFrameMenuItem: ({ clientId, nodePath, propStatusesForOverride, sequence, sequenceFrameOffset, setPropStatuses, timelinePosition, validatedSource, }: {
+    readonly clientId: string | null;
+    readonly nodePath: SequencePropsSubscriptionKey | null;
+    readonly propStatusesForOverride: Record<string, CanUpdateSequencePropStatus> | undefined;
+    readonly sequence: TSequence;
+    readonly sequenceFrameOffset: number;
+    readonly setPropStatuses: SetPropStatuses;
+    readonly timelinePosition: number;
+    readonly validatedSource: string | null;
+}) => ComboboxValue;

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSequenceFreezeFrameMenuItem = void 0;
+const react_1 = require("react");
+const save_sequence_prop_1 = require("./save-sequence-prop");
+const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOverride, sequence, sequenceFrameOffset, setPropStatuses, timelinePosition, validatedSource, }) => {
+    const freezeStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.freeze;
+    const isFrozen = (freezeStatus === null || freezeStatus === void 0 ? void 0 : freezeStatus.status) === 'static' &&
+        typeof freezeStatus.codeValue === 'number';
+    const canToggleFreeze = clientId !== null &&
+        Boolean(sequence.controls) &&
+        nodePath !== null &&
+        validatedSource !== null &&
+        freezeStatus !== undefined &&
+        freezeStatus !== null &&
+        freezeStatus.status === 'static';
+    const onToggleFreezeFrame = (0, react_1.useCallback)(() => {
+        if (!canToggleFreeze ||
+            !sequence.controls ||
+            nodePath === null ||
+            validatedSource === null ||
+            clientId === null) {
+            return;
+        }
+        const rawFreezeFrame = Math.round(timelinePosition - sequence.from + sequenceFrameOffset);
+        const maxFrame = Number.isFinite(sequence.duration)
+            ? Math.max(0, sequence.duration - 1)
+            : rawFreezeFrame;
+        const freezeFrame = Math.min(Math.max(0, rawFreezeFrame), maxFrame);
+        const remove = isFrozen;
+        (0, save_sequence_prop_1.saveSequenceProps)({
+            changes: [
+                {
+                    fileName: validatedSource,
+                    nodePath,
+                    fieldKey: 'freeze',
+                    value: remove ? null : freezeFrame,
+                    defaultValue: null,
+                    schema: sequence.controls.schema,
+                },
+            ],
+            setPropStatuses,
+            clientId,
+            undoLabel: remove ? 'Unfreeze sequence' : 'Freeze sequence',
+            redoLabel: remove ? 'Freeze sequence again' : 'Unfreeze sequence again',
+        });
+    }, [
+        canToggleFreeze,
+        clientId,
+        isFrozen,
+        nodePath,
+        sequence.controls,
+        sequence.duration,
+        sequence.from,
+        sequenceFrameOffset,
+        setPropStatuses,
+        timelinePosition,
+        validatedSource,
+    ]);
+    return (0, react_1.useMemo)(() => ({
+        type: 'item',
+        id: 'toggle-freeze-frame',
+        keyHint: null,
+        label: isFrozen ? 'Unfreeze frame' : 'Freeze frame',
+        leftItem: null,
+        disabled: !canToggleFreeze,
+        onClick: onToggleFreezeFrame,
+        quickSwitcherLabel: null,
+        subMenu: null,
+        value: 'toggle-freeze-frame',
+    }), [canToggleFreeze, isFrozen, onToggleFreezeFrame]);
+};
+exports.useSequenceFreezeFrameMenuItem = useSequenceFreezeFrameMenuItem;

package/dist/components/Timeline/use-sequence-props-subscription.d.ts

@@ -1,9 +1,9 @@
-import type { SequenceSchema } from 'remotion';
+import type { InteractivitySchema } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, componentIdentity, schema, effects, }: {
     overrideId: string;
     componentIdentity: string | null;
-    schema: SequenceSchema;
-    effects: SequenceSchema[];
+    schema: InteractivitySchema;
+    effects: InteractivitySchema[];
     originalLocation: OriginalPosition | null;
 }) => void;

package/dist/components/Timeline/use-timeline-expanded-tree.d.ts

@@ -0,0 +1,11 @@
+import { type TSequence } from 'remotion';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const useTimelineExpandedTree: ({ sequence, nodePathInfo, }: {
+    readonly sequence: TSequence;
+    readonly nodePathInfo: SequenceNodePathInfo;
+}) => {
+    getIsExpanded: import("../ExpandedTracksProvider").GetIsExpanded;
+    propStatuses: import("remotion").PropStatuses;
+    toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
+    tree: import("../../helpers/timeline-layout").TimelineTreeNode[];
+};

package/dist/components/Timeline/use-timeline-expanded-tree.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineExpandedTree = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const useTimelineExpandedTree = ({ sequence, nodePathInfo, }) => {
+    const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
+    const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
+    const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
+        sequence,
+        nodePathInfo,
+        getDragOverrides,
+        getEffectDragOverrides,
+        propStatuses: visualModePropStatuses,
+    }), [
+        sequence,
+        nodePathInfo,
+        getDragOverrides,
+        getEffectDragOverrides,
+        visualModePropStatuses,
+    ]);
+    return {
+        getIsExpanded,
+        propStatuses: visualModePropStatuses,
+        toggleTrack,
+        tree,
+    };
+};
+exports.useTimelineExpandedTree = useTimelineExpandedTree;

package/dist/components/VisualControls/VisualControlsContent.d.ts

@@ -1 +1 @@
-export declare const VisualControlsContent: () => import("react/jsx-runtime").JSX.Element;
+export declare const VisualControlsContent: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/VisualControls/VisualControlsContent.js

@@ -37,16 +37,15 @@ exports.VisualControlsContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const VisualControls_1 = require("../../visual-controls/VisualControls");
-const is_menu_item_1 = require("../Menu/is-menu-item");
 const SchemaSeparationLine_1 = require("../RenderModal/SchemaEditor/SchemaSeparationLine");
 const VisualControlHandle_1 = require("./VisualControlHandle");
-const container = {
-    overflowY: 'auto',
-};
 const VisualControlsContent = () => {
     const { handles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
     const entries = Object.entries(handles);
-    return (jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: entries.map(([key, value], i) => {
+    if (entries.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("div", { children: entries.map(([key, value], i) => {
             return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
                     jsx_runtime_1.jsx(VisualControlHandle_1.VisualControlHandle, { keyName: key, value: value }), i === entries.length - 1 ? null : jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaSeparationLine, {})] }, key));
         }) }));

package/dist/components/effect-drag-and-drop.d.ts

@@ -9,3 +9,13 @@ export declare const addEffectFromDragData: ({ clientId, dragData, fileName, nod
     readonly fileName: string;
     readonly nodePath: SequencePropsSubscriptionKey;
 }) => Promise<void>;
+export declare const addEffectToSequence: ({ clientId, effect, fileName, nodePath, }: {
+    readonly clientId: string;
+    readonly effect: {
+        name: string;
+        importPath: string;
+        config: Record<string, unknown>;
+    };
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+}) => Promise<void>;