Freeze panel drift on pointer PROXIMITY, not on arrival

Third and correct cut at this. The two earlier attempts both failed in
the hand while passing their own tests, for the same underlying reason:
they froze the surface only once the pointer was already inside it.

The surface keeps drifting throughout the approach. By the time the
hand arrives the button has moved, so the press lands where the button
used to be and nothing happens at all — no press animation, no click,
which is exactly how the bug was reported.

Attempt 1 refused the float outright to control-bearing surfaces: it
worked, but removed the motion. Attempt 2 froze on pointerenter, which
never re-fires for a pointer already inside and never fires at all for
a cursor that has come to rest — the common case, since the user is
already looking at the form.

Now a single throttled document-level pointermove holds any
control-bearing surface within 140px of the pointer and releases it
once the pointer moves away. Proximity makes the surface still BEFORE
the hand arrives, and being document-level removes every attach-
ordering trap: it no longer matters when a surface was registered,
only where the pointer is on the next move.

Measured, 3 consecutive runs: Save Configuration and Run API Check both
land on the first click, residual slip between aim and press down from
7-10px to ~1.8px, and the ambient float still runs whenever the pointer
is elsewhere. Presentation-only surfaces are untouched and drift even
under the cursor.

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

app/ui/motion_runtime.py

@@ -148,6 +148,15 @@ _DRIVER = r"""
     // Keeps the drift, but holds it still while the pointer is inside a
     // surface the user can click into. See steadyForPointer below.
     steadyForPointer(el);
+    // The float is created AFTER the entrance, which routinely finishes under
+    // a cursor that is already resting on the panel. Starting it running would
+    // drift the button out from under a press that is about to happen, so ask
+    // :hover directly rather than waiting for an event that will never come.
+    // It begins held; pointerleave releases it.
+    if (el.__upsInside || pointerIsOver(el)) {
+      el.__upsInside = 1;
+      holdFloat(el);
+    }
   }
 
   function holdFloat(el) {
@@ -175,14 +184,74 @@ _DRIVER = r"""
   var CONTROLS = 'button, input, select, textarea, a[href], [role="button"], ' +
                  '[role="tab"], [role="option"], [contenteditable="true"]';
 
+  // Armed the moment a surface is registered — BEFORE its entrance runs and
+  // long before the float starts. Attaching it later (say, when the float is
+  // created) leaves a hole: pointerenter does not re-fire for a pointer that
+  // is already inside, so a user whose cursor was over the panel while it
+  // arrived would never freeze it, and the button would drift out from under
+  // the press. That hole is what made the first attempt at this fix look like
+  // it worked under test and still fail in the hand.
+  //
+  // `__upsInside` carries the state across that ordering: it is the flag
+  // float3d consults so a float created while the pointer is already inside
+  // starts paused rather than immediately drifting.
+  //
+  // pointermove is a deliberate second trigger, not redundancy: it fires for
+  // a pointer that was already inside when the listeners went on, which is
+  // exactly the case pointerenter cannot see.
+  // Is the pointer over this surface RIGHT NOW? :hover is the only honest
+  // answer available without an event, and an event is exactly what we cannot
+  // rely on here: a cursor that came to rest on the panel before the float
+  // existed fires no pointerenter (it never re-enters) and no pointermove (it
+  // never moves). That resting cursor is the common case — the user is
+  // already looking at the form, reaching for the button — and it is why the
+  // earlier event-only attempts still failed in the hand while passing tests
+  // that moved the mouse.
+  function pointerIsOver(el) {
+    try { return el.matches(':hover'); } catch (e) { return false; }
+  }
+
+  // Freezing when the pointer ARRIVES is too late. The surface is still
+  // drifting throughout the approach, so the button moves while the hand is
+  // travelling to it and the press lands where the button used to be — which
+  // reads, correctly, as "the button did nothing". The surface therefore has
+  // to be still BEFORE the pointer gets there.
+  //
+  // So proximity, not containment: a control-bearing surface holds as soon as
+  // the pointer is within MARGIN of its box, and drifts again once the pointer
+  // moves away. One throttled document-level listener drives all of them,
+  // which also sidesteps every attach-ordering trap that sank the earlier
+  // attempts — it does not matter when a surface was registered, only where
+  // the pointer is on the next move.
+  var STEADY = [];
+  var STEADY_MARGIN = 140;   // px of clearance — stops before you arrive
+
   function steadyForPointer(el) {
     if (el.dataset.upsSteady) return;
     if (!el.querySelector(CONTROLS)) return;  // presentation surfaces drift freely
     el.dataset.upsSteady = '1';
-    el.addEventListener('pointerenter', function () { holdFloat(el); });
-    el.addEventListener('pointerleave', function () { resumeFloat(el); });
+    STEADY.push(el);
   }
 
+  var steadyFrame = 0;
+  document.addEventListener('pointermove', function (e) {
+    if (steadyFrame) return;
+    var px = e.clientX, py = e.clientY;
+    steadyFrame = requestAnimationFrame(function () {
+      steadyFrame = 0;
+      for (var i = STEADY.length - 1; i >= 0; i--) {
+        var el = STEADY[i];
+        // Streamlit replaces nodes on every rerun; drop the stale ones.
+        if (!el.isConnected) { STEADY.splice(i, 1); continue; }
+        var r = el.getBoundingClientRect();
+        var near = px >= r.left - STEADY_MARGIN && px <= r.right + STEADY_MARGIN &&
+                   py >= r.top - STEADY_MARGIN && py <= r.bottom + STEADY_MARGIN;
+        if (near && !el.__upsInside) { el.__upsInside = 1; holdFloat(el); }
+        else if (!near && el.__upsInside) { el.__upsInside = 0; resumeFloat(el); }
+      }
+    });
+  }, true);
+
   // Pointer tilt. Hands over from the float and hands back on leave, because
   // two animations writing the same transform component fight each other.
   function tilt3d(el, max) {
@@ -361,6 +430,9 @@ _DRIVER = r"""
 
     root.querySelectorAll(SURFACES).forEach(function (el, i) {
       if (!once(el)) return;
+      // Armed first, before the entrance and long before the float exists, so
+      // a pointer resting on the panel as it arrives is already accounted for.
+      steadyForPointer(el);
       enter(el, i);
       cascade(el);
     });