Presentational announcement/notification bar component that renders a fixed 44px single-line strip with icon, message, CTA, and dismiss slots — no data fetching or state management. ## Key Components ### `AnnouncementBarView` The sole export. A layout-only React component implementing the announcement bar pattern: one line of text, one compact CTA, and a trailing slot, all within a 44px-tall strip. ### `AnnouncementBarViewProps` | Prop | Type | Description | |---|---|---| | `startAdornment` | `ReactNode` | Leading icon slot (20px below `md`, 24px above) | | `title` | `string \| ReactElement` | Bar message — plain strings get `text-h6` + truncation; elements own their markup | | `actionBlock` | `ReactElement` | Primary CTA, hidden below 800px breakpoint | | `endAdornment` | `ReactElement` | Trailing slot (e.g. dismiss button), outside tap target | | `onContentClick` | `() => void` | Mobile-only tap handler; no-op at `md`+ where CTA is visible | | `contentClassName` | `string` | Extra classes for the padded content row | | `className` | `string` | Surface styling (background, text color, theme scope) | | `style` | `CSSProperties` | Inline styles for the root element | ### `MD_QUERY` Internal constant `(min-width: 800px)` — mirrors the `screens.md` Tailwind breakpoint. Guards `onContentClick` to prevent firing when the CTA is visible. ## Usage Example ```typescript import { AnnouncementBarView } from './announcement-bar-view'; import { InfoIcon } from '../icons'; import { Button } from '../button'; } title="New feature available — upgrade your plan to unlock it." actionBlock={ } endAdornment={} onContentClick={handleUpgrade} /> ``` > ⚠️ **Design is locked.** The 44px height, `text-h6` scale, and single-row layout are owner-approved and must not be changed without explicit written sign-off. See [source](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/announcement-bar-view.tsx) for the full rationale comment.