@flamingo-stack/openframe-frontend-core 0.0.705 → 0.0.706-snapshot.20261006190707

package/src/components/chat/entity-cards/case-study-card.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 /**
- * CaseStudyCard (pure presentation). Two densities — `default` (vertical
- * detail) and `sm` (compact horizontal for chat-inline).
+ * CaseStudyCard (pure presentation). Four densities — `default` (vertical
+ * detail), `sm` (compact horizontal for chat-inline), `portrait` (rails and
+ * strips) and `menu` (the site menu's card, hover-plays the highlight cut).
  *
  * The card writes NO click logic — callers wrap with their own anchor
  * and pass the resolved detail URL via `href`.
@@ -12,9 +13,15 @@
  *   `useOgPlaceholderUrl(...)`) → `bg-ods-bg`.
  */
 
+import { useState } from 'react';
 import Image from '../../../embed-shims/next-image';
-import type { CaseStudy } from '../../../types/case-study';
+import Link from '../../../embed-shims/next-link';
+import type { CaseStudyCardData } from '../../../types/case-study';
 import { cn } from '../../../utils/cn';
+import { sortBitesByFeaturedAtDesc } from '../../features/video-bites-shared';
+import { CardHoverPlay } from '../../features/video-center-badge';
+import { VideoHoverPreviewSurface } from '../../features/video-hover-preview';
+import { EntityIcon } from '../../icon-display';
 import { Card } from '../../ui/card';
 import {
   COMPACT_CARD_IMAGE_SLOT,
@@ -36,7 +43,7 @@ import { useEntityCardLink } from './use-entity-card-link';
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder';
 
 export interface CaseStudyCardProps {
-  study: CaseStudy;
+  study: CaseStudyCardData;
   /** Detail URL resolved by the caller. */
   href: string;
   /** When `_blank`, opens in a new tab. Set by chat dispatch via
@@ -46,7 +53,14 @@ export interface CaseStudyCardProps {
   targetPlatform?: string | null;
   /** OG placeholder URL, used when `study.featured_image` is missing. */
   placeholderUrl?: string | null;
-  size?: 'default' | 'sm' | 'portrait';
+  /** `menu` is the site menu's card: the story's video plays muted on hover or
+   *  focus (the video bites' hover grammar), then who it is about and who tells it. */
+  size?: 'default' | 'sm' | 'portrait' | 'menu';
+  /** `menu`: mount the hover player (the host passes whether its panel is open,
+   *  so a closed menu holds no player). Omitted: the card's own viewport gate. */
+  mediaMounted?: boolean;
+  /** `menu`: runs on click, before the navigation (the host closes its panel). */
+  onNavigate?: () => void;
   /** Portrait density: render the content-type chip. Mixed rails only; single-type rails pass false. Default true. */
   showTypeBadge?: boolean;
   className?: string;
@@ -92,6 +106,22 @@ export function CaseStudyCardSkeleton({ size = 'default' }: { size?: 'default' |
   );
 }
 
+/**
+ * A story's HIGHLIGHT cut, the short video a card previews: its highlight
+ * video, else the bite an admin featured (the newest when several are; featuring
+ * is independent of the bite's own `published` flag, as on every featured surface). Never
+ * the full video: that plays on the story's own page. Null when it has neither.
+ */
+function caseStudyHighlight(study: CaseStudyCardData): { url: string; posterUrl: string | null } | null {
+  if (study.highlight_video_url) {
+    return { url: study.highlight_video_url, posterUrl: study.highlight_video_thumbnail ?? null };
+  }
+  const bite = (study.video_bites ?? [])
+    .filter(candidate => candidate.featured === true && candidate.url)
+    .sort(sortBitesByFeaturedAtDesc)[0];
+  return bite ? { url: bite.url, posterUrl: bite.thumbnail_url ?? null } : null;
+}
+
 export function CaseStudyCard({
   study,
   href,
@@ -101,8 +131,11 @@ export function CaseStudyCard({
   placeholderUrl: placeholderUrlProp,
   size = 'default',
   showTypeBadge = true,
+  mediaMounted,
+  onNavigate,
   className,
 }: CaseStudyCardProps) {
+  const [hovered, setHovered] = useState(false);
   const { target, rel } = useEntityCardLink({
     href,
     targetPlatform,
@@ -149,6 +182,83 @@ export function CaseStudyCard({
     );
   }
 
+  if (size === 'menu') {
+    const preview = caseStudyHighlight(study);
+    const videoUrl = preview?.url ?? null;
+    const hasAnyVideo = !!(videoUrl || study.main_video_url);
+    // The cover is the FULL video's poster (wide, like the card); the highlight
+    // cut's own frame is usually upright and would not fill a 16:9 slot.
+    const poster = study.main_video_thumbnail || study.featured_image || preview?.posterUrl || null;
+    return (
+      <Link
+        href={href}
+        target={target}
+        rel={rel}
+        onClick={onNavigate}
+        onPointerEnter={() => setHovered(true)}
+        onPointerLeave={() => setHovered(false)}
+        onFocus={() => setHovered(true)}
+        onBlur={() => setHovered(false)}
+        className={cn(
+          // `group/card` is what the shared play glyph accents on.
+          'group/card group flex min-w-0 flex-col gap-[var(--spacing-system-sf)] rounded-xl border border-ods-border bg-ods-bg p-[var(--spacing-system-mf)] text-ods-text-primary transition-colors hover:bg-ods-bg-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent',
+          className,
+        )}
+      >
+        {/* The media never takes the click: the whole card is the link. */}
+        <span className="pointer-events-none relative block aspect-video w-full shrink-0 overflow-hidden rounded-md bg-ods-bg">
+          {videoUrl ? (
+            // The shared hover surface, filled the way the walkthrough card fills
+            // its own 16:9 slot (`cover`): an upright cut is cropped to the slot,
+            // never letterboxed. Sound on hover, muted when the browser blocks it.
+            <VideoHoverPreviewSurface
+              url={videoUrl}
+              posterUrl={poster}
+              active={hovered}
+              playerMounted={mediaMounted}
+              fit="cover"
+              posterSizes="360px"
+            />
+          ) : (
+            <>
+              {(poster ?? placeholderUrl) && (
+                <Image
+                  src={poster ?? placeholderUrl ?? ''}
+                  alt=""
+                  className="object-cover"
+                  fill
+                  sizes="360px"
+                  unoptimized
+                  onError={hideOnError}
+                />
+              )}
+              {hasAnyVideo && <CardHoverPlay size="md" />}
+            </>
+          )}
+        </span>
+        {study.msp?.name && (
+          <span className="flex items-center gap-[var(--spacing-system-xsf)] text-ods-text-secondary text-h6">
+            {study.msp.icon_url && (
+              <EntityIcon
+                icon={{ url: study.msp.icon_url }}
+                size={20}
+                className="size-5 shrink-0 rounded object-contain"
+              />
+            )}
+            <span className="min-w-0 truncate">{study.msp.name}</span>
+          </span>
+        )}
+        <span className="line-clamp-2 text-h6">{study.title}</span>
+        {study.user?.full_name && (
+          <span className="truncate text-ods-text-muted text-h6">
+            {study.user.job_title ? `${study.user.full_name}, ${study.user.job_title}` : study.user.full_name}
+          </span>
+        )}
+        <span className="mt-auto text-ods-accent text-h6">{hasAnyVideo ? 'Watch the story' : 'Read the story'}</span>
+      </Link>
+    );
+  }
+
   if (size === 'portrait') {
     // Rail/strip density — shared <EntityPortraitCard> shell.
     return (

package/src/components/chat/index.ts

@@ -61,7 +61,13 @@ export { remarkCardLinks } from './remark-card-links';
 export { remarkMentionChips } from './remark-mention-chips';
 
 // Card-supporting UI migrated from hub `components/shared/*` + `components/blog/*`
-export { NavLinkAnchorViaRuntime, type NavLinkAnchorViaRuntimeProps } from './nav-link-anchor-via-runtime';
+export {
+  NavLinkAnchorViaRuntime,
+  type NavLinkAnchorViaRuntimeProps,
+  type NavLinkViaRuntimeInput,
+  type NavLinkViaRuntimeProps,
+  useNavLinkViaRuntime,
+} from './nav-link-anchor-via-runtime';
 export { SourceActionButton, type SourceActionButtonProps, type SourceActionDensity } from './source-action-button';
 export {
   ChatAttachmentAddButton,

package/src/components/chat/nav-link-anchor-via-runtime.tsx

@@ -18,11 +18,14 @@
  * the lib should never silently fall back when the runtime is missing
  * (the chat tree always provides one in both host + embed modes).
  *
- * For surfaces OUTSIDE the chat tree (header chrome, marketing pages, …)
- * the hub keeps its own `useNavLink`-based anchor.
+ * The same component serves a host's own chrome and pages (site header,
+ * footer, call-to-action links): the host mounts the runtime app-wide, names
+ * the destination's platform in `targetPlatform`, and may pass its own
+ * `onClick` (it runs first; `preventDefault()` cancels the navigation) and
+ * plain anchor attributes (`aria-*`, `title`, `data-*`, `style`, `rel`).
  */
 
-import type { ReactNode, MouseEvent } from 'react';
+import type { AnchorHTMLAttributes, ReactNode, MouseEvent } from 'react';
 import { useRequiredChatRuntime } from '../../contexts/chat-runtime-context';
 import { useRouter } from '../../embed-shims/next-navigation';
 import { useChatPanel } from './chat-panel-context';
@@ -30,7 +33,10 @@ import { resolveHrefForRuntime } from './utils/chat-nav-resolution';
 import { executeNavigation } from './utils/execute-navigation';
 import { computeIsNewTab, newTabAnchorAttrs } from './utils/nav-anchor-props';
 
-export interface NavLinkAnchorViaRuntimeProps {
+export interface NavLinkAnchorViaRuntimeProps extends Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  'href' | 'target' | 'onClick' | 'className' | 'children'
+> {
   href: string;
   path?: string | null;
   targetPlatform?: string | null;
@@ -38,15 +44,41 @@ export interface NavLinkAnchorViaRuntimeProps {
   /** Optional — matches `NavLinkAnchorComponent`'s contract so the
    *  markdown-anchor slot can render an empty anchor (rare but legal). */
   children?: ReactNode;
+  /** Runs before the navigation; `preventDefault()` cancels it. */
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
 }
 
-export function NavLinkAnchorViaRuntime({
+export interface NavLinkViaRuntimeInput {
+  href: string;
+  path?: string | null;
+  /** The platform that owns `href`, by name. */
+  targetPlatform?: string | null;
+  /** Runs before the navigation; `preventDefault()` cancels it. */
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+}
+
+export interface NavLinkViaRuntimeProps {
+  href: string;
+  target?: '_blank';
+  rel?: 'noopener' | 'noopener noreferrer';
+  onClick: (event: MouseEvent<HTMLAnchorElement>) => void;
+}
+
+/**
+ * The anchor props of {@link NavLinkAnchorViaRuntime}, for an element that is
+ * not a bare `<a>` (a `Button`'s `linkProps`). ONE decision and ONE click
+ * handler for both forms.
+ *
+ * A new-tab link to a NAMED platform is one of our own sites and keeps the
+ * Referer (`noopener` alone: the cross-domain analytics attribute the visit by
+ * it); any other new-tab link also gets `noreferrer`.
+ */
+export function useNavLinkViaRuntime({
   href,
   path,
   targetPlatform,
-  className,
-  children,
-}: NavLinkAnchorViaRuntimeProps) {
+  onClick: onClickProp,
+}: NavLinkViaRuntimeInput): NavLinkViaRuntimeProps {
   const runtime = useRequiredChatRuntime();
   const router = useRouter();
   const panel = useChatPanel();
@@ -54,6 +86,8 @@ export function NavLinkAnchorViaRuntime({
   const isNewTab = computeIsNewTab(runtime, resolvedHref, targetPlatform ?? null);
 
   const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    onClickProp?.(e);
+    if (e.defaultPrevented) return;
     const handled = executeNavigation({
       event: e,
       runtime,
@@ -64,8 +98,27 @@ export function NavLinkAnchorViaRuntime({
     });
     if (handled && !isNewTab && panel?.closeChat) panel.closeChat();
   };
+  const attrs = newTabAnchorAttrs(isNewTab);
+  return {
+    href: resolvedHref,
+    ...attrs,
+    ...(isNewTab && targetPlatform && { rel: 'noopener' as const }),
+    onClick,
+  };
+}
+
+export function NavLinkAnchorViaRuntime({
+  href,
+  path,
+  targetPlatform,
+  className,
+  children,
+  onClick,
+  ...anchorAttrs
+}: NavLinkAnchorViaRuntimeProps) {
+  const linkProps = useNavLinkViaRuntime({ href, path, targetPlatform, onClick });
   return (
-    <a href={resolvedHref} {...newTabAnchorAttrs(isNewTab)} onClick={onClick} className={className}>
+    <a {...linkProps} {...anchorAttrs} className={className}>
       {children}
     </a>
   );

package/src/components/chat/utils/icon-library.tsx

@@ -30,6 +30,7 @@
 
 import { Megaphone, Bell, Info, Star, Package as PackageGlyph } from 'lucide-react';
 import type { ComponentType, CSSProperties } from 'react';
+import { platformAccentVarName } from '../../../utils/platform-identity';
 import * as IconsV2 from '../../icons-v2-generated';
 import { HeadphoneIcon } from '../../icons-v2-generated/audio-and-visual/headphone-icon';
 import { VideoRecorderIcon } from '../../icons-v2-generated/audio-and-visual/video-recorder-icon';
@@ -52,6 +53,8 @@ import { GraduationCapIcon } from '../../icons-v2-generated/school/graduation-ca
 import { TicketIcon } from '../../icons-v2-generated/shopping/ticket-icon';
 import { Rocket02Icon } from '../../icons-v2-generated/vehicles-and-delivery/rocket-02-icon';
 import { FlamingoLogo } from '../../icons/flamingo-logo';
+import { MiamiCyberGangLogoFaceOnly } from '../../icons/miami-cyber-gang-logo-face-only';
+import { MlgLogo } from '../../icons/mlg-logo';
 import { OpenFrameLogo } from '../../icons/openframe-logo';
 import { OpenmspLogo } from '../../icons/openmsp-logo';
 import { getIconComponent } from './icon-registry';
@@ -71,8 +74,37 @@ function sizedLogo(Logo: ComponentType<{ className?: string; style?: CSSProperti
     return <Logo className={className} style={{ width: size, height: size }} />;
   };
 }
-const OpenmspLogoIcon = sizedLogo(OpenmspLogo);
+// A sister platform's mark is drawn in THAT platform's brand colour (the
+// platform brand registry), never in the accent of the page showing it: on
+// flamingo.run the OpenMSP mark stays OpenMSP yellow, not flamingo pink.
+const brandColor = (platform: string) => `var(${platformAccentVarName(platform)})`;
+// The OpenMSP mark's own defaults are black and white (made for a light page):
+// on the dark surfaces every glyph sits on, the bubbles take the theme's text
+// and background tokens and the back bubble OpenMSP's brand colour.
+const OpenmspLogoIcon: IconComponent = ({ size = 16, className }) => (
+  <OpenmspLogo
+    className={className}
+    style={{ width: size, height: size }}
+    frontBubbleColor="var(--color-text-primary)"
+    innerFrontBubbleColor="var(--color-bg)"
+    backBubbleColor={brandColor('openmsp')}
+  />
+);
 const FlamingoLogoIcon = sizedLogo(FlamingoLogo);
+// The two community marks size themselves through a `size` prop, the resolver's own contract.
+// Major League GitHub draws its mark in the theme's text colour on its own site
+// (its header, hero and footer), never in an accent: so does every glyph of it.
+const MlgLogoIcon: IconComponent = ({ size = 16, className, color }) => (
+  <MlgLogo size={size} className={className} color={color ?? 'var(--color-text-primary)'} />
+);
+const TmcgLogoIcon: IconComponent = ({ size = 16, className }) => (
+  <MiamiCyberGangLogoFaceOnly
+    size={size}
+    className={className}
+    originalPink={brandColor('tmcg')}
+    originalWhite="var(--color-text-primary)"
+  />
+);
 
 /**
  * `OpenFrameLogo` from `components/icons/` predates the v2 set and:
@@ -138,6 +170,8 @@ export const ICON_ALIASES: Record<string, IconComponent> = {
   // (was the separate `renderSvgIcon` map; now ONE resolver everywhere).
   'openframe-logo': LogoOpenframeIcon,
   'openmsp-logo': OpenmspLogoIcon,
+  'mlg-logo': MlgLogoIcon,
+  'tmcg-logo': TmcgLogoIcon,
   flamingo: FlamingoLogoIcon,
   'flamingo-logo': FlamingoLogoIcon,
   megaphone: Megaphone,

package/src/components/index.ts

@@ -33,10 +33,8 @@ export * from './faq-accordion';
 export * from './faq';
 export * from './related-content';
 export * from './filter-chip';
-export * from './footer';
 export * from './unified-filter-logic';
 export * from './unified-pagination';
-export * from './footer-waitlist-button';
 export * from './hero-image-uploader';
 export * from './icons-block';
 export * from './image-cropper';

package/src/components/loading/page-layout-skeleton.tsx

@@ -33,7 +33,7 @@ export function AnnouncementBarSkeleton() {
 }
 
 /**
- * Header skeleton that matches the ClientOnlyHeader placeholder but with proper animations
+ * Header skeleton for a page that is still loading: logo, navigation and action placeholders
  */
 export function HeaderSkeleton() {
   return (

package/src/components/navigation/index.ts

@@ -1,20 +1,22 @@
 'use client';
 
 // Navigation component exports
-export { Header } from './header';
-export type { HeaderConfig, HeaderProps } from './header';
-
-export { MingoAiButton } from './mingo-ai-button';
+// Site navigation: one data model (`SiteNav`), rendered by the header, its
+// menu panels, the mobile sheet and the footer.
+export { SiteHeader } from './site-header';
+export type { SiteHeaderProps } from './site-header';
+export { NavPanel, isMegaMenu } from './nav-panel';
+export type { NavPanelProps } from './nav-panel';
+export { NavItemRow } from './nav-item-row';
+export type { NavItemRowProps, NavItemRowVariant } from './nav-item-row';
+export { ASK_AI_OPEN_EVENT, MingoAiButton, openAskAi } from './mingo-ai-button';
 export type { MingoAiButtonProps } from './mingo-ai-button';
-
-export { ClientOnlyHeader } from './client-only-header';
-export type { ClientOnlyHeaderProps } from './client-only-header';
-
-export { HeaderSkeleton } from './header-skeleton';
-export type { HeaderSkeletonProps } from './header-skeleton';
-
-export { MobileNavPanel, MOBILE_NAV_PANEL_ID } from './mobile-nav-panel';
-export type { MobileNavPanelProps } from './mobile-nav-panel';
+export { MobileNavSheet, MOBILE_NAV_SHEET_ID, siteNavHasMobileMenus } from './mobile-nav-sheet';
+export type { MobileNavSheetProps } from './mobile-nav-sheet';
+export { SiteFooter } from './site-footer';
+export type { SiteFooterProps } from './site-footer';
+export { defaultRenderSiteNavLink, navLinkLabel } from './site-nav-link';
+export type { SiteNavLinkRenderer } from './site-nav-link';
 
 export { SlidingSidebar } from './sliding-sidebar';
 export type { SlidingSidebarProps } from './sliding-sidebar';
@@ -81,10 +83,15 @@ export type { NavigationNode } from './multi-level-navigation';
 
 // Re-export types from navigation types
 export type {
-  MobileNavConfig,
+  NavFeature,
+  NavGroup,
+  NavLink,
+  NavMenu,
   NavigationItem,
   NavigationSidebarConfig,
   NavigationSidebarItem,
+  SiteNav,
+  SiteNavPrimaryCta,
   SlidingSidebarConfig,
   UnifiedSidebarUser,
 } from '../../types/navigation';