engagelab-captcha-sdk 1.0.0

package/dist/types/types.d.ts

@@ -0,0 +1,182 @@
+import type { DeepProbeResult } from './deep_probes';
+import type { PassiveSignalResult } from './passive_signals';
+export interface CaptchaConfig {
+    siteKey: string;
+    apiBase: string;
+    /** When true, enables verbose SDK logging (same effect as localStorage engagelab_captcha_debug). */
+    debug?: boolean;
+    mode?: 'popup' | 'inline' | 'invisible';
+    lang?: string;
+    entityHash?: string;
+    theme?: ThemeConfig;
+    fingerprint?: FingerprintOptions;
+    /** Disable eval/Function.constructor wrapping (e.g. to avoid HMR conflicts). Default: false */
+    disableEvalPatching?: boolean;
+    onReady?: () => void;
+    onSuccess?: (token: string, riskLabels: string[]) => void;
+    onFail?: (error: CaptchaError) => void;
+    /**
+     * Called when the CAPTCHA service is unavailable (risk engine down, HTTP 503, etc.).
+     * The developer should implement their own degradation strategy here.
+     * If not provided, falls back to onFail with code="service_unavailable".
+     *
+     * Recommended actions:
+     * - Allow the user through for low-risk business scenarios
+     * - Block the user for high-risk scenarios (e.g. payment)
+     * - Switch to an alternative verification method (e.g. SMS verification)
+     */
+    onError?: (error: CaptchaError) => void;
+    onClose?: () => void;
+}
+export interface FingerprintOptions {
+    /** Audio fingerprint via OfflineAudioContext (no mic, no permission needed). Default: true */
+    audio?: boolean;
+    /** Canvas fingerprint. Default: true */
+    canvas?: boolean;
+    /** WebGL renderer/vendor fingerprint. Default: true */
+    webgl?: boolean;
+    /** Font detection via DOM measurement. Default: true */
+    fonts?: boolean;
+    /** WebRTC local IP detection. Default: true */
+    webrtc?: boolean;
+}
+export interface ThemeConfig {
+    primaryColor?: string;
+    successColor?: string;
+    errorColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    borderRadius?: number;
+    fontFamily?: string;
+    darkMode?: boolean;
+}
+export interface CaptchaError {
+    code: string;
+    message: string;
+}
+/**
+ * Thrown when the CAPTCHA backend service is unavailable (HTTP 503 or
+ * verify returns decision="service_unavailable"). The developer should
+ * implement their own degradation strategy in the onError callback.
+ */
+export declare class ServiceError extends Error {
+    readonly code: string;
+    constructor(code: string, message: string);
+}
+export interface Fingerprint {
+    canvasHash: string;
+    webglRenderer: string;
+    webglVendor: string;
+    webglHash: string;
+    audioHash: string;
+    screenWidth: number;
+    screenHeight: number;
+    colorDepth: number;
+    devicePixelRatio: number;
+    timezone: string;
+    timezoneOffset: number;
+    language: string;
+    languages: string[];
+    platform: string;
+    hardwareConcurrency: number;
+    deviceMemory: number;
+    maxTouchPoints: number;
+    fonts: string[];
+    pluginCount: number;
+    webdriver: boolean;
+    hasChromeRuntime: boolean;
+    connectionType: string;
+    screenAvailWidth: number;
+    screenAvailHeight: number;
+    outerWidth: number;
+    outerHeight: number;
+    innerWidth: number;
+    innerHeight: number;
+    headlessSignals: HeadlessSignal[];
+    mathFp: MathFingerprint;
+    storageInfo: StorageInfo;
+    /** Deep environment probes (snake_case key matches server env analyzer). */
+    deep_probes?: DeepProbeResult[];
+    /** Background behavioral signals collected before challenge interaction. */
+    passive_signals?: PassiveSignalResult;
+    /** Stack trace records from wrapped native functions. */
+    native_traces?: NativeTrace[];
+    /** Number of SDK sessions from this browser (persisted via IndexedDB). */
+    session_count?: number;
+}
+export interface NativeTrace {
+    fn: string;
+    stack: string;
+    timestamp: number;
+}
+export interface HeadlessSignal {
+    name: string;
+    detected: boolean;
+    value: string;
+    weight: number;
+}
+export interface MathFingerprint {
+    tanValue: number;
+    atan2Value: number;
+    logValue: number;
+    sinValue: number;
+}
+export interface StorageInfo {
+    localStorage: boolean;
+    sessionStorage: boolean;
+    indexedDb: boolean;
+}
+export interface TrajectoryPoint {
+    x: number;
+    y: number;
+    timestamp: number;
+    eventType: string;
+    isTrusted: boolean;
+    movementX: number;
+    movementY: number;
+    buttons: number;
+    force?: number;
+    radiusX?: number;
+    radiusY?: number;
+}
+export interface PowResult {
+    challenge: string;
+    nonce: string;
+    difficulty: number;
+    computationTimeMs: number;
+    iterations: number;
+}
+export interface TimingData {
+    domContentLoaded: number;
+    sdkInitTime: number;
+    interactionStart: number;
+    verificationComplete: number;
+    jsMeasurements: {
+        operation: string;
+        durationMs: number;
+    }[];
+    performanceNowPrecision: number;
+}
+export interface IntegrityData {
+    sdkHash: string;
+    patchedFunctions: string[];
+    devtoolsDetected: boolean;
+}
+export interface InitResponse {
+    sessionId: string;
+    challengeType: string;
+    powDifficulty: number;
+    powChallenge: string;
+    challengeConfig: any;
+    publicKey: string;
+}
+export interface VerifyResponse {
+    success: boolean;
+    decision: string;
+    score: number;
+    riskLabels: string[];
+    validateToken: string;
+    layerResults?: any[];
+    nextChallenge?: string;
+    degraded?: boolean;
+}

