@flamingo-stack/openframe-frontend-core 0.0.466 → 0.0.467

package/dist/components/index.js

@@ -4,7 +4,7 @@ import "../chunk-GZ4C3XW6.js";
 import {
   GROUP_PAGE_SIZE,
   RelatedContentSection
-} from "../chunk-KX2TBXKN.js";
+} from "../chunk-BIDOIPIT.js";
 import {
   DeliveryLists,
   DeliveryTable,
@@ -21,7 +21,7 @@ import {
   useLegalDocs,
   usePaginationLoading,
   useRoadmapVoting
-} from "../chunk-RQZOCLTI.js";
+} from "../chunk-ILZ66CS6.js";
 import {
   AnnouncementBarSkeleton,
   ArticleLayoutSkeleton,
@@ -54,17 +54,17 @@ import {
   useDocNavigation,
   useDocumentTree,
   useScrollSpy
-} from "../chunk-FHLJQI4F.js";
+} from "../chunk-ABU37QSG.js";
 import {
   FileDownloadCard,
   GoogleSheetsViewer,
   PdfViewer
-} from "../chunk-7DULN25L.js";
+} from "../chunk-NYOQNYSI.js";
 import {
   FaqAccordion,
   FaqDocumentPage,
   FaqSection
-} from "../chunk-CC73CSLI.js";
+} from "../chunk-3L44PPMF.js";
 import {
   DeliveryRow,
   DevCardRowContent,
@@ -75,11 +75,11 @@ import {
   EmptyState,
   UnifiedPagination,
   init_unified_pagination
-} from "../chunk-GRB7LPJV.js";
+} from "../chunk-4DFPQKKJ.js";
 import {
   ArticleAuthorByline,
   DetailPageSkeleton
-} from "../chunk-WAO34PFO.js";
+} from "../chunk-TZSPLSDU.js";
 import {
   DocSearchBar,
   DocSearchResultRow,
@@ -87,7 +87,7 @@ import {
   mapDocSearchResults,
   resolveSearchResultAction,
   useDocSearch
-} from "../chunk-XJH5ZT5Y.js";
+} from "../chunk-25YYEVSE.js";
 import {
   useSelfFetch
 } from "../chunk-ILUX3DXS.js";
