@remotion/studio 4.0.524 → 4.0.525

package/dist/components/Timeline/TimelineSelection.js

@@ -209,6 +209,7 @@ const extendTimelineMarqueeSelection = ({ currentSelection, marqueeSelection, })
 exports.extendTimelineMarqueeSelection = extendTimelineMarqueeSelection;
 const defaultTimelineSelectionContextValue = {
     canSelect: false,
+    inspectorRevealRequest: null,
     revealRequest: null,
     selectedItems: [],
     isSelected: () => false,
@@ -542,9 +543,12 @@ const TimelineSelectionProvider = ({ children }) => {
     const marqueeSelectableItems = (0, react_1.useRef)(new Map());
     const marqueeRegistrationCounter = (0, react_1.useRef)(0);
     const [revealRequest, setRevealRequest] = (0, react_1.useState)(null);
+    const [inspectorRevealRequest, setInspectorRevealRequest] = (0, react_1.useState)(null);
+    const inspectorRevealTokenCounter = (0, react_1.useRef)(0);
     (0, react_1.useEffect)(() => {
         if (!canSelect) {
             selectionScope.current = null;
+            setInspectorRevealRequest(null);
             setRevealRequest(null);
             selectionController.clear();
         }
@@ -566,6 +570,13 @@ const TimelineSelectionProvider = ({ children }) => {
             });
         });
     }, []);
