@flamingo-stack/openframe-frontend-core 0.0.396 → 0.0.397-snapshot.20260710042522

package/src/components/chat/entity-cards/blog-card.tsx

@@ -18,14 +18,16 @@
  *   `bg-ods-bg` (via the slot's background).
  */
 
-import React, { useState } from 'react'
+import React from 'react'
 import { Eye } from 'lucide-react'
 import Image from '../../../embed-shims/next-image'
 import { StatusBadge } from '../../ui/status-badge'
 import { cn } from '../../../utils/cn'
 import type { BlogPostSummary } from '../../../types/blog'
+import { EntityPortraitCard } from './entity-portrait-card'
 import { useEntityCardLink } from './use-entity-card-link'
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder'
+import { useCoverImageFallback } from './use-cover-image-fallback'
 import {
   COMPACT_CARD_IMAGE_SLOT,
   COMPACT_CARD_META_ROW_BOX,
@@ -55,7 +57,9 @@ export interface BlogCardProps {
   /** Placeholder URL when `post.featured_image` is missing. Caller
    *  resolves via `useOgPlaceholderUrl` (hub) or a static asset. */
   placeholderUrl?: string | null
-  size?: 'default' | 'sm'
+  size?: 'default' | 'sm' | 'portrait'
+  /** Portrait density: render the content-type chip. Mixed rails only; single-type rails pass false. Default true. */
+  showTypeBadge?: boolean
   className?: string
   /** Surfaces a "Video" badge in compact mode. */
   hasEmbeddedVideo?: boolean
@@ -65,7 +69,8 @@ export interface BlogCardProps {
   priority?: boolean
 }
 
-export function BlogCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm' }) {
+/** `portrait` shares the default skeleton shape (same zone boxes). */
+export function BlogCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm' | 'portrait' }) {
   if (size === 'sm') {
     return (
       <span className={COMPACT_CARD_SKELETON_OUTER}>
@@ -109,6 +114,7 @@ export function BlogCard({
   targetPlatform,
   placeholderUrl: placeholderUrlProp,
   size = 'default',
+  showTypeBadge = true,
   className,
   hasEmbeddedVideo = false,
   priority = false,
@@ -124,8 +130,8 @@ export function BlogCard({
     placeholderUrl: placeholderUrlProp,
     aspect: size === 'sm' ? 'square' : 'wide',
   })
-  const [imageError, setImageError] = useState(false)
-  const displayImage = (post.featured_image && !imageError) ? post.featured_image : placeholderUrl
+  // Shared cover → placeholder → hide chain (ONE fallback logic for all cards).
+  const { src: displayImage, onError: onImageError } = useCoverImageFallback(post.featured_image, placeholderUrl)
 
   if (size === 'sm') {
     const dateStr = post.published_at
@@ -149,7 +155,7 @@ export function BlogCard({
               sizes="56px"
               className="object-contain"
               unoptimized
-              onError={() => setImageError(true)}
+              onError={onImageError}
             />
           ) : null}
         </span>
@@ -177,6 +183,33 @@ export function BlogCard({
     )
   }
 
+  if (size === 'portrait') {
+    // Rail/strip density — shared <EntityPortraitCard> shell. Raw cover +
+    // placeholder go in separately; the shell runs the SAME shared
+    // useCoverImageFallback chain internally (so its error recovery works).
+    const dateStr = post.published_at
+      ? new Date(post.published_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', timeZone: 'UTC' })
+      : ''
+    return (
+      <EntityPortraitCard
+        href={href}
+        target={target}
+        rel={rel}
+        typeLabel={showTypeBadge ? 'Blog Post' : undefined}
+        imageUrl={post.featured_image}
+        placeholderUrl={placeholderUrl}
+        imageAlt={post.title}
+        title={post.title}
+        person={{
+          name: post.author_name || 'Anonymous',
+          avatarUrl: post.author_avatar,
+          subtitle: dateStr || null,
+        }}
+        className={className}
+      />
+    )
+  }
+
   // Default: full vertical card.
   const dateStr = post.published_at
     ? new Date(post.published_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', timeZone: 'UTC' })
@@ -215,7 +248,7 @@ export function BlogCard({
               )}
               sizes="(max-width: 768px) 100vw, (max-width: 1519px) 50vw, 33vw"
               unoptimized
-              onError={() => setImageError(true)}
+              onError={onImageError}
             />
           ) : null}
         </div>

package/src/components/chat/entity-cards/case-study-card.tsx

@@ -17,6 +17,7 @@ import Image from '../../../embed-shims/next-image'
 import { Card } from '../../ui/card'
 import { cn } from '../../../utils/cn'
 import type { CaseStudy } from '../../../types/case-study'
+import { EntityPortraitCard } from './entity-portrait-card'
 import { useEntityCardLink } from './use-entity-card-link'
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder'
 import {
@@ -32,10 +33,7 @@ import {
   COMPACT_CARD_TITLE,
   COMPACT_CARD_TITLE_ROW,
 } from '../utils/compact-card-classes'
-
-const hideOnError = (e: React.SyntheticEvent<HTMLImageElement>) => {
-  ;(e.currentTarget as HTMLImageElement).style.display = 'none'
-}
+import { hideOnError } from './use-cover-image-fallback'
 
 export interface CaseStudyCardProps {
   study: CaseStudy
@@ -48,11 +46,15 @@ export interface CaseStudyCardProps {
   targetPlatform?: string | null
   /** OG placeholder URL, used when `study.featured_image` is missing. */
   placeholderUrl?: string | null
-  size?: 'default' | 'sm'
+  size?: 'default' | 'sm' | 'portrait'
+  /** Portrait density: render the content-type chip. Mixed rails only; single-type rails pass false. Default true. */
+  showTypeBadge?: boolean
   className?: string
 }
 
-export function CaseStudyCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm' }) {
+/** `portrait` shares the default skeleton shape — the portrait anatomy uses the
+ *  same zone boxes (media aspect → 72px title → 60px person footer). */
+export function CaseStudyCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm' | 'portrait' }) {
   if (size === 'sm') {
     return (
       <span className={COMPACT_CARD_SKELETON_OUTER}>
@@ -98,6 +100,7 @@ export function CaseStudyCard({
   targetPlatform,
   placeholderUrl: placeholderUrlProp,
   size = 'default',
+  showTypeBadge = true,
   className,
 }: CaseStudyCardProps) {
   const { target, rel } = useEntityCardLink({
@@ -145,6 +148,29 @@ export function CaseStudyCard({
     )
   }
 
+  if (size === 'portrait') {
+    // Rail/strip density — shared <EntityPortraitCard> shell.
+    return (
+      <EntityPortraitCard
+        href={href}
+        target={target}
+        rel={rel}
+        typeLabel={showTypeBadge ? 'Case Study' : undefined}
+        imageUrl={study.featured_image}
+        placeholderUrl={placeholderUrl}
+        imageAlt={study.msp?.name || study.title}
+        title={study.title}
+        person={{
+          name: study.user?.full_name || 'Anonymous',
+          avatarUrl: study.user?.avatar_url,
+          subtitle: study.msp?.name ?? null,
+          iconOverlayUrl: study.msp?.icon_url ?? null,
+        }}
+        className={className}
+      />
+    )
+  }
+
   return (
     <a href={href} target={target} rel={rel} className={cn('block h-full', className)}>
       <Card className="bg-ods-card border border-ods-border hover:border-ods-accent transition-colors p-6 flex flex-col gap-6 overflow-hidden">

package/src/components/chat/entity-cards/customer-interview-card.tsx

@@ -13,6 +13,7 @@ import { Card } from '../../ui/card'
 import { cn } from '../../../utils/cn'
 import { Video } from 'lucide-react'
 import type { CustomerInterview } from '../../../types/customer-interview'
+import { EntityPortraitCard } from './entity-portrait-card'
 import { useEntityCardLink } from './use-entity-card-link'
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder'
 import {
@@ -28,10 +29,7 @@ import {
   COMPACT_CARD_TITLE,
   COMPACT_CARD_TITLE_ROW,
 } from '../utils/compact-card-classes'
-
-const hideOnError = (e: React.SyntheticEvent<HTMLImageElement>) => {
-  ;(e.currentTarget as HTMLImageElement).style.display = 'none'
-}
+import { hideOnError } from './use-cover-image-fallback'
 
 export interface CustomerInterviewCardProps {
   interview: CustomerInterview
@@ -43,11 +41,14 @@ export interface CustomerInterviewCardProps {
   targetPlatform?: string | null
   /** OG placeholder URL fallback when `interview.featured_image` is missing. */
   placeholderUrl?: string | null
-  size?: 'default' | 'sm'
+  size?: 'default' | 'sm' | 'portrait'
+  /** Portrait density: render the content-type chip. Mixed rails only; single-type rails pass false. Default true. */
+  showTypeBadge?: boolean
   className?: string
 }
 
-export function CustomerInterviewCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm' }) {
+/** `portrait` shares the default skeleton shape (same zone boxes). */
+export function CustomerInterviewCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm' | 'portrait' }) {
   if (size === 'sm') {
     return (
       <span className={COMPACT_CARD_SKELETON_OUTER}>
@@ -98,6 +99,7 @@ export function CustomerInterviewCard({
   targetPlatform,
   placeholderUrl: placeholderUrlProp,
   size = 'default',
+  showTypeBadge = true,
   className,
 }: CustomerInterviewCardProps) {
   const { target, rel } = useEntityCardLink({
@@ -150,6 +152,29 @@ export function CustomerInterviewCard({
     )
   }
 
+  if (size === 'portrait') {
+    // Rail/strip density — shared <EntityPortraitCard> shell.
+    return (
+      <EntityPortraitCard
+        href={href}
+        target={target}
+        rel={rel}
+        typeLabel={showTypeBadge ? 'Customer Interview' : undefined}
+        imageUrl={interview.featured_image}
+        placeholderUrl={placeholderUrl}
+        imageAlt={interview.title}
+        title={interview.title}
+        person={{
+          name: interview.user?.full_name || 'Customer',
+          avatarUrl: interview.user?.avatar_url,
+          subtitle: interview.msp?.name ?? null,
+          iconOverlayUrl: interview.msp?.icon_url ?? null,
+        }}
+        className={className}
+      />
+    )
+  }
+
   return (
     <a href={href} target={target} rel={rel} className={cn('block h-full', className)}>
       <Card className="bg-ods-card border border-ods-border hover:border-ods-accent transition-colors p-6 flex flex-col gap-6 overflow-hidden">

package/src/components/chat/entity-cards/entity-portrait-card.tsx

@@ -0,0 +1,201 @@
+'use client'
+
+/**
+ * <EntityPortraitCard> — THE portrait (rail/strip) card anatomy, shared by
+ * EVERY entity card's `size="portrait"` density (case study, blog post,
+ * customer interview, program, investor update, onboarding guide, …).
+ *
+ * One rail = one anatomy (2026 card-UI practice): identical zone boxes across
+ * all content types —
+ *   media  : aspect-[1200/630] slot + content-type chip overlay
+ *   title  : fixed 72px zone, 3-line clamp (typography per entity via
+ *            `titleClassName` — e.g. Azeret Mono for programs)
+ *   footer : fixed 60px person zone (author avatar + name + subtitle, with
+ *            the optional bottom-right icon overlay — the case-study MSP
+ *            pattern)
+ * Card surface, padding (p-6/gap-6) and the hover treatment (accent border +
+ * accent shadow) are encoded HERE exactly once, so no per-card drift is
+ * possible. Entity cards only MAP their row onto these props.
+ *
+ * Media rule ("our common way"): the REAL cover always wins. Wide covers
+ * (OG-style 1200×630) fill the slot `object-cover`; a non-wide cover (square
+ * podcast artwork) renders contained on an `useImageEdgeColor` background —
+ * the SAME edge-sampled fill the media/news cards use (OGLinkPreview) — never
+ * a flat filler and never the generic placeholder while a real image exists.
+ * The cover → placeholder → hide resolution is the shared
+ * `useCoverImageFallback` chain (one fallback logic for all entity cards).
+ *
+ * The content-type chip is the common <StatusBadge> and lives ABOVE the title
+ * (an eyebrow inside the title zone), never overlaid on the artwork — branded
+ * covers carry their own marks (Flamingo logo top-left) that an overlay would
+ * collide with.
+ */
+
+import React, { useEffect, useState } from 'react'
+import Image from '../../../embed-shims/next-image'
+import { Card } from '../../ui/card'
+import { StatusBadge } from '../../ui/status-badge'
+import { useImageEdgeColor } from '../../../hooks/ui/use-image-edge-color'
+import { useCoverImageFallback } from './use-cover-image-fallback'
+import { cn } from '../../../utils/cn'
+
+/** Sources narrower than this are "not wide" → contained on the edge-color
+ *  fill. Wide covers are 1200/630 ≈ 1.9; squares are 1.0; 1.3 splits safely. */
+const MIN_WIDE_RATIO = 1.3
+
+export interface EntityPortraitPerson {
+  name: string
+  avatarUrl?: string | null
+  subtitle?: string | null
+  /** Small round overlay on the avatar's bottom-right corner (e.g. MSP icon). */
+  iconOverlayUrl?: string | null
+}
+
+export interface EntityPortraitCardProps {
+  href: string
+  target?: '_blank'
+  rel?: string
+  /** Content-type chip ('Case Study', 'Podcast', …). OMIT to hide the chip —
+   *  single-type rails don't need per-card type identification; only mixed
+   *  rails pass it. */
+  typeLabel?: string
+  imageUrl?: string | null
+  /** Branded wide OG fallback — used when `imageUrl` is missing, errors, or
+   *  isn't wide. */
+  placeholderUrl?: string | null
+  imageAlt: string
+  title: string
+  /** Typography override for the title (entity identity), zone box unchanged. */
+  titleClassName?: string
+  person?: EntityPortraitPerson | null
+  className?: string
+}
+
+export function EntityPortraitCard({
+  href,
+  target,
+  rel,
+  typeLabel,
+  imageUrl,
+  placeholderUrl,
+  imageAlt,
+  title,
+  titleClassName,
+  person,
+  className,
+}: EntityPortraitCardProps) {
+  const { src, onError: onMediaError } = useCoverImageFallback(imageUrl, placeholderUrl)
+  // null = unknown (assume wide until the image reports its natural size).
+  const [isWide, setIsWide] = useState<boolean | null>(null)
+  useEffect(() => {
+    // Re-detect whenever the resolved source changes (prop change OR the
+    // fallback chain advancing to the placeholder).
+    setIsWide(null)
+  }, [src])
+
+  const onMediaLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    const img = e.currentTarget
+    if (img.naturalWidth > 0 && img.naturalHeight > 0) {
+      setIsWide(img.naturalWidth / img.naturalHeight >= MIN_WIDE_RATIO)
+    }
+  }
+
+  // Edge-sampled slot fill for non-wide covers — the SAME hook/fallback the
+  // media/news cards use (og-link-preview.tsx).
+  const edgeColor = useImageEdgeColor(isWide === false ? src : null, 'var(--ods-bg-secondary)')
+
+  return (
+    <a href={href} target={target} rel={rel} className={cn('block h-full', className)} aria-label={`Open ${title}`}>
+      <Card className="bg-ods-card border border-ods-border hover:border-ods-accent hover:shadow-lg hover:shadow-ods-accent/[0.08] transition-all duration-200 p-6 flex flex-col gap-6 overflow-hidden h-full">
+        {/* Media zone — the real cover always wins: wide → cover-fill;
+            non-wide → contained on the edge-color fill (news-card treatment). */}
+        <div
+          className="relative w-full aspect-[1200/630] rounded-sm overflow-hidden bg-ods-bg shrink-0 flex items-center justify-center transition-colors duration-300"
+          style={isWide === false ? { backgroundColor: edgeColor } : undefined}
+        >
+          {src && (
+            <Image
+              src={src}
+              alt={imageAlt}
+              className={cn('w-full h-full', isWide === false ? 'object-contain' : 'object-cover')}
+              sizes="(min-width: 800px) 400px, 100vw"
+              fill
+              unoptimized
+              onLoad={onMediaLoad}
+              onError={onMediaError}
+            />
+          )}
+        </div>
+
+        {/* Title zone — fixed box. Mixed rails: common StatusBadge eyebrow +
+            2-line title (chip lives here, never on the artwork). Single-type
+            rails (no typeLabel): centered 3-line title. */}
+        <div className="h-[72px] flex flex-col justify-center gap-1.5 shrink-0">
+          {typeLabel && (
+            <StatusBadge
+              variant="button"
+              colorScheme="accentBorder"
+              singleLine
+              text={typeLabel}
+              className="self-start"
+            />
+          )}
+          <h3
+            className={cn(
+              'text-h4 leading-6 text-ods-text-primary break-words',
+              typeLabel ? 'line-clamp-2' : 'line-clamp-3',
+              titleClassName,
+            )}
+          >
+            {title}
+          </h3>
+        </div>
+
+        {/* Person/footer zone — fixed box (kept even when empty so every card
+            in a rail shares baselines). */}
+        <div className="h-[60px] flex items-center shrink-0">
+          {person && (
+            <div className="flex items-center gap-3 min-w-0 w-full">
+              <div className="relative shrink-0 w-12 h-12">
+                {person.avatarUrl ? (
+                  <Image
+                    src={person.avatarUrl}
+                    alt={person.name}
+                    className="w-12 h-12 rounded-full object-cover bg-ods-bg border border-ods-border"
+                    width={48}
+                    height={48}
+                    unoptimized
+                  />
+                ) : (
+                  <div className="w-12 h-12 rounded-full bg-ods-bg border border-ods-border flex items-center justify-center">
+                    <span className="text-ods-text-secondary font-medium text-xl">
+                      {person.name.charAt(0).toUpperCase()}
+                    </span>
+                  </div>
+                )}
+                {person.iconOverlayUrl && (
+                  <div className="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-ods-text-primary ring-1 ring-ods-bg overflow-hidden flex items-center justify-center">
+                    <Image
+                      src={person.iconOverlayUrl}
+                      alt=""
+                      className="w-full h-full object-cover"
+                      width={24}
+                      height={24}
+                      unoptimized
+                    />
+                  </div>
+                )}
+              </div>
+              <div className="flex flex-col min-w-0">
+                <span className="font-['DM_Sans'] font-bold text-ods-text-primary truncate">{person.name}</span>
+                {person.subtitle && (
+                  <span className="font-['DM_Sans'] text-sm text-ods-text-secondary truncate">{person.subtitle}</span>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </Card>
+    </a>
+  )
+}

package/src/components/chat/entity-cards/index.ts

@@ -16,6 +16,16 @@ export {
   type EntityAuthorCardProps,
 } from './entity-author-card'
 export { BlogImagePlaceholder } from './blog-image-placeholder'
+export {
+  EntityPortraitCard,
+  type EntityPortraitCardProps,
+  type EntityPortraitPerson,
+} from './entity-portrait-card'
+export {
+  useCoverImageFallback,
+  hideOnError,
+  type CoverImageFallback,
+} from './use-cover-image-fallback'
 export { AdminContentCard } from './admin-content-card'
 export { WhatIShippedCard, WhatIShippedCardSkeleton } from './what-i-shipped-card'
 export type { WhatIShippedCardData, WhatIShippedCardProps } from './what-i-shipped-card'
@@ -133,3 +143,11 @@ export {
   type ChatCardRenderOptions,
   type ChatCardDispatchExtras,
 } from './dispatch'
+
+// Program author-ref + video-bites profile adapter — re-exported through the
+// PACKAGE-EXPORTED chat barrel so the hub can value-import them (deep paths
+// into chat/types/* are not in the package exports map and 404 at runtime).
+export {
+  programItemToStripProfile,
+  type ProgramAuthorRef,
+} from '../types/entities/program-types'

package/src/components/chat/entity-cards/investor-update-card.tsx

@@ -11,6 +11,7 @@
 import React from 'react'
 import { Calendar } from 'lucide-react'
 import { AdminContentCard } from './admin-content-card'
+import { EntityPortraitCard } from './entity-portrait-card'
 import { formatInvestorUpdatePeriod, type InvestorUpdate } from '../types/entities/investor-update'
 import { useEntityCardLink } from './use-entity-card-link'
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder'
@@ -38,11 +39,14 @@ export interface InvestorUpdateCardProps {
   targetPlatform?: string | null
   /** OG placeholder URL used when `update.featured_image` is missing. */
   placeholderUrl?: string | null
-  size?: 'default' | 'sm'
+  size?: 'default' | 'sm' | 'portrait'
+  /** Portrait density: render the content-type chip. Mixed rails only; single-type rails pass false. Default true. */
+  showTypeBadge?: boolean
   className?: string
 }
 
-export function InvestorUpdateCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm' }) {
+/** `portrait` shares the default skeleton shape (same zone boxes). */
+export function InvestorUpdateCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm' | 'portrait' }) {
   if (size === 'sm') {
     return (
       <span className={COMPACT_CARD_SKELETON_OUTER}>
@@ -83,6 +87,7 @@ export function InvestorUpdateCard({
   targetPlatform,
   placeholderUrl: placeholderUrlProp,
   size = 'default',
+  showTypeBadge = true,
   className,
 }: InvestorUpdateCardProps) {
   const { target, rel } = useEntityCardLink({
@@ -144,6 +149,27 @@ export function InvestorUpdateCard({
     )
   }
 
+  if (size === 'portrait') {
+    // Rail/strip density — shared <EntityPortraitCard> shell. The reporting
+    // period is the meaningful footer line (no fabricated author — no avatar
+    // renders an initial circle).
+    const periodText = formatInvestorUpdatePeriod(update.period_start, update.period_end)
+    return (
+      <EntityPortraitCard
+        href={href}
+        target={target}
+        rel={rel}
+        typeLabel={showTypeBadge ? 'Investor Update' : undefined}
+        imageUrl={update.featured_image}
+        placeholderUrl={placeholderUrl}
+        imageAlt={update.title ?? 'Investor update'}
+        title={update.title || `Update #${update.update_number ?? '?'}`}
+        person={periodText ? { name: periodText } : null}
+        className={className}
+      />
+    )
+  }
+
   return (
     <a href={href} target={target} rel={rel} className={`block h-full ${className ?? ''}`}>
       <AdminContentCard

package/src/components/chat/entity-cards/onboarding-guide-card.tsx

@@ -24,6 +24,7 @@ import { Clock, ExternalLink, GraduationCap, Play } from 'lucide-react'
 import { cn } from '../../../utils/cn'
 import { BlogImagePlaceholder } from './blog-image-placeholder'
 import { EntityAuthorCard } from './entity-author-card'
+import { EntityPortraitCard } from './entity-portrait-card'
 import { formatDurationMMSS } from '../../../utils/format'
 import type { OnboardingGuide } from '../types/entities/onboarding-guide'
 import { useEntityCardLink } from './use-entity-card-link'
@@ -52,7 +53,10 @@ export interface OnboardingGuideCardProps {
   targetPlatform?: string | null
   /** OG placeholder URL used by the catalog + sm variants when no cover. */
   placeholderUrl?: string | null
-  size?: 'catalog' | 'default' | 'sm'
+  size?: 'catalog' | 'default' | 'sm' | 'portrait'
+  /** Portrait density: render the content-type chip. Mixed rails only; single-type rails pass false. Default true. */
+  showTypeBadge?: boolean
+| 'default' | 'sm' | 'portrait'
   className?: string
 }
 
@@ -169,6 +173,7 @@ export function OnboardingGuideCard({
   targetPlatform,
   placeholderUrl: placeholderUrlProp,
   size = 'default',
+  showTypeBadge = true,
   className,
 }: OnboardingGuideCardProps) {
   const { target, rel } = useEntityCardLink({
@@ -183,6 +188,30 @@ export function OnboardingGuideCard({
     aspect: size === 'sm' ? 'square' : 'wide',
   })
 
+  if (size === 'portrait') {
+    // Rail/strip density — shared <EntityPortraitCard> shell. Same cover
+    // chain as the catalog variant.
+    const coverImage =
+      guide.featured_image ||
+      guide.main_video_thumbnail ||
+      guide.og_image_url ||
+      null
+    return (
+      <EntityPortraitCard
+        href={href}
+        target={target}
+        rel={rel}
+        typeLabel={showTypeBadge ? 'Guide' : undefined}
+        imageUrl={coverImage}
+        placeholderUrl={placeholderUrl}
+        imageAlt={guide.title}
+        title={guide.title}
+        person={guide.section ? { name: guide.section } : null}
+        className={className}
+      />
+    )
+  }
+
   if (size === 'catalog') {
     const coverImage =
       guide.featured_image ||