@remotion/studio 4.0.507 → 4.0.508

package/dist/components/Timeline/TimelineTranslateField.js

@@ -7,11 +7,16 @@ 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 Transform3DModeContext_1 = require("./Transform3DModeContext");
 const leftDraggerStyle = {
+    paddingBottom: 2,
     paddingLeft: 0,
+    paddingTop: 2,
 };
 const rightDraggerStyle = {
+    paddingBottom: 2,
     paddingRight: 0,
+    paddingTop: 2,
 };
 const containerStyle = {
     display: 'flex',
@@ -19,9 +24,13 @@ const containerStyle = {
 };
 const translateDragSensitivity = 3;
 const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
+    var _a;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
-    const [codeX, codeY] = (0, react_1.useMemo)(() => (0, timeline_translate_utils_1.parseTranslate)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px')), [effectiveValue]);
+    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 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;
     const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
@@ -34,15 +43,18 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
             value: v,
         });
     }, [field.fieldSchema]);
+    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]);
     // --- X callbacks ---
     const onXChange = (0, react_1.useCallback)((newVal) => {
         setDragX(newVal);
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-        onDragValueChange((0, timeline_translate_utils_1.serializeTranslate)(newVal, currentY, decimalPlaces));
-    }, [onDragValueChange, dragY, codeY, decimalPlaces]);
+        onDragValueChange(serialize(newVal, currentY));
+    }, [codeY, dragY, onDragValueChange, serialize]);
     const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-        const newStr = (0, timeline_translate_utils_1.serializeTranslate)(newVal, currentY, decimalPlaces);
+        const newStr = serialize(newVal, currentY);
         if (newStr !== propStatus.codeValue) {
             onSave(newStr).finally(() => {
                 setDragX(null);
@@ -53,12 +65,12 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
             setDragX(null);
             onDragEnd();
         }
-    }, [dragY, codeY, decimalPlaces, propStatus, onSave, onDragEnd]);
+    }, [codeY, dragY, onDragEnd, onSave, propStatus, serialize]);
     const onXTextChange = (0, react_1.useCallback)((newVal) => {
         const parsed = Number(newVal);
         if (!Number.isNaN(parsed)) {
             const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-            const newStr = (0, timeline_translate_utils_1.serializeTranslate)(parsed, currentY, decimalPlaces);
+            const newStr = serialize(parsed, currentY);
             if (newStr !== propStatus.codeValue) {
                 setDragX(parsed);
                 onSave(newStr).finally(() => {
@@ -66,16 +78,16 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
                 });
             }
         }
-    }, [propStatus, dragY, codeY, decimalPlaces, onSave]);
+    }, [codeY, dragY, onSave, propStatus, serialize]);
     // --- Y callbacks ---
     const onYChange = (0, react_1.useCallback)((newVal) => {
         setDragY(newVal);
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-        onDragValueChange((0, timeline_translate_utils_1.serializeTranslate)(currentX, newVal, decimalPlaces));
-    }, [onDragValueChange, dragX, codeX, decimalPlaces]);
+        onDragValueChange(serialize(currentX, newVal));
+    }, [codeX, dragX, onDragValueChange, serialize]);
     const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-        const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, newVal, decimalPlaces);
