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

package/src/components/announcement-bar.tsx

@@ -1,20 +1,21 @@
-"use client";
+'use client';
 
-import { useEffect, useMemo, useRef, useState } from 'react';
 import { X } from 'lucide-react';
-import { Button } from './ui/button';
-import { EntityIcon } from './icon-display';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEndpointsRuntime } from '../contexts/endpoints-runtime-context';
+import { useSelfFetch } from '../hooks/use-self-fetch';
+import type { Announcement, AnnouncementBarProps, AnnouncementResponse } from '../types/announcement';
+import { ANNOUNCEMENT_CTA_DEFAULTS } from '../types/announcement';
 import {
+  clearLegacyAnnouncementCache,
   dismissAnnouncement,
   isAnnouncementDismissed,
-  clearLegacyAnnouncementCache,
 } from '../utils/announcement-storage';
-import { ANNOUNCEMENT_CTA_DEFAULTS } from '../types/announcement';
-import type { Announcement, AnnouncementBarProps, AnnouncementResponse } 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';
+import { EntityIcon } from './icon-display';
+import { AnnouncementBarView } from './ui/announcement-bar-view';
+import { Button } from './ui/button';
 
 /**
  * Platform announcement bar — DUAL MODE, works with or without SSR.
@@ -41,11 +42,7 @@ import { pickReadableTextColor } from '../utils/color-analysis';
  * storage reads happen ONLY in effects (a render-time read would desync
  * hydration in SSR mode).
  */
