{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "announcement-corner-toast",
  "title": "Announcement — Corner Card",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/announcement-corner-toast/AnnouncementCornerToast.vue",
      "content": "<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref } from 'vue'\nimport { ArrowRight, Bell, X } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\nconst props = withDefaults(\n  defineProps<{\n    /** Milliseconds before the card slides in. */\n    delay?: number\n    /** sessionStorage key holding the dismissal. */\n    storageKey?: string\n  }>(),\n  {\n    delay: 1200,\n    storageKey: 'uipkge:corner-announcement-dismissed',\n  },\n)\n\n// Hidden on the server and on first paint; the delay timer is what reveals it.\nconst visible = ref(false)\nlet timer: ReturnType<typeof setTimeout> | undefined\n\nfunction dismiss() {\n  visible.value = false\n  try {\n    window.sessionStorage.setItem(props.storageKey, '1')\n  } catch {\n    // Blocked storage: the dismissal still holds for this page view.\n  }\n}\n\nfunction wasDismissed() {\n  try {\n    return window.sessionStorage.getItem(props.storageKey) === '1'\n  } catch {\n    return false\n  }\n}\n\nonMounted(() => {\n  if (!wasDismissed()) timer = setTimeout(() => (visible.value = true), props.delay)\n})\n\nonBeforeUnmount(() => clearTimeout(timer))\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"transition duration-300 ease-out\"\n    enter-from-class=\"translate-y-4 opacity-0\"\n    leave-active-class=\"transition duration-200 ease-in\"\n    leave-to-class=\"translate-y-4 opacity-0\"\n  >\n    <div\n      v-show=\"visible\"\n      data-slot=\"announcement-corner-toast\"\n      class=\"fixed right-4 bottom-4 z-50 w-[22rem] max-w-[calc(100vw-2rem)]\"\n      role=\"complementary\"\n      aria-label=\"Product announcement\"\n    >\n      <Card class=\"shadow-lg\">\n        <CardContent class=\"p-4\">\n          <div class=\"flex items-start gap-3\">\n            <span\n              class=\"border-border bg-muted flex size-10 shrink-0 items-center justify-center rounded-lg border\"\n              aria-hidden=\"true\"\n            >\n              <Bell class=\"text-primary size-4\" />\n            </span>\n            <div class=\"min-w-0 flex-1\">\n              <Badge variant=\"secondary\" class=\"mb-1.5\">New</Badge>\n              <p class=\"text-sm font-semibold\">Scoping now follows SCIM groups</p>\n              <p class=\"text-muted-foreground mt-1 text-xs leading-relaxed\">\n                Move someone between teams in your IdP and their dashboards follow within the sync window.\n              </p>\n            </div>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"-mt-1 -mr-1 size-7 shrink-0\"\n              aria-label=\"Dismiss announcement\"\n              @click=\"dismiss\"\n            >\n              <X class=\"size-3.5\" aria-hidden=\"true\" />\n            </Button>\n          </div>\n\n          <Separator class=\"my-3\" />\n\n          <div class=\"flex items-center gap-2\">\n            <Button size=\"sm\" class=\"h-7\">\n              Read the changelog\n              <ArrowRight class=\"ml-1 size-3.5\" aria-hidden=\"true\" />\n            </Button>\n            <Button variant=\"ghost\" size=\"sm\" class=\"h-7\" @click=\"dismiss\">Not now</Button>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  </Transition>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/AnnouncementCornerToast.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Corner announcement card that slides in after a delay carrying a thumbnail, headline, supporting line, and two actions, staying out of the page flow entirely.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "announcement"
}