@flamingo-stack/openframe-frontend-core 0.0.508 → 0.0.509-snapshot.20260803110336

package/src/components/navigation/header.tsx

@@ -8,8 +8,8 @@ import { Menu01Icon, XmarkIcon } from '../icons-v2-generated';
 import { Button } from '../ui/button';
 import { HeaderButton } from './header-button';
 import { MingoAiButton } from './mingo-ai-button';
-import { TicketAlertsButton } from './ticket-alerts-button';
 import { MOBILE_NAV_PANEL_ID } from './mobile-nav-panel';
+import { TicketAlertsButton } from './ticket-alerts-button';
 import { TopNavigation } from './top-navigation';
 
 export interface HeaderProps {
@@ -20,6 +20,11 @@ export interface HeaderProps {
 // Re-export from types for convenience
 export type { HeaderConfig } from '../../types/navigation';
 
+// Top-level nav-link typography (Figma 2936-6815): the compact h6 step
+// (DM Sans 500, 14/20) with 24px icons. Overrides the `font="regular"` h4
+// label and the Button base's 20px svg cap via cn()'s tailwind-merge.
+const NAV_ITEM_CLASSES = 'text-h6 [&_svg]:h-6 [&_svg]:w-6';
+
 export function Header({ config, platform }: HeaderProps) {
   const [show, setShow] = useState(true);
   const [lastScrollY, setLastScrollY] = useState(0);
@@ -139,9 +144,10 @@ export function Header({ config, platform }: HeaderProps) {
             size="default"
             font="regular"
             className={cn(
-              // 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.
+              // Top-level nav links (Figma 2936-6815): compact h6 label
+              // (DM Sans 500, 14/20) with 24px icons — overrides the
+              // font="regular" h4 step and the button's 20px svg cap.
+              NAV_ITEM_CLASSES,
               item.isActive && 'bg-ods-bg-hover', // Active items get subtle gray background
               isOpen && 'bg-ods-bg-hover', // Open dropdowns get gray background
               item.className,
@@ -197,7 +203,11 @@ export function Header({ config, platform }: HeaderProps) {
                   }}
                   className={cn(
                     'flex justify-start w-full',
-                    'text-h6 font-bold',
+                    // Same caption step as the top-level nav links (designer:
+                    // dropdowns follow the h6 caption size/weight too). The
+                    // explicit font-medium beats small-legacy's font-bold via
+                    // tailwind-merge instead of stylesheet order.
+                    'text-h6 font-medium',
                     index < (item.children?.length ?? 0) - 1 && 'mb-1',
                     'text-ods-text-primary', // All dropdown items use primary text color
                     child.isActive && 'bg-ods-bg-hover', // Active dropdown items get gray background
@@ -232,6 +242,7 @@ export function Header({ config, platform }: HeaderProps) {
           size="default"
           font="regular"
           className={cn(
+            NAV_ITEM_CLASSES,
             'hover:bg-ods-bg-hover focus:bg-ods-bg-hover',
             'whitespace-nowrap',
             'text-ods-text-primary', // All items use primary text color
@@ -256,6 +267,7 @@ export function Header({ config, platform }: HeaderProps) {
         size="default"
         font="regular"
         className={cn(
+          NAV_ITEM_CLASSES,
           'hover:bg-ods-bg-hover focus:bg-ods-bg-hover',
           'whitespace-nowrap',
           'text-ods-text-primary', // All items use primary text color
@@ -269,12 +281,6 @@ export function Header({ config, platform }: HeaderProps) {
   };
 
   const hasNav = !!config.navigation && config.navigation.items.length > 0;
-  // Always-visible leading cells (admin-sidebar toggle). The logo zone's
-  // desktop `pl-xxl` (80px) exists to compensate for the ABSENCE of a leading
-  // cell — with one present it reads as a stray gap, so collapse it to the
-  // regular `pl-l` inset. (The marketing burger doesn't count: it is
-  // CSS-hidden on lg, exactly where the 80px inset applies.)
-  const hasLeftCells = !!config.actions?.left?.length;
   const hasCta =
     !!config.actions?.right?.length || !!(config.actions?.persistent && config.actions.persistent.length > 0);
 
@@ -343,11 +349,10 @@ export function Header({ config, platform }: HeaderProps) {
             {config.logo.element}
           </Link>
         }
-        // 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)]')}
+        // Big-bar rule (Figma 2936-6812): 24px fixed left inset on the logo
+        // zone at every breakpoint — the same 24px also reads as the gap
+        // between a leading cell (burger / admin toggle) and the logo.
+        logoClassName="pl-[var(--spacing-system-lf)] md:pl-[var(--spacing-system-lf)] lg:pl-[var(--spacing-system-lf)]"
         center={
           hasNav ? (
             <nav

package/src/components/onboarding-guides/onboarding-guide-detail-view.tsx

@@ -15,7 +15,7 @@
  * renderer with extra plugins.
  */
 
-import { type ComponentType, type ReactNode } from 'react'
+import { Fragment, type ComponentType, type ReactNode } from 'react'
 import { PageLayout } from '../layout/page-layout'
 
 import { useRouter } from '../../embed-shims'
@@ -30,7 +30,7 @@ import { VideoBitesStrip } from '../features/video-bites-strip'
 import { toStripProfile } from '../features/video-bites-shared'
 import { useVideoWarmup } from '../features/use-video-warmup'
 import { getCaptionsUrl } from '../features/captions-url'
-import { RichMarkdownRenderer } from '../ui/rich-markdown-renderer'
+import { RichMarkdownRenderer } from '../ui/markdown'
 import { EntityTagBadges } from '../features/entity-tag-badges'
 import { LoadError } from '../ui/error-state'
 import { ArticleAuthorByline } from '../shared/article-author-byline'
@@ -244,8 +244,26 @@ export function OnboardingGuideDetailView({
           </div>
         )}
 
-        {/* Host slot — cross-type related-content / FAQ rail. */}
-        {relatedContent}
+        {/*
+         * Host slot — cross-type related-content / FAQ rail.
+         *
+         * KEYED DELIBERATELY. This is one member of PageLayout's static children
+         * array, and the only member whose element may be created in a SERVER
+         * component and crossed over the RSC boundary. Static JSX children are
+         * normally exempt from the key warning because `jsxs` runs
+         * `validateChildKeys` and stamps `_store.validated = 1` on each element —
+         * but a slot arriving over the wire is referenced as a lazy chunk wrapper,
+         * so validation marks the WRAPPER and the fulfilled path never copies the
+         * flag onto the revived element. It reaches the reconciler with
+         * `validated: 0, key: null` and warns, blaming PageLayout (the owner of the
+         * enclosing element) rather than anything actually at fault.
+         *
+         * A keyed Fragment emits no DOM, so rendered output is byte-identical.
+         * Do NOT "fix" this in PageLayout via `React.Children.toArray` — that would
+         * auto-key every consumer's children and change reconciliation identity for
+         * all of them, and that file carries an explicit FROZEN contract.
+         */}
+        <Fragment key="related-content">{relatedContent}</Fragment>
       </PageLayout>
   )
 }

package/src/components/shared/legal-document/legal-document-page.tsx

@@ -19,7 +19,7 @@
 
 import type { ComponentType } from 'react';
 import { PageShell, PageLayout } from '../../ui';
-import { RichMarkdownRenderer } from '../../ui/rich-markdown-renderer';
+import { RichMarkdownRenderer } from '../../ui/markdown';
 import { useRouter } from '../../../embed-shims/next-navigation';
 import { useLegalDocs, type LegalDocument } from './use-legal-docs';
 import { formatLegalDate } from '../../../utils/format';

package/src/components/shared/product-release/release-detail-page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, ComponentType, type ReactNode } from 'react';
+import { useState, useEffect, Fragment, ComponentType, type ReactNode } from 'react';
 import Link from '../../../embed-shims/next-link';
 import { useRouter } from '../../../embed-shims/next-navigation';
 import { Card, CardContent } from '../../ui/card';
@@ -11,7 +11,7 @@ import { PageShell } from '../../layout/article-detail-layout';
 import { PageLayout } from '../../layout/page-layout';
 import { FadePreview } from '../../ui/fade-preview';
 import { ReleaseChangelogSection } from '../../ui/release-changelog-section';
-import { RichMarkdownRenderer } from '../../ui/rich-markdown-renderer';
+import { RichMarkdownRenderer } from '../../ui/markdown';
 import { EntityTagBadges } from '../../features/entity-tag-badges';
 import { EntityMetadataAuthorCell } from '../../chat/entity-cards/entity-author-card';
 import type { EntityAuthor } from '../../../types/entity-author';
@@ -582,8 +582,23 @@ export function ReleaseDetailPage({
         )}
       </div>
 
-      {/* Host slot — end-of-article byline + related-content / FAQ rail. */}
-      {relatedContent}
+      {/*
+       * Host slot — end-of-article byline + related-content / FAQ rail.
+       *
+       * KEYED for the same reason as `onboarding-guide-detail-view.tsx`: this is a
+       * member of PageLayout's static children array, and a slot element built in a
+       * SERVER component crosses the RSC boundary as a lazy chunk wrapper, so
+       * `validateChildKeys` marks the wrapper and the fulfilled path never copies
+       * `_store.validated` onto the revived element — it reaches the reconciler
+       * unvalidated and warns.
+       *
+       * Today the hub's only consumer of this view is a `'use client'` wrapper that
+       * builds the slot locally, so no element actually crosses the boundary and
+       * this is pre-emptive. It is kept because the trap is invisible from here: a
+       * future server-built slot would warn with no clue pointing at this line.
+       * A keyed Fragment emits no DOM, so output is byte-identical either way.
+       */}
+      <Fragment key="related-content">{relatedContent}</Fragment>
       </PageLayout>
   );
 }