@remotion/studio 4.0.473 → 4.0.475

package/dist/components/SelectedOutlineUvControls.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { SelectedOutline } from './selected-outline-geometry';
+import { type SelectedOutlineUvHandle } from './selected-outline-uv';
+type UvTarget = {
+    readonly containsSelection: boolean;
+    readonly uvHandles: readonly SelectedOutlineUvHandle[];
+};
+export declare const SelectedOutlineUvHandleConnectionLayer: React.FC<{
+    readonly outline: SelectedOutline;
+    readonly target: UvTarget | undefined;
+}>;
+export declare const SelectedOutlineUvHandleCircleLayer: React.FC<{
+    readonly onDraggingChange: (dragging: boolean) => void;
+    readonly outline: SelectedOutline;
+    readonly target: UvTarget | undefined;
+}>;
+export {};

package/dist/components/SelectedOutlineUvControls.js

@@ -0,0 +1,167 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectedOutlineUvHandleCircleLayer = exports.SelectedOutlineUvHandleConnectionLayer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const selected_outline_uv_1 = require("./selected-outline-uv");
+const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
+const save_effect_prop_1 = require("./Timeline/save-effect-prop");
+const getSvgPointFromPointerEvent = ({ event, rect, }) => {
+    return {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
+    };
+};
+const SelectedUvHandleConnectionLines = ({ handles, outline }) => {
+    const lines = (0, react_1.useMemo)(() => (0, selected_outline_uv_1.getUvHandleConnectionLines)({ handles, points: outline.points }), [handles, outline.points]);
+    return (jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: lines.map((line) => (jsx_runtime_1.jsx("line", { x1: line.from.x, y1: line.from.y, x2: line.to.x, y2: line.to.y, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: "none" }, line.key))) }));
+};
+const SelectedUvHandleCircle = ({ handle, onDraggingChange, outline }) => {
+    const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const position = (0, react_1.useMemo)(() => (0, selected_outline_uv_1.getUvHandlePosition)(outline.points, handle.value), [handle.value, outline.points]);
+    const onPointerDown = react_1.default.useCallback((event) => {
+        if (event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const svg = event.currentTarget.ownerSVGElement;
+        if (svg === null) {
+            return;
+        }
+        const svgRect = svg.getBoundingClientRect();
+        let lastValue = null;
+        onDraggingChange(true);
+        const defaultValue = handle.fieldDefault !== undefined
+            ? JSON.stringify(handle.fieldDefault)
+            : null;
+        const updateFromPointerEvent = (pointerEvent) => {
+            const point = getSvgPointFromPointerEvent({
+                event: pointerEvent,
+                rect: svgRect,
+            });
+            const nextValue = (0, selected_outline_uv_1.constrainUv)((0, selected_outline_uv_1.getUvCoordinateForPoint)(outline.points, point), handle.fieldSchema);
+            lastValue = nextValue;
+            setEffectDragOverrides(handle.nodePath, handle.effectIndex, handle.fieldKey, handle.propStatus.status === 'keyframed'
+                ? remotion_1.Internals.makeKeyframedDragOverride({
+                    status: handle.propStatus,
+                    frame: handle.sourceFrame,
+                    value: nextValue,
+                })
+                : remotion_1.Internals.makeStaticDragOverride(nextValue));
+        };
+        updateFromPointerEvent(event);
+        const onPointerMove = (moveEvent) => {
+            moveEvent.preventDefault();
+            updateFromPointerEvent(moveEvent);
+        };
+        const onPointerUp = () => {
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+            window.removeEventListener('pointercancel', onPointerUp);
+            onDraggingChange(false);
+            const stringifiedValue = lastValue === null ? null : JSON.stringify(lastValue);
+            const shouldSave = (() => {
+                if (lastValue === null) {
+                    return false;
+                }
+                if (handle.propStatus.status === 'keyframed') {
+                    return !(0, selected_outline_uv_1.tuplesEqual)(handle.value, lastValue);
+                }
+                return (!(0, selected_outline_uv_1.tuplesEqual)(handle.propStatus.codeValue, lastValue) &&
+                    !(defaultValue === stringifiedValue &&
+                        handle.propStatus.codeValue === undefined));
+            })();
+            if (!shouldSave) {
+                clearEffectDragOverrides(handle.nodePath, handle.effectIndex);
+                return;
+            }
+            (handle.propStatus.status === 'keyframed'
+                ? (0, call_add_keyframe_1.callAddEffectKeyframe)({
+                    fileName: handle.nodePath.absolutePath,
+                    nodePath: handle.nodePath,
+                    effectIndex: handle.effectIndex,
+                    fieldKey: handle.fieldKey,
+                    sourceFrame: handle.sourceFrame,
+                    value: lastValue,
+                    schema: handle.schema,
+                    setPropStatuses,
+                    clientId: handle.clientId,
+                })
+                : (0, save_effect_prop_1.saveEffectProp)({
+                    type: 'value',
+                    fileName: handle.nodePath.absolutePath,
+                    nodePath: handle.nodePath,
+                    effectIndex: handle.effectIndex,
+                    fieldKey: handle.fieldKey,
+                    value: lastValue,
+                    defaultValue,
+                    schema: handle.schema,
+                    setPropStatuses,
+                    clientId: handle.clientId,
+                })).finally(() => {
+                clearEffectDragOverrides(handle.nodePath, handle.effectIndex);
+            });
+        };
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerUp);
+    }, [
+        clearEffectDragOverrides,
+        handle,
+        onDraggingChange,
+        outline.points,
+        setPropStatuses,
+        setEffectDragOverrides,
+    ]);
+    return (jsx_runtime_1.jsx("circle", { cx: position.x, cy: position.y, r: 6, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: "default", onPointerDown: onPointerDown }));
+};
+const SelectedOutlineUvHandleConnectionLayer = ({ outline, target }) => {
+    if (!(target === null || target === void 0 ? void 0 : target.containsSelection) || target.uvHandles.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx(SelectedUvHandleConnectionLines, { handles: target.uvHandles, outline: outline }));
+};
+exports.SelectedOutlineUvHandleConnectionLayer = SelectedOutlineUvHandleConnectionLayer;
+const SelectedOutlineUvHandleCircleLayer = ({ onDraggingChange, outline, target }) => {
+    if (!(target === null || target === void 0 ? void 0 : target.containsSelection) || target.uvHandles.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: target.uvHandles.map((handle) => (jsx_runtime_1.jsx(SelectedUvHandleCircle, { handle: handle, onDraggingChange: onDraggingChange, outline: outline }, `${handle.effectIndex}-${handle.fieldKey}`))) }));
+};
+exports.SelectedOutlineUvHandleCircleLayer = SelectedOutlineUvHandleCircleLayer;

