feat(useNotifications): add new plugin composable

apps/docs/build/generate-api-whitelist.ts

@@ -80,6 +80,19 @@ async function getComposableData (): Promise<{
       }
     }
 
+    // Find destructured const exports (plugin trinities, etc.)
+    // Matches: export const [createXContext, createXPlugin, useX] =
+    const destructuredExports = content.matchAll(/export\s+const\s+\[([^\]]+)\]/g)
+    for (const match of destructuredExports) {
+      const bindings = match[1].split(',').map(s => s.trim())
+      for (const binding of bindings) {
+        if (COMPOSABLE_PATTERN.test(binding)) {
+          names.add(binding)
+          toDir[binding] = dir
+        }
+      }
+    }
+
     // Also add the directory name itself (the primary export)
     names.add(dir)
     toDir[dir] = dir

apps/docs/src/components/skillz/SkillzResume.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   // Framework
-  import { useBreakpoints } from '@vuetify/v0'
+  import { useBreakpoints, useNotifications, useProxyRegistry } from '@vuetify/v0'
 
   // Composables
   import { useAsk } from '@/composables/useAsk'
@@ -12,13 +12,23 @@
   import { toRef } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
 
+  // Types
+  import type { NotificationTicket } from '@vuetify/v0'
+
   // Stores
   import { useSkillzStore } from '@/stores/skillz'
 
   const store = useSkillzStore()
   const route = useRoute()
   const router = useRouter()
 
+  const notifications = useNotifications()
+  const proxy = useProxyRegistry<NotificationTicket>(notifications)
+
+  const ticket = toRef(() =>
+    proxy.values.find(t => t.data?.type === 'skillz'),
+  )
+
   const isSkillzPage = toRef(() => route.path.startsWith('/skillz/'))
   const ask = useAsk()
   const breakpoints = useBreakpoints()
@@ -50,18 +60,19 @@
     if (pending) {
       store.dismiss(pending.tour.id)
     }
+    ticket.value?.dismiss()
   }
 </script>
 
 <template>
   <Teleport to="body">
     <Transition name="slide-up">
       <div
-        v-if="store.pendingTour && !isSkillzPage"
+        v-if="ticket && !isSkillzPage"
         class="fixed top-16 inset-x-0 mx-auto w-max z-50 flex items-center gap-3 px-4 py-3 bg-surface border border-divider rounded-xl shadow-xl"
       >
         <span class="text-sm text-on-surface">
-          Continue <strong>{{ store.pendingTour.tour.name }}</strong>?
+          {{ ticket.subject }}
         </span>
 
         <div class="flex gap-2">

apps/docs/src/examples/components/snackbar/basic.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+  import { shallowRef } from 'vue'
+  import { Snackbar } from '@vuetify/v0'
+
+  const visible = shallowRef(false)
+
+  function onShow () {
+    visible.value = true
+  }
+
+  function onDismiss () {
+    visible.value = false
+  }
+</script>
+
+<template>
+  <div class="relative flex items-center justify-center min-h-48 p-6 bg-background rounded-lg border border-divider overflow-hidden">
+    <button
+      class="px-4 py-2 bg-primary text-on-primary rounded-md text-sm font-medium"
+      @click="onShow"
+    >
+      Show Snackbar
+    </button>
+
+    <Snackbar.Portal class="absolute bottom-4 right-4" :teleport="false">
+      <Snackbar.Root
+        v-if="visible"
+        class="flex items-center gap-3 px-4 py-2.5 rounded-lg shadow-lg text-sm bg-surface border border-divider"
+        role="status"
+        @dismiss="onDismiss"
+      >
+        <Snackbar.Content>
+          Changes saved successfully
+        </Snackbar.Content>
+
+        <Snackbar.Close class="p-1 -mr-1 opacity-50 hover:opacity-100">
+          <svg aria-hidden="true" class="w-4 h-4" viewBox="0 0 24 24">
+            <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" fill="currentColor" />
+          </svg>
+        </Snackbar.Close>
+      </Snackbar.Root>
+    </Snackbar.Portal>
+  </div>
+</template>

