@remotion/studio 4.0.475 → 4.0.477

package/dist/components/SelectedOutlineUvControls.js

@@ -75,7 +75,7 @@ const SelectedUvHandleCircle = ({ handle, onDraggingChange, outline }) => {
                 event: pointerEvent,
                 rect: svgRect,
             });
-            const nextValue = (0, selected_outline_uv_1.constrainUv)((0, selected_outline_uv_1.getUvCoordinateForPoint)(outline.points, point), handle.fieldSchema);
+            const nextValue = (0, selected_outline_uv_1.roundUvCoordinate)((0, selected_outline_uv_1.constrainUv)((0, selected_outline_uv_1.getUvCoordinateForPoint)(outline.points, point), handle.fieldSchema), handle.fieldSchema);
             lastValue = nextValue;
             setEffectDragOverrides(handle.nodePath, handle.effectIndex, handle.fieldKey, handle.propStatus.status === 'keyframed'
                 ? remotion_1.Internals.makeKeyframedDragOverride({

package/dist/components/ShowGuidesProvider.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const editor_guides_1 = require("../state/editor-guides");
 const ShowGuidesProvider = ({ children }) => {
     const [guidesList, setGuidesList] = (0, react_1.useState)(() => (0, editor_guides_1.loadGuidesList)());
-    const [selectedGuideId, setSelectedGuideId] = (0, react_1.useState)(null);
+    const [draggingGuideId, setDraggingGuideId] = (0, react_1.useState)(null);
     const [hoveredGuideId, setHoveredGuideId] = (0, react_1.useState)(null);
     const [editorShowGuides, setEditorShowGuidesState] = (0, react_1.useState)(() => (0, editor_guides_1.loadEditorShowGuidesOption)());
     const shouldCreateGuideRef = (0, react_1.useRef)(false);
@@ -24,8 +24,8 @@ const ShowGuidesProvider = ({ children }) => {
             setEditorShowGuides,
             guidesList,
             setGuidesList,
-            selectedGuideId,
-            setSelectedGuideId,
+            draggingGuideId,
+            setDraggingGuideId,
             shouldCreateGuideRef,
             shouldDeleteGuideRef,
             hoveredGuideId,
@@ -35,7 +35,7 @@ const ShowGuidesProvider = ({ children }) => {
         editorShowGuides,
         setEditorShowGuides,
         guidesList,
-        selectedGuideId,
+        draggingGuideId,
         hoveredGuideId,
     ]);
     return (jsx_runtime_1.jsx(editor_guides_1.EditorShowGuidesContext.Provider, { value: editorShowGuidesCtx, children: children }));

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

@@ -1,7 +1,8 @@
 import { type FC } from 'react';
-import type { EffectDefinition, SequenceSchema } from 'remotion';
+import type { EffectDefinition, JsxComponentIdentity, SequenceSchema } from 'remotion';
 export declare const SubscribeToNodePaths: FC<{
     readonly overrideId: string;
+    readonly componentIdentity: JsxComponentIdentity | null;
     readonly schema: SequenceSchema;
     readonly getStack: () => string | null;
     readonly effects: readonly EffectDefinition<unknown>[];

package/dist/components/Timeline/SubscribeToNodePaths.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
 const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
 const use_sequence_props_subscription_1 = require("./use-sequence-props-subscription");
-const SubscribeToNodePaths = ({ overrideId, schema, getStack, effects }) => {
+const SubscribeToNodePaths = ({ overrideId, componentIdentity, schema, getStack, effects }) => {
     const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(getStack);
     const effectSubscriptions = (0, react_1.useMemo)(() => {
         return effects
@@ -16,6 +16,7 @@ const SubscribeToNodePaths = ({ overrideId, schema, getStack, effects }) => {
     }, [effects]);
     (0, use_sequence_props_subscription_1.useSequencePropsSubscription)({
         overrideId,
+        componentIdentity,
         schema,
         effects: effectSubscriptions,
         originalLocation,

package/dist/components/Timeline/Timeline.js

@@ -129,6 +129,7 @@ const TimelineContextMenuArea = ({ children }) => {
                     type: 'solid',
                     width: videoConfig.width,
                     height: videoConfig.height,
+                    position: null,
                 },
             });
             if (result.success) {
@@ -160,6 +161,7 @@ const TimelineContextMenuArea = ({ children }) => {
                 files,
                 compositionFile,
                 compositionId: currentCompositionId,
+                dropPosition: null,
             });
         }
         finally {
@@ -228,7 +230,7 @@ const TimelineInner = () => {
                 if (!sequence.controls || !previewConnected || !sequence.getStack()) {
                     return null;
                 }
-                return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
+                return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, componentIdentity: sequence.controls.componentIdentity, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
             }), jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}), jsx_runtime_1.jsxs(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: [
                     jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown }), jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
                                 jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -188,22 +188,21 @@ const getPasteEffectPropTarget = ({ selectedItems, payload, propStatuses, sequen
     if (!selection) {
         return { type: 'none' };
     }
-    if (!selection.nodePathInfo.supportsEffects) {
-        return { type: 'unsupported' };
+    if (selection.type !== 'sequence-effect-prop' &&
+        selection.type !== 'sequence-effect') {
+        return { type: 'none' };
     }
     const target = selection.type === 'sequence-effect-prop'
         ? {
             effectIndex: selection.i,
             fieldKey: selection.key,
         }
-        : selection.type === 'sequence-effect'
-            ? {
-                effectIndex: selection.i,
-                fieldKey: payload.key,
-            }
-            : null;
-    if (target === null) {
-        return { type: 'none' };
+        : {
+            effectIndex: selection.i,
+            fieldKey: payload.key,
+        };
+    if (!selection.nodePathInfo.supportsEffects) {
+        return { type: 'unsupported' };
     }
     if (selection.type === 'sequence-effect-prop' &&
         selection.key !== payload.key) {

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const editor_guides_1 = require("../../state/editor-guides");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
@@ -18,12 +19,12 @@ const TimelineDeleteKeybindings = () => {
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { canSelect, canSelectEasing } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { setGuidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     (0, react_1.useEffect)(() => {
-        if ((!canSelect && !canSelectEasing) ||
-            previewServerState.type !== 'connected') {
+        if (!canSelect || previewServerState.type !== 'connected') {
             return;
         }
         const { clientId } = previewServerState;
@@ -34,6 +35,16 @@ const TimelineDeleteKeybindings = () => {
             if (selectedItems.length === 0) {
                 return;
             }
+            const selectedGuide = selectedItems.find((item) => item.type === 'guide');
+            if (selectedGuide) {
+                setGuidesList((prevGuides) => {
+                    const newGuides = prevGuides.filter((guide) => guide.id !== selectedGuide.guideId);
+                    (0, editor_guides_1.persistGuidesList)(newGuides);
+                    return newGuides;
+                });
+                clearSelection();
+                return;
+            }
             const deletePromise = (0, delete_selected_timeline_item_1.deleteSelectedTimelineItems)({
                 selections: selectedItems,
                 sequences,
@@ -127,7 +138,6 @@ const TimelineDeleteKeybindings = () => {
         };
     }, [
         canSelect,
-        canSelectEasing,
         confirm,
         currentSelection,
         keybindings,
@@ -135,6 +145,7 @@ const TimelineDeleteKeybindings = () => {
         propStatusesRef,
         previewServerState,
         sequencesRef,
+        setGuidesList,
         setPropStatuses,
     ]);
     return null;

package/dist/components/Timeline/TimelineKeyframeEasingLine.js

@@ -47,6 +47,7 @@ const ContextMenu_1 = require("../ContextMenu");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const update_selected_easing_1 = require("./update-selected-easing");
+const use_timeline_keyframe_drag_1 = require("./use-timeline-keyframe-drag");
 const hitTargetHeight = 12;
 const lineHeight = 2;
 const easingLineButton = {
@@ -224,17 +225,12 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
         ...easingLine,
         outline: selected ? `1px solid ${colors_1.BLUE}` : undefined,
     }), [selected]);
-    const onPointerDown = (0, react_1.useCallback)((event) => {
-        if (!selectable || event.button !== 0) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        onSelect({
-            shiftKey: event.shiftKey,
-            toggleKey: event.metaKey || event.ctrlKey,
-        });
-    }, [onSelect, selectable]);
+    const onPointerDown = (0, use_timeline_keyframe_drag_1.useTimelineEasingKeyframeDrag)({
+        onSelect,
+        selectable,
+        selected,
+        selectionItem,
+    });
     if (style === null) {
         return null;
     }

package/dist/components/Timeline/TimelineList.js

@@ -12,7 +12,7 @@ const container = {
 const TimelineList = ({ timeline }) => {
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
             jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track, trackIndex) => {
-                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { trackIndex: trackIndex, nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset }, track.sequence.id) }, track.sequence.id));
+                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { trackIndex: trackIndex, nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset }, track.sequence.id) }, track.sequence.id));
             })] }));
 };
 exports.TimelineList = TimelineList;

package/dist/components/Timeline/TimelineRotationField.js

@@ -16,11 +16,26 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
         }
         return typeof effectiveValue === 'number' ? effectiveValue : 0;
     }, [effectiveValue, isCssRotation]);
