@remotion/studio 4.0.525 → 4.0.526

package/dist/components/Timeline/TimelineAssetField.js

@@ -10,6 +10,8 @@ const colors_1 = require("../../helpers/colors");
 const hoverable_1 = require("../../helpers/hoverable");
 const pen_1 = require("../../icons/pen");
 const modals_1 = require("../../state/modals");
+const asset_context_menu_1 = require("../asset-context-menu");
+const ContextMenu_1 = require("../ContextMenu");
 const import_assets_1 = require("../import-assets");
 const InlineAction_1 = require("../InlineAction");
 const common_1 = require("../InspectorPanel/common");
@@ -44,24 +46,35 @@ const imageAssetField = {
     alignItems: 'center',
     display: 'flex',
     flex: 1,
-    gap: 8,
+    gap: 4,
+    margin: '0 4px',
+    minWidth: 0,
+};
+const imageAssetPreviewContainer = {
+    display: 'flex',
+    flex: 1,
     minWidth: 0,
-    padding: '4px 12px',
 };
-const thumbnailButton = {
-    ...(0, hoverable_1.hoverableStyle)({
-        idleBackground: colors_1.TRANSPARENT,
-        hoverBackground: colors_1.TRANSPARENT,
-        idleColor: colors_1.LIGHT_TEXT,
-        hoverColor: colors_1.WHITE,
-    }),
+const imageAssetPreviewButton = {
+    alignItems: 'center',
     appearance: 'none',
     border: 'none',
+    borderRadius: 4,
     cursor: 'default',
-    flexShrink: 0,
+    display: 'flex',
+    flex: 1,
+    gap: 8,
     height: 40,
     margin: 0,
-    padding: 0,
+    minWidth: 0,
+    padding: '0 8px',
+    textAlign: 'left',
+};
+const thumbnailContainer = {
+    borderRadius: 4,
+    flexShrink: 0,
+    height: 40,
+    overflow: 'hidden',
     width: 40,
 };
 const thumbnail = {
@@ -71,22 +84,11 @@ const thumbnail = {
     width: '100%',
 };
 const imageAssetInfo = {
-    ...(0, hoverable_1.hoverableStyle)({
-        idleBackground: colors_1.TRANSPARENT,
-        hoverBackground: colors_1.TRANSPARENT,
-        idleColor: colors_1.LIGHT_TEXT,
-        hoverColor: colors_1.WHITE,
-    }),
-    appearance: 'none',
-    border: 'none',
     display: 'flex',
     flex: 1,
     flexDirection: 'column',
     gap: 2,
-    margin: 0,
     minWidth: 0,
-    padding: 0,
-    textAlign: 'left',
 };
 const imageAssetName = {
     color: colors_1.WHITE,
@@ -127,6 +129,14 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
     const { getSourceAction, sourceAction } = (0, react_1.useContext)(exports.AssetSelectionContext);
     const { assetType } = field.fieldSchema;
     const initialQuery = assetType ? `type:${assetType} ` : '';
+    const imageLinkInfo = assetType === 'image' && typeof effectiveValue === 'string'
+        ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(effectiveValue)
+        : null;
+    const localAssetPath = (imageLinkInfo === null || imageLinkInfo === void 0 ? void 0 : imageLinkInfo.kind) === 'local' ? imageLinkInfo.assetPath : null;
+    const { getContextMenuItems: getLocalAssetContextMenuItems } = (0, asset_context_menu_1.useAssetContextMenuItems)({
+        relativePath: localAssetPath,
+        readOnlyStudio: window.remotion_isReadOnlyStudio,
+    });
     const inlineSourceAction = (0, react_1.useMemo)(() => {
         if (typeof effectiveValue === 'string') {
             return getSourceAction(effectiveValue);
@@ -220,38 +230,58 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
         setSelectedModal,
     ]);
     const action = (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openAssetSelection, disabled: window.remotion_isReadOnlyStudio, title: "Change source", renderAction: (color) => jsx_runtime_1.jsx(pen_1.PenIcon, { color: color, style: penIcon }) }));
-    if (assetType === 'image' && typeof effectiveValue === 'string') {
-        const linkInfo = (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(effectiveValue);
-        if (linkInfo !== null) {
-            let name;
-            let source;
-            let previewSrc;
-            if (linkInfo.kind === 'local') {
-                name = (_a = linkInfo.assetPath.split('/').pop()) !== null && _a !== void 0 ? _a : linkInfo.assetPath;
-                source = 'Project asset';
-                previewSrc = (0, remotion_1.staticFile)(linkInfo.assetPath);
+    if (imageLinkInfo !== null) {
+        const linkInfo = imageLinkInfo;
+        let name;
+        let source;
+        let previewSrc;
+        if (linkInfo.kind === 'local') {
+            name = (_a = linkInfo.assetPath.split('/').pop()) !== null && _a !== void 0 ? _a : linkInfo.assetPath;
+            source = null;
+            previewSrc = (0, remotion_1.staticFile)(linkInfo.assetPath);
+        }
+        else {
+            previewSrc = linkInfo.href.startsWith('//')
+                ? `https:${linkInfo.href}`
+                : linkInfo.href;
+            try {
+                const url = new URL(previewSrc);
+                const encodedName = url.pathname.split('/').filter(Boolean).pop();
+                name = encodedName ? decodeURIComponent(encodedName) : url.hostname;
+                source = url.hostname;
             }
-            else {
-                previewSrc = linkInfo.href.startsWith('//')
-                    ? `https:${linkInfo.href}`
-                    : linkInfo.href;
-                try {
-                    const url = new URL(previewSrc);
-                    const encodedName = url.pathname.split('/').filter(Boolean).pop();
-                    name = encodedName ? decodeURIComponent(encodedName) : url.hostname;
-                    source = url.hostname;
-                }
-                catch (_c) {
-                    name = 'Remote image';
-                    source = linkInfo.href;
-                }
+            catch (_c) {
+                name = 'Remote image';
+                source = linkInfo.href;
             }
-            const title = (_b = inlineSourceAction === null || inlineSourceAction === void 0 ? void 0 : inlineSourceAction.title) !== null && _b !== void 0 ? _b : linkInfo.title;
-            return (jsx_runtime_1.jsxs("div", { style: imageAssetField, children: [
-                    jsx_runtime_1.jsx("button", { "aria-label": `Replace ${name}`, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: window.remotion_isReadOnlyStudio, onClick: openAssetSelection, style: thumbnailButton, title: title, type: "button", children: jsx_runtime_1.jsx("img", { alt: "", src: previewSrc, style: thumbnail }) }), jsx_runtime_1.jsxs("button", { "aria-label": `Replace ${name}`, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: window.remotion_isReadOnlyStudio, onClick: openAssetSelection, style: imageAssetInfo, title: title, type: "button", children: [
-                            jsx_runtime_1.jsx("span", { style: imageAssetName, children: name }), jsx_runtime_1.jsx("span", { style: imageAssetSource, children: source })
-                        ] }), action] }));
         }
+        const opensSource = linkInfo.kind === 'local' &&
+            inlineSourceAction !== null &&
+            inlineSourceAction.onClick !== null;
+        const title = (_b = inlineSourceAction === null || inlineSourceAction === void 0 ? void 0 : inlineSourceAction.title) !== null && _b !== void 0 ? _b : linkInfo.title;
+        const onPreviewClick = opensSource
+            ? inlineSourceAction.onClick
+            : openAssetSelection;
+        const previewLabel = `${opensSource ? 'Open' : 'Replace'} ${name}`;
+        const previewDisabled = opensSource
+            ? inlineSourceAction.disabled
+            : window.remotion_isReadOnlyStudio;
+        const previewButtonStyle = {
+            ...imageAssetPreviewButton,
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground: colors_1.TRANSPARENT,
+                hoverBackground: previewDisabled
+                    ? colors_1.TRANSPARENT
+                    : (0, colors_1.getBackgroundFromHoverState)({ hovered: true, selected: false }),
+                idleColor: colors_1.LIGHT_TEXT,
+                hoverColor: previewDisabled ? colors_1.LIGHT_TEXT : colors_1.WHITE,
+            }),
+        };
+        const previewAction = (jsx_runtime_1.jsxs("button", { "aria-label": previewLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: previewDisabled, onClick: onPreviewClick, style: previewButtonStyle, title: title, type: "button", children: [
+                jsx_runtime_1.jsx("span", { style: thumbnailContainer, children: jsx_runtime_1.jsx("img", { alt: "", draggable: false, src: previewSrc, style: thumbnail }) }), jsx_runtime_1.jsxs("span", { style: imageAssetInfo, children: [
+                        jsx_runtime_1.jsx("span", { style: imageAssetName, children: name }), source === null ? null : (jsx_runtime_1.jsx("span", { style: imageAssetSource, children: source }))] })
+            ] }));
+        return (jsx_runtime_1.jsxs("div", { style: imageAssetField, children: [localAssetPath === null ? (jsx_runtime_1.jsx("div", { style: imageAssetPreviewContainer, children: previewAction })) : (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getLocalAssetContextMenuItems, style: imageAssetPreviewContainer, children: previewAction })), action] }));
     }
     if (inlineSourceAction === null) {
         return action;

package/dist/components/Timeline/TimelineHeightContainer.js

@@ -47,7 +47,17 @@ const baseStyle = {
 };
 const TimelineHeightContainerInner = ({ children }) => {
     const { totalSize } = (0, TimelineVirtualization_1.useTimelineVirtualization)();
+    const onPointerDownCapture = (0, react_1.useCallback)((event) => {
+        const { activeElement } = document;
+        if (event.button === 0 &&
+            activeElement instanceof HTMLButtonElement &&
+            event.target instanceof Node &&
+            !activeElement.contains(event.target)) {
+            // Timeline drags can prevent the browser's default focus change.
+            activeElement.blur();
+        }
+    }, []);
     const style = (0, react_1.useMemo)(() => ({ ...baseStyle, height: totalSize }), [totalSize]);
-    return jsx_runtime_1.jsx("div", { style: style, children: children });
+    return (jsx_runtime_1.jsx("div", { style: style, onPointerDownCapture: onPointerDownCapture, children: children }));
 };
 exports.TimelineHeightContainer = react_1.default.memo(TimelineHeightContainerInner);

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -10,11 +10,13 @@ const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const call_delete_keyframe_1 = require("./call-delete-keyframe");
 const get_easing_selection_after_keyframe_delete_1 = require("./get-easing-selection-after-keyframe-delete");
 const get_keyframe_navigation_1 = require("./get-keyframe-navigation");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
+const normalize_font_weight_for_keyframe_1 = require("./normalize-font-weight-for-keyframe");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineKeyframeDiamondIcon_1 = require("./TimelineKeyframeDiamondIcon");
 const TimelineKeyframeTracksContext_1 = require("./TimelineKeyframeTracksContext");
@@ -222,12 +224,19 @@ const getAddChange = (target) => {
     if (value === null) {
         return null;
     }
+    const fieldSchema = target.schema[target.fieldKey];
+    const normalizedValue = (fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) === 'font-weight'
+        ? (0, normalize_font_weight_for_keyframe_1.normalizeFontWeightForKeyframe)(value)
+        : value;
+    if (normalizedValue === null) {
+        return null;
+    }
     const change = {
         fileName: target.fileName,
         nodePath: target.nodePath,
         fieldKey: target.fieldKey,
         sourceFrame: target.sourceFrame,
-        value,
+        value: normalizedValue,
         schema: target.schema,
     };
     if (target.effectIndex === null) {
@@ -313,6 +322,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { expandParentTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { selectedItems, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const tracks = (0, TimelineKeyframeTracksContext_1.useTimelineKeyframeTracks)();
     const clientId = previewServerState.type === 'connected'
@@ -481,6 +491,9 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
             setPropStatuses,
             clientId,
         });
+        for (const { target } of addChanges) {
+            expandParentTracks(target.nodePathInfo);
+        }
         if (mode === 'timeline') {
             selectItems(addChanges.map(({ target }) => ({
                 type: 'keyframe',
@@ -491,6 +504,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     }, [
         canToggleKeyframe,
         clientId,
+        expandParentTracks,
         hasKeyframeAtCurrentFrame,
         keyframeToggleTargets,
         mode,

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

@@ -1,14 +1,14 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
-import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackWithDisplayGroup } from './timeline-display-groups';
 export declare const TimelineLayerChildrenProvider: React.Provider<{
     readonly collapsed: Record<string, boolean>;
     readonly keys: Map<string, string>;
     readonly parents: Set<string>;
     readonly toggle: (key: string) => void;
 } | null>;
-export declare const useTimelineLayerChildren: (tracks: TimelineTrackData[], sequences: TSequence[], compositionId: string | null) => {
-    visibleTracks: TimelineTrackData[];
+export declare const useTimelineLayerChildren: (tracks: TimelineTrackWithDisplayGroup[], sequences: TSequence[], compositionId: string | null) => {
+    visibleTracks: TimelineTrackWithDisplayGroup[];
     value: {
         collapsed: Record<string, boolean>;
         keys: Map<string, string>;

package/dist/components/Timeline/TimelineLayerChildren.js

@@ -70,17 +70,19 @@ const useTimelineLayerChildren = (tracks, sequences, compositionId) => {
                 parent = (_c = (_a = byId.get(parent)) === null || _a === void 0 ? void 0 : _a.parent) !== null && _c !== void 0 ? _c : null;
             }
             ancestors.set(track.sequence.id, parentIds);
-            // Source identity survives remounts. For layers without source metadata,
-            // use the structural position instead of the ephemeral sequence ID.
+            // Source identity survives remounts. While it is resolving, the stack
+            // gives interactive layers a stable display identity.
             const identity = track.nodePathInfo
                 ? ['source', (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(track.nodePathInfo)]
-                : [
-                    'position',
-                    ...[...parentIds]
-                        .reverse()
-                        .concat(track.sequence.id)
-                        .map((id) => siblingIndices.get(id)),
-                ];
+                : track.displayGroup
+                    ? ['stack', track.displayGroup.key]
+                    : [
+                        'position',
+                        ...[...parentIds]
+                            .reverse()
+                            .concat(track.sequence.id)
+                            .map((id) => siblingIndices.get(id)),
+                    ];
             keys.set(track.sequence.id, JSON.stringify([compositionId, identity]));
         }
         return { keys, parents, ancestors };

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

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

package/dist/components/Timeline/TimelineLayerEye.js

@@ -54,6 +54,9 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
         }
         e.preventDefault();
         e.stopPropagation();
+        if (onInvoked === null) {
+            return;
+        }
         stopLayerPointerSession === null || stopLayerPointerSession === void 0 ? void 0 : stopLayerPointerSession();
         layerPointedDown = hidden ? 'enable' : 'disable';
         onInvoked(layerPointedDown);
@@ -83,14 +86,14 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
         e.stopPropagation();
     }, []);
     const onPointerEnter = (0, react_1.useCallback)(() => {
-        if (layerPointedDown) {
+        if (layerPointedDown && onInvoked !== null) {
             onInvoked(layerPointedDown);
         }
     }, [onInvoked]);
     const registerLayerEye = (0, react_1.useCallback)((element) => {
         if (element) {
             layerEyeActions.set(element, () => {
-                if (layerPointedDown) {
+                if (layerPointedDown && onInvoked !== null) {
                     onInvoked(layerPointedDown);
                 }
             });
@@ -99,7 +102,7 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
     const onDoubleClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
     }, []);
-    return (jsx_runtime_1.jsx("div", { ref: registerLayerEye, [TIMELINE_LAYER_EYE_ATTR]: true, style: exports.timelineLayerIconContainer, draggable: false, onDragStart: onDragStart, onDoubleClick: onDoubleClick, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
+    return (jsx_runtime_1.jsx("div", { ref: registerLayerEye, [TIMELINE_LAYER_EYE_ATTR]: true, style: exports.timelineLayerIconContainer, draggable: false, onDragStart: onDragStart, onDoubleClick: onDoubleClick, onPointerEnter: onInvoked === null ? undefined : onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
 };
 exports.TimelineLayerEye = TimelineLayerEye;
 const spacerStyle = {

package/dist/components/Timeline/TimelineList.js

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const colors_1 = require("../../helpers/colors");
 const TimelineSequenceItem_1 = require("./TimelineSequenceItem");
 const TimelineVirtualization_1 = require("./TimelineVirtualization");
@@ -10,11 +14,13 @@ const container = {
     background: colors_1.BACKGROUND,
     position: 'relative',
 };
-const TimelineListTrack = ({ row }) => {
+const noConnectedCompositions = [];
+const TimelineListTrack = react_1.default.memo(({ row }) => {
     var _a;
+    var _b, _c;
     const { afterDropLineOffset, siblingIndex, track } = row;
-    return (jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { afterDropLineOffset: afterDropLineOffset, siblingIndex: siblingIndex, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset }));
-};
+    return (jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { afterDropLineOffset: afterDropLineOffset, siblingIndex: siblingIndex, connectedCompositions: (_b = track.connectedCompositions) !== null && _b !== void 0 ? _b : noConnectedCompositions, nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset, numberOfHiddenDuplicates: Math.max(0, ((_c = (_a = track.displayGroup) === null || _a === void 0 ? void 0 : _a.numberOfSequences) !== null && _c !== void 0 ? _c : 1) - 1), showProvisionalVisibilityToggle: track.nodePathInfo === null && track.displayGroup !== null }));
+});
 const TimelineList = () => {
     const { rows, tracksEnd, virtualItems } = (0, TimelineVirtualization_1.useTimelineVirtualization)();
     return (jsx_runtime_1.jsx("div", { style: { ...container, height: tracksEnd }, children: virtualItems.map((virtualItem) => (jsx_runtime_1.jsx("div", { style: {

package/dist/components/Timeline/TimelineSchemaField.js

@@ -39,7 +39,6 @@ const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
 const hoverable_1 = require("../../helpers/hoverable");
 const modals_1 = require("../../state/modals");
-const SettingsContext_1 = require("../SettingsContext");
 const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const TimelineArrayField_1 = require("./TimelineArrayField");
 const TimelinePrimitiveFieldValue_1 = require("./TimelinePrimitiveFieldValue");
@@ -117,16 +116,13 @@ const UnsupportedStatus = ({ label, onFix, formattedValue }) => {
 exports.UnsupportedStatus = UnsupportedStatus;
 const TimelineNonEditableStatus = ({ propStatus, field, runtimeValue, validatedLocation }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
-    const { remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
     const onFix = (0, react_1.useCallback)(() => {
-        var _a;
         setSelectedModal({
             type: 'fix-computed-value',
             prop: field.key,
-            context: `${validatedLocation.source}:${validatedLocation.line}:${validatedLocation.column}`,
-            remotionInteractivitySkillAvailable: (_a = remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.remotionInteractivitySkillAvailable) !== null && _a !== void 0 ? _a : false,
+            location: validatedLocation,
         });
-    }, [field.key, remotionSkillsInfo, setSelectedModal, validatedLocation]);
+    }, [field.key, setSelectedModal, validatedLocation]);
     if (propStatus.status === 'computed') {
         return (jsx_runtime_1.jsx(exports.UnsupportedStatus, { label: runtimeValue === undefined
                 ? 'computed'

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

@@ -155,14 +155,20 @@ export declare const useTimelineMarqueeSelection: () => {
 };
 export declare const useTimelineMarqueeSelectableItem: (item: CanvasSelectionItem | null, ref: React.RefObject<Element | null>) => void;
 export declare const useTimelineRowSelection: (nodePathInfo: SequenceNodePathInfo | null, revealInInspector?: boolean) => {
+    clearSelection: () => void;
     onSelect: (interaction?: CanvasSelectionInteraction | undefined) => void;
     selectable: boolean;
+    selectedItems: readonly CanvasSelectionItem[];
+    selectItem: (item: CanvasSelectionItem, interaction?: CanvasSelectionInteraction | undefined, allSelectableItems?: readonly CanvasSelectionItem[] | undefined, options?: TimelineSelectionOptions | undefined) => void;
     selectionItem: CanvasSelectionItem | null;
     selected: boolean;
 };
 export declare const useTimelineKeyframeSelection: (nodePathInfo: SequenceNodePathInfo, frame: number) => {
+    clearSelection: () => void;
     onSelect: (interaction?: CanvasSelectionInteraction | undefined) => void;
     selectable: boolean;
+    selectedItems: readonly CanvasSelectionItem[];
+    selectItem: (item: CanvasSelectionItem, interaction?: CanvasSelectionInteraction | undefined, allSelectableItems?: readonly CanvasSelectionItem[] | undefined, options?: TimelineSelectionOptions | undefined) => void;
     selectionItem: CanvasSelectionItem;
     selected: boolean;
 };
@@ -172,9 +178,11 @@ export declare const useTimelineEasingSelection: ({ nodePathInfo, fromFrame, toF
     readonly toFrame: number;
     readonly segmentIndex: number;
 }) => {
+    clearSelection: () => void;
     onSelect: (interaction?: CanvasSelectionInteraction | undefined) => void;
     selectable: boolean;
-    selected: boolean;
+    selectedItems: readonly CanvasSelectionItem[];
+    selectItem: (item: CanvasSelectionItem, interaction?: CanvasSelectionInteraction | undefined, allSelectableItems?: readonly CanvasSelectionItem[] | undefined, options?: TimelineSelectionOptions | undefined) => void;
     selectionItem: {
         readonly type: "easing";
         readonly nodePathInfo: SequenceNodePathInfo;
@@ -182,13 +190,16 @@ export declare const useTimelineEasingSelection: ({ nodePathInfo, fromFrame, toF
         readonly toFrame: number;
         readonly segmentIndex: number;
     };
+    selected: boolean;
 };
 export declare const useTimelineGuideSelection: (guideId: string) => {
     clearSelection: () => void;
-    onSelect: () => void;
+    onSelect: (interaction?: CanvasSelectionInteraction | undefined) => void;
     selectable: boolean;
-    selected: boolean;
+    selectedItems: readonly CanvasSelectionItem[];
+    selectItem: (item: CanvasSelectionItem, interaction?: CanvasSelectionInteraction | undefined, allSelectableItems?: readonly CanvasSelectionItem[] | undefined, options?: TimelineSelectionOptions | undefined) => void;
     selectionItem: CanvasSelectionItem;
+    selected: boolean;
 };
 export declare const useTimelineRowContainsSelection: (nodePathInfo: SequenceNodePathInfo | null) => boolean;
 export declare const useTimelineRowHighlightBackground: (nodePathInfo: SequenceNodePathInfo | null, { hovered, selectedBackground, }: {