<!-- source-hash: fd0a68c39b09e2977a51c082ec62bbc0 -->
Renders grouped content references using canonical card components, supporting three data modes: controlled (explicit refs), suggestion (self-fetched via API), and SSR-hydrated suggestion (server-prefetched with client hydration).

## Key Components

### Exported Types & Interfaces

- **`CardLinkAnchorProps`** — Anchor prop bundle (`href`, `target`, `rel`, `onClick`) passed to per-card link surfaces
- **`CardLinkProviderProps` / `CardLinkProvider`** — Render-prop component type for host-injected navigation logic (keeps hook calls inside the injected component)
- **`AdminCampaignCardSlot`** — Optional host-injected `{ Card, Skeleton }` pair for the admin-only `marketing_campaign` type

### Internal Functions

- **`DefaultLinkPropsProvider`** — Standalone embed default: same-tab for relative URLs, new tab for cross-origin (via `decideNewTab`, no router dependency)
- **`defaultResolveHref`** — Returns the ref's stored `url` and `targetPlatform` as-is; hubs override this with domain-aware recomposition
- **`renderSkeletonForType`** — Per-type skeleton dispatch matching each card's exact size to eliminate layout shift on data resolve
- **`CardForType`** — Pure function component (zero hook calls) dispatching the correct sized card per content type

## Usage Example

```typescript
// Controlled mode — render explicit refs
<RelatedContentSection
  contentRefs={myRefs}
  apiBaseUrl="https://api.example.com"
/>

// Suggestion mode — self-fetch from the 5-tier engine
<RelatedContentSection
  entityType="blog_post_existing"
  entityId="post-123"
  apiBaseUrl="https://api.example.com"
  minResults={5}
/>

// SSR-hydrated — skip first client fetch
<RelatedContentSection
  entityType="blog_post_existing"
  entityId="post-123"
  apiBaseUrl="https://api.example.com"
  initialItems={serverFetchedRefs}
/>

// Hub embed with custom link provider and campaign card
<RelatedContentSection
  entityType="investor_update"
  entityId="update-42"
  apiBaseUrl="https://api.example.com"
  LinkProvider={HubNavLinkProvider}
  resolveHref={buildContentURL}
  adminCampaignCard={{ Card: CampaignCard, Skeleton: CampaignCardSkeleton }}
/>
```

## Data Flow & Architecture Notes

- **No `react-query` dependency** — uses `useSelfFetch` (plain `fetch`) so embedders need no `QueryClientProvider`
- **Deep card imports** (not the chat barrel) keep this component's source graph react-query-free at the import level
- **Group layout/card sizing** delegated entirely to `CONTENT_REF_GROUPS` — no per-type layout logic lives here
- **Lockstep sibling**: `CardForType` (sized cards) mirrors `CHAT_CARD_REGISTRY` in `../chat/entity-cards/dispatch.tsx` (compact `size='sm'`); register new fetch-mode types in **both** dispatchers

**Source:** [`related-content-section.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/related-content-section.tsx)