# XWUIStoryRingStrip

The horizontal, scrollable top-of-feed stories strip used by IG, FB, WhatsApp Status, and Telegram Stories: it composes one XWUIStoryRing per entry and adds desktop prev/next arrow buttons that scroll the row by three tile-widths at a time. Pass `data.entries` (each with `id`, `label`, optional `avatar`, and a `state` of unviewed/viewed/live/your-own) and an `onStorySelect(entry, index)` handler; configure `conf_comp.ringSize`, `conf_comp.gap`, and `conf_comp.showArrows`. Replace the whole strip at runtime with `setEntries()`.

## Basic Usage

An eight-ring stories strip leading with your-own, then unviewed rings (one live), and trailing viewed rings.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A scrollable strip of eight story rings - your-own first, then unviewed and a live ring, then several viewed.
```

## Status Feed

A fuller status feed leading with your own status and two live broadcasts.

```example
file: examples/StatusFeed.ts
html: examples/StatusFeed.html
title: Status Feed
description: A ten-entry status strip with your-own first, two live rings, then unviewed contacts ahead of viewed ones.
```

## Compact Strip

A denser strip with smaller rings, a tighter gap, and the scroll arrows hidden.

```example
file: examples/CompactStrip.ts
html: examples/CompactStrip.html
title: Compact Strip
description: A compact stories strip configured with 52px rings, a reduced gap, and the desktop scroll arrows disabled.
```

```api
```