# XWUIFeedPost

The iconic Instagram / Facebook feed card: a single self-contained post stacking a header (XWUIAvatar, author name with optional verified tick, location, ⋯ menu), a media region, an actions row (like / comment / share / save), an `@handle` caption, a top-N comments preview with a "View all N comments" link, and a timestamp. Media auto-switches by `data.media`: a single image renders inline, a single `{ kind: 'video' }` item composes XWUIVideoPlayer for full scrub/fullscreen controls, and an array of length > 1 composes XWUICarousel with paging dots and arrows. Key props include `data.author`/`timestamp`/`media` (required), `data.caption`, `data.likeCount`, `data.liked`, `data.saved`, `data.comments`, plus `conf_comp.mediaAspectRatio` ('1 / 1', '4 / 5', '16 / 9'), `conf_comp.interactive`, and `conf_comp.commentsPreviewCount`; `setLiked()` / `setSaved()` update state without a full re-render.

## Basic Post

A canonical single-image post with a verified author, location, caption, like count, and a two-comment preview.

```example
file: examples/BasicPost.ts
html: examples/BasicPost.html
title: Basic Post
description: A single square photo post by a verified author with a caption and "View all 23 comments" preview.
```

## Carousel Post

A multi-image post where dot indicators and arrow buttons appear automatically because `data.media` is an array of three images.

```example
file: examples/CarouselPost.ts
html: examples/CarouselPost.html
title: Carousel Post
description: A three-image swipeable carousel post, pre-liked, with a 4.2K like count and a caption.
```

## Video Reel

A vertical short-form reel - a single `{ kind: 'video' }` item with a duration overlay, a `9 / 16` media aspect ratio, and like / share callbacks wired up.

```example
file: examples/VideoReel.ts
html: examples/VideoReel.html
title: Video Reel
description: A tall 9/16 video post with a duration overlay, poster, and onLikeToggle/onShareClick callbacks.
```

## Read-only Embed

A landscape announcement card for embedding outside the app, with `interactive: false` locking the toggles and `showCommentsPreview: false` hiding the comments.

```example
file: examples/EmbeddedReadOnly.ts
html: examples/EmbeddedReadOnly.html
title: Read-only Embed
description: A non-interactive 16/9 announcement post with the comments preview removed for an off-app embed.
```

```api
```