@hyperframes/studio 0.7.72 → 0.7.74

package/src/components/editor/propertyPanelFlatColorGradingSection.tsx

@@ -1,13 +1,13 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import {
   HF_COLOR_GRADING_GRADE_PRESETS,
-  isHfColorGradingActive,
   normalizeHfColorGrading,
+  serializeHfColorGrading,
   type HfColorGradingAdjustKey,
   type HfColorGradingDetailKey,
   type NormalizedHfColorGrading,
 } from "@hyperframes/core/color-grading";
-import { Compare, Plus, RotateCcw, Settings } from "../../icons/SystemIcons";
+import { Plus, Settings } from "../../icons/SystemIcons";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 import { LUT_EXT } from "../../utils/mediaTypes";
 import { FLAT_PREVIEW_GRID, FlatSlider } from "./propertyPanelFlatPrimitives";
@@ -18,138 +18,23 @@ import type {
   MediaMetadata,
 } from "./useColorGradingController";
 import { presetPreviewHandlers } from "./propertyPanelPresetPreview";
+import { ColorCurves } from "./propertyPanelColorCurves";
+import {
+  COLOR_GRADING_ADJUST_SLIDERS,
+  COLOR_GRADING_DETAIL_SLIDERS,
+  colorGradingWithAdjust,
+  colorGradingWithDetail,
+  createColorGradingActions,
+  GRAIN_TUNE_SLIDERS,
+  normalizedColorGradingDefault,
+  VIGNETTE_TUNE_SLIDERS,
+  visibleColorGradingIntensity,
+} from "./propertyPanelColorGradingControls";
+import { PropertyPanelColorScopes } from "./propertyPanelColorScopes";
+import { PropertyPanelColorSecondary } from "./propertyPanelColorSecondary";
+import { ColorWheels } from "./propertyPanelColorWheels";
 
