@flamingo-stack/openframe-frontend-core 0.0.404-snapshot.20260711053526 → 0.0.404

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.404-snapshot.20260711053526",
+  "version": "0.0.404",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/.announcement-bar.md

@@ -1,42 +1,40 @@
-<!-- source-hash: pending-regeneration -->
-A dismissible platform announcement bar with DUAL MODE support: SSR-seeded (Next hosts) and client-only (bare React apps without SSR). Single-line 44px strip, contrast handled by scoping content with the ODS theme classes, event-driven freshness (no polling).
+<!-- source-hash: cbe120bea34edef14f05fff077b0b285 -->
+A client-side React component that renders a dismissible announcement banner, fetching active announcements from a configured API endpoint with localStorage-based caching and per-announcement dismissal persistence.
 
 ## Key Components
 
 | Export/Function | Description |
 |----------------|-------------|
-| `AnnouncementBar` | Main component — renders the bar or `null` when there is nothing to show |
-| `initialAnnouncement` prop | SSR mode seed (nullable): server resolved announcement + dismissal cookie; skips the mount fetch |
-| `previewMode` prop | Render-only (admin live preview): no fetch, inert dismiss, no storage side effects |
-
-## Modes
-
-- **SSR mode** (hub / any Next host): the server passes `initialAnnouncement` (already dismissal-filtered via the cookie helpers in `announcement-storage.ts`). The bar is in the first HTML byte — zero layout shift, no flash for dismissed users, zero mount fetch.
-- **Client-only mode** (Vite/CRA embeds, no SSR — the react-embedding-example structure): mount the bar PROP-LESS inside an EndpointsRuntime provider; `announcementsUrl` is a fixed suffix under the embedder's one content base (`${CONTENT}/announcements/active`). No provider → renders nothing, never fetches. Appearance animates in (grid `0fr -> 1fr`). Deliberately NO per-component URL or platform knobs: the platform is never sent as a parameter — each server returns its own announcement via `currentPlatform()`.
+| `AnnouncementBar` | Main component — renders the announcement banner or `null` if hidden/dismissed |
+| `fetchActiveAnnouncement` | Fetches the active announcement from `announcementsUrl`, updates state and localStorage cache |
+| `handleDismiss` | Marks the current announcement as dismissed in localStorage and hides the bar |
+| `handleCtaClick` | Navigates to the CTA URL, respecting `_blank` target for new-tab behavior |
+| `renderIcon` | Renders either a PNG `<Image>` or an SVG icon based on `announcement.icon_type` |
+| `getSvgIcon` | Thin wrapper around `renderSvgIcon` applying size-appropriate Tailwind classes |
 
 ## Behavior Notes
 
-- **No polling**: freshness is visibility-driven — `useSelfFetch`'s `revalidateOnVisibleAfterMs` refetches on tab refocus when held data is older than 60s. Idle tabs make zero requests.
-- **Dismissal**: cookie is the SSOT (`<platform>-announcement-dismissed=<id>`, id-match); localStorage is read-only legacy. Storage reads happen only in effects (hydration safety).
-- **Contrast**: the admin background's tone selects `.theme-light`/`.theme-dark` around the content; all colors resolve from the active ODS theme's Tier-1 primitives.
-- **Responsive**: single truncating line (description hidden < sm); CTA is desktop-only, the whole bar is the tap target on mobile.
-
-## Usage Examples
-
-```tsx
-// SSR mode (Next server component resolves the seed):
-<AnnouncementBar initialAnnouncement={announcementOrNull} />
-
-// Client-only mode (react-embedding-example structure): one content base,
-// endpoints built once, bar mounted prop-less inside the provider.
-const endpointsRuntime: EndpointsRuntime = {
-  announcementsUrl: `${CONTENT}/announcements/active`,
-  accessCode: { validateUrl: `${CONTENT}/validate-access-code`, consumeUrl: `${CONTENT}/consume-access-code` },
-  contactUrl: `${CONTENT}/contact`,
+- **Instant paint**: On mount, the cached announcement from localStorage is applied synchronously before the API response arrives.
+- **Polling**: Refreshes every 5 minutes via `setInterval`; interval restarts if `announcementsUrl` changes.
+- **No provider fallback**: When `useEndpointsRuntime` returns no URL, polling is skipped entirely — cached data still renders.
+- **Platform-scoped keys**: localStorage keys are prefixed with the platform type (via `getAppType()`) to prevent key collisions across apps.
+- **Responsive CTA**: The CTA button is desktop-only; on mobile, tapping the content area triggers `handleCtaClick` directly.
+
+## Usage Example
+
+```typescript
+// Wrap your app with the endpoints provider, then drop in the bar:
+import { AnnouncementBar } from './announcement-bar';
+import { EndpointsRuntimeProvider } from '../contexts/endpoints-runtime-context';
+
+function AppShell() {
+  return (
+    <EndpointsRuntimeProvider announcementsUrl="/api/announcements/active">
+      <AnnouncementBar />
+      <main>{/* app content */}</main>
+    </EndpointsRuntimeProvider>
+  );
 }
