Product Highlights — dev harness

Four placements: three items beside the buy action, the badge on its anchor, the social proof in a floating toast. The only case here that renders the toast — the rest suppress it so it fires from one place.

Rows stagger in, then a warm sweep crosses the toast's first line once, left to right. The toast leads with the avatar stack and rotates between its title and its body; the same item shows a star in every other case, which is toastIcon doing its one job. No badge here — this page has no anchor for it, so it demotes to a list row.

Every item in one list, titles and bodies. layout: 'list'.

Five rows. The toast and badge items return to the list rather than floating, and no surface was suppressed by hand to make that happen.

Two columns, mark above title above body. layout: 'compact'.

Five cells across two columns, each with its body. Nothing floating.

Three columns, mark and title only. layout: 'simple'.

Five cells across three columns, no bodies at all. Titles should not break at a hyphen.

Titles upfront, bodies behind a disclosure, one open at a time. layout: 'accordion'. Deliberately ragged: the last item has no body.

Six rows separated by hairlines. Clicking one opens it and closes any other. Tab reaches each header; Enter and Space both work. The last row has nothing to reveal, so it is not a button and has no chevron.

The accordion, cycling its rows on its own. layout: 'steps'.

Rows open in turn and wrap round after the last, each with a fill on its bottom edge sized to its dwell. Hovering holds the current row and resumes on what is left of it, not a fresh one; a hidden tab pauses it entirely. Clicking ends the sequence for good and leaves a plain accordion. Under reduced motion it never plays — row one is simply open.

Should lay out side by side where there is room.

Two or three across, not stacked, at this width.

The smallest payload that still renders.

A single row, hairlines above and below, no empty column beside it.

A missing body, an icon name we do not ship, and copy far longer than any merchant should send.

Row one is title-only. Row two falls back to a neutral glyph rather than a gap. Row three wraps rather than clipping. None of it breaks layout.

Score drawn from rating and scale, never parsed out of the sentence beside it.

4.8 of 5 fills four and four-fifths stars — not rounded up to five. The second entry has no usable score, so it demotes to a list row rather than rendering an empty panel.

Nothing renderable at all.

The frame below is flat and empty — no box, no stray rule, no reserved space.

Items that are strings, nulls, numbers, and objects with no title.

Only the one valid item renders. Everything else is dropped rather than repaired. One console warning at most, and no exception.