Alpine Adapter — Advanced Protocols

x-alap directive — every trigger evaluates a { query, config } object. Lens and lightbox are embedded web components. Personalized around the Alpine ecosystem — async queries search HN for alpine.js, static links cover alpinejs.dev, Livewire, and Caleb Porzio's blog.

Placement Compass Rose (click a direction to set placement on every trigger on this page)

Click any direction; every x-alap trigger on the page reads placement: dir || 'SE' from Alpine state — changing dir cascades to them all.

Quick confirm — Static Alpine links (no async, opens instantly at the compass direction).

1. Progressive Async Menu

Deterministic `:slow:` mock

The Alpine directive wires ProgressiveRenderer to the trigger — same contract as every other adapter, just via Alpine's directive lifecycle.

Slow menu — 5 items in 2s

Fast menu — 8 items in 500ms

Real data: HN search for alpine.js

2. Mixed Static + Dynamic

static mock (async) HN (async)

Static Alpine refs + 3 slow items

Static Alpine refs + 4 HN stories

3. Error and Empty Placeholders

Forced error after 800ms

Empty result after 800ms

Static + error + slow

4. Lens — Metadata Card

Alpine ecosystem lens (static + slow)

Alpine lightbox (pattern image + slow)

6. In-Flight Dedup

Trigger A — slow 4 items Trigger B — same token