refactor(use-stack): align with v0 composable patterns

- Replace exported singleton with lazy internal fallback
- Add auto-cleanup for tickets registered in component setup
- Move ids() helper outside register() to reduce closure overhead
- Fix Scrim to call stack.top.value?.dismiss() instead of stack.dismiss()
- Update Scrim tests with proper mock structure
- Update docs examples to use correct stack.register() pattern

Author: johnleider

apps/docs/src/examples/composables/use-stack/StackConsumer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { useHotkey, useStack } from '@vuetify/v0'
-  import { computed } from 'vue'
+  import { computed, watch } from 'vue'
   import { useOverlays } from './context'
 
   const { overlays, activeCount, open, close, closeAll } = useOverlays()
@@ -12,16 +12,31 @@
     { accent: 'text-amber-500', bg: 'bg-amber-500', badge: 'bg-amber-500/10 text-amber-500' },
   ]
 
-  // Create stack entries for each overlay
-  const stacks = overlays.map((overlay, index) => ({
-    overlay,
-    color: colors[index % colors.length]!,
-    ...useStack(
-      overlay.isOpen,
-      () => close(overlay.id),
-      { blocking: overlay.blocking },
-    ),
-  }))
+  const stack = useStack()
+
+  // Register each overlay with the stack and sync selection with isOpen
+  const tickets = overlays.map((overlay, index) => {
+    const ticket = stack.register({
+      id: overlay.id,
+      onDismiss: () => close(overlay.id),
+      blocking: overlay.blocking,
+    })
+
+    // Sync selection state with isOpen
+    watch(overlay.isOpen, isOpen => {
+      if (isOpen) {
+        ticket.select()
+      } else {
+        ticket.unselect()
+      }
+    }, { immediate: true })
+
+    return {
+      overlay,
+      ticket,
+      color: colors[index % colors.length]!,
+    }
+  })
 
   // Find next closed overlay to open from within an overlay
   const nextClosed = computed(() =>
@@ -30,9 +45,9 @@
 
   // Escape key dismisses the topmost non-blocking overlay
   useHotkey('Escape', () => {
-    const topStack = stacks.find(s => s.globalTop.value)
-    if (topStack && !topStack.overlay.blocking) {
-      close(topStack.overlay.id)
+    const topTicket = tickets.find(t => t.ticket.globalTop.value)
+    if (topTicket && !topTicket.overlay.blocking) {
+      close(topTicket.overlay.id)
     }
   })
 </script>
@@ -43,17 +58,17 @@
     <div class="flex flex-col gap-4">
       <div class="grid grid-cols-3 gap-3 max-w-md mx-auto">
         <button
-          v-for="(stack, index) in stacks"
-          :key="stack.overlay.id"
+          v-for="({ overlay }, index) in tickets"
+          :key="overlay.id"
           class="px-4 py-2 text-sm font-medium rounded-md transition-colors text-center"
           :class="[
-            stack.overlay.isOpen.value
+            overlay.isOpen.value
               ? `${colors[index]!.bg} text-white border border-transparent`
               : 'border border-divider hover:bg-surface-tint'
           ]"
-          @click="stack.overlay.isOpen.value ? close(stack.overlay.id) : open(stack.overlay.id)"
+          @click="overlay.isOpen.value ? close(overlay.id) : open(overlay.id)"
         >
-          {{ stack.overlay.title }}
+          {{ overlay.title }}
         </button>
       </div>
 
@@ -62,13 +77,13 @@
         <span class="text-on-surface-variant">Stack:</span>
         <div class="flex items-center gap-1">
           <template v-if="activeCount > 0">
-            <template v-for="(stack, index) in stacks" :key="stack.overlay.id">
+            <template v-for="({ overlay, ticket }, index) in tickets" :key="overlay.id">
               <span
-                v-if="stack.overlay.isOpen.value"
+                v-if="overlay.isOpen.value"
                 class="px-2 py-0.5 rounded text-xs font-mono"
                 :class="colors[index]!.badge"
               >
-                {{ stack.zIndex.value }}
+                {{ ticket.zIndex.value }}
               </span>
             </template>
           </template>
@@ -80,38 +95,38 @@
     <!-- Overlays -->
     <Teleport to="body">
       <TransitionGroup name="modal">
-        <template v-for="({ overlay, color, styles, globalTop, zIndex, id }, index) in stacks" :key="overlay.id">
+        <template v-for="({ overlay, ticket, color }, index) in tickets" :key="overlay.id">
           <div
             v-if="overlay.isOpen.value"
-            :aria-describedby="`${id}-desc`"
-            :aria-labelledby="`${id}-title`"
+            :aria-describedby="`${ticket.id}-desc`"
+            :aria-labelledby="`${ticket.id}-title`"
             aria-modal="true"
             class="fixed inset-0 flex items-center justify-center pointer-events-none p-4"
             role="dialog"
             :style="{
-              ...styles.value,
+              zIndex: ticket.zIndex.value,
               transform: `translate(${index * 16}px, ${index * 16}px)`,
             }"
           >
             <div
               class="m-auto rounded-xl bg-surface border border-divider max-w-md w-full pointer-events-auto transition-all duration-200"