+    const configuredStep = field.fieldSchema.type === 'rotation-css' ||
+        field.fieldSchema.type === 'rotation-degrees'
+        ? field.fieldSchema.step
+        : undefined;
+    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
+    const min = field.fieldSchema.type === 'rotation-degrees'
+        ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
+        : -Infinity;
+    const max = field.fieldSchema.type === 'rotation-degrees'
+        ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
+        : Infinity;
+    const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 1,
+        step: configuredStep,
+    }), [configuredStep]);
     const serializeValue = (0, react_1.useCallback)((value) => {
         return isCssRotation
-            ? (0, timeline_rotation_utils_1.serializeCssRotation)(value)
+            ? (0, timeline_rotation_utils_1.serializeCssRotation)(value, decimalPlaces)
             : (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
-    }, [isCssRotation]);
+    }, [decimalPlaces, isCssRotation]);
     const onValueChange = (0, react_1.useCallback)((newVal) => {
         setDragValue(newVal);
         onDragValueChange(serializeValue(newVal));
@@ -50,21 +65,6 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
             }
         }
     }, [propStatus, onSave, serializeValue]);
-    const configuredStep = field.fieldSchema.type === 'rotation-css' ||
-        field.fieldSchema.type === 'rotation-degrees'
-        ? field.fieldSchema.step
-        : undefined;
-    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
-    const min = field.fieldSchema.type === 'rotation-degrees'
-        ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
-        : -Infinity;
-    const max = field.fieldSchema.type === 'rotation-degrees'
-        ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
-        : Infinity;
-    const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
-        defaultDecimalPlaces: 1,
-        step: configuredStep,
-    }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
         const formatted = (0, timeline_field_utils_1.formatTimelineNumber)({
             decimalPlaces,

package/dist/components/Timeline/TimelineScaleField.js

@@ -99,7 +99,7 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
         ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
         : Infinity;
     const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
-        defaultDecimalPlaces: 2,
+        defaultDecimalPlaces: 3,
         step: configuredStep,
     }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {

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

@@ -9,32 +9,39 @@ export declare const getTimelineColor: (selected: boolean, subcategory: boolean)
 export declare const getTimelineSelectedTrackHighlightStyle: (timelineWidth: number) => CSSProperties;
 export declare const TIMELINE_BACKGROUND = "#0F1113";
 export declare const TIMELINE_TICKS_BACKGROUND = "rgb(31,36,40)";
-type TimelineSelectionBase = {
-    readonly nodePathInfo: SequenceNodePathInfo;
-};
-export type TimelineSelection = (TimelineSelectionBase & {
+export type TimelineSelection = {
+    readonly type: 'guide';
+    readonly guideId: string;
+} | {
     readonly type: 'sequence';
-}) | (TimelineSelectionBase & {
+    readonly nodePathInfo: SequenceNodePathInfo;
+} | {
     readonly type: 'sequence-prop';
+    readonly nodePathInfo: SequenceNodePathInfo;
     readonly key: string;
-}) | (TimelineSelectionBase & {
+} | {
     readonly type: 'sequence-all-effects';
-}) | (TimelineSelectionBase & {
+    readonly nodePathInfo: SequenceNodePathInfo;
+} | {
     readonly type: 'sequence-effect';
+    readonly nodePathInfo: SequenceNodePathInfo;
     readonly i: number;
-}) | (TimelineSelectionBase & {
+} | {
     readonly type: 'sequence-effect-prop';
+    readonly nodePathInfo: SequenceNodePathInfo;
     readonly i: number;
     readonly key: string;
-}) | (TimelineSelectionBase & {
+} | {
     readonly type: 'keyframe';
+    readonly nodePathInfo: SequenceNodePathInfo;
     readonly frame: number;
-}) | (TimelineSelectionBase & {
+} | {
     readonly type: 'easing';
+    readonly nodePathInfo: SequenceNodePathInfo;
     readonly fromFrame: number;
     readonly toFrame: number;
     readonly segmentIndex: number;
-});
+};
 export type TimelineEasingSelection = Extract<TimelineSelection, {
     type: 'easing';
 }>;
@@ -99,7 +106,6 @@ export declare const getTimelineMarqueeSelection: ({ candidates, lockedSelection
 };
 type TimelineSelectionContextValue = {
     readonly canSelect: boolean;
-    readonly canSelectEasing: boolean;
     readonly selectedItems: readonly TimelineSelection[];
     readonly isSelected: (item: TimelineSelection) => boolean;
     readonly selectItem: (item: TimelineSelection, interaction?: TimelineSelectionInteraction) => void;
@@ -153,12 +159,20 @@ export declare const useTimelineEasingSelection: ({ nodePathInfo, fromFrame, toF
     onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
     selectable: boolean;
     selected: boolean;
-    selectionItem: TimelineSelectionBase & {
+    selectionItem: {
         readonly type: "easing";
+        readonly nodePathInfo: SequenceNodePathInfo;
         readonly fromFrame: number;
         readonly toFrame: number;
         readonly segmentIndex: number;
     };
 };
+export declare const useTimelineGuideSelection: (guideId: string) => {
+    clearSelection: () => void;
+    onSelect: () => void;
+    selectable: boolean;
+    selected: boolean;
+    selectionItem: TimelineSelection;
+};
 export declare const useTimelineRowContainsSelection: (nodePathInfo: SequenceNodePathInfo | null) => boolean;
 export {};

package/dist/components/Timeline/TimelineSelection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineRowContainsSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getTimelineSelectionAfterInteraction = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
+exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getTimelineSelectionAfterInteraction = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -97,6 +97,12 @@ const getRangeSelection = ({ anchor, clickedItem, allSelectableItems, }) => {
 const getTimelineSelectionAfterInteraction = ({ currentState, clickedItem, interaction, allSelectableItems, }) => {
     const { selectedItems, anchor: previousAnchor } = currentState;
     const clickedType = getTimelineSelectionType(clickedItem);
+    if (clickedType === 'guide') {
+        return {
+            selectedItems: [clickedItem],
+            anchor: clickedItem,
+        };
+    }
     const nextAnchor = getTimelineSelectionAnchor(selectedItems, previousAnchor, clickedType);
     const clickedKey = (0, exports.getTimelineSelectionKey)(clickedItem);
     if (interaction.shiftKey && nextAnchor) {
@@ -201,7 +207,6 @@ const getTimelineMarqueeSelection = ({ candidates, lockedSelectionKind, marqueeR
 exports.getTimelineMarqueeSelection = getTimelineMarqueeSelection;
 const defaultTimelineSelectionContextValue = {
     canSelect: false,
-    canSelectEasing: false,
     selectedItems: [],
     isSelected: () => false,
     selectItem: () => undefined,
@@ -259,22 +264,23 @@ const getTimelineSelectionFromNodePathInfo = (nodePathInfo) => {
 };
 exports.getTimelineSelectionFromNodePathInfo = getTimelineSelectionFromNodePathInfo;
 const getTimelineSelectionKey = (item) => {
-    const sequenceKey = (0, exports.getTimelineSequenceSelectionKey)(item.nodePathInfo);
     switch (item.type) {
+        case 'guide':
+            return `guide.${item.guideId}`;
         case 'sequence':
-            return `${sequenceKey}.sequence`;
+            return `${(0, exports.getTimelineSequenceSelectionKey)(item.nodePathInfo)}.sequence`;
         case 'sequence-prop':
-            return `${sequenceKey}.sequence-prop.${item.key}`;
+            return `${(0, exports.getTimelineSequenceSelectionKey)(item.nodePathInfo)}.sequence-prop.${item.key}`;
         case 'sequence-all-effects':
-            return `${sequenceKey}.sequence-all-effects`;
+            return `${(0, exports.getTimelineSequenceSelectionKey)(item.nodePathInfo)}.sequence-all-effects`;
         case 'sequence-effect':
-            return `${sequenceKey}.sequence-effect.${item.i}`;
+            return `${(0, exports.getTimelineSequenceSelectionKey)(item.nodePathInfo)}.sequence-effect.${item.i}`;
         case 'sequence-effect-prop':
-            return `${sequenceKey}.sequence-effect-prop.${item.i}.${item.key}`;
+            return `${(0, exports.getTimelineSequenceSelectionKey)(item.nodePathInfo)}.sequence-effect-prop.${item.i}.${item.key}`;
         case 'keyframe':
             return `${(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(item.nodePathInfo)}.keyframe.${item.frame}`;
         case 'easing':
-            return `${(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(item.nodePathInfo)}.easing.${item.segmentIndex}.${item.fromFrame}.${item.toFrame}`;
+            return `${(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(item.nodePathInfo)}.easing.${item.segmentIndex}`;
         default:
             throw new Error(`Unexpected timeline selection type: ${item}`);
     }
@@ -343,8 +349,6 @@ const TimelineSelectionProvider = ({ children }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const canSelect = previewServerState.type === 'connected' &&
         !window.remotion_isReadOnlyStudio;
-    const canSelectEasing = previewServerState.type === 'connected' &&
-        !window.remotion_isReadOnlyStudio;
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
     const selectionAnchor = (0, react_1.useRef)(null);
     const selectableItemsOrder = (0, react_1.useRef)(new Map());
@@ -353,11 +357,11 @@ const TimelineSelectionProvider = ({ children }) => {
     const registrationCounter = (0, react_1.useRef)(0);
     const marqueeRegistrationCounter = (0, react_1.useRef)(0);
     (0, react_1.useEffect)(() => {
-        if (!canSelect && !canSelectEasing) {
+        if (!canSelect) {
             setSelectedItems([]);
         }
-    }, [canSelect, canSelectEasing]);
-    const canSelectItem = (0, react_1.useCallback)((item) => canSelect || (canSelectEasing && item.type === 'easing'), [canSelect, canSelectEasing]);
+    }, [canSelect]);
+    const canSelectItem = (0, react_1.useCallback)((_item) => canSelect, [canSelect]);
     const selectedKeys = (0, react_1.useMemo)(() => new Set(selectedItems.map(exports.getTimelineSelectionKey)), [selectedItems]);
     const isSelected = (0, react_1.useCallback)((item) => {
         return selectedKeys.has((0, exports.getTimelineSelectionKey)(item));
@@ -456,11 +460,11 @@ const TimelineSelectionProvider = ({ children }) => {
         setSelectedItems([]);
     }, []);
     const containsSelection = (0, react_1.useCallback)((nodePathInfo) => {
-        return selectedItems.some((selected) => nodePathDescendsFrom(selected.nodePathInfo, nodePathInfo));
+        return selectedItems.some((selected) => selected.type !== 'guide' &&
+            nodePathDescendsFrom(selected.nodePathInfo, nodePathInfo));
     }, [selectedItems]);
     const value = (0, react_1.useMemo)(() => ({
         canSelect,
-        canSelectEasing,
         selectedItems,
         isSelected,
         selectItem,
@@ -472,7 +476,6 @@ const TimelineSelectionProvider = ({ children }) => {
         clearSelection,
     }), [
         canSelect,
-        canSelectEasing,
         selectedItems,
         isSelected,
         selectItem,
@@ -504,14 +507,14 @@ const useCurrentTimelineSelectionStateAsRef = () => {
 };
 exports.useCurrentTimelineSelectionStateAsRef = useCurrentTimelineSelectionStateAsRef;
 const useTimelineMarqueeSelection = () => {
-    const { canSelect, canSelectEasing, getMarqueeSelection, selectItems } = (0, exports.useTimelineSelection)();
+    const { canSelect, getMarqueeSelection, selectItems } = (0, exports.useTimelineSelection)();
     const { isHighestContext } = (0, z_index_1.useZIndex)();
     const [marqueeRect, setMarqueeRect] = (0, react_1.useState)(null);
     const onPointerDownCapture = (0, react_1.useCallback)((event) => {
         if (!isHighestContext) {
             return;
         }
-        if (event.button !== 0 || (!canSelect && !canSelectEasing)) {
+        if (event.button !== 0 || !canSelect) {
             return;
         }
         if (event.shiftKey || event.metaKey || event.ctrlKey) {
@@ -596,13 +599,7 @@ const useTimelineMarqueeSelection = () => {
         window.addEventListener('pointermove', onPointerMove);
         window.addEventListener('pointerup', onPointerUp);
         window.addEventListener('pointercancel', onPointerCancel);
-    }, [
-        canSelect,
-        canSelectEasing,
-        getMarqueeSelection,
-        isHighestContext,
-        selectItems,
-    ]);
+    }, [canSelect, getMarqueeSelection, isHighestContext, selectItems]);
     return { marqueeRect, onPointerDownCapture };
 };
 exports.useTimelineMarqueeSelection = useTimelineMarqueeSelection;
@@ -667,7 +664,7 @@ const useTimelineKeyframeSelection = (nodePathInfo, frame) => {
 };
 exports.useTimelineKeyframeSelection = useTimelineKeyframeSelection;
 const useTimelineEasingSelection = ({ nodePathInfo, fromFrame, toFrame, segmentIndex, }) => {
-    const { canSelectEasing, isSelected, selectItem, registerSelectableItem } = (0, exports.useTimelineSelection)();
+    const { canSelect, isSelected, selectItem, registerSelectableItem } = (0, exports.useTimelineSelection)();
     const selectionItem = (0, react_1.useMemo)(() => ({
         type: 'easing',
         nodePathInfo,
@@ -684,12 +681,34 @@ const useTimelineEasingSelection = ({ nodePathInfo, fromFrame, toFrame, segmentI
     }, [selectItem, selectionItem]);
     return {
         onSelect,
-        selectable: canSelectEasing,
+        selectable: canSelect,
         selected,
         selectionItem,
     };
 };
 exports.useTimelineEasingSelection = useTimelineEasingSelection;
+const useTimelineGuideSelection = (guideId) => {
+    const { canSelect, clearSelection, isSelected, selectItem, registerSelectableItem, } = (0, exports.useTimelineSelection)();
+    const selectionItem = (0, react_1.useMemo)(() => ({
+        type: 'guide',
+        guideId,
+    }), [guideId]);
+    (0, react_1.useEffect)(() => {
+        return registerSelectableItem(selectionItem);
+    }, [registerSelectableItem, selectionItem]);
+    const selected = isSelected(selectionItem);
+    const onSelect = (0, react_1.useCallback)(() => {
+        selectItem(selectionItem);
+    }, [selectItem, selectionItem]);
+    return {
+        clearSelection,
+        onSelect,
+        selectable: canSelect,
+        selected,
+        selectionItem,
+    };
+};
+exports.useTimelineGuideSelection = useTimelineGuideSelection;
 const useTimelineRowContainsSelection = (nodePathInfo) => {
     const { containsSelection } = (0, exports.useTimelineSelection)();
     if (nodePathInfo === null) {