@remotion/studio 4.0.506 → 4.0.508

package/dist/components/Timeline/transform-origin-utils.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transformOriginPercentToUv = exports.parsedTransformOriginToPercent = exports.serializeTransformOrigin = exports.parsedTransformOriginToUv = exports.axisValueToUv = exports.parseTransformOrigin = void 0;
+exports.transformOriginPercentToUv = exports.parsedTransformOriginToPercent = exports.serializeTransformOrigin = exports.parsedTransformOriginToUv = exports.axisValueToUv = exports.parseTransformOrigin = exports.parseTransformOriginZ = void 0;
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const cssNumberWithUnit = /^([+-]?(?:\d+\.?\d*|\.\d+))(px|%)$/i;
-const cssLength = /^([+-]?(?:\d+\.?\d*|\.\d+))[a-zA-Z]+$/;
+const cssLength = /^([+-]?(?:\d+\.?\d*|\.\d+))([a-zA-Z]+)$/;
 const keywords = new Set(['left', 'center', 'right', 'top', 'bottom']);
 const center = { value: 50, unit: '%' };
 const keywordOptions = (keyword) => {
@@ -108,12 +108,18 @@ const parseXY = (parts) => {
     }
     return keywordIsFirst ? [center, length] : [length, center];
 };
-const isSupportedZ = (token) => {
+const parseTransformOriginZ = (token) => {
     if (token.includes('%')) {
-        return false;
+        return null;
     }
-    return cssLength.test(token);
+    const match = cssLength.exec(token);
+    if (!match) {
+        return null;
+    }
+    const value = Number(match[1]);
+    return Number.isFinite(value) ? { value, unit: match[2] } : null;
 };
+exports.parseTransformOriginZ = parseTransformOriginZ;
 const parseTransformOrigin = (value) => {
     var _a;
     if (typeof value !== 'string') {
@@ -128,7 +134,7 @@ const parseTransformOrigin = (value) => {
         return null;
     }
     const z = (_a = parts[2]) !== null && _a !== void 0 ? _a : null;
-    if (z !== null && !isSupportedZ(z)) {
+    if (z !== null && (0, exports.parseTransformOriginZ)(z) === null) {
         return null;
     }
     return { x: xy[0], y: xy[1], z };

package/dist/components/Timeline/use-expanded-track-keyframe-rows.js

@@ -12,6 +12,35 @@ const get_node_keyframes_1 = require("./get-node-keyframes");
 const imperative_state_1 = require("./imperative-state");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const TimelineSelection_1 = require("./TimelineSelection");
+const areTimelineTreeLayoutsEqual = (first, second) => {
+    if (first.length !== second.length) {
+        return false;
+    }
+    return first.every((firstNode, index) => {
+        const secondNode = second[index];
+        if (firstNode.kind !== secondNode.kind ||
+            (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(firstNode.nodePathInfo) !==
+                (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(secondNode.nodePathInfo)) {
+            return false;
+        }
+        if (firstNode.kind === 'group' && secondNode.kind === 'group') {
+            return areTimelineTreeLayoutsEqual(firstNode.children, secondNode.children);
+        }
+        if (firstNode.kind !== 'field' || secondNode.kind !== 'field') {
+            return false;
+        }
+        if (firstNode.field === null || secondNode.field === null) {
+            return firstNode.field === secondNode.field;
+        }
+        return (firstNode.field.kind === secondNode.field.kind &&
+            firstNode.field.key === secondNode.field.key &&
+            firstNode.field.typeName === secondNode.field.typeName &&
+            firstNode.field.rowHeight === secondNode.field.rowHeight &&
+            (firstNode.field.kind !== 'effect-field' ||
+                (secondNode.field.kind === 'effect-field' &&
+                    firstNode.field.effectIndex === secondNode.field.effectIndex)));
+    });
+};
 const getNodeCanEditEasing = ({ node, nodePath, propStatuses, }) => {
     var _a;
     if (node.kind !== 'field' || node.field === null) {
@@ -38,8 +67,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
-    const runtimeValues = (0, use_runtime_values_1.useRuntimeValues)(sequence.controls);
-    const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
+    const selectTree = (0, react_1.useCallback)((runtimeValues) => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
         getDragOverrides,
@@ -49,13 +77,17 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         includeSourceControls: false,
         runtimeValues,
     }), [
+        sequence,
         propStatuses,
         getDragOverrides,
         getEffectDragOverrides,
         nodePathInfo,
-        sequence,
-        runtimeValues,
     ]);
+    const tree = (0, use_runtime_values_1.useRuntimeValueSelector)({
+        controls: sequence.controls,
+        selector: selectTree,
+        isEqual: areTimelineTreeLayoutsEqual,
+    });
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
     const filteredTree = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
         nodes: tree,

package/dist/components/Timeline/{use-open-sequence-in-editor.d.ts → use-open-sequence-in-apps.d.ts}

@@ -1,8 +1,11 @@
 import type { EditorPickerId } from '@remotion/studio-shared';
 import type { TSequence } from 'remotion';
-export declare const useOpenSequenceInEditor: (sequence: TSequence) => {
+export declare const useOpenSequenceInApps: (sequence: TSequence) => {
     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>;
     originalLocation: import("remotion").ResolvedStackLocation | null;
 };

package/dist/components/Timeline/{use-open-sequence-in-editor.js → use-open-sequence-in-apps.js}

@@ -1,17 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOpenSequenceInEditor = void 0;
+exports.useOpenSequenceInApps = void 0;
 const react_1 = require("react");
 const client_id_1 = require("../../helpers/client-id");
 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");
 const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
-const useOpenSequenceInEditor = (sequence) => {
+const useOpenSequenceInApps = (sequence) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
-    const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(sequence.getStack);
-    const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)((0, use_default_editor_info_1.canUseEditorPicker)(previewConnected));
+    const { resolvedLocation: originalLocation } = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(sequence.getStack);
+    const editorPickerAvailable = (0, use_default_editor_info_1.canUseEditorPicker)(previewConnected);
+    const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)(editorPickerAvailable);
+    const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(editorPickerAvailable);
     const canOpenInEditor = (0, react_1.useMemo)(() => Boolean(window.remotion_editorName && previewConnected && originalLocation), [originalLocation, previewConnected]);
     const openInEditor = (0, react_1.useCallback)(async (editorId) => {
         if (!canOpenInEditor || !originalLocation) {
@@ -24,11 +26,25 @@ const useOpenSequenceInEditor = (sequence) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         }
     }, [canOpenInEditor, originalLocation]);
+    const openInCodingAgent = (0, react_1.useCallback)(async (codingAgentId, codingAgentName, contextForAgents) => {
+        try {
+            const response = await (0, open_in_editor_1.openInCodingAgent)(codingAgentId, contextForAgents);
+            if (!response.success) {
+                (0, NotificationCenter_1.showNotification)(`Could not open ${codingAgentName}`, 2000);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        }
+    }, []);
     return {
         canOpenInEditor,
+        canConfigureApps: editorPickerAvailable,
+        codingAgentInfo,
         editorInfo,
+        openInCodingAgent,
         openInEditor,
         originalLocation,
     };
 };
-exports.useOpenSequenceInEditor = useOpenSequenceInEditor;
+exports.useOpenSequenceInApps = useOpenSequenceInApps;

package/dist/components/Timeline/use-resolved-stack-react-to-change.d.ts

@@ -1,2 +1,6 @@
 import type { ResolvedStackLocation } from 'remotion';
-export declare const useResolveStackAndReactToChange: (getStack: () => string | null) => ResolvedStackLocation | null;
+export declare const useResolveStackAndReactToChange: (getStack: () => string | null) => {
+    preferMappedNodePath: boolean;
+    resolvedLocation: ResolvedStackLocation | null;
+    stack: string | null;
+};

package/dist/components/Timeline/use-resolved-stack-react-to-change.js

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useResolveStackAndReactToChange = void 0;
 const react_1 = require("react");
+const fast_refresh_context_1 = require("../../fast-refresh-context");
 const client_id_1 = require("../../helpers/client-id");
 const use_resolved_stack_1 = require("./use-resolved-stack");
 // This case: https://github.com/remotion-dev/remotion/issues/7393
 // A code change has been made and we cannot re-calculate the stack right away.
 // In that case, we wait for fast refresh, wait for the new stack trace, triggering a new event.
-const matchesLostNodePathEvent = (event, location) => {
+const matchesSourceLocation = (event, location) => {
     var _a;
     if (!(location === null || location === void 0 ? void 0 : location.source) || !location.line) {
         return false;
@@ -18,31 +19,62 @@ const matchesLostNodePathEvent = (event, location) => {
 };
 const useResolveStackAndReactToChange = (getStack) => {
     const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const [stack, setStack] = (0, react_1.useState)(() => getStack());
-    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(stack);
+    const { fastRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
+    const [stackState, setStackState] = (0, react_1.useState)(() => ({
+        stack: getStack(),
+        preferMappedNodePath: true,
+    }));
+    const resolvedLocationFromStack = (0, use_resolved_stack_1.useResolvedStack)(stackState.stack);
+    const resolvedLocation = (0, use_resolved_stack_1.hasResolvedStack)(stackState.stack)
+        ? resolvedLocationFromStack
+        : null;
     const resolvedLocationRef = (0, react_1.useRef)(resolvedLocation);
     resolvedLocationRef.current = resolvedLocation;
+    const getStackRef = (0, react_1.useRef)(getStack);
+    getStackRef.current = getStack;
+    (0, react_1.useEffect)(() => {
+        if (fastRefreshes === 0) {
+            return;
+        }
+        const newStack = getStackRef.current();
+        setStackState((current) => {
+            if (newStack === current.stack) {
+                return current;
+            }
+            return {
+                stack: newStack,
+                // Resolve from the post-refresh source location. The previous node path
+                // may now belong to a sibling after a structural edit.
+                preferMappedNodePath: false,
+            };
+        });
+    }, [fastRefreshes]);
     (0, react_1.useEffect)(() => {
         let interval = null;
         const handleEvent = (event) => {
             if (event.type !== 'lost-node-path') {
                 return;
             }
-            if (!matchesLostNodePathEvent(event, resolvedLocationRef.current)) {
+            if (!matchesSourceLocation(event, resolvedLocationRef.current)) {
                 return;
             }
-            const initialStack = getStack();
+            const initialStack = getStackRef.current();
             if (interval !== null) {
                 clearInterval(interval);
             }
             interval = setInterval(() => {
-                const newStack = getStack();
+                const newStack = getStackRef.current();
                 if (newStack !== initialStack) {
                     if (interval !== null) {
                         clearInterval(interval);
                         interval = null;
                     }
-                    setStack(newStack);
+                    setStackState({
+                        stack: newStack,
+                        // The old override ID may now belong to a sibling. Resolve the
+                        // node path from the post-refresh source location instead.
+                        preferMappedNodePath: false,
+                    });
                 }
             }, 10);
         };
@@ -53,7 +85,11 @@ const useResolveStackAndReactToChange = (getStack) => {
                 clearInterval(interval);
             }
         };
-    }, [subscribeToEvent, getStack]);
-    return resolvedLocation;
+    }, [subscribeToEvent]);
+    return {
+        preferMappedNodePath: stackState.preferMappedNodePath,
+        resolvedLocation,
+        stack: stackState.stack,
+    };
 };
 exports.useResolveStackAndReactToChange = useResolveStackAndReactToChange;

package/dist/components/Timeline/use-sequence-props-subscription.d.ts

@@ -1,9 +1,11 @@
 import type { InteractivitySchema } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
-export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, componentIdentity, schema, effects, }: {
+export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, componentIdentity, schema, effects, preferMappedNodePath, stack, }: {
     overrideId: string;
     componentIdentity: string | null;
     schema: InteractivitySchema;
     effects: InteractivitySchema[];
     originalLocation: OriginalPosition | null;
+    preferMappedNodePath: boolean;
+    stack: string | null;
 }) => void;

package/dist/components/Timeline/use-sequence-props-subscription.js

@@ -8,7 +8,7 @@ const client_id_1 = require("../../helpers/client-id");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
 const should_subscribe_to_source_file_1 = require("./should-subscribe-to-source-file");
-const useSequencePropsSubscription = ({ originalLocation, overrideId, componentIdentity, schema, effects, }) => {
+const useSequencePropsSubscription = ({ originalLocation, overrideId, componentIdentity, schema, effects, preferMappedNodePath, stack, }) => {
     var _a, _b, _c;
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { setOverrideIdToNodePath } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsSettersContext);
@@ -56,8 +56,11 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
             schema,
             componentIdentity,
             effects,
-            nodePath: (_b = nodePathAtResubscribe === null || nodePathAtResubscribe === void 0 ? void 0 : nodePathAtResubscribe.nodePath) !== null && _b !== void 0 ? _b : null,
+            nodePath: preferMappedNodePath
+                ? ((_b = nodePathAtResubscribe === null || nodePathAtResubscribe === void 0 ? void 0 : nodePathAtResubscribe.nodePath) !== null && _b !== void 0 ? _b : null)
+                : null,
             clientId,
+            stack,
             videoConfigValues: {
                 durationInFrames: videoConfig.durationInFrames,
                 fps: videoConfig.fps,
@@ -104,9 +107,11 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
         locationSource,
         migrateExpandedTracksForSubscriptionKey,
         overrideId,
+        preferMappedNodePath,
         schema,
         setPropStatuses,
         setOverrideIdToNodePath,
+        stack,
         videoConfig,
     ]);
 };

package/dist/components/Timeline/use-timeline-expanded-tree.d.ts

@@ -1,5 +1,9 @@
 import { type TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const useTimelineSequenceHasExpandableContent: ({ sequence, nodePathInfo, }: {
+    readonly sequence: TSequence;
+    readonly nodePathInfo: SequenceNodePathInfo;
+}) => boolean;
 export declare const useTimelineExpandedTree: ({ sequence, nodePathInfo, includeTextContent, includeSourceControls, }: {
     readonly sequence: TSequence;
     readonly nodePathInfo: SequenceNodePathInfo;

package/dist/components/Timeline/use-timeline-expanded-tree.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineExpandedTree = void 0;
+exports.useTimelineExpandedTree = exports.useTimelineSequenceHasExpandableContent = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -9,6 +9,50 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const TimelineSelection_1 = require("./TimelineSelection");
+const useTimelineSequenceHasExpandableContent = ({ sequence, nodePathInfo, }) => {
+    const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
+    const selectHasExpandableContent = (0, react_1.useCallback)((runtimeValues) => {
+        const tree = (0, timeline_layout_1.buildTimelineTree)({
+            sequence,
+            nodePathInfo,
+            getDragOverrides,
+            getEffectDragOverrides,
+            propStatuses: visualModePropStatuses,
+            includeTextContent: false,
+            includeSourceControls: false,
+            runtimeValues,
+        });
+        return ((0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
+            nodes: tree,
+            shouldShowNode: (node) => (0, timeline_expanded_filter_1.isTimelineExpandedNodeSelected)({
+                nodePathInfo: node.nodePathInfo,
+                selectedRowKeys,
+            }) ||
+                (0, get_node_keyframes_1.getNodeHasKeyframes)({
+                    node,
+                    nodePath: nodePathInfo.sequenceSubscriptionKey,
+                    propStatuses: visualModePropStatuses,
+                    getDragOverrides,
+                    getEffectDragOverrides,
+                }),
+        }).length > 0);
+    }, [
+        getDragOverrides,
+        getEffectDragOverrides,
+        nodePathInfo,
+        selectedRowKeys,
+        sequence,
+        visualModePropStatuses,
+    ]);
+    return (0, use_runtime_values_1.useRuntimeValueSelector)({
+        controls: sequence.controls,
+        selector: selectHasExpandableContent,
+    });
+};
+exports.useTimelineSequenceHasExpandableContent = useTimelineSequenceHasExpandableContent;
 const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, includeSourceControls, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);

package/dist/components/call-api.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.callApi = void 0;
+const sequence_node_path_mutations_1 = require("../helpers/sequence-node-path-mutations");
 const callApi = (endpoint, body, signal) => {
     return new Promise((resolve, reject) => {
         fetch(endpoint, {
@@ -14,6 +15,7 @@ const callApi = (endpoint, body, signal) => {
             .then((res) => res.json())
             .then((data) => {
             if (data.success) {
+                (0, sequence_node_path_mutations_1.queueSequenceNodePathMutationFromApiResponse)(data.data);
                 resolve(data.data);
             }
             else {

package/dist/components/canvas-rotation-cursor.d.ts

@@ -0,0 +1 @@
+export declare const canvasRotationCursor: string;

package/dist/components/canvas-rotation-cursor.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.canvasRotationCursor = void 0;
+const canvasRotationCursorSvg = `<svg width="29" height="30" viewBox="0 0 83 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#shadow)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M58.673 35.4941C58.6612 35.1059 58.6552 34.9899 58.6346 34.4705L58.605 33.8746C58.608 33.9357 58.5753 33.3889 58.5813 33.4469L58.5695 33.2635L54.9726 33.508V33.5201C54.9874 33.7371 54.9992 33.9389 55.011 34.1587C55.011 34.1556 55.0851 36.3955 55.0851 36.3924L55.0881 36.4688L55.0851 36.4382L55.0881 36.5268V36.591V36.5604V36.6521V36.6246V36.7163V36.6857L55.0911 36.7927L55.0881 36.7621L55.0911 36.8844V36.8538V36.9913V36.9607V37.1441L55.0908 37.1166V37.3C55.0908 40.1263 54.8952 43.0781 54.4568 46.0083C55.7693 45.6263 57.0555 45.1771 58.273 44.6517C58.5605 42.2072 58.6966 39.7506 58.6966 37.3031C58.6936 36.9149 58.6906 36.527 58.6848 36.1389L58.673 35.4941ZM21.7249 51.5816L11.6923 48.5781L13.6418 46.4055C11.1501 43.9916 9.3219 40.9118 9.3219 37.3C9.33972 34.501 10.3589 32.133 12.0242 29.9697C14.4835 26.8805 17.9916 24.5982 21.9176 22.9633C21.5738 24.4421 21.2893 25.9362 21.0613 27.4426C19.3486 28.3349 17.7752 29.386 16.4095 30.6144C14.7415 32.1421 13.3428 34.0304 13.0051 36.3039C12.7799 37.8317 13.0852 39.2831 13.7724 40.6338C14.3562 41.7765 15.1886 42.8063 16.0896 43.674L18.0364 41.5015L21.7249 51.5816ZM34.2108 19.8313C36.6997 19.5167 39.1175 19.3792 41.3219 19.3792C46.5515 19.3792 51.8463 20.0576 56.8656 21.5854C63.7397 23.6785 73.2715 28.711 73.3219 37.3001C73.3041 40.096 72.2879 42.464 70.6226 44.6274C64.2492 52.639 50.8152 55.221 41.3218 55.221C38.6848 55.221 35.9232 55.056 33.3307 54.6647L33.8196 50.9828C36.2492 51.3495 38.8536 51.5022 41.3248 51.5022C49.3544 51.5022 59.9855 49.6047 66.2374 43.9856C68.1455 42.2377 69.6953 40.0224 69.7189 37.3C69.6804 32.8542 65.5411 29.6123 62.0922 27.7239C55.9115 24.3841 48.2344 23.0948 41.3218 23.0948C38.7026 23.0948 35.8047 23.2965 32.8715 23.7639C33.2479 22.4132 33.6923 21.0965 34.2108 19.8313ZM50.8745 58.1816C52.3146 57.9493 53.7634 57.6652 55.1974 57.317C52.6789 63.6206 48.1633 70.2572 41.3218 70.3C38.6077 70.2816 36.3114 69.2337 34.2137 67.5163C26.4448 60.9408 23.9441 47.09 23.9441 37.3C23.9441 31.91 24.602 26.4466 26.0834 21.2705C28.1131 14.1817 32.9931 4.35195 41.322 4.3C45.63 4.3 49.1057 7.12951 51.5916 10.5272L53.8967 8.76404L55.7041 19.3699L46.3885 14.5025L48.6936 12.7393C46.9723 10.3347 44.3528 8.01873 41.3217 8.01873C37.0106 8.05836 33.8669 12.3302 32.0358 15.8868C28.7972 22.2546 27.5469 30.1715 27.5469 37.3001C27.5469 45.5806 29.387 56.544 34.8388 62.9912C36.5337 64.9589 38.6788 66.5571 41.3217 66.5815C45.6328 66.5418 48.7765 62.2731 50.6076 58.7165L50.8745 58.1816Z" fill="black" stroke="white" stroke-width="3" stroke-linejoin="round" paint-order="stroke"/>
+</g>
+<defs>
+<filter id="shadow" x="0" y="0" width="83" height="85" filterUnits="userSpaceOnUse">
+<feDropShadow dx="0" dy="5" stdDeviation="3.15" flood-color="black" flood-opacity="0.25"/>
+</filter>
+</defs>
+</svg>`;
+exports.canvasRotationCursor = `url("data:image/svg+xml,${encodeURIComponent(canvasRotationCursorSvg)}") 15 13, alias`;

package/dist/components/get-open-in-menu-items.d.ts

@@ -0,0 +1,17 @@
+import type { TerminalId } from '@remotion/studio-shared';
+import type { EditorPickerId, GetDefaultCodingAgentInfoResponse, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
+import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const getOpenInMenuItems: ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, fileManagerDisabled, folder, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInTerminal, }: {
+    readonly codingAgentInfo: GetDefaultCodingAgentInfoResponse | null;
+    readonly editorDisabled: boolean;
+    readonly editorInfo: GetDefaultEditorInfoResponse | null;
+    readonly excludeCodingAgentId: "claude-code" | "codex" | "copilot" | "cursor" | null;
+    readonly excludeEditorId: EditorPickerId | null;
+    readonly fileManagerDisabled: boolean;
+    readonly folder: boolean;
+    readonly onConfigureApps: () => void;
+    readonly onOpenInCodingAgent: (codingAgentId: "claude-code" | "codex" | "copilot" | "cursor", codingAgentName: string) => void;
+    readonly onOpenInEditor: (editorId: EditorPickerId) => void;
+    readonly onOpenInFileExplorer: () => void;
+    readonly onOpenInTerminal: ((terminalId: TerminalId) => void) | null;
+}) => ComboboxValue[];

package/dist/components/get-open-in-menu-items.js

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOpenInMenuItems = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
+const editor_1 = require("../icons/editor");
+const finder_1 = require("../icons/finder");
+const terminal_1 = require("../icons/terminal");
+const CodingAgentIcon_1 = require("./CodingAgentIcon");
+const menuLabel = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '16px',
+};
+const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, fileManagerDisabled, folder, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInTerminal, }) => {
+    var _a, _b, _c;
+    const showFinder = window.remotion_fileSystemPlatform === 'darwin';
+    const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
+    const editors = ((_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _a !== void 0 ? _a : [])
+        .filter((editor) => editor.id !== excludeEditorId)
+        .map((editor) => ({
+        disabled: editorDisabled,
+        id: `open-in-${editor.id}`,
+        keyHint: null,
+        label: jsx_runtime_1.jsx("span", { style: menuLabel, children: editor.name }),
+        leftItem: jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: editor.id, size: 18 }),
+        onClick: () => {
+            if (!editorDisabled) {
+                onOpenInEditor(editor.id);
+            }
+        },
+        quickSwitcherLabel: null,
+        subMenu: null,
+        type: 'item',
+        value: editor.id,
+    }));
+    const codingAgents = ((_b = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents) !== null && _b !== void 0 ? _b : [])
+        .filter((codingAgent) => codingAgent.id !== excludeCodingAgentId)
+        .map((codingAgent) => ({
+        id: `open-in-coding-agent-${codingAgent.id}`,
+        keyHint: null,
+        label: jsx_runtime_1.jsx("span", { style: menuLabel, children: codingAgent.name }),
+        leftItem: jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { codingAgentId: codingAgent.id, size: 18 }),
+        onClick: () => onOpenInCodingAgent(codingAgent.id, codingAgent.nameWithType),
+        quickSwitcherLabel: null,
+        subMenu: null,
+        type: 'item',
+        value: `coding-agent-${codingAgent.id}`,
+    }));
+    const terminals = folder ? ((_c = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedTerminals) !== null && _c !== void 0 ? _c : []) : [];
+    const showSystemApps = showFinder || terminals.length > 0;
+    return [
+        ...(editors.length > 0
+            ? [
+                {
+                    type: 'section-header',
+                    id: 'editor-header',
+                    label: 'Editor',
+                },
+                ...editors,
+            ]
+            : []),
+        ...(codingAgents.length > 0
+            ? [
+                {
+                    type: 'section-header',
+                    id: 'agent-header',
+                    label: 'Agent',
+                },
+                ...codingAgents,
+            ]
+            : []),
+        ...(showSystemApps
+            ? [
+                ...(terminals.length > 0
+                    ? [
+                        {
+                            type: 'section-header',
+                            id: 'terminal-header',
+                            label: 'Terminal',
+                        },
+                        ...terminals.map((terminal) => ({
+                            id: `open-in-terminal-${terminal.id}`,
+                            keyHint: null,
+                            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: terminal.name }),
+                            leftItem: jsx_runtime_1.jsx(terminal_1.TerminalIcon, { terminalId: terminal.id, size: 18 }),
+                            onClick: () => onOpenInTerminal === null || onOpenInTerminal === void 0 ? void 0 : onOpenInTerminal(terminal.id),
+                            quickSwitcherLabel: null,
+                            subMenu: null,
+                            type: 'item',
+                            value: `terminal-${terminal.id}`,
+                        })),
+                    ]
+                    : []),
+                ...(showFinder
+                    ? [
+                        ...(editors.length > 0 ||
+                            codingAgents.length > 0 ||
+                            terminals.length > 0
+                            ? [
+                                {
+                                    type: 'divider',
+                                    id: 'open-in-file-explorer-divider',
+                                },
+                            ]
+                            : []),
+                        {
+                            disabled: fileManagerDisabled,
+                            id: 'open-in-file-explorer',
+                            keyHint: null,
+                            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: fileManagerName }),
+                            leftItem: jsx_runtime_1.jsx(finder_1.FinderIcon, { size: 18 }),
+                            onClick: () => {
+                                if (!fileManagerDisabled) {
+                                    onOpenInFileExplorer();
+                                }
+                            },
+                            quickSwitcherLabel: null,
+                            subMenu: null,
+                            type: 'item',
+                            value: 'file-explorer',
+                        },
+                    ]
+                    : []),
+            ]
+            : []),
+        ...(editors.length > 0 || codingAgents.length > 0 || showSystemApps
+            ? [{ type: 'divider', id: 'open-in-settings-divider' }]
+            : []),
+        {
+            id: 'change-default-apps',
+            keyHint: null,
+            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Change default apps..." }),
+            leftItem: null,
+            onClick: onConfigureApps,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: 'change-default-apps',
+        },
+    ];
+};
+exports.getOpenInMenuItems = getOpenInMenuItems;

package/dist/components/selected-outline-drag.d.ts

@@ -4,6 +4,8 @@ import type { SelectedOutlineCropDragTarget, SelectedOutlineCropFieldKey, Select
 import { type UvCoordinate } from './selected-outline-uv';
 import type { AddSequenceKeyframeChange } from './Timeline/call-add-keyframe';
 import type { SaveSequencePropChange } from './Timeline/save-sequence-prop';
+import { type ParsedCssRotation } from './Timeline/timeline-rotation-utils';
+import { type ParsedTranslate } from './Timeline/timeline-translate-utils';
 export declare const getSelectedOutlineActiveSchema: ({ schema, currentRuntimeValueDotNotation, dragOverrides, propStatus, frame, }: {
     readonly schema: InteractivitySchema;
     readonly currentRuntimeValueDotNotation: Record<string, unknown>;
@@ -125,6 +127,11 @@ export declare const getSelectedOutlineRotationDragStates: ({ dragTargets, getDr
     readonly getDragOverrides: GetDragOverrides;
     readonly timelinePosition: number;
 }) => SelectedOutlineRotationDragState[];
+export declare const getSelectedOutline3DRotationDragValues: ({ dragStates, rotationXDeltaDegrees, rotationYDeltaDegrees, }: {
+    readonly dragStates: readonly SelectedOutlineRotationDragState[];
+    readonly rotationXDeltaDegrees: number;
+    readonly rotationYDeltaDegrees: number;
+}) => Map<string, string>;
 export declare const getSelectedOutlineRotationDragValues: ({ dragStates, rotationDeltaDegrees, }: {
     readonly dragStates: readonly SelectedOutlineRotationDragState[];
     readonly rotationDeltaDegrees: number;
@@ -151,16 +158,15 @@ export declare const clearSelectedOutlineRotationDragOverrides: ({ clearDragOver
     readonly clearDragOverrides: (nodePath: SequencePropsSubscriptionKey) => void;
     readonly dragStates: readonly SelectedOutlineRotationDragState[];
 }) => void;
-export declare const parseCssRotationToRadians: (value: string) => number | null;
-export declare const compensateTranslateForTransformOrigin: ({ startTranslate, deltaOrigin, rotate, scale, }: {
+export declare const compensateTranslateForTransformOrigin: ({ startTranslate, deltaOrigin, rotation, scale, }: {
     readonly startTranslate: readonly [number, number];
     readonly deltaOrigin: readonly [number, number];
-    readonly rotate: number;
-    readonly scale: readonly [number, number];
+    readonly rotation: ParsedCssRotation;
+    readonly scale: readonly [number, number, number];
 }) => readonly [number, number];
 export declare const getSelectedOutlineTransformOriginDragChanges: ({ target, startTranslate, origin, translate, }: {
     readonly target: SelectedOutlineTransformOriginDragTarget;
-    readonly startTranslate: readonly [number, number];
+    readonly startTranslate: ParsedTranslate;
     readonly origin: string;
     readonly translate: string;
 }) => {