package/dist/components/StudioCanvasCapture.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const StudioCanvasCapture: React.FC<{
+    readonly children: React.ReactNode;
+    readonly density: number;
+}>;

package/dist/components/StudioCanvasCapture.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudioCanvasCapture = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const canvas_capture_1 = require("@remotion/canvas-capture");
+const react_1 = require("react");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const logCaptureError = (message, err) => {
+    // eslint-disable-next-line no-console
+    console.error(message, err instanceof Error ? err.message : String(err));
+};
+const StudioCanvasCapture = ({ children, density }) => {
+    const captureRef = (0, react_1.useRef)(null);
+    const isSupported = (0, react_1.useMemo)(() => (0, canvas_capture_1.isHtmlInCanvasAvailable)(), []);
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    (0, react_1.useEffect)(() => {
+        if (!isSupported) {
+            return;
+        }
+        const binding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'p',
+            commandCtrlKey: true,
+            callback: () => {
+                var _a;
+                (_a = captureRef.current) === null || _a === void 0 ? void 0 : _a.toggleRecording().catch((err) => {
+                    logCaptureError('Could not toggle Studio canvas recording:', err);
+                });
+            },
+            preventDefault: true,
+            triggerIfInputFieldFocused: true,
+            keepRegisteredWhenNotHighestContext: true,
+        });
+        return () => {
+            binding.unregister();
+        };
+    }, [isSupported, keybindings]);
+    return (jsx_runtime_1.jsx(canvas_capture_1.HtmlInCanvasCapture, { ref: captureRef, density: density, filename: "remotion-studio-canvas-recording.webm", children: children }));
+};
+exports.StudioCanvasCapture = StudioCanvasCapture;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { TimelineSelection } from './TimelineSelection';
+import type { TimelineEasingValue } from './update-selected-easing';
+export type EasingEditorModalState = {
+    type: 'easing-editor';
+    initialEasing: TimelineEasingValue;
+    selections: TimelineSelection[];
+};
+export declare const EasingEditorModal: React.FC<{
+    readonly state: EasingEditorModalState;
+}>;

package/dist/components/Timeline/EasingEditorModal.js

