@remotion/studio 4.0.468 → 4.0.469

package/dist/components/Timeline/TimelineListItem.js

@@ -4,23 +4,32 @@ exports.TimelineListItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../../helpers/client-id");
-const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const save_sequence_prop_1 = require("./save-sequence-prop");
-const timeline_row_layout_1 = require("./timeline-row-layout");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
+const TimelineItemStack_1 = require("./TimelineItemStack");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineMediaInfo_1 = require("./TimelineMediaInfo");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
-const TimelineStack_1 = require("./TimelineStack");
-const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
-const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) => {
+const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineSequenceName_1 = require("./TimelineSequenceName");
+const use_open_sequence_in_editor_1 = require("./use-open-sequence-in-editor");
+const labelContainerStyle = {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    display: 'flex',
+    flexDirection: 'row',
+    minWidth: 0,
+    gap: 4,
+};
+const TimelineListItem = ({ nestedDepth, sequence, nodePathInfo }) => {
     var _a;
     var _b;
     const nodePath = (_b = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _b !== void 0 ? _b : null;
@@ -30,7 +39,10 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     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_react_to_change_1.useResolveStackAndReactToChange)(sequence.getStack);
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
+    const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -105,11 +117,73 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
             (0, NotificationCenter_1.showNotification)(err.message, 4000);
         }
     }, [nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source, nodePathInfo]);
+    const mediaSrc = sequence.type === 'audio' ||
+        sequence.type === 'video' ||
+        sequence.type === 'image'
+        ? sequence.src
+        : null;
+    const assetLinkInfo = (0, react_1.useMemo)(() => (mediaSrc ? (0, TimelineMediaInfo_1.getTimelineAssetLinkInfo)(mediaSrc) : null), [mediaSrc]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
         if (!previewConnected) {
             return [];
         }
+        const editorName = window.remotion_editorName;
+        const { documentationLink } = sequence;
         return [
+            editorName
+                ? {
+                    type: 'item',
+                    id: 'show-in-editor',
+                    keyHint: null,
+                    label: `Show in ${editorName}`,
+                    leftItem: null,
+                    disabled: !canOpenInEditor,
+                    onClick: () => {
+                        openInEditor();
+                    },
+                    quickSwitcherLabel: null,
+                    subMenu: null,
+                    value: 'show-in-editor',
+                }
+                : null,
+            documentationLink
+                ? {
+                    type: 'item',
+                    id: 'open-component-docs',
+                    keyHint: null,
+                    label: 'Open component docs',
+                    leftItem: null,
+                    disabled: false,
+                    onClick: () => {
+                        window.open(documentationLink, '_blank', 'noopener,noreferrer');
+                    },
+                    quickSwitcherLabel: null,
+                    subMenu: null,
+                    value: 'open-component-docs',
+                }
+                : null,
+            assetLinkInfo
+                ? {
+                    type: 'item',
+                    id: 'show-asset',
+                    keyHint: null,
+                    label: 'Show asset',
+                    leftItem: null,
+                    disabled: false,
+                    onClick: () => {
+                        (0, TimelineMediaInfo_1.openTimelineAssetLink)(assetLinkInfo, setCanvasContent);
+                    },
+                    quickSwitcherLabel: null,
+                    subMenu: null,
+                    value: 'show-asset',
+                }
+                : null,
+            documentationLink
+                ? {
+                    type: 'divider',
+                    id: 'open-component-docs-divider',
+                }
+                : null,
             {
                 type: 'item',
                 id: 'duplicate-sequence',
@@ -144,13 +218,18 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
                 subMenu: null,
                 value: 'delete-sequence',
             },
-        ];
+        ].filter(no_react_1.NoReactInternals.truthy);
     }, [
+        assetLinkInfo,
         deleteDisabled,
         duplicateDisabled,
         onDeleteSequenceFromSource,
         onDuplicateSequenceFromSource,
+        canOpenInEditor,
+        openInEditor,
         previewConnected,
+        sequence,
+        setCanvasContent,
     ]);
     const isExpanded = previewConnected && nodePathInfo !== null && getIsExpanded(nodePathInfo);
     const onToggleExpand = (0, react_1.useCallback)(() => {
@@ -159,6 +238,13 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         }
         toggleTrack(nodePathInfo);
     }, [nodePathInfo, toggleTrack]);
