feat: add dismissible announcement bar (AuthZed Cloud promo)

[samkim]

Summary

Adds a reusable, theme-compatible announcement bar fixed to the top of the window and wires it into the playground. It currently promotes AuthZed Cloud.

The bar is dismissible, and dismissal is remembered per content version — bump contentId and the bar re-shows for everyone who dismissed the previous message.

What's included

• useDismissible(id, storageKey?) (src/hooks/use-dismissible.ts) — generic localStorage-backed dismissal memory. Reads synchronously in the state initializer (no flash-of-dismissed-content), guards all storage access in try/catch (private mode / corrupt JSON safe), and syncs across tabs via the storage event.
• <AnnouncementBar> (src/components/announcement-bar.tsx) — position: fixed full-width bar plus an in-flow spacer whose height tracks the bar via ResizeObserver, so it never overlaps page content and adapts to responsive wrapping. cva variants (default / brand / info) built on semantic theme tokens; shadcn Button + lucide X close control. Content can be text or any component.
  • default variant renders a dark bar in both themes: bg-foreground / text-background in light mode and bg-secondary / text-secondary-foreground (the dark-grey surface token) in dark mode.
• Playground integration (src/components/FullPlayground.tsx) — mounted as the first flex child of the root layout; the spacer pushes the existing chrome down. Only FullPlayground is wired (Inline/Embedded iframe modes are untouched). The link targets the AuthZed Cloud signup with UTM params (utm_source=playground).

Usage

<AnnouncementBar contentId="authzed-cloud" variant="default">
  Deploy fully managed SpiceDB clusters on AuthZed Cloud. <a href="…">Try now →</a>
</AnnouncementBar>

Test plan

• New tests (Vitest browser project, real DOM + localStorage, not mocks):
  • use-dismissible.test.tsx — new id shows; dismiss persists + flips state; a different id still shows; reset clears; corrupt storage handled.
  • announcement-bar.test.tsx — renders children; dismiss hides + persists + calls onDismiss; pre-dismissed contentId renders nothing; variant applied; spacer present/absent per reserveSpace; close hidden when dismissible={false}.
  • announcement-integration.test.tsx — the bar shows in the playground and dismisses (stable role/aria-label selectors).
• Full suite green: unit 78/78, browser 24/24 (pristine output).
• pnpm lint 0 errors, tsc --noEmit 0 errors.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
playground	Ready	Preview, Comment	Jul 1, 2026 1:24am

[josephschorr]

LGTM