Keep the ambient float; freeze it only while the pointer is inside

Supersedes the previous attempt, which fixed the mis-click by refusing
the perpetual float to any surface holding a control. That worked, but
it took the motion off the main panels — the wrong trade.

The float now runs exactly as before and simply stops advancing while
the pointer is inside a surface the user can click into, resuming on
pointerleave. A click only fires when mousedown and mouseup land on the
same element, so the surface has to be still for the moment you are
actually aiming at it — and nowhere else.

Uses the existing holdFloat/resumeFloat pair, the same handoff tilt3d
already performs, so the float remains the sole author of the transform
and merely pauses. Pausing holds the current transform rather than
clearing it, so nothing snaps.

Measured on the running app:
pointer away -> 6.7px x / 2.5px y drift (motion alive)
pointer inside -> 0.0px / 0.0px (steady to click)
pointer leaves -> 9.1px / 4.3px (drift resumes)
Save Configuration and Run API Check both land on the first click; 3
surfaces still float, and the presentation-only one drifts even under
the cursor, as before.

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

app/ui/motion_runtime.py

@@ -145,6 +145,9 @@ _DRIVER = r"""
       repeat: Infinity,
       ease: 'easeInOut'
     });
+    // Keeps the drift, but holds it still while the pointer is inside a
+    // surface the user can click into. See steadyForPointer below.
+    steadyForPointer(el);
   }
 
   function holdFloat(el) {
@@ -155,6 +158,31 @@ _DRIVER = r"""
     return false;
   }
 
+  // A surface that carries controls keeps its ambient float — it just holds
+  // still while you are aiming at something inside it.
+  //
+  // A `click` fires only when mousedown and mouseup land on the SAME element.
+  // A panel drifting a few pixels moves its buttons out from under the cursor
+  // between those two events, so clicks are silently swallowed and the button
+  // appears to need several stabs before one registers. Freezing on
+  // pointerenter makes the surface stationary for exactly as long as the
+  // pointer is inside it, and the drift resumes on the way out.
+  //
+  // This is the same handoff tilt3d performs, through the same pause/play
+  // pair, so nothing new ever owns the transform: the float stays its sole
+  // author and simply stops advancing. Pausing (rather than clearing) holds
+  // the current transform, so the surface never snaps.
+  var CONTROLS = 'button, input, select, textarea, a[href], [role="button"], ' +
+                 '[role="tab"], [role="option"], [contenteditable="true"]';
+
+  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); });
+  }
+
   // 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) {
@@ -349,6 +377,9 @@ _DRIVER = r"""
         z: wave(17, (i % 4) / 4, 17),
         rotateX: wave(2.4, (i % 4) / 4 + 0.25)
       }, { duration: 6.5, repeat: Infinity, ease: 'easeInOut' });
+      // Same rule as float3d: an entry that never settles holds still while
+      // the pointer is inside it, in case it ever carries a link or control.
+      steadyForPointer(el);
     });
 
     // The mark is a compass. Turning is the one thing it should do.