fix(clip): clip mode keeps its range, its focus and its keys through the player's own moves

- A mark on the very end seeks a moment short of it; while a clip is marked the end of the item
  neither closes the player nor steps the queue, and Plex's auto-skip waits.
- Plex: Escape and Back peel what is over the picture (info, up-next, the countdown) before the
  clip; Back under a dialog is the dialog's; no range opens while the length is unknown.
- YouTube: the focus goes back to the scissors the user can see, else the player; the panel keeps
  its name, Loop and focus when the view is maximised or restored under it.
- A typed time stays in its field until taken, then shows where it landed; unreadable stays marked
  invalid; a decimal comma is read (ui/TimecodeField, the editor's fields too).
- RangeTrack: a drag is its pointer's, a cancelled drag reports final, an adornment sits beside the
  slider, a caller-chosen focus ring (amber on the clip strip). CropFrame: a drag is its pointer's.
- The editor's remove-cut is a real button at the cut's foot; a segment's keep toggle sits over the
  cut's hit area.

frontend/src/components/ui/CropFrame.dom.test.tsx

@@ -107,6 +107,19 @@ describe("CropFrame", () => {
     expect(rect()).toBe("0.300 0.300 0.400 0.400");
   });
 
+  it("follows the pointer that took it, not a second finger landing on it", () => {
+    render(<Harness />);
+    const frame = screen.getByRole("group", { name: "common.cropFrame.frame" });
+    fireEvent.pointerDown(frame, { button: 0, clientX: 500, clientY: 300, pointerId: 1 });
+    // A second finger lands 200 px away and stays: it must not become the drag's origin.
+    fireEvent.pointerDown(frame, { button: 0, clientX: 700, clientY: 300, pointerId: 2 });
+    fireEvent.pointerMove(frame, { clientX: 660, clientY: 390, pointerId: 1 });
+    expect(rect()).toBe("0.300 0.300 0.400 0.400");
+    fireEvent.pointerMove(frame, { clientX: 900, clientY: 300, pointerId: 2 });
+    expect(rect()).toBe("0.300 0.300 0.400 0.400");
+    fireEvent.pointerUp(frame, { clientX: 660, clientY: 390, pointerId: 1 });
+  });
+
   it("takes the focus on a press, so the arrows go on from where the pointer left it", () => {
     render(<Harness />);
     const frame = screen.getByRole("group", { name: "common.cropFrame.frame" });
@@ -116,6 +129,7 @@ describe("CropFrame", () => {
     const se = screen.getByRole("group", { name: "common.cropFrame.se" });
     fireEvent.pointerDown(se, { button: 0, clientX: 960, clientY: 540 });
     expect(document.activeElement).toBe(se);
+    fireEvent.pointerUp(se, { clientX: 960, clientY: 540 });
     // An edge is the pointer's only: its press puts the focus on the frame it belongs to.
     fireEvent.pointerDown(document.querySelector<HTMLElement>(".cursor-ew-resize")!, {
       button: 0,