@remotion/studio 4.0.477 → 4.0.479

package/dist/components/Timeline/EasingEditorModal.js

@@ -1,38 +1,105 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EasingEditorModal = void 0;
+exports.EasingEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 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 Checkbox_1 = require("../Checkbox");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const InputDragger_1 = require("../NewComposition/InputDragger");
+const SegmentedControl_1 = require("../SegmentedControl");
+const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 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_TOP = 0;
 const PLOT_WIDTH = 500;
-const PLOT_HEIGHT = 304;
+const PLOT_HEIGHT = SVG_HEIGHT;
 const Y_MIN = -2;
 const Y_MAX = 3;
+const LINEAR_EASING = { type: 'linear' };
 const LINEAR_BEZIER = [0.25, 0.25, 0.75, 0.75];
-const container = {
-    width: 600,
+const DEFAULT_EASING_GRAPH_LABELS = {
+    start: '0',
+    end: '1',
 };
-const coordinatesGrid = {
+const EASING_GRAPH_GUIDE_COLOR = 'rgba(255, 255, 255, 0.12)';
+const EASING_GRAPH_LABEL_FONT_SIZE = 13;
+const EASING_GRAPH_LABEL_HEIGHT = 20;
+const EASING_GRAPH_LABEL_HORIZONTAL_PADDING = 4;
+const EASING_GRAPH_LABEL_MAX_WIDTH = PLOT_WIDTH / 2;
+const PRESET_PREVIEW_WIDTH = 48;
+const PRESET_PREVIEW_HEIGHT = 30;
+const PRESET_PREVIEW_PADDING = 5;
+const PRESET_PREVIEW_Y_MIN = -0.35;
+const PRESET_PREVIEW_Y_MAX = 1.45;
+const DEFAULT_SPRING_EASING = {
+    type: 'spring',
+    damping: 10,
+    mass: 1,
+    overshootClamping: false,
+    stiffness: 100,
+};
+const EDITOR_EASING_PRESETS = [
+    {
+        id: 'linear',
+        label: 'Linear',
+        easing: studio_shared_1.LINEAR_KEYFRAME_EASING,
+    },
+    ...studio_shared_1.KEYFRAME_EASING_PRESETS,
+];
+const SPRING_LIMITS = {
+    damping: { min: 1, max: 200, step: 1 },
+    mass: { min: 0.1, max: 20, step: 0.1 },
+    stiffness: { min: 1, max: 1000, step: 1 },
+};
+const SPRING_DECIMAL_PLACES = {
+    damping: 0,
+    mass: 2,
+    stiffness: 0,
+};
+const inlineContainer = {
+    width: '100%',
+    minWidth: 0,
+};
+const segmentedControlWrapper = {
+    display: 'flex',
+    justifyContent: 'flex-start',
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+    marginBottom: 10,
+};
+const presetButtonsWrapper = {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: 6,
+    justifyContent: 'flex-start',
+    marginBottom: 8,
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+};
+const presetButtonBase = {
+    alignItems: 'center',
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_HOVERED}`,
+    borderRadius: 4,
+    display: 'inline-flex',
+    height: 34,
+    justifyContent: 'center',
+    padding: 0,
+    width: 52,
+};
+const presetPreviewSvgStyle = {
+    display: 'block',
+    height: PRESET_PREVIEW_HEIGHT,
+    width: PRESET_PREVIEW_WIDTH,
+};
+const coordinatesGridBase = {
     display: 'grid',
-    gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
     gap: 10,
     marginTop: 12,
-    padding: '0 16px 16px',
 };
 const coordinateRow = {
     gap: 4,
@@ -47,18 +114,22 @@ const coordinateInputWrapper = {
     display: 'flex',
     alignItems: 'center',
 };
+const checkboxWrapper = {
+    ...coordinateInputWrapper,
+    paddingLeft: 6,
+};
 const numberInputStyle = {
     backgroundColor: colors_1.INPUT_BACKGROUND,
     borderRadius: 4,
     width: '100%',
 };
 const svgStyle = {
+    aspectRatio: `${SVG_WIDTH} / ${SVG_HEIGHT}`,
     display: 'block',
+    height: 'auto',
+    overflow: 'visible',
     width: '100%',
 };
-const hiddenSubmit = {
-    display: 'none',
-};
 const clamp = (value, min, max) => {
     return Math.min(max, Math.max(min, value));
 };
@@ -68,16 +139,60 @@ const sanitizeBezier = (bezier) => [
     clamp(bezier[2], 0, 1),
     clamp(bezier[3], Y_MIN, Y_MAX),
 ];
+const isSpringEasing = (easing) => {
+    return easing.type === 'spring';
+};
+const isBezierEasing = (easing) => {
+    return easing.type === 'bezier';
+};
 const easingToBezier = (easing) => {
-    return easing === 'linear' ? LINEAR_BEZIER : sanitizeBezier(easing);
+    return isBezierEasing(easing)
+        ? sanitizeBezier([easing.x1, easing.y1, easing.x2, easing.y2])
+        : LINEAR_BEZIER;
+};
+const easingToSpring = (easing) => {
+    return isSpringEasing(easing)
+        ? sanitizeSpring(easing)
+        : DEFAULT_SPRING_EASING;
+};
+const easingToMode = (easing) => {
+    return isSpringEasing(easing) ? 'spring' : 'bezier';
 };
-const roundCoordinate = (value) => Math.round(value * 10000) / 10000;
+const roundToDecimalPlaces = (value, decimalPlaces) => {
+    const factor = 10 ** decimalPlaces;
+    const rounded = Math.round(value * factor) / factor;
+    return Object.is(rounded, -0) ? 0 : rounded;
+};
+const roundCoordinate = (value) => roundToDecimalPlaces(value, 4);
 const serializeBezier = (bezier) => {
     const rounded = sanitizeBezier(bezier).map(roundCoordinate);
     if (rounded[0] === rounded[1] && rounded[2] === rounded[3]) {
-        return 'linear';
+        return LINEAR_EASING;
+    }
+    return {
+        type: 'bezier',
+        x1: rounded[0],
+        y1: rounded[1],
+        x2: rounded[2],
+        y2: rounded[3],
+    };
+};
+const sanitizeSpringValue = (value, key, fallback) => {
+    const limits = SPRING_LIMITS[key];
+    if (!Number.isFinite(value)) {
+        return fallback;
     }
-    return rounded;
+    return roundToDecimalPlaces(clamp(value, limits.min, limits.max), SPRING_DECIMAL_PLACES[key]);
+};
+const sanitizeSpring = (spring) => ({
+    type: 'spring',
+    damping: sanitizeSpringValue(spring.damping, 'damping', DEFAULT_SPRING_EASING.damping),
+    mass: sanitizeSpringValue(spring.mass, 'mass', DEFAULT_SPRING_EASING.mass),
+    overshootClamping: spring.overshootClamping,
+    stiffness: sanitizeSpringValue(spring.stiffness, 'stiffness', DEFAULT_SPRING_EASING.stiffness),
+});
+const serializeSpring = (spring) => {
+    return sanitizeSpring(spring);
 };
 const formatNumber = (value) => {
     const numericValue = Number(value);
@@ -86,44 +201,384 @@ const formatNumber = (value) => {
     }
     return String(roundCoordinate(numericValue));
 };
+const formatNumberWithDecimalPlaces = (decimalPlaces) => (value) => {
+    const numericValue = Number(value);
+    if (!Number.isFinite(numericValue)) {
+        return String(value);
+    }
+    return String(roundToDecimalPlaces(numericValue, decimalPlaces));
+};
+const springFormatters = {
+    damping: formatNumberWithDecimalPlaces(SPRING_DECIMAL_PLACES.damping),
+    mass: formatNumberWithDecimalPlaces(SPRING_DECIMAL_PLACES.mass),
+    stiffness: formatNumberWithDecimalPlaces(SPRING_DECIMAL_PLACES.stiffness),
+};
+const areEasingsEqual = (first, second) => {
+    if (first === second) {
+        return true;
+    }
+    if (first.type !== second.type) {
+        return false;
+    }
+    switch (first.type) {
+        case 'linear':
+            return true;
+        case 'spring':
+            return (second.type === 'spring' &&
+                first.damping === second.damping &&
+                first.mass === second.mass &&
+                first.overshootClamping === second.overshootClamping &&
+                first.stiffness === second.stiffness);
+        case 'bezier':
+            return (second.type === 'bezier' &&
+                first.x1 === second.x1 &&
+                first.y1 === second.y1 &&
+                first.x2 === second.x2 &&
+                first.y2 === second.y2);
+        default:
+            throw new Error(`Unsupported easing: ${JSON.stringify(first)}`);
+    }
+};
+const getEasingUpdateTargetKey = (update) => {
+    const nodePathKey = remotion_1.Internals.makeSequencePropsSubscriptionKey(update.nodePath);
+    if (update.type === 'sequence') {
+        return `sequence:${nodePathKey}:${update.fieldKey}:${update.segmentIndex}`;
+    }
+    return `effect:${nodePathKey}:${update.effectIndex}:${update.fieldKey}:${update.segmentIndex}`;
+};
+const getBuiltInVisualStyleFieldSchema = (fieldKey) => {
+    const transformSchema = remotion_1.Internals.transformSchema;
+    const directField = transformSchema[fieldKey];
+    if (directField) {
+        return directField;
+    }
+    return transformSchema[fieldKey.startsWith('style.') ? fieldKey : `style.${fieldKey}`];
+};
+const getEasingGraphFieldSchema = (update) => {
+    var _a;
+    return ((_a = update.schema[update.fieldKey]) !== null && _a !== void 0 ? _a : getBuiltInVisualStyleFieldSchema(update.fieldKey));
+};
+const formatEasingGraphLabel = (value, update) => (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+    fieldSchema: getEasingGraphFieldSchema(update),
+    value,
+});
+const getEasingGraphLabelsFromUpdate = (update) => {
+    const startKeyframe = update.propStatus.keyframes[update.segmentIndex];
+    const endKeyframe = update.propStatus.keyframes[update.segmentIndex + 1];
+    if (!startKeyframe || !endKeyframe) {
+        return null;
+    }
+    return {
+        start: formatEasingGraphLabel(startKeyframe.value, update),
+        end: formatEasingGraphLabel(endKeyframe.value, update),
+    };
+};
+const areEasingGraphLabelsEqual = (first, second) => first.start === second.start && first.end === second.end;
+const getEasingGraphLabels = (updates) => {
+    const firstLabels = updates.length === 0 ? null : getEasingGraphLabelsFromUpdate(updates[0]);
+    if (firstLabels === null) {
+        return DEFAULT_EASING_GRAPH_LABELS;
+    }
+    return updates.every((update) => {
+        const labels = getEasingGraphLabelsFromUpdate(update);
+        return labels !== null && areEasingGraphLabelsEqual(labels, firstLabels);
+    })
+        ? firstLabels
+        : DEFAULT_EASING_GRAPH_LABELS;
+};
 const xToSvg = (value) => PLOT_LEFT + value * PLOT_WIDTH;
 const yToSvg = (value) => PLOT_TOP + ((Y_MAX - value) / (Y_MAX - Y_MIN)) * PLOT_HEIGHT;
+const presetPreviewXToSvg = (value) => PRESET_PREVIEW_PADDING +
+    value * (PRESET_PREVIEW_WIDTH - PRESET_PREVIEW_PADDING * 2);
+const presetPreviewYToSvg = (value) => PRESET_PREVIEW_PADDING +
+    ((PRESET_PREVIEW_Y_MAX - value) /
+        (PRESET_PREVIEW_Y_MAX - PRESET_PREVIEW_Y_MIN)) *
+        (PRESET_PREVIEW_HEIGHT - PRESET_PREVIEW_PADDING * 2);
+const getEasingFunction = (easing) => {
+    switch (easing.type) {
+        case 'linear':
+            return remotion_1.Easing.linear;
+        case 'bezier':
+            return remotion_1.Easing.bezier(easing.x1, easing.y1, easing.x2, easing.y2);
+        case 'spring':
+            return remotion_1.Easing.spring({
+                damping: easing.damping,
+                mass: easing.mass,
+                overshootClamping: easing.overshootClamping,
+                stiffness: easing.stiffness,
+            });
+        default:
+            throw new Error(`Unsupported easing: ${JSON.stringify(easing)}`);
+    }
+};
+const getPresetPreviewPath = (easing) => {
+    const easingFunction = getEasingFunction(easing);
+    const samples = 36;
+    const points = [];
+    for (let i = 0; i <= samples; i++) {
+        const progress = i / samples;
+        const x = presetPreviewXToSvg(progress);
+        const y = presetPreviewYToSvg(clamp(easingFunction(progress), PRESET_PREVIEW_Y_MIN, PRESET_PREVIEW_Y_MAX));
+        points.push(`${i === 0 ? 'M' : 'L'} ${x} ${y}`);
+    }
+    return points.join(' ');
+};
 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 getEasingGraphLabelWidth = (label) => {
+    return clamp(label.length * 7.8 + EASING_GRAPH_LABEL_HORIZONTAL_PADDING * 2, 24, EASING_GRAPH_LABEL_MAX_WIDTH);
+};
+const getEasingGraphLabelStyle = (textAlign) => ({
+    alignItems: 'center',
+    backgroundColor: colors_1.BACKGROUND,
+    color: colors_1.LIGHT_TEXT,
+    display: 'flex',
+    fontSize: EASING_GRAPH_LABEL_FONT_SIZE,
+    height: '100%',
+    justifyContent: textAlign === 'left' ? 'flex-start' : 'flex-end',
+    lineHeight: `${EASING_GRAPH_LABEL_HEIGHT}px`,
+    overflow: 'hidden',
+    padding: `0 ${EASING_GRAPH_LABEL_HORIZONTAL_PADDING}px`,
+    textAlign,
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+});
+const EasingGraphScaffold = ({ labels }) => {
+    const yZero = yToSvg(0);
+    const yOne = yToSvg(1);
+    const bottomLabelWidth = getEasingGraphLabelWidth(labels.start);
+    const topLabelWidth = getEasingGraphLabelWidth(labels.end);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("line", { x1: PLOT_LEFT, y1: yZero, x2: PLOT_LEFT + PLOT_WIDTH, y2: yZero, stroke: EASING_GRAPH_GUIDE_COLOR, strokeWidth: 1 }), jsx_runtime_1.jsx("line", { x1: PLOT_LEFT, y1: yOne, x2: PLOT_LEFT + PLOT_WIDTH, y2: yOne, stroke: EASING_GRAPH_GUIDE_COLOR, strokeWidth: 1 }), jsx_runtime_1.jsx("foreignObject", { x: PLOT_LEFT - EASING_GRAPH_LABEL_HORIZONTAL_PADDING, y: yOne - EASING_GRAPH_LABEL_HEIGHT / 2, width: topLabelWidth, height: EASING_GRAPH_LABEL_HEIGHT, children: jsx_runtime_1.jsx("div", { style: getEasingGraphLabelStyle('left'), title: labels.end, children: labels.end }) }), jsx_runtime_1.jsx("foreignObject", { x: PLOT_LEFT +
+                    PLOT_WIDTH -
+                    bottomLabelWidth +
+                    EASING_GRAPH_LABEL_HORIZONTAL_PADDING, y: yZero - EASING_GRAPH_LABEL_HEIGHT / 2, width: bottomLabelWidth, height: EASING_GRAPH_LABEL_HEIGHT, children: jsx_runtime_1.jsx("div", { style: getEasingGraphLabelStyle('right'), title: labels.start, children: labels.start }) })
+        ] }));
+};
+const EasingPresetButton = ({ currentEasing, disabled, onClick, preset }) => {
+    const selected = areEasingsEqual(currentEasing, preset.easing);
+    const path = (0, react_1.useMemo)(() => getPresetPreviewPath(preset.easing), [preset.easing]);
+    const style = (0, react_1.useMemo)(() => ({
+        ...presetButtonBase,
+        backgroundColor: selected ? 'rgba(11, 132, 243, 0.18)' : colors_1.INPUT_BACKGROUND,
+        borderColor: selected ? colors_1.BLUE : colors_1.INPUT_BORDER_COLOR_HOVERED,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.45 : 1,
+    }), [disabled, selected]);
+    const handleClick = (0, react_1.useCallback)(() => {
+        onClick(preset.easing);
+    }, [onClick, preset.easing]);
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: preset.label, "aria-label": `Apply ${preset.label} easing`, disabled: disabled, onClick: handleClick, children: jsx_runtime_1.jsx("svg", { width: PRESET_PREVIEW_WIDTH, height: PRESET_PREVIEW_HEIGHT, viewBox: `0 0 ${PRESET_PREVIEW_WIDTH} ${PRESET_PREVIEW_HEIGHT}`, style: presetPreviewSvgStyle, "aria-hidden": "true", focusable: false, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+};
+const EasingEditor = ({ state, renderHeader }) => {
     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 { setDragOverrides, clearDragOverrides, setEffectDragOverrides, clearEffectDragOverrides, 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 [mode, setMode] = (0, react_1.useState)(() => easingToMode(state.initialEasing));
     const [bezier, setBezier] = (0, react_1.useState)(() => easingToBezier(state.initialEasing));
-    const [saving, setSaving] = (0, react_1.useState)(false);
+    const [spring, setSpring] = (0, react_1.useState)(() => easingToSpring(state.initialEasing));
+    const bezierRef = (0, react_1.useRef)(bezier);
+    const springRef = (0, react_1.useRef)(spring);
+    const liveOverrideVersionRef = (0, react_1.useRef)(0);
+    const pendingOverrideTargetsRef = (0, react_1.useRef)([]);
     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;
+    (0, react_1.useEffect)(() => {
+        const nextBezier = easingToBezier(state.initialEasing);
+        const nextSpring = easingToSpring(state.initialEasing);
+        bezierRef.current = nextBezier;
+        springRef.current = nextSpring;
+        setMode(easingToMode(state.initialEasing));
+        setBezier(nextBezier);
+        setSpring(nextSpring);
+    }, [state.initialEasing]);
+    const getCurrentEasingUpdates = (0, react_1.useCallback)(() => {
+        return (0, update_selected_easing_1.getSelectedEasingUpdates)({
+            selections: state.selections,
+            sequences: sequencesRef.current,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            propStatuses: propStatusesRef.current,
         });
-    }, []);
+    }, [
+        overrideIdToNodePathMappings,
+        propStatusesRef,
+        sequencesRef,
+        state.selections,
+    ]);
+    const clearEasingDragOverrides = (0, react_1.useCallback)((updates) => {
+        const sequenceTargets = new Set();
+        const effectTargets = new Set();
+        for (const update of updates) {
+            const key = remotion_1.Internals.makeSequencePropsSubscriptionKey(update.nodePath);
+            if (update.type === 'sequence') {
+                if (!sequenceTargets.has(key)) {
+                    sequenceTargets.add(key);
+                    clearDragOverrides(update.nodePath);
+                }
+                continue;
+            }
+            const effectKey = `${key}.${update.effectIndex}`;
+            if (!effectTargets.has(effectKey)) {
+                effectTargets.add(effectKey);
+                clearEffectDragOverrides(update.nodePath, update.effectIndex);
+            }
+        }
+    }, [clearDragOverrides, clearEffectDragOverrides]);
+    const applyLiveEasing = (0, react_1.useCallback)((easing) => {
+        const updates = getCurrentEasingUpdates();
+        liveOverrideVersionRef.current++;
+        const version = liveOverrideVersionRef.current;
+        const nextTargetKeys = new Set(updates.map(getEasingUpdateTargetKey));
+        const staleTargets = pendingOverrideTargetsRef.current.filter((update) => !nextTargetKeys.has(getEasingUpdateTargetKey(update)));
+        clearEasingDragOverrides(staleTargets);
+        pendingOverrideTargetsRef.current = updates;
+        for (const update of updates) {
+            const dragOverrideValue = (0, update_selected_easing_1.makeEasingDragOverride)({
+                status: update.propStatus,
+                segmentIndex: update.segmentIndex,
+                easing,
+            });
+            if (update.type === 'sequence') {
+                setDragOverrides(update.nodePath, update.fieldKey, dragOverrideValue);
+            }
+            else {
+                setEffectDragOverrides(update.nodePath, update.effectIndex, update.fieldKey, dragOverrideValue);
+            }
+        }
+        return version;
+    }, [
+        clearEasingDragOverrides,
+        getCurrentEasingUpdates,
+        setDragOverrides,
+        setEffectDragOverrides,
+    ]);
+    const clearPendingEasingDragOverrides = (0, react_1.useCallback)((version) => {
+        if (version !== liveOverrideVersionRef.current) {
+            return;
+        }
+        clearEasingDragOverrides(pendingOverrideTargetsRef.current);
+        pendingOverrideTargetsRef.current = [];
+    }, [clearEasingDragOverrides]);
+    const commitEasing = (0, react_1.useCallback)((easing, version) => {
+        const updates = getCurrentEasingUpdates();
+        const hasChange = updates.some((update) => !areEasingsEqual(update.currentEasing, easing));
+        if (previewServerState.type !== 'connected' ||
+            updates.length === 0 ||
+            !hasChange) {
+            clearPendingEasingDragOverrides(version);
+            return;
+        }
+        const promise = (0, update_selected_easing_1.updateSelectedTimelineEasings)({
+            selections: state.selections,
+            sequences: sequencesRef.current,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            propStatuses: propStatusesRef.current,
+            setPropStatuses,
+            clientId: previewServerState.clientId,
+            easing,
+        });
+        if (promise === null) {
+            clearPendingEasingDragOverrides(version);
+            return;
+        }
+        promise
+            .catch(() => undefined)
+            .finally(() => {
+            clearPendingEasingDragOverrides(version);
+        });
+    }, [
+        clearPendingEasingDragOverrides,
+        getCurrentEasingUpdates,
+        overrideIdToNodePathMappings,
+        previewServerState,
+        propStatusesRef,
+        sequencesRef,
+        setPropStatuses,
+        state.selections,
+    ]);
+    const setBezierAndPreview = (0, react_1.useCallback)((nextBezier) => {
+        const sanitized = sanitizeBezier(nextBezier);
+        bezierRef.current = sanitized;
+        setBezier(sanitized);
+        return applyLiveEasing(serializeBezier(sanitized));
+    }, [applyLiveEasing]);
+    const setSpringAndPreview = (0, react_1.useCallback)((nextSpring) => {
+        const sanitized = sanitizeSpring(nextSpring);
+        springRef.current = sanitized;
+        setSpring(sanitized);
+        return applyLiveEasing(serializeSpring(sanitized));
+    }, [applyLiveEasing]);
+    const setCoordinate = (0, react_1.useCallback)((handle, coordinate, value, commit) => {
+        const next = [...bezierRef.current];
+        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);
+        const version = setBezierAndPreview(next);
+        if (commit) {
+            commitEasing(serializeBezier(next), version);
+        }
+    }, [commitEasing, setBezierAndPreview]);
+    const setSpringNumber = (0, react_1.useCallback)((key, value, commit) => {
+        const next = {
+            ...springRef.current,
+            [key]: sanitizeSpringValue(value, key, DEFAULT_SPRING_EASING[key]),
+        };
+        const version = setSpringAndPreview(next);
+        if (commit) {
+            commitEasing(serializeSpring(next), version);
+        }
+    }, [commitEasing, setSpringAndPreview]);
+    const setOvershootClamping = (0, react_1.useCallback)(() => {
+        const next = {
+            ...springRef.current,
+            overshootClamping: !springRef.current.overshootClamping,
+        };
+        const version = setSpringAndPreview(next);
+        commitEasing(serializeSpring(next), version);
+    }, [commitEasing, setSpringAndPreview]);
+    const switchMode = (0, react_1.useCallback)((nextMode) => {
+        setMode(nextMode);
+        if (mode === nextMode || previewServerState.type !== 'connected') {
+            return;
+        }
+        const easing = nextMode === 'spring'
+            ? serializeSpring(springRef.current)
+            : serializeBezier(bezierRef.current);
+        const version = applyLiveEasing(easing);
+        commitEasing(easing, version);
+    }, [applyLiveEasing, commitEasing, mode, previewServerState.type]);
+    const applyPreset = (0, react_1.useCallback)((easing) => {
+        if (previewServerState.type !== 'connected') {
+            return;
+        }
+        if (isSpringEasing(easing)) {
+            const nextSpring = sanitizeSpring(easing);
+            setMode('spring');
+            const springVersion = setSpringAndPreview(nextSpring);
+            commitEasing(serializeSpring(nextSpring), springVersion);
+            return;
+        }
+        const nextBezier = easingToBezier(easing);
+        setMode('bezier');
+        const bezierVersion = setBezierAndPreview(nextBezier);
+        commitEasing(serializeBezier(nextBezier), bezierVersion);
+    }, [
+        commitEasing,
+        previewServerState.type,
+        setBezierAndPreview,
+        setSpringAndPreview,
+    ]);
     const getValueFromPointer = (0, react_1.useCallback)((event) => {
         const svg = svgRef.current;
         if (!svg) {
@@ -141,19 +596,17 @@ const EasingEditorModal = ({ state }) => {
         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]);
+        const next = [...bezierRef.current];
+        if (handle === 0) {
+            next[0] = value.x;
+            next[1] = value.y;
+        }
+        else {
+            next[2] = value.x;
+            next[3] = value.y;
+        }
+        setBezierAndPreview(next);
+    }, [getValueFromPointer, setBezierAndPreview]);
     (0, react_1.useEffect)(() => {
         if (activeHandle === null) {
             return;
@@ -162,6 +615,7 @@ const EasingEditorModal = ({ state }) => {
             updateHandleFromPointer(activeHandle, event);
         };
         const onPointerUp = () => {
+            commitEasing(serializeBezier(bezierRef.current), liveOverrideVersionRef.current);
             setActiveHandle(null);
         };
         window.addEventListener('pointermove', onPointerMove);
@@ -170,78 +624,97 @@ const EasingEditorModal = ({ state }) => {
             window.removeEventListener('pointermove', onPointerMove);
             window.removeEventListener('pointerup', onPointerUp);
         };
-    }, [activeHandle, updateHandleFromPointer]);
+    }, [activeHandle, commitEasing, updateHandleFromPointer]);
     const onHandlePointerDown = (0, react_1.useCallback)((handle, event) => {
+        if (previewServerState.type !== 'connected') {
+            return;
+        }
         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),
+    }, [previewServerState.type, updateHandleFromPointer]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            clearEasingDragOverrides(pendingOverrideTargetsRef.current);
+        };
+    }, [clearEasingDragOverrides]);
+    const startPoint = (0, react_1.useMemo)(() => ({ x: xToSvg(0), y: yToSvg(0) }), []);
+    const endPoint = (0, react_1.useMemo)(() => ({ x: xToSvg(1), y: yToSvg(1) }), []);
+    const firstHandle = (0, react_1.useMemo)(() => pointFromBezier(bezier, 0), [bezier]);
+    const secondHandle = (0, react_1.useMemo)(() => pointFromBezier(bezier, 1), [bezier]);
+    const bezierPath = (0, react_1.useMemo)(() => {
+        return `M ${startPoint.x} ${startPoint.y} C ${firstHandle.x} ${firstHandle.y}, ${secondHandle.x} ${secondHandle.y}, ${endPoint.x} ${endPoint.y}`;
+    }, [endPoint, firstHandle, secondHandle, startPoint]);
+    const springPath = (0, react_1.useMemo)(() => {
+        const easing = remotion_1.Easing.spring({
+            damping: spring.damping,
+            mass: spring.mass,
+            overshootClamping: spring.overshootClamping,
+            stiffness: spring.stiffness,
         });
-        if (promise === null) {
-            setSaving(false);
-            return;
+        const samples = 80;
+        const points = [];
+        for (let i = 0; i <= samples; i++) {
+            const t = i / samples;
+            const x = xToSvg(t);
+            const y = yToSvg(clamp(easing(t), Y_MIN, Y_MAX));
+            points.push(`${i === 0 ? 'M' : 'L'} ${x} ${y}`);
         }
-        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 }) })
-                                        ] })
+        return points.join(' ');
+    }, [spring]);
+    const disabled = previewServerState.type !== 'connected';
+    const graphLabels = getEasingGraphLabels(getCurrentEasingUpdates());
+    const currentEasing = (0, react_1.useMemo)(() => mode === 'spring' ? serializeSpring(spring) : serializeBezier(bezier), [bezier, mode, spring]);
+    const modeItems = (0, react_1.useMemo)(() => {
+        return [
+            {
+                key: 'bezier',
+                label: 'Bezier',
+                onClick: () => switchMode('bezier'),
+                selected: mode === 'bezier',
+            },
+            {
+                key: 'spring',
+                label: 'Spring',
+                onClick: () => switchMode('spring'),
+                selected: mode === 'spring',
+            },
+        ];
+    }, [mode, switchMode]);
+    const coordinatesGrid = (0, react_1.useMemo)(() => ({
+        ...coordinatesGridBase,
+        gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+        padding: '0 12px 12px',
+    }), []);
+    return (jsx_runtime_1.jsxs("div", { style: inlineContainer, children: [renderHeader ? (renderHeader(modeItems)) : (jsx_runtime_1.jsx("div", { style: segmentedControlWrapper, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false, size: "compact" }) })), jsx_runtime_1.jsx("div", { style: presetButtonsWrapper, children: EDITOR_EASING_PRESETS.map((preset) => (jsx_runtime_1.jsx(EasingPresetButton, { currentEasing: currentEasing, disabled: disabled, onClick: applyPreset, preset: preset }, preset.id))) }), mode === 'bezier' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { 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(EasingGraphScaffold, { labels: graphLabels }), 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: bezierPath, 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: disabled ? 'none' : '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: disabled ? 'none' : 'all', cursor: activeHandle === 1 ? 'grabbing' : 'default', onPointerDown: (event) => onHandlePointerDown(1, event) })
+                        ] }), 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, false), onValueChangeEnd: (value) => setCoordinate(0, 'x', value, true), onTextChange: () => undefined, min: 0, max: 1, step: 0.01, formatter: formatNumber, rightAlign: false, style: numberInputStyle, snapToStep: false, disabled: disabled }) })
+                                ] }), 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, false), onValueChangeEnd: (value) => setCoordinate(0, 'y', value, true), onTextChange: () => undefined, min: Y_MIN, max: Y_MAX, step: 0.01, formatter: formatNumber, rightAlign: false, style: numberInputStyle, snapToStep: false, disabled: disabled }) })
+                                ] }), 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, false), onValueChangeEnd: (value) => setCoordinate(1, 'x', value, true), onTextChange: () => undefined, min: 0, max: 1, step: 0.01, formatter: formatNumber, rightAlign: false, style: numberInputStyle, snapToStep: false, disabled: disabled }) })
+                                ] }), 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, false), onValueChangeEnd: (value) => setCoordinate(1, 'y', value, true), onTextChange: () => undefined, min: Y_MIN, max: Y_MAX, step: 0.01, formatter: formatNumber, rightAlign: false, style: numberInputStyle, snapToStep: false, disabled: disabled }) })
                                 ] })
-                        ] }), 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 })
-                ] })
-        ] }));
+                        ] })
+                ] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsxs("svg", { width: SVG_WIDTH, height: SVG_HEIGHT, viewBox: `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`, style: svgStyle, "aria-label": "Spring easing curve", children: [
+                            jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("path", { d: springPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: xToSvg(0), cy: yToSvg(0), r: 4, fill: "white" }), jsx_runtime_1.jsx("circle", { cx: xToSvg(1), cy: yToSvg(1), r: 4, fill: "white" })
+                        ] }), jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
+                            jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Damping" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: spring.damping, status: "ok", onValueChange: (value) => setSpringNumber('damping', value, false), onValueChangeEnd: (value) => setSpringNumber('damping', value, true), onTextChange: () => undefined, min: SPRING_LIMITS.damping.min, max: SPRING_LIMITS.damping.max, step: SPRING_LIMITS.damping.step, formatter: springFormatters.damping, rightAlign: false, style: numberInputStyle, snapToStep: false, dragDecimalPlaces: SPRING_DECIMAL_PLACES.damping, disabled: disabled }) })
+                                ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Mass" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: spring.mass, status: "ok", onValueChange: (value) => setSpringNumber('mass', value, false), onValueChangeEnd: (value) => setSpringNumber('mass', value, true), onTextChange: () => undefined, min: SPRING_LIMITS.mass.min, max: SPRING_LIMITS.mass.max, step: SPRING_LIMITS.mass.step, formatter: springFormatters.mass, rightAlign: false, style: numberInputStyle, snapToStep: false, dragDecimalPlaces: SPRING_DECIMAL_PLACES.mass, disabled: disabled }) })
+                                ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Stiffness" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: spring.stiffness, status: "ok", onValueChange: (value) => setSpringNumber('stiffness', value, false), onValueChangeEnd: (value) => setSpringNumber('stiffness', value, true), onTextChange: () => undefined, min: SPRING_LIMITS.stiffness.min, max: SPRING_LIMITS.stiffness.max, step: SPRING_LIMITS.stiffness.step, formatter: springFormatters.stiffness, rightAlign: false, style: numberInputStyle, snapToStep: false, dragDecimalPlaces: SPRING_DECIMAL_PLACES.stiffness, disabled: disabled }) })
+                                ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Clamp overshoot" }), jsx_runtime_1.jsx("div", { style: checkboxWrapper, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: spring.overshootClamping, onChange: setOvershootClamping, name: "spring-overshoot-clamping", disabled: disabled, variant: "small" }) })
+                                ] })
+                        ] })
+                ] }))] }));
 };
-exports.EasingEditorModal = EasingEditorModal;
+exports.EasingEditor = EasingEditor;