package/dist/types/ui/container.d.ts

@@ -0,0 +1,20 @@
+export declare class CaptchaContainer {
+    private overlay;
+    private container;
+    private closeBtn;
+    private contentArea;
+    private brand;
+    private statusRegion;
+    private onCloseCallback?;
+    private autoCloseTimer?;
+    private previousFocus;
+    private onKeyDown;
+    show(content: HTMLElement, onClose?: () => void): HTMLElement;
+    close(): void;
+    showLoading(): HTMLElement;
+    showResult(success: boolean, message?: string): void;
+    updateContent(content: HTMLElement): void;
+    getContainer(): HTMLElement | null;
+    private announceStatus;
+    private setupFocusTrap;
+}

package/dist/types/ui/styles.d.ts

@@ -0,0 +1 @@
+export declare function injectStyles(): void;

package/dist/types/wasm_core.d.ts

@@ -0,0 +1,44 @@
+/**
+ * WASM Core Logic Framework — protect critical SDK logic in WebAssembly.
+ *
+ * This module provides a framework for running sensitive computations in WASM,
+ * making reverse-engineering significantly harder than plain JavaScript.
+ *
+ * Currently provides:
+ * 1. WASM-based PoW computation (faster + harder to bypass)
+ * 2. WASM-based fingerprint hashing
+ * 3. Runtime integrity verification
+ */
+export interface WasmCore {
+    computePoW(challenge: string, difficulty: number): Promise<{
+        nonce: string;
+        hash: string;
+        iterations: number;
+    }>;
+    hashFingerprint(data: string): string;
+    verifyIntegrity(): boolean;
+}
+export declare function getWasmCore(): Promise<WasmCore>;
+/**
+ * Runtime Integrity Monitor — continuously verifies SDK hasn't been tampered with.
+ */
+export declare class RuntimeIntegrityMonitor {
+    private checksums;
+    private intervalId;
+    private tamperCallbacks;
+    start(checkIntervalMs?: number): void;
+    stop(): void;
+    onTamperDetected(callback: (detail: string) => void): void;
+    private snapshot;
+    private verify;
+    private simpleHash;
+}
+/**
+ * SDK Version Rotation Framework — supports serving different obfuscated versions.
+ */
+export interface SDKVersion {
+    version: string;
+    buildHash: string;
+    features: string[];
+}
+export declare function getCurrentSDKVersion(): SDKVersion;

package/dist/types/web-component.d.ts

