@flamingo-stack/openframe-frontend-core 0.0.199 → 0.0.200-snapshot.20260520171313

package/src/components/shared/product-release/product-release-card.tsx

@@ -1,8 +1,20 @@
 'use client'
 
 import React from 'react'
+import Image from 'next/image'
 import { InteractiveCard } from '../../ui/interactive-card'
-import { ChevronRight, Package } from 'lucide-react'
+import { StatusBadge } from '../../ui/status-badge'
+import { SquareAvatar } from '../../ui/square-avatar'
+import {
+  AlertTriangle,
+  ChevronRight,
+  Eye,
+  Package,
+  Play,
+  Sparkles,
+  TrendingUp,
+  Wrench,
+} from 'lucide-react'
 import { cn } from '../../../utils/cn'
 
 /**
@@ -14,8 +26,13 @@ import { cn } from '../../../utils/cn'
  *   illegal inside markdown `<p>`) for `<span>` text, swaps the outer
  *   `InteractiveCard` for a `<span>`-anchored link, and collapses to:
  *   56px icon + 1-line title + 1-line meta (version · date).
+ * - `catalog`: rich /releases catalog row. Three zones — hero (16:9 cover +
+ *   version pill + title + summary), changelog stats strip (icons + counts),
+ *   metadata grid footer (Type · Status · Released · Author). The grid
+ *   mirrors the hub's `<EntityAuthorCard>` byte-for-byte (see catalog
+ *   branch comment).
  */
-export type ProductReleaseCardSize = 'default' | 'sm'
+export type ProductReleaseCardSize = 'default' | 'sm' | 'catalog'
 
 /**
  * Minimal structural `<a>` prop bundle the consumer composes (typically
@@ -65,6 +82,39 @@ export interface ProductReleaseCardProps {
   className?: string
   /** Card density. Defaults to `'default'`. */
   size?: ProductReleaseCardSize
