@remotion/studio 4.0.524 → 4.0.526

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -899,10 +899,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
             onMove,
             onEnd: (reason, endEvent) => {
                 stopPointerSessionRef.current = null;
-                if ((reason === 'pointerup' ||
-                    reason === 'buttons-released' ||
-                    (reason === 'lostpointercapture' && (endEvent === null || endEvent === void 0 ? void 0 : endEvent.buttons) === 0)) &&
-                    endEvent) {
+                if ((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     onUp(endEvent);
                 }
                 else if (endEvent) {
@@ -1122,10 +1119,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
             },
             onEnd: (reason, endEvent) => {
                 stopPointerSessionRef.current = null;
-                finishDrag((reason === 'pointerup' ||
-                    reason === 'buttons-released' ||
-                    (reason === 'lostpointercapture' && (endEvent === null || endEvent === void 0 ? void 0 : endEvent.buttons) === 0)) &&
-                    endEvent !== null);
+                finishDrag((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent));
             },
         });
     }, [
@@ -1325,10 +1319,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, mediaDurationD
             onMove,
             onEnd: (reason, endEvent) => {
                 stopPointerSessionRef.current = null;
-                if ((reason === 'pointerup' ||
-                    reason === 'buttons-released' ||
-                    (reason === 'lostpointercapture' && (endEvent === null || endEvent === void 0 ? void 0 : endEvent.buttons) === 0)) &&
-                    endEvent) {
+                if ((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     onUp(endEvent);
                 }
                 else if (endEvent) {

package/dist/components/Timeline/TimelineTranslateField.js

@@ -4,9 +4,9 @@ exports.TimelineTranslateField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
-const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const timeline_translate_utils_1 = require("./timeline-translate-utils");
+const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const leftDraggerStyle = {
     paddingLeft: 0,
@@ -21,11 +21,15 @@ const containerStyle = {
 const translateDragSensitivity = 3;
 const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
     var _a;
+    var _b, _c, _d, _e;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
     const [dragZ, setDragZ] = (0, react_1.useState)(null);
     const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
-    const [codeX, codeY, codeZ] = (0, react_1.useMemo)(() => (0, timeline_translate_utils_1.parseTranslate)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px')), [effectiveValue]);
+    const parsedTranslate = (0, react_1.useMemo)(() => (0, timeline_translate_utils_1.parseTranslateWithUnits)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px')), [effectiveValue]);
+    const codeX = (_b = parsedTranslate === null || parsedTranslate === void 0 ? void 0 : parsedTranslate[0].value) !== null && _b !== void 0 ? _b : 0;
+    const codeY = (_c = parsedTranslate === null || parsedTranslate === void 0 ? void 0 : parsedTranslate[1].value) !== null && _c !== void 0 ? _c : 0;
+    const codeZ = (_d = (_a = parsedTranslate === null || parsedTranslate === void 0 ? void 0 : parsedTranslate[2]) === null || _a === void 0 ? void 0 : _a.value) !== null && _d !== void 0 ? _d : null;
     const show3D = transform3DMode || (codeZ !== null && codeZ !== 0);
     const configuredStep = field.fieldSchema.type === 'translate' ? field.fieldSchema.step : undefined;
     const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
@@ -33,15 +37,21 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
         defaultDecimalPlaces: 1,
         step: configuredStep,
     }), [configuredStep]);
-    const formatter = (0, react_1.useCallback)((v) => {
-        return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
-            fieldSchema: field.fieldSchema,
-            value: v,
-        });
-    }, [field.fieldSchema]);
+    const formatCoordinate = (0, react_1.useCallback)((v, unit) => {
+        return `${(0, timeline_field_utils_1.formatTimelineNumber)({
+            decimalPlaces,
+            fixed: false,
+            value: (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(v)),
+        })}${unit}`;
+    }, [decimalPlaces]);
     const serialize = (0, react_1.useCallback)((x, y, z = dragZ !== null && dragZ !== void 0 ? dragZ : codeZ) => {
-        return (0, timeline_translate_utils_1.serializeTranslate)([x, y, z], decimalPlaces);
-    }, [codeZ, decimalPlaces, dragZ]);
+        var _a, _b;
+        return (0, timeline_translate_utils_1.serializeTranslateWithUnits)([
+            { value: x, unit: (_a = parsedTranslate === null || parsedTranslate === void 0 ? void 0 : parsedTranslate[0].unit) !== null && _a !== void 0 ? _a : 'px' },
+            { value: y, unit: (_b = parsedTranslate === null || parsedTranslate === void 0 ? void 0 : parsedTranslate[1].unit) !== null && _b !== void 0 ? _b : 'px' },
+            z === null ? null : { value: z, unit: 'px' },
+        ], decimalPlaces);
+    }, [codeZ, decimalPlaces, dragZ, parsedTranslate]);
     // --- X callbacks ---
     const onXChange = (0, react_1.useCallback)((newVal) => {
         setDragX(newVal);
@@ -135,9 +145,12 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
             }
         }
     }, [codeX, codeY, dragX, dragY, onSave, propStatus, serialize]);
