Time Scrub

`<pura-time-scrub>` turns a sequence of steps into a scrubbable master timeline. Where `<pura-undo>` is a one-shot binary undo window, this is a navigable history: every slotted child is a keyframe and a real accessible slider (`role="slider"`, arrow keys step, Home/End jump, pointer drag seeks) moves a continuous playhead across them, so undo and redo become positions on a track. Each change carries two things on a `scrub` event: an `index` (the snapped discrete state an agent acts on) and a `segment` + `fraction` pair (`fraction` is 0..1 into `[segment, segment+1]`, for interpolating any animation against the playhead). The host publishes `--pura-scrub` (continuous), `--pura-scrub-index` (snapped) and `--pura-scrub-total`, which inherit across the shadow boundary so consumer CSS can scrub anything; each child is stamped `data-pura-scrub-state` (past, current, future) so the history reads visually. The pure timeline model (`seekTimeline`) is DOM-free and unit-tested. Durations multiply `var(--pura-motion)`, so a `<pura-motion-budget>` governor or reduced motion calms the scrub. Each instance registers in `window.__puraTimeScrubs` by `data-pura-id` with `{ index, total, seek, step, toIndex }`.

Preview

<pura-time-scrub>
  <li data-label="Draft">Draft written</li>
  <li data-label="Reviewed">Reviewed</li>
  <li data-label="Approved">Approved</li>
</pura-time-scrub>

<script type="module">
  const ts = document.querySelector('pura-time-scrub');
  ts.addEventListener('scrub', (e) => {
    // e.detail.index is the discrete state; segment + fraction interpolate
    console.log('playhead', e.detail.index, e.detail.segment, e.detail.fraction);
  });
  ts.toIndex(0);     // rewind
  ts.step(1);        // redo one keyframe
</script>

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

import "./pura/lib/time-scrub.js";