engagelab-captcha-sdk 1.0.0

package/src/challenges/physics.ts

@@ -0,0 +1,437 @@
+/**
+ * Physics-based interactive CAPTCHA challenge.
+ *
+ * Renders 2D physics simulations using Canvas:
+ * - Tilt Ball: tilt a platform to guide a ball into a target hole
+ * - Gravity Drop: predict where an object lands
+ * - Balance Scale: place weights to balance a scale
+ *
+ * These challenges are extremely difficult for AI/ML because they require
+ * real-time spatial-physical reasoning, not just image recognition.
+ */
+
+import { sdkLogger } from '../logger';
+
+interface PhysicsResult {
+  answer: Record<string, any> | string;
+  passtime: number;
+  interactionEvents?: Array<{ type: string; time: number; value: any }>;
+  events?: any[];
+  error?: string;
+}
+
+export class PhysicsChallenge {
+  private canvas: HTMLCanvasElement | null = null;
+  private ctx: CanvasRenderingContext2D | null = null;
+  private startTime = 0;
+  private events: Array<{ type: string; time: number; value: any }> = [];
+  private animFrameId: number | null = null;
+  private boundListeners: Array<{ el: EventTarget; type: string; fn: EventListener }> = [];
+
+  create(
+    challengeConfig: any,
+    previewBase64: string,
+  ): { element: HTMLElement; promise: Promise<PhysicsResult> } {
+    sdkLogger.info('PhysicsChallenge', `create: variant=${challengeConfig.variant}`);
+
+    const wrapper = document.createElement('div');
+    wrapper.style.cssText = 'width:100%;max-width:370px;margin:0 auto;text-align:center;';
+
+    const title = document.createElement('div');
+    title.textContent = challengeConfig.instruction_zh || challengeConfig.instruction || '完成物理挑战';
+    title.style.cssText = 'font-size:14px;color:#333;margin-bottom:12px;padding:0 8px;';
+    wrapper.appendChild(title);
+
+    this.canvas = document.createElement('canvas');
+    this.canvas.width = 360;
+    this.canvas.height = 270;
+    this.canvas.style.cssText = 'border:1px solid #ddd;border-radius:8px;background:#f0f5fa;cursor:pointer;display:block;margin:0 auto;max-width:100%;';
+    this.canvas.setAttribute('role', 'img');
+    this.canvas.setAttribute('aria-label', challengeConfig.instruction_zh || challengeConfig.instruction || '物理挑战');
+    this.canvas.setAttribute('tabindex', '0');
+    wrapper.appendChild(this.canvas);
+
+    this.ctx = this.canvas.getContext('2d')!;
+    this.startTime = performance.now();
+
+    const promise = new Promise<PhysicsResult>((resolve) => {
+      const variant = challengeConfig.variant;
+      sdkLogger.info('PhysicsChallenge', `setup variant=${variant}, keys=${Object.keys(challengeConfig).join(',')}`);
+
+      if (variant === 'tilt_ball') {
+        this.setupTiltBall(challengeConfig, resolve);
+      } else if (variant === 'gravity_drop') {
+        this.setupGravityDrop(challengeConfig, resolve);
+      } else if (variant === 'balance_scale') {
+        this.setupBalanceScale(challengeConfig, resolve);
+      } else {
+        const ctx = this.ctx!;
+        const W = this.canvas!.width;
+        const H = this.canvas!.height;
+        ctx.fillStyle = '#f0f5fa';
+        ctx.fillRect(0, 0, W, H);
+        ctx.fillStyle = '#666';
+        ctx.font = '14px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.fillText('加载物理挑战...', W / 2, H / 2);
+        resolve({ answer: '', events: [], passtime: 0, error: `unknown_variant:${variant}` });
+      }
+    });
+
+    return { element: wrapper, promise };
+  }
+
+  destroy(): void {
+    if (this.animFrameId != null) {
+      cancelAnimationFrame(this.animFrameId);
+      this.animFrameId = null;
+    }
+    for (const { el, type, fn } of this.boundListeners) {
+      el.removeEventListener(type, fn);
+    }
+    this.boundListeners = [];
+    this.canvas = null;
+    this.ctx = null;
+  }
+
+  private addListener(el: EventTarget, type: string, fn: EventListener, opts?: AddEventListenerOptions): void {
+    el.addEventListener(type, fn, opts);
+    this.boundListeners.push({ el, type, fn });
+  }
+
+  private setupTiltBall(config: any, resolve: (r: PhysicsResult) => void): void {
+    const canvas = this.canvas!;
+    const ctx = this.ctx!;
+    const W = canvas.width;
+    const H = canvas.height;
+
+    const ball = { x: config.ball_start.x * W, y: config.ball_start.y * H, vx: 0, vy: 0 };
+    const holes = config.holes.map((h: any) => ({
+      x: h.x * W, y: h.y * H, r: h.radius * W,
+    }));
+    const targetIdx = config.target_hole;
+    const friction = config.friction;
+    let tiltAngle = 0;
+    let running = true;
+
+    const render = () => {
+      ctx.clearRect(0, 0, W, H);
+
+      // Background
+      ctx.fillStyle = '#f0f5fa';
+      ctx.fillRect(0, 0, W, H);
+
+      // Platform (tilted)
+      ctx.save();
+      ctx.translate(W / 2, H * 0.85);
+      ctx.rotate(tiltAngle * Math.PI / 180);
+      ctx.fillStyle = '#8B7355';
+      ctx.fillRect(-W * 0.45, -4, W * 0.9, 8);
+      ctx.restore();
+
+      // Holes
+      holes.forEach((h: any, i: number) => {
+        ctx.beginPath();
+        ctx.arc(h.x, h.y, h.r, 0, Math.PI * 2);
+        ctx.fillStyle = i === targetIdx ? '#4CAF50' : '#666';
+        ctx.fill();
+        ctx.strokeStyle = i === targetIdx ? '#2E7D32' : '#444';
+        ctx.lineWidth = 2;
+        ctx.stroke();
+        if (i === targetIdx) {
+          ctx.fillStyle = '#fff';
+          ctx.font = '10px sans-serif';
+          ctx.textAlign = 'center';
+          ctx.fillText('TARGET', h.x, h.y + 4);
+        }
+      });
+
+      // Ball
+      ctx.beginPath();
+      ctx.arc(ball.x, ball.y, 10, 0, Math.PI * 2);
+      ctx.fillStyle = '#E53935';
+      ctx.fill();
+      ctx.strokeStyle = '#B71C1C';
+      ctx.lineWidth = 2;
+      ctx.stroke();
+
+      ctx.fillStyle = '#333';
+      ctx.font = '12px sans-serif';
+      ctx.textAlign = 'left';
+      ctx.fillText(`倾斜: ${tiltAngle.toFixed(1)}°`, 10, H - 10);
+
+      ctx.fillStyle = '#888';
+      ctx.font = '11px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText('← 左右移动鼠标来倾斜平台 →', W / 2, 20);
+    };
+
+    const physics = () => {
+      if (!running) return;
+      const gravity = 0.3;
+      const ax = gravity * Math.sin(tiltAngle * Math.PI / 180);
+      ball.vx += ax;
+      ball.vx *= (1 - friction);
+      ball.vy += gravity * Math.cos(tiltAngle * Math.PI / 180) * 0.1;
+      ball.vy *= 0.98;
+      ball.x += ball.vx;
+      ball.y += ball.vy;
+
+      // Boundary
+      if (ball.x < 15) { ball.x = 15; ball.vx *= -0.3; }
+      if (ball.x > W - 15) { ball.x = W - 15; ball.vx *= -0.3; }
+      if (ball.y > H * 0.82) { ball.y = H * 0.82; ball.vy *= -0.3; }
+      if (ball.y < 15) { ball.y = 15; ball.vy *= -0.3; }
+
+      // Check hole collision
+      for (let i = 0; i < holes.length; i++) {
+        const h = holes[i];
+        const dist = Math.sqrt((ball.x - h.x) ** 2 + (ball.y - h.y) ** 2);
+        if (dist < h.r + 5 && Math.abs(ball.vx) < 3) {
+          running = false;
+          sdkLogger.info('PhysicsChallenge', `Ball entered hole ${i} (target=${targetIdx})`);
+          resolve({
+            answer: { target_hole_index: i },
+            passtime: performance.now() - this.startTime,
+            interactionEvents: this.events,
+          });
+          return;
+        }
+      }
+
+      render();
+      this.animFrameId = requestAnimationFrame(physics);
+    };
+
+    this.addListener(canvas, 'mousemove', ((e: MouseEvent) => {
+      const rect = canvas.getBoundingClientRect();
+      const mx = e.clientX - rect.left;
+      tiltAngle = ((mx / W) - 0.5) * 60;
+      this.events.push({
+        type: 'tilt',
+        time: performance.now() - this.startTime,
+        value: tiltAngle,
+      });
+    }) as EventListener);
+
+    render();
+    this.animFrameId = requestAnimationFrame(physics);
+  }
+
+  private setupGravityDrop(config: any, resolve: (r: PhysicsResult) => void): void {
+    const canvas = this.canvas!;
+    const ctx = this.ctx!;
+    const W = canvas.width;
+    const H = canvas.height;
+
+    const dropX = config.drop_position.x * W;
+    const platforms = config.platforms.map((p: any) => ({
+      x: p.x * W, y: p.y * H, w: p.width * W, angle: p.angle,
+    }));
+
+    // Render static scene
+    const render = () => {
+      ctx.clearRect(0, 0, W, H);
+      ctx.fillStyle = '#f0f5fa';
+      ctx.fillRect(0, 0, W, H);
+
+      // Drop position
+      ctx.beginPath();
+      ctx.arc(dropX, 20, 8, 0, Math.PI * 2);
+      ctx.fillStyle = '#E53935';
+      ctx.fill();
+      ctx.fillStyle = '#E53935';
+      ctx.font = '10px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText('↓ DROP', dropX, 42);
+
+      // Platforms
+      platforms.forEach((p: any) => {
+        ctx.save();
+        ctx.translate(p.x, p.y);
+        ctx.rotate(p.angle * Math.PI / 180);
+        ctx.fillStyle = '#5C6BC0';
+        ctx.fillRect(-p.w / 2, -3, p.w, 6);
+        ctx.restore();
+      });
+
+      // Ground
+      ctx.fillStyle = '#795548';
+      ctx.fillRect(0, H - 10, W, 10);
+
+      ctx.fillStyle = '#333';
+      ctx.font = '12px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText('点击球落地的位置', W / 2, H - 20);
+    };
+
+    render();
+
+    const clickHandler = ((e: MouseEvent) => {
+      const rect = canvas.getBoundingClientRect();
+      const clickX = (e.clientX - rect.left) / W;
+      const clickY = (e.clientY - rect.top) / H;
+
+      sdkLogger.info('PhysicsChallenge', `Gravity drop click: x=${clickX.toFixed(3)}, y=${clickY.toFixed(3)}`);
+
+      ctx.beginPath();
+      ctx.arc(e.clientX - rect.left, e.clientY - rect.top, 6, 0, Math.PI * 2);
+      ctx.fillStyle = '#FF9800';
+      ctx.fill();
+      ctx.strokeStyle = '#E65100';
+      ctx.lineWidth = 2;
+      ctx.stroke();
+
+      this.events.push({
+        type: 'click',
+        time: performance.now() - this.startTime,
+        value: { x: clickX, y: clickY },
+      });
+
+      resolve({
+        answer: { click_x: clickX, click_y: clickY },
+        passtime: performance.now() - this.startTime,
+        interactionEvents: this.events,
+      });
+    }) as EventListener;
+    this.addListener(canvas, 'click', clickHandler);
+  }
+
+  private setupBalanceScale(config: any, resolve: (r: PhysicsResult) => void): void {
+    const canvas = this.canvas!;
+    const ctx = this.ctx!;
+    const W = canvas.width;
+    const H = canvas.height;
+
+    const existing = config.existing_weights || [];
+    const available = config.available_weights || [1, 2, 3, 5];
+    let selectedWeight = available[0];
+    let placeSide: 'left' | 'right' = 'left';
+    let placeDistance = 0.5;
+
+    const render = () => {
+      ctx.clearRect(0, 0, W, H);
+      ctx.fillStyle = '#f0f5fa';
+      ctx.fillRect(0, 0, W, H);
+
+      // Fulcrum
+      ctx.beginPath();
+      ctx.moveTo(W / 2 - 15, H * 0.75);
+      ctx.lineTo(W / 2 + 15, H * 0.75);
+      ctx.lineTo(W / 2, H * 0.65);
+      ctx.closePath();
+      ctx.fillStyle = '#5D4037';
+      ctx.fill();
+
+      // Beam
+      ctx.fillStyle = '#8D6E63';
+      ctx.fillRect(W * 0.1, H * 0.63, W * 0.8, 6);
+
+      // Existing weights
+      existing.forEach((w: any) => {
+        const wx = W / 2 + (w.side === 'right' ? 1 : -1) * w.distance * W * 0.35;
+        const wy = H * 0.58;
+        ctx.fillStyle = '#1565C0';
+        ctx.fillRect(wx - 12, wy, 24, 20);
+        ctx.fillStyle = '#fff';
+        ctx.font = 'bold 12px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.fillText(String(w.weight), wx, wy + 14);
+      });
+
+      // Preview of user's placement
+      const previewX = W / 2 + (placeSide === 'right' ? 1 : -1) * placeDistance * W * 0.35;
+      ctx.fillStyle = 'rgba(255, 152, 0, 0.6)';
+      ctx.fillRect(previewX - 12, H * 0.43, 24, 20);
+      ctx.fillStyle = '#fff';
+      ctx.font = 'bold 12px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText(String(selectedWeight), previewX, H * 0.43 + 14);
+
+      ctx.fillStyle = '#333';
+      ctx.font = '11px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText('选择砝码重量（点击数字）:', W / 2, 25);
+
+      available.forEach((w: number, i: number) => {
+        const bx = W / 2 - (available.length * 25) / 2 + i * 30;
+        ctx.fillStyle = w === selectedWeight ? '#FF9800' : '#ddd';
+        ctx.fillRect(bx, 35, 25, 25);
+        ctx.fillStyle = w === selectedWeight ? '#fff' : '#333';
+        ctx.font = 'bold 12px sans-serif';
+        ctx.fillText(String(w), bx + 12, 52);
+      });
+
+      // Side selector
+      ctx.fillStyle = placeSide === 'left' ? '#4CAF50' : '#ddd';
+      ctx.fillRect(30, H * 0.85, 60, 25);
+      ctx.fillStyle = placeSide === 'left' ? '#fff' : '#333';
+      ctx.font = '11px sans-serif';
+      ctx.fillText('左边', 60, H * 0.85 + 16);
+
+      ctx.fillStyle = placeSide === 'right' ? '#4CAF50' : '#ddd';
+      ctx.fillRect(W - 90, H * 0.85, 60, 25);
+      ctx.fillStyle = placeSide === 'right' ? '#fff' : '#333';
+      ctx.fillText('右边', W - 60, H * 0.85 + 16);
+
+      ctx.fillStyle = '#1890ff';
+      ctx.fillRect(W / 2 - 40, H - 35, 80, 28);
+      ctx.fillStyle = '#fff';
+      ctx.font = 'bold 12px sans-serif';
+      ctx.fillText('确认', W / 2, H - 17);
+
+      ctx.fillStyle = '#666';
+      ctx.font = '10px sans-serif';
+      ctx.fillText(`距离: ${placeDistance.toFixed(2)}`, W / 2, H * 0.42 - 5);
+    };
+
+    render();
+
+    this.addListener(canvas, 'click', ((e: MouseEvent) => {
+      const rect = canvas.getBoundingClientRect();
+      const mx = e.clientX - rect.left;
+      const my = e.clientY - rect.top;
+
+      // Weight selector
+      available.forEach((w: number, i: number) => {
+        const bx = W / 2 - (available.length * 25) / 2 + i * 30;
+        if (mx >= bx && mx <= bx + 25 && my >= 35 && my <= 60) {
+          selectedWeight = w;
+          this.events.push({ type: 'select_weight', time: performance.now() - this.startTime, value: w });
+        }
+      });
+
+      // Side selector
+      if (mx >= 30 && mx <= 90 && my >= H * 0.85 && my <= H * 0.85 + 25) {
+        placeSide = 'left';
+        this.events.push({ type: 'select_side', time: performance.now() - this.startTime, value: 'left' });
+      }
+      if (mx >= W - 90 && mx <= W - 30 && my >= H * 0.85 && my <= H * 0.85 + 25) {
+        placeSide = 'right';
+        this.events.push({ type: 'select_side', time: performance.now() - this.startTime, value: 'right' });
+      }
+
+      // Distance adjustment (click on beam area)
+      if (my >= H * 0.5 && my <= H * 0.7) {
+        const relX = (mx - W * 0.15) / (W * 0.7);
+        if (relX >= 0 && relX <= 1) {
+          placeDistance = Math.abs(relX - 0.5) * 2;
+          this.events.push({ type: 'set_distance', time: performance.now() - this.startTime, value: placeDistance });
+        }
+      }
+
+      // Confirm button
+      if (mx >= W / 2 - 40 && mx <= W / 2 + 40 && my >= H - 35 && my <= H - 7) {
+        sdkLogger.info('PhysicsChallenge', `Balance scale confirm: weight=${selectedWeight}, side=${placeSide}, dist=${placeDistance.toFixed(2)}`);
+        resolve({
+          answer: { weight: selectedWeight, side: placeSide, distance: placeDistance },
+          passtime: performance.now() - this.startTime,
+          interactionEvents: this.events,
+        });
+        return;
+      }
+
+      render();
+    }) as EventListener);
+  }
+}