@@ -0,0 +1,247 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EasingEditorModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
+const modals_1 = require("../../state/modals");
+const Button_1 = require("../Button");
+const layout_1 = require("../layout");
+const ModalButton_1 = require("../ModalButton");
+const ModalFooter_1 = require("../ModalFooter");
+const ModalHeader_1 = require("../ModalHeader");
+const DismissableModal_1 = require("../NewComposition/DismissableModal");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const update_selected_easing_1 = require("./update-selected-easing");
+const SVG_WIDTH = 560;
+const SVG_HEIGHT = 320;
+const PLOT_LEFT = 42;
+const PLOT_TOP = 8;
+const PLOT_WIDTH = 500;
+const PLOT_HEIGHT = 304;
+const Y_MIN = -2;
+const Y_MAX = 3;
+const LINEAR_BEZIER = [0.25, 0.25, 0.75, 0.75];
+const container = {
+    width: 600,
+};
+const coordinatesGrid = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+    gap: 10,
+    marginTop: 12,
+    padding: '0 16px 16px',
+};
+const coordinateRow = {
+    gap: 4,
+};
+const coordinateLabel = {
+    fontSize: 13,
+    color: 'rgba(255, 255, 255, 0.72)',
+    paddingLeft: 6,
+};
+const coordinateInputWrapper = {
+    height: 34,
+    display: 'flex',
+    alignItems: 'center',
+};
+const numberInputStyle = {
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    borderRadius: 4,
+    width: '100%',
+};
+const svgStyle = {
+    display: 'block',
+    width: '100%',
+};
+const hiddenSubmit = {
+    display: 'none',
+};
+const clamp = (value, min, max) => {
+    return Math.min(max, Math.max(min, value));
+};
+const sanitizeBezier = (bezier) => [
+    clamp(bezier[0], 0, 1),
+    clamp(bezier[1], Y_MIN, Y_MAX),
+    clamp(bezier[2], 0, 1),
+    clamp(bezier[3], Y_MIN, Y_MAX),
+];
+const easingToBezier = (easing) => {
+    return easing === 'linear' ? LINEAR_BEZIER : sanitizeBezier(easing);
+};
+const roundCoordinate = (value) => Math.round(value * 10000) / 10000;
+const serializeBezier = (bezier) => {
+    const rounded = sanitizeBezier(bezier).map(roundCoordinate);
+    if (rounded[0] === rounded[1] && rounded[2] === rounded[3]) {
+        return 'linear';
+    }
+    return rounded;
+};
+const formatNumber = (value) => {
+    const numericValue = Number(value);
+    if (!Number.isFinite(numericValue)) {
+        return String(value);
+    }
+    return String(roundCoordinate(numericValue));
+};
+const xToSvg = (value) => PLOT_LEFT + value * PLOT_WIDTH;
+const yToSvg = (value) => PLOT_TOP + ((Y_MAX - value) / (Y_MAX - Y_MIN)) * PLOT_HEIGHT;
+const pointFromBezier = (bezier, handle) => {
+    const x = handle === 0 ? bezier[0] : bezier[2];
+    const y = handle === 0 ? bezier[1] : bezier[3];
+    return { x: xToSvg(x), y: yToSvg(y) };
+};
+const startPoint = { x: xToSvg(0), y: yToSvg(0) };
+const endPoint = { x: xToSvg(1), y: yToSvg(1) };
+const EasingEditorModal = ({ state }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const svgRef = (0, react_1.useRef)(null);
+    const [bezier, setBezier] = (0, react_1.useState)(() => easingToBezier(state.initialEasing));
+    const [saving, setSaving] = (0, react_1.useState)(false);
+    const [activeHandle, setActiveHandle] = (0, react_1.useState)(null);
+    const close = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    const setCoordinate = (0, react_1.useCallback)((handle, coordinate, value) => {
+        setBezier((previous) => {
+            const next = [...previous];
+            const index = handle === 0
+                ? coordinate === 'x'
+                    ? 0
+                    : 1
+                : coordinate === 'x'
+                    ? 2
+                    : 3;
+            next[index] =
+                coordinate === 'x' ? clamp(value, 0, 1) : clamp(value, Y_MIN, Y_MAX);
+            return next;
+        });
+    }, []);
+    const getValueFromPointer = (0, react_1.useCallback)((event) => {
+        const svg = svgRef.current;
+        if (!svg) {
+            return null;
+        }
+        const rect = svg.getBoundingClientRect();
+        const svgX = ((event.clientX - rect.left) / rect.width) * SVG_WIDTH;
+        const svgY = ((event.clientY - rect.top) / rect.height) * SVG_HEIGHT;
+        const x = clamp((svgX - PLOT_LEFT) / PLOT_WIDTH, 0, 1);
+        const y = clamp(Y_MAX - ((svgY - PLOT_TOP) / PLOT_HEIGHT) * (Y_MAX - Y_MIN), Y_MIN, Y_MAX);
+        return { x, y };
+    }, []);
+    const updateHandleFromPointer = (0, react_1.useCallback)((handle, event) => {
+        const value = getValueFromPointer(event);
+        if (!value) {
+            return;
+        }
+        setBezier((previous) => {
+            const next = [...previous];
+            if (handle === 0) {
+                next[0] = value.x;
+                next[1] = value.y;
+            }
+            else {
+                next[2] = value.x;
+                next[3] = value.y;
+            }
+            return next;
+        });
+    }, [getValueFromPointer]);
+    (0, react_1.useEffect)(() => {
+        if (activeHandle === null) {
+            return;
+        }
+        const onPointerMove = (event) => {
+            updateHandleFromPointer(activeHandle, event);
+        };
+        const onPointerUp = () => {
+            setActiveHandle(null);
+        };
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp, { once: true });
+        return () => {
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+        };
+    }, [activeHandle, updateHandleFromPointer]);
+    const onHandlePointerDown = (0, react_1.useCallback)((handle, event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setActiveHandle(handle);
+        updateHandleFromPointer(handle, event);
+    }, [updateHandleFromPointer]);
+    const onSave = (0, react_1.useCallback)(() => {
+        if (previewServerState.type !== 'connected' || saving) {
+            return;
+        }
+        setSaving(true);
+        const promise = (0, update_selected_easing_1.updateSelectedTimelineEasings)({
+            selections: state.selections,
+            sequences: sequencesRef.current,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            propStatuses: propStatusesRef.current,
+            setPropStatuses,
+            clientId: previewServerState.clientId,
+            easing: serializeBezier(bezier),
+        });
+        if (promise === null) {
+            setSaving(false);
+            return;
+        }
+        promise.catch(() => undefined);
+        close();
+    }, [
+        bezier,
+        close,
+        overrideIdToNodePathMappings,
+        previewServerState,
+        propStatusesRef,
+        saving,
+        sequencesRef,
+        setPropStatuses,
+        state.selections,
+    ]);
+    const onSubmit = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        onSave();
+    }, [onSave]);
+    const path = (0, react_1.useMemo)(() => {
+        const curveFirstHandle = pointFromBezier(bezier, 0);
+        const curveSecondHandle = pointFromBezier(bezier, 1);
+        return `M ${startPoint.x} ${startPoint.y} C ${curveFirstHandle.x} ${curveFirstHandle.y}, ${curveSecondHandle.x} ${curveSecondHandle.y}, ${endPoint.x} ${endPoint.y}`;
+    }, [bezier]);
+    const firstHandle = pointFromBezier(bezier, 0);
+    const secondHandle = pointFromBezier(bezier, 1);
+    const yZero = yToSvg(0);
+    const yOne = yToSvg(1);
+    const saveDisabled = saving || previewServerState.type !== 'connected';
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Edit easing" }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
+                    jsx_runtime_1.jsxs("div", { style: container, children: [
+                            jsx_runtime_1.jsxs("svg", { ref: svgRef, width: SVG_WIDTH, height: SVG_HEIGHT, viewBox: `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`, style: svgStyle, "aria-label": "Bezier curve editor", children: [
+                                    jsx_runtime_1.jsx("line", { x1: PLOT_LEFT, y1: yZero, x2: PLOT_LEFT + PLOT_WIDTH, y2: yZero, stroke: colors_1.INPUT_BORDER_COLOR_HOVERED, strokeWidth: 1 }), jsx_runtime_1.jsx("line", { x1: PLOT_LEFT, y1: yOne, x2: PLOT_LEFT + PLOT_WIDTH, y2: yOne, stroke: colors_1.INPUT_BORDER_COLOR_HOVERED, strokeWidth: 1 }), jsx_runtime_1.jsx("line", { x1: startPoint.x, y1: startPoint.y, x2: firstHandle.x, y2: firstHandle.y, stroke: "rgba(255, 255, 255, 0.35)", strokeWidth: 1 }), jsx_runtime_1.jsx("line", { x1: endPoint.x, y1: endPoint.y, x2: secondHandle.x, y2: secondHandle.y, stroke: "rgba(255, 255, 255, 0.35)", strokeWidth: 1 }), jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: startPoint.x, cy: startPoint.y, r: 4, fill: "white" }), jsx_runtime_1.jsx("circle", { cx: endPoint.x, cy: endPoint.y, r: 4, fill: "white" }), jsx_runtime_1.jsx("circle", { cx: firstHandle.x, cy: firstHandle.y, r: 6, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: activeHandle === 0 ? 'grabbing' : 'default', onPointerDown: (event) => onHandlePointerDown(0, event) }), jsx_runtime_1.jsx("circle", { cx: secondHandle.x, cy: secondHandle.y, r: 6, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: activeHandle === 1 ? 'grabbing' : 'default', onPointerDown: (event) => onHandlePointerDown(1, event) }), jsx_runtime_1.jsx("text", { x: PLOT_LEFT - 22, y: yZero + 3, fill: colors_1.LIGHT_TEXT, fontSize: 9, children: "0" }), jsx_runtime_1.jsx("text", { x: PLOT_LEFT - 22, y: yOne + 3, fill: colors_1.LIGHT_TEXT, fontSize: 9, children: "1" })
+                                ] }), jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
+                                    jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
+                                            jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "X1" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: bezier[0], status: "ok", onValueChange: (value) => setCoordinate(0, 'x', value), onValueChangeEnd: (value) => setCoordinate(0, 'x', value), onTextChange: () => undefined, min: 0, max: 1, step: 0.01, formatter: formatNumber, rightAlign: false, style: numberInputStyle, snapToStep: false }) })
+                                        ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
+                                            jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Y1" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: bezier[1], status: "ok", onValueChange: (value) => setCoordinate(0, 'y', value), onValueChangeEnd: (value) => setCoordinate(0, 'y', value), onTextChange: () => undefined, min: Y_MIN, max: Y_MAX, step: 0.01, formatter: formatNumber, rightAlign: false, style: numberInputStyle, snapToStep: false }) })
+                                        ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
+                                            jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "X2" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: bezier[2], status: "ok", onValueChange: (value) => setCoordinate(1, 'x', value), onValueChangeEnd: (value) => setCoordinate(1, 'x', value), onTextChange: () => undefined, min: 0, max: 1, step: 0.01, formatter: formatNumber, rightAlign: false, style: numberInputStyle, snapToStep: false }) })
+                                        ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
+                                            jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Y2" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: bezier[3], status: "ok", onValueChange: (value) => setCoordinate(1, 'y', value), onValueChangeEnd: (value) => setCoordinate(1, 'y', value), onTextChange: () => undefined, min: Y_MIN, max: Y_MAX, step: 0.01, formatter: formatNumber, rightAlign: false, style: numberInputStyle, snapToStep: false }) })
+                                        ] })
+                                ] })
+                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { justify: "flex-end", align: "center", children: [
+                                jsx_runtime_1.jsx(Button_1.Button, { onClick: close, children: "Discard" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(ModalButton_1.ModalButton, { onClick: onSave, disabled: saveDisabled, children: "Save" })
+                            ] }) }), jsx_runtime_1.jsx("button", { type: "submit", style: hiddenSubmit, disabled: saveDisabled, "aria-hidden": true, tabIndex: -1 })
+                ] })
+        ] }));
+};
+exports.EasingEditorModal = EasingEditorModal;