+    const onShowInEditorDoubleClick = (0, react_1.useCallback)((e) => {
+        if (!TimelineSelection_1.SELECTION_ENABLED || !canOpenInEditor) {
+            return;
+        }
+        e.stopPropagation();
+        openInEditor();
+    }, [canOpenInEditor, openInEditor]);
     const codeValuesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
             ? remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)
@@ -209,14 +295,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         setCodeValues,
         validatedLocation,
     ]);
-    const outer = (0, react_1.useMemo)(() => {
-        return {
-            height: (0, timeline_layout_1.getTimelineLayerHeight)(sequence.type) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-            borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
-            display: 'flex',
-            flexDirection: 'column',
-        };
-    }, [sequence.type]);
+    const outerHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getTimelineLayerHeight)(sequence.type) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM, [sequence.type]);
     const inner = (0, react_1.useMemo)(() => {
         return {
             height: timeline_layout_1.TIMELINE_LIST_ITEM_ROW_HEIGHT,
@@ -227,20 +306,6 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
             flexShrink: 0,
         };
     }, []);
-    const mediaInfoStyle = (0, react_1.useMemo)(() => {
-        return {
-            paddingLeft: (0, timeline_row_layout_1.getTimelineRowLeftChromeWidth)(nestedDepth),
-            paddingRight: 8,
-            marginTop: -6,
-            overflow: 'hidden',
-            minHeight: 0,
-        };
-    }, [nestedDepth]);
-    const mediaSrc = sequence.type === 'audio' ||
-        sequence.type === 'video' ||
-        sequence.type === 'image'
-        ? sequence.src
-        : null;
     const hasExpandableContent = Boolean(sequence.controls) || sequence.effects.length > 0;
     const canToggleVisibility = previewConnected &&
         Boolean(sequence.controls) &&
@@ -249,8 +314,12 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         codeHiddenStatus !== undefined &&
         codeHiddenStatus !== null &&
         codeHiddenStatus.canUpdate;
-    const trackRow = (jsx_runtime_1.jsxs("div", { style: outer, children: [jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: 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, {})), arrow: hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: !previewConnected || nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: inner, children: jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation }) }), mediaSrc ? (jsx_runtime_1.jsx("div", { style: mediaInfoStyle, children: jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc, type: sequence.type }) })) : null] }));
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: trackRow })) : (trackRow), previewConnected &&
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: 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, {})), arrow: hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: !previewConnected || nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: inner, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDoubleClick: TimelineSelection_1.SELECTION_ENABLED && canOpenInEditor
+            ? onShowInEditorDoubleClick
+            : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
+                jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { sequence: sequence, selected: selected, containsSelection: containsSelection }), mediaSrc ? jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc }) : null, jsx_runtime_1.jsx(TimelineItemStack_1.TimelineItemStack, { originalLocation: originalLocation })
+            ] }) }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selectable ? onSelect : null, children: trackRow })) : (trackRow), previewConnected &&
                 isExpanded &&
                 hasExpandableContent &&
                 nodePathInfo &&

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

@@ -1,5 +1,17 @@
 import React from 'react';
+type LinkInfo = {
+    kind: 'local';
+    assetPath: string;
+    title: string;
+} | {
+    kind: 'remote';
+    href: string;
+    title: string;
+} | null;
+export type TimelineAssetLinkInfo = Exclude<LinkInfo, null>;
+export declare const getTimelineAssetLinkInfo: (src: string) => LinkInfo;
+export declare const openTimelineAssetLink: (linkInfo: TimelineAssetLinkInfo, setCanvasContent: React.Dispatch<React.SetStateAction<import("remotion").CanvasContent | null>>) => void;
 export declare const TimelineMediaInfo: React.FC<{
     readonly src: string;
-    readonly type: 'audio' | 'video' | 'image';
 }>;
+export {};

package/dist/components/Timeline/TimelineMediaInfo.js

@@ -33,25 +33,13 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineMediaInfo = void 0;
+exports.TimelineMediaInfo = exports.openTimelineAssetLink = exports.getTimelineAssetLinkInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const media_utils_1 = require("@remotion/media-utils");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
-const format_media_duration_1 = require("../../helpers/format-media-duration");
 const url_state_1 = require("../../helpers/url-state");
