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

package/dist/components/index.js

@@ -4,7 +4,7 @@ import "../chunk-GZ4C3XW6.js";
 import {
   GROUP_PAGE_SIZE,
   RelatedContentSection
-} from "../chunk-3XCNFTFV.js";
+} from "../chunk-NOWXUQWF.js";
 import {
   DeliveryLists,
   DeliveryTable,
@@ -21,7 +21,7 @@ import {
   useLegalDocs,
   usePaginationLoading,
   useRoadmapVoting
-} from "../chunk-Q2KKEE6W.js";
+} from "../chunk-YXOWUHGQ.js";
 import {
   AnnouncementBarSkeleton,
   ArticleLayoutSkeleton,
@@ -54,17 +54,17 @@ import {
   useDocNavigation,
   useDocumentTree,
   useScrollSpy
-} from "../chunk-UIAQXIA6.js";
+} from "../chunk-A636Y7GU.js";
 import {
   FileDownloadCard,
   GoogleSheetsViewer,
   PdfViewer
-} from "../chunk-UN2BJ7XW.js";
+} from "../chunk-YORONSXG.js";
 import {
   FaqAccordion,
   FaqDocumentPage,
   FaqSection
-} from "../chunk-QYTGHN2T.js";
+} from "../chunk-5Z5GXXRU.js";
 import {
   DeliveryRow,
   DevCardRowContent,
@@ -75,11 +75,11 @@ import {
   EmptyState,
   UnifiedPagination,
   init_unified_pagination
-} from "../chunk-F3YLM5PO.js";
+} from "../chunk-3I4IZYHM.js";
 import {
   ArticleAuthorByline,
   DetailPageSkeleton
-} from "../chunk-GT7AJXKH.js";
+} from "../chunk-GYFUGMNM.js";
 import {
   DocSearchBar,
   DocSearchResultRow,
@@ -87,10 +87,8 @@ import {
   mapDocSearchResults,
   resolveSearchResultAction,
   useDocSearch
-} from "../chunk-5XZEY34X.js";
-import {
-  useSelfFetch
-} from "../chunk-PNJ5LMVK.js";
+} from "../chunk-HBO2DMX4.js";
+import "../chunk-MTBFE3JF.js";
 import "../chunk-4XLJWX2N.js";
 import {
   ADMIN_APPROVAL_REQUEST_CONTEXT_TYPE,
@@ -724,7 +722,6 @@ import {
   buildNatsWsUrl,
   buildProductReleaseCardProps,
   chatChipClass,
-  clearLegacyAnnouncementCache,
   clickupTaskUrl,
   columnFromTicketStatus,
   computeHistoryPrepend,
@@ -736,7 +733,6 @@ import {
   defaultTableIdForDocumentType,
   deriveColumns,
   detectAspectRatio,
-  dismissAnnouncement,
   escapeMarkdownInline,
   executeNavigation,
   executeNavigationImperative,
@@ -788,7 +784,6 @@ import {
   handleChatNavClick,
   hideOnError,
   init_pagination,
-  isAnnouncementDismissed,
   isApprovalNotification,
   isControlChunk,
   isCrossOriginUrl,
@@ -809,7 +804,6 @@ import {
   parseChunkToAction,
   parseScrollAnchor,
   parseWireCommandOverride,
-  pickReadableTextColor,
   processHistoricalMessages,
   processHistoricalMessagesWithErrors,
   programItemToStripProfile,
@@ -879,7 +873,7 @@ import {
   useVideoOriginPreconnect,
   useVideoWarmup,
   usesCanonicalStatusStyle
-} from "../chunk-ICJRSNBM.js";
+} from "../chunk-TTUQSOBL.js";
 import {
   CommandApprovalToast,
   ToastCard,
@@ -898,7 +892,7 @@ import {
   showToast,
   useOnboardingState,
   useToast
-} from "../chunk-E6YHDT3D.js";
+} from "../chunk-DH6HTYOV.js";
 import "../chunk-OYGFWWLQ.js";
 import {
   useChatRuntime,
@@ -944,7 +938,7 @@ import {
   SplitButton,
   buttonVariants,
   init_button2 as init_button
-} from "../chunk-WJRPMULP.js";
+} from "../chunk-HGKWTKW7.js";
 import "../chunk-6U3IUD57.js";
 import {
   init_next_link,
@@ -1115,145 +1109,176 @@ import "../chunk-GGWZFCYS.js";
 
 // src/components/announcement-bar.tsx
 init_button();
-import { useEffect, useMemo, useState } from "react";
+import { useState, useEffect } 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({
-  initialAnnouncement,
-  previewMode = false,
-  className
-} = {}) {
+function AnnouncementBar() {
+  const [announcement, setAnnouncement] = useState(null);
+  const [isVisible, setIsVisible] = useState(false);
   const platform = getAppType();
   const endpoints = useEndpointsRuntime();
-  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(() => {
-    if (previewMode) return;
-    clearLegacyAnnouncementCache(platform);
-  }, []);
-  useEffect(() => {
-    if (previewMode) return;
-    if (!announcement) {
-      setExpandedState(false);
-      return;
+  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());
     }
-    if (isAnnouncementDismissed(platform, announcement.id)) {
-      dismissAnnouncement(platform, announcement.id);
-      setExpandedState(false);
-    } else {
-      setExpandedState(true);
+  };
+  useEffect(() => {
+    const cached = getStoredAnnouncement(getCacheKey());
+    if (cached) {
+      const isDismissed = localStorage.getItem(getDismissKey(cached.id));
+      setAnnouncement(cached);
+      setIsVisible(!isDismissed);
     }
-  }, [data]);
+    if (!announcementsUrl) return;
+    fetchActiveAnnouncement();
+    const interval = setInterval(fetchActiveAnnouncement, 3e5);
+    return () => clearInterval(interval);
+  }, [announcementsUrl]);
   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;
-    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?.cta_url) return;
+    announcement.cta_target === "_blank" ? window.open(announcement.cta_url, "_blank", "noopener,noreferrer") : window.location.href = announcement.cta_url;
   };
-  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);
+  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 (!announcement || !isVisible) return null;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      role: "region",
-      "aria-label": "Announcement",
-      "aria-hidden": !expanded,
+      className: "relative w-full z-50",
+      style: { backgroundColor: announcement.background_color },
       "data-announcement-bar": true,
-      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: [
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full max-w-full", children: [
         /* @__PURE__ */ jsxs(
           "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" : ""}`,
+            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) => {
-              if (window.innerWidth < 768 && hasCta) {
+              if (window.innerWidth < 768 && announcement.cta_enabled && announcement.cta_url) {
                 e.preventDefault();
                 handleCtaClick();
               }
             },
             children: [
-              /* @__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
-                ] })
+              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 })
               ] }),
-              hasCta && announcement.cta_text && /* @__PURE__ */ jsx("div", { className: "hidden md:flex flex-shrink-0 ml-1", children: /* @__PURE__ */ jsx(
+              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(
                 Button,
                 {
                   onClick: handleCtaClick,
-                  variant: "transparent",
-                  size: "small",
-                  className: barButtonClasses,
-                  tabIndex: expanded ? 0 : -1,
+                  variant: "outline",
+                  size: "small-legacy",
                   leftIcon: announcement.cta_show_icon && announcement.cta_icon_name ? /* @__PURE__ */ jsx(
                     EntityIcon,
                     {
                       icon: { name: announcement.cta_icon_name, props: announcement.cta_icon_props },
-                      size: 14,
-                      className: "w-3.5 h-3.5"
+                      size: 16,
+                      className: "w-3 h-3 md:w-4 md:h-4"
                     }
                   ) : 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("div", { className: "flex-shrink-0 mr-1 md:mr-3", children: /* @__PURE__ */ jsx(
-          Button,
+        /* @__PURE__ */ jsx(
+          "button",
           {
             onClick: (e) => {
               e.stopPropagation();
               handleDismiss();
             },
-            variant: "transparent",
-            size: "icon-sm",
-            className: barButtonClasses,
+            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",
-            tabIndex: expanded ? 0 : -1,
-            children: /* @__PURE__ */ jsx(X, { strokeWidth: 2 })
+            children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 text-[#1A1A1A]", strokeWidth: 2 })
           }
-        ) })
-      ] }) })
+        )
+      ] })
     }
   );
 }