# XWUIStoryViewer

A full-bleed story player: segmented progress bars across the top (one per story, auto-filling on a timer), a header with the author's XWUIAvatar / name / time and a close button, left and right tap-zones to step prev/next, and an optional reply input. Image stories render an `<img>`; video stories compose XWUIVideoPlayer with its controls hidden. Pass `data.stories` (each with `id`, `kind` of image/video, `src`, `poster`, `durationMs`), `data.author`, and `data.initialIndex`; toggle `conf_comp.autoAdvance` (auto-advances when each segment fills) and `conf_comp.showReplyInput`. Handlers include `onClose`, `onStoryChange`, `onComplete`, and `onReply`, and `next()` / `prev()` allow programmatic navigation.

## Basic Usage

A three-image story sequence by Sarah Chen, each segment auto-advancing after five seconds.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A three-image story player for Sarah Chen with segmented progress bars auto-advancing every 5 seconds.
```

## Mixed Media

A story that interleaves image and video segments with per-segment durations.

```example
file: examples/MixedMedia.ts
html: examples/MixedMedia.html
title: Mixed Media
description: A three-segment story mixing image and video kinds, with the video story composing the player and a poster.
```

## Brand Story

A branded story with an author avatar and uneven per-story durations.

```example
file: examples/BrandStory.ts
html: examples/BrandStory.html
title: Brand Story
description: A branded three-frame story with an author avatar where the hero frame holds longer than the teaser and CTA.
```

```api
```