@@ -0,0 +1,11 @@
+export declare class EngageLabCaptchaElement extends HTMLElement {
+    private _instance;
+    static get observedAttributes(): ("auto" | "mode" | "sitekey" | "api-base" | "lang" | "theme" | "entity-hash" | "debug")[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    execute(challengeType?: string): void;
+    reset(): void;
+    private _createInstance;
+}
+export declare function registerWebComponent(tagName?: string): void;

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "engagelab-captcha-sdk",
+  "version": "1.0.0",
+  "description": "EngageLab CAPTCHA Web SDK - behavioral verification",
+  "main": "dist/captcha-sdk.umd.js",
+  "module": "dist/captcha-sdk.esm.js",
+  "types": "dist/types/index.d.ts",
+  "scripts": {
+    "build": "rollup -c rollup.config.mjs",
+    "dev": "rollup -c rollup.config.mjs -w"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-typescript": "^12.1.0",
+    "javascript-obfuscator": "^5.3.0",
+    "rollup": "^4.28.0",
+    "rollup-plugin-obfuscator": "^1.1.0",
+    "@rollup/plugin-terser": "^0.4.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2"
+  }
+}

package/rollup.config.mjs

@@ -0,0 +1,62 @@
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import terser from '@rollup/plugin-terser';
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+const obfuscatorConfig = {
+  compact: true,
+  controlFlowFlattening: true,
+  controlFlowFlatteningThreshold: 0.5,
+  deadCodeInjection: true,
+  deadCodeInjectionThreshold: 0.2,
+  identifierNamesGenerator: 'hexadecimal',
+  renameGlobals: false,
+  selfDefending: true,
+  stringArray: true,
+  stringArrayEncoding: ['rc4'],
+  stringArrayThreshold: 0.5,
+  transformObjectKeys: true,
+  unicodeEscapeSequence: false,
+};
+
+let obfuscatorPlugin = null;
+if (isProduction) {
+  try {
+    const { default: obfuscator } = await import('rollup-plugin-obfuscator');
+    obfuscatorPlugin = obfuscator({ options: obfuscatorConfig });
+  } catch {
+    console.warn('rollup-plugin-obfuscator not found, skipping obfuscation');
+  }
+}
+
+const sharedPlugins = [
+  resolve(),
+  typescript({ tsconfig: './tsconfig.json' }),
+  terser(),
+  ...(obfuscatorPlugin ? [obfuscatorPlugin] : []),
+];
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: {
+      file: 'dist/captcha-sdk.umd.js',
+      format: 'umd',
+      name: 'EngageLabCaptcha',
+      sourcemap: !isProduction,
+      inlineDynamicImports: true,
+    },
+    plugins: sharedPlugins,
+  },
+  {
+    input: 'src/index.ts',
+    output: {
+      file: 'dist/captcha-sdk.esm.js',
+      format: 'es',
+      sourcemap: !isProduction,
+      inlineDynamicImports: true,
+    },
+    plugins: sharedPlugins,
+  },
+];

package/src/api.ts

