Renders an onboarding guide entity card in four layout variants (`catalog`, `default`, `sm`, `portrait`), with runtime-derived link attributes and placeholder images sourced from `ChatRuntime` via hub-wired hooks. ## Key Components ### `OnboardingGuideCard` Main export. Renders one of four variants based on the `size` prop: - **`catalog`** — Rich detail card with hero image, title, summary, duration badge, and `EntityAuthorCard` author/section grid. - **`default`** — Horizontal step-numbered card for "More in section" rails. - **`sm`** — Compact horizontal card for inline chat rendering. - **`portrait`** — Delegates to `EntityPortraitCard` for strip/rail density layouts. Link `target`/`rel` are resolved via `useEntityCardLink`; placeholder images via `useEntityCardPlaceholder`. Explicit props always override runtime values. ### `OnboardingGuideCardSkeleton` Loading placeholder matching the layout of each `size` variant. Supports `catalog`, `default`, and `sm`. ### `stripMarkdownPreview(text)` Internal utility. Strips raw markdown syntax (fenced code blocks, headings, links, bold/italic markers) from guide summaries before rendering as prose. Hard-caps output at 240 characters to prevent CSS `line-clamp` failures from dumping full guide content into the card. ### `HORIZONTAL_SIZE_TOKENS` Frozen design-token map scoping padding, icon sizing, and typography to the `default` variant. ## Usage Example ```typescript import { OnboardingGuideCard, OnboardingGuideCardSkeleton } from './onboarding-guide-card' // Catalog variant (public guide listing page) // Compact inline variant (chat message) // Loading state ```