@remotion/studio 4.0.431 → 4.0.433

package/dist/components/Timeline/TimelineListItem.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineListItem = void 0;
+exports.TimelineListItem = exports.SPACING = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -11,10 +11,11 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineStack_1 = require("./TimelineStack");
-const get_stack_1 = require("./TimelineStack/get-stack");
-const SPACING = 5;
+const use_resolved_stack_1 = require("./use-resolved-stack");
+const use_sequence_props_subscription_1 = require("./use-sequence-props-subscription");
+exports.SPACING = 5;
 const space = {
-    width: SPACING,
+    width: exports.SPACING,
     flexShrink: 0,
 };
 const arrowButton = {
@@ -36,33 +37,21 @@ const arrowButton = {
     lineHeight: 1,
 };
 const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
-    var _a;
+    var _a, _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
         previewServerState.type === 'connected';
     const { hidden, setHidden } = (0, react_1.useContext)(remotion_1.Internals.SequenceVisibilityToggleContext);
     const { expandedTracks, toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
-    const [originalLocation, setOriginalLocation] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        if (!sequence.stack) {
-            return;
-        }
-        (0, get_stack_1.getOriginalLocationFromStack)(sequence.stack, 'sequence')
-            .then((frame) => {
-            setOriginalLocation(frame);
-        })
-            .catch((err) => {
-            // eslint-disable-next-line no-console
-            console.error('Could not get original location of Sequence', err);
-        });
-    }, [sequence.stack]);
-    const isExpanded = visualModeEnabled && ((_a = expandedTracks[sequence.id]) !== null && _a !== void 0 ? _a : false);
+    const originalLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = sequence.stack) !== null && _a !== void 0 ? _a : null);
+    const nodePath = (0, use_sequence_props_subscription_1.useSequencePropsSubscription)(sequence, originalLocation);
+    const isExpanded = visualModeEnabled && ((_b = expandedTracks[sequence.id]) !== null && _b !== void 0 ? _b : false);
     const onToggleExpand = (0, react_1.useCallback)(() => {
         toggleTrack(sequence.id);
     }, [sequence.id, toggleTrack]);
     const padder = (0, react_1.useMemo)(() => {
         return {
-            width: Number(SPACING * 1.5) * nestedDepth,
+            width: Number(exports.SPACING * 3) * nestedDepth,
             flexShrink: 0,
         };
     }, [nestedDepth]);
@@ -89,7 +78,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
             alignItems: 'center',
             wordBreak: 'break-all',
             textAlign: 'left',
-            paddingLeft: SPACING,
+            paddingLeft: exports.SPACING,
             borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
         };
     }, [sequence.type]);