@@ -0,0 +1,180 @@
+import { InitResponse, VerifyResponse, ServiceError } from './types';
+import { generateNonce } from './crypto';
+import { sdkLogger } from './logger';
+
+export class CaptchaAPI {
+  private baseUrl: string;
+  private siteKey: string;
+
+  constructor(baseUrl: string, siteKey?: string) {
+    this.baseUrl = baseUrl.replace(/\/$/, '');
+    this.siteKey = siteKey || '';
+  }
+
+  async init(siteKey: string, entityHash?: string): Promise<InitResponse> {
+    const started = performance.now();
+    const url = `${this.baseUrl}/v1/init`;
+    sdkLogger.info('API', `POST ${url}`, {
+      siteKey: siteKey ? `${siteKey.substring(0, 8)}…` : '',
+      hasEntityHash: !!entityHash,
+    });
+    try {
+      const resp = await this.post('/v1/init', { siteKey, entityHash });
+      const ms = (performance.now() - started).toFixed(1);
+      sdkLogger.info('API', `init OK in ${ms}ms`, {
+        sessionId: resp?.sessionId ? `${String(resp.sessionId).substring(0, 8)}…` : '',
+        challengeType: resp?.challengeType,
+        powDifficulty: resp?.powDifficulty,
+      });
+      return resp as InitResponse;
+    } catch (e: any) {
+      sdkLogger.error('API', `init failed after ${(performance.now() - started).toFixed(1)}ms`, e?.message || e);
+      throw e;
+    }
+  }
+
+  async verify(sessionId: string, data: any): Promise<VerifyResponse> {
+    const started = performance.now();
+    const url = `${this.baseUrl}/v1/verify`;
+    const challengeType = data?.challengeType;
+    sdkLogger.info('API', `POST ${url}`, {
+      sessionId: sessionId ? `${sessionId.substring(0, 8)}…` : '',
+      challengeType,
+      hasFingerprint: !!data?.fingerprint,
+      trajectoryPoints: Array.isArray(data?.trajectory) ? data.trajectory.length : undefined,
+      hasPow: !!data?.powResult,
+    });
+    try {
+      const resp = await this.post('/v1/verify', { sessionId, ...data });
+      const ms = (performance.now() - started).toFixed(1);
+      sdkLogger.info('API', `verify OK in ${ms}ms`, {
+        success: resp?.success,
+        decision: resp?.decision,
+        score: resp?.score,
+        nextChallenge: resp?.nextChallenge,
+      });
+      return resp as VerifyResponse;
+    } catch (e: any) {
+      sdkLogger.error('API', `verify failed after ${(performance.now() - started).toFixed(1)}ms`, e?.message || e);
+      throw e;
+    }
+  }
+
+  async getChallenge(sessionId: string, type: string): Promise<any> {
+    const started = performance.now();
+    const path = `/v1/challenge/${type}?sessionId=${sessionId}`;
+    const fullUrl = `${this.baseUrl}${path.split('?')[0]}`;
+    sdkLogger.info('API', `GET challenge`, { url: fullUrl, type, sessionId: `${sessionId.substring(0, 8)}…` });
+    try {
+      const json = await this.get(`/v1/challenge/${type}?sessionId=${sessionId}`);
+      sdkLogger.info('API', `getChallenge OK in ${(performance.now() - started).toFixed(1)}ms`, {
+        hasImage: !!(json?.imageBase64 || json?.image_url),
+        keys: json && typeof json === 'object' ? Object.keys(json).slice(0, 12) : [],
+      });
+      return json;
+    } catch (e: any) {
+      sdkLogger.error('API', `getChallenge failed after ${(performance.now() - started).toFixed(1)}ms`, e?.message || e);
+      throw e;
+    }
+  }
+
+  async getResult(sessionId: string): Promise<any> {
+    const started = performance.now();
+    sdkLogger.info('API', `GET result`, { sessionId: `${sessionId.substring(0, 8)}…` });
+    try {
+      const json = await this.get(`/v1/result/${sessionId}`);
+      sdkLogger.debug('API', `getResult OK in ${(performance.now() - started).toFixed(1)}ms`, { keys: json ? Object.keys(json) : [] });
+      return json;
+    } catch (e: any) {
+      sdkLogger.error('API', `getResult failed`, e?.message || e);
+      throw e;
+    }
+  }
+
+  private async post(path: string, body: any): Promise<any> {
+    const t0 = performance.now();
+    const nonce = generateNonce();
+    const timestamp = Date.now();
+    const method = 'POST';
+    const url = `${this.baseUrl}${path}`;
+    sdkLogger.debug('API', `${method} ${path}`, {
+      keys: body && typeof body === 'object' ? Object.keys(body) : [],
+    });
+
+    let resp: Response;
+    try {
+      resp = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Site-Key': this.siteKey,
+          'X-Request-Nonce': nonce,
+          'X-Request-Timestamp': String(timestamp),
+        },
+        body: JSON.stringify(body),
+      });
+    } catch (e: any) {
+      sdkLogger.error('API', `fetch POST ${path} network error`, e?.message || e);
+      throw e;
+    }
+
+    const elapsed = (performance.now() - t0).toFixed(1);
+    if (!resp.ok) {
+      sdkLogger.error('API', `POST ${path} HTTP ${resp.status} in ${elapsed}ms`, resp.statusText);
+      if (resp.status === 503) {
+        let body: any = {};
+        try { body = await resp.json(); } catch { /* ignore */ }
+        throw new ServiceError('service_unavailable', body.message || 'Service temporarily unavailable');
+      }
+      throw new Error(`API error: ${resp.status} ${resp.statusText}`);
+    }
+
+    let json: any;
+    try {
+      json = await resp.json();
+    } catch (e: any) {
+      sdkLogger.error('API', `POST ${path} JSON parse error`, e?.message || e);
+      throw e;
+    }
+    sdkLogger.debug('API', `POST ${path} ${resp.status} in ${elapsed}ms`);
+    return json;
+  }
+
+  private async get(path: string): Promise<any> {
+    const t0 = performance.now();
+    const separator = path.includes('?') ? '&' : '?';
+    const url = `${this.baseUrl}${path}${separator}siteKey=${encodeURIComponent(this.siteKey)}`;
+    sdkLogger.debug('API', `GET ${path.split('?')[0]}`);
+
+    let resp: Response;
+    try {
+      resp = await fetch(url, {
+        headers: { 'X-Site-Key': this.siteKey },
+      });
+    } catch (e: any) {
+      sdkLogger.error('API', `fetch GET error`, e?.message || e);
+      throw e;
+    }
+
+    const elapsed = (performance.now() - t0).toFixed(1);
+    if (!resp.ok) {
+      sdkLogger.error('API', `GET HTTP ${resp.status} in ${elapsed}ms`, path);
+      if (resp.status === 503) {
+        let body: any = {};
+        try { body = await resp.json(); } catch { /* ignore */ }
+        throw new ServiceError('service_unavailable', body.message || 'Service temporarily unavailable');
+      }
+      throw new Error(`API error: ${resp.status}`);
+    }
+
+    let json: any;
+    try {
+      json = await resp.json();
+    } catch (e: any) {
+      sdkLogger.error('API', `GET JSON parse error`, e?.message || e);
+      throw e;
+    }
+    sdkLogger.debug('API', `GET ${resp.status} in ${elapsed}ms`);
+    return json;
+  }
+}