-
-<EndpointsRuntimeContext.Provider value={endpointsRuntime}>
-  <AnnouncementBar />
-  <main>{/* app content */}</main>
-</EndpointsRuntimeContext.Provider>
 ```
+
+> **Note:** The component renders nothing (`null`) when no active announcement exists, when the fetch URL is unconfigured, or when the user has previously dismissed the current announcement.

package/src/components/announcement-bar.tsx

@@ -1,266 +1,221 @@
 "use client";
 
-import { useEffect, useMemo, useState } from 'react';
+import { useState, useEffect } from 'react';
 import { X } from 'lucide-react';
 import { Button } from './ui/button';
 import { EntityIcon } from './icon-display';
 import {
-  dismissAnnouncement,
-  isAnnouncementDismissed,
-  clearLegacyAnnouncementCache,
+  setStoredAnnouncement,
+  getStoredAnnouncement,
+  clearStoredAnnouncement,
 } from '../utils/announcement-storage';
-import type { AnnouncementBarProps, AnnouncementResponse } from '../types/announcement';
+import { Announcement } from '../types/announcement';
 import { getAppType } from '../utils/app-config';
 import { useEndpointsRuntime } from '../contexts/endpoints-runtime-context';
-import { useSelfFetch } from '../hooks/use-self-fetch';
-import { pickReadableTextColor } from '../utils/color-analysis';
 
-/**
- * Platform announcement bar — DUAL MODE, works with or without SSR.
- *
- * SSR mode (Next hosts, e.g. the hub): the server resolves the announcement
- * and the dismissal cookie, then passes `initialAnnouncement` (nullable).
- * The bar renders in the first HTML byte (zero layout shift, no flash for
- * dismissed users) and skips the mount fetch.
- *
- * Client-only mode (bare React apps without SSR: Vite/CRA embeds — see
- * react-embedding-example): omit `initialAnnouncement` and mount the bar
- * PROP-LESS inside an EndpointsRuntime provider; it self-fetches from the
- * provider's `announcementsUrl` (a fixed suffix under the embedder's one
- * content base). No provider → renders nothing, never fetches (silent
- * no-op). Appearance animates in (grid 0fr→1fr) so there is no hard layout
- * jump. Deliberately NO per-component URL or platform knobs: the embedder
- * is platform-agnostic — each server returns ITS OWN announcement via
- * currentPlatform(); the platform is never sent as a parameter.
- *
- * Both modes: freshness is event-driven, no polling — `useSelfFetch`'s
- * visibility revalidation re-fetches on tab refocus when the held data is
- * >60s old (matching the server cache TTL by convention); idle tabs make
- * zero requests. Dismissal cookie is the SSOT (`announcement-storage.ts`);
- * storage reads happen ONLY in effects (a render-time read would desync
- * hydration in SSR mode).
- */
-export function AnnouncementBar({
-  initialAnnouncement,
-  previewMode = false,
-  className,
-}: AnnouncementBarProps = {}) {
-  // Namespace for the dismissal cookie/legacy keys. Next hosts inline
-  // NEXT_PUBLIC_APP_TYPE (matching the server's currentPlatform(), which the
-  // hub layout uses for the SSR cookie read); platform-agnostic embeds get
-  // the fallback — fine, cookies are domain-scoped and an embed domain
-  // serves one platform's announcements.
+export function AnnouncementBar() {
+  const [announcement, setAnnouncement] = useState<Announcement | null>(null);
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+
+  // Get the platform type for platform-specific localStorage keys
   const platform = getAppType();
 
-  // Optional endpoint runtime: no provider → no URL → fetching disabled.
+  // Optional endpoint runtime: when no provider is mounted (e.g. on a
+  // bare React-tree page that doesn't wrap with HubRuntimeProvider),
+  // the bar silently skips its fetch instead of throwing. Apps that DO
+  // mount the provider get the configured URL — typically
+  // '/api/announcements/active' in the hub, or a proxied path in an
+  // embedded host.
   const endpoints = useEndpointsRuntime();
-  const url = previewMode ? null : endpoints?.announcementsUrl ?? null;
+  const announcementsUrl = endpoints?.announcementsUrl;
+
+  // Helper to determine dismissal key for localStorage
+  const getDismissKey = (id: string) => `${platform}-announcement-${id}-dismissed`;
+  
+  // Helper to get platform-specific cache key
+  const getCacheKey = () => `${platform}-announcement-cache`;
+
+  // Fetch active announcement from API and update state + LS
+  const fetchActiveAnnouncement = async () => {
+    // No provider mounted → no URL configured → skip fetch silently.
+    // Cached announcement from previous sessions still renders if present.
+    if (!announcementsUrl) return;
+    try {
+      // Server-side platform injection - no URL parameter needed
+      const response = await fetch(announcementsUrl);
+      
+      if (response.ok) {
+        const data = await response.json();
+        if (data.announcement) {
+          setAnnouncement(data.announcement);
+
+          // persist latest announcement for quick future loads with platform-specific key
+          setStoredAnnouncement(getCacheKey(), data.announcement);
+
+          // Check if this specific announcement was dismissed
+          const isDismissed = localStorage.getItem(getDismissKey(data.announcement.id));
+          setIsVisible(!isDismissed);
+        } else {
+          // No announcement available - clean up localStorage and hide bar
+          setAnnouncement(null);
+          setIsVisible(false);
+          
+          // Use utility function to properly clear platform-specific announcement data
+          clearStoredAnnouncement(getCacheKey());
+        }
+      } else {
+        // Network or other error - hide announcement and clean up
+        console.error(`❌ [${platform.toUpperCase()}] Error fetching announcement: ${response.status}`);
+        setAnnouncement(null);
+        setIsVisible(false);
+        
+        // Clear stale data on network errors too
+        clearStoredAnnouncement(getCacheKey());
+      }
+    } catch (error) {
+      console.error('Error fetching active announcement:', error);
+      setAnnouncement(null);
+      setIsVisible(false);
+      
+      // Clear stale data on exceptions too
+      clearStoredAnnouncement(getCacheKey());
+    }
+  };
 
-  // MUST be memoized (the hook re-syncs on [initialData] identity — an inline
-  // literal per render would setData-loop) and strict-undefined-mapped:
-  // `null` (hub: dismissed / no active announcement) still seeds the hook and
-  // skips the mount fetch; only an ABSENT prop (embeds) enables self-fetch.
-  const initialData = useMemo<AnnouncementResponse | undefined>(
-    () => (initialAnnouncement === undefined ? undefined : { announcement: initialAnnouncement }),
-    [initialAnnouncement],
-  );
+  // Initial load: use cached announcement synchronously for instant paint
+  useEffect(() => {
+    const cached = getStoredAnnouncement(getCacheKey());
+    if (cached) {
+      const isDismissed = localStorage.getItem(getDismissKey(cached.id));
+      setAnnouncement(cached);
+      setIsVisible(!isDismissed);
+    }
 
-  const { data } = useSelfFetch<AnnouncementResponse>(url, {
-    initialData,
-    revalidateOnVisibleAfterMs: 60_000,
-  });
-  const announcement = data?.announcement ?? null;
+    // No provider mounted → no URL → no fetch / no polling. Cached
+    // announcement still painted above. Skip scheduling the 5-min
+    // interval entirely to avoid an idle timer + repeated short-circuit
+    // calls.
+    if (!announcementsUrl) return;
 
-  // Expanded (height) state — initial value is a pure function of props so
-  // the SSR HTML and the hydration render agree for every cohort.
-  const [expandedState, setExpandedState] = useState<boolean>(() => initialAnnouncement != null);
-  // Preview always mirrors the draft directly (effects are disabled there).
-  const expanded = previewMode ? announcement != null : expandedState;
+    // Always fetch latest on mount
+    fetchActiveAnnouncement();
 
-  // One-time cleanup of the pre-refactor localStorage announcement cache.
-  useEffect(() => {
-    if (previewMode) return;
-    clearLegacyAnnouncementCache(platform);
+    // Schedule refresh every 5 minutes. When announcementsUrl flips
+    // (e.g. provider value swap), the effect re-runs and restarts the
+    // interval against the new URL — no stale captured fetch.
+    const interval = setInterval(fetchActiveAnnouncement, 300_000);
+    return () => clearInterval(interval);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Visibility reconciliation — runs on the seed and after EVERY completed
-  // fetch (keyed on `data` identity, not announcement id, so a refocus
-  // revalidation that returns the same announcement still re-checks the
-  // dismissal store: this is what keeps a bar dismissed seconds earlier in
-  // another tab from resurrecting). Also the legacy-migration point: an
-  // LS-only dismissal (no cookie — server couldn't see it) collapses once,
-  // animated, and backfills the cookie so the next SSR skips the bar.
-  useEffect(() => {
-    if (previewMode) return;
-    if (!announcement) {
-      setExpandedState(false);
-      return;
-    }
-    if (isAnnouncementDismissed(platform, announcement.id)) {
-      dismissAnnouncement(platform, announcement.id); // idempotent cookie backfill
-      setExpandedState(false);
-    } else {
-      setExpandedState(true);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data]);
+  }, [announcementsUrl]);
 
+  // helpers
   const handleDismiss = () => {
-    if (previewMode || !announcement) return;
-    dismissAnnouncement(platform, announcement.id);
-    setExpandedState(false);
+    if (!announcement) return;
+    localStorage.setItem(getDismissKey(announcement.id), 'true');
+    setIsVisible(false);
   };
 
   const handleCtaClick = () => {
-    if (previewMode || !announcement?.cta_url) return;
-    // Scheme guard: cta_url is admin-entered data — only http(s) (absolute or
-    // relative) may navigate. A `javascript:` value would otherwise execute
-    // via location.href / window.open (stored XSS).
-    let safeUrl: string;
-    try {
-      const parsed = new URL(announcement.cta_url, window.location.origin);
-      if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') return;
-      safeUrl = parsed.href;
-    } catch {
-      return;
-    }
+    if (!announcement?.cta_url) return;
     announcement.cta_target === '_blank'
-      ? window.open(safeUrl, '_blank', 'noopener,noreferrer')
-      : (window.location.href = safeUrl);
+      ? window.open(announcement.cta_url, '_blank', 'noopener,noreferrer')
+      : (window.location.href = announcement.cta_url);
   };
 
-  // Nothing to show (and nothing to animate around): render nothing. The
-  // dismissed/deactivated case keeps the element mounted at 0fr so the
-  // collapse animates.
-  if (!announcement) return null;
-
-  // Contrast is solved with the ODS THEME system, not color literals: the
-  // admin background's tone selects which ODS theme scopes the bar's content
-  // (light-toned background needs dark-on-light = the light theme's values;
-  // dark-toned needs the dark theme's). `.theme-light` / `.theme-dark` are
-  // the design system's own scoping classes (ods-colors.css) and flip every
-  // Tier-1 `--ods-*` primitive for descendants.
-  const themeScope = pickReadableTextColor(announcement.background_color) === 'dark' ? 'theme-light' : 'theme-dark';
-
-  // Inside the scope, colors reference Tier-1 theme primitives directly
-  // (Tier-2 `--color-*` aliases resolve once at :root and do NOT re-resolve
-  // in a nested theme scope — verified). `--ods-system-greys-white` is the
-  // theme's primary-text primitive; `--ods-system-greys-black-hover/-action`
-  // are its quiet hover/active surfaces. Every value comes from the active
-  // ODS theme; nothing is hardcoded.
-  const barButtonClasses =
-    'text-[color:var(--ods-system-greys-white)] hover:bg-[var(--ods-system-greys-black-hover)] active:bg-[var(--ods-system-greys-black-action)]';
+  const renderIcon = () => {
+    if (!announcement) return null;
+    // ONE unified display path (shared with the chat): uploaded image URL wins,
+    // else a library glyph by name (+ props), via <EntityIcon>.
+    return (
+      <EntityIcon
+        icon={{
+          name: announcement.icon_name || 'openframe-logo',
+          url: announcement.icon_url,
+          props: announcement.icon_props,
+        }}
+        size={32}
+        className="relative shrink-0 w-6 h-6 md:w-8 md:h-8"
+      />
+    );
+  };
 
-  const hasCta = Boolean(announcement.cta_enabled && announcement.cta_url);
+  // If no announcement or dismissed => render nothing
+  if (!announcement || !isVisible) return null;
 
   return (
     <div
-      role="region"
-      aria-label="Announcement"
-      aria-hidden={!expanded}
+      className="relative w-full z-50"
+      style={{ backgroundColor: announcement.background_color }}
       data-announcement-bar
-      className={`relative w-full z-50 grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none ${className ?? ''}`}
-      style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}
     >
-      {/*
-        Bar anatomy follows the announcement-bar industry standard: ONE line of
-        text at 13-14px inside a 44px-tall strip (guides converge on 40-60px
-        with a single sentence; two stacked 18px rows blew past that), title +
-        description merged inline (description hidden on small screens), ONE
-        compact CTA on the right, and a ghost-icon dismiss (design-system
-        icon-sm: 32px target, >= the 24px WCAG 2.2 SC 2.5.8 AA floor).
-      */}
-      <div className={`min-h-0 overflow-hidden ${themeScope}`} style={{ backgroundColor: announcement.background_color }}>
-        <div className="flex items-center w-full max-w-full min-h-11 text-[color:var(--ods-system-greys-white)]">
-          {/* Mobile: Clickable content area, Desktop: Regular content */}
-          <div
-            className={`flex flex-row gap-2 md:gap-3 items-center pl-4 md:pl-6 py-1.5 flex-1 min-w-0 ${
-              hasCta ? 'md:cursor-default cursor-pointer' : ''
-            }`}
-            onClick={(e) => {
-              // Only handle click on mobile (< 768px) and if CTA is enabled
-              if (window.innerWidth < 768 && hasCta) {
-                e.preventDefault();
-                handleCtaClick();
-              }
-            }}
-          >
-            {/* ONE unified icon path (shared with the chat): uploaded image URL
-                wins, else a library glyph by name (+ props), via <EntityIcon>. */}
-            <EntityIcon
-              icon={{
-                name: announcement.icon_name || 'openframe-logo',
-                url: announcement.icon_url,
-                props: announcement.icon_props,
-              }}
-              size={24}
-              className="relative shrink-0 w-5 h-5 md:w-6 md:h-6"
-            />
-
-            {/* Single-line message: bold title + regular description inline,
-                truncating as one unit. Separator is a middot (house rule: no
-                en/em dashes in copy). */}
-            <p className="font-body flex-1 min-w-0 max-w-full text-[13px] md:text-sm leading-snug truncate mb-0">
-              <span className="font-semibold">{announcement.title}</span>
-              {announcement.description && (
-                <span className="hidden sm:inline opacity-80"> · {announcement.description}</span>
-              )}
+      <div className="flex items-center w-full max-w-full">
+        {/* Mobile: Clickable content area, Desktop: Regular content */}
+        <div
+          className={`flex flex-row gap-2 md:gap-4 items-center pl-4 md:pl-6 py-1.5 md:py-2 flex-1 min-w-0 ${
+            announcement.cta_enabled && announcement.cta_url ? 'md:cursor-default cursor-pointer' : ''
+          }`}
+          onClick={(e) => {
+            // Only handle click on mobile (< 768px) and if CTA is enabled
+            if (window.innerWidth < 768 && announcement.cta_enabled && announcement.cta_url) {
+              e.preventDefault();
+              handleCtaClick();
+            }
+          }}
+        >
+          {renderIcon()}
+
+          <div className="flex-1 min-w-0 max-w-full">
+            <p className="font-body font-bold text-[14px] md:text-[18px] leading-tight tracking-tight mb-0 text-[#1A1A1A] truncate">
+              {announcement.title}
+            </p>
+            <p className="font-body text-[12px] md:text-[18px] leading-tight hidden md:block text-[#1A1A1A] truncate">
+              {announcement.description}
             </p>
-
-            {/* CTA - the common Button in the bar's quiet treatment: ghost
-                surface, computed-foreground text, translucent fg-tint hover
-                (barButtonClasses) so nothing renders as a dark slab on the
-                admin color. The admin cta_button_* colors are NOT applied:
-                they were designed for the legacy bespoke treatment. Hidden
-                on mobile, where the whole bar is the tap target. */}
-            {hasCta && announcement.cta_text && (
-              <div className="hidden md:flex flex-shrink-0 ml-1">
-                <Button
-                  onClick={handleCtaClick}
-                  variant="transparent"
-                  size="small"
-                  className={barButtonClasses}
-                  tabIndex={expanded ? 0 : -1}
-                  leftIcon={
-                    announcement.cta_show_icon && announcement.cta_icon_name
-                      ? (
-                          <EntityIcon
-                            icon={{ name: announcement.cta_icon_name, props: announcement.cta_icon_props }}
-                            size={14}
-                            className="w-3.5 h-3.5"
-                          />
-                        )
-                      : undefined
-                  }
-                >
-                  {announcement.cta_text}
-                </Button>
-              </div>
-            )}
           </div>
 
-          {/* Dismiss - the common Button in its ghost-icon treatment
-              (size="icon-sm": 32px target, >= the 24px WCAG 2.5.8 AA floor,
-              16px glyph) with the bar's quiet tint hover. Inert in
-              previewMode. */}
-          <div className="flex-shrink-0 mr-1 md:mr-3">
-            <Button
-              onClick={(e) => {
-                e.stopPropagation(); // Prevent triggering the mobile CTA click
-                handleDismiss();
-              }}
-              variant="transparent"
-              size="icon-sm"
-              className={barButtonClasses}
-              aria-label="Dismiss announcement"
-              type="button"
-              tabIndex={expanded ? 0 : -1}
-            >
-              <X strokeWidth={2} />
-            </Button>
-          </div>
+          {/* CTA Button - Hidden on mobile, shown on desktop */}
+          {announcement.cta_enabled && announcement.cta_text && announcement.cta_url && (
+            <div className="hidden md:flex flex-shrink-0 ml-1 md:ml-2">
+              <Button
+                onClick={handleCtaClick}
+                variant="outline"
+                size="small-legacy"
+                leftIcon={
+                  announcement.cta_show_icon && announcement.cta_icon_name
+                    ? (
+                        <EntityIcon
+                          icon={{ name: announcement.cta_icon_name, props: announcement.cta_icon_props }}
+                          size={16}
+                          className="w-3 h-3 md:w-4 md:h-4"
+                        />
+                      )
+                    : undefined
+                }
+                className="transition-opacity hover:opacity-90 text-xs md:text-sm whitespace-nowrap"
+                style={{
+                  backgroundColor: announcement.cta_button_background_color || undefined,
+                  color: announcement.cta_button_text_color || undefined,
+                  borderColor: announcement.cta_button_background_color || undefined,
+                }}
+              >
+                {announcement.cta_text}
+              </Button>
+            </div>
+          )}
         </div>
+
+        {/* Dismiss button - always visible */}
+        <button
+          onClick={(e) => {
+            e.stopPropagation(); // Prevent triggering the mobile CTA click
+            handleDismiss();
+          }}
+          className="flex-shrink-0 w-8 h-8 md:w-10 md:h-10 flex items-center justify-center hover:bg-[#1A1A1A]/10 focus:outline-none focus:ring-2 focus:ring-[#1A1A1A] mr-2 md:mr-4"
+          aria-label="Dismiss announcement"
+          type="button"
+        >
+          <X className="w-4 h-4 text-[#1A1A1A]" strokeWidth={2} />
+        </button>
       </div>
     </div>
   );

package/src/components/ui/button/button.tsx

@@ -29,7 +29,7 @@ const buttonVariants = cva(
       size: {
         default: "py-[var(--spacing-system-sf)] px-[var(--spacing-system-m)] text-h3 md:h-12 h-10",
         small: "p-[var(--spacing-system-xs)] text-h5 h-6 md:h-8",
-        "small-legacy": "py-[var(--spacing-system-xs)] px-[var(--spacing-system-m)] h-10 text-[14px] font-bold", // Temporary alias for "small" — deprecated; grep size="small-legacy" (lib + hub) and migrate the remaining consumers before removal
+        "small-legacy": "py-[var(--spacing-system-xs)] px-[var(--spacing-system-m)] h-10 text-[14px] font-bold", // Temporary alias for "small" to avoid breaking changes in AnnouncementBar's CTA button; will be removed in the future
         icon: "p-[var(--spacing-system-sf)] h-11 w-11 md:h-12 md:w-12 [&_svg]:h-4 [&_svg]:w-4 md:[&_svg]:h-6 md:[&_svg]:w-6",
         // Quiet 32px icon target with a 16px glyph, fixed across breakpoints
         // (Carbon ghost sm / Primer medium / shadcn icon-sm all pin 32px;

package/src/hooks/.api-hooks.md

@@ -5,16 +5,18 @@ This file provides stub React hooks for API data fetching, offering consistent i
 
 - **`useCategories()`** - Hook for fetching and managing category data with loading/error states
 - **`useVendors()`** - Hook for fetching and managing vendor data with loading/error states  
+- **`useAnnouncements()`** - Hook for fetching announcement data with loading state
 - **`useSubcategoryCountByCategory()`** - Hook that returns empty subcategory count data
 
 ## Usage Example
 
 ```typescript
-import { useCategories, useVendors } from './api-hooks';
+import { useCategories, useVendors, useAnnouncements } from './api-hooks';
 
 function MyComponent() {
   const { categories, loading: categoriesLoading, error: categoriesError } = useCategories();
   const { vendors, loading: vendorsLoading, error: vendorsError } = useVendors();
+  const { announcements, loading: announcementsLoading } = useAnnouncements();
 
   if (categoriesLoading || vendorsLoading) {
     return <div>Loading...</div>;
@@ -28,6 +30,7 @@ function MyComponent() {
     <div>
       <h2>Categories: {categories.length}</h2>
       <h2>Vendors: {vendors.length}</h2>
+      <h2>Announcements: {announcements.length}</h2>
     </div>
   );
 }

package/src/hooks/api-hooks.ts

@@ -17,6 +17,13 @@ export function useVendors() {
   return { vendors, loading, error };
 }
 
+export function useAnnouncements() {
+  const [announcements, setAnnouncements] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  return { announcements, loading };
+}
+
 export function useSubcategoryCountByCategory() {
   return { data: {}, loading: false };
 }