+    if (parsedTranslate === null) {
+        return (jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "unsupported offset", formattedValue: false }));
+    }
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, buttonStyle: leftDraggerStyle, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity, "aria-label": "Offset X" }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, buttonStyle: rightDraggerStyle, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity, "aria-label": "Offset Y" }), show3D ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: (_a = dragZ !== null && dragZ !== void 0 ? dragZ : codeZ) !== null && _a !== void 0 ? _a : 0, buttonStyle: rightDraggerStyle, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onZChange, onValueChangeEnd: onZChangeEnd, onTextChange: onZTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity, "aria-label": "Offset Z" })
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, buttonStyle: leftDraggerStyle, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: (value) => formatCoordinate(value, parsedTranslate[0].unit), rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity, "aria-label": "Offset X" }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, buttonStyle: rightDraggerStyle, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: (value) => formatCoordinate(value, parsedTranslate[1].unit), rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity, "aria-label": "Offset Y" }), show3D ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: (_e = dragZ !== null && dragZ !== void 0 ? dragZ : codeZ) !== null && _e !== void 0 ? _e : 0, buttonStyle: rightDraggerStyle, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onZChange, onValueChangeEnd: onZChangeEnd, onTextChange: onZTextChange, min: -Infinity, max: Infinity, step: step, formatter: (value) => formatCoordinate(value, 'px'), rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity, "aria-label": "Offset Z" })
                 ] })) : null] }));
 };
 exports.TimelineTranslateField = TimelineTranslateField;

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

@@ -1,10 +1,10 @@
 import { type VirtualItem } from '@tanstack/react-virtual';
 import React from 'react';
-import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackWithDisplayGroup } from './timeline-display-groups';
 export type TimelineVirtualRow = {
     readonly afterDropLineOffset: number;
     readonly siblingIndex: number;
-    readonly track: TimelineTrackData;
+    readonly track: TimelineTrackWithDisplayGroup;
 };
 type TimelineVirtualizationContextValue = {
     readonly rows: readonly TimelineVirtualRow[];
@@ -16,7 +16,7 @@ export declare const TimelineVirtualizationProvider: React.FC<{
     readonly children: React.ReactNode;
     readonly hasBeenCut: boolean;
     readonly isStill: boolean;
-    readonly timeline: readonly TimelineTrackData[];
+    readonly timeline: readonly TimelineTrackWithDisplayGroup[];
 }>;
 export declare const useTimelineVirtualization: () => TimelineVirtualizationContextValue;
 export {};

package/dist/components/Timeline/TimelineZoomControls.js

@@ -124,7 +124,7 @@ const TimelineZoomControlsInner = ({ sliderMaxWidth }) => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Zoom out timeline", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "", "aria-label": "Zoom out timeline", type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color }) }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineZoomSlider, { maxWidth: sliderMaxWidth, minZoom: minZoom, timelineViewportWidth: timelineViewportWidth }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Zoom in timeline", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "", "aria-label": "Zoom in timeline", type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color }) }) })
+            jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Zoom out", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "", "aria-label": "Zoom out timeline", type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color }) }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineZoomSlider, { maxWidth: sliderMaxWidth, minZoom: minZoom, timelineViewportWidth: timelineViewportWidth }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Zoom in", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "", "aria-label": "Zoom in timeline", type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color }) }) })
         ] }));
 };
 exports.TimelineZoomControls = react_1.default.memo(TimelineZoomControlsInner);