apps/docs/src/examples/components/snackbar/queue.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+  import { computed, shallowRef } from 'vue'
+  import { Snackbar, useNotifications } from '@vuetify/v0'
+  import type { NotificationSeverity } from '@vuetify/v0'
+
+  const notifications = useNotifications()
+
+  const severities: NotificationSeverity[] = ['info', 'success', 'warning', 'error']
+  const index = shallowRef(0)
+
+  const messages: Record<NotificationSeverity, string> = {
+    info: 'Deployment started for production',
+    success: 'Changes saved successfully',
+    warning: 'API rate limit at 80%',
+    error: 'Build failed — check logs',
+  }
+
+  const classes: Record<NotificationSeverity, string> = {
+    info: 'bg-info text-on-info',
+    success: 'bg-success text-on-success',
+    warning: 'bg-warning text-on-warning',
+    error: 'bg-error text-on-error',
+  }
+
+  function onShow () {
+    const severity = severities[index.value % severities.length]
+    index.value++
+    notifications.send({ subject: messages[severity], severity, timeout: 4000 })
+  }
+
+  // Stacking behavior — consumer owns this
+  const hovered = shallowRef(false)
+
+  const ITEM_H = 44
+  const GAP = 8
+  const PEEK = 16
+  const MAX_STACK = 3
+
+  const containerHeight = computed(() => {
+    const n = Math.min(notifications.queue.values().length, MAX_STACK)
+    if (!n) return 0
+    return hovered.value
+      ? notifications.queue.values().length * ITEM_H + (notifications.queue.values().length - 1) * GAP
+      : ITEM_H + (n - 1) * PEEK
+  })
+
+  function itemStyle (i: number) {
+    if (hovered.value) {
+      return {
+        bottom: `${i * (ITEM_H + GAP)}px`,
+        left: 0,
+        right: 0,
+        transform: 'none',
+        opacity: 1,
+        pointerEvents: 'auto' as const,
+      }
+    }
+
+    if (i >= MAX_STACK) {
+      const depth = MAX_STACK - 1
+      return {
+        bottom: 0,
+        left: `${depth * 8}px`,
+        right: `${depth * 8}px`,
+        transform: `translateY(${-depth * PEEK}px) scale(${1 - depth * 0.04})`,
+        transformOrigin: 'bottom center',
+        opacity: 0,
+        pointerEvents: 'none' as const,
+        zIndex: -1,
+      }
+    }
+
+    return {
+      bottom: 0,
+      left: `${i * 8}px`,
+      right: `${i * 8}px`,
+      transform: `translateY(${-i * PEEK}px) scale(${1 - i * 0.04})`,
+      transformOrigin: 'bottom center',
+      opacity: Math.max(0, 1 - i * 0.2),
+      zIndex: MAX_STACK - i,
+      pointerEvents: i === 0 ? 'auto' as const : 'none' as const,
+    }
+  }
+
+  let leaveTimer: ReturnType<typeof setTimeout> | null = null
+
+  function onEnter () {
+    if (leaveTimer) {
+      clearTimeout(leaveTimer)
+      leaveTimer = null
+    }
+    hovered.value = true
+  }
+
+  function onLeave () {
+    leaveTimer = setTimeout(() => {
+      hovered.value = false
+      leaveTimer = null
+    }, 150)
+  }
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-6 min-h-48 p-6 bg-background rounded-lg border border-divider">
+    <button
+      class="px-4 py-2 bg-primary text-on-primary rounded-md text-sm font-medium"
+      @click="onShow"
+    >
+      Show Toast
+    </button>
+
+    <p class="text-sm opacity-40">
+      Cycles through info → success → warning → error
+    </p>
+  </div>
+
+  <Snackbar.Portal
+    class="fixed bottom-4 right-4 w-72"
+    @mouseenter="onEnter"
+    @mouseleave="onLeave"
+  >
+    <Snackbar.Queue v-slot="{ items }">
+      <div
+        class="relative transition-all duration-300 ease-out"
+        :style="{ height: `${containerHeight}px` }"
+      >
+        <div
+          v-for="(item, i) in items"
+          :key="item.id"
+          class="absolute left-0 right-0 transition-all duration-300 ease-out"
+          :style="itemStyle(i)"
+        >
+          <Snackbar.Root
+            :id="item.id"
+            class="flex items-center gap-3 px-4 py-2.5 rounded-lg shadow-lg text-sm"
+            :class="classes[item.severity ?? 'info']"
+          >
+            <Snackbar.Content class="flex-1">
+              {{ item.subject }}
+            </Snackbar.Content>
+            <Snackbar.Close
+              v-show="hovered || i === 0"
+              class="p-1 -mr-1 opacity-70 hover:opacity-100 shrink-0"
+            >
+              <svg aria-hidden="true" class="w-4 h-4" viewBox="0 0 24 24">
+                <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" fill="currentColor" />
+              </svg>
+            </Snackbar.Close>
+          </Snackbar.Root>
+        </div>
+      </div>
+    </Snackbar.Queue>
+  </Snackbar.Portal>
+</template>

apps/docs/src/examples/composables/use-notifications/NotificationConsumer.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+  import { useNotifications } from './context'
+  import type { AppNotificationInput } from './context'
+
+  const notifications = useNotifications()
+
+  const scenarios: AppNotificationInput[] = [
+    // Banner — persistent, system-wide, max 1 visible
+    {
+      subject: 'Your trial expires in 3 days',
+      severity: 'warning',
+      timeout: -1,
+      data: { type: 'banner' },
+    },
+    // Toast — auto-dismiss after 4s
+    {
+      subject: 'Changes saved',
+      severity: 'success',
+      timeout: 4000,
+      data: { type: 'toast' },
+    },
+    // Inbox — persistent, full lifecycle
+    {
+      subject: 'Build failed on main',
+      body: 'CI pipeline failed — 3 tests broken in auth module',
+      severity: 'error',
+      timeout: -1,
+      data: { type: 'inbox' },
+    },
+    // Inbox — snoozeable
+    {
+      subject: 'Review your security settings',
+      body: 'Two-factor authentication is not enabled',
+      severity: 'info',
+      timeout: -1,
+      data: { type: 'inbox' },
+    },
+    // Toast — ephemeral confirmation
+    {
+      subject: 'Deployment complete',
+      severity: 'success',
+      timeout: 4000,
+      data: { type: 'toast' },
+    },
+    // Inline — contextual, embedded in page
+    {
+      subject: 'API rate limit approaching — 80% of quota consumed',
+      severity: 'warning',
+      timeout: -1,
+      data: { type: 'inline' },
+    },
+    // Inbox — collaboration
+    {
+      subject: 'PR #142 review requested',
+      body: 'Alex requested your review on feat/notifications',
+      severity: 'info',
+      timeout: -1,
+      data: { type: 'inbox' },
+    },
+  ]
+
+  let index = 0
+
+  function simulate () {
+    notifications.send(scenarios[index % scenarios.length]!)
+    index++
+  }
+</script>
+
+<template>
+  <button
+    class="px-3 py-1.5 bg-primary text-on-primary rounded text-sm font-medium"
+    @click="simulate"
+  >
+    Simulate Event
+  </button>
+</template>