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

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

@@ -0,0 +1,193 @@
+import { SquareAvatar } from '../../ui/square-avatar'
+import { formatDate, nameInitials } from '../../../utils/format'
+
+/**
+ * Author + publication metadata, rendered as the SAME 2-or-N-cell grid pattern
+ * the release detail page uses.
+ *
+ * Each cell sits inside a single bordered/rounded container, separated by
+ * `border-r` dividers — byte-identical visual contract to the release page.
+ *
+ * Cell taxonomy:
+ *   - `<EntityMetadataValueCell>` — top: large value (`text-h4` uppercase),
+ *     bottom: small label (`DM_Sans` 14px secondary). Used for Type / Status
+ *     / Date.
+ *   - `<EntityMetadataAuthorCell>` — `<SquareAvatar>` + name + label. Used
+ *     for the Author column.
+ *
+ * `<EntityAuthorCard>` is the convenience composer for the common
+ * "Published + Author" pair. Pass `publishedAt` to get both cells; omit it
+ * to get just the Author card (single-cell mode used by surfaces with no
+ * separate publication-date concept).
+ *
+ * Renders null when `author` is null/empty unless `renderEmptyAuthor` is set.
+ */
+/**
+ * Documented empty-author placeholder. Single source for the visual
+ * shape of "author cell with no author".
+ */
+export const EMPTY_AUTHOR_PLACEHOLDER = {
+  full_name: '—',
+  avatar_url: null,
+  job_title: 'Unknown',
+} as const
+
+export interface EntityAuthorCardProps {
+  author: {
+    full_name: string | null
+    avatar_url: string | null
+    job_title: string | null
+  } | null | undefined
+  /** Role label rendered under the name. Defaults to "Author". Override
+   *  to e.g. "Presenter" / "Contributor" if semantics differ. */
+  roleLabel?: string
+  /** Optional publication date. When provided, the component renders as a
+   *  2-cell grid (Published | Author). When omitted, only the Author cell
+   *  renders inside the same bordered container. */
+  publishedAt?: string | Date | null
+  /** Label for the Published cell. Defaults to "Published". */
+  publishedLabel?: string
+  /**
+   * Extra value cells inserted into the metadata grid BEFORE the
+   * Published cell. Each item renders as an `<EntityMetadataValueCell>`
+   * with a large `text-h4` value and a small `DM_Sans` 14px label.
+   *
+   * Use for entity-specific labels (e.g. onboarding-guide section/step,
+   * webinar host, customer-interview customer). The grid auto-sizes via
+   * `grid-cols-N`.
+   */
+  extraCells?: Array<{ value: string; label: string; uppercase?: boolean }>
+  /** When true, render the author cell even when `author?.full_name` is
+   *  missing — using the `EMPTY_AUTHOR_PLACEHOLDER` shape above. Used by
+   *  catalog grids that must keep a fixed shape so skeleton alignment
+   *  holds. Defaults to false. */
+  renderEmptyAuthor?: boolean
+  className?: string
+}
+
+
+/**
+ * Single value cell — top: large `text-h4` value (uppercase), bottom: small
+ * `DM_Sans` 14px secondary label.
+ */
+export function EntityMetadataValueCell({
+  value,
+  label,
+  className,
+  uppercase = true,
+}: {
+  value: string
+  label: string
+  className?: string
+  uppercase?: boolean
+}) {
+  return (
+    <div className={`bg-ods-card p-4 flex flex-col gap-3 ${className ?? ''}`}>
+      <div className="flex flex-col gap-0">
+        <p className="text-h4 text-ods-text-primary">
+          {uppercase ? value.toLocaleUpperCase() : value}
+        </p>
+        <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">
+          {label}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Author cell — `<SquareAvatar>` + name + role label. The containing border /
+ * divider is the caller's responsibility — this is just the cell content.
+ */
+export function EntityMetadataAuthorCell({
+  author,
+  roleLabel = 'Author',
+  className,
+}: {
+  author: NonNullable<EntityAuthorCardProps['author']>
+  roleLabel?: string
+  className?: string
+}) {
+  const fullName = author.full_name || 'Unknown Author'
+  return (
+    <div className={`bg-ods-card p-4 flex items-center gap-3 ${className ?? ''}`}>
+      <SquareAvatar
+        src={author.avatar_url || ''}
+        alt={fullName}
+        fallback={nameInitials(fullName, '')}
+        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">
+          {fullName}
+        </p>
+        <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">
+          {author.job_title || roleLabel}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export function EntityAuthorCard({
+  author,
+  roleLabel = 'Author',
+  publishedAt,
+  publishedLabel = 'Published',
+  extraCells,
+  renderEmptyAuthor = false,
+  className,
+}: EntityAuthorCardProps) {
+  const hasAuthor = !!author?.full_name
+  if (!hasAuthor && !renderEmptyAuthor) return null
+  const effectiveAuthor = hasAuthor ? (author as NonNullable<EntityAuthorCardProps['author']>) : EMPTY_AUTHOR_PLACEHOLDER
+
+  // Resolve the date label. `formatDate` returns "Invalid Date" for
+  // unparseable inputs; collapse that to empty so the cell is hidden, not
+  // literal text.
+  const formatted = publishedAt ? formatDate(publishedAt as Date | string) : ''
+  const dateLabel = formatted === 'Invalid Date' ? '' : formatted
+
+  const showDateCell = !!dateLabel
+  const extras = extraCells ?? []
+  // Total cell count = extras + (optional Published) + Author. Map to
+  // an explicit tailwind `md:grid-cols-N` class string so JIT picks it
+  // up at build time.
+  const totalCells = extras.length + (showDateCell ? 1 : 0) + 1
+  const gridColsClass =
+    totalCells >= 4 ? 'md:grid-cols-4'
+    : totalCells === 3 ? 'md:grid-cols-3'
+    : totalCells === 2 ? 'md:grid-cols-2'
+    : 'md:grid-cols-1'
+
+  // Helper — every cell EXCEPT the last needs the dividers (bottom on
+  // mobile, right on desktop). The last cell (Author) closes the grid
+  // without a trailing divider so the rounded corner stays clean.
+  const dividerClass = 'border-b md:border-b-0 md:border-r border-ods-border'
+
+  return (
+    <div
+      className={`grid grid-cols-1 ${gridColsClass} border border-ods-border rounded-md overflow-hidden w-full ${className ?? ''}`}
+    >
+      {extras.map((cell, i) => (
+        <EntityMetadataValueCell
+          key={`${cell.label}-${i}`}
+          value={cell.value}
+          label={cell.label}
+          uppercase={cell.uppercase ?? true}
+          className={dividerClass}
+        />
+      ))}
+      {showDateCell && (
+        <EntityMetadataValueCell
+          value={dateLabel}
+          label={publishedLabel}
+          uppercase={false}
+          className={dividerClass}
+        />
+      )}
+      <EntityMetadataAuthorCell author={effectiveAuthor} roleLabel={roleLabel} />
+    </div>
+  )
+}

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

@@ -0,0 +1,144 @@
+'use client'
+
+/**
+ * Generic compact entity/document card for any chat type that doesn't
+ * warrant a bespoke component.
+ *
+ * PURE PRESENTATION. Receives pre-composed `<a>` props via `anchorProps`
+ * and renders the rest from the item shape.
+ */
+
+import React from 'react'
+import { ExternalLink } from 'lucide-react'
+import { StatusBadge } from '../../ui/status-badge'
+import {
+  COMPACT_CARD_META_ROW,
+  COMPACT_CARD_META_ROW_BOX,
+  COMPACT_CARD_OUTER,
+  COMPACT_CARD_OUTER_STATIC,
+  COMPACT_CARD_SKELETON_OUTER,
+  COMPACT_CARD_TEXT_COL,
+  COMPACT_CARD_TITLE,
+  safeHref,
+} from '../utils/compact-card-classes'
+import { formatDateUTC as formatDate } from '../../../utils/format'
+
+type BadgeScheme = 'success' | 'error' | 'warning' | 'cyan' | 'default'
+
+export interface GenericEntityCardItem {
+  id: string
+  title: string
+  preview?: string | null
+  url?: string | null
+  subtitle?: string | null
+  badge?: { text: string; scheme?: BadgeScheme } | null
+  facts?: Array<{ label: string; value: string }> | null
+  dateUpdated?: string | number | null
+}
+
+export interface GenericEntityCardAnchorProps {
+  href: string
+  target?: '_blank'
+  rel?: 'noopener noreferrer'
+  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void
+}
+
+export interface GenericEntityCardProps {
+  item: GenericEntityCardItem
+  className?: string
+  anchorProps?: GenericEntityCardAnchorProps
+}
+
+export function GenericEntityCard({ item, className, anchorProps }: GenericEntityCardProps) {
+  const href = safeHref(item.url)
+  const dateText = formatDate(item.dateUpdated, { fallback: '', timezone: 'local' })
+  const body = (
+    <>
+      <span className={COMPACT_CARD_TEXT_COL}>
+        <span className="flex flex-wrap items-center gap-1.5 min-w-0">
+          <span className={`${COMPACT_CARD_TITLE} shrink min-w-0`}>{item.title}</span>
+          {item.badge ? (
+            <StatusBadge
+              text={item.badge.text}
+              variant="button"
+              colorScheme={item.badge.scheme || 'default'}
+              className="shrink-0"
+            />
+          ) : null}
+        </span>
+        {item.subtitle ? (
+          <span className="flex min-w-0 items-center gap-1 text-[11px] leading-4 text-ods-text-secondary">
+            <span className="min-w-0 truncate font-mono">{item.subtitle}</span>
+          </span>
+        ) : null}
+        {item.preview ? (
+          <span className="flex min-w-0">
+            <span className="line-clamp-2 whitespace-pre-wrap break-words text-[13px] leading-5 text-ods-text-secondary">
+              {item.preview}
+            </span>
+          </span>
+        ) : null}
+        {item.facts && item.facts.length > 0 ? (
+          <span className="flex flex-wrap items-center gap-x-3 gap-y-0.5 min-w-0 text-[11px] leading-4">
+            {item.facts.map((f, i) => (
+              <span key={i} className="inline-flex items-center gap-1 min-w-0 truncate">
+                <span className="text-ods-text-secondary/70 shrink-0">{f.label}:</span>
+                <span className="text-ods-text-primary font-medium truncate">{f.value}</span>
+              </span>
+            ))}
+          </span>
+        ) : null}
+        {dateText ? (
+          <span className={COMPACT_CARD_META_ROW_BOX}>
+            <span className={COMPACT_CARD_META_ROW}>
+              <span className="whitespace-nowrap">{dateText}</span>
+            </span>
+          </span>
+        ) : null}
+      </span>
+      {href ? (
+        <span className="flex shrink-0 items-center self-start h-5 text-ods-text-secondary">
+          <ExternalLink className="w-3.5 h-3.5" />
+        </span>
+      ) : null}
+    </>
+  )
+  if (anchorProps) {
+    return (
+      <a {...anchorProps} className={`${COMPACT_CARD_OUTER} ${className ?? ''}`}>
+        {body}
+      </a>
+    )
+  }
+  return href ? (
+    <a href={href} className={`${COMPACT_CARD_OUTER} ${className ?? ''}`}>
+      {body}
+    </a>
+  ) : (
+    <span className={`${COMPACT_CARD_OUTER_STATIC} ${className ?? ''}`} aria-label="No link available">
+      {body}
+    </span>
+  )
+}
+
+export function GenericEntityCardSkeleton({ className }: { className?: string }) {
+  return (
+    <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
+      <span className={COMPACT_CARD_TEXT_COL}>
+        <span className="flex items-center gap-1.5 min-w-0">
+          <span className="h-3.5 w-2/3 rounded bg-ods-bg" />
+          <span className="h-4 w-16 rounded-full bg-ods-bg/60" />
+        </span>
+        <span className="h-4 w-1/2 rounded bg-ods-bg/60" />
+        <span className="flex flex-col gap-0 min-w-0">
+          <span className="h-5 w-5/6 rounded bg-ods-bg/60" />
+          <span className="h-5 w-3/4 rounded bg-ods-bg/60" />
+        </span>
+        <span className="h-3 w-1/4 rounded bg-ods-bg/70" />
+      </span>
+      <span className="flex shrink-0 items-center self-start h-5">
+        <span className="h-3.5 w-3.5 rounded bg-ods-bg" />
+      </span>
+    </span>
+  )
+}

package/src/components/chat/entity-cards/github-activity-card.tsx

@@ -0,0 +1,305 @@
+'use client'
+
+/**
+ * GitHub Activity Card — unified visual for commits, PRs, and PR reviews.
+ *
+ * PURE PRESENTATION (no internal nav, no internal data fetching). The card
+ * receives the structured `<a>` prop bundle via `anchorProps` (composed by
+ * the caller from a runtime hook) and renders the rest from the
+ * `GitHubActivityItem` shape directly.
+ *
+ * Two consumers share this component:
+ *   1. Activity-list row (employee detail / similar) — pass `variant="row"`.
+ *   2. Chat-inline `[card://github_commit:<sha>]` markers — `variant="compact"`.
+ *
+ * Unified data shape `GitHubActivityItem` covers all three GitHub types
+ * (commit / PR / review).
+ */
+
+import React from 'react'
+import { GitHubIcon } from '../../icons/github-icon'
+import { GitPullRequest, Eye, ExternalLink } from 'lucide-react'
+import {
+  COMPACT_CARD_ICON_SLOT,
+  COMPACT_CARD_META_ROW,
+  COMPACT_CARD_META_ROW_BOX,
+  COMPACT_CARD_OUTER,
+  COMPACT_CARD_OUTER_STATIC,
+  COMPACT_CARD_ROW_FILLER,
+  COMPACT_CARD_SKELETON_IMAGE_SLOT,
+  COMPACT_CARD_SKELETON_OUTER,
+  COMPACT_CARD_SUMMARY,
+  COMPACT_CARD_TEXT_COL,
+  COMPACT_CARD_TITLE,
+  COMPACT_CARD_TITLE_ROW,
+  safeHref,
+} from '../utils/compact-card-classes'
+import { formatDateUTC as formatDate } from '../../../utils/format'
+import type {
+  GitHubActivityItem,
+  GitHubActivityKind,
+  PrReviewState,
+} from '../types/entities/github-activity'
+
+/** Extract owner/repo from a GitHub URL. */
+function parseRepoFromUrl(url: string | null | undefined): string | null {
+  if (!url) return null
+  try {
+    const u = new URL(url)
+    if (u.host !== 'github.com') return null
+    const parts = u.pathname.split('/').filter(Boolean)
+    if (parts.length >= 2) return `${parts[0]}/${parts[1]}`
+  } catch {
+    /* malformed URL */
+  }
+  return null
+}
+
+function kindIcon(kind: GitHubActivityKind, className = 'h-4 w-4') {
+  switch (kind) {
+    case 'pull_request':
+      return <GitPullRequest className={`${className} shrink-0`} />
+    case 'pr_review':
+      return <Eye className={`${className} shrink-0`} />
+    case 'commit':
+    default:
+      return <GitHubIcon className={`${className} shrink-0`} />
+  }
+}
+
+function kindLabel(kind: GitHubActivityKind): string {
+  switch (kind) {
+    case 'pull_request': return 'PR'
+    case 'pr_review': return 'Review'
+    case 'commit':
+    default: return 'Commit'
+  }
+}
+
+function formatActivityId(id: string, kind: GitHubActivityKind): string {
+  if (!id) return ''
+  if (kind === 'pull_request' || kind === 'pr_review') return `#${id}`
+  if (/^[0-9a-f]{40}$/i.test(id)) return id.slice(0, 7)
+  return id.length > 12 ? id.slice(0, 12) : id
+}
+
+function parseGithubTitle(title: string, kind: GitHubActivityKind): { display: string; reviewState: PrReviewState | null } {
+  if (!title) return { display: '', reviewState: null }
+
+  // Split prefix-tag from rest by hand instead of one giant regex.
+  // Avoids polynomial-redos on chained `\s*` quantifiers (`\[\s*X\s*\]`),
+  // since multiple consecutive `\s*` groups against long whitespace runs
+  // trigger exponential backtracking on CodeQL's heuristic.
+  //
+  // Algorithm: trim; if it starts with `[`, locate the matching `]`,
+  // then content[0:closing] is the tag, content[closing+1:] is the
+  // remainder. Linear scan — no regex backtracking possible.
+  const trimmed = title.trim()
+  let tag: string | null = null
+  let rest: string = trimmed
+  if (trimmed.startsWith('[')) {
+    const close = trimmed.indexOf(']')
+    if (close > 0) {
+      tag = trimmed.slice(1, close).trim().toLowerCase()
+      rest = trimmed.slice(close + 1).trim()
+    }
+  }
+
+  if (kind === 'pr_review' && tag && tag.startsWith('review:')) {
+    const stateRaw = tag.slice('review:'.length).trim().toUpperCase()
+    const reviewState = (['APPROVED', 'CHANGES_REQUESTED', 'COMMENTED', 'DISMISSED', 'PENDING'] as PrReviewState[]).includes(stateRaw as PrReviewState)
+      ? (stateRaw as PrReviewState)
+      : null
+    return { display: rest || 'Review', reviewState }
+  }
+  if (kind === 'pull_request' && tag && tag.startsWith('pr')) {
+    // Accept `[PR #123]`, `[PR#123]`, `[ pr # 123 ]` etc. — anything
+    // matching `pr` followed by `#?\s*\d+`. Validate the suffix is
+    // a numeric PR id, not arbitrary text.
+    const after = tag.slice(2).trim().replace(/^#\s*/, '')
+    if (after.length > 0 && /^\d+$/.test(after)) {
+      return { display: rest || title, reviewState: null }
+    }
+  }
+  if (kind === 'commit' && tag === 'commit') {
+    return { display: rest || title, reviewState: null }
+  }
+  return { display: title.trim(), reviewState: null }
+}
+
+const REVIEW_STATE_STYLE: Record<PrReviewState, { label: string; className: string }> = {
+  APPROVED: {
+    label: 'Approved',
+    className: 'bg-[var(--ods-attention-green-success-secondary)] text-[var(--ods-attention-green-success)]',
+  },
+  CHANGES_REQUESTED: {
+    label: 'Changes',
+    className: 'bg-[var(--ods-attention-red-error-secondary)] text-[var(--ods-attention-red-error)]',
+  },
+  COMMENTED: {
+    label: 'Comment',
+    className: 'bg-ods-bg-secondary text-ods-text-primary',
+  },
+  DISMISSED: {
+    label: 'Dismissed',
+    className: 'bg-ods-bg-secondary text-ods-text-secondary',
+  },
+  PENDING: {
+    label: 'Pending',
+    className: 'bg-[var(--ods-attention-yellow-warning-secondary)] text-[var(--ods-attention-yellow-warning)]',
+  },
+}
+
+function ReviewStateBadge({ state, className = '' }: { state: PrReviewState; className?: string }) {
+  const { label, className: paint } = REVIEW_STATE_STYLE[state] ?? REVIEW_STATE_STYLE.COMMENTED
+  return (
+    <span
+      className={`inline-flex items-center rounded px-1.5 py-0.5 font-mono text-[10px] font-medium uppercase tracking-wide shrink-0 ${paint} ${className}`}
+    >
+      {label}
+    </span>
+  )
+}
+
+export interface GitHubActivityCardAnchorProps {
+  href: string
+  target?: '_blank'
+  rel?: 'noopener noreferrer'
+  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void
+}
+
+export interface GitHubActivityCardProps {
+  item: GitHubActivityItem
+  variant?: 'row' | 'compact'
+  className?: string
+  /** Pre-composed `<a>` prop bundle (typically from a `useNavLink` hook in
+   *  the consumer). When provided, the outer renders as a real `<a>`. */
+  anchorProps?: GitHubActivityCardAnchorProps
+}
+
+export function GitHubActivityCard({ item, variant = 'compact', className, anchorProps }: GitHubActivityCardProps) {
+  const kind = item.kind ?? 'commit'
+  const repo = item.repo ?? parseRepoFromUrl(item.url) ?? ''
+  const dateText = formatDate(item.dateUpdated, { fallback: '', timezone: 'local' })
+  const idLabel = formatActivityId(item.id, kind)
+  const { display: title, reviewState } = parseGithubTitle(item.title, kind)
+  const primaryText = kind === 'pr_review'
+    ? (title.replace(/^by\s+/i, '').trim() || 'Reviewer')
+    : title
+
+  if (variant === 'row') {
+    return (
+      <div className={`flex items-center gap-3 min-w-0 ${className ?? ''}`}>
+        <span className="flex items-center gap-2 w-28 shrink-0">
+          {kindIcon(kind, 'h-3.5 w-3.5')}
+          <code className="text-ods-text-secondary font-mono text-xs truncate">{idLabel}</code>
+        </span>
+        <span className="flex items-center gap-2 text-ods-text-primary text-sm flex-1 min-w-0">
+          {reviewState ? <ReviewStateBadge state={reviewState} /> : null}
+          <span className="truncate">{primaryText}</span>
+        </span>
+        {repo ? (
+          <span className="font-mono text-[11px] text-ods-text-secondary truncate max-w-[240px] shrink-0">{repo}</span>
+        ) : null}
+        {dateText ? (
+          <span className="text-ods-text-secondary text-xs w-24 shrink-0 text-right">{dateText}</span>
+        ) : null}
+      </div>
+    )
+  }
+
+  const metaParts: React.ReactNode[] = []
+  metaParts.push(
+    <span key="kind" className="font-medium uppercase tracking-wide text-[10px]">{kindLabel(kind)}</span>,
+  )
+  if (idLabel) metaParts.push(<code key="id" className="font-mono">{idLabel}</code>)
+  if (repo) metaParts.push(<span key="repo" className="font-mono truncate">{repo}</span>)
+  if (dateText) metaParts.push(<span key="date" className="whitespace-nowrap">{dateText}</span>)
+
+  const href = safeHref(item.url)
+  const body = (
+    <>
+      <span className={COMPACT_CARD_ICON_SLOT}>
+        {kindIcon(kind, 'h-5 w-5')}
+      </span>
+      <span className={COMPACT_CARD_TEXT_COL}>
+        <span className={`${COMPACT_CARD_TITLE_ROW} flex-nowrap gap-1.5`}>
+          {reviewState ? <ReviewStateBadge state={reviewState} /> : null}
+          <span className={COMPACT_CARD_TITLE}>{primaryText}</span>
+        </span>
+        <span className={COMPACT_CARD_META_ROW_BOX}>
+          <span className={COMPACT_CARD_META_ROW}>
+            {metaParts.map((part, i) => (
+              <React.Fragment key={i}>
+                {i > 0 ? <span className="text-ods-text-secondary/40 shrink-0">·</span> : null}
+                <span className="min-w-0 truncate">{part}</span>
+              </React.Fragment>
+            ))}
+          </span>
+        </span>
+        <span className={COMPACT_CARD_META_ROW_BOX}>
+          <span className={COMPACT_CARD_SUMMARY}>{COMPACT_CARD_ROW_FILLER}</span>
+        </span>
+      </span>
+      {href ? (
+        <span className="flex shrink-0 items-center self-start h-5 text-ods-text-secondary">
+          <ExternalLink className="w-3.5 h-3.5" />
+        </span>
+      ) : null}
+    </>
+  )
+  if (anchorProps) {
+    return (
+      <a {...anchorProps} className={`${COMPACT_CARD_OUTER} ${className ?? ''}`}>
+        {body}
+      </a>
+    )
+  }
+  return href ? (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`${COMPACT_CARD_OUTER} ${className ?? ''}`}
+    >
+      {body}
+    </a>
+  ) : (
+    <span className={`${COMPACT_CARD_OUTER_STATIC} ${className ?? ''}`} aria-label="No link available">{body}</span>
+  )
+}
+
+export function GitHubActivityCardSkeleton({ variant = 'compact', className }: { variant?: 'row' | 'compact'; className?: string }) {
+  if (variant === 'row') {
+    return (
+      <div className={`flex items-center gap-3 min-w-0 animate-pulse ${className ?? ''}`}>
+        <div className="flex items-center gap-2 w-28 shrink-0">
+          <div className="h-3.5 w-3.5 rounded bg-ods-bg" />
+          <div className="h-3 w-16 bg-ods-bg rounded" />
+        </div>
+        <div className="h-3 w-2/3 bg-ods-bg rounded flex-1" />
+        <div className="h-3 w-40 bg-ods-bg/60 rounded shrink-0" />
+        <div className="h-3 w-20 bg-ods-bg/60 rounded shrink-0" />
+      </div>
+    )
+  }
+  return (
+    <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
+      <span className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
+      <span className={COMPACT_CARD_TEXT_COL}>
+        <span className={COMPACT_CARD_TITLE_ROW}>
+          <span className="h-3.5 w-2/3 rounded bg-ods-bg" />
+        </span>
+        <span className={COMPACT_CARD_META_ROW_BOX}>
+          <span className="h-3 w-1/2 rounded bg-ods-bg/70" />
+        </span>
+        <span className={COMPACT_CARD_META_ROW_BOX}>
+          <span className={COMPACT_CARD_SUMMARY}>{COMPACT_CARD_ROW_FILLER}</span>
+        </span>
+      </span>
+      <span className="flex shrink-0 items-center self-start h-5">
+        <span className="h-3.5 w-3.5 rounded bg-ods-bg" />
+      </span>
+    </span>
+  )
+}