+        const newStr = serialize(currentX, newVal);
         if (newStr !== propStatus.codeValue) {
             onSave(newStr).finally(() => {
                 setDragY(null);
@@ -86,12 +98,12 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
             setDragY(null);
             onDragEnd();
         }
-    }, [dragX, codeX, decimalPlaces, propStatus, onSave, onDragEnd]);
+    }, [codeX, dragX, onDragEnd, onSave, propStatus, serialize]);
     const onYTextChange = (0, react_1.useCallback)((newVal) => {
         const parsed = Number(newVal);
         if (!Number.isNaN(parsed)) {
             const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-            const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, parsed, decimalPlaces);
+            const newStr = serialize(currentX, parsed);
             if (newStr !== propStatus.codeValue) {
                 setDragY(parsed);
                 onSave(newStr).finally(() => {
@@ -99,9 +111,37 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
                 });
             }
         }
-    }, [propStatus, onSave, dragX, codeX, decimalPlaces]);
+    }, [codeX, dragX, onSave, propStatus, serialize]);
+    const onZChange = (0, react_1.useCallback)((newVal) => {
+        setDragZ(newVal);
+        onDragValueChange(serialize(dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY, newVal));
+    }, [codeX, codeY, dragX, dragY, onDragValueChange, serialize]);
+    const onZChangeEnd = (0, react_1.useCallback)((newVal) => {
+        const newStr = serialize(dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY, newVal);
+        if (newStr !== propStatus.codeValue) {
+            onSave(newStr).finally(() => {
+                setDragZ(null);
+                onDragEnd();
+            });
+        }
+        else {
+            setDragZ(null);
+            onDragEnd();
+        }
+    }, [codeX, codeY, dragX, dragY, onDragEnd, onSave, propStatus, serialize]);
+    const onZTextChange = (0, react_1.useCallback)((newVal) => {
+        const parsed = Number(newVal);
+        if (!Number.isNaN(parsed)) {
+            const newStr = serialize(dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY, parsed);
+            if (newStr !== propStatus.codeValue) {
+                setDragZ(parsed);
+                onSave(newStr).finally(() => setDragZ(null));
+            }
+        }
+    }, [codeX, codeY, dragX, dragY, onSave, propStatus, serialize]);
     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, 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 }), 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, 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 })
-        ] }));
+            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" })
+                ] })) : null] }));
 };
 exports.TimelineTranslateField = TimelineTranslateField;

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

@@ -0,0 +1 @@
+export declare const Transform3DModeContext: import("react").Context<boolean>;

package/dist/components/Timeline/Transform3DModeContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Transform3DModeContext = void 0;
+const react_1 = require("react");
+exports.Transform3DModeContext = (0, react_1.createContext)(false);

package/dist/components/Timeline/delete-selected-timeline-item.js

