{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "header-announcement-stack",
  "title": "Header — Announcement Stack",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/header-announcement-stack/HeaderAnnouncementStack.vue",
      "content": "<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport { ArrowRight, Layers, Menu, X } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Separator } from '@/components/ui/separator'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'\n\nconst STORAGE_KEY = 'uipkge:announcement-dismissed'\n\nconst links = [\n  { label: 'Platform', href: '#platform' },\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'Customers', href: '#customers' },\n  { label: 'Docs', href: '#docs' },\n]\n\n// Rendered on the server and dismissed only on the client, so there is no flash\n// of a strip that then vanishes.\nconst dismissed = ref(false)\nconst open = ref(false)\n\nfunction dismiss() {\n  dismissed.value = true\n  try {\n    window.sessionStorage.setItem(STORAGE_KEY, '1')\n  } catch {\n    // Blocked storage: the dismissal still holds for this page view.\n  }\n}\n\nonMounted(() => {\n  try {\n    dismissed.value = window.sessionStorage.getItem(STORAGE_KEY) === '1'\n  } catch {\n    dismissed.value = false\n  }\n})\n</script>\n\n<template>\n  <div data-slot=\"header-announcement-stack\" class=\"sticky top-0 z-40\">\n    <div v-if=\"!dismissed\" class=\"border-border bg-muted/60 border-b backdrop-blur\">\n      <div class=\"mx-auto flex h-10 max-w-6xl items-center gap-3 px-6 text-sm\">\n        <Badge variant=\"secondary\" class=\"shrink-0\">New</Badge>\n        <p class=\"min-w-0 truncate\">\n          Row-level scoping now evaluates against SCIM groups.\n          <a href=\"#changelog\" class=\"hover:text-foreground underline underline-offset-4\">Read the changelog</a>\n        </p>\n        <ArrowRight class=\"text-muted-foreground hidden size-3.5 shrink-0 sm:block\" aria-hidden=\"true\" />\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          class=\"ml-auto 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    </div>\n\n    <header class=\"border-border bg-background/90 border-b backdrop-blur\">\n      <div class=\"mx-auto flex h-16 max-w-6xl items-center gap-6 px-6\">\n        <a href=\"#top\" class=\"flex shrink-0 items-center gap-2 font-semibold tracking-tight\">\n          <Layers class=\"text-primary size-5\" aria-hidden=\"true\" />\n          Northwind\n        </a>\n\n        <nav class=\"hidden items-center gap-1 md:flex\" aria-label=\"Primary\">\n          <a\n            v-for=\"link in links\"\n            :key=\"link.href\"\n            :href=\"link.href\"\n            class=\"text-muted-foreground hover:text-foreground hover:bg-muted focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            {{ link.label }}\n          </a>\n        </nav>\n\n        <div class=\"ml-auto hidden items-center gap-2 md:flex\">\n          <Button variant=\"ghost\" size=\"sm\">Sign in</Button>\n          <Button size=\"sm\">Book a demo</Button>\n        </div>\n\n        <Sheet v-model:open=\"open\">\n          <SheetTrigger as-child>\n            <Button variant=\"ghost\" size=\"icon\" class=\"ml-auto md:hidden\" aria-label=\"Open navigation menu\">\n              <Menu class=\"size-5\" aria-hidden=\"true\" />\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"right\" class=\"w-72\">\n            <SheetHeader>\n              <SheetTitle>Menu</SheetTitle>\n            </SheetHeader>\n            <nav class=\"mt-6 grid gap-1\" aria-label=\"Mobile\">\n              <a\n                v-for=\"link in links\"\n                :key=\"link.href\"\n                :href=\"link.href\"\n                class=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                @click=\"open = false\"\n              >\n                {{ link.label }}\n              </a>\n            </nav>\n            <Separator class=\"my-5\" />\n            <div class=\"grid gap-2\">\n              <Button variant=\"outline\">Sign in</Button>\n              <Button>Book a demo</Button>\n            </div>\n          </SheetContent>\n        </Sheet>\n      </div>\n    </header>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/HeaderAnnouncementStack.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/separator.json",
    "https://uipkge.dev/r/vue/sheet.json"
  ],
  "description": "Two-tier site header: a dismissible announcement strip above a sticky navbar, where dismissing the strip collapses it and leaves the navbar flush against the viewport top.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "header"
}