+
+  // ─── Catalog-only props (ignored by `default` / `sm` branches) ─────────
+  /** Cover image URL. Falls back to a neutral `Package`-icon placeholder. */
+  coverImage?: string | null
+  /** Drives the Play overlay on the cover. Caller sets `true` when the cover
+   *  came from a `*_video_thumbnail` field. */
+  hasVideoCover?: boolean
+  /** Release type for the metadata grid's first cell. */
+  releaseType?: 'major' | 'minor' | 'patch' | 'beta' | 'alpha'
+  /** Release status for the metadata grid's second cell. */
+  releaseStatus?: 'alpha' | 'beta' | 'stable' | 'deprecated'
+  /** Pre-computed `StatusBadge` colorScheme for the release-type chip. The
+   *  hub consumer maps `release_type → colorScheme` via its local helper so
+   *  the OSS card stays mapping-agnostic. */
+  releaseTypeBadgeColor?: 'error' | 'cyan' | 'success' | 'warning'
+  /** View count for the optional microline below the metadata grid. Hidden
+   *  when zero or undefined. */
+  viewCount?: number
+  /** Hydrated author (from the hub DAL's `hydrateAuthor`). When present,
+   *  renders as the last cell of the metadata grid. */
+  author?: {
+    full_name: string
+    avatar_url: string | null
+    job_title: string | null
+  }
+  /** Per-category counts for the changelog stats strip. The whole strip
+   *  is hidden when total === 0. */
+  changelogCounts?: {
+    features: number
+    fixes: number
+    improvements: number
+    breaking: number
+  }
 }
 
 export function ProductReleaseCard({
@@ -76,7 +126,265 @@ export function ProductReleaseCard({
   anchorProps,
   className,
   size = 'default',
+  coverImage,
+  hasVideoCover,
+  releaseType,
+  releaseStatus,
+  releaseTypeBadgeColor,
+  viewCount,
+  author,
+  changelogCounts,
 }: ProductReleaseCardProps) {
+  // ----- CATALOG branch (rich /releases catalog row) -------------------------
+  // The card has THREE zones:
+  //   1. Hero — cover image LEFT, version pill + title + summary RIGHT.
+  //   2. Changelog strip — icons + counts (hidden when total === 0).
+  //   3. Metadata grid footer — bordered grid of [Type | Status | Released
+  //      | Author] cells. This grid INLINES the hub's <EntityAuthorCard>
+  //      visual treatment by hand (SAME bordered grid with value-cell +
+  //      author-cell shapes, byte-for-byte). The OSS lib has zero hub
+  //      coupling by design; we cannot import the hub's
+  //      <EntityAuthorCard>. This is the SAME inline-duplication policy
+  //      documented for the COMPACT_CARD_* string set at lines ~104-108.
+  //      If the hub's <EntityAuthorCard> visual changes (cell padding,
+  //      divider styles, avatar size, etc.), update this branch in
+  //      lockstep.
+  if (size === 'catalog') {
+    const totalChangelog =
+      (changelogCounts?.features ?? 0) +
+      (changelogCounts?.fixes ?? 0) +
+      (changelogCounts?.improvements ?? 0) +
+      (changelogCounts?.breaking ?? 0)
+
+    // Build the metadata-grid cell array — mirrors the hub's
+    // EntityAuthorCard composition (extras → date → author). The
+    // release-type cell carries a colored chip; other cells are plain
+    // value + label.
+    type ValueCell = {
+      value: string
+      label: string
+      uppercase: boolean
+      colorScheme?: 'error' | 'cyan' | 'success' | 'warning'
+    }
+    const valueCells: ValueCell[] = []
+    if (releaseType && releaseTypeBadgeColor) {
+      valueCells.push({
+        value: releaseType.toUpperCase(),
+        label: 'Type',
+        uppercase: true,
+        colorScheme: releaseTypeBadgeColor,
+      })
+    }
+    if (releaseStatus) {
+      valueCells.push({
+        value: releaseStatus.toUpperCase(),
+        label: 'Status',
+        uppercase: true,
+      })
+    }
+    if (formattedDate) {
+      valueCells.push({
+        value: formattedDate,
+        label: 'Released',
+        uppercase: false,
+      })
+    }
+    const hasAuthorCell = !!author?.full_name
+    const totalCells = valueCells.length + (hasAuthorCell ? 1 : 0)
+    // Tailwind JIT cannot compile dynamic class names — explicit branches:
+    const gridColsClass =
+      totalCells >= 4 ? 'md:grid-cols-4'
+        : totalCells === 3 ? 'md:grid-cols-3'
+          : totalCells === 2 ? 'md:grid-cols-2'
+            : 'md:grid-cols-1'
+    const dividerClass = 'border-b md:border-b-0 md:border-r border-ods-border'
+
+    const frameClass = cn(
+      'group bg-ods-system-greys-black border border-ods-border rounded-lg overflow-hidden',
+      'flex flex-col p-6 gap-4',
+      'transition-all duration-300 ease-out transform hover:translate-y-[-2px]',
+      'hover:border-ods-accent hover:shadow-lg hover:shadow-ods-accent/[0.08]',
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 focus-visible:ring-offset-ods-bg',
+      'no-underline',
+      className,
+    )
+
+    const innerLayout = (
+      <>
+        {/* HERO ZONE — cover LEFT + version pill + title + summary RIGHT */}
+        <div className="flex flex-col md:flex-row gap-4 md:gap-6">
+          <div className="w-full md:w-[256px] flex-shrink-0">
+            <div className="relative rounded-lg overflow-hidden w-full aspect-[16/9] bg-ods-bg">
+              {coverImage ? (
+                <Image
+                  src={coverImage}
+                  alt={title}
+                  fill
+                  sizes="(max-width: 768px) 100vw, 256px"
+                  className="object-cover"
+                  unoptimized
+                />
+              ) : (
+                <div className="absolute inset-0 flex items-center justify-center text-ods-text-secondary">
+                  <Package className="w-8 h-8" />
+                </div>
+              )}
+              {hasVideoCover && coverImage && (
+                <span className="absolute inset-0 flex items-center justify-center bg-black/30">
+                  <Play className="w-10 h-10 text-white" fill="white" />
+                </span>
+              )}
+            </div>
+          </div>
+          <div className="flex-1 min-w-0 flex flex-col">
+            <div className="flex items-center gap-3 mb-3">
+              <span className="font-mono font-semibold text-lg text-ods-text-primary truncate">
+                v{version}
+              </span>
+            </div>
+            <h3 className="font-['Azeret_Mono'] font-semibold text-xl md:text-2xl text-ods-text-primary leading-tight line-clamp-2 mb-3">
+              {title}
+            </h3>
+            {summary && (
+              <p className="font-['DM_Sans'] text-sm md:text-base text-ods-text-secondary leading-relaxed line-clamp-4 flex-1">
+                {summary}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* CHANGELOG STRIP — hidden when total === 0 */}
+        {totalChangelog > 0 && changelogCounts && (
+          <div className="border-t border-ods-border pt-3 flex flex-wrap items-center gap-x-4 gap-y-1.5 font-['DM_Sans'] text-sm text-ods-text-secondary">
+            {changelogCounts.features > 0 && (
+              <span className="inline-flex items-center gap-1.5">
+                <Sparkles className="w-3.5 h-3.5" />
+                {changelogCounts.features} {changelogCounts.features === 1 ? 'feature' : 'features'}
+              </span>
+            )}
+            {changelogCounts.fixes > 0 && (
+              <span className="inline-flex items-center gap-1.5">
+                <Wrench className="w-3.5 h-3.5" />
+                {changelogCounts.fixes} {changelogCounts.fixes === 1 ? 'fix' : 'fixes'}
+              </span>
+            )}
+            {changelogCounts.improvements > 0 && (
+              <span className="inline-flex items-center gap-1.5">
+                <TrendingUp className="w-3.5 h-3.5" />
+                {changelogCounts.improvements} {changelogCounts.improvements === 1 ? 'improvement' : 'improvements'}
+              </span>
+            )}
+            {changelogCounts.breaking > 0 && (
+              <span className="inline-flex items-center gap-1.5 text-[var(--ods-attention-yellow-warning)]">
+                <AlertTriangle className="w-3.5 h-3.5" />
+                {changelogCounts.breaking} breaking
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* METADATA GRID FOOTER — mirrors EntityAuthorCard byte-for-byte */}
+        {totalCells > 0 && (
+          <div
+            className={cn(
+              'grid grid-cols-1',
+              gridColsClass,
+              'border border-ods-border rounded-md overflow-hidden w-full',
+            )}
+          >
+            {valueCells.map((cell, i) => (
+              <div
+                key={`${cell.label}-${i}`}
+                className={cn(
+                  'bg-ods-card p-4 flex flex-col gap-3',
+                  // Last value cell skips the trailing divider when no
+                  // author cell follows; otherwise every value cell gets it.
+                  (i < valueCells.length - 1 || hasAuthorCell) && dividerClass,
+                )}
+              >
+                <div className="flex flex-col gap-0">
+                  {cell.colorScheme ? (
+                    <StatusBadge
+                      text={cell.value}
+                      variant="card"
+                      colorScheme={cell.colorScheme}
+                      singleLine
+                      className="self-start"
+                    />
+                  ) : (
+                    <p className="text-h4 text-ods-text-primary">
+                      {cell.uppercase ? cell.value.toLocaleUpperCase() : cell.value}
+                    </p>
+                  )}
+                  <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">
+                    {cell.label}
+                  </p>
+                </div>
+              </div>
+            ))}
+            {hasAuthorCell && author && (
+              <div className="bg-ods-card p-4 flex items-center gap-3">
+                <SquareAvatar
+                  src={author.avatar_url ?? undefined}
+                  alt={author.full_name}
+                  fallback={author.full_name.charAt(0).toUpperCase()}
+                  size="md"
+                  variant="round"
+                />
+                <div className="flex flex-col gap-0 flex-1 min-w-0">
+                  <p className="text-h3 tracking-[-0.36px] text-ods-text-primary truncate">
+                    {author.full_name}
+                  </p>
+                  <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">
+                    {author.job_title || 'Author'}
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {typeof viewCount === 'number' && viewCount > 0 && (
+          <div className="flex items-center gap-1.5 text-xs text-ods-text-secondary">
+            <Eye className="w-3.5 h-3.5" />
+            <span>{viewCount.toLocaleString()} views</span>
+          </div>
+        )}
+      </>
+    )
+
+    // Outer-element three-branch decision tree, matching the existing
+    // `default` branch precedence at lines ~200-241. PRECEDENCE:
+    // anchorProps WINS over onClick.
+    if (anchorProps) {
+      return (
+        <a {...anchorProps} className={frameClass} aria-label={`Open ${title}`}>
+          {innerLayout}
+        </a>
+      )
+    }
+    if (onClick) {
+      return (
+        <InteractiveCard clickable onClick={onClick} className={frameClass}>
+          {innerLayout}
+        </InteractiveCard>
+      )
+    }
+    // Non-interactive fallback — strip the hover lift / accent-border so
+    // the cursor doesn't lie about clickability.
+    return (
+      <div
+        className={cn(
+          frameClass
+            .replace('hover:border-ods-accent', '')
+            .replace('hover:translate-y-[-2px]', ''),
+        )}
+      >
+        {innerLayout}
+      </div>
+    )
+  }
+
   // ----- COMPACT branch (chat / tight surfaces) ------------------------------
   // Outer must be a phrasing-content element (`<a>` or `<span>`) — block
   // elements like `<div>`/`<h3>` are illegal inside markdown `<p>`, so we
@@ -120,8 +428,30 @@ export function ProductReleaseCard({
     )
     const innerChildren = (
       <>
-        <span className="flex h-14 w-14 aspect-square shrink-0 self-start items-center justify-center rounded-md bg-ods-bg text-ods-accent">
-          <Package className="h-5 w-5" />
+        {/* 56×56 cover slot. Mirrors BlogCard / ProgramCard / OnboardingGuide
+            sm slots — when `coverImage` is set, render the actual image
+            (object-contain to keep landscape thumbs visible); fall back to
+            the `Package` icon when no cover is provided. Play overlay
+            fires only when `hasVideoCover` is true AND a cover image was
+            actually supplied (matches the catalog variant's overlay rule). */}
+        <span className="relative flex h-14 w-14 aspect-square shrink-0 self-start items-center justify-center overflow-hidden rounded-md bg-ods-bg text-ods-accent">
+          {coverImage ? (
+            <Image
+              src={coverImage}
+              alt={title}
+              fill
+              sizes="56px"
+              className="object-contain"
+              unoptimized
+            />
+          ) : (
+            <Package className="h-5 w-5" />
+          )}
+          {hasVideoCover && coverImage && (
+            <span className="absolute inset-0 flex items-center justify-center bg-black/30">
+              <Play className="h-4 w-4 text-white" fill="white" />
+            </span>
+          )}
         </span>
         {/* Text column structure must mirror the hub's
             `COMPACT_CARD_TEXT_COL` + `COMPACT_CARD_TITLE_ROW` +

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

@@ -9,7 +9,7 @@ import { StatusBadge } from '../../ui/status-badge';
 import { SquareAvatar } from '../../ui/square-avatar';
 import { ImageGalleryModal } from '../../ui/image-gallery-modal';
 import { GitHubIcon } from '../../icons/github-icon';
-import { AlertTriangle, ExternalLink, BookMarked } from 'lucide-react';
+import { AlertTriangle, ExternalLink, BookMarked, Sparkles, TrendingUp, Wrench } from 'lucide-react';
 import { formatReleaseDate } from '../../../utils/date-formatters';
 import { Video } from '../../features/video';
 import { DetailPageSkeleton } from '../detail-page-skeleton';
@@ -392,27 +392,33 @@ export function ReleaseDetailPage({
           </Card>
         )}
 
-        {/* Changelog Sections */}
+        {/* Changelog Sections — icons match the catalog card's changelog
+            strip taxonomy (Sparkles/Wrench/TrendingUp/AlertTriangle) so the
+            user sees a consistent visual signature across catalog → detail. */}
         <ReleaseChangelogSection
           title="Breaking Changes"
           entries={breakingChanges || []}
           isBreaking
           hideTitle
+          icon={<AlertTriangle className="h-6 w-6" />}
           SimpleMarkdownRenderer={MarkdownRenderer}
         />
         <ReleaseChangelogSection
           title="Features Added"
           entries={featuresAdded || []}
+          icon={<Sparkles className="h-6 w-6" />}
           SimpleMarkdownRenderer={MarkdownRenderer}
         />
         <ReleaseChangelogSection
           title="Bugs Fixed"
           entries={bugFixed || []}
+          icon={<Wrench className="h-6 w-6" />}
           SimpleMarkdownRenderer={MarkdownRenderer}
         />
         <ReleaseChangelogSection
           title="Improvements"
           entries={improvements || []}
+          icon={<TrendingUp className="h-6 w-6" />}
           SimpleMarkdownRenderer={MarkdownRenderer}
         />
 

package/src/components/ui/button/button.tsx

@@ -27,7 +27,7 @@ const buttonVariants = cva(
         destructive: buttonSurfaceClasses.destructive,
       },
       size: {
-        default: "py-[var(--spacing-system-sf)] px-[var(--spacing-system-m)] text-h3 h-12",
+        default: "py-[var(--spacing-system-sf)] px-[var(--spacing-system-m)] text-h3 md:h-12 h-10",
         small: "p-[var(--spacing-system-xs)] text-h5 h-6 md:h-8",
         "small-legacy": "py-[var(--spacing-system-xs)] px-[var(--spacing-system-m)] h-10 text-[14px] font-bold", // Temporary alias for "small" to avoid breaking changes in AnnouncementBar's CTA button; will be removed in the future
         icon: "p-[var(--spacing-system-sf)] h-11 w-11 md:h-12 md:w-12 [&_svg]:h-4 [&_svg]:w-4 md:[&_svg]:h-6 md:[&_svg]:w-6",

package/src/components/ui/checkbox-block.tsx

@@ -28,14 +28,15 @@ const CheckboxBlock = React.forwardRef<
     <label
       htmlFor={id}
       className={cn(
-        "flex items-center gap-[var(--spacing-system-s)] rounded-[6px] border w-full",
+        "flex items-center gap-[var(--spacing-system-s)] rounded-md ring-1 ring-inset w-full",
         "p-[var(--spacing-system-sf)]",
-        !description && "h-11 md:h-12",
-        "bg-ods-card border-ods-border",
+        !description && "min-h-[44px] md:min-h-[48px]",
+        description && "min-h-[60px] md:min-h-[64px]",
+        "bg-ods-card ring-ods-border",
         "cursor-pointer transition-colors duration-200",
-        "hover:border-ods-accent/30",
-        disabled && "opacity-50 cursor-not-allowed hover:border-ods-border",
-        error && "border-ods-error",
+        "hover:ring-ods-accent/30",
+        disabled && "opacity-50 cursor-not-allowed hover:ring-ods-border",
+        error && "ring-ods-error",
       )}
     >
       <CheckboxPrimitive.Root
@@ -46,7 +47,7 @@ const CheckboxBlock = React.forwardRef<
         onCheckedChange={onCheckedChange}
         disabled={disabled}
         className={cn(
-          "h-6 w-6 shrink-0",
+          "h-4 w-4 md:h-6 md:w-6 shrink-0",
           "rounded-[6px] border-2",
           error ? "border-ods-error" : "border-[var(--color-border-strong)]",
           "bg-ods-card",
@@ -58,21 +59,20 @@ const CheckboxBlock = React.forwardRef<
         <CheckboxPrimitive.Indicator
           className="flex items-center justify-center text-ods-text-on-accent"
         >
-          <CheckboxCheckmarkIcon size={10} />
+          <CheckboxCheckmarkIcon className="w-2 h-2 md:w-2.5 md:h-2.5" />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
       <div className="flex flex-1 flex-col justify-center min-w-0">
         <span className={cn(
-          "text-h4",
-          "text-ods-text-primary select-none",
-          !description && "truncate"
+          "text-h4 !leading-5 md:!leading-6",
+          "text-ods-text-primary select-none break-words"
         )}>
           {label}
         </span>
         {description && (
           <span className={cn(
-            "text-h6",
-            "text-ods-text-secondary select-none"
+            "text-h6 !leading-4",
+            "text-ods-text-secondary select-none break-words"
           )}>
             {description}
           </span>

package/src/components/ui/entity-image.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import React from 'react'
+import { cn } from '../../utils/cn'
+
+function getInitials(name?: string): string {
+  if (!name) return ''
+  const words = name.trim().split(/\s+/)
+  if (words.length === 1) return words[0].charAt(0).toUpperCase()
+  return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase()
+}
+
+export interface EntityImageProps {
+  src?: string | null
+  alt?: string
+  /** Overrides the initials source. Defaults to `alt`. */
+  fallbackText?: string
+  className?: string
+}
+
+export function EntityImage({ src, alt, fallbackText, className }: EntityImageProps) {
+  const [imageFailed, setImageFailed] = React.useState(false)
+
+  React.useEffect(() => {
+    setImageFailed(false)
+  }, [src])
+
+  const showFallback = imageFailed || !src
+  const initials = getInitials(fallbackText ?? alt)
+
+  if (showFallback) {
+    return (
+      <div
+        aria-label={alt}
+        className={cn(
+          'size-[52px] md:size-[60px] shrink-0 rounded-md border border-ods-border bg-ods-bg flex items-center justify-center text-ods-text-secondary text-h4 select-none',
+          className,
+        )}
+      >
+        {initials || '?'}
+      </div>
+    )
+  }
+
+  return (
+    <img
+      src={src ?? undefined}
+      alt={alt ?? ''}
+      onError={() => setImageFailed(true)}
+      className={cn(
+        'size-[52px] md:size-[60px] shrink-0 rounded-md border border-ods-border object-cover',
+        className,
+      )}
+    />
+  )
+}

package/src/components/ui/index.ts

@@ -72,6 +72,7 @@ export { CheckIcon, CheckCircleIcon as LucideCheckCircleIcon, XIcon as LucideXIc
 export * from './dashboard-info-card'
 export * from './device-card'
 export * from './device-card-compact'
+export * from './entity-image'
 export * from './feature-card'
 export * from './feature-list'
 export { FloatingTooltip } from './floating-tooltip'

package/src/components/ui/organization-card.tsx

@@ -4,7 +4,7 @@ import React from "react"
 import Link from "next/link"
 import { Monitor } from "lucide-react"
 import { cn } from "../../utils/cn"
-import { OrganizationIcon } from "../features/organization-icon"
+import { EntityImage } from "./entity-image"
 
 export interface Organization {
   id: string
@@ -98,13 +98,9 @@ export function OrganizationCard({
 
       {/* Header */}
       <div className="flex items-start gap-3 w-full">
-        <OrganizationIcon
-          imageUrl={fetchedImageUrl || organization.imageUrl}
-          organizationName={organization.name}
-          size="xl"
-          backgroundStyle="dark"
-          showBackground={true}
-          className="w-[60px] h-[60px]"
+        <EntityImage
+          src={fetchedImageUrl || organization.imageUrl}
+          alt={organization.name}
         />
 
         <div className="flex-1 flex flex-col justify-center py-2 min-w-0">

package/src/components/ui/release-changelog-section.tsx

@@ -14,6 +14,12 @@ interface ReleaseChangelogSectionProps {
   collapsible?: boolean;
   /** Initial collapsed state (only used when collapsible=true). Defaults to true (collapsed). */
   defaultCollapsed?: boolean;
+  /** Optional lucide icon rendered inline before the title text. Matches the
+   *  catalog card's changelog-strip icons (Sparkles for Features, Wrench for
+   *  Fixes, TrendingUp for Improvements, AlertTriangle for Breaking) — same
+   *  visual taxonomy across catalog and detail. Inherits the title's color
+   *  (secondary for normal sections, red for breaking). */
+  icon?: React.ReactNode;
   SimpleMarkdownRenderer: React.ComponentType<{ content: string }>;
 }
 
@@ -24,6 +30,7 @@ export function ReleaseChangelogSection({
   hideTitle = false,
   collapsible = false,
   defaultCollapsed = true,
+  icon,
   SimpleMarkdownRenderer
 }: ReleaseChangelogSectionProps) {
   const [collapsed, setCollapsed] = useState(collapsible ? defaultCollapsed : false);
@@ -42,6 +49,7 @@ export function ReleaseChangelogSection({
             className="flex items-center justify-between w-full cursor-pointer"
           >
             <h2 className={`flex items-center gap-2 text-2xl font-bold ${isBreaking ? 'text-red-500' : 'text-ods-text-primary'}`}>
+              {icon}
               {title}
               <Badge variant="secondary" className="ml-2">{entries.length}</Badge>
             </h2>
@@ -53,6 +61,7 @@ export function ReleaseChangelogSection({
           </button>
         ) : (
           <h2 className={`flex items-center gap-2 text-2xl font-bold ${isBreaking ? 'text-red-500' : 'text-ods-text-primary'}`}>
+            {icon}
             {title}
             <Badge variant="secondary" className="ml-2">{entries.length}</Badge>
           </h2>
@@ -62,9 +71,27 @@ export function ReleaseChangelogSection({
         <ul className="space-y-6">
           {entries.map((entry, index) => (
             <li key={index} className="border-l-2 border-ods-border pl-4 ml-0">
-              <p className="font-['DM_Sans'] font-semibold text-[20px] leading-[24px] text-ods-text-primary mb-2">{entry.title}</p>
+              {/* Entry title — `text-h3` is body family + BOLD weight (per
+                  ODS tokens: `--font-h3-weight: var(--font-weight-bold)`)
+                  at 14/18px responsive. Same body size as the description
+                  below, distinguished by weight — clean visual hierarchy
+                  without inflating the body scale. */}
+              <p className="text-h3 text-ods-text-primary mb-2">{entry.title}</p>
               {entry.description && (
-                <div className="[&_p]:!font-['DM_Sans'] [&_p]:!font-medium [&_p]:!text-[18px] [&_p]:!leading-[24px] [&_p]:!text-ods-text-primary [&_p]:!my-1">
+                /* Entry description — body text matches the main release
+                   summary (release-detail-page.tsx:321) at the SAME 14/18px
+                   responsive `text-h4` scale. The `SimpleMarkdownRenderer`
+                   forces its own `<p>` typography
+                   (`text-[16px] md:text-[18px] lg:text-[20px]`) which
+                   overrides the wrapper's `text-h4` on `lg+` viewports and
+                   inflates the changelog body to 20px — larger than the
+                   main summary AND larger than the entry title.
+                   The `[&_p]:!` overrides pin every descendant `<p>` back
+                   to the h4 responsive tokens (`var(--font-size-h4-body)`
+                   + `var(--font-line-space-h4-body)`) — same variables
+                   `text-h4` itself uses, so the responsive breakpoints
+                   stay aligned with the rest of the page. */
+                <div className="text-h4 text-ods-text-primary [&_p]:!text-[length:var(--font-size-h4-body)] [&_p]:!leading-[var(--font-line-space-h4-body)] [&_p]:!font-medium">
                   <SimpleMarkdownRenderer content={entry.description} />
                 </div>
               )}

package/src/stories/CheckboxBlock.stories.tsx

@@ -186,9 +186,7 @@ export const FlamingoError: Story = {
   },
   decorators: [
     (Story) => (
-      <div data-app-type="flamingo" style={{ width: '320px' }}>
-        <Story />
-      </div>
+      <Story />
     ),
   ],
 };