@@ -129,6 +129,7 @@ import {
   AlertDialogTrigger,
   AlertTitle,
   AllowedDomainsInput,
+  AnnouncementBarView,
   AppHeader,
   AppLayout,
   AppLayoutDrawerBody,
@@ -904,7 +905,7 @@ import {
   useVideoOriginPreconnect,
   useVideoWarmup,
   usesCanonicalStatusStyle
-} from "../chunk-IZCOYFCN.js";
+} from "../chunk-CZFPPNYV.js";
 import {
   CommandApprovalToast,
   ToastCard,
@@ -1140,15 +1141,11 @@ import "../chunk-P47NN7RY.js";
 import "../chunk-GGWZFCYS.js";
 
 // src/components/announcement-bar.tsx
-init_button();
-import { useEffect, useMemo, useRef, useState } from "react";
 import { X } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+init_button();
 import { jsx, jsxs } from "react/jsx-runtime";
-function AnnouncementBar({
-  initialAnnouncement,
-  previewMode = false,
-  className
-} = {}) {
+function AnnouncementBar({ initialAnnouncement, previewMode = false, className } = {}) {
   const platform = getAppType();
   const endpoints = useEndpointsRuntime();
   const url = previewMode ? null : endpoints?.announcementsUrl ?? null;
@@ -1205,8 +1202,10 @@ function AnnouncementBar({
   };
   if (!displayAnnouncement) return null;
   const themeScope = pickReadableTextColor(displayAnnouncement.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(displayAnnouncement.cta_enabled && displayAnnouncement.cta_url && displayAnnouncement.cta_text);
+  const barButtonClasses = "text-[color:var(--color-text-primary)] hover:bg-[var(--color-bg-hover)] active:bg-[var(--color-bg-active)]";
+  const hasCta = Boolean(
+    displayAnnouncement.cta_enabled && displayAnnouncement.cta_url && displayAnnouncement.cta_text
+  );
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -1216,81 +1215,107 @@ function AnnouncementBar({
       ...previewMode ? {} : { "data-announcement-bar": true },
       className: `relative w-full grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none ${previewMode ? "" : "z-50"} ${className ?? ""}`,
       style: { gridTemplateRows: expanded ? "1fr" : "0fr" },
-      children: /* @__PURE__ */ jsx("div", { className: `min-h-0 overflow-hidden ${themeScope}`, style: { backgroundColor: displayAnnouncement.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-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 && hasCta) {
-                e.preventDefault();
-                handleCtaClick();
-              }
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                EntityIcon,
-                {
-                  icon: {
-                    name: displayAnnouncement.icon_name || "openframe-logo",
-                    url: displayAnnouncement.icon_url,
-                    props: displayAnnouncement.icon_props
-                  },
-                  size: 24,
-                  className: "relative shrink-0 w-5 h-5 md:w-6 md:h-6"
-                }
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `min-h-0 overflow-hidden ${themeScope}`,
+          style: { backgroundColor: displayAnnouncement.background_color },
+          children: /* @__PURE__ */ jsx(
+            AnnouncementBarView,
+            {
+              className: "text-[color:var(--color-text-primary)]",
+              startAdornment: (
+                /* ONE unified icon path (shared with the chat): uploaded image URL
+                   wins, else a library glyph by name (+ props), via <EntityIcon>. */
+                /* @__PURE__ */ jsx(
+                  EntityIcon,
+                  {
+                    icon: {
+                      name: displayAnnouncement.icon_name || "openframe-logo",
+                      url: displayAnnouncement.icon_url,
+                      props: displayAnnouncement.icon_props
+                    },
+                    size: 24,
+                    className: "relative !size-[var(--icon-size-icon-size)] shrink-0"
+                  }
+                )
               ),
-              /* @__PURE__ */ jsxs("p", { className: "flex-1 min-w-0 max-w-full text-h6 truncate mb-0", children: [
-                /* @__PURE__ */ jsx("span", { className: "font-semibold", children: displayAnnouncement.title }),
-                displayAnnouncement.description && /* @__PURE__ */ jsxs("span", { className: "hidden sm:inline opacity-80", children: [
-                  " \xB7 ",
-                  displayAnnouncement.description
+              title: (
+                /* Single-line message: title + description inline, truncating as
+                   one unit. Type per the ODS mockup (2862-8391): the "h3 body @
+                   500" Figma style maps to the code's `.text-h4` utility (the
+                   `.text-h3` utility is 700; h3/h4 body share the same size
+                   tokens) — the same treatment string titles get from the view.
+                   Description keeps opacity-80 for hierarchy. Separator is a
+                   middot (house rule: no en/em dashes in copy). */
+                /* @__PURE__ */ jsxs("p", { className: "min-w-0 max-w-full text-h4 truncate mb-0", children: [
+                  /* @__PURE__ */ jsx("span", { children: displayAnnouncement.title }),
+                  displayAnnouncement.description && /* @__PURE__ */ jsxs("span", { className: "hidden sm:inline opacity-80", children: [
+                    " \xB7 ",
+                    displayAnnouncement.description
+                  ] })
                 ] })
-              ] }),
-              hasCta && displayAnnouncement.cta_text && /* @__PURE__ */ jsx("div", { className: "hidden md:flex flex-shrink-0 ml-2 md:ml-4", children: /* @__PURE__ */ jsx(
-                Button,
-                {
-                  onClick: handleCtaClick,
-                  variant: "outline",
-                  size: "compact",
-                  className: "transition-opacity hover:opacity-90",
-                  style: {
-                    backgroundColor: displayAnnouncement.cta_button_background_color || ANNOUNCEMENT_CTA_DEFAULTS.background,
-                    color: displayAnnouncement.cta_button_text_color || ANNOUNCEMENT_CTA_DEFAULTS.text,
-                    borderColor: displayAnnouncement.cta_button_background_color || ANNOUNCEMENT_CTA_DEFAULTS.background
-                  },
-                  tabIndex: expanded ? 0 : -1,
-                  leftIcon: displayAnnouncement.cta_show_icon && displayAnnouncement.cta_icon_name ? /* @__PURE__ */ jsx(
-                    EntityIcon,
-                    {
-                      icon: { name: displayAnnouncement.cta_icon_name, props: displayAnnouncement.cta_icon_props },
-                      size: 14,
-                      className: "w-3.5 h-3.5"
-                    }
-                  ) : void 0,
-                  children: displayAnnouncement.cta_text
-                }
-              ) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 ml-1 md:ml-2 mr-2 md:mr-4", children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            onClick: (e) => {
-              e.stopPropagation();
-              handleDismiss();
-            },
-            variant: "transparent",
-            size: "icon-sm",
-            className: barButtonClasses,
-            "aria-label": "Dismiss announcement",
-            type: "button",
-            tabIndex: expanded ? 0 : -1,
-            children: /* @__PURE__ */ jsx(X, { strokeWidth: 2 })
-          }
-        ) })
-      ] }) })
+              ),
+              actionBlock: (
+                /* CTA - the common Button carrying the ADMIN-CONFIGURED colors
+                               (cta_button_background_color / cta_button_text_color are an
+                               admin FEATURE, defaults from ANNOUNCEMENT_CTA_DEFAULTS —
+                               announcement colors are data, not token surfaces). Inline
+                               styles win over the variant's hover classes on every state,
+                               so hover feedback is opacity (the bar's original treatment);
+                               nothing can render dark-on-dark.
+                
+                               Geometry + type come from the design system's size="compact"
+                               (24px caption-scale pill for slim strips — rationale documented
+                               on the variant in button.tsx). */
+                hasCta && displayAnnouncement.cta_text ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: handleCtaClick,
+                    variant: "outline",
+                    size: "compact",
+                    className: "transition-opacity hover:opacity-90",
+                    style: {
+                      backgroundColor: displayAnnouncement.cta_button_background_color || ANNOUNCEMENT_CTA_DEFAULTS.background,
+                      color: displayAnnouncement.cta_button_text_color || ANNOUNCEMENT_CTA_DEFAULTS.text,
+                      borderColor: displayAnnouncement.cta_button_background_color || ANNOUNCEMENT_CTA_DEFAULTS.background
+                    },
+                    tabIndex: expanded ? 0 : -1,
+                    leftIcon: displayAnnouncement.cta_show_icon && displayAnnouncement.cta_icon_name ? /* @__PURE__ */ jsx(
+                      EntityIcon,
+                      {
+                        icon: { name: displayAnnouncement.cta_icon_name, props: displayAnnouncement.cta_icon_props },
+                        size: 14,
+                        className: "w-3.5 h-3.5"
+                      }
+                    ) : void 0,
+                    children: displayAnnouncement.cta_text
+                  }
+                ) : void 0
+              ),
+              endAdornment: (
+                /* 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. */
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: handleDismiss,
+                    variant: "transparent",
+                    size: "icon-sm",
+                    className: barButtonClasses,
+                    "aria-label": "Dismiss announcement",
+                    type: "button",
+                    tabIndex: expanded ? 0 : -1,
+                    children: /* @__PURE__ */ jsx(X, { strokeWidth: 2 })
+                  }
+                )
+              )
+            }
+          )
+        }
+      )
     }
   );
 }
@@ -4599,6 +4624,7 @@ export {
   AllowedDomainsInput,
   AnnouncementBar,
   AnnouncementBarSkeleton,
+  AnnouncementBarView,
   AppHeader,
   AppLayout,
   AppLayoutDrawerRoot as AppLayoutDrawer,