js-snippets component gallery

<timeline-view>

drag to pan · ctrl/⌘+wheel or pinch to zoom · shift+wheel or horizontal wheel to pan · vertical wheel scrolls the page · hover anything for a tooltip · pan left for lazy-loaded history · the feed is infinite and generated locally.

same feed, compact + retheme (auto-fit demotes lanes; --timeline-* custom properties)

back-limited, still live (minTime alone — pan left and it stops dead at the floor; nothing is ever requested before it, yet the right edge still follows the clock)

static content (minTime + maxTime — a finished window: no now line, no jump-to-live pill, no follow, and the bars that were still running at the end stop exactly at it)

<data-table>

Type in the box to narrow · click a chip to hide that bucket · click a header to sort (asc → desc → back to the producer's order) · tab into the rows and press Enter to open a row's detail (the failure rows' details are async, so the placeholder-then-paint path is visible too). Note the blank durations: they sort LAST in both directions, because absence is not a value. Duration sorts by its real millisecond number while showing “1.2s” — sorting the display string would put “10s” before “9s”.

(click or Enter a row — the event lands here)

minimal (no query, no chips, no row listener — the bar hides itself and rows stay out of the tab order)

filtered to nothing (NOT the same as having no data — it says how many it is hiding)

<activity-feed>

A <data-table> underneath — the chips, counts and empty states are that component's. Severity comes from the ACTION half of each dotted kind and family from the NAMESPACE half, so weather.observed and kettle.boiled — kinds no rule has ever heard of — still get a severity and a stable hue the first time they appear. Field values are searchable: paste a repo slug into the box.

empty (a feed with nothing in it says so, rather than looking broken)