MessageList

items に id・sender・title と、任意の href・preview・time・datetime・avatar・unread を渡します。行は「件名」と「差出人 – 書き出し」の二段で、時刻と未読の点を末尾側に置き、行の間に行の幅いっぱいの罫線を引きます。件名は青緑の太字に1pxの下線を引き（行にホバーすると赤）、差出人は黒、書き出しは灰色、時刻は茶色の文字です。unread の行は差出人も太字にし、時刻の後ろに青緑の小さな点を置きます。href を渡した行はリンクにし、ホバーすると行を淡い黄色で塗ります。省略した行はリンクにしません。

件名と差出人が空の時は「（件名なし）」「差出人不明」を出します。どれかの行に avatar があれば全ての行にアバターの列を設け、avatar の無い行には同じ大きさ（30px）の淡い灰色の円に手紙のアイコンを置いて列をそろえます。threadCount（2以上）は件名の後ろに件数のピル（淡い青に青緑の数）で、attachments（1以上）はファイルのアイコンと灰色の小さな数で添えます。

行ごとの state は件名の前に共通の Badge で示します。draft は「下書き」、sending は「送信中」で行全体を少し控えめにし、failed は赤の「送信失敗」です。unavailableReason を渡すと state より優先して「閲覧不可」のバッジを出し、書き出しの位置に理由を出して、件名と差出人を灰色にします。current の行は黄色のハイライト（#ffffcc）で示します。面は角を丸めず、行の幅いっぱいに塗ります。

previewLines は、1 で差出人と書き出しを一行に並べて省略し、2 で差出人の下に書き出しを二行まで折り返します。newSince に行の id を渡すと、その行の直前に青緑の細い区切りの線とラベル（既定は「ここから新着」）を置きます。

一覧全体の state は ready・loading・error です。loading と error では行を出さず、一覧の場所に状態の文を出します（loading は文の上に、行の形をした淡い面を二つ並べます。面は動きません）。ready で items が0件の時は empty を EmptyState で出します。0件の表示は、行を後から DOM へ追加すると隠れ、全て消すと再び現れます。

幅が30rem未満では時刻を件名の行に置き、件名を二行まで折り返します。16rem未満ではアバター・件名・書き出し・時刻を縦に積みます。

既読・送信・削除などのデータ処理と、開いた行の current の切り替えは利用側が持ちます。controllerを持たないので、JavaScriptなしでも行のリンクで開けます。