src/MotionControls.tsx

import {Play,Pause,ChevronLeft,ChevronRight,Eye,RotateCcw} from 'lucide-react';
import {motionTitle,motionValue,type MotionJoint} from './motion';
type Props={joints:MotionJoint[];index:number;progress:number;playing:boolean;highlighted:boolean;
  onSelect:(index:number)=>void;onProgress:(value:number)=>void;onPlay:()=>void;onReset:()=>void;onHighlight:()=>void};
export default function MotionControls({joints,index,progress,playing,highlighted,onSelect,onProgress,onPlay,onReset,onHighlight}:Props){
  const joint=joints[index],title=motionTitle(joint,index);
  return <div className="motion-controls" aria-label="Movement controls">
    <div className="motion-heading">
      {joints.length>1&&<button className="icon-button" aria-label="Previous movement" onClick={()=>onSelect((index-1+joints.length)%joints.length)}><ChevronLeft size={16}/></button>}
      <div className="motion-name" aria-live="polite"><strong>{title}</strong><small>{joint.type==='prismatic'?'Sliding':'Rotation'}{joints.length>1?` · ${index+1} of ${joints.length}`:''}</small></div>
      {joints.length>1&&<button className="icon-button" aria-label="Next movement" onClick={()=>onSelect((index+1)%joints.length)}><ChevronRight size={16}/></button>}
      <span className="dock-spacer"/>
      <button className={`icon-button ${highlighted?'active':''}`} aria-label="Highlight moving part" aria-pressed={highlighted} title="Highlight moving part" onClick={onHighlight}><Eye size={16}/></button>
      <button className="icon-button" aria-label="Reset this movement" title="Reset this movement" onClick={onReset}><RotateCcw size={15}/></button>
    </div>
    <div className="motion-slider-row">
      <button className="icon-button play-button" aria-label={playing?'Pause this movement':'Play this movement'} title={playing?'Pause this movement':'Play this movement'} onClick={onPlay}>{playing?<Pause size={18}/>:<Play size={18}/>}</button>
      <span className="motion-limit">{motionValue(joint,0)}</span>
      <input className="joint-slider" aria-label={`${title} position`} aria-valuetext={motionValue(joint,progress)} type="range" min="0" max="1" step="0.001" value={progress} onChange={event=>onProgress(+event.target.value)}/>
      <span className="motion-limit">{motionValue(joint,1)}</span>
    </div>
    <p className="motion-hint">{highlighted?'Highlighted part':'Selected part'} {joint.type==='prismatic'?'slides':'rotates'} · {motionValue(joint,progress)}{joint.partial?' · preview range':''}</p>
  </div>;
}