-export function AnnouncementBar({
-  initialAnnouncement,
-  previewMode = false,
-  className,
-}: AnnouncementBarProps = {}) {
+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
@@ -55,7 +52,7 @@ export function AnnouncementBar({
 
   // Optional endpoint runtime: no provider → no URL → fetching disabled.
   const endpoints = useEndpointsRuntime();
-  const url = previewMode ? null : endpoints?.announcementsUrl ?? null;
+  const url = previewMode ? null : (endpoints?.announcementsUrl ?? null);
 
   // MUST be memoized (the hook re-syncs on [initialData] identity — an inline
   // literal per render would setData-loop) and strict-undefined-mapped:
@@ -157,18 +154,20 @@ export function AnnouncementBar({
   // 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(displayAnnouncement.background_color) === 'dark' ? 'theme-light' : 'theme-dark';
+  const themeScope =
+    pickReadableTextColor(displayAnnouncement.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.
+  // Inside the scope, colors reference Tier-2 semantic aliases. Aliases
+  // declared only at :root would NOT re-resolve in a nested theme scope
+  // (they compute at :root), so ods-colors.css re-anchors these three inside
+  // `.theme-light` / `.theme-dark` specifically for theme islands like this
+  // bar. 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)]';
+    '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);
+  const hasCta = Boolean(
+    displayAnnouncement.cta_enabled && displayAnnouncement.cta_url && displayAnnouncement.cta_text,
+  );
 
   return (
     <div
@@ -184,32 +183,23 @@ export function AnnouncementBar({
       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).
+        Markup is the shared pure view (AnnouncementBarView, Figma
+        9364-40603 / 9418-43969 / 9418-44006): one row from `md` (800px) up,
+        stacked below it with the CTA stretched full-width next to the
+        content-width dismiss. The CTA Button is now rendered on EVERY
+        breakpoint (it replaced the old whole-bar mobile tap target, which
+        also retires the 768px window.innerWidth check that disagreed with
+        the md:800px breakpoint).
       */}
-      <div className={`min-h-0 overflow-hidden ${themeScope}`} style={{ backgroundColor: displayAnnouncement.background_color }}>
-        <div className="flex items-center w-full max-w-full min-h-11 text-[color:var(--ods-system-greys-white)]">
-          {/* Mobile: whole-bar tap target (touch-first by design; the CTA
-              Button below is the keyboard/AT path and is CSS-hidden < md —
-              known tradeoff carried from the original bar). */}
-          <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>. */}
+      <div
+        className={`min-h-0 overflow-hidden ${themeScope}`}
+        style={{ backgroundColor: displayAnnouncement.background_color }}
+      >
+        <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>. */
             <EntityIcon
               icon={{
                 name: displayAnnouncement.icon_name || 'openframe-logo',
@@ -217,72 +207,74 @@ export function AnnouncementBar({
                 props: displayAnnouncement.icon_props,
               }}
               size={24}
-              className="relative shrink-0 w-5 h-5 md:w-6 md:h-6"
+              // `!` is required: logo glyphs (LogoOpenframeIcon / sizedLogo in
+              // icon-library) drive their size via an inline style, which beats
+              // a plain class — author !important beats the inline style, so
+              // the responsive token (16px < md, 24px from md) wins everywhere.
+              className="relative !size-[var(--icon-size-icon-size)] shrink-0"
             />
-
-            {/* 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="flex-1 min-w-0 max-w-full text-h6 truncate mb-0">
-              <span className="font-semibold">{displayAnnouncement.title}</span>
+          }
+          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). */
+            <p className="min-w-0 max-w-full text-h4 truncate mb-0">
+              <span>{displayAnnouncement.title}</span>
               {displayAnnouncement.description && (
                 <span className="hidden sm:inline opacity-80"> · {displayAnnouncement.description}</span>
               )}
             </p>
+          }
+          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.
 
-            {/* 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. Hidden on mobile, where the
-                whole bar is the tap target.
-
-                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 && (
-              <div className="hidden md:flex flex-shrink-0 ml-2 md:ml-4">
-                <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
-                      ? (
-                          <EntityIcon
-                            icon={{ name: displayAnnouncement.cta_icon_name, props: displayAnnouncement.cta_icon_props }}
-                            size={14}
-                            className="w-3.5 h-3.5"
-                          />
-                        )
-                      : undefined
-                  }
-                >
-                  {displayAnnouncement.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 ml-1 md:ml-2 mr-2 md:mr-4">
+               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 ? (
+              <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 ? (
+                    <EntityIcon
+                      icon={{ name: displayAnnouncement.cta_icon_name, props: displayAnnouncement.cta_icon_props }}
+                      size={14}
+                      className="w-3.5 h-3.5"
+                    />
+                  ) : undefined
+                }
+              >
+                {displayAnnouncement.cta_text}
+              </Button>
+            ) : undefined
+          }
+          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. */
             <Button
-              onClick={(e) => {
-                e.stopPropagation(); // Prevent triggering the mobile CTA click
-                handleDismiss();
-              }}
+              onClick={handleDismiss}
               variant="transparent"
               size="icon-sm"
               className={barButtonClasses}
@@ -292,8 +284,8 @@ export function AnnouncementBar({
             >
               <X strokeWidth={2} />
             </Button>
-          </div>
-        </div>
+          }
+        />
       </div>
     </div>
   );

package/src/components/ui/announcement-bar-view.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import { cn } from '../../utils/cn';
+
+export interface AnnouncementBarViewProps {
+  /**
+   * Leading slot — typically an icon. Rendered before the title. Per the
+   * mockup icons are 16px below `md` and 24px from `md` up — size them with
+   * the responsive token: `size-[var(--icon-size-icon-size)]`.
+   */
+  startAdornment?: ReactNode;
+  /**
+   * Bar message. A plain string gets the mockup's text treatment (`text-h4`,
+   * single line from `md` up, wrapping below); pass a ReactElement to fully
+   * own the markup/typography (e.g. bold title + inline description).
+   */
+  title?: string | ReactElement;
+  /**
+   * Primary CTA. From `md` up it sits at content width in one trailing
+   * container with `endAdornment`; below `md` it drops to its own
+   * full-width second row (Figma ODS 2862-8391). Omit it entirely to
+   * collapse that row — the bar height then follows the remaining content.
+   */
+  actionBlock?: ReactElement;
+  /**
+   * Trailing slot (e.g. a dismiss button). Always keeps its content width:
+   * inline after the title below `md` (and on every breakpoint when there is
+   * no `actionBlock`), after the action from `md` up. NOTE: with an
+   * `actionBlock` present the element is mounted twice (one copy per
+   * breakpoint, the inactive one `display:none`) — keep it stateless.
+   */
+  endAdornment?: ReactElement;
+  /** Surface styling (background, text color, theme scope) is the consumer's — pass it here. */
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * Pure presentational announcement/notification bar (Figma 9364-40603 desktop,
+ * 9418-43969 tablet, ODS 2862-8391 mobile). No data fetching, storage, or
+ * navigation — consumers own state and pass content through slots.
+ *
+ * Layout: `md` (800px) and up is a single row — `startAdornment` + title
+ * (flex-1, truncating) + trailing container (`actionBlock` + `endAdornment`)
+ * at content width. Below `md`: `startAdornment` + wrapping title +
+ * `endAdornment` share the first row (top-aligned so a two-line title keeps
+ * the adornments on line one, each centered in a line-height box), and the
+ * action alone stretches across its own second row. No action → no second
+ * row; the bar height follows the content. Spacing/typography use responsive
+ * ODS tokens, so paddings and font sizes track the breakpoint automatically.
+ */
+export function AnnouncementBarView({
+  startAdornment,
+  title,
+  actionBlock,
+  endAdornment,
+  className,
+  style,
+}: AnnouncementBarViewProps) {
+  // Below `md` adornments center inside a box matching the title's first
+  // text line (20px), so `items-start` keeps them on line one of a wrapped
+  // title without hugging the row's top edge. From `md` up the row is
+  // single-line and center-aligned, so the boxes dissolve (`h-auto`).
+  const adornmentBox = 'flex h-5 shrink-0 items-center md:h-auto';
+
+  return (
+    <div
+      className={cn(
+        'flex w-full flex-col gap-[var(--spacing-system-s)] px-[var(--spacing-system-l)] py-[var(--spacing-system-sf)] md:flex-row md:items-center',
+        className,
+      )}
+      style={style}
+    >
+      <div className="flex min-w-0 flex-1 items-start gap-[var(--spacing-system-s)] md:items-center">
+        {startAdornment && <div className={adornmentBox}>{startAdornment}</div>}
+        {typeof title === 'string' ? (
+          <p className="min-w-0 flex-1 break-words text-h4 md:truncate">{title}</p>
+        ) : (
+          title != null && <div className="min-w-0 flex-1">{title}</div>
+        )}
+        {/* Mobile home of the trailing adornment — and its only home when
+            there is no action row to share from `md` up. */}
+        {endAdornment && <div className={cn(adornmentBox, actionBlock && 'md:hidden')}>{endAdornment}</div>}
+      </div>
+      {actionBlock && (
+        <div className="flex w-full shrink-0 items-center gap-[var(--spacing-system-s)] md:w-auto">
+          <div className="flex min-w-0 flex-1 md:flex-none [&>*]:w-full md:[&>*]:w-auto">{actionBlock}</div>
+          {endAdornment && <div className="hidden shrink-0 md:flex">{endAdornment}</div>}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/index.ts

@@ -2,6 +2,7 @@
 
 // UI Components exports
 export * from './allowed-domains-input'
+export * from './announcement-bar-view'
 export * from './autocomplete'
 export * from './button'
 export * from './card'

package/src/styles/ods-colors.css

@@ -336,6 +336,22 @@
   --ods-accent: var(--ods-open-yellow-base);
 }
 
+/* Tier-2 re-anchor for NESTED theme scopes. Tier-2 aliases declared at
+ * `:root` compute there (custom properties substitute var() where the
+ * property is declared), so descendants of a nested `.theme-light` /
+ * `.theme-dark` island inherit the ROOT-theme value — the island's Tier-1
+ * flips never reach them. Re-declaring an alias inside the scope classes
+ * recomputes it against the scoped Tier-1 primitives, letting components
+ * inside theme islands (e.g. AnnouncementBar) use semantic tokens instead
+ * of reaching for Tier-1 directly. Values are identical to the `:root`
+ * declarations above — keep them in sync. */
+.theme-dark,
+.theme-light {
+  --color-text-primary: var(--ods-system-greys-white);
+  --color-bg-hover: var(--ods-system-greys-black-hover);
+  --color-bg-active: var(--ods-system-greys-black-action);
+}
+
 /* Alpha-based semantic tokens that need a light-theme tweak (the only
  * Tier-2 values not derived from a flipping primitive). */
 :root[data-theme="light"],