AutoTrack

import { state } from '@weft-js/core'import { AutoTrack, Heading, Segmented, Stack, Text } from '@weft-js/warp'import type { Peer } from '@weft-js/warp'export function Presenter() {  const section = state('detect')  return (    <Stack gap="related">      <Segmented label="Jun presents" size="sm" value={section.value} options={PARTS} onChange={v => (section.value = v)} />      <AutoTrack presenter={JUN} section={section.value} label="Rollback runbook" height={180}>        <Stack gap="section">          <section data-section="detect"><Heading level={4}>Detect</Heading><Text subtle>A failed health check pages the person on call within a minute. The deploy stops on its own and nothing else ships until someone looks.</Text></section>          <section data-section="roll"><Heading level={4}>Roll back</Heading><Text subtle>One press puts the last good deploy back. It takes about thirty seconds to reach every region, and the edge cache follows.</Text></section>          <section data-section="tell"><Heading level={4}>Tell people</Heading><Text subtle>Post in #incidents, then tell support what customers saw and when it ended. Write the timeline while it is fresh.</Text></section>        </Stack>      </AutoTrack>    </Stack>  )}const PEOPLE = [  { id: 'mara', name: 'Mara Lindqvist', email: 'mara@weft.dev', role: 'Owner', team: 'Platform', initials: 'ML' },  { id: 'jun', name: 'Jun Tanaka', email: 'jun@weft.dev', role: 'Admin', team: 'Platform', initials: 'JT' },  { id: 'priya', name: 'Priya Raman', email: 'priya@weft.dev', role: 'Member', team: 'Web', initials: 'PR' },  { id: 'tomas', name: 'Tomás Oliveira', email: 'tomas@weft.dev', role: 'Member', team: 'Web', initials: 'TO' },  { id: 'lena', name: 'Lena Fischer', email: 'lena@weft.dev', role: 'Member', team: 'Data', initials: 'LF' },  { id: 'noor', name: 'Noor Haddad', email: 'noor@weft.dev', role: 'Viewer', team: 'Data', initials: 'NH' },  { id: 'sam', name: 'Sam Okafor', email: 'sam@weft.dev', role: 'Member', team: 'Mobile', initials: 'SO' },  { id: 'ines', name: 'Inés Vidal', email: 'ines@weft.dev', role: 'Viewer', team: 'Mobile', initials: 'IV' },]const PEERS: Peer[] = PEOPLE.map((p, i) => ({ id: p.id, name: p.name, color: i + 1 }))const [MARA, JUN, PRIYA, TOMAS, LENA, NOOR, SAM, INES] = PEERS as [Peer, Peer, Peer, Peer, Peer, Peer, Peer, Peer]const PARTS = [{ value: 'detect', label: 'Detect' }, { value: 'roll', label: 'Roll back' }, { value: 'tell', label: 'Tell people' }]