package/src/challenges/rotate.ts

@@ -0,0 +1,81 @@
+import { TrajectoryRecorder } from '../trajectory';
+import { t } from '../i18n';
+
+export interface RotateResult {
+  angle: number;
+  trajectory: any[];
+  passtime: number;
+}
+
+export class RotateChallenge {
+  private recorder = new TrajectoryRecorder();
+  private resolve?: (result: RotateResult) => void;
+  private currentAngle = 0;
+
+  create(imageBase64: string): {
+    element: HTMLElement;
+    promise: Promise<RotateResult>;
+  } {
+    const startTime = performance.now();
+    const wrapper = document.createElement('div');
+    wrapper.className = 'elc-rotate-container';
+
+    const title = document.createElement('div');
+    title.className = 'elc-title';
+    title.textContent = t('rotate.hint');
+
+    const imgWrapper = document.createElement('div');
+    imgWrapper.className = 'elc-rotate-image';
+    const img = document.createElement('img');
+    img.src = `data:image/png;base64,${imageBase64}`;
+    img.style.cssText = 'width:100%;height:100%;object-fit:cover;';
+    img.alt = t('challenge.imageAlt');
+    img.draggable = false;
+    imgWrapper.appendChild(img);
+
+    const slider = document.createElement('input');
+    slider.type = 'range';
+    slider.className = 'elc-rotate-slider';
+    slider.min = '0';
+    slider.max = '360';
+    slider.value = '0';
+    slider.setAttribute('aria-label', t('rotate.hint'));
+
+    const angleLabel = document.createElement('div');
+    angleLabel.style.cssText = 'font-size:13px;color:#888;';
+    angleLabel.textContent = '0°';
+
+    this.recorder.start(wrapper);
+
+    slider.addEventListener('input', () => {
+      this.currentAngle = Number(slider.value);
+      img.style.transform = `rotate(${this.currentAngle}deg)`;
+      angleLabel.textContent = `${this.currentAngle}°`;
+    });
+
+    const submitBtn = document.createElement('button');
+    submitBtn.className = 'elc-submit';
+    submitBtn.textContent = t('icons.confirm');
+
+    const promise = new Promise<RotateResult>((resolve) => {
+      this.resolve = resolve;
+    });
+
+    submitBtn.addEventListener('click', () => {
+      const trajectory = this.recorder.stop();
+      this.resolve?.({
+        angle: this.currentAngle,
+        trajectory,
+        passtime: performance.now() - startTime,
+      });
+    });
+
+    wrapper.appendChild(title);
+    wrapper.appendChild(imgWrapper);
+    wrapper.appendChild(slider);
+    wrapper.appendChild(angleLabel);
+    wrapper.appendChild(submitBtn);
+
+    return { element: wrapper, promise };
+  }
+}

