[Integration] useToggleScope system composable

[johnleider]

Summary

Integration improvements for useToggleScope with the v0 system.

Research Findings

v0 Implementation

Core Features:

• Vue effectScope Integration: Wraps effect scope creation/destruction
• Automatic Lifecycle: Creates scope when true, destroys when false
• Manual Controls: start(), stop(), reset()
• State Visibility: isActive ref for status queries
• Function Arity Detection: Detects if callback expects controls
• Parent Scope Cleanup: Auto-stops on parent disposal

API:

const { isActive, start, stop, reset } = useToggleScope(
  () => featureEnabled,
  (controls) => {
    // Set up listeners, watchers, etc.
  }
)

Vuetify 3 Comparison

Feature	v0	Vuetify 3
Return value	✅ Controls object	❌ Void
isActive state	✅ Exposed	❌ Not available
Manual start/stop	✅ Public methods	❌ Source-only
Controls param	✅ Optional (detected)	✅ Always provided

Vuetify 3 Usage

Used in 20+ components: VOverlay, VNavigationDrawer, VAppBar, VOtpInput, VFooter

V3 Pattern:

useToggleScope(() => props.app, (reset) => {
  // Can call reset() inside closure only
})

v0 Pattern (enhanced):

const { isActive, reset } = useToggleScope(() => props.app, () => {
  // Set up app-layout-specific listeners
})

// Can reset externally
someEvent.on('reset', () => reset())
// Can check state
if (isActive.value) { /* ... */ }

Dialog Example

useToggleScope(
  () => closeOnClickOutside && context.isOpen.value,
  () => {
    useClickOutside(
      () => contentRef.value?.element,
      () => context.close(),
      { bounds: true }
    )
  }
)

Integration Points

• Coordination with useLazy for conditional effect management
• Integration with component disclosure patterns (Dialog, Popover)
• SSR safety considerations
• Consider backporting enhanced controls to V3
• Document external reset use cases

Status

✅ Production-ready - Enhanced over V3 with state visibility