Chat — inline icons in a resizable bubble

A chat message with small inline images — avatars, reaction icons, a thumbnail — mixed into the text. inlineImage(src, { font, height: 24 }) turns each image into a pretext RichInlineItem whose extraWidth equals its measured rendered width. Pretext treats them as atomic pills that wrap with neighboring text and never break mid-image. Drag the slider — walkRichInlineLineRanges re-breaks the lines in a couple of milliseconds, pure arithmetic over cached text widths, no DOM reads.

Bubble width 380px

Source items: a sequence of text fragments and inlineImage(src, { font, height: 24 }) items, fed to prepareRichInline. On every resize we call walkRichInlineLineRanges — pure arithmetic over cached text widths, no DOM reads. Each image fragment carries the PreparedImage handle, so rendering is a single <img src=…> with exact width/height pre-known.