-const STATUS_DOT_CLASS: Record<ColorGradingControllerState["runtimeStatus"]["state"], string> = {
-  active: "bg-emerald-400",
-  pending: "bg-amber-300",
-  unavailable: "bg-red-400",
-  missing: "bg-panel-text-5",
-  inactive: "bg-panel-text-5",
-};
-
-export function FlatColorGradingAccessory({
-  state,
-}: {
-  state: Pick<
-    ColorGradingControllerState,
-    "grading" | "compareEnabled" | "runtimeStatus" | "commitCompare" | "resetGrading"
-  >;
-}) {
-  const track = useTrackDesignInput();
-  const { grading, compareEnabled, runtimeStatus, commitCompare, resetGrading } = state;
-  const gradingActive = isHfColorGradingActive(grading);
-  // Tracks the active hold's cleanup so it can be torn down on unmount too —
-  // without this, switching selection away mid-hold (unmounting this
-  // accessory) leaves the pointerup/pointercancel/blur listeners registered
-  // on `window` forever, each holding a closure over the old commitCompare.
-  const releaseRef = useRef<(() => void) | null>(null);
-  useEffect(
-    () => () => {
-      releaseRef.current?.();
-      releaseRef.current = null;
-    },
-    [],
-  );
-
-  return (
-    <span className="flex items-center gap-2.5">
-      <button
-        type="button"
-        aria-pressed={compareEnabled}
-        aria-label="Hold to show original"
-        disabled={!gradingActive}
-        onPointerDown={(e) => {
-          if (!gradingActive) return;
-          e.preventDefault();
-          e.stopPropagation();
-          track("button", "Compare original");
-          commitCompare(true);
-          const release = () => {
-            commitCompare(false);
-            window.removeEventListener("pointerup", release);
-            window.removeEventListener("pointercancel", release);
-            window.removeEventListener("blur", release);
-            releaseRef.current = null;
-          };
-          releaseRef.current = release;
-          window.addEventListener("pointerup", release);
-          window.addEventListener("pointercancel", release);
-          window.addEventListener("blur", release);
-        }}
-        onBlur={() => {
-          if (compareEnabled) commitCompare(false);
-        }}
-        onKeyDown={(e) => {
-          if (!gradingActive || (e.key !== " " && e.key !== "Enter")) return;
-          e.preventDefault();
-          if (!compareEnabled) {
-            track("button", "Compare original");
-            commitCompare(true);
-          }
-        }}
-        onKeyUp={(e) => {
-          if (!gradingActive || (e.key !== " " && e.key !== "Enter")) return;
-          e.preventDefault();
-          commitCompare(false);
-        }}
-        title="Hold to show original"
-        className="flex-shrink-0 text-panel-text-3 hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40"
-      >
-        <Compare size={12} />
-      </button>
-      <span className="flex min-w-0 items-center gap-1" title={runtimeStatus.message}>
-        <span
-          data-flat-grade-status-dot="true"
-          title={runtimeStatus.message}
-          className={`h-[5px] w-[5px] flex-shrink-0 rounded-full ${STATUS_DOT_CLASS[runtimeStatus.state]}`}
-        />
-        <span
-          data-flat-grade-status-message="true"
-          className="max-w-[84px] truncate text-[9px] text-panel-text-4"
-        >
-          {runtimeStatus.message}
-        </span>
-      </span>
-      <button
-        type="button"
-        data-flat-grade-reset="true"
-        title="Reset color grading"
-        onClick={(e) => {
-          e.stopPropagation();
-          track("button", "Reset color grading");
-          resetGrading();
-        }}
-        className="flex-shrink-0 text-panel-text-3 hover:text-panel-text-1"
-      >
-        <RotateCcw size={12} />
-      </button>
-    </span>
-  );
-}
-
-const ADJUST_SLIDERS: Array<{
-  key: HfColorGradingAdjustKey;
-  label: string;
-  min: number;
-  max: number;
-  step: number;
-}> = [
-  { key: "exposure", label: "Exposure", min: -200, max: 200, step: 5 },
-  { key: "contrast", label: "Contrast", min: -100, max: 100, step: 1 },
-  { key: "highlights", label: "Highlights", min: -100, max: 100, step: 1 },
-  { key: "shadows", label: "Shadows", min: -100, max: 100, step: 1 },
-  { key: "whites", label: "White Point", min: -100, max: 100, step: 1 },
-  { key: "blacks", label: "Black Point", min: -100, max: 100, step: 1 },
-  { key: "temperature", label: "Warmth", min: -100, max: 100, step: 1 },
-  { key: "tint", label: "Tint", min: -100, max: 100, step: 1 },
-  { key: "vibrance", label: "Vibrance", min: -100, max: 100, step: 1 },
-  { key: "saturation", label: "Saturation", min: -100, max: 100, step: 1 },
-];
-
-function visibleIntensity(grading: NormalizedHfColorGrading): number {
-  // Earlier drafts could persist 0% strength; the next manual edit should revive visible grading.
-  return grading.intensity === 0 ? 1 : grading.intensity;
-}
+export { FlatColorGradingAccessory } from "./propertyPanelFlatColorGradingAccessory";
 
 function formatAdjustValue(key: HfColorGradingAdjustKey, rawPercent: number): string {
   if (key === "exposure") {
@@ -159,30 +44,17 @@ function formatAdjustValue(key: HfColorGradingAdjustKey, rawPercent: number): st
   return `${Math.round(rawPercent)}%`;
 }
 
-const DETAIL_SLIDERS: Array<{
-  key: HfColorGradingDetailKey;
-  label: string;
-  defaultValue: number;
-}> = [
-  { key: "vignette", label: "Vignette", defaultValue: 0 },
-  { key: "vignetteMidpoint", label: "Midpoint", defaultValue: 0.5 },
-  { key: "vignetteRoundness", label: "Roundness", defaultValue: 0 },
-  { key: "vignetteFeather", label: "Feather", defaultValue: 0.65 },
-  { key: "grain", label: "Grain", defaultValue: 0 },
-  { key: "grainSize", label: "Grain Size", defaultValue: 0.25 },
-  { key: "grainRoughness", label: "Roughness", defaultValue: 0.5 },
-];
 const detailByKey = (key: HfColorGradingDetailKey) => {
-  const spec = DETAIL_SLIDERS.find((d) => d.key === key);
+  const spec = COLOR_GRADING_DETAIL_SLIDERS.find((candidate) => candidate.key === key);
   if (!spec) throw new Error(`Unknown color grading detail key: ${key}`);
   return spec;
 };
-const VIGNETTE_TUNE_KEYS: HfColorGradingDetailKey[] = [
-  "vignetteMidpoint",
-  "vignetteRoundness",
-  "vignetteFeather",
-];
-const GRAIN_TUNE_KEYS: HfColorGradingDetailKey[] = ["grainSize", "grainRoughness"];
+
+function resolveColorGrading(grading: Parameters<typeof normalizeHfColorGrading>[0]) {
+  const resolved = normalizeHfColorGrading(grading);
+  if (!resolved) throw new Error("Missing resolved color grading");
+  return resolved;
+}
 
 function HdrBanner({ metadata }: { metadata: MediaMetadata | null }) {
   if (metadata?.color.dynamicRange !== "hdr") return null;
@@ -237,6 +109,7 @@ export function FlatColorGradingSection({
   mediaMetadata,
   presetPreviews,
   onRequestPresetPreviews,
+  captureGradedFrame,
 }: {
   grading: NormalizedHfColorGrading;
   assets: string[];
@@ -254,6 +127,7 @@ export function FlatColorGradingSection({
   mediaMetadata: MediaMetadata | null;
   presetPreviews: ColorGradingPresetPreviews;
   onRequestPresetPreviews: () => void;
+  captureGradedFrame: ColorGradingControllerState["captureGradedFrame"];
 }) {
   const track = useTrackDesignInput();
   const lutInputRef = useRef<HTMLInputElement>(null);
@@ -265,70 +139,65 @@ export function FlatColorGradingSection({
   );
   const lut = grading.lut;
   const selectedLutName = lut?.src ? (lut.src.split("/").pop() ?? lut.src) : null;
+  const resolvedGrading = useMemo(() => resolveColorGrading(grading), [grading]);
+  const secondaryInputGrading = useMemo(
+    () =>
+      resolveColorGrading({
+        intensity: 1,
+        adjust: resolvedGrading.adjust,
+        wheels: resolvedGrading.wheels,
+        curves: resolvedGrading.curves,
+        hueCurves: resolvedGrading.hueCurves,
+        colorSpace: resolvedGrading.colorSpace,
+      }),
+    [
+      resolvedGrading.adjust,
+      resolvedGrading.colorSpace,
+      resolvedGrading.curves,
+      resolvedGrading.hueCurves,
+      resolvedGrading.wheels,
+    ],
+  );
+  const actions = createColorGradingActions(grading, onCommitColorGrading);
+  const scopesRefreshKey = useMemo(() => serializeHfColorGrading(grading), [grading]);
 
   useEffect(() => {
-    if (
-      presetPreviews.status !== "loading" &&
-      HF_COLOR_GRADING_GRADE_PRESETS.some((preset) => !presetPreviews.images[preset.id])
-    ) {
-      onRequestPresetPreviews();
-    }
-  }, [onRequestPresetPreviews, presetPreviews.images, presetPreviews.status]);
+    if (presetPreviews.status === "idle") onRequestPresetPreviews();
+  }, [onRequestPresetPreviews, presetPreviews.status]);
 
   const resolvePreset = (presetId: string) => {
     const resolved = normalizeHfColorGrading({ preset: presetId, lut: grading.lut });
-    return resolved ? { ...resolved, effects: grading.effects, palette: grading.palette } : grading;
+    return resolved
+      ? {
+          ...resolved,
+          effects: grading.effects,
+          palette: grading.palette,
+        }
+      : grading;
   };
 
   useEffect(() => () => onPreviewColorGrading(null), [onPreviewColorGrading]);
-  const updateIntensity = (value: number) => {
-    onCommitColorGrading({ ...grading, intensity: value / 100 });
-  };
-  const applyLut = (src: string | null, intensity = 1) => {
-    onCommitColorGrading({
-      ...grading,
-      intensity: visibleIntensity(grading),
-      lut: src ? { src, intensity } : null,
-    });
-  };
-  const importLuts = async (files: FileList | null) => {
-    if (!files?.length || !onImportAssets) return;
-    const uploaded = await onImportAssets(files, "assets/luts");
-    const firstLut = uploaded.find((asset) => LUT_EXT.test(asset));
-    if (firstLut) {
-      track("button", "Import LUT");
-      applyLut(firstLut, 1);
-    }
-  };
 
   const renderDetailSlider = (key: HfColorGradingDetailKey) => {
     const spec = detailByKey(key);
     const value = grading.details[key];
-    const isSet = Math.abs(value - spec.defaultValue) > 1e-4;
+    const defaultValue = normalizedColorGradingDefault(spec);
+    const isSet = Math.abs(value - defaultValue) > 1e-4;
     return (
       <FlatSlider
         key={key}
         label={spec.label}
-        value={Math.round(value * 100)}
-        min={key === "vignetteRoundness" ? -100 : 0}
-        max={100}
+        value={Math.round(value * spec.scale)}
+        min={spec.min}
+        max={spec.max}
+        step={spec.step}
         tier={isSet ? "explicitCustom" : "default"}
-        displayValue={`${Math.round(value * 100)}%`}
+        displayValue={`${Math.round(value * spec.scale)}${spec.suffix}`}
         centerTick={key === "vignetteRoundness"}
         onCommit={(next) =>
-          onCommitColorGrading({
-            ...grading,
-            intensity: visibleIntensity(grading),
-            details: { ...grading.details, [key]: next / 100 },
-          })
-        }
-        onReset={() =>
-          onCommitColorGrading({
-            ...grading,
-            intensity: visibleIntensity(grading),
-            details: { ...grading.details, [key]: spec.defaultValue },
-          })
+          onCommitColorGrading(colorGradingWithDetail(grading, key, next / spec.scale))
         }
+        onReset={() => onCommitColorGrading(colorGradingWithDetail(grading, key, defaultValue))}
       />
     );
   };
@@ -336,7 +205,20 @@ export function FlatColorGradingSection({
   return (
     <div className="space-y-1.5">
       <HdrBanner metadata={mediaMetadata} />
+      <PropertyPanelColorScopes
+        captureFrame={() => captureGradedFrame()}
+        refreshKey={scopesRefreshKey}
+      />
       <div data-flat-grade-presets="true" className="space-y-1.5">
+        {presetPreviews.status === "unavailable" && (
+          <button
+            type="button"
+            onClick={onRequestPresetPreviews}
+            className="text-[10px] font-medium text-panel-accent hover:text-panel-accent/80"
+          >
+            Retry look previews
+          </button>
+        )}
         <div data-flat-grade-preset-group="presets" className={FLAT_PREVIEW_GRID}>
           {HF_COLOR_GRADING_GRADE_PRESETS.map((preset) => {
             const label = preset.label;
@@ -395,10 +277,105 @@ export function FlatColorGradingSection({
         max={100}
         tier={grading.intensity === 1 ? "default" : "explicitCustom"}
         displayValue={`${Math.round(grading.intensity * 100)}%`}
-        onCommit={updateIntensity}
-        onReset={() => updateIntensity(100)}
+        onCommit={actions.setIntensityPercent}
+        onReset={() => actions.setIntensityPercent(100)}
       />
 
+      <div className="space-y-0.5 border-t border-panel-hairline pt-1.5">
+        <div className="mb-1 text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
+          Primary
+        </div>
+        {COLOR_GRADING_ADJUST_SLIDERS.map((slider) => {
+          const rawPercent = grading.adjust[slider.key] * slider.scale;
+          const isSet = Math.abs(grading.adjust[slider.key]) > 1e-6;
+          return (
+            <div key={slider.key} data-flat-grade-adjust="true">
+              <FlatSlider
+                label={slider.label}
+                value={rawPercent}
+                min={slider.min}
+                max={slider.max}
+                step={slider.step}
+                tier={isSet ? "explicitCustom" : "default"}
+                displayValue={formatAdjustValue(slider.key, rawPercent)}
+                centerTick
+                onCommit={(next) =>
+                  onCommitColorGrading(
+                    colorGradingWithAdjust(grading, slider.key, next / slider.scale),
+                  )
+                }
+                onReset={() => onCommitColorGrading(colorGradingWithAdjust(grading, slider.key, 0))}
+              />
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="space-y-1.5 border-t border-panel-hairline pt-1.5">
+        <div className="mb-1 text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
+          Color wheels
+        </div>
+        <ColorWheels
+          value={resolvedGrading.wheels}
+          onPreview={(wheels) =>
+            onPreviewColorGrading({
+              ...grading,
+              intensity: visibleColorGradingIntensity(grading),
+              wheels,
+            })
+          }
+          onCommit={(wheels) =>
+            onCommitColorGrading({
+              ...grading,
+              intensity: visibleColorGradingIntensity(grading),
+              wheels,
+            })
+          }
+        />
+      </div>
+
+      <div className="space-y-1.5 border-t border-panel-hairline pt-1.5">
+        <div className="mb-1 text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
+          Curves
+        </div>
+        <ColorCurves
+          value={{ curves: resolvedGrading.curves, hueCurves: resolvedGrading.hueCurves }}
+          onPreview={({ curves, hueCurves }) =>
+            onPreviewColorGrading({
+              ...grading,
+              intensity: visibleColorGradingIntensity(grading),
+              curves,
+              hueCurves,
+            })
+          }
+          onCommit={({ curves, hueCurves }) =>
+            onCommitColorGrading({
+              ...grading,
+              intensity: visibleColorGradingIntensity(grading),
+              curves,
+              hueCurves,
+            })
+          }
+        />
+      </div>
+
+      <div className="space-y-1.5 border-t border-panel-hairline pt-1.5">
+        <div className="mb-1 text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
+          Secondary color
+        </div>
+        <PropertyPanelColorSecondary
+          secondaries={resolvedGrading.secondaries}
+          captureFrame={() => captureGradedFrame({ grading: secondaryInputGrading })}
+          onCommit={(secondaries) =>
+            onCommitColorGrading({
+              ...grading,
+              intensity: visibleColorGradingIntensity(grading),
+              secondaries,
+            })
+          }
+        />
+      </div>
+
       <div className="border-t border-panel-hairline pt-1.5">
         <button
           type="button"
@@ -430,7 +407,7 @@ export function FlatColorGradingSection({
                 onChange={(e) => {
                   const src = e.target.value;
                   track("select", "Custom LUT");
-                  applyLut(src || null, src && lut?.src === src ? lut.intensity : 1);
+                  actions.applyLut(src || null, src && lut?.src === src ? lut.intensity : 1);
                 }}
                 className="border-b border-panel-border-input/50 bg-transparent font-mono text-[10px] text-panel-text-3 outline-none hover:border-panel-border-input"
               >
@@ -456,7 +433,9 @@ export function FlatColorGradingSection({
                 accept=".cube"
                 className="hidden"
                 onChange={(e) => {
-                  void importLuts(e.currentTarget.files);
+                  void actions.importLut(e.currentTarget.files, onImportAssets, () =>
+                    track("button", "Import LUT"),
+                  );
                   e.currentTarget.value = "";
                 }}
               />
@@ -469,52 +448,14 @@ export function FlatColorGradingSection({
                 max={100}
                 tier={lut.intensity === 1 ? "default" : "explicitCustom"}
                 displayValue={`${Math.round((lut.intensity ?? 1) * 100)}%`}
-                onCommit={(v) => applyLut(lut.src, v / 100)}
-                onReset={() => applyLut(lut.src, 1)}
+                onCommit={(v) => actions.applyLut(lut.src, v / 100)}
+                onReset={() => actions.applyLut(lut.src, 1)}
               />
             )}
           </div>
         )}
       </div>
 
-      <div className="space-y-0.5 border-t border-panel-hairline pt-1.5">
-        <div className="mb-1 text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
-          Adjust
-        </div>
-        {ADJUST_SLIDERS.map((slider) => {
-          const rawPercent = grading.adjust[slider.key] * 100;
-          const isSet = Math.abs(grading.adjust[slider.key]) > 1e-6;
-          return (
-            <div key={slider.key} data-flat-grade-adjust="true">
-              <FlatSlider
-                label={slider.label}
-                value={rawPercent}
-                min={slider.min}
-                max={slider.max}
-                step={slider.step}
-                tier={isSet ? "explicitCustom" : "default"}
-                displayValue={formatAdjustValue(slider.key, rawPercent)}
-                centerTick
-                onCommit={(next) =>
-                  onCommitColorGrading({
-                    ...grading,
-                    intensity: visibleIntensity(grading),
-                    adjust: { ...grading.adjust, [slider.key]: next / 100 },
-                  })
-                }
-                onReset={() =>
-                  onCommitColorGrading({
-                    ...grading,
-                    intensity: visibleIntensity(grading),
-                    adjust: { ...grading.adjust, [slider.key]: 0 },
-                  })
-                }
-              />
-            </div>
-          );
-        })}
-      </div>
-
       <div className="space-y-1.5 border-t border-panel-hairline pt-1.5">
         <div className="mb-1 text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
           Finish
@@ -545,8 +486,8 @@ export function FlatColorGradingSection({
         </div>
         {detailSettingsOpen && (
           <div className="space-y-0.5 border-l-2 border-panel-border-input pl-2.5">
-            {(detailSettingsOpen === "vignette" ? VIGNETTE_TUNE_KEYS : GRAIN_TUNE_KEYS).map(
-              renderDetailSlider,
+            {(detailSettingsOpen === "vignette" ? VIGNETTE_TUNE_SLIDERS : GRAIN_TUNE_SLIDERS).map(
+              (slider) => renderDetailSlider(slider.key),
             )}
           </div>
         )}

package/src/components/editor/propertyPanelGradingNumberField.test.tsx

@@ -0,0 +1,79 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { GradingNumberField } from "./propertyPanelGradingNumberField";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function changeInput(input: HTMLInputElement, value: string) {
+  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+  if (!setter) throw new Error("Expected the native input setter");
+  setter.call(input, value);
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+function renderField() {
+  const callbacks = {
+    onBegin: vi.fn(),
+    onPreview: vi.fn(),
+    onSettle: vi.fn(),
+    onCancel: vi.fn(),
+  };
+  const host = document.body.appendChild(document.createElement("div"));
+  const root = createRoot(host);
+  act(() =>
+    root.render(
+      <GradingNumberField label="Level" value={10} min={-100} max={100} {...callbacks} />,
+    ),
+  );
+  const input = host.querySelector("input");
+  if (!input) throw new Error("Expected a grading field");
+  return { root, input, callbacks };
+}
+
+describe("GradingNumberField", () => {
+  it("does not begin or settle an untouched focus and blur", () => {
+    const { root, input, callbacks } = renderField();
+    act(() => input.focus());
+    act(() => input.blur());
+
+    expect(callbacks.onBegin).not.toHaveBeenCalled();
+    expect(callbacks.onPreview).not.toHaveBeenCalled();
+    expect(callbacks.onSettle).not.toHaveBeenCalled();
+    expect(callbacks.onCancel).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+
+  it("cancels a real edit that returns to its baseline", () => {
+    const { root, input, callbacks } = renderField();
+    act(() => input.focus());
+    act(() => changeInput(input, "25"));
+    act(() => changeInput(input, "10"));
+    act(() => input.blur());
+
+    expect(callbacks.onBegin).toHaveBeenCalledOnce();
+    expect(callbacks.onSettle).not.toHaveBeenCalled();
+    expect(callbacks.onCancel).toHaveBeenCalledOnce();
+    act(() => root.unmount());
+  });
+
+  it("previews valid text and settles once on Enter", () => {
+    const { root, input, callbacks } = renderField();
+    act(() => input.focus());
+    act(() => changeInput(input, "-25"));
+    act(() => {
+      input.dispatchEvent(new KeyboardEvent("keydown", { bubbles: true, key: "Enter" }));
+    });
+
+    expect(callbacks.onBegin).toHaveBeenCalledOnce();
+    expect(callbacks.onPreview).toHaveBeenLastCalledWith(-25);
+    expect(callbacks.onSettle).toHaveBeenCalledOnce();
+    act(() => root.unmount());
+  });
+});