Inbox

Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.

Build the "Inbox" pattern (@codeatlasdev/ui demo #251, display/conversation-item) in my app.

Call get_demo({ ids: ["#251"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Chat or support inboxes that list conversations with avatar, last message, time and unread state.

Keep these library parts, with the props and tokens the demo uses:
- Avatar, ConversationItem from "@codeatlasdev/ui"

Behaviour to keep:
- 4 rows in `rows`, each a `<ConversationItem` with `title`, `time` and `preview`
- `active={active === row.id}` and `onclick={() => (active = row.id)}` select a row
- `unread`, `pinned`, `muted` and `typing` come from the row
- `{#snippet avatar()}<Avatar alt={row.title} size="lg" />{/snippet}`

Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.

Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours.

Library parts

• Avatar @codeatlasdev/ui
• ConversationItem @codeatlasdev/ui

How it is built

• 4 rows in `rows`, each a `<ConversationItem` with `title`, `time` and `preview`
• `active={active === row.id}` and `onclick={() => (active = row.id)}` select a row
• `unread`, `pinned`, `muted` and `typing` come from the row
• `{#snippet avatar()}<Avatar alt={row.title} size="lg" />{/snippet}`

Related

• #248 A grouped conversation component/display
• #250 Quote and reactions component/display
• #114 On avatars component/display
• #107 With image component/display
• #108 Initials fallback component/display
• #109 Shape and status component/display