@@ -102,6 +91,6 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsxs("div", { style: outer, children: [
                     jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx("div", { style: padder }), sequence.parent && nestedDepth > 0 ? jsx_runtime_1.jsx("div", { style: space }) : null, visualModeEnabled ? (sequence.controls ? (jsx_runtime_1.jsx("button", { type: "button", style: arrowStyle, onClick: onToggleExpand, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} track`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: { display: 'block' }, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "white" }) }) })) : (jsx_runtime_1.jsx("div", { style: arrowButton }))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
-                ] }), visualModeEnabled && isExpanded && sequence.controls ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation })) : null] }));
+                ] }), visualModeEnabled && isExpanded && sequence.controls ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation, nestedDepth: nestedDepth, nodePath: nodePath })) : null] }));
 };
 exports.TimelineListItem = TimelineListItem;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TimelineNumberField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly effectiveValue: unknown;
+    readonly codeValue: unknown;
+    readonly canUpdate: boolean;
+    readonly onSave: (key: string, value: unknown) => Promise<void>;
+    readonly onDragValueChange: (key: string, value: unknown) => void;
+    readonly onDragEnd: () => void;
+}>;

package/dist/components/Timeline/TimelineNumberField.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineNumberField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_utils_1 = require("./timeline-field-utils");
+const TimelineNumberField = ({ field, effectiveValue, canUpdate, onSave, onDragValueChange, onDragEnd, codeValue, }) => {
+    var _a, _b, _c;
+    const [dragValue, setDragValue] = (0, react_1.useState)(null);
+    const onValueChange = (0, react_1.useCallback)((newVal) => {
+        setDragValue(newVal);
+        onDragValueChange(field.key, newVal);
+    }, [onDragValueChange, field.key]);
+    (0, react_1.useEffect)(() => {
+        setDragValue(null);
+        onDragEnd();
+    }, [field.currentValue, onDragEnd]);
+    const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
+        if (canUpdate && newVal !== codeValue) {
+            onSave(field.key, newVal).catch(() => {
+                setDragValue(null);
+            });
+        }
+        else {
+            setDragValue(null);
+        }
+    }, [canUpdate, onSave, field.key, codeValue]);
+    const onTextChange = (0, react_1.useCallback)((newVal) => {
+        if (canUpdate) {
+            const parsed = Number(newVal);
+            if (!Number.isNaN(parsed) && parsed !== codeValue) {
+                setDragValue(parsed);
+                onSave(field.key, parsed).catch(() => {
+                    setDragValue(null);
+                });
+            }
+        }
+    }, [canUpdate, onSave, field.key, codeValue]);
+    const step = field.fieldSchema.type === 'number' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;
+    const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
+    const formatter = (0, react_1.useCallback)((v) => {
+        const num = Number(v);
+        const digits = Math.max(stepDecimals, (0, timeline_field_utils_1.getDecimalPlaces)(num));
+        return digits === 0 ? String(num) : num.toFixed(digits);
+    }, [stepDecimals]);
+    return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : effectiveValue, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: field.fieldSchema.type === 'number'
+            ? ((_b = field.fieldSchema.min) !== null && _b !== void 0 ? _b : -Infinity)
+            : -Infinity, max: field.fieldSchema.type === 'number'
+            ? ((_c = field.fieldSchema.max) !== null && _c !== void 0 ? _c : Infinity)
+            : Infinity, step: step, formatter: formatter, rightAlign: false }));
+};
+exports.TimelineNumberField = TimelineNumberField;

package/dist/components/Timeline/TimelinePlayCursorSyncer.js

@@ -11,7 +11,7 @@ let lastTimelinePositionWhileScrolling = null;
 const TimelinePlayCursorSyncer = () => {
     var _a, _b;
     const video = remotion_1.Internals.useVideo();
-    const timelineContext = (0, react_1.useContext)(remotion_1.Internals.TimelineContext);
+    const timelineContext = remotion_1.Internals.useTimelineContext();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TimelineRotationField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly effectiveValue: unknown;
+    readonly codeValue: unknown;
+    readonly canUpdate: boolean;
+    readonly onSave: (key: string, value: unknown) => Promise<void>;
+    readonly onDragValueChange: (key: string, value: unknown) => void;
+    readonly onDragEnd: () => void;
+}>;

package/dist/components/Timeline/TimelineRotationField.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineRotationField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_utils_1 = require("./timeline-field-utils");
+const parseCssRotationToDegrees = (value) => {
+    try {
+        const m = new DOMMatrix(`rotate(${value})`);
+        return Math.round(Math.atan2(m.b, m.a) * (180 / Math.PI) * 1e6) / 1e6;
+    }
+    catch (_a) {
+        return 0;
+    }
+};
+const TimelineRotationField = ({ field, effectiveValue, codeValue, canUpdate, onSave, onDragValueChange, onDragEnd, }) => {
+    var _a;
+    const [dragValue, setDragValue] = (0, react_1.useState)(null);
+    const degrees = (0, react_1.useMemo)(() => parseCssRotationToDegrees(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0deg')), [effectiveValue]);
+    const onValueChange = (0, react_1.useCallback)((newVal) => {
+        setDragValue(newVal);
+        onDragValueChange(field.key, `${newVal}deg`);
+    }, [onDragValueChange, field.key]);
+    (0, react_1.useEffect)(() => {
+        setDragValue(null);
+        onDragEnd();
+    }, [field.currentValue, onDragEnd]);
+    const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
+        const newStr = `${newVal}deg`;
+        if (canUpdate && newStr !== codeValue) {
+            onSave(field.key, newStr).catch(() => {
+                setDragValue(null);
+            });
+        }
+        else {
+            setDragValue(null);
+        }
+    }, [canUpdate, onSave, field.key, codeValue]);
+    const onTextChange = (0, react_1.useCallback)((newVal) => {
+        if (canUpdate) {
+            const parsed = Number(newVal);
+            if (!Number.isNaN(parsed)) {
+                const newStr = `${parsed}deg`;
+                if (newStr !== codeValue) {
+                    setDragValue(parsed);
+                    onSave(field.key, newStr).catch(() => {
+                        setDragValue(null);
+                    });
+                }
+            }
+        }
+    }, [canUpdate, onSave, field.key, codeValue]);
+    const step = field.fieldSchema.type === 'rotation' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;
+    const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
+    const formatter = (0, react_1.useCallback)((v) => {
+        const num = Number(v);
+        const digits = Math.max(stepDecimals, (0, timeline_field_utils_1.getDecimalPlaces)(num));
+        const formatted = digits === 0 ? String(num) : num.toFixed(digits);
+        return `${formatted}\u00B0`;
+    }, [stepDecimals]);
+    return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : degrees, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false }));
+};
+exports.TimelineRotationField = TimelineRotationField;

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

@@ -1,5 +1,5 @@
-import type { CanUpdateSequencePropStatus } from '@remotion/studio-shared';
 import React from 'react';
+import type { CanUpdateSequencePropStatus } from 'remotion';
 import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
 export declare const TimelineFieldValue: React.FC<{
     readonly field: SchemaFieldInfo;
@@ -8,7 +8,6 @@ export declare const TimelineFieldValue: React.FC<{
     readonly onDragEnd: () => void;
     readonly canUpdate: boolean;
     readonly propStatus: CanUpdateSequencePropStatus | null;
-}>;
-export declare const TimelineFieldSavingSpinner: React.FC<{
-    readonly saving: boolean;
+    readonly codeValue: unknown;
+    readonly effectiveValue: unknown;
 }>;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -1,80 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineFieldSavingSpinner = exports.TimelineFieldValue = void 0;
+exports.TimelineFieldValue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Checkbox_1 = require("../Checkbox");
-const InputDragger_1 = require("../NewComposition/InputDragger");
-const Spinner_1 = require("../Spinner");
+const TimelineBooleanField_1 = require("./TimelineBooleanField");
+const TimelineNumberField_1 = require("./TimelineNumberField");
+const TimelineRotationField_1 = require("./TimelineRotationField");
+const TimelineTranslateField_1 = require("./TimelineTranslateField");
 const unsupportedLabel = {
     color: 'rgba(255, 255, 255, 0.4)',
     fontSize: 12,
-    marginLeft: 'auto',
     fontStyle: 'italic',
 };
-const draggerStyle = {
-    width: 80,
-    marginLeft: 'auto',
-};
-const checkboxContainer = {
-    marginLeft: 'auto',
-};
 const notEditableBackground = {
     backgroundColor: 'rgba(255, 0, 0, 0.2)',
     borderRadius: 3,
     padding: '0 4px',
 };
-const TimelineNumberField = ({ field, codeValue, canUpdate, onSave, onDragValueChange, onDragEnd }) => {
-    var _a, _b, _c;
-    const [dragValue, setDragValue] = (0, react_1.useState)(null);
-    const dragging = (0, react_1.useRef)(false);
-    const onValueChange = (0, react_1.useCallback)((newVal) => {
-        dragging.current = true;
-        setDragValue(newVal);
-        onDragValueChange(field.key, newVal);
-    }, [onDragValueChange, field.key]);
-    (0, react_1.useEffect)(() => {
-        setDragValue(null);
-        onDragEnd();
-    }, [field.currentValue, onDragEnd]);
-    const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
-        if (canUpdate && newVal !== codeValue) {
-            onSave(field.key, newVal).catch(() => {
-                setDragValue(null);
-            });
-        }
-        else {
-            setDragValue(null);
-        }
-    }, [canUpdate, onSave, field.key, codeValue]);
-    const onTextChange = (0, react_1.useCallback)((newVal) => {
-        if (canUpdate) {
-            const parsed = Number(newVal);
-            if (!Number.isNaN(parsed) && parsed !== codeValue) {
-                setDragValue(parsed);
-                onSave(field.key, parsed).catch(() => {
-                    setDragValue(null);
-                });
-            }
-        }
-    }, [canUpdate, onSave, field.key, codeValue]);
-    return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : codeValue, style: draggerStyle, status: "ok", onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: field.fieldSchema.type === 'number'
-            ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
-            : -Infinity, max: field.fieldSchema.type === 'number'
-            ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
-            : Infinity, step: field.fieldSchema.type === 'number' ? ((_c = field.fieldSchema.step) !== null && _c !== void 0 ? _c : 1) : 1, rightAlign: true }));
-};
-const TimelineBooleanField = ({ field, codeValue, canUpdate, onSave }) => {
-    const checked = Boolean(codeValue);
-    const onChange = (0, react_1.useCallback)(() => {
-        if (canUpdate) {
-            onSave(field.key, !checked);
-        }
-    }, [canUpdate, onSave, field.key, checked]);
-    return (jsx_runtime_1.jsx("div", { style: checkboxContainer, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: !canUpdate }) }));
-};
-const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, canUpdate }) => {
-    var _a, _b;
+const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, canUpdate, effectiveValue, codeValue, }) => {
     const wrapperStyle = canUpdate === null || canUpdate === false
         ? notEditableBackground
         : undefined;
@@ -82,25 +24,26 @@ const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propS
         return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "unsupported" });
     }
     if (propStatus !== null && !propStatus.canUpdate) {
-        return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: propStatus.reason });
+        if (propStatus.reason === 'computed') {
+            return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "computed" });
+        }
+        throw new Error(`Unsupported prop status: ${propStatus.reason}`);
     }
     if (propStatus === null) {
-        return (jsx_runtime_1.jsx("span", { style: { ...notEditableBackground }, children: jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "error" }) }));
+        return (jsx_runtime_1.jsx("span", { style: notEditableBackground, children: jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "error" }) }));
     }
-    const effectiveCodeValue = (_b = (_a = propStatus.codeValue) !== null && _a !== void 0 ? _a : field.currentValue) !== null && _b !== void 0 ? _b : field.fieldSchema.default;
     if (field.typeName === 'number') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineNumberField, { field: field, codeValue: effectiveCodeValue, canUpdate: canUpdate, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineNumberField_1.TimelineNumberField, { field: field, effectiveValue: effectiveValue, canUpdate: canUpdate, onSave: onSave, codeValue: codeValue, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+    }
+    if (field.typeName === 'rotation') {
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineRotationField_1.TimelineRotationField, { field: field, effectiveValue: effectiveValue, codeValue: codeValue, canUpdate: canUpdate, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+    }
+    if (field.typeName === 'translate') {
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineTranslateField_1.TimelineTranslateField, { field: field, effectiveValue: effectiveValue, codeValue: codeValue, canUpdate: canUpdate, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
     }
     if (field.typeName === 'boolean') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineBooleanField, { field: field, codeValue: effectiveCodeValue, canUpdate: canUpdate, onSave: onSave }) }));
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineBooleanField_1.TimelineBooleanField, { field: field, codeValue: codeValue, canUpdate: canUpdate, onSave: onSave, effectiveValue: effectiveValue }) }));
     }
-    return (jsx_runtime_1.jsx("span", { style: { ...unsupportedLabel, fontStyle: 'normal' }, children: String(effectiveCodeValue) }));
+    return (jsx_runtime_1.jsx("span", { style: { ...unsupportedLabel, fontStyle: 'normal' }, children: String(effectiveValue) }));
 };
 exports.TimelineFieldValue = TimelineFieldValue;
-const TimelineFieldSavingSpinner = ({ saving }) => {
-    if (!saving) {
-        return null;
-    }
-    return jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 12 });
-};
-exports.TimelineFieldSavingSpinner = TimelineFieldSavingSpinner;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TimelineTranslateField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly codeValue: unknown;
+    readonly effectiveValue: unknown;
+    readonly canUpdate: boolean;
+    readonly onSave: (key: string, value: unknown) => Promise<void>;
+    readonly onDragValueChange: (key: string, value: unknown) => void;
+    readonly onDragEnd: () => void;
+}>;

package/dist/components/Timeline/TimelineTranslateField.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineTranslateField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_utils_1 = require("./timeline-field-utils");
+const leftDraggerStyle = {
+    paddingLeft: 0,
+};
+const rightDraggerStyle = {
+    paddingRight: 0,
+};
+const PIXEL_PATTERN = /^(-?\d+(?:\.\d+)?)px(?:\s+(-?\d+(?:\.\d+)?)px)?$/;
+const parseTranslate = (value) => {
+    const m = value.match(PIXEL_PATTERN);
+    if (!m) {
+        return [0, 0];
+    }
+    return [Number(m[1]), m[2] !== undefined ? Number(m[2]) : 0];
+};
+const containerStyle = {
+    display: 'flex',
+    gap: 4,
+};
+const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, 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)(() => parseTranslate(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px')), [effectiveValue]);
+    const makeString = (0, react_1.useCallback)((x, y) => `${x}px ${y}px`, []);
+    (0, react_1.useEffect)(() => {
+        setDragX(null);
+        setDragY(null);
+        onDragEnd();
+    }, [field.currentValue, onDragEnd]);
+    const step = field.fieldSchema.type === 'translate' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;
+    const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
+    const formatter = (0, react_1.useCallback)((v) => {
+        const num = Number(v);
+        const digits = Math.max(stepDecimals, (0, timeline_field_utils_1.getDecimalPlaces)(num));
+        const formatted = digits === 0 ? String(num) : num.toFixed(digits);
+        return `${formatted}px`;
+    }, [stepDecimals]);
+    // --- X callbacks ---
+    const onXChange = (0, react_1.useCallback)((newVal) => {
+        setDragX(newVal);
+        const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
+        onDragValueChange(field.key, makeString(newVal, currentY));
+    }, [onDragValueChange, field.key, dragY, codeY, makeString]);
+    const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
+        const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
+        const newStr = makeString(newVal, currentY);
+        if (canUpdate && newStr !== codeValue) {
+            onSave(field.key, newStr).catch(() => {
+                setDragX(null);
+            });
+        }
+        else {
+            setDragX(null);
+        }
+    }, [canUpdate, onSave, field.key, codeValue, dragY, codeY, makeString]);
+    const onXTextChange = (0, react_1.useCallback)((newVal) => {
+        if (canUpdate) {
+            const parsed = Number(newVal);
+            if (!Number.isNaN(parsed)) {
+                const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
+                const newStr = makeString(parsed, currentY);
+                if (newStr !== codeValue) {
+                    setDragX(parsed);
+                    onSave(field.key, newStr).catch(() => {
+                        setDragX(null);
+                    });
+                }
+            }
+        }
+    }, [canUpdate, onSave, field.key, codeValue, dragY, codeY, makeString]);
+    // --- Y callbacks ---
+    const onYChange = (0, react_1.useCallback)((newVal) => {
+        setDragY(newVal);
+        const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
+        onDragValueChange(field.key, makeString(currentX, newVal));
+    }, [onDragValueChange, field.key, dragX, codeX, makeString]);
+    const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
+        const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
+        const newStr = makeString(currentX, newVal);
+        if (canUpdate && newStr !== codeValue) {
+            onSave(field.key, newStr).catch(() => {
+                setDragY(null);
+            });
+        }
+        else {
+            setDragY(null);
+        }
+    }, [canUpdate, onSave, field.key, codeValue, dragX, codeX, makeString]);
+    const onYTextChange = (0, react_1.useCallback)((newVal) => {
+        if (canUpdate) {
+            const parsed = Number(newVal);
+            if (!Number.isNaN(parsed)) {
+                const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
+                const newStr = makeString(currentX, parsed);
+                if (newStr !== codeValue) {
+                    setDragY(parsed);
+                    onSave(field.key, newStr).catch(() => {
+                        setDragY(null);
+                    });
+                }
+            }
+        }
+    }, [canUpdate, onSave, field.key, codeValue, dragX, codeX, makeString]);
+    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 }), 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 })
+        ] }));
+};
+exports.TimelineTranslateField = TimelineTranslateField;

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

@@ -0,0 +1,2 @@
+export declare const getDecimalPlaces: (num: number) => number;
+export declare const draggerStyle: React.CSSProperties;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.draggerStyle = exports.getDecimalPlaces = void 0;
+const getDecimalPlaces = (num) => {
+    const str = String(num);
+    const decimalIndex = str.indexOf('.');
+    return decimalIndex === -1 ? 0 : str.length - decimalIndex - 1;
+};
+exports.getDecimalPlaces = getDecimalPlaces;
+exports.draggerStyle = {
+    width: 80,
+};

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

@@ -0,0 +1,2 @@
+import type { ResolvedStackLocation } from 'remotion';
+export declare const useResolvedStack: (stack: string | null) => ResolvedStackLocation | null;

package/dist/components/Timeline/use-resolved-stack.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResolvedStack = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const get_stack_1 = require("./TimelineStack/get-stack");
+const resolvedCache = new Map();
+const inFlight = new Set();
+const subscribers = new Map();
+const useResolvedStack = (stack) => {
+    const updateResolvedStackTrace = (0, react_1.useContext)(remotion_1.Internals.SequenceStackTracesUpdateContext);
+    const [value, setValue] = (0, react_1.useState)(() => {
+        var _a;
+        if (!stack) {
+            return null;
+        }
+        return (_a = resolvedCache.get(stack)) !== null && _a !== void 0 ? _a : null;
+    });
+    (0, react_1.useEffect)(() => {
+        if (!stack) {
+            return;
+        }
+        if (resolvedCache.has(stack)) {
+            setValue(resolvedCache.get(stack));
+            return;
+        }
+        if (!subscribers.has(stack)) {
+            subscribers.set(stack, new Set());
+        }
+        const subs = subscribers.get(stack);
+        subs.add(setValue);
+        if (!inFlight.has(stack)) {
+            inFlight.add(stack);
+            (0, get_stack_1.getOriginalLocationFromStack)(stack, 'sequence')
+                .then((frame) => {
+                resolvedCache.set(stack, frame);
+                updateResolvedStackTrace(stack, frame);
+                subs.forEach((fn) => fn(frame));
+            })
+                .catch((err) => {
+                // eslint-disable-next-line no-console
+                console.error('Could not get original location of Sequence', err);
+            })
+                .finally(() => {
+                inFlight.delete(stack);
+            });
+        }
+        return () => {
+            subs.delete(setValue);
+        };
+    }, [stack, updateResolvedStackTrace]);
+    return value;
+};
+exports.useResolvedStack = useResolvedStack;

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

@@ -0,0 +1,4 @@
+import type { SequenceNodePath } from '@remotion/studio-shared';
+import type { TSequence } from 'remotion';
+import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+export declare const useSequencePropsSubscription: (sequence: TSequence, originalLocation: OriginalPosition | null) => SequenceNodePath | null;