@flamingo-stack/openframe-frontend-core 0.0.204 → 0.0.205

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

@@ -1,13 +1,12 @@
 'use client'
 
 import React from 'react'
-import Image from 'next/image'
+import Image from '../../../embed-shims/next-image'
 import { InteractiveCard } from '../../ui/interactive-card'
 import { StatusBadge } from '../../ui/status-badge'
 import { SquareAvatar } from '../../ui/square-avatar'
 import {
   AlertTriangle,
-  ChevronRight,
   Eye,
   Package,
   Play,
@@ -18,21 +17,28 @@ import {
 import { cn } from '../../../utils/cn'
 
 /**
- * Card density:
- * - `default`: full /releases page row (vertical title + description on the
- *   left, version + date column on the right).
- * - `sm`: compact horizontal layout (~80px tall) sized for inline rendering
- *   inside chat messages and other tight surfaces. Drops `<h3>` (block-only,
+ * Card density. Two variants, both actively used across openframe + flamingo
+ * apps and the related-content rail:
+ *
+ * - `lg`: rich large card used everywhere a product release is the focal
+ *   item — openframe's `/releases` catalog row, flamingo's DevCenter tab,
+ *   investor-update related-content section. 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 lg
+ *   branch comment).
+ *
+ * - `sm`: compact horizontal layout (~80px tall) for inline rendering inside
+ *   chat messages and other tight surfaces. Drops `<h3>` (block-only,
  *   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).
+ *
+ * A previous `default` variant (vertical title+description / version+date
+ * column) was deleted in the 2026-05 DRY pass — it had a single consumer
+ * (the hub's RelatedContentSection) that has since moved to `lg`.
  */
-export type ProductReleaseCardSize = 'default' | 'sm' | 'catalog'
+export type ProductReleaseCardSize = 'lg' | 'sm'
 
 /**
  * Minimal structural `<a>` prop bundle the consumer composes (typically
@@ -80,7 +86,7 @@ export interface ProductReleaseCardProps {
   anchorProps?: ProductReleaseCardAnchorProps
   /** Additional CSS classes */
   className?: string
-  /** Card density. Defaults to `'default'`. */
+  /** Card density. Defaults to `'lg'` (the canonical large card). */
   size?: ProductReleaseCardSize
 
   // ─── Catalog-only props (ignored by `default` / `sm` branches) ─────────
@@ -125,7 +131,7 @@ export function ProductReleaseCard({
   onClick,
   anchorProps,
   className,
-  size = 'default',
+  size = 'lg',
   coverImage,
   hasVideoCover,
   releaseType,
@@ -135,7 +141,7 @@ export function ProductReleaseCard({
   author,
   changelogCounts,
 }: ProductReleaseCardProps) {
-  // ----- CATALOG branch (rich /releases catalog row) -------------------------
+  // ----- LG branch (rich /releases catalog row + related-content rail) -----
   // The card has THREE zones:
   //   1. Hero — cover image LEFT, version pill + title + summary RIGHT.
   //   2. Changelog strip — icons + counts (hidden when total === 0).
@@ -145,11 +151,11 @@ export function ProductReleaseCard({
   //      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') {
+  //      documented for the COMPACT_CARD_* string set in the chat-card
+  //      file. If the hub's <EntityAuthorCard> visual changes (cell
+  //      padding, divider styles, avatar size, etc.), update this branch
+  //      in lockstep.
+  if (size === 'lg') {
     const totalChangelog =
       (changelogCounts?.features ?? 0) +
       (changelogCounts?.fixes ?? 0) +
@@ -556,99 +562,8 @@ export function ProductReleaseCard({
     )
   }
 
-  // ----- DEFAULT branch (existing /releases card layout) -----------------
-  // When `anchorProps` is supplied, the card behaves like every other
-  // entity card on the related-content rail — real `<a>` with the
-  // consumer's `useNavLink` bundle (cross-origin → new tab, same-origin
-  // → soft RSC nav, modifier-click → browser default). The
-  // `<InteractiveCard onClick>` form remains the back-compat path for
-  // the public `/releases` tab caller which still routes via
-  // `router.push()` directly.
-  if (anchorProps) {
-    return (
-      <a
-        {...anchorProps}
-        className={cn(
-          'bg-ods-card border border-ods-border rounded-[6px]',
-          'flex flex-col md:flex-row',
-          'items-start md:items-center',
-          'gap-3 md:gap-4',
-          'p-4 no-underline',
-          'transition-colors hover:border-ods-text-secondary/40',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-1 focus-visible:ring-offset-ods-card',
-          className,
-        )}
-      >
-        {/* Left column - content */}
-        <div className="flex-1 w-full md:w-auto min-w-0 flex flex-col justify-center gap-2">
-          <div className="min-h-[48px] flex items-center">
-            <h3 className="text-h3 text-ods-text-primary tracking-[-0.36px] line-clamp-2" title={title}>
-              {title}
-            </h3>
-          </div>
-          <p className="text-h4 text-ods-text-secondary line-clamp-3" title={summary || ' '}>
-            {summary || ' '}
-          </p>
-        </div>
-        <div className="flex items-center gap-2 w-full md:w-auto justify-start md:justify-end shrink-0">
-          <div className="w-[200px] flex flex-col justify-center gap-2">
-            <p className="text-h3 text-ods-text-primary tracking-[-0.36px] truncate">
-              {version}
-            </p>
-            <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary truncate">
-              {formattedDate}
-            </p>
-          </div>
-          <div className="flex items-center justify-center p-3 shrink-0">
-            <ChevronRight className="h-6 w-6 text-ods-text-primary" />
-          </div>
-        </div>
-      </a>
-    )
-  }
-  return (
-    <InteractiveCard
-      clickable={true}
-      onClick={onClick}
-      className={cn(
-        'bg-ods-card border border-ods-border rounded-[6px]',
-        'flex flex-col md:flex-row',
-        'items-start md:items-center',
-        'gap-3 md:gap-4',
-        'p-4',
-        className
-      )}
-    >
-      {/* Left column - content */}
-      <div className="flex-1 w-full md:w-auto min-w-0 flex flex-col justify-center gap-2">
-        <div className="min-h-[48px] flex items-center">
-          <h3 className="text-h3 text-ods-text-primary tracking-[-0.36px] line-clamp-2" title={title}>
-            {title}
-          </h3>
-        </div>
-        <p className="text-h4 text-ods-text-secondary line-clamp-3" title={summary || ' '}>
-          {summary || ' '}
-        </p>
-      </div>
-
-      {/* Right column - version + date */}
-      <div
-        className="flex items-center gap-2 w-full md:w-auto justify-start md:justify-end shrink-0"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="w-[200px] flex flex-col justify-center gap-2">
-          <p className="text-h3 text-ods-text-primary tracking-[-0.36px] truncate">
-            {version}
-          </p>
-          <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary truncate">
-            {formattedDate}
-          </p>
-        </div>
-        {/* Icon column */}
-        <div className="flex items-center justify-center p-3 shrink-0">
-          <ChevronRight className="h-6 w-6 text-ods-text-primary" />
-        </div>
-      </div>
-    </InteractiveCard>
-  )
+  // Unreachable — `size` is typed `'lg' | 'sm'` and both branches return
+  // above. Kept as a defensive throw so a future variant addition that
+  // forgets to return doesn't silently render `undefined`.
+  throw new Error(`ProductReleaseCard: unsupported size '${size as string}'`)
 }

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect, ComponentType } from 'react';
-import Link from 'next/link';
+import Link from '../../../embed-shims/next-link';
 import { Card, CardContent } from '../../ui/card';
 import { ArticleDetailLayout } from '../../layout/article-detail-layout';
 import { ReleaseChangelogSection } from '../../ui/release-changelog-section';
@@ -11,6 +11,7 @@ import { ImageGalleryModal } from '../../ui/image-gallery-modal';
 import { GitHubIcon } from '../../icons/github-icon';
 import { AlertTriangle, ExternalLink, BookMarked, Sparkles, TrendingUp, Wrench } from 'lucide-react';
 import { formatReleaseDate } from '../../../utils/date-formatters';
+import { nameInitials } from '../../../utils/format';
 import { Video } from '../../features/video';
 import { DetailPageSkeleton } from '../detail-page-skeleton';
 import type { ChangelogEntry } from '../../../types/product-release';
@@ -21,10 +22,15 @@ export interface MarkdownRendererProps {
   content: string;
 }
 
-export interface RoadmapItem {
-  id: string;
-  [key: string]: unknown;
-}
+// Canonical RoadmapItem shape lives in chat entity types — see
+// `src/components/chat/types/entities/roadmap-item.ts`. The product-release
+// detail page previously declared a structural placeholder
+// (`{ id; [k: string]: unknown }`) that conflicted with the canonical
+// shape once the entities barrel was added; re-exporting the canonical
+// type fixes the collision while keeping the same import path for
+// downstream consumers of `./release-detail-page`.
+export type { RoadmapItem } from '../../chat/types/entities/roadmap-item';
+import type { RoadmapItem } from '../../chat/types/entities/roadmap-item';
 
 export interface DeliveryResponse {
   completed: unknown[];
@@ -168,16 +174,6 @@ export function ReleaseDetailPage({
 
   const hasBreakingChanges = Array.isArray(release.breaking_changes) && release.breaking_changes.length > 0;
 
-  // Get initials from full name
-  const getInitials = (name: string) => {
-    return name
-      .split(' ')
-      .map(n => n[0])
-      .join('')
-      .toUpperCase()
-      .slice(0, 2);
-  };
-
   // Type assertions for release data
   const releaseTitle = release.title as string;
   const releaseVersion = release.version as string;
@@ -277,7 +273,7 @@ export function ReleaseDetailPage({
             <SquareAvatar
               src={author?.avatar_url || ''}
               alt={author?.full_name || 'Author'}
-              fallback={getInitials(author?.full_name || 'Unknown')}
+              fallback={nameInitials(author?.full_name || 'Unknown', '')}
               size="md"
               variant="round"
             />

package/src/components/ui/actions-menu.tsx

@@ -2,7 +2,7 @@
 
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check } from "lucide-react";
-import Link from "next/link";
+import Link from "../../embed-shims/next-link";
 import React, { useCallback, useState } from "react";
 import { Chevron02RightIcon, Ellipsis01Icon } from "../icons-v2-generated";
 import { cn } from "../../utils/cn";

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

@@ -2,7 +2,7 @@
 
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
-import Link from "next/link"
+import Link from "../../../embed-shims/next-link"
 import React from "react"
 
 import { cn } from "../../../utils/cn"
@@ -123,6 +123,19 @@ interface ButtonProps
   href?: string
   openInNewTab?: boolean
   prefetch?: boolean
+  /**
+   * Pre-resolved anchor bundle (from `useNavLink({ href, targetPlatform })`).
+   * When set, renders the Button as `<Link>` with `href` / `target` / `rel`
+   * / `onClick` spread from this object. Lets callers thread the unified
+   * nav decision directly without `<Button asChild><a {...linkProps}/>`
+   * gymnastics. Wins over the separate `href` / `openInNewTab` props.
+   */
+  linkProps?: {
+    href: string
+    target?: '_blank'
+    rel?: 'noopener noreferrer'
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>
+  } | null
   leftIcon?: React.ReactNode
   rightIcon?: React.ReactNode
   /**
@@ -158,6 +171,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
     href,
     openInNewTab,
     prefetch,
+    linkProps,
     leftIcon,
     rightIcon,
     splitIcon,
@@ -205,17 +219,26 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
       </>
     )
 
-    if (href) {
+    // `linkProps` (the pre-resolved bundle from `useNavLink({ href, targetPlatform })`)
+    // wins over the legacy `href` + `openInNewTab` props so callers can thread
+    // the unified nav decision directly. Either path produces the same `<Link>`.
+    const splitAnchor = linkProps ?? (href ? {
+      href,
+      target: openInNewTab ? '_blank' as const : undefined,
+      rel: openInNewTab ? 'noopener noreferrer' as const : undefined,
+      onClick: onClick as unknown as React.MouseEventHandler<HTMLAnchorElement> | undefined,
+    } : null)
+    if (splitAnchor) {
       return (
         <Link
-          href={href}
+          href={splitAnchor.href}
           prefetch={prefetch}
-          target={openInNewTab ? "_blank" : undefined}
-          rel={openInNewTab ? "noopener noreferrer" : undefined}
+          target={splitAnchor.target}
+          rel={splitAnchor.rel}
           aria-disabled={isDisabled || undefined}
           tabIndex={isDisabled ? -1 : undefined}
           className={cn(shellClasses, isDisabled && "pointer-events-none")}
-          onClick={onClick as unknown as React.MouseEventHandler<HTMLAnchorElement> | undefined}
+          onClick={splitAnchor.onClick}
         >
           {splitContent}
         </Link>
@@ -263,17 +286,24 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
     </>
   )
 
-  if (href) {
+  // Same `linkProps`-wins-over-href resolution as the splitIcon branch.
+  const anchor = linkProps ?? (href ? {
+    href,
+    target: openInNewTab ? '_blank' as const : undefined,
+    rel: openInNewTab ? 'noopener noreferrer' as const : undefined,
+    onClick: onClick as unknown as React.MouseEventHandler<HTMLAnchorElement> | undefined,
+  } : null)
+  if (anchor) {
     return (
       <Link
-        href={href}
+        href={anchor.href}
         prefetch={prefetch}
-        target={openInNewTab ? "_blank" : undefined}
-        rel={openInNewTab ? "noopener noreferrer" : undefined}
+        target={anchor.target}
+        rel={anchor.rel}
         aria-disabled={isDisabled || undefined}
         tabIndex={isDisabled ? -1 : undefined}
         className={cn(classes, isDisabled && "pointer-events-none")}
-        onClick={onClick as unknown as React.MouseEventHandler<HTMLAnchorElement> | undefined}
+        onClick={anchor.onClick}
       >
         {content}
       </Link>

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

@@ -1,7 +1,7 @@
 "use client"
 
 import { cva, type VariantProps } from "class-variance-authority"
-import Link from "next/link"
+import Link from "../../../embed-shims/next-link"
 import React from "react"
 
 import { cn } from "../../../utils/cn"

package/src/components/ui/dashboard-info-card.tsx

@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import Link from 'next/link'
+import Link from '../../embed-shims/next-link'
 import { cn } from '../../utils/cn'
 import { QuestionCircleIcon } from '../icons-v2-generated/signs-and-symbols/question-circle-icon'
 import { CircularProgress, type CircularProgressOverflow, type CircularProgressVariant } from './circular-progress'
@@ -100,8 +100,7 @@ export function DashboardInfoCard({
         className={cn(
           baseClassName,
           'cursor-pointer group',
-          'hover:border-ods-accent',
-          '[&:hover_.text-ods-text-primary]:text-ods-accent',
+          'hover:border-ods-border-hover hover:bg-ods-card-hover',
           className
         )}
       >

package/src/components/ui/data-table/data-table-row.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import Link from 'next/link'
+import Link from '../../../embed-shims/next-link'
 import React, { memo, useCallback, useRef, type ReactNode } from 'react'
 import { flexRender, type Row } from '@tanstack/react-table'
 import { cn } from '../../../utils/cn'

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

@@ -2,13 +2,7 @@
 
 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()
-}
+import { getFirstLastInitials } from '../../utils/format'
 
 export interface EntityImageProps {
   src?: string | null
@@ -26,7 +20,7 @@ export function EntityImage({ src, alt, fallbackText, className }: EntityImagePr
   }, [src])
 
   const showFallback = imageFailed || !src
-  const initials = getInitials(fallbackText ?? alt)
+  const initials = getFirstLastInitials(fallbackText ?? alt)
 
   if (showFallback) {
     return (