-              :class="globalTop ? 'shadow-xl' : 'shadow-lg opacity-95'"
+              :class="ticket.globalTop.value ? 'shadow-xl' : 'shadow-lg opacity-95'"
             >
               <!-- Header -->
               <div class="px-4 py-3 border-b border-divider">
                 <div class="flex items-center justify-between">
-                  <h3 :id="`${id}-title`" class="text-lg font-semibold text-on-surface">
+                  <h3 :id="`${ticket.id}-title`" class="text-lg font-semibold text-on-surface">
                     {{ overlay.title }}
                   </h3>
                   <div class="flex items-center gap-2">
                     <span class="px-2 py-0.5 rounded text-xs font-mono" :class="color.badge">
-                      z:{{ zIndex.value }}
+                      z:{{ ticket.zIndex.value }}
                     </span>
                     <span
                       class="px-2 py-0.5 rounded text-xs"
-                      :class="globalTop ? 'bg-success/10 text-success' : 'bg-surface-variant text-on-surface-variant'"
+                      :class="ticket.globalTop.value ? 'bg-success/10 text-success' : 'bg-surface-variant text-on-surface-variant'"
                     >
-                      {{ globalTop ? 'top' : 'behind' }}
+                      {{ ticket.globalTop.value ? 'top' : 'behind' }}
                     </span>
                   </div>
                 </div>
@@ -122,7 +137,7 @@
 
               <!-- Content -->
               <div class="p-4 space-y-4">
-                <p :id="`${id}-desc`" class="text-sm text-on-surface leading-relaxed">
+                <p :id="`${ticket.id}-desc`" class="text-sm text-on-surface leading-relaxed">
                   This overlay demonstrates z-index stacking. Open multiple overlays
                   to see how they layer. The topmost overlay receives focus and
                   handles the escape key.

apps/docs/src/examples/composables/use-stack/StackProvider.vue

@@ -2,11 +2,13 @@
   // Note: For SSR applications, install the plugin in main.ts:
   // import { createStackPlugin } from '@vuetify/v0'
   // app.use(createStackPlugin())
-  import { stack } from '@vuetify/v0'
+  import { useStack } from '@vuetify/v0'
   import { computed, onScopeDispose, shallowRef, watch } from 'vue'
   import { provideOverlays } from './context'
   import type { Overlay } from './context'
 
+  const stack = useStack()
+
   // Block body scroll when overlays are active
   watch(() => stack.isActive.value, active => {
     document.body.style.overflow = active ? 'hidden' : ''
@@ -43,9 +45,17 @@
     }
   }
 
+  // Dismiss topmost non-blocking overlay (for scrim click)
+  function dismissTop () {
+    const top = stack.top.value
+    if (top && !stack.isBlocking.value) {
+      top.dismiss()
+    }
+  }
+
   provideOverlays({
     overlays,
-    stack: stack,
+    stack,
     activeCount,
     open,
     close,
@@ -64,7 +74,7 @@
           v-if="stack.isActive.value"
           class="fixed inset-0 bg-black/50 transition-opacity"
           :style="{ zIndex: stack.scrimZIndex.value }"
-          @click="stack.dismiss()"
+          @click="dismissTop"
         />
       </Transition>
     </Teleport>

packages/0/src/components/Scrim/Scrim.vue

@@ -58,7 +58,7 @@
   import { Atom } from '#v0/components/Atom'
 
   // Composables
-  import { stack as globalStack } from '#v0/composables/useStack'
+  import { useStack } from '#v0/composables/useStack'
 
   // Utilities
   import { toRef, useAttrs } from 'vue'
@@ -71,7 +71,7 @@
 
   const {
     as = 'div',
-    stack = globalStack,
+    stack = useStack(),
     transition = 'fade',
     teleport = true,
     teleportTo = 'body',
@@ -80,16 +80,17 @@
   const attrs = useAttrs()
 
   function onClick () {
-    if (!stack.isBlocking.value) {
-      stack.dismiss()
+    const top = stack.top.value
+    if (top && !stack.isBlocking.value) {
+      top.dismiss()
     }
   }
 
   const slotProps = toRef((): ScrimSlotProps => ({
     isActive: stack.isActive.value,
     isBlocking: stack.isBlocking.value,
     zIndex: stack.scrimZIndex.value,
-    dismiss: () => stack.dismiss(),
+    dismiss: onClick,
   }))
 
   const style = toRef(() => ({