-const use_media_metadata_1 = require("../../helpers/use-media-metadata");
-const containerStyle = {
-    fontFamily: 'Arial, Helvetica, sans-serif',
-    fontSize: 12,
-    lineHeight: 1,
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    minWidth: 0,
-    marginTop: 2,
-};
+const TimelineSelection_1 = require("./TimelineSelection");
 const lineStyle = {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -59,9 +47,9 @@ const lineStyle = {
     minWidth: 0,
     fontSize: 12,
     color: colors_1.VERY_LIGHT_TEXT,
-    lineHeight: 1.3,
+    display: 'inline-block',
 };
-const getLinkInfo = (src) => {
+const getTimelineAssetLinkInfo = (src) => {
     const staticBase = typeof window === 'undefined' ? null : window.remotion_staticBase;
     if (staticBase && src.startsWith(staticBase + '/')) {
         const assetPath = src.slice(staticBase.length + 1);
@@ -84,90 +72,55 @@ const getLinkInfo = (src) => {
     }
     return null;
 };
+exports.getTimelineAssetLinkInfo = getTimelineAssetLinkInfo;
+const openTimelineAssetLink = (linkInfo, setCanvasContent) => {
+    if (linkInfo.kind === 'local') {
+        setCanvasContent({ type: 'asset', asset: linkInfo.assetPath });
+        (0, url_state_1.pushUrl)(`/assets/${linkInfo.assetPath}`);
+        return;
+    }
+    window.open(linkInfo.href, '_blank', 'noopener,noreferrer');
+};
+exports.openTimelineAssetLink = openTimelineAssetLink;
 const useAssetLink = (src) => {
     const { setCanvasContent } = react_1.default.useContext(remotion_1.Internals.CompositionSetters);
     const [hovered, setHovered] = (0, react_1.useState)(false);
-    const linkInfo = (0, react_1.useMemo)(() => getLinkInfo(src), [src]);
+    const linkInfo = (0, react_1.useMemo)(() => (0, exports.getTimelineAssetLinkInfo)(src), [src]);
+    const interactive = !TimelineSelection_1.SELECTION_ENABLED && linkInfo !== null;
     const onClick = (0, react_1.useCallback)((e) => {
         if (!linkInfo) {
             return;
         }
         e.preventDefault();
         e.stopPropagation();
-        if (linkInfo.kind === 'local') {
-            setCanvasContent({ type: 'asset', asset: linkInfo.assetPath });
-            (0, url_state_1.pushUrl)(`/assets/${linkInfo.assetPath}`);
-            return;
-        }
-        window.open(linkInfo.href, '_blank', 'noopener,noreferrer');
+        (0, exports.openTimelineAssetLink)(linkInfo, setCanvasContent);
     }, [linkInfo, setCanvasContent]);
     const onPointerEnter = (0, react_1.useCallback)(() => setHovered(true), []);
     const onPointerLeave = (0, react_1.useCallback)(() => setHovered(false), []);
     const fileNameStyle = (0, react_1.useMemo)(() => ({
         ...lineStyle,
-        color: linkInfo && hovered ? colors_1.LIGHT_TEXT : colors_1.VERY_LIGHT_TEXT,
-        cursor: linkInfo ? 'pointer' : undefined,
+        color: interactive && hovered ? colors_1.LIGHT_TEXT : colors_1.VERY_LIGHT_TEXT,
+        cursor: interactive ? 'pointer' : undefined,
         textDecoration: 'none',
         display: 'inline-block',
         overflow: 'hidden',
         whiteSpace: 'pre',
         textOverflow: 'ellipsis',
-    }), [linkInfo, hovered]);
-    return { linkInfo, onClick, onPointerEnter, onPointerLeave, fileNameStyle };
+        userSelect: 'none',
+        WebkitUserSelect: 'none',
+    }), [interactive, hovered]);
+    return {
+        linkInfo,
+        interactive,
+        onClick,
+        onPointerEnter,
+        onPointerLeave,
+        fileNameStyle,
+    };
 };