package/dist/components/Timeline/get-sequence-context-menu-items.d.ts

@@ -2,15 +2,17 @@ import type { EditorPickerId, GetDefaultCodingAgentInfoResponse, GetDefaultEdito
 import type { ResolvedStackLocation, TSequence } from 'remotion';
 import type { ComboboxValue } from '../NewComposition/ComboBox';
 import type { TimelineAssetLinkInfo } from './timeline-asset-link';
+export declare const findCopyableFrameElement: (element: Element | null) => Element | null;
 export declare const getMultiSequenceContextMenuItems: ({ deleteDisabled, duplicateDisabled, onDeleteSelectedSequences, onDuplicateSelectedSequences, }: {
     readonly deleteDisabled: boolean;
     readonly duplicateDisabled: boolean;
     readonly onDeleteSelectedSequences: () => void;
     readonly onDuplicateSelectedSequences: () => void;
 }) => ComboboxValue[];
-export declare const getSequenceContextMenuItems: ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, isProgrammaticallyDuplicated, includeSourceEditItems, codingAgentInfo, editorInfo, onConfigureApps, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInCodingAgent, openInEditor, originalLocation, selectAsset, sequence, sourceActions, }: {
+export declare const getSequenceContextMenuItems: ({ assetLinkInfo, canOpenInEditor, copyImageElement, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, isProgrammaticallyDuplicated, includeSourceEditItems, codingAgentInfo, editorInfo, onConfigureApps, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInCodingAgent, openInEditor, originalLocation, selectAsset, sequence, sourceActions, }: {
     readonly assetLinkInfo: TimelineAssetLinkInfo | null;
     readonly canOpenInEditor: boolean;
+    readonly copyImageElement: Element | null;
     readonly deleteDisabled: boolean;
     readonly disableInteractivityDisabled: boolean;
     readonly duplicateDisabled: boolean;

package/dist/components/Timeline/get-sequence-context-menu-items.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSequenceContextMenuItems = exports.getMultiSequenceContextMenuItems = void 0;
+exports.getSequenceContextMenuItems = exports.getMultiSequenceContextMenuItems = exports.findCopyableFrameElement = void 0;
 const no_react_1 = require("remotion/no-react");
 const format_file_location_1 = require("../../helpers/format-file-location");
+const get_git_menu_item_1 = require("../../helpers/get-git-menu-item");
 const get_open_in_menu_items_1 = require("../get-open-in-menu-items");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("../RenderQueue/actions");
@@ -27,6 +28,74 @@ const normalizeMenuDividers = (items) => {
     return normalized;
 };
 const interactiveSvgComponentIdentity = 'dev.remotion.remotion.Interactive.Svg';
+const findCopyableFrameElement = (element) => {
+    var _a;
+    if ((element === null || element === void 0 ? void 0 : element.tagName) === 'CANVAS' || (element === null || element === void 0 ? void 0 : element.tagName) === 'VIDEO') {
+        return element;
+    }
+    return (_a = element === null || element === void 0 ? void 0 : element.querySelector('canvas, video')) !== null && _a !== void 0 ? _a : null;
+};
+exports.findCopyableFrameElement = findCopyableFrameElement;
+const copyImageToClipboard = async (element) => {
+    let canvas;
+    if (element.tagName === 'CANVAS') {
+        const sourceCanvas = element;
+        canvas = document.createElement('canvas');
+        canvas.width = sourceCanvas.width;
+        canvas.height = sourceCanvas.height;
+        const context = canvas.getContext('2d');
+        if (!context) {
+            throw new Error('Could not create canvas context');
+        }
+        context.drawImage(sourceCanvas, 0, 0);
+    }
+    else if (element.tagName === 'IMG') {
+        const image = element;
+        if (image.naturalWidth === 0 || image.naturalHeight === 0) {
+            throw new Error('Image has not loaded');
+        }
+        canvas = document.createElement('canvas');
+        canvas.width = image.naturalWidth;
+        canvas.height = image.naturalHeight;
+        const context = canvas.getContext('2d');
+        if (!context) {
+            throw new Error('Could not create canvas context');
+        }
+        context.drawImage(image, 0, 0);
+    }
+    else if (element.tagName === 'VIDEO') {
+        const video = element;
+        if (video.videoWidth === 0 || video.videoHeight === 0) {
+            throw new Error('Video frame has not loaded');
+        }
+        canvas = document.createElement('canvas');
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const context = canvas.getContext('2d');
+        if (!context) {
+            throw new Error('Could not create canvas context');
+        }
+        context.drawImage(video, 0, 0);
+    }
+    else {
+        throw new Error('Expected an image, video, or canvas element');
+    }
+    const blob = new Promise((resolve, reject) => {
+        canvas.toBlob((result) => {
+            if (result) {
+                resolve(result);
+            }
+            else {
+                reject(new Error('Could not convert image to PNG'));
+            }
+        }, 'image/png');
+    });
+    await navigator.clipboard.write([
+        new ClipboardItem({
+            'image/png': blob,
+        }),
+    ]);
+};
 const getMultiSequenceContextMenuItems = ({ deleteDisabled, duplicateDisabled, onDeleteSelectedSequences, onDuplicateSelectedSequences, }) => {
     return [
         {
@@ -60,15 +129,20 @@ const getMultiSequenceContextMenuItems = ({ deleteDisabled, duplicateDisabled, o
     ];
 };
 exports.getMultiSequenceContextMenuItems = getMultiSequenceContextMenuItems;
-const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, isProgrammaticallyDuplicated, includeSourceEditItems, codingAgentInfo, editorInfo, onConfigureApps, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInCodingAgent, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
+const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, copyImageElement, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, isProgrammaticallyDuplicated, includeSourceEditItems, codingAgentInfo, editorInfo, onConfigureApps, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInCodingAgent, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
     var _a, _b, _c;
-    var _d, _e, _f;
+    var _d, _e;
     const isInteractiveSvg = ((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) === interactiveSvgComponentIdentity;
     const installedEditors = (_d = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _d !== void 0 ? _d : [];
     const defaultEditorId = (0, use_default_editor_info_1.getPreferredEditorId)(editorInfo);
     const defaultEditor = installedEditors.find((editor) => editor.id === defaultEditorId);
     const editorName = (_e = defaultEditor === null || defaultEditor === void 0 ? void 0 : defaultEditor.nameWithType) !== null && _e !== void 0 ? _e : null;
-    const defaultCodingAgent = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.find((codingAgent) => codingAgent.id === codingAgentInfo.defaultCodingAgent);
+    const defaultOpenInTarget = (0, get_git_menu_item_1.getDefaultOpenInTarget)({ canOpenInEditor });
+    const gitSourceName = window.remotion_gitSource
+        ? (0, get_git_menu_item_1.getGitSourceName)(window.remotion_gitSource)
+        : null;
+    const defaultOpenInName = defaultOpenInTarget === 'editor' ? editorName : gitSourceName;
+    const copyImageLabel = copyImageElement && sequence.type === 'image' ? 'Copy image' : 'Copy frame';
     const contextForAgents = (0, format_file_location_1.formatContextForAgents)({
         location: originalLocation,
         name: sequence.displayName || ((_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.componentName) || null,
@@ -77,61 +151,60 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
     const openInCodingAgentWithContext = (codingAgentId, codingAgentName) => {
         openInCodingAgent(codingAgentId, codingAgentName, codingAgentId === 'copilot' ? null : contextForAgents);
     };
-    const openInMenuItems = onConfigureApps
-        ? (0, get_open_in_menu_items_1.getOpenInMenuItems)({
-            codingAgentInfo,
-            editorDisabled: !canOpenInEditor || !originalLocation,
-            editorInfo,
-            excludeCodingAgentId: (_f = defaultCodingAgent === null || defaultCodingAgent === void 0 ? void 0 : defaultCodingAgent.id) !== null && _f !== void 0 ? _f : null,
-            excludeEditorId: defaultEditorId,
-            fileManagerDisabled: !(originalLocation === null || originalLocation === void 0 ? void 0 : originalLocation.source),
-            folder: false,
-            location: originalLocation,
-            onConfigureApps,
-            onOpenInCodingAgent: openInCodingAgentWithContext,
-            onOpenInEditor: openInEditor,
-            onOpenInFileExplorer: () => {
-                if (!(originalLocation === null || originalLocation === void 0 ? void 0 : originalLocation.source)) {
-                    return;
-                }
-                (0, actions_1.openInFileExplorer)({ directory: originalLocation.source }).catch((err) => {
-                    (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
-                });
-            },
-            onOpenInGitClient: () => undefined,
-            onOpenInTerminal: null,
-        })
-        : [];
-    const items = [
-        editorName
-            ? {
-                type: 'item',
-                id: 'open-in-editor',
-                keyHint: null,
-                label: `Open in ${editorName}`,
-                leftItem: null,
-                disabled: !canOpenInEditor || !originalLocation,
-                onClick: () => openInEditor(null),
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: 'open-in-editor',
+    const openInMenuItems = (0, get_open_in_menu_items_1.getOpenInMenuItems)({
+        canOpenDesktopApps: onConfigureApps !== null,
+        codingAgentInfo,
+        editorDisabled: !canOpenInEditor || !originalLocation,
+        editorInfo,
+        excludeCodingAgentId: null,
+        excludeEditorId: defaultEditorId,
+        excludeGitSource: defaultOpenInTarget === 'git-source',
+        fileManagerDisabled: !(originalLocation === null || originalLocation === void 0 ? void 0 : originalLocation.source),
+        folder: false,
+        gitSourceDisabled: !originalLocation,
+        onConfigureApps,
+        onOpenInCodingAgent: openInCodingAgentWithContext,
+        onOpenInEditor: openInEditor,
+        onOpenInFileExplorer: () => {
+            if (!(originalLocation === null || originalLocation === void 0 ? void 0 : originalLocation.source)) {
+                return;
             }
-            : null,
-        defaultCodingAgent
+            (0, actions_1.openInFileExplorer)({ directory: originalLocation.source }).catch((err) => {
+                (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
+            });
+        },
+        onOpenInGitClient: () => undefined,
+        onOpenInGitSource: () => {
+            (0, get_git_menu_item_1.openGitSource)({ folder: false, location: originalLocation });
+        },
+        onOpenInTerminal: null,
+    });
+    const items = [
+        defaultOpenInTarget && defaultOpenInName
             ? {
                 type: 'item',
-                id: 'open-in-default-coding-agent',
+                id: defaultOpenInTarget === 'editor'
+                    ? 'open-in-editor'
+                    : 'open-in-git-source',
                 keyHint: null,
-                label: `Open in ${defaultCodingAgent.nameWithType}`,
+                label: `Open in ${defaultOpenInName}`,
                 leftItem: null,
-                disabled: false,
-                onClick: () => openInCodingAgentWithContext(defaultCodingAgent.id, defaultCodingAgent.nameWithType),
+                disabled: !originalLocation,
+                onClick: () => {
+                    if (defaultOpenInTarget === 'editor') {
+                        openInEditor(null);
+                        return;
+                    }
+                    (0, get_git_menu_item_1.openGitSource)({ folder: false, location: originalLocation });
+                },
                 quickSwitcherLabel: null,
                 subMenu: null,
-                value: 'open-in-default-coding-agent',
+                value: defaultOpenInTarget === 'editor'
+                    ? 'open-in-editor'
+                    : 'open-in-git-source',
             }
             : null,
-        onConfigureApps
+        openInMenuItems.length > 0
             ? {
                 type: 'item',
                 id: 'open-in-another-app',
@@ -166,7 +239,35 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                 value: 'show-asset',
             }
             : null,
-        assetLinkInfo
+        copyImageElement
+            ? {
+                type: 'divider',
+                id: 'copy-image-divider',
+            }
+            : null,
+        copyImageElement
+            ? {
+                type: 'item',
+                id: copyImageLabel === 'Copy image' ? 'copy-image' : 'copy-frame',
+                keyHint: null,
+                label: copyImageLabel,
+                leftItem: null,
+                disabled: false,
+                onClick: () => {
+                    copyImageToClipboard(copyImageElement)
+                        .then(() => {
+                        (0, NotificationCenter_1.showNotification)(`Copied ${copyImageLabel === 'Copy image' ? 'image' : 'frame'} to clipboard`, 1000);
+                    })
+                        .catch((err) => {
+                        (0, NotificationCenter_1.showNotification)(`Could not copy ${copyImageLabel === 'Copy image' ? 'image' : 'frame'}: ${err.message}`, 2000);
+                    });
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: copyImageLabel === 'Copy image' ? 'copy-image' : 'copy-frame',
+            }
+            : null,
+        assetLinkInfo || copyImageElement
             ? {
                 type: 'divider',
                 id: 'sequence-link-divider',

package/dist/components/Timeline/normalize-font-weight-for-keyframe.d.ts

@@ -0,0 +1 @@
+export declare const normalizeFontWeightForKeyframe: (value: unknown) => number | null;

package/dist/components/Timeline/normalize-font-weight-for-keyframe.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeFontWeightForKeyframe = void 0;
+const normalizeFontWeightForKeyframe = (value) => {
+    if (value === 'normal') {
+        return 400;
+    }
+    if (value === 'bold') {
+        return 700;
+    }
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? value : null;
+    }
+    if (typeof value === 'string' && /^\d+(?:\.\d+)?$/.test(value)) {
+        return Number(value);
+    }
+    return null;
+};
+exports.normalizeFontWeightForKeyframe = normalizeFontWeightForKeyframe;

package/dist/components/Timeline/timeline-display-groups.d.ts

@@ -0,0 +1,9 @@
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
+export type TimelineDisplayGroup = {
+    readonly key: string;
+    readonly numberOfSequences: number;
+};
+export type TimelineTrackWithDisplayGroup = TimelineTrackData & {
+    readonly displayGroup: TimelineDisplayGroup | null;
+};
+export declare const addTimelineDisplayGroups: (tracks: readonly TimelineTrackData[]) => TimelineTrackWithDisplayGroup[];

package/dist/components/Timeline/timeline-display-groups.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addTimelineDisplayGroups = void 0;
+const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const addTimelineDisplayGroups = (tracks) => {
+    var _a, _b;
+    const stacksBySequenceId = new Map();
+    const resolvedNodePathKeysByStack = new Map();
+    for (const track of tracks) {
+        // Only controlled sequences can eventually resolve to a source node.
+        const stack = track.sequence.controls === null ? null : track.sequence.getStack();
+        stacksBySequenceId.set(track.sequence.id, stack);
+        if (stack === null || track.nodePathInfo === null) {
+            continue;
+        }
+        const nodePathKey = `node-path:${(0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey)}`;
+        const nodePathKeys = (_a = resolvedNodePathKeysByStack.get(stack)) !== null && _a !== void 0 ? _a : new Set();
+        nodePathKeys.add(nodePathKey);
+        resolvedNodePathKeysByStack.set(stack, nodePathKeys);
+    }
+    const displayKeys = tracks.map((track) => {
+        var _a;
+        if (track.nodePathInfo !== null) {
+            return `node-path:${(0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey)}`;
+        }
+        const stack = (_a = stacksBySequenceId.get(track.sequence.id)) !== null && _a !== void 0 ? _a : null;
+        if (stack === null) {
+            return null;
+        }
+        const resolvedNodePathKeys = resolvedNodePathKeysByStack.get(stack);
+        if ((resolvedNodePathKeys === null || resolvedNodePathKeys === void 0 ? void 0 : resolvedNodePathKeys.size) === 1) {
+            const resolvedNodePathKey = resolvedNodePathKeys.values().next().value;
+            if (resolvedNodePathKey === undefined) {
+                throw new Error('Expected a resolved timeline node path key');
+            }
+            return resolvedNodePathKey;
+        }
+        // This identity is display-only. Source operations continue to require
+        // track.nodePathInfo.
+        return `stack:${stack}`;
+    });
+    const counts = new Map();
+    for (const key of displayKeys) {
+        if (key !== null) {
+            counts.set(key, ((_b = counts.get(key)) !== null && _b !== void 0 ? _b : 0) + 1);
+        }
+    }
+    return tracks.map((track, index) => {
+        const key = displayKeys[index];
+        if (key === null) {
+            return { ...track, displayGroup: null };
+        }
+        const numberOfSequences = counts.get(key);
+        if (numberOfSequences === undefined) {
+            throw new Error('Expected a timeline display group count');
+        }
+        return {
+            ...track,
+            displayGroup: {
+                key,
+                numberOfSequences,
+            },
+        };
+    });
+};
+exports.addTimelineDisplayGroups = addTimelineDisplayGroups;

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

@@ -153,8 +153,10 @@ const formatTranslateTimelineFieldValueForDisplay = ({ fieldSchema, value, }) =>
     if (numericValue !== null) {
         return formatTranslateCoordinateForDisplay(numericValue, decimalPlaces);
     }
-    const translate = (0, timeline_translate_utils_1.parseTranslate)(String(value !== null && value !== void 0 ? value : '0px 0px'));
-    return (0, timeline_translate_utils_1.serializeTranslate)(translate, decimalPlaces);
+    const translate = (0, timeline_translate_utils_1.parseTranslateWithUnits)(String(value !== null && value !== void 0 ? value : '0px 0px'));
+    return translate === null
+        ? null
+        : (0, timeline_translate_utils_1.serializeTranslateWithUnits)(translate, decimalPlaces);
 };
 const formatTransformOriginAxisValueForDisplay = ({ decimalPlaces, unit, value, }) => {
     return `${(0, timeline_field_utils_1.formatTimelineNumber)({

package/dist/components/Timeline/timeline-translate-utils.d.ts

@@ -1,3 +1,20 @@
 export type ParsedTranslate = readonly [number, number, number | null];
+export type TranslateUnit = 'px' | '%';
+export type ParsedTranslateWithUnits = readonly [
+    {
+        readonly value: number;
+        readonly unit: TranslateUnit;
+    },
+    {
+        readonly value: number;
+        readonly unit: TranslateUnit;
+    },
+    {
+        readonly value: number;
+        readonly unit: 'px';
+    } | null
+];
+export declare const parseTranslateWithUnits: (value: string) => ParsedTranslateWithUnits | null;
 export declare const parseTranslate: (value: string) => ParsedTranslate;
 export declare const serializeTranslate: ([x, y, z]: ParsedTranslate, decimalPlaces?: number) => string;
+export declare const serializeTranslateWithUnits: ([x, y, z]: ParsedTranslateWithUnits, decimalPlaces?: number) => string;

package/dist/components/Timeline/timeline-translate-utils.js

@@ -1,20 +1,53 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.serializeTranslate = exports.parseTranslate = void 0;
+exports.serializeTranslateWithUnits = exports.serializeTranslate = exports.parseTranslate = exports.parseTranslateWithUnits = void 0;
 const timeline_field_utils_1 = require("./timeline-field-utils");
-const PIXEL_PATTERN = /^(-?\d+(?:\.\d+)?)px(?:\s+(-?\d+(?:\.\d+)?)px)?(?:\s+(-?\d+(?:\.\d+)?)px)?$/;
+const TRANSLATE_PATTERN = /^(-?\d+(?:\.\d+)?)(px|%)?(?:\s+(-?\d+(?:\.\d+)?)(px|%)?)?(?:\s+(-?\d+(?:\.\d+)?)(px)?)?$/i;
 const translateDecimalPlaces = 1;
-const parseTranslate = (value) => {
-    const m = value.match(PIXEL_PATTERN);
-    if (!m) {
-        return [0, 0, null];
+const parseTranslateWithUnits = (value) => {
+    const match = value.match(TRANSLATE_PATTERN);
+    if (!match) {
+        return null;
+    }
+    const x = (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(match[1]));
+    const y = match[3] === undefined ? 0 : (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(match[3]));
+    const z = match[5] === undefined ? null : (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(match[5]));
+    if ((match[2] === undefined && x !== 0) ||
+        (match[3] !== undefined && match[4] === undefined && y !== 0) ||
+        (match[5] !== undefined && match[6] === undefined && z !== 0)) {
+        return null;
     }
     return [
-        (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(m[1])),
-        m[2] !== undefined ? (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(m[2])) : 0,
-        m[3] !== undefined ? (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(m[3])) : null,
+        {
+            value: x,
+            unit: match[2] === undefined
+                ? 'px'
+                : match[2].toLowerCase(),
+        },
+        {
+            value: y,
+            unit: match[4] === undefined
+                ? 'px'
+                : match[4].toLowerCase(),
+        },
+        z === null
+            ? z
+            : {
+                value: z,
+                unit: 'px',
+            },
     ];
 };
+exports.parseTranslateWithUnits = parseTranslateWithUnits;
+const parseTranslate = (value) => {
+    var _a;
+    var _b;
+    const parsed = (0, exports.parseTranslateWithUnits)(value);
+    if (parsed === null || parsed[0].unit !== 'px' || parsed[1].unit !== 'px') {
+        return [0, 0, null];
+    }
+    return [parsed[0].value, parsed[1].value, (_b = (_a = parsed[2]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null];
+};
 exports.parseTranslate = parseTranslate;
 const formatTranslateCoordinate = (value, decimalPlaces) => {
     const normalized = (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
@@ -22,9 +55,17 @@ const formatTranslateCoordinate = (value, decimalPlaces) => {
     return String(Object.is(rounded, -0) ? 0 : rounded);
 };
 const serializeTranslate = ([x, y, z], decimalPlaces = translateDecimalPlaces) => {
-    const xy = `${formatTranslateCoordinate(x, decimalPlaces)}px ${formatTranslateCoordinate(y, decimalPlaces)}px`;
+    return (0, exports.serializeTranslateWithUnits)([
+        { value: x, unit: 'px' },
+        { value: y, unit: 'px' },
+        z === null ? null : { value: z, unit: 'px' },
+    ], decimalPlaces);
+};
+exports.serializeTranslate = serializeTranslate;
+const serializeTranslateWithUnits = ([x, y, z], decimalPlaces = translateDecimalPlaces) => {
+    const xy = `${formatTranslateCoordinate(x.value, decimalPlaces)}${x.unit} ${formatTranslateCoordinate(y.value, decimalPlaces)}${y.unit}`;
     return z === null
         ? xy
-        : `${xy} ${formatTranslateCoordinate(z, decimalPlaces)}px`;
+        : `${xy} ${formatTranslateCoordinate(z.value, decimalPlaces)}${z.unit}`;
 };
-exports.serializeTranslate = serializeTranslate;
+exports.serializeTranslateWithUnits = serializeTranslateWithUnits;