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

package/dist/components/index.js

@@ -4,7 +4,7 @@ import "../chunk-GZ4C3XW6.js";
 import {
   GROUP_PAGE_SIZE,
   RelatedContentSection
-} from "../chunk-NOWXUQWF.js";
+} from "../chunk-3XCNFTFV.js";
 import {
   DeliveryLists,
   DeliveryTable,
@@ -21,7 +21,7 @@ import {
   useLegalDocs,
   usePaginationLoading,
   useRoadmapVoting
-} from "../chunk-YXOWUHGQ.js";
+} from "../chunk-Q2KKEE6W.js";
 import {
   AnnouncementBarSkeleton,
   ArticleLayoutSkeleton,
@@ -54,17 +54,17 @@ import {
   useDocNavigation,
   useDocumentTree,
   useScrollSpy
-} from "../chunk-A636Y7GU.js";
+} from "../chunk-UIAQXIA6.js";
 import {
   FileDownloadCard,
   GoogleSheetsViewer,
   PdfViewer
-} from "../chunk-YORONSXG.js";
+} from "../chunk-UN2BJ7XW.js";
 import {
   FaqAccordion,
   FaqDocumentPage,
   FaqSection
-} from "../chunk-GYC5KXNX.js";
+} from "../chunk-QYTGHN2T.js";
 import {
   DeliveryRow,
   DevCardRowContent,
@@ -75,11 +75,11 @@ import {
   EmptyState,
   UnifiedPagination,
   init_unified_pagination
-} from "../chunk-3I4IZYHM.js";
+} from "../chunk-F3YLM5PO.js";
 import {
   ArticleAuthorByline,
   DetailPageSkeleton
-} from "../chunk-GYFUGMNM.js";
+} from "../chunk-GT7AJXKH.js";
 import {
   DocSearchBar,
   DocSearchResultRow,
@@ -87,8 +87,10 @@ import {
   mapDocSearchResults,
   resolveSearchResultAction,
   useDocSearch
-} from "../chunk-HBO2DMX4.js";
-import "../chunk-MTBFE3JF.js";
+} from "../chunk-5XZEY34X.js";
+import {
+  useSelfFetch
+} from "../chunk-PNJ5LMVK.js";
 import "../chunk-4XLJWX2N.js";
 import {
   ADMIN_APPROVAL_REQUEST_CONTEXT_TYPE,
@@ -722,6 +724,7 @@ import {
   buildNatsWsUrl,
   buildProductReleaseCardProps,
   chatChipClass,
+  clearLegacyAnnouncementCache,
   clickupTaskUrl,
   columnFromTicketStatus,
   computeHistoryPrepend,
@@ -733,6 +736,7 @@ import {
   defaultTableIdForDocumentType,
   deriveColumns,
   detectAspectRatio,
+  dismissAnnouncement,
   escapeMarkdownInline,
   executeNavigation,
   executeNavigationImperative,
@@ -784,6 +788,7 @@ import {
   handleChatNavClick,
   hideOnError,
   init_pagination,
+  isAnnouncementDismissed,
   isApprovalNotification,
   isControlChunk,
   isCrossOriginUrl,
@@ -804,6 +809,7 @@ import {
   parseChunkToAction,
   parseScrollAnchor,
   parseWireCommandOverride,
+  pickReadableTextColor,
   processHistoricalMessages,
   processHistoricalMessagesWithErrors,
   programItemToStripProfile,
@@ -873,7 +879,7 @@ import {
   useVideoOriginPreconnect,
   useVideoWarmup,
   usesCanonicalStatusStyle
-} from "../chunk-TTUQSOBL.js";
+} from "../chunk-ICJRSNBM.js";
 import {
   CommandApprovalToast,
   ToastCard,
@@ -892,7 +898,7 @@ import {
   showToast,
   useOnboardingState,
   useToast
-} from "../chunk-DH6HTYOV.js";
+} from "../chunk-E6YHDT3D.js";
 import "../chunk-OYGFWWLQ.js";
 import {
   useChatRuntime,
@@ -938,7 +944,7 @@ import {
   SplitButton,
   buttonVariants,
   init_button2 as init_button
-} from "../chunk-HGKWTKW7.js";
+} from "../chunk-WJRPMULP.js";
 import "../chunk-6U3IUD57.js";
 import {
   init_next_link,
@@ -1109,176 +1115,145 @@ import "../chunk-GGWZFCYS.js";
 
 // src/components/announcement-bar.tsx
 init_button();
-import { useState, useEffect } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { X } from "lucide-react";
-
-// src/utils/announcement-storage.ts
-function getStoredAnnouncement(key) {
-  if (typeof window !== "undefined") {
-    try {
-      return JSON.parse(localStorage.getItem(key) || "null");
-    } catch {
-      return null;
-    }
-  }
-  return null;
-}
-function setStoredAnnouncement(key, value) {
-  if (typeof window !== "undefined") {
-    try {
-      localStorage.setItem(key, JSON.stringify(value));
-    } catch {
-    }
-  }
-}
-function clearStoredAnnouncement(key = "announcement") {
-  if (typeof window !== "undefined") {
-    try {
-      localStorage.removeItem(key);
-    } catch {
-    }
-  }
-}
-
-// src/components/announcement-bar.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-function AnnouncementBar() {
-  const [announcement, setAnnouncement] = useState(null);
-  const [isVisible, setIsVisible] = useState(false);
+function AnnouncementBar({
+  initialAnnouncement,
+  previewMode = false,
+  className
+} = {}) {
   const platform = getAppType();
   const endpoints = useEndpointsRuntime();
-  const announcementsUrl = endpoints?.announcementsUrl;
-  const getDismissKey = (id) => `${platform}-announcement-${id}-dismissed`;
-  const getCacheKey = () => `${platform}-announcement-cache`;
-  const fetchActiveAnnouncement = async () => {
-    if (!announcementsUrl) return;
-    try {
-      const response = await fetch(announcementsUrl);
-      if (response.ok) {
-        const data = await response.json();
-        if (data.announcement) {
-          setAnnouncement(data.announcement);
-          setStoredAnnouncement(getCacheKey(), data.announcement);
-          const isDismissed = localStorage.getItem(getDismissKey(data.announcement.id));
-          setIsVisible(!isDismissed);
-        } else {
-          setAnnouncement(null);
-          setIsVisible(false);
-          clearStoredAnnouncement(getCacheKey());
-        }
-      } else {
-        console.error(`\u274C [${platform.toUpperCase()}] Error fetching announcement: ${response.status}`);
-        setAnnouncement(null);
-        setIsVisible(false);
-        clearStoredAnnouncement(getCacheKey());
-      }
-    } catch (error) {
-      console.error("Error fetching active announcement:", error);
-      setAnnouncement(null);
-      setIsVisible(false);
-      clearStoredAnnouncement(getCacheKey());
-    }
-  };
+  const url = previewMode ? null : endpoints?.announcementsUrl ?? null;
+  const initialData = useMemo(
+    () => initialAnnouncement === void 0 ? void 0 : { announcement: initialAnnouncement },
+    [initialAnnouncement]
+  );
+  const { data } = useSelfFetch(url, {
+    initialData,
+    revalidateOnVisibleAfterMs: 6e4
+  });
+  const announcement = data?.announcement ?? null;
+  const [expandedState, setExpandedState] = useState(() => initialAnnouncement != null);
+  const expanded = previewMode ? announcement != null : expandedState;
   useEffect(() => {
-    const cached = getStoredAnnouncement(getCacheKey());
-    if (cached) {
-      const isDismissed = localStorage.getItem(getDismissKey(cached.id));
-      setAnnouncement(cached);
-      setIsVisible(!isDismissed);
+    if (previewMode) return;
+    clearLegacyAnnouncementCache(platform);
+  }, []);
+  useEffect(() => {
+    if (previewMode) return;
+    if (!announcement) {
+      setExpandedState(false);
+      return;
+    }
+    if (isAnnouncementDismissed(platform, announcement.id)) {
+      dismissAnnouncement(platform, announcement.id);
+      setExpandedState(false);
+    } else {
+      setExpandedState(true);
     }
-    if (!announcementsUrl) return;
-    fetchActiveAnnouncement();
-    const interval = setInterval(fetchActiveAnnouncement, 3e5);
-    return () => clearInterval(interval);
-  }, [announcementsUrl]);
+  }, [data]);
   const handleDismiss = () => {
-    if (!announcement) return;
-    localStorage.setItem(getDismissKey(announcement.id), "true");
-    setIsVisible(false);
+    if (previewMode || !announcement) return;
+    dismissAnnouncement(platform, announcement.id);
+    setExpandedState(false);
   };
   const handleCtaClick = () => {
-    if (!announcement?.cta_url) return;
-    announcement.cta_target === "_blank" ? window.open(announcement.cta_url, "_blank", "noopener,noreferrer") : window.location.href = announcement.cta_url;
-  };
-  const renderIcon = () => {
-    if (!announcement) return null;
-    return /* @__PURE__ */ jsx(
-      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"
-      }
-    );
+    if (previewMode || !announcement?.cta_url) return;
+    let safeUrl;
+    try {
+      const parsed = new URL(announcement.cta_url, window.location.origin);
+      if (parsed.protocol !== "http:" && parsed.protocol !== "https:") return;
+      safeUrl = parsed.href;
+    } catch {
+      return;
+    }
+    announcement.cta_target === "_blank" ? window.open(safeUrl, "_blank", "noopener,noreferrer") : window.location.href = safeUrl;
   };
-  if (!announcement || !isVisible) return null;
+  if (!announcement) return null;
+  const themeScope = pickReadableTextColor(announcement.background_color) === "dark" ? "theme-light" : "theme-dark";
+  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 hasCta = Boolean(announcement.cta_enabled && announcement.cta_url);
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "relative w-full z-50",
-      style: { backgroundColor: announcement.background_color },
+      role: "region",
+      "aria-label": "Announcement",
+      "aria-hidden": !expanded,
       "data-announcement-bar": true,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full max-w-full", children: [
+      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" },
+      children: /* @__PURE__ */ jsx("div", { className: `min-h-0 overflow-hidden ${themeScope}`, style: { backgroundColor: announcement.background_color }, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full max-w-full min-h-11 text-[color:var(--ods-system-greys-white)]", children: [
         /* @__PURE__ */ jsxs(
           "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" : ""}`,
+            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) => {
-              if (window.innerWidth < 768 && announcement.cta_enabled && announcement.cta_url) {
+              if (window.innerWidth < 768 && hasCta) {
                 e.preventDefault();
                 handleCtaClick();
               }
             },
             children: [
-              renderIcon(),
-              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 max-w-full", children: [
-                /* @__PURE__ */ jsx("p", { className: "font-body font-bold text-[14px] md:text-[18px] leading-tight tracking-tight mb-0 text-[#1A1A1A] truncate", children: announcement.title }),
-                /* @__PURE__ */ jsx("p", { className: "font-body text-[12px] md:text-[18px] leading-tight hidden md:block text-[#1A1A1A] truncate", children: announcement.description })
+              /* @__PURE__ */ jsx(
+                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"
+                }
+              ),
+              /* @__PURE__ */ jsxs("p", { className: "font-body flex-1 min-w-0 max-w-full text-[13px] md:text-sm leading-snug truncate mb-0", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-semibold", children: announcement.title }),
+                announcement.description && /* @__PURE__ */ jsxs("span", { className: "hidden sm:inline opacity-80", children: [
+                  " \xB7 ",
+                  announcement.description
+                ] })
               ] }),
-              announcement.cta_enabled && announcement.cta_text && announcement.cta_url && /* @__PURE__ */ jsx("div", { className: "hidden md:flex flex-shrink-0 ml-1 md:ml-2", children: /* @__PURE__ */ jsx(
+              hasCta && announcement.cta_text && /* @__PURE__ */ jsx("div", { className: "hidden md:flex flex-shrink-0 ml-1", children: /* @__PURE__ */ jsx(
                 Button,
                 {
                   onClick: handleCtaClick,
-                  variant: "outline",
-                  size: "small-legacy",
+                  variant: "transparent",
+                  size: "small",
+                  className: barButtonClasses,
+                  tabIndex: expanded ? 0 : -1,
                   leftIcon: announcement.cta_show_icon && announcement.cta_icon_name ? /* @__PURE__ */ jsx(
                     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"
+                      size: 14,
+                      className: "w-3.5 h-3.5"
                     }
                   ) : void 0,
-                  className: "transition-opacity hover:opacity-90 text-xs md:text-sm whitespace-nowrap",
-                  style: {
-                    backgroundColor: announcement.cta_button_background_color || void 0,
-                    color: announcement.cta_button_text_color || void 0,
-                    borderColor: announcement.cta_button_background_color || void 0
-                  },
                   children: announcement.cta_text
                 }
               ) })
             ]
           }
         ),
-        /* @__PURE__ */ jsx(
-          "button",
+        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mr-1 md:mr-3", children: /* @__PURE__ */ jsx(
+          Button,
           {
             onClick: (e) => {
               e.stopPropagation();
               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",
+            variant: "transparent",
+            size: "icon-sm",
+            className: barButtonClasses,
             "aria-label": "Dismiss announcement",
             type: "button",
-            children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 text-[#1A1A1A]", strokeWidth: 2 })
+            tabIndex: expanded ? 0 : -1,
+            children: /* @__PURE__ */ jsx(X, { strokeWidth: 2 })
           }
-        )
-      ] })
+        ) })
+      ] }) })
     }
   );
 }