@flamingo-stack/openframe-frontend-core 0.0.502 → 0.0.503-snapshot.20260731162644

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

@@ -169,7 +169,7 @@ export const AppHeader = React.memo(function AppHeader({
           <HeaderButton
             onClick={onToggleMobileMenu}
             isActive={isMobileMenuOpen}
-            icon={isMobileMenuOpen ? <XmarkIcon className="w-4 h-4" /> : <Menu01Icon className="w-4 h-4" />}
+            icon={isMobileMenuOpen ? <XmarkIcon className="w-6 h-6" /> : <Menu01Icon className="w-6 h-6" />}
             aria-label={isMobileMenuOpen ? 'Close menu' : 'Open menu'}
             aria-expanded={isMobileMenuOpen}
             className="border-r border-ods-border"
@@ -195,7 +195,7 @@ export const AppHeader = React.memo(function AppHeader({
           {/* Mobile: Search button */}
           {showSearch && (
             <HeaderButton
-              icon={<SearchIcon className="w-4 h-4 md:w-6 md:h-6" />}
+              icon={<SearchIcon className="w-6 h-6" />}
               aria-label="Search"
               className={cn('md:hidden', cellDivider, dimmedClass)}
               disabled={disabled}
@@ -324,9 +324,9 @@ function NotificationsHeaderButton({ fallbackUnreadCount, disabled, dimmedClass
     <HeaderButton
       icon={
         isActive ? (
-          <XmarkIcon className="w-4 h-4 md:w-6 md:h-6" />
+          <XmarkIcon className="w-6 h-6" />
         ) : (
-          <div className="relative w-4 h-4 md:w-6 md:h-6">
+          <div className="relative w-6 h-6">
             <BellIcon className="w-full h-full" />
             {hasUnread && (
               <span className="absolute top-0 right-0 bg-ods-warning rounded-full w-1.5 h-1.5 md:w-2 md:h-2" />
@@ -357,11 +357,11 @@ function HeaderCellSkeleton({ className }: { className?: string }) {
   return (
     <div
       className={cn(
-        'flex h-full w-12 shrink-0 items-center justify-center border-l border-ods-border md:w-14',
+        'flex h-full w-14 shrink-0 items-center justify-center border-l border-ods-border',
         className,
       )}
     >
-      <div className="h-4 w-4 animate-pulse rounded bg-ods-border md:h-6 md:w-6" />
+      <div className="h-6 w-6 animate-pulse rounded bg-ods-border" />
     </div>
   );
 }
@@ -376,8 +376,8 @@ function HeaderCellSkeleton({ className }: { className?: string }) {
  */
 function HeaderWideCellSkeleton() {
   return (
-    <div className="flex h-full w-12 shrink-0 items-center justify-center gap-2 border-l border-ods-border md:w-[140px] md:px-4">
-      <div className="h-4 w-4 shrink-0 animate-pulse rounded bg-ods-border md:h-6 md:w-6" />
+    <div className="flex h-full w-14 shrink-0 items-center justify-center gap-2 border-l border-ods-border md:w-[140px] md:px-4">
+      <div className="h-6 w-6 shrink-0 animate-pulse rounded bg-ods-border" />
       <div className="hidden h-5 animate-pulse rounded bg-ods-border md:block md:w-[72px]" />
     </div>
   );
@@ -411,8 +411,8 @@ function AppHeaderSkeleton({
       aria-busy="true"
       leading={
         // Burger cell: mobile only, in CSS.
-        <div className="flex h-full w-12 shrink-0 items-center justify-center border-r border-ods-border md:hidden">
-          <div className="h-4 w-4 animate-pulse rounded bg-ods-border" />
+        <div className="flex h-full w-14 shrink-0 items-center justify-center border-r border-ods-border md:hidden">
+          <div className="h-6 w-6 animate-pulse rounded bg-ods-border" />
         </div>
       }
       logo={

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

@@ -23,7 +23,10 @@ export function HeaderButton({
       className={cn(
         "flex items-center justify-center shrink-0",
         "transition-colors duration-200",
-        "w-12 h-full md:w-14",
+        // Square cell width follows the TopNavigation size (56px small /
+        // 72px big) via the shell's --top-nav-cell var; 56px fallback for
+        // standalone use.
+        "w-[var(--top-nav-cell,3.5rem)] h-full",
         isActive
           ? "text-ods-text-primary bg-ods-bg-active"
           : // Transparent at rest so the cell inherits the bar's background

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

@@ -57,7 +57,7 @@ export function HeaderMingoButton({
         // Mobile, drawer open: the icon-only button doubles as the close
         // affordance, so swap the Mingo logo for an X. Match the other header
         // icons (e.g. notifications): secondary color, w-4 h-4 → md:w-6 h-6.
-        <XmarkIcon className="w-4 h-4 md:w-6 md:h-6 shrink-0 text-ods-text-secondary" />
+        <XmarkIcon className="w-6 h-6 shrink-0 text-ods-text-secondary" />
       ) : (
         // Outer frame follows the button's text color (currentColor); the eyes
         // and corner block are ODS cyan.
@@ -65,7 +65,7 @@ export function HeaderMingoButton({
           color="currentColor"
           eyesColor="var(--ods-flamingo-cyan-base)"
           cornerColor="var(--ods-flamingo-cyan-base)"
-          className="w-4 h-4 md:w-6 md:h-6 shrink-0"
+          className="w-6 h-6 shrink-0"
         />
       )}
       {!iconOnly && (

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

@@ -21,20 +21,20 @@ export function HeaderSkeleton({ config }: HeaderSkeletonProps) {
     <div className="sticky top-0 z-[50] w-full">
       <header
         className={cn(
-          'flex h-12 w-full items-center border-b border-t border-ods-border md:h-14 md:border-t-0',
+          '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-12 items-center justify-center border-r border-ods-border md:w-14">
+          <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-12 items-center justify-center border-r border-ods-border md:w-14 lg:hidden">
-            <div className="h-4 w-4 animate-pulse rounded bg-ods-border md:h-6 md:w-6" />
+          <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>
         )}
 

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,

package/src/components/ui/autocomplete.tsx

@@ -25,6 +25,7 @@ import { Chevron02DownIcon } from "../icons-v2-generated/arrows/chevron-02-down-
 
 import { Loader2 } from "lucide-react"
 import { cn } from "../../utils/cn"
+import { TruncateText } from "./truncate-text"
 import { useAutoLimitTags } from "../../hooks/ui/use-auto-limit-tags"
 import { FieldWrapper } from "./field-wrapper"
 import { HiddenTagsPopup } from "./hidden-tags-popup"
@@ -601,7 +602,8 @@ function AutocompleteInner<T = string>(
                       )}
                       onClick={handleCreate}
                     >
-                      <span className="truncate" title={`+ Create "${inputValue.trim()}"`}>+ Create &quot;{inputValue.trim()}&quot;</span>
+                      {/* text-current: the row owns the typography/color (accent), not the TruncateText defaults. */}
+                      <TruncateText className="text-current">{`+ Create "${inputValue.trim()}"`}</TruncateText>
                     </div>
                   )
                 ) : (
@@ -635,7 +637,8 @@ function AutocompleteInner<T = string>(
                     >
                       {renderOption ? renderOption(option, isSelected) : (
                         <div className="flex items-center justify-between gap-[var(--spacing-system-xsf)] w-full min-w-0">
-                          <span className="truncate" title={option.label}>{option.label}</span>
+                          {/* text-current: selection state colors the row (accent vs primary); inherit it. */}
+                          <TruncateText className="text-current">{option.label}</TruncateText>
                           <div className="flex items-center gap-[var(--spacing-system-xsf)] shrink-0">
                             {isSelected && (
                               <CheckIcon className="text-ods-accent" size={20} />