-const TimelineMediaInfo = ({ src, type }) => {
-    // Images aren't supported by mediabunny, so don't even try.
-    const metadata = (0, use_media_metadata_1.useMediaMetadata)(type === 'image' ? null : src);
+const TimelineMediaInfo = ({ src }) => {
     const fileName = (0, react_1.useMemo)(() => remotion_1.Internals.getAssetDisplayName(src), [src]);
-    const { linkInfo, onClick, onPointerEnter, onPointerLeave, fileNameStyle } = useAssetLink(src);
-    const [imageDimensions, setImageDimensions] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        if (type !== 'image') {
-            return;
-        }
-        let cancelled = false;
-        setImageDimensions(null);
-        (0, media_utils_1.getImageDimensions)(src)
-            .then((dims) => {
-            if (cancelled) {
-                return;
-            }
-            setImageDimensions({ width: dims.width, height: dims.height });
-        })
-            .catch(() => {
-            // Non-image or load failure — ignore silently.
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [src, type]);
-    const detailsLine = (0, react_1.useMemo)(() => {
-        if (type === 'image') {
-            if (!imageDimensions) {
-                return null;
-            }
-            return `${imageDimensions.width}x${imageDimensions.height}`;
-        }
-        if (!metadata) {
-            return null;
-        }
-        const parts = [];
-        if (metadata.format) {
-            parts.push(metadata.format);
-        }
-        if (type === 'video' && metadata.videoCodec) {
-            parts.push(metadata.videoCodec);
-        }
-        if (metadata.audioCodec) {
-            parts.push(metadata.audioCodec);
-        }
-        if (metadata.width !== null && metadata.height !== null) {
-            parts.push(`${metadata.width}x${metadata.height}`);
-        }
-        parts.push((0, format_media_duration_1.formatMediaDuration)(metadata.duration));
-        return parts.join(' · ');
-    }, [imageDimensions, metadata, type]);
-    return (jsx_runtime_1.jsxs("div", { style: containerStyle, children: [
-            jsx_runtime_1.jsx("div", { style: fileNameStyle, title: linkInfo ? linkInfo.title : fileName, onClick: linkInfo ? onClick : undefined, onPointerEnter: linkInfo ? onPointerEnter : undefined, onPointerLeave: linkInfo ? onPointerLeave : undefined, children: fileName }), detailsLine ? (jsx_runtime_1.jsx("div", { style: lineStyle, title: detailsLine, children: detailsLine })) : null] }));
+    const { linkInfo, interactive, onClick, onPointerEnter, onPointerLeave, fileNameStyle, } = useAssetLink(src);
+    return (jsx_runtime_1.jsx("div", { style: fileNameStyle, title: linkInfo ? linkInfo.title : fileName, onClick: interactive ? onClick : undefined, onPointerEnter: interactive ? onPointerEnter : undefined, onPointerLeave: interactive ? onPointerLeave : undefined, children: fileName }));
 };
 exports.TimelineMediaInfo = TimelineMediaInfo;

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

@@ -4,5 +4,12 @@ export declare const TimelineRowChrome: React.FC<{
     readonly eye: React.ReactNode;
     readonly arrow: React.ReactNode;
     readonly children: React.ReactNode;
-    readonly style?: React.CSSProperties;
+    readonly style: React.CSSProperties;
+    readonly selected: boolean;
+    readonly selectable: boolean;
+    readonly onSelect: () => void;
+    readonly showSelectedBackground: boolean;
+    readonly containsSelection: boolean;
+    readonly outerHeight: number | null;
+    readonly onDoubleClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }>;

package/dist/components/Timeline/TimelineRowChrome.js

@@ -3,19 +3,59 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineRowChrome = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const Padder_1 = require("./Padder");
 const timeline_row_layout_1 = require("./timeline-row-layout");
+const TimelineSelection_1 = require("./TimelineSelection");
 const rowBase = {
+    alignItems: 'stretch',
     display: 'flex',
+};
+const chromeColumnStyle = {
     alignItems: 'center',
+    alignSelf: 'stretch',
+    display: 'flex',
+    flexShrink: 0,
+    paddingLeft: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
 };
-const TimelineRowChrome = ({ depth, eye, arrow, children, style }) => {
-    const rowStyle = (0, react_1.useMemo)(() => ({
+const TimelineRowChrome = ({ depth, eye, arrow, children, style, selected, selectable, onSelect, showSelectedBackground, containsSelection, outerHeight, onDoubleClick, }) => {
+    const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button === 0) {
+            e.stopPropagation();
+            onSelect();
+        }
+    }, [onSelect]);
+    const onContextMenu = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        onSelect();
+    }, [onSelect]);
+    const highlightBackground = showSelectedBackground && (selected || containsSelection)
+        ? TimelineSelection_1.TIMELINE_SELECTED_BACKGROUND
+        : undefined;
+    const innerRowStyle = (0, react_1.useMemo)(() => ({
         ...rowBase,
-        paddingLeft: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
         ...style,
-    }), [style]);
-    const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
-    return (jsx_runtime_1.jsxs("div", { style: rowStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow, children] }));
+        backgroundColor: outerHeight === undefined ? highlightBackground : undefined,
+    }), [style, outerHeight, highlightBackground]);
+    const outerStyle = (0, react_1.useMemo)(() => {
+        if (outerHeight === null) {
+            return undefined;
+        }
+        return {
+            height: outerHeight,
+            borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            backgroundColor: highlightBackground,
+        };
+    }, [outerHeight, highlightBackground]);
+    const chrome = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] }), children] }));
+    if (outerStyle) {
+        return (jsx_runtime_1.jsx("div", { style: outerStyle, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
+    }
+    return (jsx_runtime_1.jsx("div", { onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, style: innerRowStyle, children: chrome }));
 };
 exports.TimelineRowChrome = TimelineRowChrome;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -9,10 +9,13 @@ const TimelineEnumField_1 = require("./TimelineEnumField");
 const TimelineNumberField_1 = require("./TimelineNumberField");
 const TimelineRotationField_1 = require("./TimelineRotationField");
 const TimelineTranslateField_1 = require("./TimelineTranslateField");
+const TimelineUvCoordinateField_1 = require("./TimelineUvCoordinateField");
 const unsupportedLabel = {
     color: 'rgba(255, 255, 255, 0.4)',
     fontSize: 12,
     fontStyle: 'italic',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const notEditableBackground = {
     backgroundColor: 'rgba(255, 0, 0, 0.2)',
@@ -30,10 +33,9 @@ const TimelineNonEditableStatus = ({ propStatus }) => {
     if (propStatus.canUpdate) {
         return null;
     }
-    if (propStatus.reason === 'computed') {
+    if (propStatus.reason === 'computed' || propStatus.reason === 'keyframed') {
         return (jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) }));
     }
-    throw new Error(`Unsupported prop status: ${propStatus.reason}`);
 };
 exports.TimelineNonEditableStatus = TimelineNonEditableStatus;
 const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, effectiveValue, }) => {
@@ -49,6 +51,9 @@ const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propS
     if (field.typeName === 'translate') {
         return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineTranslateField_1.TimelineTranslateField, { field: field, effectiveValue: effectiveValue, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
     }
+    if (field.typeName === 'uv-coordinate') {
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineUvCoordinateField_1.TimelineUvCoordinateField, { field: field, effectiveValue: effectiveValue, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+    }
     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 }) }));
     }

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

