AutoTrack

import { state } from '@kerf-js/core'import {  AutoTrack,  Heading,  Segmented,  Stack,  Text} from '@kerf-js/veneer'import type { Peer } from '@kerf-js/veneer'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@kerf.dev',    role: 'Owner',    team: 'Platform',    initials: 'ML',  },  {    id: 'jun',    name: 'Jun Tanaka',    email: 'jun@kerf.dev',    role: 'Admin',    team: 'Platform',    initials: 'JT',  },  {    id: 'priya',    name: 'Priya Raman',    email: 'priya@kerf.dev',    role: 'Member',    team: 'Web',    initials: 'PR',  },  {    id: 'tomas',    name: 'Tomás Oliveira',    email: 'tomas@kerf.dev',    role: 'Member',    team: 'Web',    initials: 'TO',  },  {    id: 'lena',    name: 'Lena Fischer',    email: 'lena@kerf.dev',    role: 'Member',    team: 'Data',    initials: 'LF',  },  {    id: 'noor',    name: 'Noor Haddad',    email: 'noor@kerf.dev',    role: 'Viewer',    team: 'Data',    initials: 'NH',  },  {    id: 'sam',    name: 'Sam Okafor',    email: 'sam@kerf.dev',    role: 'Member',    team: 'Mobile',    initials: 'SO',  },  {    id: 'ines',    name: 'Inés Vidal',    email: 'ines@kerf.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' },]