@remotion/studio 4.0.507 → 4.0.509

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

@@ -2,7 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getOpenInMenuItems = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const no_react_1 = require("remotion/no-react");
+const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
+const get_git_menu_item_1 = require("../helpers/get-git-menu-item");
 const editor_1 = require("../icons/editor");
+const finder_1 = require("../icons/finder");
+const github_1 = require("../icons/github");
+const terminal_1 = require("../icons/terminal");
 const CodingAgentIcon_1 = require("./CodingAgentIcon");
 const menuLabel = {
     color: 'inherit',
@@ -10,8 +16,10 @@ const menuLabel = {
     fontSize: 13,
     lineHeight: '16px',
 };
-const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, }) => {
-    var _a, _b;
+const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, fileManagerDisabled, folder, location, 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) => ({
@@ -36,20 +44,64 @@ const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, exclu
         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, { iconDataUrl: codingAgent.iconDataUrl }),
+        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 gitHubItem = window.remotion_gitSource
+        ? {
+            id: 'open-in-github',
+            keyHint: null,
+            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "GitHub.com" }),
+            leftItem: jsx_runtime_1.jsx(github_1.GitHubIcon, { size: 18 }),
+            onClick: () => {
+                const gitSource = window.remotion_gitSource;
+                if (!gitSource) {
+                    return;
+                }
+                window.open(folder || !location
+                    ? (0, get_git_menu_item_1.getGitSourceBranchUrl)(gitSource)
+                    : (0, get_git_menu_item_1.getGitRefUrl)(gitSource, location, window.remotion_cwd), '_blank');
+            },
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: 'github',
+        }
+        : null;
+    const systemApps = [
+        gitHubItem,
+        showFinder
+            ? {
+                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',
+            }
+            : null,
+    ].filter(no_react_1.NoReactInternals.truthy);
+    const hasCategorizedApps = editors.length > 0 || codingAgents.length > 0 || terminals.length > 0;
     return [
         ...(editors.length > 0
             ? [
                 {
                     type: 'section-header',
-                    id: 'editors-header',
-                    label: 'Editors',
+                    id: 'editor-header',
+                    label: 'Editor',
                 },
                 ...editors,
             ]
@@ -58,13 +110,46 @@ const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, exclu
             ? [
                 {
                     type: 'section-header',
-                    id: 'agents-header',
-                    label: 'Agents',
+                    id: 'agent-header',
+                    label: 'Agent',
                 },
                 ...codingAgents,
             ]
             : []),
-        ...(editors.length > 0 || codingAgents.length > 0
+        ...(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}`,
+                })),
+            ]
+            : []),
+        ...(systemApps.length > 0
+            ? [
+                ...(hasCategorizedApps
+                    ? [
+                        {
+                            type: 'divider',
+                            id: 'open-in-system-apps-divider',
+                        },
+                    ]
+                    : []),
+                ...systemApps,
+            ]
+            : []),
+        ...(hasCategorizedApps || systemApps.length > 0
             ? [{ type: 'divider', id: 'open-in-settings-divider' }]
             : []),
         {

package/dist/components/import-assets.js

@@ -7,6 +7,7 @@ const no_react_1 = require("remotion/no-react");
 const get_static_files_1 = require("../api/get-static-files");
 const write_static_file_1 = require("../api/write-static-file");
 const clipboard_figma_1 = require("../helpers/clipboard-figma");
+const inserted_element_selection_1 = require("../helpers/inserted-element-selection");
 const install_required_package_1 = require("../helpers/install-required-package");
 const use_media_metadata_1 = require("../helpers/use-media-metadata");
 const call_api_1 = require("./call-api");
@@ -504,6 +505,12 @@ const insertCompositionElement = async ({ compositionFile, compositionId, elemen
         (0, NotificationCenter_1.showNotification)(result.reason, 4000);
         return false;
     }
+    if (result.insertedNodePath !== null) {
+        (0, inserted_element_selection_1.requestInsertedElementSelection)({
+            compositionId,
+            nodePath: result.insertedNodePath,
+        });
+    }
     return true;
 };
 const downloadRemoteAsset = (url) => {

package/dist/components/root-composition-menu-items.js

@@ -14,6 +14,7 @@ const getRootCompositionMenuItems = ({ connectionStatus, readOnlyStudio, setSele
                     folderName: null,
                     parentName: null,
                     stack: null,
+                    canvasCapture: null,
                 });
             },
             quickSwitcherLabel: 'New composition...',

package/dist/components/selected-outline-control-layout.d.ts

@@ -0,0 +1,14 @@
+import type { OutlinePoint } from './selected-outline-geometry';
+export type SelectedOutlineControlCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+export declare const getSelectedOutlineControlLayout: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint]) => {
+    rotationCorners: {
+        corner: "bottom-left" | "bottom-right" | "top-left" | "top-right";
+        point: OutlinePoint;
+    }[];
+    rotationHandleRadius: number;
+    scaleEdges: ("bottom" | "left" | "right" | "top")[];
+    scaleHitWidth: {
+        horizontal: number;
+        vertical: number;
+    };
+};

package/dist/components/selected-outline-control-layout.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSelectedOutlineControlLayout = void 0;
+// Outline points are measured in overlay pixels, keeping these sizes independent of canvas zoom.
+const handleSize = 8;
+const targetHalfSize = 4.5;
+const smallOutlineSize = handleSize * 4;
+const tinyOutlineSize = handleSize * 2;
+const distance = (from, to) => Math.hypot(to.x - from.x, to.y - from.y);
+const normalize = (point) => {
+    const length = Math.hypot(point.x, point.y);
+    if (length < 0.001) {
+        return null;
+    }
+    return { x: point.x / length, y: point.y / length };
+};
+const getRotationHandlePoint = ({ corner, points, radius, }) => {
+    const [topLeft, topRight, bottomRight, bottomLeft] = points;
+    const { point, adjacent } = {
+        'top-left': { point: topLeft, adjacent: [topRight, bottomLeft] },
+        'top-right': { point: topRight, adjacent: [topLeft, bottomRight] },
+        'bottom-right': { point: bottomRight, adjacent: [topRight, bottomLeft] },
+        'bottom-left': { point: bottomLeft, adjacent: [topLeft, bottomRight] },
+    }[corner];
+    const firstDirection = normalize({
+        x: point.x - adjacent[0].x,
+        y: point.y - adjacent[0].y,
+    });
+    const secondDirection = normalize({
+        x: point.x - adjacent[1].x,
+        y: point.y - adjacent[1].y,
+    });
+    const outlineCenter = {
+        x: (topLeft.x + topRight.x + bottomRight.x + bottomLeft.x) / 4,
+        y: (topLeft.y + topRight.y + bottomRight.y + bottomLeft.y) / 4,
+    };
+    const fallbackDirection = normalize({
+        x: point.x - outlineCenter.x,
+        y: point.y - outlineCenter.y,
+    });
+    const direction = firstDirection === null || secondDirection === null
+        ? fallbackDirection
+        : normalize({
+            x: firstDirection.x + secondDirection.x,
+            y: firstDirection.y + secondDirection.y,
+        });
+    if (direction === null) {
+        return point;
+    }
+    return {
+        x: point.x + direction.x * radius,
+        y: point.y + direction.y * radius,
+    };
+};
+const getSelectedOutlineControlLayout = (points) => {
+    const [topLeft, topRight, bottomRight, bottomLeft] = points;
+    const horizontalExtent = (distance(topLeft, topRight) + distance(bottomLeft, bottomRight)) / 2;
+    const verticalExtent = (distance(topLeft, bottomLeft) + distance(topRight, bottomRight)) / 2;
+    const isSmallX = horizontalExtent < smallOutlineSize;
+    const isSmallY = verticalExtent < smallOutlineSize;
+    const isTinyX = horizontalExtent < tinyOutlineSize;
+    const isTinyY = verticalExtent < tinyOutlineSize;
+    const targetHalfSizeX = isSmallX ? targetHalfSize / 2 : targetHalfSize;
+    const targetHalfSizeY = isSmallY ? targetHalfSize / 2 : targetHalfSize;
+    const rotationHandleRadius = Math.max(targetHalfSizeX, targetHalfSizeY) * 1.5;
+    const scaleEdges = ['top', 'right', 'bottom', 'left'].filter((edge) => {
+        // Preserve one scale control per axis when opposite edge targets would overlap.
+        if (edge === 'top') {
+            return !isTinyY;
+        }
+        if (edge === 'left') {
+            return !isTinyX;
+        }
+        return true;
+    });
+    const rotationCorners = ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => ({
+        corner,
+        point: getRotationHandlePoint({
+            corner,
+            points,
+            radius: rotationHandleRadius,
+        }),
+    }));
+    return {
+        rotationCorners: isTinyX || isTinyY ? [] : rotationCorners,
+        rotationHandleRadius,
+        scaleEdges,
+        scaleHitWidth: {
+            horizontal: targetHalfSizeY * 2,
+            vertical: targetHalfSizeX * 2,
+        },
+    };
+};
+exports.getSelectedOutlineControlLayout = getSelectedOutlineControlLayout;

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;
 }) => {

package/dist/components/selected-outline-drag.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.snapSelectedOutlineTransformOriginUv = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.snapSelectedOutlineUv = exports.selectedOutlineUvSnapThresholdPx = exports.applySelectedOutlineTransformOriginAxisLock = exports.getSelectedOutlineTransformOriginLockedAxis = exports.uvsEqual = exports.getSelectedOutlineTransformOriginDragChanges = exports.compensateTranslateForTransformOrigin = exports.parseCssRotationToRadians = exports.clearSelectedOutlineRotationDragOverrides = exports.clearSelectedOutlineScaleDragOverrides = exports.getSelectedOutlineKeyboardNudgeDirection = exports.clearSelectedOutlineDragOverrides = exports.getSelectedOutlineRotationDragChanges = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineRotationSnapStepDegrees = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineCropDragChanges = exports.getSelectedOutlineCropDragValues = exports.getSelectedOutlineCropFollowingTransformOrigin = exports.getSelectedOutlineDragChanges = exports.isSelectedOutlineDragPastThreshold = exports.applySelectedOutlineDragAxisLock = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragStates = exports.getSelectedOutlineActiveSchema = void 0;
+exports.snapSelectedOutlineTransformOriginUv = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.snapSelectedOutlineUv = exports.selectedOutlineUvSnapThresholdPx = exports.applySelectedOutlineTransformOriginAxisLock = exports.getSelectedOutlineTransformOriginLockedAxis = exports.uvsEqual = exports.getSelectedOutlineTransformOriginDragChanges = exports.compensateTranslateForTransformOrigin = exports.clearSelectedOutlineRotationDragOverrides = exports.clearSelectedOutlineScaleDragOverrides = exports.getSelectedOutlineKeyboardNudgeDirection = exports.clearSelectedOutlineDragOverrides = exports.getSelectedOutlineRotationDragChanges = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineRotationSnapStepDegrees = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutline3DRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineCropDragChanges = exports.getSelectedOutlineCropDragValues = exports.getSelectedOutlineCropFollowingTransformOrigin = exports.getSelectedOutlineDragChanges = exports.isSelectedOutlineDragPastThreshold = exports.applySelectedOutlineDragAxisLock = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragStates = exports.getSelectedOutlineActiveSchema = void 0;
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const selected_outline_geometry_1 = require("./selected-outline-geometry");
@@ -35,7 +35,7 @@ const getSelectedOutlineDragStates = ({ dragTargets, getDragOverrides, timelineP
             frame: sourceFrame,
             shouldResortToDefaultValueIfUndefined: true,
         });
-        const [startX, startY] = (0, timeline_translate_utils_1.parseTranslate)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px'));
+        const [startX, startY, startZ] = (0, timeline_translate_utils_1.parseTranslate)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px'));
         return {
             defaultValue: target.fieldDefault !== undefined
                 ? JSON.stringify(target.fieldDefault)
@@ -44,6 +44,7 @@ const getSelectedOutlineDragStates = ({ dragTargets, getDragOverrides, timelineP
             sourceFrame,
             startX,
             startY,
+            startZ,
             target,
         };
     });
@@ -52,7 +53,11 @@ exports.getSelectedOutlineDragStates = getSelectedOutlineDragStates;
 const getSelectedOutlineDragValues = ({ dragStates, deltaX, deltaY, }) => {
     return new Map(dragStates.map((dragState) => [
         dragState.key,
-        (0, timeline_translate_utils_1.serializeTranslate)(dragState.startX + deltaX, dragState.startY + deltaY),
+        (0, timeline_translate_utils_1.serializeTranslate)([
+            dragState.startX + deltaX,
+            dragState.startY + deltaY,
+            dragState.startZ,
+        ]),
     ]));
 };
 exports.getSelectedOutlineDragValues = getSelectedOutlineDragValues;
@@ -78,7 +83,11 @@ const getSelectedOutlineDragChanges = ({ dragStates, lastValues, }) => {
             continue;
         }
         if (dragState.target.propStatus.status === 'keyframed') {
-            const startValue = (0, timeline_translate_utils_1.serializeTranslate)(dragState.startX, dragState.startY);
+            const startValue = (0, timeline_translate_utils_1.serializeTranslate)([
+                dragState.startX,
+                dragState.startY,
+                dragState.startZ,
+            ]);
             if (value === startValue) {
                 continue;
             }
@@ -426,24 +435,62 @@ const getSelectedOutlineRotationDragStates = ({ dragTargets, getDragOverrides, t
             frame: sourceFrame,
             shouldResortToDefaultValueIfUndefined: true,
         });
+        const startValue = String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0deg');
         return {
             defaultValue: target.fieldDefault !== undefined
                 ? JSON.stringify(target.fieldDefault)
                 : null,
             key: remotion_1.Internals.makeSequencePropsSubscriptionKey(target.nodePath),
             sourceFrame,
-            startDegrees: (0, timeline_rotation_utils_1.parseCssRotationToDegrees)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0deg')),
+            startDegrees: (0, timeline_rotation_utils_1.parseCssRotationToDegrees)(startValue),
+            startRotation: (0, timeline_rotation_utils_1.parseCssRotationToEuler)(startValue),
+            startValue,
             target,
         };
     });
 };
 exports.getSelectedOutlineRotationDragStates = getSelectedOutlineRotationDragStates;
+const getSelectedOutline3DRotationDragValues = ({ dragStates, rotationXDeltaDegrees, rotationYDeltaDegrees, }) => {
+    return new Map(dragStates.map((dragState) => {
+        const decimalPlaces = Math.max(6, (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+            defaultDecimalPlaces: 1,
+            step: dragState.target.fieldSchema.step,
+        }));
+        const { startRotation } = dragState;
+        return [
+            dragState.key,
+            (0, timeline_rotation_utils_1.serializeCssRotationFromEuler)({
+                rotation: [
+                    startRotation[0] + rotationXDeltaDegrees,
+                    startRotation[1] + rotationYDeltaDegrees,
+                    startRotation[2],
+                ],
+                decimalPlaces,
+            }),
+        ];
+    }));
+};
+exports.getSelectedOutline3DRotationDragValues = getSelectedOutline3DRotationDragValues;
 const getSelectedOutlineRotationDragValues = ({ dragStates, rotationDeltaDegrees, }) => {
     return new Map(dragStates.map((dragState) => {
         const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
             defaultDecimalPlaces: 1,
             step: dragState.target.fieldSchema.step,
         });
+        const { startRotation } = dragState;
+        if (dragState.target.transform3DMode) {
+            return [
+                dragState.key,
+                (0, timeline_rotation_utils_1.serializeCssRotationFromEuler)({
+                    rotation: [
+                        startRotation[0],
+                        startRotation[1],
+                        startRotation[2] + rotationDeltaDegrees,
+                    ],
+                    decimalPlaces: Math.max(6, decimalPlaces),
+                }),
+            ];
+        }
         return [
             dragState.key,
             (0, timeline_rotation_utils_1.serializeCssRotation)(dragState.startDegrees + rotationDeltaDegrees, decimalPlaces),
@@ -457,10 +504,11 @@ const snapSelectedOutlineRotationDeltaDegrees = ({ dragStates, rotationDeltaDegr
     if (anchor === undefined) {
         return rotationDeltaDegrees;
     }
-    return (Math.round((anchor.startDegrees + rotationDeltaDegrees) /
+    const startDegrees = anchor.startRotation[2];
+    return (Math.round((startDegrees + rotationDeltaDegrees) /
         exports.selectedOutlineRotationSnapStepDegrees) *
         exports.selectedOutlineRotationSnapStepDegrees -
-        anchor.startDegrees);
+        startDegrees);
 };
 exports.snapSelectedOutlineRotationDeltaDegrees = snapSelectedOutlineRotationDeltaDegrees;
 const getSelectedOutlineRotationDragChanges = ({ dragStates, lastValues, }) => {
@@ -471,11 +519,7 @@ const getSelectedOutlineRotationDragChanges = ({ dragStates, lastValues, }) => {
             continue;
         }
         if (dragState.target.propStatus.status === 'keyframed') {
-            const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
-                defaultDecimalPlaces: 1,
-                step: dragState.target.fieldSchema.step,
-            });
-            const startValue = (0, timeline_rotation_utils_1.serializeCssRotation)(dragState.startDegrees, decimalPlaces);
+            const { startValue } = dragState;
             if (value === startValue) {
                 continue;
             }
@@ -545,36 +589,26 @@ const clearSelectedOutlineRotationDragOverrides = ({ clearDragOverrides, dragSta
     }
 };
 exports.clearSelectedOutlineRotationDragOverrides = clearSelectedOutlineRotationDragOverrides;
-const parseCssRotationToRadians = (value) => {
-    const match = value
-        .trim()
-        .match(/^([+-]?(?:\d+\.?\d*|\.\d+))(deg|rad|turn|grad)$/);
-    if (!match) {
-        return null;
-    }
-    const number = Number(match[1]);
-    if (!Number.isFinite(number)) {
-        return null;
-    }
-    if (match[2] === 'rad') {
-        return number;
-    }
-    if (match[2] === 'turn') {
-        return number * Math.PI * 2;
-    }
-    if (match[2] === 'grad') {
-        return (number / 400) * Math.PI * 2;
+const compensateTranslateForTransformOrigin = ({ startTranslate, deltaOrigin, rotation, scale, }) => {
+    const [rawAxisX, rawAxisY, rawAxisZ] = rotation.axis;
+    const axisLength = Math.hypot(rawAxisX, rawAxisY, rawAxisZ);
+    if (axisLength === 0) {
+        return [
+            startTranslate[0] + deltaOrigin[0] * (scale[0] - 1),
+            startTranslate[1] + deltaOrigin[1] * (scale[1] - 1),
+        ];
     }
-    return (number / 180) * Math.PI;
-};
-exports.parseCssRotationToRadians = parseCssRotationToRadians;
-const compensateTranslateForTransformOrigin = ({ startTranslate, deltaOrigin, rotate, scale, }) => {
-    const cos = Math.cos(rotate);
-    const sin = Math.sin(rotate);
-    const matrixA = cos * scale[0];
-    const matrixB = sin * scale[0];
-    const matrixC = -sin * scale[1];
-    const matrixD = cos * scale[1];
+    const axisX = rawAxisX / axisLength;
+    const axisY = rawAxisY / axisLength;
+    const axisZ = rawAxisZ / axisLength;
+    const radians = (rotation.degrees * Math.PI) / 180;
+    const cos = Math.cos(radians);
+    const sin = Math.sin(radians);
+    const oneMinusCos = 1 - cos;
+    const matrixA = (cos + axisX * axisX * oneMinusCos) * scale[0];
+    const matrixB = (axisY * axisX * oneMinusCos + axisZ * sin) * scale[0];
+    const matrixC = (axisX * axisY * oneMinusCos - axisZ * sin) * scale[1];
+    const matrixD = (cos + axisY * axisY * oneMinusCos) * scale[1];
     const transformedDeltaX = matrixA * deltaOrigin[0] + matrixC * deltaOrigin[1];
     const transformedDeltaY = matrixB * deltaOrigin[0] + matrixD * deltaOrigin[1];
     const compensationX = deltaOrigin[0] - transformedDeltaX;
@@ -648,7 +682,11 @@ const getSelectedOutlineTransformOriginDragChanges = ({ target, startTranslate,
             nodePath: target.nodePath,
             fieldKey: selected_outline_types_1.translateFieldKey,
             sourceFrame: keyframe.frame,
-            value: (0, timeline_translate_utils_1.serializeTranslate)(keyframeTranslate[0] + deltaTranslateX, keyframeTranslate[1] + deltaTranslateY),
+            value: (0, timeline_translate_utils_1.serializeTranslate)([
+                keyframeTranslate[0] + deltaTranslateX,
+                keyframeTranslate[1] + deltaTranslateY,
+                keyframeTranslate[2],
+            ]),
             schema: target.schema,
         });
     }

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

@@ -63,12 +63,17 @@ type SelectedTransformOriginInfo = {
     readonly sequenceKey: string;
     readonly displayFrame: number | null;
 };
+export type SelectedRotationInfo = {
+    readonly sequenceKey: string;
+    readonly displayFrame: number | null;
+};
 export type SelectedCropInfo = {
     readonly sequenceKey: string;
     readonly displayFrame: number | null;
 };
 export declare const getSelectedCropInfo: (selectedItems: readonly TimelineSelection[]) => SelectedCropInfo | null;
 export declare const getSelectedTransformOriginInfo: (selectedItems: readonly TimelineSelection[]) => SelectedTransformOriginInfo | null;
+export declare const getSelectedRotationInfo: (selectedItems: readonly TimelineSelection[]) => SelectedRotationInfo | null;
 export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideIdsToNodePaths, compositions, timelinePosition, }: {
     readonly sequences: readonly TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;

package/dist/components/selected-outline-measurement.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.outlinesAreEqual = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedTransformOriginInfo = exports.getSelectedCropInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.cropOutlinePoints = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
+exports.outlinesAreEqual = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedRotationInfo = exports.getSelectedTransformOriginInfo = exports.getSelectedCropInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.cropOutlinePoints = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
 const colors_1 = require("../helpers/colors");
 const get_box_quads_ponyfill_1 = require("../helpers/get-box-quads-ponyfill");
@@ -352,6 +352,33 @@ const getSelectedTransformOriginInfo = (selectedItems) => {
     };
 };
 exports.getSelectedTransformOriginInfo = getSelectedTransformOriginInfo;
+const getSelectedRotationInfo = (selectedItems) => {
+    if (selectedItems.length !== 1) {
+        return null;
+    }
+    const [selectedItem] = selectedItems;
+    if (selectedItem.type === 'sequence-prop' &&
+        selectedItem.key === selected_outline_types_1.rotateFieldKey) {
+        return {
+            sequenceKey: (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(selectedItem.nodePathInfo),
+            displayFrame: null,
+        };
+    }
+    if (selectedItem.type !== 'keyframe' && selectedItem.type !== 'easing') {
+        return null;
+    }
+    const field = getKeyframeOrEasingField(selectedItem);
+    if ((field === null || field === void 0 ? void 0 : field.type) !== 'sequence' || field.fieldKey !== selected_outline_types_1.rotateFieldKey) {
+        return null;
+    }
+    return {
+        sequenceKey: (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(selectedItem.nodePathInfo),
+        displayFrame: selectedItem.type === 'keyframe'
+            ? selectedItem.frame
+            : selectedItem.fromFrame,
+    };
+};
+exports.getSelectedRotationInfo = getSelectedRotationInfo;
 const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths, compositions = [], timelinePosition, }) => {
     return (0, calculate_timeline_1.calculateTimeline)({
         sequences: [...sequences],

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

@@ -12,9 +12,11 @@ export type SelectedOutlineLayoutTarget = {
     readonly ref: React.RefObject<Element | null>;
     readonly selected: boolean;
     readonly selectedForCrop: boolean;
+    readonly selectedForRotation: boolean;
     readonly selectedForTransformOrigin: boolean;
     readonly selectedForUvHandles: boolean;
     readonly showSelectedOutline: boolean;
+    readonly transformOriginValue: string;
     readonly selection: TimelineSelection;
     readonly sequence: TSequence;
     readonly crop: {
@@ -113,6 +115,7 @@ export type SelectedOutlineRotationDragTarget = {
     readonly keyframeDisplayOffset: number;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
+    readonly transform3DMode: boolean;
     readonly transformOriginValue: string;
 };
 export type SelectedOutlineDragState = {
@@ -121,6 +124,7 @@ export type SelectedOutlineDragState = {
     readonly sourceFrame: number;
     readonly startX: number;
     readonly startY: number;
+    readonly startZ: number | null;
     readonly target: SelectedOutlineDragTarget;
 };
 export type SelectedOutlineScaleDragState = {
@@ -137,6 +141,8 @@ export type SelectedOutlineRotationDragState = {
     readonly key: string;
     readonly sourceFrame: number;
     readonly startDegrees: number;
+    readonly startRotation: readonly [number, number, number];
+    readonly startValue: string;
     readonly target: SelectedOutlineRotationDragTarget;
 };
 export type SequenceWithSelectedOutline = {