@flamingo-stack/openframe-frontend-core 0.0.503 → 0.0.504

package/src/components/navigation/header.tsx

@@ -135,11 +135,12 @@ export function Header({ config, platform }: HeaderProps) {
                 [item.id]: !prev[item.id],
               }));
             }}
-            size="small-legacy"
+            size="default"
+            font="regular"
             className={cn(
-              // Top-level nav links: h3 bold per the ODS top-navigation spec
-              // (Figma 2797-5978); dropdown children stay on the h6 step.
-              'text-h3 font-bold tracking-[-0.36px]',
+              // Top-level nav links: the default-size button with the h4
+              // (DM Sans 500) `font="regular"` label — Figma 133-740, added
+              // for navigation; dropdown children stay on the h6 step.
               item.isActive && 'bg-ods-bg-hover', // Active items get subtle gray background
               isOpen && 'bg-ods-bg-hover', // Open dropdowns get gray background
               item.className,
@@ -227,9 +228,9 @@ export function Header({ config, platform }: HeaderProps) {
           onClick={item.onClick} // Only for non-navigation actions
           leftIcon={item.icon}
           rightIcon={item.badge}
-          size="small-legacy"
+          size="default"
+          font="regular"
           className={cn(
-            'text-h3 font-bold tracking-[-0.36px]',
             'hover:bg-ods-bg-hover focus:bg-ods-bg-hover',
             'whitespace-nowrap',
             'text-ods-text-primary', // All items use primary text color
@@ -251,9 +252,9 @@ export function Header({ config, platform }: HeaderProps) {
         onClick={item.onClick}
         leftIcon={item.icon}
         rightIcon={item.badge}
-        size="small-legacy"
+        size="default"
+        font="regular"
         className={cn(
-          'text-h3 font-bold tracking-[-0.36px]',
           'hover:bg-ods-bg-hover focus:bg-ods-bg-hover',
           'whitespace-nowrap',
           'text-ods-text-primary', // All items use primary text color
@@ -301,15 +302,16 @@ export function Header({ config, platform }: HeaderProps) {
         style={config.style}
         backgroundClassName={config.backgroundColor}
         centerBreakpoint="lg"
+        size="big"
         leading={
           <>
             {/* Length-guarded: platform configs often pass `left: []`, and an
                 empty array is truthy — without the guard the cell would render
                 as a bare divider + padding. */}
+            {/* No padding on the wrapper: leading cells (HeaderButton-based
+                admin toggles) size themselves to the bar's square cell. */}
             {!!config.actions?.left?.length && (
-              <div className="flex h-full items-center border-r border-ods-border px-[var(--spacing-system-xs)]">
-                {config.actions.left}
-              </div>
+              <div className="flex h-full items-center border-r border-ods-border">{config.actions.left}</div>
             )}
             {/* Mobile/tablet menu toggle — a leading cell per the ODS spec
               (banded with the nav breakpoint `lg` so the desktop nav and the
@@ -328,8 +330,8 @@ export function Header({ config, platform }: HeaderProps) {
                 aria-controls={config.mobile?.isOpen ? MOBILE_NAV_PANEL_ID : undefined}
                 icon={
                   config.mobile?.isOpen
-                    ? config.mobile?.closeIcon || <XmarkIcon className="w-4 h-4 md:w-6 md:h-6" />
-                    : config.mobile?.menuIcon || <Menu01Icon className="w-4 h-4 md:w-6 md:h-6" />
+                    ? config.mobile?.closeIcon || <XmarkIcon className="w-6 h-6" />
+                    : config.mobile?.menuIcon || <Menu01Icon className="w-6 h-6" />
                 }
               />
             )}
@@ -340,7 +342,11 @@ export function Header({ config, platform }: HeaderProps) {
             {config.logo.element}
           </Link>
         }
-        logoClassName={hasLeftCells ? 'lg:pl-[var(--spacing-system-l)]' : undefined}
+        // Logo inset for the hub sites: 12px on mobile (the shell's base p-m),
+        // 16px on tablet (mf token; the shell default is pl-l = 24px there),
+        // desktop unchanged — pl-xxl, collapsed to pl-l when an always-visible
+        // leading cell sits before the logo.
+        logoClassName={cn('md:pl-[var(--spacing-system-mf)]', hasLeftCells && 'lg:pl-[var(--spacing-system-l)]')}
         center={
           hasNav ? (
             <nav

package/src/components/navigation/mingo-ai-button.tsx

@@ -1,20 +1,20 @@
-'use client'
+'use client';
 
-import React from 'react'
-import { MingoIcon } from '../icons'
-import { cn } from '../../utils'
+import React from 'react';
+import { cn } from '../../utils';
+import { MingoIcon } from '../icons';
 
 export interface MingoAiButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  source?: string
+  source?: string;
   /** The platform's Mingo identity glyph — pass the SAME server-configured
    *  icon the chat panel renders (host-side: `EntityIcon` fed by the admin
    *  `assistantIcon`), so the launcher and the panel can never diverge.
    *  Falls back to the packaged Mingo mark when the server has none. */
-  icon?: React.ReactNode
+  icon?: React.ReactNode;
   /** The launcher's wordmark + aria-label — pass the server-configured
    *  assistant name (same `assistantName` the chat panel shows) so the
    *  launcher never hardcodes an identity the admin has renamed. */
-  label?: string
+  label?: string;
 }
 
 /**
@@ -32,7 +32,7 @@ export interface MingoAiButtonProps extends React.ButtonHTMLAttributes<HTMLButto
  * icon-only collapse that `Button` cannot express (same precedent as
  * `header-mingo-button.tsx`).
  */
-const MINGO_ACCENT = 'var(--ods-flamingo-cyan-base)'
+const MINGO_ACCENT = 'var(--ods-flamingo-cyan-base)';
 
 export function MingoAiButton({ source, icon, label = 'Mingo AI', className, onClick, ...props }: MingoAiButtonProps) {
   return (
@@ -40,12 +40,12 @@ export function MingoAiButton({ source, icon, label = 'Mingo AI', className, onC
       {...props}
       type="button"
       aria-label={label}
-      onClick={(e) => {
+      onClick={e => {
         // Coalesce to '' so a source-less mount still matches EmbeddableChat's
         // own `runtime.source ?? ''` comparison (undefined !== '' would make
         // the panel silently ignore the event).
-        window.dispatchEvent(new CustomEvent('ask-ai:open', { detail: { source: source ?? '' } }))
-        onClick?.(e)
+        window.dispatchEvent(new CustomEvent('ask-ai:open', { detail: { source: source ?? '' } }));
+        onClick?.(e);
       }}
       className={cn(
         // Unified ODS top-navigation cell (Figma 2797-6808 desktop /
@@ -58,11 +58,11 @@ export function MingoAiButton({ source, icon, label = 'Mingo AI', className, onC
         className,
       )}
     >
-      {/* Inner box = 1:1 twin of the header CTA's `size="small"` Button
-          geometry (rounded-md, h-6 md:h-8) so the animated ring traces
-          exactly where a normal small-button border would sit inside the
-          48/56px cell. */}
-      <span className="relative flex h-6 items-center gap-[var(--spacing-system-xsf)] rounded-md px-[var(--spacing-system-xsf)] md:h-8">
+      {/* Inner box = 1:1 twin of the DEFAULT-size Button geometry (rounded-md,
+          h-11 md:h-12, px-m) — the same footprint as the header's "Try for
+          Free" CTA — so the animated ring traces exactly where a full button
+          border would sit inside the 72px bar. */}
+      <span className="relative flex h-11 items-center gap-[var(--spacing-system-xsf)] rounded-md px-[var(--spacing-system-m)] md:h-12">
         {/* AI edge light (Apple-Intelligence-style): a rotating accent-
             gradient arc clipped to a 3px ring on the box outline via CSS
             mask (.mingo-edge-frame) — NO opaque cover, so the launcher
@@ -92,13 +92,14 @@ export function MingoAiButton({ source, icon, label = 'Mingo AI', className, onC
           />
         )}
         {/* Wordmark collapses below md — the mobile cell is icon-only per
-            spec. `text-code` (sentence-case mono caption, matching the small
-            CTA next to it) by product decision — the Figma wordmark is h3
-            bold; flagged for the designer. */}
-        <span className="relative hidden whitespace-nowrap text-code text-ods-text-primary md:inline">{label}</span>
+            spec. h3 bold, matching the default-size CTA label next to it
+            (Figma 2936-6825). */}
+        {/* Bare `text-h3` — the exact composite the default-size Button label
+            uses (bold 700 and -0.02em tracking are built into the utility). */}
+        <span className="relative hidden whitespace-nowrap text-h3 text-ods-text-primary md:inline">{label}</span>
       </span>
     </button>
-  )
+  );
 }
 
-export default MingoAiButton
+export default MingoAiButton;

package/src/components/navigation/mobile-burger-menu.tsx

@@ -9,8 +9,8 @@ import { Logout02Icon, PenEditIcon, UserSearchIcon } from '../icons-v2-generated
 import { Button, SquareAvatar } from '../ui'
 import { OVERLAY_BACKDROP_CLASS } from '../ui/drawer'
 
-// Header height constant (h-12 = 48px)
-const HEADER_HEIGHT = 48
+// Header height constant — the unified top-navigation `small` bar (56px on all screens)
+const HEADER_HEIGHT = 56
 
 export interface MobileBurgerMenuProps {
   /** Whether the menu is open */
@@ -188,7 +188,7 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenu({
                 fallback={user.userName}
                 size="lg"
                 variant="round"
-                className="w-12 h-12 shrink-0"
+                className="w-14 h-14 shrink-0"
               />
 
               {/* User Info */}

package/src/components/navigation/top-navigation.tsx

@@ -5,6 +5,17 @@ import { cn } from '../../utils/cn';
 
 export type TopNavigationCenterBreakpoint = 'md' | 'lg';
 
+export type TopNavigationSize = 'small' | 'big';
+
+// Bar height + square-cell width per size (Figma 2797-5978 `size` axis).
+// Heights are FIXED across breakpoints. `--top-nav-cell` is consumed by
+// `HeaderButton` (and any custom cell) so cell widths follow the size without
+// each cell knowing about it.
+const SIZE_CLASSES: Record<TopNavigationSize, string> = {
+  small: 'h-14 [--top-nav-cell:3.5rem]',
+  big: 'h-[72px] [--top-nav-cell:4.5rem]',
+};
+
 // Literal class maps — Tailwind's scanner needs the full class strings.
 const CENTER_VISIBILITY: Record<TopNavigationCenterBreakpoint, string> = {
   md: 'hidden md:flex',
@@ -52,6 +63,9 @@ export interface TopNavigationProps extends React.HTMLAttributes<HTMLElement> {
   backgroundClassName?: string;
   /** Top border on mobile (the ODS spec bar shows it below md). Default true. */
   mobileTopBorder?: boolean;
+  /** Bar size (Figma 2797-5978 `size` axis): `small` = 56px (console),
+   *  `big` = 72px (marketing/hub sites). Fixed across breakpoints. */
+  size?: TopNavigationSize;
 }
 
 const hasContent = (node: React.ReactNode): boolean => node !== null && node !== undefined && node !== false;
@@ -80,6 +94,7 @@ export function TopNavigation({
   sideActions,
   backgroundClassName,
   mobileTopBorder = true,
+  size = 'small',
   className,
   children,
   ...props
@@ -87,7 +102,8 @@ export function TopNavigation({
   return (
     <header
       className={cn(
-        'flex h-12 w-full items-center border-b border-ods-border md:h-14',
+        'flex w-full items-center border-b border-ods-border',
+        SIZE_CLASSES[size],
         mobileTopBorder && 'border-t md:border-t-0',
         backgroundClassName ?? 'bg-ods-card',
         className,