@@ -0,0 +1,41 @@
+import React, { type CSSProperties } from 'react';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const TIMELINE_SELECTED_BACKGROUND = "#3B3F42";
+export declare const TIMELINE_SELECTED_LABEL_BACKGROUND = "#B0B0B0";
+export declare const TIMELINE_SELECTED_LABEL_TEXT = "black";
+export declare const TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = 2;
+export declare const getTimelineSelectedLabelStyle: (selected: boolean, subcategory: boolean) => CSSProperties;
+export declare const getTimelineColor: (selected: boolean, subcategory: boolean) => "black" | "rgba(255, 255, 255, 0.8)";
+export declare const TIMELINE_SELECTED_TRACK_HIGHLIGHT_STYLE: CSSProperties;
+export declare const SELECTION_ENABLED = false;
+export type TimelineSelection = {
+    readonly type: 'row';
+    readonly nodePathInfo: SequenceNodePathInfo;
+} | {
+    readonly type: 'keyframe';
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly frame: number;
+};
+type TimelineSelectionContextValue = {
+    readonly canSelect: boolean;
+    readonly isSelected: (item: TimelineSelection) => boolean;
+    readonly selectItem: (item: TimelineSelection) => void;
+    readonly containsSelection: (nodePathInfo: SequenceNodePathInfo) => boolean;
+    readonly clearSelection: () => void;
+};
+export declare const TimelineSelectionProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export declare const useTimelineSelection: () => TimelineSelectionContextValue;
+export declare const useTimelineRowSelection: (nodePathInfo: SequenceNodePathInfo | null) => {
+    onSelect: () => void;
+    selectable: boolean;
+    selected: boolean;
+};
+export declare const useTimelineKeyframeSelection: (nodePathInfo: SequenceNodePathInfo, frame: number) => {
+    onSelect: () => void;
+    selectable: boolean;
+    selected: boolean;
+};
+export declare const useTimelineRowContainsSelection: (nodePathInfo: SequenceNodePathInfo | null) => boolean;
+export {};