package/src/challenges/dragsort.ts

@@ -0,0 +1,168 @@
+import { TrajectoryRecorder } from '../trajectory';
+import { t } from '../i18n';
+
+export interface DragSortResult {
+  sortOrder: number[];
+  trajectory: any[];
+  passtime: number;
+  dragEvents: { fromIndex: number; toIndex: number; timestamp: number }[];
+}
+
+export class DragSortChallenge {
+  private recorder = new TrajectoryRecorder();
+  private startTime = 0;
+  private currentOrder: number[] = [];
+  private dragEvents: { fromIndex: number; toIndex: number; timestamp: number }[] = [];
+  private draggedEl: HTMLElement | null = null;
+
+  create(imageBase64: string, instruction: string, itemCount: number): {
+    element: HTMLElement;
+    getResult: () => DragSortResult;
+  } {
+    const wrapper = document.createElement('div');
+    wrapper.style.cssText = 'width:100%;max-width:380px;margin:0 auto;';
+
+    const instructionEl = document.createElement('div');
+    instructionEl.style.cssText = 'font-size:14px;color:#333;margin-bottom:12px;text-align:center;font-weight:500;';
+    instructionEl.textContent = instruction;
+    wrapper.appendChild(instructionEl);
+
+    const img = document.createElement('img');
+    img.src = `data:image/png;base64,${imageBase64}`;
+    img.style.cssText = 'width:100%;border-radius:8px;margin-bottom:12px;pointer-events:none;user-select:none;';
+    wrapper.appendChild(img);
+
+    const hint = document.createElement('div');
+    hint.style.cssText = 'font-size:12px;color:#999;text-align:center;margin-bottom:8px;';
+    hint.textContent = t('dragsort.hint');
+    wrapper.appendChild(hint);
+
+    const listContainer = document.createElement('div');
+    listContainer.style.cssText = 'display:flex;flex-direction:column;gap:6px;';
+    listContainer.setAttribute('role', 'list');
+    listContainer.setAttribute('aria-label', instruction);
+    wrapper.appendChild(listContainer);
+
+    this.currentOrder = Array.from({ length: itemCount }, (_, i) => i);
+
+    for (let i = 0; i < itemCount; i++) {
+      const item = document.createElement('div');
+      item.style.cssText = `
+        display:flex;align-items:center;padding:10px 12px;
+        background:#f5f5f5;border:2px solid #e0e0e0;border-radius:6px;
+        cursor:grab;user-select:none;font-size:14px;color:#333;
+        transition:transform 0.15s,box-shadow 0.15s;
+      `;
+      item.dataset.originalIndex = String(i);
+      item.draggable = true;
+      item.setAttribute('role', 'listitem');
+      item.setAttribute('tabindex', '0');
+
+      const handle = document.createElement('span');
+      handle.style.cssText = 'margin-right:10px;color:#bbb;font-size:16px;flex-shrink:0;';
+      handle.setAttribute('aria-hidden', 'true');
+      handle.textContent = '⋮⋮';
+      item.appendChild(handle);
+
+      const numBadge = document.createElement('span');
+      numBadge.style.cssText = `
+        display:inline-flex;align-items:center;justify-content:center;
+        width:24px;height:24px;border-radius:4px;margin-right:8px;
+        font-size:12px;font-weight:bold;color:white;flex-shrink:0;
+        background:#1890ff;
+      `;
+      numBadge.textContent = String(i + 1);
+      item.appendChild(numBadge);
+
+      const label = document.createElement('span');
+      label.className = 'elc-drag-label';
+      label.style.cssText = 'flex:1;';
+      label.textContent = `${t('dragsort.hint').charAt(0) === '请' ? '第' : 'Item '}${i + 1}${t('dragsort.hint').charAt(0) === '请' ? '项' : ''}`;
+      item.appendChild(label);
+
+      this.setupDragHandlers(item, listContainer);
+      listContainer.appendChild(item);
+    }
+
+    this.recorder.start(wrapper);
+    this.startTime = Date.now();
+
+    return {
+      element: wrapper,
+      getResult: () => ({
+        sortOrder: this.getCurrentOrder(listContainer),
+        trajectory: this.recorder.getPoints(),
+        passtime: Date.now() - this.startTime,
+        dragEvents: this.dragEvents,
+      }),
+    };
+  }
+
+  private getCurrentOrder(container: HTMLElement): number[] {
+    return Array.from(container.children).map(
+      c => parseInt((c as HTMLElement).dataset.originalIndex || '0')
+    );
+  }
+
+  private setupDragHandlers(item: HTMLElement, container: HTMLElement): void {
+    item.addEventListener('dragstart', (e) => {
+      this.draggedEl = item;
+      item.style.opacity = '0.5';
+      item.style.cursor = 'grabbing';
+      e.dataTransfer!.effectAllowed = 'move';
+      e.dataTransfer!.setData('text/plain', '');
+    });
+
+    item.addEventListener('dragend', () => {
+      if (this.draggedEl) {
+        this.draggedEl.style.opacity = '1';
+        this.draggedEl.style.cursor = 'grab';
+      }
+      this.draggedEl = null;
+      container.querySelectorAll('[role="listitem"]').forEach(el => {
+        (el as HTMLElement).style.borderColor = '#e0e0e0';
+      });
+    });
+
+    item.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      e.dataTransfer!.dropEffect = 'move';
+      if (this.draggedEl && this.draggedEl !== item) {
+        item.style.borderColor = '#1890ff';
+      }
+    });
+
+    item.addEventListener('dragleave', () => {
+      item.style.borderColor = '#e0e0e0';
+    });
+
+    item.addEventListener('drop', (e) => {
+      e.preventDefault();
+      item.style.borderColor = '#e0e0e0';
+      if (!this.draggedEl || this.draggedEl === item) return;
+
+      const fromIdx = parseInt(this.draggedEl.dataset.originalIndex || '0');
+      const toIdx = parseInt(item.dataset.originalIndex || '0');
+
+      this.dragEvents.push({
+        fromIndex: fromIdx,
+        toIndex: toIdx,
+        timestamp: Date.now(),
+      });
+
+      const children = Array.from(container.children);
+      const fromPos = children.indexOf(this.draggedEl);
+      const toPos = children.indexOf(item);
+
+      if (fromPos < toPos) {
+        container.insertBefore(this.draggedEl, item.nextSibling);
+      } else {
+        container.insertBefore(this.draggedEl, item);
+      }
+    });
+  }
+
+  destroy(): void {
+    this.recorder.stop();
+  }
+}