package/dist/components/Timeline/KeyframeSettingsModal.js

@@ -68,7 +68,7 @@ const getExtrapolateValues = (onSelect) => {
 const KeyframeSettingsModal = ({ state }) => {
     var _a;
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const [left, setLeft] = (0, react_1.useState)(state.status.clamping.left);
     const [right, setRight] = (0, react_1.useState)(state.status.clamping.right);
@@ -92,6 +92,7 @@ const KeyframeSettingsModal = ({ state }) => {
             return;
         }
         const settings = {
+            type: 'settings',
             clamping: canEditClamping ? { left, right } : undefined,
             posterize: posterize <= 0 ? undefined : posterize,
         };
@@ -103,7 +104,7 @@ const KeyframeSettingsModal = ({ state }) => {
                 fieldKey: state.fieldKey,
                 settings,
                 schema: state.schema,
-                setCodeValues,
+                setPropStatuses,
                 clientId: previewServerState.clientId,
             })
             : (0, call_update_keyframe_settings_1.callUpdateEffectKeyframeSettings)({
@@ -113,7 +114,7 @@ const KeyframeSettingsModal = ({ state }) => {
                 fieldKey: state.fieldKey,
                 settings,
                 schema: state.schema,
-                setCodeValues,
+                setPropStatuses,
                 clientId: previewServerState.clientId,
             });
         promise.then(close).finally(() => {
@@ -126,7 +127,7 @@ const KeyframeSettingsModal = ({ state }) => {
         posterize,
         previewServerState,
         right,
-        setCodeValues,
+        setPropStatuses,
         state,
     ]);
     const saveDisabled = saving || previewServerState.type !== 'connected';

package/dist/components/Timeline/SequencePropsObserver.js

@@ -6,19 +6,19 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const SequencePropsObserver = () => {
     const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     (0, react_1.useEffect)(() => {
         const handleEvent = (event) => {
             if (event.type !== 'sequence-props-updated') {
                 return;
             }
-            setCodeValues(event.nodePath, () => event.result);
+            setPropStatuses(event.nodePath, () => event.result);
         };
         const unsubscribe = subscribeToEvent('sequence-props-updated', handleEvent);
         return () => {
             unsubscribe();
         };
-    }, [setCodeValues, subscribeToEvent]);
+    }, [setPropStatuses, subscribeToEvent]);
     return null;
 };
 exports.SequencePropsObserver = SequencePropsObserver;

package/dist/components/Timeline/Timeline.js

@@ -59,6 +59,7 @@ const TimelineDragHandler_1 = require("./TimelineDragHandler");
 const TimelineHeightContainer_1 = require("./TimelineHeightContainer");
 const TimelineInOutDragHandler_1 = require("./TimelineInOutDragHandler");
 const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
+const TimelineKeyframeTracksContext_1 = require("./TimelineKeyframeTracksContext");
 const TimelineList_1 = require("./TimelineList");
 const TimelinePinchZoom_1 = require("./TimelinePinchZoom");
 const TimelinePlayCursorSyncer_1 = require("./TimelinePlayCursorSyncer");
@@ -228,13 +229,15 @@ const TimelineInner = () => {
                     return null;
                 }
                 return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
-            }), jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}), jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown }), jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
-                        jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
-                                jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
-                                            jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
-                                        ] }) })
-                            ] })
-                    ] })) })
+            }), jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}), jsx_runtime_1.jsxs(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: [
+                    jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown }), jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
+                                jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
+                                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
+                                                    jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
+                                                ] }) })
+                                    ] })
+                            ] })) })
+                ] })
         ] }));
 };
 exports.Timeline = react_1.default.memo(TimelineInner);

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

