@remotion/studio 4.0.523 → 4.0.525

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

@@ -44,6 +44,7 @@ const is_current_selected_still_1 = require("../../helpers/is-current-selected-s
 const canvas_zoom_1 = require("../../icons/canvas-zoom");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
 const z_index_1 = require("../../state/z-index");
+const ActionTooltip_1 = require("../ActionTooltip");
 const ControlButton_1 = require("../ControlButton");
 const layout_1 = require("../layout");
 const timeline_refs_1 = require("./timeline-refs");
@@ -123,7 +124,7 @@ const TimelineZoomControlsInner = ({ sliderMaxWidth }) => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', 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(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', 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

@@ -95,11 +95,14 @@ const formatNumberTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
         const digits = (0, timeline_field_utils_1.getDecimalPlaces)(numericValue);
         return digits === 0 ? String(numericValue) : numericValue.toFixed(digits);
     }
-    return (0, timeline_field_utils_1.formatTimelineNumber)({
-        decimalPlaces: stepDecimals,
-        fixed: true,
-        value: numericValue,
-    });
+    // The step controls increments, not the precision of source or typed values.
+    // Keep finer values while trimming floating point noise.
+    const normalizedValue = (0, timeline_field_utils_1.getDecimalPlaces)(numericValue) > stepDecimals
+        ? Number(numericValue.toPrecision(15))
+        : numericValue;
+    return (0, timeline_field_utils_1.getDecimalPlaces)(normalizedValue) > stepDecimals
+        ? String(normalizedValue)
+        : normalizedValue.toFixed(stepDecimals);
 };
 const formatRotationTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
     const configuredStep = fieldSchema.type === 'rotation-css' ||
@@ -150,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,
     };
 };

package/dist/components/Timeline/use-timeline-asset-drop.js

@@ -29,6 +29,7 @@ const useTimelineAssetDrop = () => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const [assetDropFrame, setAssetDropFrame] = (0, react_1.useState)(null);
+    const unsupportedDropNotifiedRef = (0, react_1.useRef)(false);
     const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
@@ -71,9 +72,18 @@ const useTimelineAssetDrop = () => {
             dataTransfer === null ||
             !(0, drop_handler_data_1.isSupportedDropEvent)(event) ||
             !isEventTargetInsideElement(event, timeline)) {
+            unsupportedDropNotifiedRef.current = false;
             setAssetDropFrame(null);
             return;
         }