@@ -78,12 +78,6 @@ const deleteEffects = (effects) => {
     }))
         .then((result) => {
         if (result.success) {
-            const singleEffect = effects[0];
-            (0, NotificationCenter_1.showNotification)(effects.length === 1 && (singleEffect === null || singleEffect === void 0 ? void 0 : singleEffect.type) === 'single-effect'
-                ? 'Removed effect from source file'
-                : effects.length === 1
-                    ? 'Removed effects from source file'
-                    : 'Removed effects from source files', 2000);
             return true;
         }
         (0, NotificationCenter_1.showNotification)(result.reason, 4000);

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

@@ -5,6 +5,7 @@ const no_react_1 = require("remotion/no-react");
 const format_file_location_1 = require("../../helpers/format-file-location");
 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");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const normalizeMenuDividers = (items) => {
     var _a;
@@ -47,9 +48,20 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
             editorInfo,
             excludeCodingAgentId: (_g = defaultCodingAgent === null || defaultCodingAgent === void 0 ? void 0 : defaultCodingAgent.id) !== null && _g !== void 0 ? _g : null,
             excludeEditorId: defaultEditorId,
+            fileManagerDisabled: !(originalLocation === null || originalLocation === void 0 ? void 0 : originalLocation.source),
+            folder: false,
             onConfigureApps,
             onOpenInCodingAgent: openInCodingAgentWithContext,
             onOpenInEditor: openInEditor,
+            onOpenInFileExplorer: () => {
+                if (!(originalLocation === null || originalLocation === void 0 ? void 0 : originalLocation.source)) {
+                    return;
+                }
+                (0, actions_1.openInFileExplorer)({ directory: originalLocation.source }).catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
+                });
+            },
+            onOpenInTerminal: null,
         })
         : [];
     const items = [
@@ -110,12 +122,7 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                 if (!contextForAgents) {
                     return;
                 }
-                navigator.clipboard
-                    .writeText(contextForAgents)
-                    .then(() => {
-                    (0, NotificationCenter_1.showNotification)('Copied context for agents', 1000);
-                })
-                    .catch((err) => {
+                navigator.clipboard.writeText(contextForAgents).catch((err) => {
                     (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
                 });
             },

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

@@ -2,7 +2,7 @@ import type { SequenceNodePath, InteractivitySchema, VideoConfigValues } from 'r
 import { subscribeToSequenceProps } from '../sequence-props-api';
 type SubscribeResult = Awaited<ReturnType<typeof subscribeToSequenceProps>>;
 type ApplyResult = (result: SubscribeResult) => void;
-export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, }: {
+export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, stack, }: {
     fileName: string;
     line: number;
     column: number;
@@ -14,6 +14,7 @@ export declare const acquireSequencePropsSubscription: ({ fileName, line, column
     applyOnce: ApplyResult;
     applyEach: ApplyResult;
     videoConfigValues: VideoConfigValues;
+    stack: string | null;
 }) => {
     release: () => void;
 };

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

@@ -4,9 +4,11 @@ exports.acquireSequencePropsSubscription = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const sequence_props_api_1 = require("../sequence-props-api");
-const makeKey = ({ fileName, line, column, componentIdentity, sequenceKeys, assetKeys, effectKeys, videoConfigValues, }) => `${fileName}\0${line}\0${column}\0${componentIdentity !== null && componentIdentity !== void 0 ? componentIdentity : ''}\0${sequenceKeys.join('\0')}\0${assetKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}\0${JSON.stringify(videoConfigValues)}`;
+// The generated stack distinguishes Fast Refresh instances even when source maps
+// resolve both the old and new JSX nodes to the same line and column.
+const makeKey = ({ fileName, line, column, componentIdentity, sequenceKeys, assetKeys, effectKeys, videoConfigValues, stack, }) => `${fileName}\0${line}\0${column}\0${componentIdentity !== null && componentIdentity !== void 0 ? componentIdentity : ''}\0${sequenceKeys.join('\0')}\0${assetKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}\0${JSON.stringify(videoConfigValues)}\0${stack !== null && stack !== void 0 ? stack : ''}`;
 const entries = new Map();
-const acquireSequencePropsSubscription = ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, }) => {
+const acquireSequencePropsSubscription = ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, stack, }) => {
     const sequenceKeys = (0, studio_shared_1.getAllSchemaKeys)(schema);
     const assetKeys = (0, studio_shared_1.getAssetSchemaKeys)(schema);
     const effectKeys = effects.map((effect) => (0, studio_shared_1.getAllSchemaKeys)(effect));
@@ -19,6 +21,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, comp
         assetKeys,
         effectKeys,
         videoConfigValues,
+        stack,
     });
     let entry = entries.get(key);
     if (!entry) {

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

@@ -150,8 +150,8 @@ const formatTranslateTimelineFieldValueForDisplay = ({ fieldSchema, value, }) =>
     if (numericValue !== null) {
         return formatTranslateCoordinateForDisplay(numericValue, decimalPlaces);
     }
-    const [x, y] = (0, timeline_translate_utils_1.parseTranslate)(String(value !== null && value !== void 0 ? value : '0px 0px'));
-    return (0, timeline_translate_utils_1.serializeTranslate)(x, y, 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 formatTransformOriginAxisValueForDisplay = ({ decimalPlaces, unit, value, }) => {
     return `${(0, timeline_field_utils_1.formatTimelineNumber)({

package/dist/components/Timeline/timeline-field-row-layout.d.ts

@@ -1,4 +1,10 @@
 import type React from 'react';
+import { type SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const isTimelineFieldStacked: ({ field, transform3DMode, }: {
+    readonly field: SchemaFieldInfo;
+    readonly transform3DMode: boolean;
+}) => boolean;
 export declare const getTimelineFieldLabelRowStyle: (depth: number, basePadding?: number | undefined) => React.CSSProperties;
 export declare const timelineFieldValueColumnStyle: React.CSSProperties;
+export declare const timelineCompactStackedFieldValueColumnStyle: React.CSSProperties;
 export declare const timelineStackedFieldContentStyle: React.CSSProperties;

package/dist/components/Timeline/timeline-field-row-layout.js

@@ -1,8 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.timelineStackedFieldContentStyle = exports.timelineFieldValueColumnStyle = exports.getTimelineFieldLabelRowStyle = void 0;
+exports.timelineStackedFieldContentStyle = exports.timelineCompactStackedFieldValueColumnStyle = exports.timelineFieldValueColumnStyle = exports.getTimelineFieldLabelRowStyle = exports.isTimelineFieldStacked = void 0;
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_row_layout_1 = require("./timeline-row-layout");
+const isTimelineFieldStacked = ({ field, transform3DMode, }) => {
+    return (field.typeName === 'text-content' ||
+        (transform3DMode &&
+            (field.typeName === 'translate' ||
+                field.typeName === 'rotation-css' ||
+                field.typeName === 'scale' ||
+                field.typeName === 'transform-origin')));
+};
+exports.isTimelineFieldStacked = isTimelineFieldStacked;
 const getTimelineFieldLabelRowStyle = (depth, basePadding) => {
     return {
         flex: `0 0 ${(0, timeline_row_layout_1.getTimelineFieldLabelFlexBasis)(depth, basePadding)}`,
@@ -22,6 +31,12 @@ exports.timelineFieldValueColumnStyle = {
     minWidth: 0,
     paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
 };
+exports.timelineCompactStackedFieldValueColumnStyle = {
+    ...exports.timelineFieldValueColumnStyle,
+    marginBottom: -2,
+    position: 'relative',
+    top: -2,
+};
 exports.timelineStackedFieldContentStyle = {
     alignSelf: 'stretch',
     display: 'flex',

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

@@ -1,2 +1,18 @@
+export type ParsedCssRotation = {
+    readonly axis: readonly [number, number, number];
+    readonly degrees: number;
+};
+export declare const parseCssRotation: (value: string) => ParsedCssRotation | null;
 export declare const parseCssRotationToDegrees: (value: string) => number;
+export type CssRotationEuler = readonly [number, number, number];
+export declare const parseCssRotationToEuler: (value: string) => CssRotationEuler;
+export declare const serializeCssRotation3d: ({ axis, degrees, decimalPlaces, }: {
+    readonly axis: readonly [number, number, number];
+    readonly degrees: number;
+    readonly decimalPlaces?: number | undefined;
+}) => string;
+export declare const serializeCssRotationFromEuler: ({ rotation, decimalPlaces, }: {
+    readonly rotation: CssRotationEuler;
+    readonly decimalPlaces?: number | undefined;
+}) => string;
 export declare const serializeCssRotation: (value: number, decimalPlaces?: number) => string;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.serializeCssRotation = exports.parseCssRotationToDegrees = void 0;
+exports.serializeCssRotation = exports.serializeCssRotationFromEuler = exports.serializeCssRotation3d = exports.parseCssRotationToEuler = exports.parseCssRotationToDegrees = exports.parseCssRotation = void 0;
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const unitPattern = /^([+-]?(?:\d+\.?\d*|\.\d+))(deg|rad|turn|grad)$/;
 const unitToDegrees = {
@@ -9,10 +9,54 @@ const unitToDegrees = {
     turn: 360,
     grad: 360 / 400,
 };
+const parseCssRotation = (value) => {
+    const trimmed = value.trim();
+    const bareAngle = trimmed.match(unitPattern);
+    if (bareAngle) {
+        return {
+            axis: [0, 0, 1],
+            degrees: (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(bareAngle[1]) * unitToDegrees[bareAngle[2]]),
+        };
+    }
+    const keywordAxis = /^(x|y|z)\s+(.+)$/i.exec(trimmed);
+    if (keywordAxis) {
+        const keywordAngle = keywordAxis[2].match(unitPattern);
+        if (!keywordAngle) {
+            return null;
+        }
+        const keywordAxisName = keywordAxis[1].toLowerCase();
+        return {
+            axis: keywordAxisName === 'x'
+                ? [1, 0, 0]
+                : keywordAxisName === 'y'
+                    ? [0, 1, 0]
+                    : [0, 0, 1],
+            degrees: (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(keywordAngle[1]) * unitToDegrees[keywordAngle[2]]),
+        };
+    }
+    const vectorAxis = /^(\S+)\s+(\S+)\s+(\S+)\s+(.+)$/.exec(trimmed);
+    if (!vectorAxis) {
+        return null;
+    }
+    const vectorAxisComponents = [
+        Number(vectorAxis[1]),
+        Number(vectorAxis[2]),
+        Number(vectorAxis[3]),
+    ];
+    const vectorAngle = vectorAxis[4].match(unitPattern);
+    if (!vectorAxisComponents.every(Number.isFinite) || !vectorAngle) {
+        return null;
+    }
+    return {
+        axis: vectorAxisComponents,
+        degrees: (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(vectorAngle[1]) * unitToDegrees[vectorAngle[2]]),
+    };
+};
+exports.parseCssRotation = parseCssRotation;
 const parseCssRotationToDegrees = (value) => {
-    const match = value.trim().match(unitPattern);
-    if (match) {
-        return (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(match[1]) * unitToDegrees[match[2]]);
+    const parsed = (0, exports.parseCssRotation)(value);
+    if (parsed) {
+        return parsed.degrees;
     }
     if (typeof DOMMatrix === 'undefined') {
         return 0;
@@ -26,6 +70,103 @@ const parseCssRotationToDegrees = (value) => {
     }
 };
 exports.parseCssRotationToDegrees = parseCssRotationToDegrees;
+const parseCssRotationToEuler = (value) => {
+    const parsed = (0, exports.parseCssRotation)(value);
+    if (parsed === null) {
+        return [0, 0, (0, exports.parseCssRotationToDegrees)(value)];
+    }
+    const [axisX, axisY, axisZ] = parsed.axis;
+    if (parsed.degrees === 0) {
+        return [0, 0, 0];
+    }
+    if (axisY === 0 && axisZ === 0 && axisX !== 0) {
+        return [Math.sign(axisX) * parsed.degrees, 0, 0];
+    }
+    if (axisX === 0 && axisZ === 0 && axisY !== 0) {
+        return [0, Math.sign(axisY) * parsed.degrees, 0];
+    }
+    if (axisX === 0 && axisY === 0 && axisZ !== 0) {
+        return [0, 0, Math.sign(axisZ) * parsed.degrees];
+    }
+    const axisLength = Math.hypot(axisX, axisY, axisZ);
+    if (axisLength === 0) {
+        return [0, 0, 0];
+    }
+    const halfAngle = (parsed.degrees * Math.PI) / 360;
+    const sinHalfAngle = Math.sin(halfAngle);
+    const quaternionX = (axisX / axisLength) * sinHalfAngle;
+    const quaternionY = (axisY / axisLength) * sinHalfAngle;
+    const quaternionZ = (axisZ / axisLength) * sinHalfAngle;
+    const quaternionW = Math.cos(halfAngle);
+    // Decompose the rotation using the same X → Y → Z order used when serializing.
+    const matrix11 = 1 - 2 * (quaternionY * quaternionY + quaternionZ * quaternionZ);
+    const matrix12 = 2 * (quaternionX * quaternionY - quaternionZ * quaternionW);
+    const matrix13 = 2 * (quaternionX * quaternionZ + quaternionY * quaternionW);
+    const matrix22 = 1 - 2 * (quaternionX * quaternionX + quaternionZ * quaternionZ);
+    const matrix23 = 2 * (quaternionY * quaternionZ - quaternionX * quaternionW);
+    const matrix32 = 2 * (quaternionY * quaternionZ + quaternionX * quaternionW);
+    const matrix33 = 1 - 2 * (quaternionX * quaternionX + quaternionY * quaternionY);
+    const clampedMatrix13 = Math.max(-1, Math.min(1, matrix13));
+    const rotationY = Math.asin(clampedMatrix13);
+    const rotationX = Math.abs(clampedMatrix13) < 0.9999999
+        ? Math.atan2(-matrix23, matrix33)
+        : Math.atan2(matrix32, matrix22);
+    const rotationZ = Math.abs(clampedMatrix13) < 0.9999999 ? Math.atan2(-matrix12, matrix11) : 0;
+    return [rotationX, rotationY, rotationZ].map((rotation) => (0, timeline_field_utils_1.normalizeTimelineNumber)(rotation * (180 / Math.PI)));
+};
+exports.parseCssRotationToEuler = parseCssRotationToEuler;
+const serializeCssRotation3d = ({ axis, degrees, decimalPlaces = 6, }) => {
+    const factor = 10 ** decimalPlaces;
+    const values = [...axis, degrees].map((value) => {
+        const rounded = Math.round((0, timeline_field_utils_1.normalizeTimelineNumber)(value) * factor) / factor;
+        return Object.is(rounded, -0) ? 0 : rounded;
+    });
+    return `${values[0]} ${values[1]} ${values[2]} ${values[3]}deg`;
+};
+exports.serializeCssRotation3d = serializeCssRotation3d;
+const serializeCssRotationFromEuler = ({ rotation, decimalPlaces = 6, }) => {
+    const [rotationX, rotationY, rotationZ] = rotation.map((value) => (0, timeline_field_utils_1.normalizeTimelineNumber)(value));
+    if (rotationY === 0 && rotationZ === 0) {
+        return rotationX === 0
+            ? (0, exports.serializeCssRotation)(0, decimalPlaces)
+            : `x ${(0, exports.serializeCssRotation)(rotationX, decimalPlaces)}`;
+    }
+    if (rotationX === 0 && rotationZ === 0) {
+        return `y ${(0, exports.serializeCssRotation)(rotationY, decimalPlaces)}`;
+    }
+    if (rotationX === 0 && rotationY === 0) {
+        return (0, exports.serializeCssRotation)(rotationZ, decimalPlaces);
+    }
+    const halfRotationX = (rotationX * Math.PI) / 360;
+    const halfRotationY = (rotationY * Math.PI) / 360;
+    const halfRotationZ = (rotationZ * Math.PI) / 360;
+    const sinX = Math.sin(halfRotationX);
+    const cosX = Math.cos(halfRotationX);
+    const sinY = Math.sin(halfRotationY);
+    const cosY = Math.cos(halfRotationY);
+    const sinZ = Math.sin(halfRotationZ);
+    const cosZ = Math.cos(halfRotationZ);
+    // Compose the three editable angles into the axis-angle form CSS rotate accepts.
+    const quaternionX = sinX * cosY * cosZ + cosX * sinY * sinZ;
+    const quaternionY = cosX * sinY * cosZ - sinX * cosY * sinZ;
+    const quaternionZ = cosX * cosY * sinZ + sinX * sinY * cosZ;
+    const quaternionW = cosX * cosY * cosZ - sinX * sinY * sinZ;
+    const angle = 2 * Math.acos(Math.max(-1, Math.min(1, quaternionW)));
+    const sinHalfAngle = Math.sqrt(Math.max(0, 1 - quaternionW * quaternionW));
+    if (sinHalfAngle < 0.0000001) {
+        return (0, exports.serializeCssRotation)(0, decimalPlaces);
+    }
+    return (0, exports.serializeCssRotation3d)({
+        axis: [
+            quaternionX / sinHalfAngle,
+            quaternionY / sinHalfAngle,
+            quaternionZ / sinHalfAngle,
+        ],
+        degrees: angle * (180 / Math.PI),
+        decimalPlaces,
+    });
+};
+exports.serializeCssRotationFromEuler = serializeCssRotationFromEuler;
 const serializeCssRotation = (value, decimalPlaces = 6) => {
     const factor = 10 ** decimalPlaces;
     const rounded = Math.round((0, timeline_field_utils_1.normalizeTimelineNumber)(value) * factor) / factor;

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

@@ -1,2 +1,3 @@
-export declare const parseTranslate: (value: string) => [number, number];
-export declare const serializeTranslate: (x: number, y: number, decimalPlaces?: number) => string;
+export type ParsedTranslate = readonly [number, number, number | null];
+export declare const parseTranslate: (value: string) => ParsedTranslate;
+export declare const serializeTranslate: ([x, y, z]: ParsedTranslate, decimalPlaces?: number) => string;

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

@@ -2,16 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.serializeTranslate = exports.parseTranslate = void 0;
 const timeline_field_utils_1 = require("./timeline-field-utils");
-const PIXEL_PATTERN = /^(-?\d+(?:\.\d+)?)px(?:\s+(-?\d+(?:\.\d+)?)px)?$/;
+const PIXEL_PATTERN = /^(-?\d+(?:\.\d+)?)px(?:\s+(-?\d+(?:\.\d+)?)px)?(?:\s+(-?\d+(?:\.\d+)?)px)?$/;
 const translateDecimalPlaces = 1;
 const parseTranslate = (value) => {
     const m = value.match(PIXEL_PATTERN);
     if (!m) {
-        return [0, 0];
+        return [0, 0, 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,
     ];
 };
 exports.parseTranslate = parseTranslate;
@@ -20,7 +21,10 @@ const formatTranslateCoordinate = (value, decimalPlaces) => {
     const rounded = (0, timeline_field_utils_1.roundToDecimalPlaces)(normalized, decimalPlaces);
     return String(Object.is(rounded, -0) ? 0 : rounded);
 };
-const serializeTranslate = (x, y, decimalPlaces = translateDecimalPlaces) => {
-    return `${formatTranslateCoordinate(x, decimalPlaces)}px ${formatTranslateCoordinate(y, decimalPlaces)}px`;
+const serializeTranslate = ([x, y, z], decimalPlaces = translateDecimalPlaces) => {
+    const xy = `${formatTranslateCoordinate(x, decimalPlaces)}px ${formatTranslateCoordinate(y, decimalPlaces)}px`;
+    return z === null
+        ? xy
+        : `${xy} ${formatTranslateCoordinate(z, decimalPlaces)}px`;
 };
 exports.serializeTranslate = serializeTranslate;

package/dist/components/Timeline/transform-3d-mode.d.ts

@@ -0,0 +1,6 @@
+import type { CanUpdateSequencePropStatus } from 'remotion';
+export declare const propStatusHas3DTransformValue: ({ fieldKey, propStatus, runtimeValue, }: {
+    readonly fieldKey: string;
+    readonly propStatus: CanUpdateSequencePropStatus | undefined;
+    readonly runtimeValue: unknown;
+}) => boolean;

package/dist/components/Timeline/transform-3d-mode.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.propStatusHas3DTransformValue = void 0;
+const no_react_1 = require("remotion/no-react");
+const timeline_rotation_utils_1 = require("./timeline-rotation-utils");
+const timeline_translate_utils_1 = require("./timeline-translate-utils");
+const transform_origin_utils_1 = require("./transform-origin-utils");
+const has3DTransformValue = ({ fieldKey, value, }) => {
+    if (fieldKey === 'style.scale') {
+        return no_react_1.NoReactInternals.parseScaleValue(value)[2] !== 1;
+    }
+    if (fieldKey === 'style.rotate') {
+        const rotation = (0, timeline_rotation_utils_1.parseCssRotationToEuler)(String(value !== null && value !== void 0 ? value : '0deg'));
+        return rotation[0] !== 0 || rotation[1] !== 0;
+    }
+    if (fieldKey === 'style.translate') {
+        const z = (0, timeline_translate_utils_1.parseTranslate)(String(value !== null && value !== void 0 ? value : '0px 0px'))[2];
+        return z !== null && z !== 0;
+    }
+    if (fieldKey === 'style.transformOrigin') {
+        const parsed = (0, transform_origin_utils_1.parseTransformOrigin)(value);
+        const z = (parsed === null || parsed === void 0 ? void 0 : parsed.z) ? (0, transform_origin_utils_1.parseTransformOriginZ)(parsed.z) : null;
+        return z !== null && z.value !== 0;
+    }
+    return false;
+};
+const propStatusHas3DTransformValue = ({ fieldKey, propStatus, runtimeValue, }) => {
+    if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'keyframed') {
+        return propStatus.keyframes.some((keyframe) => has3DTransformValue({ fieldKey, value: keyframe.value }));
+    }
+    return has3DTransformValue({
+        fieldKey,
+        value: (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'static' ? propStatus.codeValue : runtimeValue,
+    });
+};
+exports.propStatusHas3DTransformValue = propStatusHas3DTransformValue;

package/dist/components/Timeline/transform-origin-utils.d.ts

@@ -8,6 +8,10 @@ export type ParsedTransformOrigin = {
     readonly y: TransformOriginAxisValue;
     readonly z: string | null;
 };
+export declare const parseTransformOriginZ: (token: string) => {
+    readonly value: number;
+    readonly unit: string;
+} | null;
 export declare const parseTransformOrigin: (value: unknown) => ParsedTransformOrigin | null;
 export declare const axisValueToUv: (axis: TransformOriginAxisValue, size: number) => number | null;
 export declare const parsedTransformOriginToUv: ({ parsed, width, height, }: {

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 };