+    const requestRevealSelectionItemInInspector = (0, react_1.useCallback)((item) => {
+        inspectorRevealTokenCounter.current += 1;
+        setInspectorRevealRequest({
+            item,
+            token: inspectorRevealTokenCounter.current,
+        });
+    }, []);
     const expandParentsForSelectionItems = (0, react_1.useCallback)((items) => {
         for (const item of items) {
             if (item.type === 'guide') {
@@ -603,6 +614,12 @@ const TimelineSelectionProvider = ({ children }) => {
         if (options.reveal) {
             requestRevealSelectionItem(item);
         }
+        if (options.revealInInspector) {
+            requestRevealSelectionItemInInspector(item);
+        }
+        else {
+            setInspectorRevealRequest(null);
+        }
         if (selectionScope.current !== timelineSelectionScope) {
             selectionController.clear();
         }
@@ -611,6 +628,7 @@ const TimelineSelectionProvider = ({ children }) => {
     }, [
         canSelectItem,
         expandParentsForSelectionItem,
+        requestRevealSelectionItemInInspector,
         requestRevealSelectionItem,
         selectionController,
         timelineSelectionScope,
@@ -627,10 +645,17 @@ const TimelineSelectionProvider = ({ children }) => {
         if (options.reveal && items.length === 1) {
             requestRevealSelectionItem(items[0]);
         }
+        if (options.revealInInspector && items.length === 1) {
+            requestRevealSelectionItemInInspector(items[0]);
+        }
+        else {
+            setInspectorRevealRequest(null);
+        }
         selectionController.setSelectedItems(items);
     }, [
         canSelectItem,
         expandParentsForSelectionItems,
+        requestRevealSelectionItemInInspector,
         requestRevealSelectionItem,
         selectionController,
         timelineSelectionScope,
@@ -679,6 +704,7 @@ const TimelineSelectionProvider = ({ children }) => {
     }, [canSelectItem]);
     const clearSelection = (0, react_1.useCallback)(() => {
         selectionScope.current = null;
+        setInspectorRevealRequest(null);
         selectionController.clear();
     }, [selectionController]);
     const containsSelection = (0, react_1.useCallback)((nodePathInfo) => {
@@ -737,6 +763,7 @@ const TimelineSelectionProvider = ({ children }) => {
     }, [selectionController]);
     const value = (0, react_1.useMemo)(() => ({
         canSelect,
+        inspectorRevealRequest,
         revealRequest,
         selectedItems: availableSelectedItems,
         isSelected,
@@ -749,6 +776,7 @@ const TimelineSelectionProvider = ({ children }) => {
         clearSelection,
     }), [
         canSelect,
+        inspectorRevealRequest,
         revealRequest,
         availableSelectedItems,
         isSelected,
@@ -929,8 +957,7 @@ const useTimelineMarqueeSelection = () => {
             captureTarget: target,
             onMove: onPointerMove,
             onEnd: (reason, endEvent) => {
-                if ((reason === 'pointerup' || reason === 'buttons-released') &&
-                    endEvent) {
+                if ((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     updateSelection(endEvent.clientX, endEvent.clientY);
                 }
                 cleanup();
@@ -960,7 +987,7 @@ const useTimelineMarqueeSelectableItem = (item, ref) => {
     }, [item, ref, registerMarqueeSelectableItem]);
 };
 exports.useTimelineMarqueeSelectableItem = useTimelineMarqueeSelectableItem;
-const useTimelineRowSelection = (nodePathInfo) => {
+const useTimelineRowSelection = (nodePathInfo, revealInInspector = false) => {
     const { canSelect, isSelected, selectItem } = (0, exports.useTimelineSelection)();
     const selectableTimelineItemsRef = (0, react_1.useContext)(SelectableTimelineItemsContext);
     const selectionItem = (0, react_1.useMemo)(() => (0, exports.getTimelineSelectionFromNodePathInfo)(nodePathInfo), [nodePathInfo]);
@@ -969,8 +996,8 @@ const useTimelineRowSelection = (nodePathInfo) => {
         if (selectionItem === null) {
             return;
         }
-        selectItem(selectionItem, interaction, selectableTimelineItemsRef.current);
-    }, [selectItem, selectableTimelineItemsRef, selectionItem]);
+        selectItem(selectionItem, interaction, selectableTimelineItemsRef.current, { revealInInspector });
+    }, [revealInInspector, selectItem, selectableTimelineItemsRef, selectionItem]);
     return {
         onSelect,
         selectable: canSelect && selectionItem !== null,

package/dist/components/Timeline/TimelineSequence.js

@@ -263,7 +263,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         ? Infinity
         : naturalMediaDuration;
     const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
-    const { canOpenInEditor, canConfigureApps, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(s);
+    const { canConfigureApps, canOpenInEditor, canOpenSource, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, openSource, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(s);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -321,7 +321,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         }
         const action = (0, get_sequence_double_click_action_1.getSequenceDoubleClickAction)({
             button: e.button,
-            canOpenInEditor,
+            canOpenSource,
             numberOfConnectedCompositions: connectedCompositions.length,
             sequenceWasDragged: dragAwareDoubleClick.consumePointerGestureWasDragged(),
         });
@@ -338,12 +338,12 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             }));
             return;
         }
-        openInEditor(null);
+        openSource();
     }, [
-        canOpenInEditor,
+        canOpenSource,
         connectedCompositions,
         dragAwareDoubleClick,
-        openInEditor,
+        openSource,
         s,
         selectComposition,
         sequenceFrameOffset,
@@ -354,7 +354,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         }
         performSequenceDoubleClick(e);
     }, [dragAwareDoubleClick, performSequenceDoubleClick]);
-    const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenInEditor;
+    const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenSource;
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const deleteDisabled = !previewInteractive || !s.controls || !canDeleteFromSource;
     const isProgrammaticallyDuplicated = ((_h = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _h !== void 0 ? _h : 1) > 1;

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -204,7 +204,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     const sequenceReorderWrapperRef = (0, react_1.useRef)(null);
     const stopSequencePointerSession = (0, react_1.useRef)(null);
     const suppressNextClick = (0, react_1.useRef)(false);
-    const { canOpenInEditor, canConfigureApps, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(sequence);
+    const { canConfigureApps, canOpenInEditor, canOpenSource, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, openSource, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(sequence);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -477,10 +477,10 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 updateDropTarget(currentClientY);
             },
         });
-        stopSequencePointerSession.current = (0, pointer_session_1.startCapturedPointerSession)({
+        stopSequencePointerSession.current = (0, pointer_session_1.startDeferredCapturedPointerSession)({
             captureTarget: sourceElement,
             event: e.nativeEvent,
-            onMove: (pointerEvent) => {
+            onMove: (pointerEvent, capturePointer) => {
                 currentClientY = pointerEvent.clientY;
                 if (!didDrag &&
                     Math.hypot(pointerEvent.clientX - startX, pointerEvent.clientY - startY) < SEQUENCE_REORDER_POINTER_THRESHOLD) {
@@ -488,6 +488,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 }
                 if (!didDrag) {
                     didDrag = true;
+                    capturePointer();
                     previousUserSelect = document.body.style.userSelect;
                     previousWebkitUserSelect = document.body.style.webkitUserSelect;
                     document.body.style.userSelect = 'none';
@@ -515,7 +516,8 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 autoScroll.update({ clientX: startX, clientY: pointerEvent.clientY });
             },
             onEnd: (reason, pointerEvent) => {
-                if (reason === 'pointerup' && pointerEvent && didDrag) {
+                const released = (0, pointer_session_1.isPointerSessionRelease)(reason, pointerEvent);
+                if (released && didDrag) {
                     updateDropTarget(pointerEvent.clientY);
                 }
                 autoScroll.stop();
@@ -531,7 +533,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 setTimeout(() => {
                     suppressNextClick.current = false;
                 }, 0);
-                if (reason === 'pointerup' && pointerEvent && activeDrop) {
+                if (released && activeDrop) {
                     activeDropTarget === null || activeDropTarget === void 0 ? void 0 : activeDropTarget.reorder(activeDrop);
                 }
             },
@@ -646,7 +648,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         }
         const action = (0, get_sequence_double_click_action_1.getSequenceDoubleClickAction)({
             button: e.button,
-            canOpenInEditor,
+            canOpenSource,
             numberOfConnectedCompositions: connectedCompositions.length,
             // The track list row reorders via native drag-and-drop, which
             // already suppresses `dblclick` after a drag.
@@ -665,16 +667,16 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
             }));
             return;
         }
-        openInEditor(null);
+        openSource();
     }, [
-        canOpenInEditor,
+        canOpenSource,
         connectedCompositions,
-        openInEditor,
+        openSource,
         selectComposition,
         sequence,
         sequenceFrameOffset,
     ]);
-    const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenInEditor;
+    const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenSource;
     const canRenameSelectedSequence = canRenameThisSequence &&
         selected &&
         selectedItems.length === 1 &&

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/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.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSequenceContextMenuItems = exports.getMultiSequenceContextMenuItems = 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");
@@ -68,6 +69,11 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
     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 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 defaultCodingAgent = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.find((codingAgent) => codingAgent.id === codingAgentInfo.defaultCodingAgent);
     const contextForAgents = (0, format_file_location_1.formatContextForAgents)({
         location: originalLocation,
@@ -103,18 +109,28 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
         })
         : [];
     const items = [
-        editorName
+        defaultOpenInTarget && defaultOpenInName
             ? {
                 type: 'item',
-                id: 'open-in-editor',
+                id: defaultOpenInTarget === 'editor'
+                    ? 'open-in-editor'
+                    : 'open-in-git-source',
                 keyHint: null,
-                label: `Open in ${editorName}`,
+                label: `Open in ${defaultOpenInName}`,
                 leftItem: null,
-                disabled: !canOpenInEditor || !originalLocation,
-                onClick: () => openInEditor(null),
+                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-editor',
+                value: defaultOpenInTarget === 'editor'
+                    ? 'open-in-editor'
+                    : 'open-in-git-source',
             }
             : null,
         defaultCodingAgent

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;

package/dist/components/Timeline/use-open-sequence-in-apps.d.ts

@@ -1,11 +1,13 @@
 import type { EditorPickerId } from '@remotion/studio-shared';
 import type { TSequence } from 'remotion';
 export declare const useOpenSequenceInApps: (sequence: TSequence) => {
+    canOpenSource: boolean;
     canOpenInEditor: boolean;
     canConfigureApps: boolean;
     codingAgentInfo: import("@remotion/studio-shared").GetDefaultCodingAgentInfoResponse | null;
     editorInfo: import("@remotion/studio-shared").GetDefaultEditorInfoResponse | null;
     openInCodingAgent: (codingAgentId: "claude-code" | "codex" | "copilot" | "cursor", codingAgentName: string, contextForAgents: string | null) => Promise<void>;
     openInEditor: (editorId: EditorPickerId | null) => Promise<void>;
+    openSource: () => void;
     originalLocation: import("remotion").ResolvedStackLocation | null;
 };

package/dist/components/Timeline/use-open-sequence-in-apps.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOpenSequenceInApps = void 0;
 const react_1 = require("react");
 const client_id_1 = require("../../helpers/client-id");
+const get_git_menu_item_1 = require("../../helpers/get-git-menu-item");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const use_default_editor_info_1 = require("../use-default-editor-info");
@@ -16,6 +17,8 @@ const useOpenSequenceInApps = (sequence) => {
     const { canConfigureApps, canOpenInEditor: editorAvailable, defaultEditorId, editorInfo, } = (0, use_default_editor_info_1.useEditorOpening)(previewConnected);
     const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(canConfigureApps);
     const canOpenInEditor = (0, react_1.useMemo)(() => Boolean(editorAvailable && originalLocation), [editorAvailable, originalLocation]);
+    const defaultOpenInTarget = (0, get_git_menu_item_1.getDefaultOpenInTarget)({ canOpenInEditor });
+    const canOpenSource = defaultOpenInTarget !== null && originalLocation !== null;
     const openInEditor = (0, react_1.useCallback)(async (editorId) => {
         const resolvedEditorId = editorId !== null && editorId !== void 0 ? editorId : defaultEditorId;
         if (!canOpenInEditor || !originalLocation || !resolvedEditorId) {
@@ -28,6 +31,18 @@ const useOpenSequenceInApps = (sequence) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         }
     }, [canOpenInEditor, defaultEditorId, originalLocation]);
+    const openSource = (0, react_1.useCallback)(() => {
+        if (!originalLocation) {
+            return;
+        }
+        if (defaultOpenInTarget === 'editor') {
+            openInEditor(null);
+            return;
+        }
+        if (defaultOpenInTarget === 'git-source') {
+            (0, get_git_menu_item_1.openGitSource)({ folder: false, location: originalLocation });
+        }
+    }, [defaultOpenInTarget, openInEditor, originalLocation]);
     const openInCodingAgent = (0, react_1.useCallback)(async (codingAgentId, codingAgentName, contextForAgents) => {
         try {
             const response = await (0, open_in_editor_1.openInCodingAgent)(codingAgentId, contextForAgents);
@@ -40,12 +55,14 @@ const useOpenSequenceInApps = (sequence) => {
         }
     }, []);
     return {
+        canOpenSource,
         canOpenInEditor,
         canConfigureApps,
         codingAgentInfo,
         editorInfo,
         openInCodingAgent,
         openInEditor,
+        openSource,
         originalLocation,
     };
 };