لمسی

import { usePinchRotate } from '@tokapps/gestures';function Viewer({ src }: { src: string }) {  const g = usePinchRotate<HTMLDivElement>({    labels: { zoomIn: 'بزرگ‌نمایی', zoomOut: 'کوچک‌نمایی', rotateCw: 'چرخش ساعتگرد', rotateCcw: 'چرخش پادساعتگرد', reset: 'بازنشانی نما' },    maxScale: 4, rotateStepDeg: 90,  });  return (    <>      <div ref={g.ref} {...g.bind} tabIndex={0} aria-label="نمایشگر تصویر" style={{ ...g.bind.style, overflow: 'hidden' }}>        <img src={src} alt="" style={{ transform: g.transform }} />      </div>      {(['zoomIn', 'zoomOut', 'rotateCw', 'rotateCcw', 'reset'] as const).map((k) => (        <button key={k} {...g.getControlProps(k)} />      ))}      <p role="status">{g.announcement}</p>    </>  );}