@remotion/studio 4.0.432 → 4.0.434

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

@@ -8,8 +8,6 @@ export declare const TimelineFieldValue: React.FC<{
     readonly onDragEnd: () => void;
     readonly canUpdate: boolean;
     readonly propStatus: CanUpdateSequencePropStatus | null;
+    readonly codeValue: unknown;
     readonly effectiveValue: unknown;
 }>;
-export declare const TimelineFieldSavingSpinner: React.FC<{
-    readonly saving: boolean;
-}>;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -1,79 +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, effectiveValue, }) => {
+const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, canUpdate, effectiveValue, codeValue, }) => {
     const wrapperStyle = canUpdate === null || canUpdate === false
         ? notEditableBackground
         : undefined;
@@ -81,24 +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" }) }));
     }
     if (field.typeName === 'number') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineNumberField, { field: field, codeValue: effectiveValue, 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: effectiveValue, 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(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-sequence-props-subscription.d.ts

@@ -1,3 +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) => void;
+export declare const useSequencePropsSubscription: (sequence: TSequence, originalLocation: OriginalPosition | null) => SequenceNodePath | null;

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

@@ -43,6 +43,14 @@ const useSequencePropsSubscription = (sequence, originalLocation) => {
     currentLocationLine.current = locationLine;
     const currentLocationColumn = (0, react_1.useRef)(locationColumn);
     currentLocationColumn.current = locationColumn;
+    const nodePathRef = (0, react_1.useRef)(null);
+    const isMountedRef = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
     (0, react_1.useEffect)(() => {
         if (!clientId ||
             !locationSource ||
@@ -67,25 +75,36 @@ const useSequencePropsSubscription = (sequence, originalLocation) => {
                 return;
             }
             if (result.canUpdate) {
+                nodePathRef.current = result.nodePath;
                 setPropStatusesForSequence(result.props);
             }
             else {
+                nodePathRef.current = null;
                 setPropStatusesForSequence(null);
             }
         })
-            .catch(() => {
+            .catch((err) => {
+            nodePathRef.current = null;
+            remotion_1.Internals.Log.error(err);
             setPropStatusesForSequence(null);
         });
         return () => {
-            setPropStatusesForSequence(null);
-            (0, call_api_1.callApi)('/api/unsubscribe-from-sequence-props', {
-                fileName: locationSource,
-                line: locationLine,
-                column: locationColumn,
-                clientId,
-            }).catch(() => {
-                // Ignore unsubscribe errors
-            });
+            const currentNodePath = nodePathRef.current;
+            // Only clear props on true unmount, not on re-subscribe due to
+            // line number changes — avoids flicker while re-subscribing.
+            if (!isMountedRef.current) {
+                setPropStatusesForSequence(null);
+            }
+            nodePathRef.current = null;
+            if (currentNodePath) {
+                (0, call_api_1.callApi)('/api/unsubscribe-from-sequence-props', {
+                    fileName: locationSource,
+                    nodePath: currentNodePath,
+                    clientId,
+                }).catch(() => {
+                    // Ignore unsubscribe errors
+                });
+            }
         };
     }, [
         clientId,
@@ -104,8 +123,8 @@ const useSequencePropsSubscription = (sequence, originalLocation) => {
                 return;
             }
             if (event.fileName !== currentLocationSource.current ||
-                event.line !== currentLocationLine.current ||
-                event.column !== currentLocationColumn.current) {
+                !nodePathRef.current ||
+                JSON.stringify(event.nodePath) !== JSON.stringify(nodePathRef.current)) {
                 return;
             }
             if (event.result.canUpdate) {
@@ -126,5 +145,6 @@ const useSequencePropsSubscription = (sequence, originalLocation) => {
         subscribeToEvent,
         setPropStatusesForSequence,
     ]);
+    return nodePathRef.current;
 };
 exports.useSequencePropsSubscription = useSequencePropsSubscription;