@remotion/studio 4.0.473 → 4.0.475

package/dist/components/Timeline/reset-selected-timeline-props.js

@@ -7,8 +7,15 @@ const save_effect_prop_1 = require("./save-effect-prop");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const isPropResetSelection = (selection) => selection.type === 'sequence-prop' ||
     selection.type === 'sequence-effect-prop';
+function assertPropResetSelections(selections) {
+    for (const selection of selections) {
+        if (!isPropResetSelection(selection)) {
+            throw new Error(`Assertion failed: Cannot reset timeline selection of type ${selection.type}`);
+        }
+    }
+}
 const isVisibleFieldSchema = (fieldSchema) => fieldSchema !== undefined && fieldSchema.type !== 'hidden';
-const isNonDefaultCodeValue = ({ codeValue, defaultValue, }) => JSON.stringify(codeValue !== null && codeValue !== void 0 ? codeValue : defaultValue) !== JSON.stringify(defaultValue);
+const isNonDefaultCodeValue = ({ propStatus, defaultValue, }) => JSON.stringify(propStatus !== null && propStatus !== void 0 ? propStatus : defaultValue) !== JSON.stringify(defaultValue);
 const isResettablePropStatus = ({ propStatus, defaultValue, }) => {
     if (!propStatus || propStatus.status === 'computed') {
         return false;
@@ -20,25 +27,26 @@ const isResettablePropStatus = ({ propStatus, defaultValue, }) => {
         return true;
     }
     return isNonDefaultCodeValue({
-        codeValue: propStatus.codeValue,
+        propStatus: propStatus.codeValue,
         defaultValue,
     });
 };
 const getDefaultValue = (fieldSchema) => fieldSchema.default !== undefined
     ? JSON.stringify(fieldSchema.default)
     : null;
-const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodePaths, codeValues, }) => {
+const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     var _a;
     var _b;
-    const firstSelection = selections[0];
-    if (!firstSelection || !isPropResetSelection(firstSelection)) {
+    const propSelections = selections.filter(isPropResetSelection);
+    if (propSelections.length === 0) {
         return null;
     }
+    if (propSelections.length !== selections.length) {
+        return null;
+    }
+    assertPropResetSelections(selections);
     const resetTargets = [];
     for (const selection of selections) {
-        if (!isPropResetSelection(selection)) {
-            throw new Error(`Assertion failed: Cannot reset timeline selections of different types (${firstSelection.type}, ${selection.type})`);
-        }
         const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
             sequences,
             overrideIdsToNodePaths,
@@ -54,7 +62,7 @@ const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodeP
                 continue;
             }
             const sequenceFieldSchema = sequence.controls.schema[selection.key];
-            const sequencePropStatus = (_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a[selection.key];
+            const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[selection.key];
             if (!isVisibleFieldSchema(sequenceFieldSchema) ||
                 !isResettablePropStatus({
                     propStatus: sequencePropStatus,
@@ -75,8 +83,8 @@ const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodeP
         }
         const effect = sequence.effects[selection.i];
         const fieldSchema = effect === null || effect === void 0 ? void 0 : effect.schema[selection.key];
-        const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
-            codeValues,
+        const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+            propStatuses,
             nodePath,
             effectIndex: selection.i,
         });
@@ -105,12 +113,12 @@ const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodeP
     return resetTargets;
 };
 exports.getTimelinePropResetTargets = getTimelinePropResetTargets;
-const resetSelectedTimelineProps = ({ selections, sequences, overrideIdsToNodePaths, codeValues, setCodeValues, clientId, }) => {
+const resetSelectedTimelineProps = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, setPropStatuses, clientId, }) => {
     const resetTargets = (0, exports.getTimelinePropResetTargets)({
         selections,
         sequences,
         overrideIdsToNodePaths,
-        codeValues,
+        propStatuses,
     });
     if (resetTargets === null || resetTargets.length === 0) {
         return null;
@@ -128,7 +136,7 @@ const resetSelectedTimelineProps = ({ selections, sequences, overrideIdsToNodePa
                 defaultValue: target.defaultValue,
                 schema: target.schema,
             })),
-            setCodeValues,
+            setPropStatuses,
             clientId,
             undoLabel: sequencePropTargets.length > 1
                 ? 'Reset selected sequence props'
@@ -148,7 +156,7 @@ const resetSelectedTimelineProps = ({ selections, sequences, overrideIdsToNodePa
             value: target.value,
             defaultValue: target.defaultValue,
             schema: target.schema,
-            setCodeValues,
+            setPropStatuses,
             clientId,
         }));
     }

