Show the lens mask whether or not a preview image is selected (#259)

A preset carries a lens mask, but the radius/x/y fields were rendered
only in the branch that draws the preview, so applying a preset with no
image clicked left nothing on screen describing the mask. It read as
absent while the run was still going to crop to it.

The fields now render in both branches, with a line saying the values
apply as they are and that selecting an image lets you place the mask on
it. The e2e suite had already worked around the old behaviour by
clicking a preview image purely so the fields would exist in the DOM.

Applying a preset also never moved the drawn circle.
useMotionValueFormState syncs the motion values into the form and never
back out of it, so setValue("lensMask", ...) updated the fields while
the circle stayed where it was, and the next drag wrote the stale centre
back over the preset's. PresetBar now hands the mask to the page, which
sets the three motion values.

The size a preset's mask was drawn against travels with it, so the
mismatch warning no longer depends on an image having been selected at
the moment the preset was applied. It is rendered beside the mask for as
long as it holds, and dropped as soon as the user moves the circle,
since at that point they have placed it against what they can see.

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: adulbrich

__tests__/lens-mask-without-image.test.tsx

@@ -0,0 +1,113 @@
+import { describe, expect, it } from "@jest/globals";
+import { act, render, screen } from "@testing-library/react";
+import { motionValue } from "framer-motion";
+import { useForm } from "react-hook-form";
+
+// jest.mock must be hoisted above the imports below, which the SWC transform
+// only does for the global binding, not one imported from @jest/globals.
+declare const jest: typeof import("@jest/globals").jest;
+
+// The hook returns nothing when there is no path, which is the state under
+// test: no preview image has been clicked.
+jest.mock("@/lib/generic-image-metadata", () => ({
+  useGenericImageMetadata: (path?: string) =>
+    path ? Promise.resolve({ size: [5616, 3744] }) : undefined,
+}));
+
+import { TooltipProvider } from "@/components/ui/tooltip";
+import type { pipelineConfig } from "../src/app/pipeline/(pipeline-configuration)/config-provider";
+import { LensMaskInput } from "../src/app/pipeline/lens-mask-input";
+
+/** The mask a preset applies, in image pixels. */
+const PRESET_MASK = { radius: 1800, x: 2808, y: 1935 };
+
+/** The image the mocked metadata hook describes. */
+const PREVIEW_SIZE: [number, number] = [5616, 3744];
+
+const DRAWN_AGAINST = /Drawn against a 5796×3870 image/;
+const MISMATCH =
+  /drawn against a 5796×3870 image and the selected one is 5616×3744/;
+const ANY_ORIGIN = /drawn against/;
+
+function Harness({
+  maskPreviewImage,
+  maskSourceSize,
+}: {
+  maskPreviewImage?: string;
+  maskSourceSize?: [number, number] | null;
+}) {
+  const form = useForm<pipelineConfig>({
+    defaultValues: { lensMask: PRESET_MASK },
+  });
+
+  return (
+    <TooltipProvider>
+      <LensMaskInput
+        centerX={motionValue(PRESET_MASK.x)}
+        centerY={motionValue(PRESET_MASK.y)}
+        maskPreviewImage={maskPreviewImage}
+        maskSourceSize={maskSourceSize}
+        radius={motionValue(PRESET_MASK.radius)}
+        register={form.register}
+      />
+    </TooltipProvider>
+  );
+}
+
+async function renderMask(props: Parameters<typeof Harness>[0] = {}) {
+  await act(() => {
+    render(<Harness {...props} />);
+    return Promise.resolve();
+  });
+}
+
+describe("LensMaskInput with no preview image selected", () => {
+  it("still shows the mask, so a preset's values do not read as absent", async () => {
+    await renderMask();
+
+    expect(screen.getByText("No image selected")).toBeInTheDocument();
+
+    const radius = screen.getByPlaceholderText("Radius") as HTMLInputElement;
+    const x = screen.getByPlaceholderText("X") as HTMLInputElement;
+    const y = screen.getByPlaceholderText("Y") as HTMLInputElement;
+
+    expect(radius.value).toBe(String(PRESET_MASK.radius));
+    expect(x.value).toBe(String(PRESET_MASK.x));
+    expect(y.value).toBe(String(PRESET_MASK.y));
+  });
+
+  it("names the image size a preset's mask was drawn against", async () => {
+    await renderMask({ maskSourceSize: [5796, 3870] });
+
+    expect(screen.getByText(DRAWN_AGAINST)).toBeInTheDocument();
+  });
+});
+
+describe("LensMaskInput with a preview image selected", () => {
+  it("warns for as long as the mask does not fit the image", async () => {
+    await renderMask({
+      maskPreviewImage: "/fake/image.jpg",
+      maskSourceSize: [5796, 3870],
+    });
+
+    // The toast raised when the preset was applied cannot cover this: the
+    // image may well have been selected after the preset, and it is gone by
+    // the time the mask is looked at either way.
+    expect(screen.getByText(MISMATCH)).toBeInTheDocument();
+  });
+
+  it("stays quiet when the mask was drawn against this same size", async () => {
+    await renderMask({
+      maskPreviewImage: "/fake/image.jpg",
+      maskSourceSize: PREVIEW_SIZE,
+    });
+
+    expect(screen.queryByText(ANY_ORIGIN)).not.toBeInTheDocument();
+  });
+
+  it("stays quiet when the mask has no recorded origin", async () => {
+    await renderMask({ maskPreviewImage: "/fake/image.jpg" });
+
+    expect(screen.queryByText(ANY_ORIGIN)).not.toBeInTheDocument();
+  });
+});

__tests__/preset-applies-lens-mask.test.tsx

@@ -0,0 +1,101 @@
+import { describe, expect, it } from "@jest/globals";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { useForm } from "react-hook-form";
+
+// jest.mock must be hoisted above the imports below, which the SWC transform
+// only does for the global binding, not one imported from @jest/globals.
+declare const jest: typeof import("@jest/globals").jest;
+
+const PRESET_MASK = { radius: 1800, x: 2808, y: 1935 };
+
+jest.mock("@/lib/presets", () => ({
+  changedSources: () => Promise.resolve([]),
+  deletePreset: () => Promise.resolve(),
+  presetFilePath: () => null,
+  presetId: (name: string) => name,
+  readPresets: () =>
+    Promise.resolve([
+      {
+        files: {},
+        fisheyeView: {
+          horizontalViewDegrees: 180,
+          projection: "vta",
+          verticalViewDegrees: 180,
+        },
+        id: "sigma-8mm",
+        lensMask: PRESET_MASK,
+        lensMaskImageSize: [5616, 3744],
+        name: "Sigma 8mm",
+        outputSettings: { filterIrrelevantSrcImages: false, targetRes: 1000 },
+      },
+    ]),
+  renamePreset: () => Promise.resolve(),
+  savePreset: () => Promise.resolve(),
+}));
+
+jest.mock("@/lib/generic-image-metadata", () => ({
+  useGenericImageMetadata: () => undefined,
+}));
+
+import type { pipelineConfig } from "../src/app/pipeline/(pipeline-configuration)/config-provider";
+import { PresetBar } from "../src/app/pipeline/preset-bar";
+
+// Radix Select drives its trigger with pointer capture and scrolls the active
+// item into view; jsdom implements neither.
+function stubPointerApis() {
+  Element.prototype.hasPointerCapture ||= () => false;
+  Element.prototype.setPointerCapture ||= () => undefined;
+  Element.prototype.releasePointerCapture ||= () => undefined;
+  Element.prototype.scrollIntoView ||= () => undefined;
+}
+
+function Harness({
+  onApplyLensMask,
+}: {
+  onApplyLensMask: (
+    mask: pipelineConfig["lensMask"],
+    drawnAgainst: [number, number] | null
+  ) => void;
+}) {
+  const form = useForm<pipelineConfig>({
+    defaultValues: { lensMask: { radius: 0, x: 0, y: 0 } },
+  });
+
+  return (
+    <PresetBar
+      form={form}
+      maskImagePath={undefined}
+      onApplyLensMask={onApplyLensMask}
+    />
+  );
+}
+
+describe("applying a preset", () => {
+  it("hands the lens mask and its origin to the caller", async () => {
+    stubPointerApis();
+    const applied: {
+      drawnAgainst: [number, number] | null;
+      mask: pipelineConfig["lensMask"];
+    }[] = [];
+
+    render(
+      <Harness
+        onApplyLensMask={(mask, drawnAgainst) => {
+          applied.push({ drawnAgainst, mask });
+        }}
+      />
+    );
+
+    // The listbox opens on a key rather than a click: Radix opens it from
+    // pointerdown, which jsdom has no pointer events to deliver.
+    fireEvent.keyDown(screen.getByRole("combobox"), { key: " " });
+    const item = await screen.findByText("Sigma 8mm");
+    fireEvent.click(item);
+
+    await waitFor(() =>
+      expect(applied).toEqual([
+        { drawnAgainst: [5616, 3744], mask: PRESET_MASK },
+      ])
+    );
+  });
+});