@@ -1,6 +1,6 @@
 import { type EffectClipboardSnapshot, type EffectPropClipboardData } from '@remotion/studio-shared';
 import type React from 'react';
-import { type CodeValues, type OverrideIdToNodePaths, type SequencePropsSubscriptionKey, type SequenceSchema, type TSequence } from 'remotion';
+import { type OverrideIdToNodePaths, type PropStatuses, type SequencePropsSubscriptionKey, type SequenceSchema, type TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type TimelineSelection } from './TimelineSelection';
 export type PasteEffectsTarget = {
@@ -25,18 +25,18 @@ export type PasteEffectPropTarget = {
     readonly type: 'none' | 'multiple' | 'unsupported' | 'effect-type-mismatch' | 'prop-mismatch' | 'uncopyable';
 };
 export declare const getPasteEffectsTarget: (selectedItems: readonly TimelineSelection[]) => PasteEffectsTarget;
-export declare const getSnapshotsFromSelection: ({ selection, codeValues, }: {
+export declare const getSnapshotsFromSelection: ({ selection, propStatuses, }: {
     selection: TimelineSelection;
-    codeValues: CodeValues;
+    propStatuses: PropStatuses;
 }) => EffectClipboardSnapshot[] | null;
-export declare const getEffectPropClipboardDataFromSelection: ({ selection, codeValues, }: {
+export declare const getEffectPropClipboardDataFromSelection: ({ selection, propStatuses, }: {
     selection: TimelineSelection;
-    codeValues: CodeValues;
+    propStatuses: PropStatuses;
 }) => EffectPropClipboardData | null;
-export declare const getPasteEffectPropTarget: ({ selectedItems, payload, codeValues, sequences, overrideIdsToNodePaths, }: {
+export declare const getPasteEffectPropTarget: ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }: {
     readonly selectedItems: readonly TimelineSelection[];
     readonly payload: EffectPropClipboardData;
-    readonly codeValues: CodeValues;
+    readonly propStatuses: PropStatuses;
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
 }) => PasteEffectPropTarget;