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

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

@@ -1,9 +1,8 @@
 'use client';
 
 /**
- * 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).
+ * CaseStudyCard (pure presentation). Two densities — `default` (vertical
+ * detail) and `sm` (compact horizontal for chat-inline).
  *
  * The card writes NO click logic — callers wrap with their own anchor
  * and pass the resolved detail URL via `href`.
@@ -13,15 +12,9 @@
  *   `useOgPlaceholderUrl(...)`) → `bg-ods-bg`.
  */
 
-import { useState } from 'react';
 import Image from '../../../embed-shims/next-image';
-import Link from '../../../embed-shims/next-link';
-import type { CaseStudyCardData } from '../../../types/case-study';
+import type { CaseStudy } 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,
@@ -43,7 +36,7 @@ import { useEntityCardLink } from './use-entity-card-link';
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder';
 
 export interface CaseStudyCardProps {
-  study: CaseStudyCardData;
+  study: CaseStudy;
   /** Detail URL resolved by the caller. */
   href: string;
   /** When `_blank`, opens in a new tab. Set by chat dispatch via
@@ -53,14 +46,7 @@ export interface CaseStudyCardProps {
   targetPlatform?: string | null;
   /** OG placeholder URL, used when `study.featured_image` is missing. */
   placeholderUrl?: string | null;
-  /** `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;
+  size?: 'default' | 'sm' | 'portrait';
   /** Portrait density: render the content-type chip. Mixed rails only; single-type rails pass false. Default true. */
   showTypeBadge?: boolean;
   className?: string;
@@ -106,22 +92,6 @@ 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,
@@ -131,11 +101,8 @@ export function CaseStudyCard({
   placeholderUrl: placeholderUrlProp,
   size = 'default',
   showTypeBadge = true,
-  mediaMounted,
-  onNavigate,
   className,
 }: CaseStudyCardProps) {
-  const [hovered, setHovered] = useState(false);
   const { target, rel } = useEntityCardLink({
     href,
     targetPlatform,
@@ -182,83 +149,6 @@ 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/utils/icon-library.tsx

@@ -30,7 +30,6 @@
 
 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';
@@ -53,8 +52,6 @@ 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';
@@ -74,37 +71,8 @@ function sizedLogo(Logo: ComponentType<{ className?: string; style?: CSSProperti
     return <Logo className={className} style={{ width: size, height: size }} />;
   };
 }
-// 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 OpenmspLogoIcon = sizedLogo(OpenmspLogo);
 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:
@@ -170,8 +138,6 @@ 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/footer-waitlist-button.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useCallback } from 'react';
+import { useChatRuntime } from '../contexts/chat-runtime-context';
+import { useRouter } from '../embed-shims/next-navigation';
+import { executeNavigationImperative } from './chat/utils/execute-navigation';
+import { OpenFrameLogo } from './icons';
+import { Button } from './ui/button';
+
+export interface FooterWaitlistButtonProps {
+  className?: string;
+}
+
+/**
+ * Small wrapper around JoinWaitlistButton for use inside the footer.
+ *
+ * Routes through the host's unified-navigation hook
+ * (`runtime.navigation.navigate`) when a `ChatRuntimeContext` is
+ * mounted — that's the same path EVERY other in-app navigation
+ * surface uses (source chips, inline cards, search-autocomplete,
+ * action cards). One rule, one decision tree across the whole app.
+ * The hub's `HubRuntimeProvider` wires `navigate` to its `useUnifiedNav`
+ * helper, so this button picks up cross-platform new-tab decisions,
+ * same-URL re-scroll handling, embed-mode short-circuiting, and any
+ * future host-side nav rules for free.
+ *
+ * Falls back to the embed-shim's `router.push` when no runtime is
+ * mounted (third-party embedders who haven't set up
+ * `ChatRuntimeContext` — the lib stays usable without forcing them
+ * to wire the full chat-runtime).
+ *
+ * Target URL: `/waitlist#top`. `#top` is the canonical "scroll to
+ * page top" anchor — the destination page has an explicit
+ * `<div id="top">` at the top of `<main>` so native browser anchor
+ * scroll works in every browser regardless of the HTML5 magic-anchor
+ * behavior.
+ */
+export function FooterWaitlistButton({ className }: FooterWaitlistButtonProps) {
+  const router = useRouter();
+  const runtime = useChatRuntime();
+
+  const handleClick = useCallback(() => {
+    // The unified nav primitive: host `navigation.navigate` if wired, else the
+    // embed-shim router; new-tab/embed decision handled internally.
+    executeNavigationImperative({ runtime, href: '/waitlist#top', fallbackNavigate: router.push });
+  }, [router, runtime]);
+
+  return (
+    <Button onClick={handleClick} className={className} leftIcon={<OpenFrameLogo />}>
+      Join Waitlist
+    </Button>
+  );
+}

package/src/components/footer.tsx

@@ -0,0 +1,195 @@
+'use client';
+
+import { Suspense } from 'react';
+import type { ReactNode } from 'react';
+import { copyrightLine } from '../utils/copyright-line';
+import { SocialIconRow } from './social-icon-row';
+import { Skeleton } from './ui/skeleton';
+
+interface FooterLink {
+  href: string;
+  label: string;
+}
+
+interface FooterSection {
+  title: string;
+  links: FooterLink[];
+}
+
+interface FooterConfig {
+  name: string;
+  legalName: string;
+  description: string;
+  logo?: ReactNode;
+  sections: FooterSection[];
+  customComponent?: ReactNode; // Inject any custom component here
+  nameElement?: ReactNode; // Custom element for platform name with specific font
+  hideSocialRow?: boolean; // Hide the default social row
+  rightColumnContent?: ReactNode; // Custom content for right column
+  belowDescriptionContent?: ReactNode; // Custom content below description
+  moveDescriptionToRight?: boolean; // Move description and belowDescriptionContent to right column
+  keepBelowDescriptionLeft?: boolean; // Keep belowDescriptionContent on left even when moveDescriptionToRight is true
+  backgroundColor?: string; // ODS background color (e.g., 'bg-ods-card', 'bg-ods-bg')
+  social?: {
+    github?: string;
+    twitter?: string;
+    linkedin?: string;
+    reddit?: string;
+    youtube?: string;
+    instagram?: string;
+    facebook?: string;
+    discord?: string;
+    telegram?: string;
+    whatsapp?: string;
+  };
+}
+
+interface FooterProps {
+  config?: FooterConfig;
+  renderLink?: (link: FooterLink) => ReactNode;
+}
+
+function NavLinkSkeleton() {
+  return <Skeleton className="h-5 w-20 md:h-6 md:w-24" />;
+}
+
+/**
+ * Platform-Aware Footer Component
+ * Accepts configuration from app-config.ts
+ */
+export function Footer({ config, renderLink }: FooterProps) {
+  // Config is required - no hardcoded fallbacks
+  if (!config) {
+    console.warn('Footer: No config provided');
+    return null;
+  }
+
+  return <UniversalFooter config={config} renderLink={renderLink} />;
+}
+
+/**
+ * Universal Footer Component
+ * Renders footer based on provided config
+ */
+function UniversalFooter({
+  config,
+  renderLink,
+}: {
+  config: FooterConfig;
+  renderLink?: (link: FooterLink) => ReactNode;
+}) {
+  const defaultRenderLink = (link: FooterLink) => (
+    <a
+      href={link.href}
+      className="text-md md:text-md font-body font-medium leading-[1.33] text-ods-text-primary transition-colors hover:text-ods-accent"
+    >
+      {link.label}
+    </a>
+  );
+
+  const linkRenderer = renderLink || defaultRenderLink;
+
+  return (
+    <footer
+      className={`flex w-full flex-col items-center justify-center ${config.backgroundColor || 'bg-ods-card'} relative z-[44] min-h-[auto] gap-6 border-t border-ods-border px-6 py-10 md:min-h-[248px] md:gap-6`}
+    >
+      <div className="grid w-full grid-cols-2 items-start gap-6 md:gap-8 lg:grid-cols-4">
+        {/* Column 1: Logo and optionally description */}
+        <div className="col-span-2 flex flex-col items-start gap-4 text-left md:col-span-1 md:gap-6 lg:col-span-1">
+          {/* Logo and name */}
+          <div className="flex items-center gap-2">
+            {config.logo && <Suspense fallback={<Skeleton className="h-8 w-8" />}>{config.logo}</Suspense>}
+            {config.nameElement || (
+              <span className="whitespace-nowrap font-heading text-heading-5 font-bold text-ods-text-primary">
+                {config.name}
+              </span>
+            )}
+          </div>
+
+          {/* Only show description here if NOT moving to right */}
+          {!config.moveDescriptionToRight && (
+            <>
+              <p className="font-body text-sm font-medium leading-[1.43] text-ods-text-primary md:text-sm">
+                {config.description}
+              </p>
+
+              {/* Custom content below description */}
+              {config.belowDescriptionContent && (
+                <Suspense fallback={<Skeleton className="h-8 w-full" />}>{config.belowDescriptionContent}</Suspense>
+              )}
+
+              {/* Conditional social row - show by default unless hideSocialRow is true */}
+              {!config.hideSocialRow && (
+                <SocialIconRow
+                  className="pt-2"
+                  links={
+                    config.social
+                      ? Object.entries(config.social)
+                          .filter(([_, href]) => href)
+                          .map(([platform, href]) => ({ platform, href: href }))
+                      : undefined
+                  }
+                />
+              )}
+            </>
+          )}
+
+          {/* Show belowDescriptionContent on left even when description is moved to right */}
+          {config.moveDescriptionToRight && config.keepBelowDescriptionLeft && config.belowDescriptionContent && (
+            <Suspense fallback={<Skeleton className="h-8 w-full" />}>{config.belowDescriptionContent}</Suspense>
+          )}
+        </div>
+
+        {/* Dynamic sections - 1 column each on all screens */}
+        {config.sections.map((section, index) => (
+          <div key={index} className="col-span-1 flex flex-col items-start gap-3 text-left">
+            <h3 className="tracking-[-0.02em] text-ods-text-muted text-h5">{section.title}</h3>
+            <div className="flex flex-col gap-3">
+              {section.links.map((link, linkIndex) => (
+                <Suspense key={linkIndex} fallback={<NavLinkSkeleton />}>
+                  {linkRenderer(link)}
+                </Suspense>
+              ))}
+            </div>
+          </div>
+        ))}
+
+        {/* Custom component column - full width on mobile and medium, 1 column on large */}
+        {config.customComponent && (
+          <div className="col-span-2 flex flex-col justify-center md:col-span-1 lg:col-span-1">
+            <Suspense fallback={<Skeleton className="h-32 w-full" />}>{config.customComponent}</Suspense>
+          </div>
+        )}
+
+        {/* Right column content - shows if rightColumnContent is provided OR if moving description to right */}
+        {(config.rightColumnContent || config.moveDescriptionToRight) && (
+          <div className="col-span-2 flex flex-col justify-start gap-4 md:col-span-1 md:gap-6 lg:col-span-1">
+            {/* Show description in right column if moveDescriptionToRight is true */}
+            {config.moveDescriptionToRight && (
+              <>
+                <p className="font-body text-sm font-medium leading-[1.43] text-ods-text-primary md:text-sm">
+                  {config.description}
+                </p>
+
+                {/* Custom content below description - only if NOT keeping it on left */}
+                {config.belowDescriptionContent && !config.keepBelowDescriptionLeft && (
+                  <Suspense fallback={<Skeleton className="h-8 w-full" />}>{config.belowDescriptionContent}</Suspense>
+                )}
+              </>
+            )}
+
+            {/* Regular right column content */}
+            {config.rightColumnContent && (
+              <Suspense fallback={<Skeleton className="h-32 w-full" />}>{config.rightColumnContent}</Suspense>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Copyright */}
+      <p className="text-md md:text-md w-full pt-4 text-center font-body font-medium leading-[1.33] text-ods-text-muted md:pt-0">
+        {copyrightLine(config.legalName)}
+      </p>
+    </footer>
+  );
+}

package/src/components/index.ts

@@ -33,8 +33,10 @@ 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 for a page that is still loading: logo, navigation and action placeholders
+ * Header skeleton that matches the ClientOnlyHeader placeholder but with proper animations
  */
 export function HeaderSkeleton() {
   return (

package/src/components/navigation/client-only-header.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { useIsHydrated } from '../../hooks/ui/use-is-hydrated';
+import { Header, type HeaderConfig } from './header';
+import { HeaderSkeleton } from './header-skeleton';
+
+export interface ClientOnlyHeaderProps {
+  config: HeaderConfig;
+  skeleton?: ReactNode;
+}
+
+export function ClientOnlyHeader({ config, skeleton }: ClientOnlyHeaderProps) {
+  const isClient = useIsHydrated();
+
+  if (!isClient) {
+    // Return custom skeleton or default skeleton while client-side JavaScript loads
+    return skeleton || <HeaderSkeleton config={config} />;
+  }
+
+  return <Header config={config} />;
+}

package/src/components/navigation/header-skeleton.tsx

@@ -0,0 +1,74 @@
+import type { HeaderConfig } from '../../types/navigation';
+import { cn } from '../../utils';
+
+export interface HeaderSkeletonProps {
+  config?: HeaderConfig;
+}
+
+/**
+ * Loading skeleton mirroring the unified ODS top-navigation geometry
+ * (`TopNavigation`, Figma 2797-5978): 48px mobile / 56px md+, cell model.
+ * Keep in sync with `header.tsx` — a diverging skeleton makes the
+ * skeleton→live handoff jump.
+ */
+export function HeaderSkeleton({ config }: HeaderSkeletonProps) {
+  const showNavigation = config?.navigation && config.navigation.items.length > 0;
+  const showActions = config?.actions?.right && config.actions.right.length > 0;
+  const showMobileMenu = config?.mobile?.enabled;
+  const showLeftActions = !!config?.actions?.left;
+
+  return (
+    <div className="sticky top-0 z-[50] w-full">
+      <header
+        className={cn(
+          'flex h-[72px] w-full items-center border-b border-t border-ods-border md:border-t-0',
+          config?.backgroundColor || 'bg-ods-card',
+          config?.className,
+        )}
+      >
+        {/* Leading cells: admin toggle / burger */}
+        {showLeftActions && (
+          <div className="flex h-full w-[72px] items-center justify-center border-r border-ods-border">
+            <div className="h-6 w-6 animate-pulse rounded bg-ods-border" />
+          </div>
+        )}
+        {showMobileMenu && (
+          <div className="flex h-full w-[72px] items-center justify-center border-r border-ods-border lg:hidden">
+            <div className="h-6 w-6 animate-pulse rounded bg-ods-border" />
+          </div>
+        )}
+
+        {/* Logo zone */}
+        <div className="flex h-full flex-1 items-center gap-2 p-[var(--spacing-system-m)] md:pl-[var(--spacing-system-l)] lg:flex-none lg:pl-[var(--spacing-system-xxl)]">
+          <div className="h-6 w-6 animate-pulse rounded bg-ods-border" />
+          <div className="h-5 w-24 animate-pulse rounded bg-ods-border" />
+        </div>
+
+        {/* Center: navigation links (desktop only) */}
+        <div className="hidden h-full min-w-0 flex-1 items-center justify-center gap-2 lg:flex">
+          {showNavigation && (
+            <>
+              <div className="h-8 w-20 animate-pulse rounded bg-ods-border" />
+              <div className="h-8 w-28 animate-pulse rounded bg-ods-border" />
+              <div className="h-8 w-24 animate-pulse rounded bg-ods-border" />
+            </>
+          )}
+        </div>
+
+        {/* CTA zone */}
+        {showActions && (
+          <div className="hidden h-full items-center px-[var(--spacing-system-m)] lg:flex">
+            <div className="h-8 w-24 animate-pulse rounded bg-ods-border" />
+          </div>
+        )}
+
+        {/* Mingo cell */}
+        {config?.mingo?.enabled && (
+          <div className="flex h-full items-center border-l border-ods-border px-[var(--spacing-system-l)]">
+            <div className="h-8 w-8 animate-pulse rounded bg-ods-border md:w-28" />
+          </div>
+        )}
+      </header>
+    </div>
+  );
+}