package/src/challenges/slider.ts

@@ -0,0 +1,168 @@
+import { TrajectoryRecorder } from '../trajectory';
+import { t } from '../i18n';
+
+export interface SliderResult {
+  sliderX: number;
+  trajectory: any[];
+  passtime: number;
+}
+
+export class SliderChallenge {
+  private recorder = new TrajectoryRecorder();
+  private resolve?: (result: SliderResult) => void;
+  private targetX = 0;
+  private cleanupFns: (() => void)[] = [];
+
+  create(targetX: number): { element: HTMLElement; promise: Promise<SliderResult> } {
+    this.targetX = targetX;
+
+    const wrapper = document.createElement('div');
+    const title = document.createElement('div');
+    title.className = 'elc-title';
+    title.textContent = t('slider.hint');
+
+    const track = document.createElement('div');
+    track.className = 'elc-slider-track';
+
+    const fill = document.createElement('div');
+    fill.className = 'elc-slider-fill';
+
+    const thumb = document.createElement('div');
+    thumb.className = 'elc-slider-thumb';
+    thumb.innerHTML = '→';
+    thumb.setAttribute('role', 'slider');
+    thumb.setAttribute('tabindex', '0');
+    thumb.setAttribute('aria-label', t('slider.hint'));
+    thumb.setAttribute('aria-valuemin', '0');
+    thumb.setAttribute('aria-valuemax', '100');
+    thumb.setAttribute('aria-valuenow', '0');
+
+    const hint = document.createElement('div');
+    hint.className = 'elc-slider-hint';
+    hint.textContent = t('slider.hint');
+
+    track.appendChild(fill);
+    track.appendChild(hint);
+    track.appendChild(thumb);
+    wrapper.appendChild(title);
+    wrapper.appendChild(track);
+
+    const promise = new Promise<SliderResult>((resolve) => {
+      this.resolve = resolve;
+    });
+
+    this.setupDrag(track, thumb, fill, hint);
+    return { element: wrapper, promise };
+  }
+
+  destroy(): void {
+    this.cleanupFns.forEach(fn => fn());
+    this.cleanupFns = [];
+  }
+
+  private setupDrag(track: HTMLElement, thumb: HTMLElement, fill: HTMLElement, hint: HTMLElement) {
+    let isDragging = false;
+    let startX = 0;
+    let startTime = 0;
+    const trackWidth = () => track.offsetWidth - 40;
+
+    const start = (clientX: number) => {
+      isDragging = true;
+      startX = clientX;
+      startTime = performance.now();
+      hint.style.display = 'none';
+      this.recorder.start(track);
+    };
+
+    const move = (clientX: number) => {
+      if (!isDragging) return;
+      const dx = clientX - startX;
+      const maxX = trackWidth();
+      const x = Math.max(0, Math.min(dx, maxX));
+      const pct = (x / maxX) * 100;
+      thumb.style.left = `${x}px`;
+      fill.style.width = `${pct}%`;
+    };
+
+    const end = (clientX: number) => {
+      if (!isDragging) return;
+      isDragging = false;
+      const trajectory = this.recorder.stop();
+      const dx = clientX - startX;
+      const maxX = trackWidth();
+      const x = Math.max(0, Math.min(dx, maxX));
+      const pct = (x / maxX) * 100;
+      const passtime = performance.now() - startTime;
+
+      this.destroy();
+      this.resolve?.({ sliderX: pct, trajectory, passtime });
+    };
+
+    const onMouseDown = (e: MouseEvent) => { e.preventDefault(); start(e.clientX); };
+    const onMouseMove = (e: MouseEvent) => move(e.clientX);
+    const onMouseUp = (e: MouseEvent) => end(e.clientX);
+    const onTouchStart = (e: TouchEvent) => { start(e.touches[0].clientX); };
+    const onTouchMove = (e: TouchEvent) => { if (isDragging) move(e.touches[0].clientX); };
+    const onTouchEnd = (e: TouchEvent) => { if (isDragging) end(e.changedTouches[0].clientX); };
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      const maxX = trackWidth();
+      const step = maxX * 0.02;
+      const currentX = parseFloat(thumb.style.left || '0');
+      let newX = currentX;
+
+      if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        newX = Math.min(currentX + step, maxX);
+      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        newX = Math.max(currentX - step, 0);
+      } else if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        if (!isDragging) {
+          startTime = performance.now();
+          this.recorder.start(track);
+        }
+        isDragging = false;
+        const trajectory = this.recorder.stop();
+        const pct = (newX / maxX) * 100;
+        const passtime = performance.now() - startTime;
+        this.destroy();
+        this.resolve?.({ sliderX: pct, trajectory, passtime });
+        return;
+      } else {
+        return;
+      }
+
+      if (!isDragging) {
+        isDragging = true;
+        startTime = performance.now();
+        hint.style.display = 'none';
+        this.recorder.start(track);
+      }
+
+      const pct = (newX / maxX) * 100;
+      thumb.style.left = `${newX}px`;
+      fill.style.width = `${pct}%`;
+      thumb.setAttribute('aria-valuenow', String(Math.round(pct)));
+    };
+
+    thumb.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    thumb.addEventListener('touchstart', onTouchStart, { passive: true });
+    document.addEventListener('touchmove', onTouchMove, { passive: true });
+    document.addEventListener('touchend', onTouchEnd);
+    thumb.addEventListener('keydown', onKeyDown);
+
+    this.cleanupFns.push(
+      () => thumb.removeEventListener('mousedown', onMouseDown),
+      () => document.removeEventListener('mousemove', onMouseMove),
+      () => document.removeEventListener('mouseup', onMouseUp),
+      () => thumb.removeEventListener('touchstart', onTouchStart),
+      () => document.removeEventListener('touchmove', onTouchMove),
+      () => document.removeEventListener('touchend', onTouchEnd),
+      () => thumb.removeEventListener('keydown', onKeyDown),
+    );
+  }
+}