Stream Cascade

`<pura-stream-cascade>` gives streamed content a staggered entrance: wrap a list, feed, or table body and each child fades up a step after the previous one. The stagger is computed at *parse time* by CSS `::slotted(:nth-child(n))` rules, so when the component is server-rendered as Declarative Shadow DOM the cascade plays as the light-DOM children stream in over the wire, before any JavaScript runs, which makes it the natural entrance for an agent streaming rows or tokens into the page. It handles both regimes: a burst of children present at parse cascades via the nth-child delays, while children appended live over time animate immediately (the stream already staggers them in time) and each fires a `cascadeitem` `{ index, total }` event. Pick an `animation` (fade, slide-up, slide-left, zoom, blur) and a `step` in ms. Delays and durations multiply `var(--pura-motion)`, so a `<pura-motion-budget>` governor or reduced motion can calm or stop the cascade. Each instance registers in `window.__puraStreamCascades` by `data-pura-id`.

Preview

<!-- Server-render as Declarative Shadow DOM and the cascade plays
     as these rows arrive over the wire, no JS needed: -->
<pura-stream-cascade animation="slide-up" step="60">
  <li>Row 1</li>
  <li>Row 2</li>
  <li>Row 3</li>
</pura-stream-cascade>

<script type="module">
  const sc = document.querySelector('pura-stream-cascade');
  sc.addEventListener('cascadeitem', (e) => console.log('streamed', e.detail));
  // appending later animates each newcomer immediately
  sc.appendChild(Object.assign(document.createElement('li'), { textContent: 'Row 4' }));
</script>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/stream-cascade.js"></script>

import "./pura/lib/stream-cascade.js";