+        const mayBeCanvasCapture = (0, drop_handler_data_1.isFileDragEvent)(event) && !window.remotion_isReadOnlyStudio;
+        const shouldNotifyAboutUnsupportedDrop = (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false &&
+            !mayBeCanvasCapture;
+        if (shouldNotifyAboutUnsupportedDrop &&
+            !unsupportedDropNotifiedRef.current) {
+            (0, NotificationCenter_1.showCannotAddSequenceDropNotification)();
+        }
+        unsupportedDropNotifiedRef.current = shouldNotifyAboutUnsupportedDrop;
         event.preventDefault();
         event.stopPropagation();
         dataTransfer.dropEffect = canInsertAsset ? 'copy' : 'none';
@@ -82,8 +92,10 @@ const useTimelineAssetDrop = () => {
             scrollable !== null &&
             isEventTargetInsideElement(event, scrollable);
         setAssetDropFrame(shouldShowDropFrame ? getDropFrame(event) : null);
-    }, [canInsertAsset, getDropFrame]);
+    }, [canInsertAsset, compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence, getDropFrame]);
     const onAssetDrop = (0, react_1.useCallback)(async (event) => {
+        const unsupportedDropWasNotified = unsupportedDropNotifiedRef.current;
+        unsupportedDropNotifiedRef.current = false;
         setAssetDropFrame(null);
         const timeline = timeline_refs_1.timelineVerticalScroll.current;
         const { dataTransfer } = event;
@@ -122,8 +134,9 @@ const useTimelineAssetDrop = () => {
             currentCompositionId === null ||
             compositionFile === null ||
             videoConfig === null) {
-            if ((compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false) {
-                (0, NotificationCenter_1.showNotification)('Cannot insert items into this composition component', 3000);
+            if ((compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false &&
+                !unsupportedDropWasNotified) {
+                (0, NotificationCenter_1.showCannotAddSequenceDropNotification)();
             }
             return;
         }
@@ -166,6 +179,7 @@ const useTimelineAssetDrop = () => {
         videoConfig,
     ]);
     const clearAssetDropFrame = (0, react_1.useCallback)(() => {
+        unsupportedDropNotifiedRef.current = false;
         setAssetDropFrame(null);
     }, []);
     (0, react_1.useEffect)(() => {

package/dist/components/Timeline/use-timeline-keyframe-drag.js

@@ -450,8 +450,8 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
             event: e,
             captureTarget: e.currentTarget,
             onMove: onPointerMove,
-            onEnd: (reason) => {
-                if (reason === 'pointerup' || reason === 'buttons-released') {
+            onEnd: (reason, endEvent) => {
+                if ((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     onPointerUp();
                 }
                 else {
@@ -657,8 +657,8 @@ const useTimelineEasingKeyframeDrag = ({ onSelect, selectable, selected, selecti
             event: e,
             captureTarget: e.currentTarget,
             onMove: onPointerMove,
-            onEnd: (reason) => {
-                if (reason === 'pointerup' || reason === 'buttons-released') {
+            onEnd: (reason, endEvent) => {
+                if ((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     onPointerUp();
                 }
                 else {

package/dist/components/TimelineCombobox.d.ts

@@ -5,6 +5,7 @@ export declare const TimelineCombobox: React.FC<{
     readonly values: ComboboxValue[];
     readonly selectedId: string | number;
     readonly title: string;
+    readonly tooltipDelay: number | null;
     readonly labelWidth?: number;
     readonly renderLeftItem?: RenderInlineAction;
     readonly unhoveredIconColor?: string;

package/dist/components/TimelineCombobox.js

@@ -4,6 +4,7 @@ exports.TimelineCombobox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
 const caret_1 = require("../icons/caret");
+const ActionTooltip_1 = require("./ActionTooltip");
 const layout_1 = require("./layout");
 const SegmentedButton_1 = require("./SegmentedButton");
 const segmentedButtonStyle = {
@@ -21,7 +22,7 @@ const label = {
     userSelect: 'none',
     whiteSpace: 'nowrap',
 };
-const TimelineCombobox = ({ values, selectedId, title, labelWidth = 32, renderLeftItem, unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
+const TimelineCombobox = ({ values, selectedId, title, tooltipDelay, labelWidth = 32, renderLeftItem, unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
     const selected = values.find((value) => value.id === selectedId);
     const segments = [
         {
@@ -32,16 +33,20 @@ const TimelineCombobox = ({ values, selectedId, title, labelWidth = 32, renderLe
             leaveLeftSpace: true,
             onOpenChange: null,
             renderContent: (color) => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderLeftItem ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderLeftItem(color), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
-                        ] })) : null, selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: { ...label, width: labelWidth }, children: selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(caret_1.CaretDown, { color: color })
+                        ] })) : null, selected ? (jsx_runtime_1.jsx("div", { title: tooltipDelay === null && typeof selected.label === 'string'
+                            ? selected.label
+                            : undefined, style: { ...label, width: labelWidth }, children: selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(caret_1.CaretDown, { color: color })
                 ] })),
             segmentId: 'selector',
             selectedId,
             style: { fontFamily: 'inherit', padding: '0 4px' },
-            title,
+            title: tooltipDelay === null ? title : null,
+            tooltipLabel: null,
             type: 'menu',
             values,
         },
     ];
-    return (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle, title: null }));
+    const button = (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle, title: null }));
+    return tooltipDelay === null ? (button) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: title, shortcut: null, delay: tooltipDelay, dismissOnClick: true, children: button }));
 };
 exports.TimelineCombobox = TimelineCombobox;

package/dist/components/TimelineInOutToggle.js

@@ -5,24 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 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 use_keybinding_1 = require("../helpers/use-keybinding");
+const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const timelineInOutPointer_1 = require("../icons/timelineInOutPointer");
 const in_out_1 = require("../state/in-out");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
-const keyboard_shortcuts_1 = require("./keyboard-shortcuts");
-const getTooltipText = (pointType, action) => {
-    const shortcut = (0, keyboard_shortcuts_1.getKeyboardShortcutLabel)(action);
-    return [
-        `Mark ${pointType}`,
-        (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || shortcut === '' ? null : `(${shortcut})`,
-        '- right click to clear',
-    ]
-        .filter(no_react_1.NoReactInternals.truthy)
-        .join(' ');
-};
 const style = {
     width: 17,
     height: 17,
@@ -34,7 +23,11 @@ exports.inOutHandles = (0, react_1.createRef)();
 exports.defaultInOutValue = { inFrame: null, outFrame: null };
 const TimelineInOutPointToggle = () => {
     var _a;
-    (0, client_id_1.useStudioConfigRevision)();
+    const inShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('setInPoint');
+    const outShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('setOutPoint');
+    const inAriaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('setInPoint');
+    const outAriaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('setOutPoint');
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
@@ -249,7 +242,7 @@ const TimelineInOutPointToggle = () => {
         };
     }, [confId, onInMark, onInOutClear, onOutMark]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('In', 'setInPoint'), "aria-label": getTooltipText('In', 'setInPoint'), style: buttonStyle, onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? color : colors_1.BLUE, style: style })) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'setOutPoint'), "aria-label": getTooltipText('Out', 'setOutPoint'), style: buttonStyle, onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? color : colors_1.BLUE, style: style })) })
+            jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "In point", shortcut: shortcutsDisabled ? null : inShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": "In point", "aria-description": "Right click to clear", "aria-keyshortcuts": shortcutsDisabled ? undefined : inAriaShortcut || undefined, style: buttonStyle, onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? color : colors_1.BLUE, style: style })) }) }), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Out point", shortcut: shortcutsDisabled ? null : outShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": "Out point", "aria-description": "Right click to clear", "aria-keyshortcuts": shortcutsDisabled ? undefined : outAriaShortcut || undefined, style: buttonStyle, onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? color : colors_1.BLUE, style: style })) }) })
         ] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/components/UndoRedoButtons.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const url_state_1 = require("../helpers/url-state");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const redo_1 = require("../icons/redo");
@@ -43,6 +44,11 @@ const UndoRedoButtons = () => {
             ? browserStudioOperations.undo()
             : (0, call_api_1.callApi)('/api/undo', {});
         promise
+            .then((response) => {
+            if (response.success && response.route !== null) {
+                (0, url_state_1.pushUrl)(response.route);
+            }
+        })
             .catch(() => {
             // Ignore errors
         })
@@ -60,6 +66,11 @@ const UndoRedoButtons = () => {
             ? browserStudioOperations.redo()
             : (0, call_api_1.callApi)('/api/redo', {});
         promise
+            .then((response) => {
+            if (response.success && response.route !== null) {
+                (0, url_state_1.pushUrl)(response.route);
+            }
+        })
             .catch(() => {
             // Ignore errors
         })