package/dist/components/Timeline/save-effect-prop.d.ts

@@ -1,6 +1,6 @@
 import { type EffectClipboardParam } from '@remotion/studio-shared';
 import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
-import type { SetCodeValues } from './save-sequence-prop';
+import type { SetPropStatuses } from './save-sequence-prop';
 type SaveEffectPropBase = {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
@@ -8,7 +8,7 @@ type SaveEffectPropBase = {
     fieldKey: string;
     defaultValue: string | null;
     schema: SequenceSchema;
-    setCodeValues: SetCodeValues;
+    setPropStatuses: SetPropStatuses;
     clientId: string;
 };
 type SaveEffectPropValue = SaveEffectPropBase & {

package/dist/components/Timeline/save-effect-prop.js

@@ -3,23 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.saveEffectProp = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
-const apply_effect_response_to_code_values_1 = require("./apply-effect-response-to-code-values");
+const apply_effect_response_to_prop_statuses_1 = require("./apply-effect-response-to-prop-statuses");
 const save_prop_queue_1 = require("./save-prop-queue");
 const saveEffectProp = (input) => {
-    const { fileName, nodePath, effectIndex, fieldKey, defaultValue, schema, setCodeValues, clientId, } = input;
+    const { fileName, nodePath, effectIndex, fieldKey, defaultValue, schema, setPropStatuses, clientId, } = input;
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
-        setCodeValues,
+        setPropStatuses,
         applyOptimistic: (prev) => input.type === 'effect-param'
             ? prev
-            : (0, studio_shared_1.optimisticUpdateForEffectCodeValues)({
+            : (0, studio_shared_1.optimisticUpdateForEffectPropStatuses)({
                 previous: prev,
                 effectIndex,
                 fieldKey,
                 value: input.value,
                 schema,
             }),
-        applyServerResponse: (prev, response) => (0, apply_effect_response_to_code_values_1.applyEffectResponseToCodeValues)({ previous: prev, response }),
+        applyServerResponse: (prev, response) => (0, apply_effect_response_to_prop_statuses_1.applyEffectResponseToPropStatuses)({ previous: prev, response }),
         apiCall: () => (0, call_api_1.callApi)('/api/save-effect-props', input.type === 'effect-param'
             ? {
                 type: 'effect-param',

package/dist/components/Timeline/save-prop-queue.d.ts

@@ -1,12 +1,12 @@
 import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey } from 'remotion';
-type SetCodeValues = (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
+type SetPropStatuses = (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
 export type EnqueueSaveOptions<TResponse> = {
     nodePath: SequencePropsSubscriptionKey;
-    setCodeValues: SetCodeValues;
+    setPropStatuses: SetPropStatuses;
     applyOptimistic: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse;
     applyServerResponse?: (prev: CanUpdateSequencePropsResponse, response: TResponse) => CanUpdateSequencePropsResponse;
     apiCall: () => Promise<TResponse>;
     errorLabel: string;
 };
-export declare const enqueueSavePropChange: <TResponse>({ nodePath, setCodeValues, applyOptimistic, applyServerResponse, apiCall, errorLabel, }: EnqueueSaveOptions<TResponse>) => Promise<void>;
+export declare const enqueueSavePropChange: <TResponse>({ nodePath, setPropStatuses, applyOptimistic, applyServerResponse, apiCall, errorLabel, }: EnqueueSaveOptions<TResponse>) => Promise<void>;
 export {};

package/dist/components/Timeline/save-prop-queue.js

@@ -19,12 +19,12 @@ const dropQueue = (nodePath, q) => {
         queues.delete(key);
     }
 };
-const enqueueSavePropChange = ({ nodePath, setCodeValues, applyOptimistic, applyServerResponse, apiCall, errorLabel, }) => {
+const enqueueSavePropChange = ({ nodePath, setPropStatuses, applyOptimistic, applyServerResponse, apiCall, errorLabel, }) => {
     const q = getQueue(nodePath);
     if (q.cancelled) {
         return Promise.resolve();
     }
-    setCodeValues(nodePath, (prev) => {
+    setPropStatuses(nodePath, (prev) => {
         return applyOptimistic(prev);
     });
     const myQueue = q;
@@ -40,7 +40,7 @@ const enqueueSavePropChange = ({ nodePath, setCodeValues, applyOptimistic, apply
             // If nothing more is queued, reset baseline so the next round starts fresh.
             if (myQueue.chain === next) {
                 if (applyServerResponse) {
-                    setCodeValues(nodePath, (prev) => applyServerResponse(prev, response));
+                    setPropStatuses(nodePath, (prev) => applyServerResponse(prev, response));
                 }
                 dropQueue(nodePath, myQueue);
             }

package/dist/components/Timeline/save-sequence-prop.d.ts

@@ -1,5 +1,5 @@
 import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
-export type SetCodeValues = (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
+export type SetPropStatuses = (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
 export type SaveSequencePropChange = {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
@@ -10,10 +10,10 @@ export type SaveSequencePropChange = {
 };
 type SaveSequencePropsOptions = {
     changes: SaveSequencePropChange[];
-    setCodeValues: SetCodeValues;
+    setPropStatuses: SetPropStatuses;
     clientId: string;
     undoLabel: string;
     redoLabel: string;
 };
-export declare const saveSequenceProps: ({ changes, setCodeValues, clientId, undoLabel, redoLabel, }: SaveSequencePropsOptions) => Promise<void>;
+export declare const saveSequenceProps: ({ changes, setPropStatuses, clientId, undoLabel, redoLabel, }: SaveSequencePropsOptions) => Promise<void>;
 export {};

package/dist/components/Timeline/save-sequence-prop.js

@@ -4,7 +4,7 @@ exports.saveSequenceProps = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
 const save_prop_queue_1 = require("./save-prop-queue");
-const saveSequenceProps = ({ changes, setCodeValues, clientId, undoLabel, redoLabel, }) => {
+const saveSequenceProps = ({ changes, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
     if (changes.length === 0) {
         return Promise.resolve();
     }
@@ -15,8 +15,8 @@ const saveSequenceProps = ({ changes, setCodeValues, clientId, undoLabel, redoLa
         }
         return (0, save_prop_queue_1.enqueueSavePropChange)({
             nodePath: change.nodePath,
-            setCodeValues,
-            applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForCodeValues)({
+            setPropStatuses,
+            applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForPropStatuses)({
                 previous: prev,
                 fieldKey: change.fieldKey,
                 value: change.value,
@@ -41,7 +41,7 @@ const saveSequenceProps = ({ changes, setCodeValues, clientId, undoLabel, redoLa
         });
     }
     for (const change of changes) {
-        setCodeValues(change.nodePath, (prev) => (0, studio_shared_1.optimisticUpdateForCodeValues)({
+        setPropStatuses(change.nodePath, (prev) => (0, studio_shared_1.optimisticUpdateForPropStatuses)({
             previous: prev,
             fieldKey: change.fieldKey,
             value: change.value,

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

@@ -1,3 +1,13 @@
 export declare const getDecimalPlaces: (num: number) => number;
+export declare const getTimelineDisplayDecimalPlaces: ({ defaultDecimalPlaces, step, }: {
+    readonly defaultDecimalPlaces: number;
+    readonly step: number | undefined;
+}) => number;
+export declare const roundToDecimalPlaces: (value: number, decimalPlaces: number) => number;
+export declare const formatTimelineNumber: ({ decimalPlaces, fixed, value, }: {
+    readonly decimalPlaces: number;
+    readonly fixed: boolean;
+    readonly value: string | number;
+}) => string;
 export declare const normalizeTimelineNumber: (value: number) => number;
 export declare const draggerStyle: React.CSSProperties;

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

@@ -1,14 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.draggerStyle = exports.normalizeTimelineNumber = exports.getDecimalPlaces = void 0;
+exports.draggerStyle = exports.normalizeTimelineNumber = exports.formatTimelineNumber = exports.roundToDecimalPlaces = exports.getTimelineDisplayDecimalPlaces = exports.getDecimalPlaces = void 0;
 const getDecimalPlaces = (num) => {
-    const str = String(num);
-    const decimalIndex = str.indexOf('.');
-    return decimalIndex === -1 ? 0 : str.length - decimalIndex - 1;
+    const [coefficient, exponent] = String(num).toLowerCase().split('e');
+    const decimalIndex = coefficient.indexOf('.');
+    const coefficientDecimals = decimalIndex === -1 ? 0 : coefficient.length - decimalIndex - 1;
+    if (exponent === undefined) {
+        return coefficientDecimals;
+    }
+    return Math.max(0, coefficientDecimals - Number(exponent));
 };
 exports.getDecimalPlaces = getDecimalPlaces;
+const getTimelineDisplayDecimalPlaces = ({ defaultDecimalPlaces, step, }) => {
+    return Math.max(defaultDecimalPlaces, step === undefined ? 0 : (0, exports.getDecimalPlaces)(step));
+};
+exports.getTimelineDisplayDecimalPlaces = getTimelineDisplayDecimalPlaces;
+const roundToDecimalPlaces = (value, decimalPlaces) => {
+    const factor = 10 ** decimalPlaces;
+    const rounded = Math.round(value * factor) / factor;
+    return Object.is(rounded, -0) ? 0 : rounded;
+};
+exports.roundToDecimalPlaces = roundToDecimalPlaces;
+const formatTimelineNumber = ({ decimalPlaces, fixed, value, }) => {
+    const rounded = (0, exports.roundToDecimalPlaces)(Number(value), decimalPlaces);
+    return fixed && decimalPlaces > 0
+        ? rounded.toFixed(decimalPlaces)
+        : String(rounded);
+};
+exports.formatTimelineNumber = formatTimelineNumber;
 const normalizeTimelineNumber = (value) => {
-    return Math.round(value * 1000000) / 1000000;
+    return (0, exports.roundToDecimalPlaces)(value, 6);
 };
 exports.normalizeTimelineNumber = normalizeTimelineNumber;
 exports.draggerStyle = {

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

@@ -0,0 +1,2 @@
+export declare const parseCssRotationToDegrees: (value: string) => number;
+export declare const serializeCssRotation: (value: number) => string;

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.serializeCssRotation = exports.parseCssRotationToDegrees = void 0;
+const timeline_field_utils_1 = require("./timeline-field-utils");
+const unitPattern = /^([+-]?(?:\d+\.?\d*|\.\d+))(deg|rad|turn|grad)$/;
+const unitToDegrees = {
+    deg: 1,
+    rad: 180 / Math.PI,
+    turn: 360,
+    grad: 360 / 400,
+};
+const parseCssRotationToDegrees = (value) => {
+    const match = value.trim().match(unitPattern);
+    if (match) {
+        return (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(match[1]) * unitToDegrees[match[2]]);
+    }
+    if (typeof DOMMatrix === 'undefined') {
+        return 0;
+    }
+    try {
+        const m = new DOMMatrix(`rotate(${value})`);
+        return (0, timeline_field_utils_1.normalizeTimelineNumber)(Math.atan2(m.b, m.a) * (180 / Math.PI));
+    }
+    catch (_a) {
+        return 0;
+    }
+};
+exports.parseCssRotationToDegrees = parseCssRotationToDegrees;
+const serializeCssRotation = (value) => {
+    return `${(0, timeline_field_utils_1.normalizeTimelineNumber)(value)}deg`;
+};
+exports.serializeCssRotation = serializeCssRotation;

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

@@ -1,2 +1,2 @@
 export declare const parseTranslate: (value: string) => [number, number];
-export declare const serializeTranslate: (x: number, y: number) => string;
+export declare const serializeTranslate: (x: number, y: number, decimalPlaces?: number) => string;

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

@@ -15,13 +15,12 @@ const parseTranslate = (value) => {
     ];
 };
 exports.parseTranslate = parseTranslate;
-const formatTranslateCoordinate = (value) => {
+const formatTranslateCoordinate = (value, decimalPlaces) => {
     const normalized = (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
-    const factor = 10 ** translateDecimalPlaces;
-    const rounded = Math.round(normalized * factor) / factor;
+    const rounded = (0, timeline_field_utils_1.roundToDecimalPlaces)(normalized, decimalPlaces);
     return String(Object.is(rounded, -0) ? 0 : rounded);
 };
-const serializeTranslate = (x, y) => {
-    return `${formatTranslateCoordinate(x)}px ${formatTranslateCoordinate(y)}px`;
+const serializeTranslate = (x, y, decimalPlaces = translateDecimalPlaces) => {
+    return `${formatTranslateCoordinate(x, decimalPlaces)}px ${formatTranslateCoordinate(y, decimalPlaces)}px`;
 };
 exports.serializeTranslate = serializeTranslate;

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

@@ -0,0 +1,24 @@
+export type TransformOriginUnit = '%' | 'px';
+export type TransformOriginAxisValue = {
+    readonly value: number;
+    readonly unit: TransformOriginUnit;
+};
+export type ParsedTransformOrigin = {
+    readonly x: TransformOriginAxisValue;
+    readonly y: TransformOriginAxisValue;
+    readonly z: 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, }: {
+    readonly parsed: ParsedTransformOrigin;
+    readonly width: number;
+    readonly height: number;
+}) => readonly [number, number] | null;
+export declare const serializeTransformOrigin: ({ uv, z, decimalPlaces, }: {
+    readonly uv: readonly [number, number];
+    readonly z: string | null;
+    readonly decimalPlaces?: number | undefined;
+}) => string;
+export declare const parsedTransformOriginToPercent: (parsed: ParsedTransformOrigin) => readonly [number, number] | null;
+export declare const transformOriginPercentToUv: (percent: readonly [number, number]) => readonly [number, number];

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

@@ -0,0 +1,170 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformOriginPercentToUv = exports.parsedTransformOriginToPercent = exports.serializeTransformOrigin = exports.parsedTransformOriginToUv = exports.axisValueToUv = exports.parseTransformOrigin = 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 keywords = new Set(['left', 'center', 'right', 'top', 'bottom']);
+const center = { value: 50, unit: '%' };
+const keywordOptions = (keyword) => {
+    if (keyword === 'left') {
+        return [{ axis: 'x', value: { value: 0, unit: '%' } }];
+    }
+    if (keyword === 'right') {
+        return [{ axis: 'x', value: { value: 100, unit: '%' } }];
+    }
+    if (keyword === 'top') {
+        return [{ axis: 'y', value: { value: 0, unit: '%' } }];
+    }
+    if (keyword === 'bottom') {
+        return [{ axis: 'y', value: { value: 100, unit: '%' } }];
+    }
+    return [
+        { axis: 'x', value: center },
+        { axis: 'y', value: center },
+    ];
+};
+const parseLengthPercentage = (token) => {
+    const match = cssNumberWithUnit.exec(token);
+    if (!match) {
+        return null;
+    }
+    const value = Number(match[1]);
+    if (!Number.isFinite(value)) {
+        return null;
+    }
+    return { value, unit: match[2].toLowerCase() };
+};
+const parseToken = (token) => {
+    const lower = token.toLowerCase();
+    if (keywords.has(lower)) {
+        return { type: 'keyword', keyword: lower };
+    }
+    const value = parseLengthPercentage(token);
+    return value === null ? null : { type: 'length-percentage', value };
+};
+const parseTwoKeywords = (first, second) => {
+    var _a;
+    const candidates = [];
+    for (const firstOption of keywordOptions(first)) {
+        for (const secondOption of keywordOptions(second)) {
+            if (firstOption.axis === secondOption.axis) {
+                continue;
+            }
+            candidates.push(firstOption.axis === 'x'
+                ? [firstOption.value, secondOption.value]
+                : [secondOption.value, firstOption.value]);
+        }
+    }
+    return (_a = candidates[0]) !== null && _a !== void 0 ? _a : null;
+};
+const parseXY = (parts) => {
+    if (parts.length === 1) {
+        const token = parseToken(parts[0]);
+        if (token === null) {
+            return null;
+        }
+        if (token.type === 'length-percentage') {
+            return [token.value, center];
+        }
+        if (token.keyword === 'top' || token.keyword === 'bottom') {
+            return [center, keywordOptions(token.keyword)[0].value];
+        }
+        return [keywordOptions(token.keyword)[0].value, center];
+    }
+    const first = parseToken(parts[0]);
+    const second = parseToken(parts[1]);
+    if (first === null || second === null) {
+        return null;
+    }
+    if (first.type === 'length-percentage' &&
+        second.type === 'length-percentage') {
+        return [first.value, second.value];
+    }
+    if (first.type === 'keyword' && second.type === 'keyword') {
+        return parseTwoKeywords(first.keyword, second.keyword);
+    }
+    const keyword = first.type === 'keyword'
+        ? first
+        : second.type === 'keyword'
+            ? second
+            : null;
+    const length = first.type === 'length-percentage'
+        ? first.value
+        : second.type === 'length-percentage'
+            ? second.value
+            : null;
+    if (keyword === null || length === null) {
+        return null;
+    }
+    const keywordIsFirst = first.type === 'keyword';
+    if (keyword.keyword === 'left' || keyword.keyword === 'right') {
+        return keywordIsFirst
+            ? [keywordOptions(keyword.keyword)[0].value, length]
+            : null;
+    }
+    if (keyword.keyword === 'top' || keyword.keyword === 'bottom') {
+        return [length, keywordOptions(keyword.keyword)[0].value];
+    }
+    return keywordIsFirst ? [center, length] : [length, center];
+};
+const isSupportedZ = (token) => {
+    if (token.includes('%')) {
+        return false;
+    }
+    return cssLength.test(token);
+};
+const parseTransformOrigin = (value) => {
+    var _a;
+    if (typeof value !== 'string') {
+        return null;
+    }
+    const parts = value.trim().split(/\s+/);
+    if (parts.length < 1 || parts.length > 3 || parts[0] === '') {
+        return null;
+    }
+    const xy = parseXY(parts.length === 1 ? [parts[0]] : [parts[0], parts[1]]);
+    if (xy === null) {
+        return null;
+    }
+    const z = (_a = parts[2]) !== null && _a !== void 0 ? _a : null;
+    if (z !== null && !isSupportedZ(z)) {
+        return null;
+    }
+    return { x: xy[0], y: xy[1], z };
+};
+exports.parseTransformOrigin = parseTransformOrigin;
+const axisValueToUv = (axis, size) => {
+    if (!Number.isFinite(size) || size <= 0) {
+        return null;
+    }
+    if (axis.unit === '%') {
+        return axis.value / 100;
+    }
+    return axis.value / size;
+};
+exports.axisValueToUv = axisValueToUv;
+const parsedTransformOriginToUv = ({ parsed, width, height, }) => {
+    const x = (0, exports.axisValueToUv)(parsed.x, width);
+    const y = (0, exports.axisValueToUv)(parsed.y, height);
+    return x === null || y === null ? null : [x, y];
+};
+exports.parsedTransformOriginToUv = parsedTransformOriginToUv;
+const formatPercent = (value, decimalPlaces) => {
+    const rounded = (0, timeline_field_utils_1.roundToDecimalPlaces)((0, timeline_field_utils_1.normalizeTimelineNumber)(value * 100), decimalPlaces);
+    return String(Object.is(rounded, -0) ? 0 : rounded);
+};
+const serializeTransformOrigin = ({ uv, z, decimalPlaces = 2, }) => {
+    const xy = `${formatPercent(uv[0], decimalPlaces)}% ${formatPercent(uv[1], decimalPlaces)}%`;
+    return z === null ? xy : `${xy} ${z}`;
+};
+exports.serializeTransformOrigin = serializeTransformOrigin;
+const parsedTransformOriginToPercent = (parsed) => {
+    if (parsed.x.unit !== '%' || parsed.y.unit !== '%') {
+        return null;
+    }
+    return [parsed.x.value, parsed.y.value];
+};
+exports.parsedTransformOriginToPercent = parsedTransformOriginToPercent;
+const transformOriginPercentToUv = (percent) => [percent[0] / 100, percent[1] / 100];
+exports.transformOriginPercentToUv = transformOriginPercentToUv;

package/dist/components/Timeline/update-selected-easing.d.ts

@@ -0,0 +1,35 @@
+import type { OverrideIdToNodePaths, PropStatuses, TSequence } from 'remotion';
+import type { SetPropStatuses } from './save-sequence-prop';
+import type { TimelineEasingSelection, TimelineSelection } from './TimelineSelection';
+export type EasingSelection = TimelineEasingSelection;
+export type TimelineEasingValue = 'linear' | [number, number, number, number];
+export declare const getEasingSelections: (selections: readonly TimelineSelection[]) => ({
+    readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
+} & {
+    readonly type: "easing";
+    readonly fromFrame: number;
+    readonly toFrame: number;
+    readonly segmentIndex: number;
+})[];
+export declare const getTimelineEasingValueForSelection: ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }: {
+    selection: {
+        readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
+    } & {
+        readonly type: "easing";
+        readonly fromFrame: number;
+        readonly toFrame: number;
+        readonly segmentIndex: number;
+    };
+    sequences: TSequence[];
+    overrideIdsToNodePaths: OverrideIdToNodePaths;
+    propStatuses: PropStatuses;
+}) => TimelineEasingValue | null;
+export declare const updateSelectedTimelineEasings: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, setPropStatuses, clientId, easing, }: {
+    selections: readonly TimelineSelection[];
+    sequences: TSequence[];
+    overrideIdsToNodePaths: OverrideIdToNodePaths;
+    propStatuses: PropStatuses;
+    setPropStatuses: SetPropStatuses;
+    clientId: string;
+    easing: TimelineEasingValue;
+}) => Promise<void> | null;