Timeline (<kweb-timeline>)

Purpose

Make time navigable: show lifespan of selected node and related nodes, allow zoom and pan.

Inputs

Events listened to

• kweb:selection-changed
• kweb:hover-changed
• kweb:time-range-set, kweb:time-range-cleared

Data required

• selected node time range (optional)
• neighbor node time ranges (optional)

Outputs

Events emitted

• kweb:navigate (hover/click on timeline items)
• kweb:time-range-set (when user scrubs/zooms selects a range)

UI and interactions

Default mode:

1. Selected node’s lifespan is highlighted.
2. Neighbor nodes shown below.
3. Hover previews node, click commits.
4. Optional: zoom and pan.

Edge cases

• Nodes without time: optionally hide or show “timeless” bucket.
• Very long spans: use log scale or compress.

Definition of done

• [ ] Hover and click on timeline items navigates.
• [ ] Can set and clear a time range.
• [ ] Timeline communicates “where you are in time”.