docs(docs): fix cursor handling and hover tip refactor in docs UI components

apps/docs/islands/DependencySpine.tsx

@@ -193,6 +193,8 @@ export default function DependencySpine() {
   };
   const [routes, setRoutes] = useState<Record<string, string> | null>(null);
   const drag = useRef<{ x: number; y: number; moved: boolean } | null>(null);
+  // The cursor reads this, not `drag`: a ref read during render never re-renders.
+  const [panning, setPanning] = useState(false);
 
   useEffect(() => {
     let live = true;
@@ -244,6 +246,7 @@ export default function DependencySpine() {
       // Capture only once it is a drag: capturing on pointerdown would retarget
       // pointerup (and so the click) to the <svg>, and a node's link would never fire.
       d.moved = true;
+      setPanning(true);
       e.currentTarget.setPointerCapture(e.pointerId);
     }
     d.x = e.clientX;
@@ -254,6 +257,7 @@ export default function DependencySpine() {
   };
   const onPointerUp = (e: PointerEvent<SVGSVGElement>) => {
     if (e.currentTarget.hasPointerCapture(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);
+    setPanning(false);
     // Cleared on the next tick so a node's click handler can still see `moved`.
     setTimeout(() => { drag.current = null; }, 0);
   };
@@ -293,7 +297,7 @@ export default function DependencySpine() {
         xmlns="http://www.w3.org/2000/svg"
         role="img"
         aria-labelledby="dependency-spine-title dependency-spine-desc"
-        style={{ display: "block", width: "100%", height: "auto", touchAction: "none", cursor: drag.current?.moved ? "grabbing" : zoom > 1.001 ? "grab" : "default", userSelect: "none" }}
+        style={{ display: "block", width: "100%", height: "auto", touchAction: "none", cursor: panning ? "grabbing" : zoom > 1.001 ? "grab" : "default", userSelect: "none" }}
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
         onPointerUp={onPointerUp}