[Integration] useIntersectionObserver system composable

[johnleider]

Summary

Integration improvements for useIntersectionObserver with the v0 system.

Research Findings

v0 Implementation (Production-Ready)

Core Features:

• Intersection Tracking: Auto-updates isIntersecting ref
• Hydration-Aware: Uses useHydration() for SSR safety
• Lifecycle Control: pause(), resume(), stop()
• State Tracking: isActive, isPaused, isIntersecting
• Once Mode: Auto-stops when isIntersecting=true
• Synthetic Immediate: Generates initial entry with isIntersecting: false
• Convenience Wrapper: useElementIntersection() extracts ratio

Vuetify 3 Comparison

Feature	v0	Vuetify 3
Pause/resume	✅	❌
State tracking	✅ isActive, isPaused	❌
Once mode	✅	❌
Hydration guard	✅ useHydration()	⚠️ IN_BROWSER only
Lines of code	316	33

Vuetify 3 Usage

Used in: VInfiniteScroll, VOtpInput, VProgressCircular, VProgressLinear, VParallax

V3 Pattern:

const { intersectionRef, isIntersecting } = useIntersectionObserver()

v0 Pattern (enhanced):

const { isIntersecting, pause, resume, isActive } = useIntersectionObserver(
  targetRef,
  callback,
  { once: true, threshold: 0.5 }
)

Integration Points

• Integration with useLazy for visibility-based loading
• Integration with useVirtual for scroll virtualization
• SSR safety via useHydration
• Document pause/resume for performance optimization
• Add observer pooling consideration for v0.3.0

Status

✅ Production-ready - Superset of V3 features

[johnleider]

Closed — all integration points complete. Implementation is production-ready and integrated into Vuetify via PR vuetifyjs/vuetify#22672. Observer pooling tracked in #153 (v0.3.0).