stellavault 0.1.0

package/packages/graph/src/hooks/useKeyboardNav.ts

@@ -0,0 +1,122 @@
+// Keyboard-Only Graph Navigation (F-A18)
+// Tab: cycle nodes, Arrow keys: traverse connections, Enter: select, Esc: deselect
+
+import { useEffect, useCallback } from 'react';
+import { useGraphStore } from '../stores/graph-store.js';
+
+export function useKeyboardNav() {
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    // Don't interfere with input fields
+    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+
+    const state = useGraphStore.getState();
+    const { nodes, edges, selectedNodeId, selectNode, hoverNode } = state;
+    if (nodes.length === 0) return;
+
+    switch (e.key) {
+      case 'Tab': {
+        e.preventDefault();
+        // Cycle through nodes
+        const currentIdx = selectedNodeId
+          ? nodes.findIndex(n => n.id === selectedNodeId)
+          : -1;
+        const nextIdx = e.shiftKey
+          ? (currentIdx <= 0 ? nodes.length - 1 : currentIdx - 1)
+          : (currentIdx + 1) % nodes.length;
+        selectNode(nodes[nextIdx].id);
+        focusNode(nodes[nextIdx].id);
+        break;
+      }
+
+      case 'ArrowRight':
+      case 'ArrowDown': {
+        e.preventDefault();
+        if (!selectedNodeId) { selectNode(nodes[0].id); focusNode(nodes[0].id); break; }
+        // Navigate to next connected node
+        const neighbors = getNeighbors(selectedNodeId, edges);
+        if (neighbors.length > 0) {
+          const currentNeighborIdx = neighbors.indexOf(selectedNodeId);
+          const nextNeighbor = neighbors[(currentNeighborIdx + 1) % neighbors.length];
+          selectNode(nextNeighbor);
+          focusNode(nextNeighbor);
+        }
+        break;
+      }
+
+      case 'ArrowLeft':
+      case 'ArrowUp': {
+        e.preventDefault();
+        if (!selectedNodeId) break;
+        const neighbors = getNeighbors(selectedNodeId, edges);
+        if (neighbors.length > 0) {
+          const currentNeighborIdx = neighbors.indexOf(selectedNodeId);
+          const prevNeighbor = neighbors[(currentNeighborIdx - 1 + neighbors.length) % neighbors.length];
+          selectNode(prevNeighbor);
+          focusNode(prevNeighbor);
+        }
+        break;
+      }
+
+      case 'Enter': {
+        if (selectedNodeId) {
+          // Trigger node detail view (already handled by selectNode)
+          hoverNode(null);
+        }
+        break;
+      }
+
+      case 'Escape': {
+        selectNode(null);
+        hoverNode(null);
+        (window as any).__sv_resetCamera?.();
+        break;
+      }
+
+      case '/': {
+        e.preventDefault();
+        // Focus search bar
+        const searchInput = document.querySelector('input[placeholder*="Search"]') as HTMLInputElement;
+        searchInput?.focus();
+        break;
+      }
+
+      case '?': {
+        if (!e.shiftKey) break;
+        // Show keyboard shortcuts help
+        console.log('Keyboard shortcuts: Tab=cycle, Arrow=traverse, Enter=select, Esc=reset, /=search');
+        break;
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+}
+
+function getNeighbors(nodeId: string, edges: Array<{ source: string; target: string }>): string[] {
+  const neighbors = new Set<string>();
+  for (const e of edges) {
+    if (e.source === nodeId) neighbors.add(e.target);
+    if (e.target === nodeId) neighbors.add(e.source);
+  }
+  return [...neighbors];
+}
+
+function focusNode(nodeId: string) {
+  // Trigger camera focus via the same mechanism as search
+  const state = useGraphStore.getState();
+  const node = state.nodes.find(n => n.id === nodeId);
+  if (!node?.position) return;
+
+  const controls = (window as any).__sv_controls?.current;
+  if (!controls) return;
+
+  const THREE = (window as any).__THREE__;
+  if (!THREE) return;
+
+  const target = new THREE.Vector3(...node.position);
+  controls.target.copy(target);
+  controls.update();
+}

package/packages/graph/src/hooks/useLayout.ts

@@ -0,0 +1,45 @@
+// Force layout — 첫 로드 시 1회만 실행, 모드 전환 시 재실행 안 함
+
+import { useEffect, useRef } from 'react';
+import { useGraphStore } from '../stores/graph-store.js';
+
+export function useLayout() {
+  const ranRef = useRef(false);
+  const nodes = useGraphStore((s) => s.nodes);
+  const edges = useGraphStore((s) => s.edges);
+  const clusters = useGraphStore((s) => s.clusters);
+  const setGraphData = useGraphStore((s) => s.setGraphData);
+
+  useEffect(() => {
+    // 첫 로드에만 실행
+    if (nodes.length === 0 || ranRef.current) return;
+    ranRef.current = true;
+
+    const worker = new Worker(
+      new URL('../lib/layout.worker.ts', import.meta.url),
+      { type: 'module' },
+    );
+
+    worker.onmessage = (e) => {
+      const { type, positions } = e.data;
+      if (type === 'progress' || type === 'done') {
+        // 위치만 업데이트, 현재 클러스터 유지
+        const currentState = useGraphStore.getState();
+        const updated = currentState.nodes.map((n, i) => ({
+          ...n,
+          position: positions[i] as [number, number, number],
+        }));
+        setGraphData(updated, currentState.edges, currentState.clusters);
+      }
+      if (type === 'done') worker.terminate();
+    };
+
+    worker.postMessage({
+      type: 'init',
+      nodes: nodes.map(n => ({ id: n.id, clusterId: n.clusterId, size: n.size })),
+      edges,
+    });
+
+    return () => worker.terminate();
+  }, [nodes.length > 0]);
+}

package/packages/graph/src/hooks/useMotion.ts

@@ -0,0 +1,120 @@
+// Design Ref: §2.3 — 제스처 → OrbitControls 매핑
+
+import { useRef, useCallback, useEffect } from 'react';
+import { createMotionController, type MotionController } from '../lib/motion-controller.js';
+import type { GestureResult } from '../lib/gesture-detector.js';
+import { useGraphStore } from '../stores/graph-store.js';
+
+export interface UseMotionReturn {
+  start: () => Promise<void>;
+  stop: () => void;
+  isActive: boolean;
+  videoRef: React.RefObject<HTMLVideoElement | null>;
+  currentGesture: React.RefObject<string>;
+}
+
+export function useMotion(controlsRef: React.RefObject<any>): UseMotionReturn {
+  const controllerRef = useRef<MotionController | null>(null);
+  const activeRef = useRef(false);
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const currentGesture = useRef<string>('none');
+  const initialZoomRef = useRef<number | null>(null);
+  const pinchBaseRef = useRef<number>(0);
+
+  const handleGesture = useCallback((gesture: GestureResult) => {
+    const controls = controlsRef.current;
+    if (!controls) return;
+
+    currentGesture.current = gesture.type;
+    const sensitivity = 3;
+
+    switch (gesture.type) {
+      case 'rotate':
+        // 손 이동 → 회전
+        controls.setAzimuthalAngle(
+          controls.getAzimuthalAngle() - gesture.delta.x * sensitivity
+        );
+        controls.setPolarAngle(
+          Math.max(0.1, Math.min(Math.PI - 0.1,
+            controls.getPolarAngle() + gesture.delta.y * sensitivity
+          ))
+        );
+        controls.update();
+        break;
+
+      case 'pan': {
+        // 주먹 이동 → 패닝
+        const target = controls.target;
+        target.x -= gesture.delta.x * 500;
+        target.y += gesture.delta.y * 500;
+        controls.update();
+        break;
+      }
+
+      case 'zoom': {
+        // 핀치 거리 → 줌
+        if (pinchBaseRef.current === 0) pinchBaseRef.current = gesture.pinchDistance;
+        const zoomDelta = (gesture.pinchDistance - pinchBaseRef.current) * 2000;
+        const cam = controls.object;
+        if (cam) {
+          const dir = cam.position.clone().sub(controls.target).normalize();
+          cam.position.addScaledVector(dir, -zoomDelta);
+          pinchBaseRef.current = gesture.pinchDistance;
+        }
+        controls.update();
+        break;
+      }
+
+      case 'select': {
+        // 검지 포인팅 → 노드 호버 (화면 좌표로 변환)
+        // 간단 구현: 검지 위치를 hoveredNodeId로 매핑 (향후 raycast 개선)
+        break;
+      }
+
+      case 'reset': {
+        // 손 흔들기 → 초기 위치
+        const cam = controls.object;
+        if (cam) {
+          cam.position.set(0, 100, 600);
+          controls.target.set(0, 0, 0);
+          controls.update();
+        }
+        const state = useGraphStore.getState();
+        state.selectNode(null);
+        state.setHighlightedNodes([]);
+        break;
+      }
+    }
+
+    // 핀치 외 제스처에서 pinchBase 리셋
+    if (gesture.type !== 'zoom') pinchBaseRef.current = 0;
+  }, [controlsRef]);
+
+  const start = useCallback(async () => {
+    if (!controllerRef.current) {
+      controllerRef.current = createMotionController();
+    }
+    controllerRef.current.onGesture(handleGesture);
+    await controllerRef.current.start();
+    videoRef.current = controllerRef.current.getVideoElement();
+    activeRef.current = true;
+  }, [handleGesture]);
+
+  const stop = useCallback(() => {
+    controllerRef.current?.stop();
+    activeRef.current = false;
+    videoRef.current = null;
+    currentGesture.current = 'none';
+  }, []);
+
+  // 컴포넌트 언마운트 시 정리
+  useEffect(() => () => { controllerRef.current?.stop(); }, []);
+
+  return {
+    start,
+    stop,
+    get isActive() { return activeRef.current; },
+    videoRef,
+    currentGesture,
+  };
+}

package/packages/graph/src/hooks/usePulse.ts

@@ -0,0 +1,58 @@
+// 빛 입자 탐색 — 방문 순서만 계산, 실제 애니메이션은 PulseAnimator에서
+
+import { useRef, useCallback } from 'react';
+import { useGraphStore } from '../stores/graph-store.js';
+
+export interface PulseData {
+  visitOrder: string[];
+  positions: Map<string, [number, number, number]>;
+  running: boolean;
+}
+
+// Scene 내부 PulseAnimator가 읽을 수 있도록 전역 ref
+export let pulseData: PulseData = { visitOrder: [], positions: new Map(), running: false };
+
+export function usePulse() {
+  const startPulse = useCallback((startId: string) => {
+    const { edges, nodes } = useGraphStore.getState();
+
+    // BFS
+    const adj = new Map<string, string[]>();
+    for (const e of edges) {
+      if (!adj.has(e.source)) adj.set(e.source, []);
+      if (!adj.has(e.target)) adj.set(e.target, []);
+      adj.get(e.source)!.push(e.target);
+      adj.get(e.target)!.push(e.source);
+    }
+
+    const visited = new Set<string>();
+    const visitOrder: string[] = [];
+    const queue = [startId];
+    visited.add(startId);
+    while (queue.length > 0 && visitOrder.length < 50) {
+      const id = queue.shift()!;
+      visitOrder.push(id);
+      for (const nid of (adj.get(id) ?? [])) {
+        if (!visited.has(nid)) { visited.add(nid); queue.push(nid); }
+      }
+    }
+
+    const positions = new Map(nodes.map(n => [n.id, (n.position ?? [0, 0, 0]) as [number, number, number]]));
+
+    pulseData = { visitOrder, positions, running: true };
+
+    // 시작 노드 점등 (기존 하이라이트 유지하지 않고 pulse용으로 리셋)
+    useGraphStore.getState().setHighlightedNodes([startId]);
+    useGraphStore.getState().setPulseParticlePos(positions.get(startId) ?? [0, 0, 0]);
+    // 선택 유지 (노드 라벨이 사라지지 않도록)
+    useGraphStore.getState().selectNode(startId);
+  }, []);
+
+  const stopPulse = useCallback(() => {
+    pulseData = { visitOrder: [], positions: new Map(), running: false };
+    useGraphStore.getState().setHighlightedNodes([]);
+    useGraphStore.getState().setPulseParticlePos(null);
+  }, []);
+
+  return { startPulse, stopPulse };
+}

package/packages/graph/src/hooks/useSearch.ts

@@ -0,0 +1,71 @@
+// 검색 → API → 노드 하이라이트 + 첫 결과로 카메라 이동
+
+import { useCallback, useRef } from 'react';
+import * as THREE from 'three';
+import { fetchSearch } from '../api/client.js';
+import { useGraphStore } from '../stores/graph-store.js';
+
+function focusOnNode(nodeId: string) {
+  const state = useGraphStore.getState();
+  const node = state.nodes.find(n => n.id === nodeId);
+  if (!node?.position) return;
+
+  const controls = (window as any).__sv_controls?.current;
+  if (!controls) return;
+
+  const target = new THREE.Vector3(...node.position);
+  const startTarget = controls.target.clone();
+  const startPos = controls.object.position.clone();
+  const dir = startPos.clone().sub(target).normalize();
+  const endPos = target.clone().add(dir.multiplyScalar(250));
+
+  let t = 0;
+  function animate() {
+    t += 0.03;
+    if (t > 1) t = 1;
+    const ease = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+    controls.target.lerpVectors(startTarget, target, ease);
+    controls.object.position.lerpVectors(startPos, endPos, ease);
+    controls.update();
+    if (t < 1) requestAnimationFrame(animate);
+  }
+  requestAnimationFrame(animate);
+}
+
+export function useSearch() {
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const search = useCallback((query: string) => {
+    const { setSearchQuery, setHighlightedNodes } = useGraphStore.getState();
+    setSearchQuery(query);
+
+    if (!query.trim()) {
+      setHighlightedNodes([]);
+      return;
+    }
+
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(async () => {
+      try {
+        const res = await fetchSearch(query, 20);
+        const ids = (res.results ?? []).map((r: any) => r.documentId);
+        useGraphStore.getState().setHighlightedNodes(ids);
+        if (ids.length > 0) useGraphStore.getState().addSearchHistory(query);
+
+        // 첫 번째 결과로 카메라 이동
+        if (ids.length > 0) focusOnNode(ids[0]);
+      } catch {
+        useGraphStore.getState().setHighlightedNodes([]);
+      }
+    }, 300);
+  }, []);
+
+  const clearSearch = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    useGraphStore.getState().setSearchQuery('');
+    useGraphStore.getState().setHighlightedNodes([]);
+    (window as any).__sv_resetCamera?.();
+  }, []);
+
+  return { search, clearSearch };
+}

package/packages/graph/src/lib/constellation.ts

@@ -0,0 +1,107 @@
+// Design Ref: §3.1 — MST 별자리 생성
+// Prim's MST: 클러스터 내 노드를 최소 거리로 연결 → 자연스러운 별자리 형태
+
+interface Node {
+  id: string;
+  clusterId: number;
+  position?: [number, number, number];
+}
+
+interface Cluster {
+  id: number;
+  label: string;
+  color: string;
+}
+
+export interface ConstellationLine {
+  from: [number, number, number];
+  to: [number, number, number];
+  clusterId: number;
+}
+
+export interface ConstellationLabel {
+  position: [number, number, number];
+  text: string;
+  color: string;
+  clusterId: number;
+}
+
+export interface ConstellationData {
+  lines: ConstellationLine[];
+  labels: ConstellationLabel[];
+}
+
+export function buildConstellations(nodes: Node[], clusters: Cluster[]): ConstellationData {
+  const lines: ConstellationLine[] = [];
+  const labels: ConstellationLabel[] = [];
+
+  for (const cluster of clusters) {
+    const clusterNodes = nodes.filter(n => n.clusterId === cluster.id && n.position);
+    if (clusterNodes.length < 2) {
+      // 단일 노드 클러스터도 라벨은 표시
+      if (clusterNodes.length === 1 && clusterNodes[0].position) {
+        labels.push({
+          position: clusterNodes[0].position!,
+          text: cluster.label,
+          color: cluster.color,
+          clusterId: cluster.id,
+        });
+      }
+      continue;
+    }
+
+    // Prim's MST
+    const positions = clusterNodes.map(n => n.position!);
+    const n = positions.length;
+    const inMST = new Array(n).fill(false);
+    const minEdge = new Array(n).fill(Infinity);
+    const parent = new Array(n).fill(-1);
+    minEdge[0] = 0;
+
+    for (let iter = 0; iter < n; iter++) {
+      // 최소 비용 노드 선택
+      let u = -1;
+      for (let i = 0; i < n; i++) {
+        if (!inMST[i] && (u === -1 || minEdge[i] < minEdge[u])) u = i;
+      }
+      if (u === -1) break;
+      inMST[u] = true;
+
+      // 엣지 추가
+      if (parent[u] !== -1) {
+        lines.push({
+          from: positions[parent[u]],
+          to: positions[u],
+          clusterId: cluster.id,
+        });
+      }
+
+      // 인접 노드 업데이트
+      for (let v = 0; v < n; v++) {
+        if (inMST[v]) continue;
+        const d = dist3D(positions[u], positions[v]);
+        if (d < minEdge[v]) {
+          minEdge[v] = d;
+          parent[v] = u;
+        }
+      }
+    }
+
+    // 클러스터 중심에 라벨
+    const cx = positions.reduce((s, p) => s + p[0], 0) / n;
+    const cy = positions.reduce((s, p) => s + p[1], 0) / n + 20; // 약간 위
+    const cz = positions.reduce((s, p) => s + p[2], 0) / n;
+    labels.push({
+      position: [cx, cy, cz],
+      text: cluster.label,
+      color: cluster.color,
+      clusterId: cluster.id,
+    });
+  }
+
+  return { lines, labels };
+}
+
+function dist3D(a: [number, number, number], b: [number, number, number]): number {
+  return Math.sqrt((a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2 + (a[2] - b[2]) ** 2);
+}

package/packages/graph/src/lib/export-utils.ts

@@ -0,0 +1,48 @@
+// Design Ref: §6 — PNG/WebM 변환 유틸리티 (순수 함수)
+
+export function generateFilename(type: 'screenshot' | 'recording', extension: string): string {
+  const now = new Date();
+  const ts = now.toISOString().replace(/[:.]/g, '-').slice(0, 19);
+  return `stellavault-${type}-${ts}.${extension}`;
+}
+
+export function downloadBlob(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+export function addWatermark(
+  canvas: HTMLCanvasElement,
+  text: string,
+): HTMLCanvasElement {
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return canvas;
+
+  ctx.save();
+  ctx.font = '14px monospace';
+  ctx.fillStyle = 'rgba(200, 200, 255, 0.4)';
+  ctx.textAlign = 'right';
+  ctx.textBaseline = 'bottom';
+  ctx.fillText(text, canvas.width - 16, canvas.height - 12);
+  ctx.restore();
+
+  return canvas;
+}
+
+export function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (blob) resolve(blob);
+      else reject(new Error('Failed to create blob from canvas'));
+    }, 'image/png');
+  });
+}
+
+export function isMediaRecorderSupported(): boolean {
+  return typeof MediaRecorder !== 'undefined' &&
+    MediaRecorder.isTypeSupported('video/webm');
+}

package/packages/graph/src/lib/gesture-detector.ts

@@ -0,0 +1,123 @@
+// Design Ref: §2.1 — 21 landmarks → 6 제스처 분류
+// 3프레임 안정화 + confidence threshold
+
+export type GestureType = 'rotate' | 'pan' | 'zoom' | 'select' | 'reset' | 'none';
+
+export interface GestureResult {
+  type: GestureType;
+  confidence: number;
+  position: { x: number; y: number };
+  delta: { x: number; y: number };
+  pinchDistance: number;
+}
+
+interface Landmark { x: number; y: number; z: number; }
+
+// 손가락 끝 인덱스
+const TIPS = [4, 8, 12, 16, 20]; // 엄지, 검지, 중지, 약지, 소지
+const PIPS = [3, 6, 10, 14, 18]; // 각 손가락 두 번째 관절
+
+// 이전 상태 (안정화용)
+let prevPosition = { x: 0.5, y: 0.5 };
+let gestureHistory: GestureType[] = [];
+let positionHistory: Array<{ x: number; y: number }> = [];
+
+export function detectGesture(landmarks: Landmark[]): GestureResult {
+  if (!landmarks || landmarks.length < 21) {
+    return { type: 'none', confidence: 0, position: prevPosition, delta: { x: 0, y: 0 }, pinchDistance: 1 };
+  }
+
+  // 손바닥 중심
+  const palm = landmarks[9]; // 중지 MCP
+  const position = { x: palm.x, y: palm.y };
+  const delta = { x: position.x - prevPosition.x, y: position.y - prevPosition.y };
+
+  // 핀치 거리 (엄지-검지)
+  const pinchDistance = dist2D(landmarks[4], landmarks[8]);
+
+  // 펼쳐진 손가락 수
+  const extended = countExtended(landmarks);
+
+  // 제스처 판별
+  let type: GestureType = 'none';
+  let confidence = 0.8;
+
+  if (pinchDistance < 0.06) {
+    type = 'zoom';
+    confidence = 0.9;
+  } else if (extended >= 4) {
+    type = 'rotate';
+    confidence = 0.85;
+  } else if (extended === 0) {
+    type = 'pan';
+    confidence = 0.85;
+  } else if (extended === 1 && isFingerExtended(landmarks, 1)) {
+    type = 'select';
+    confidence = 0.9;
+  }
+
+  // 흔들기 감지 (최근 10프레임 x 방향 전환 3회 이상)
+  positionHistory.push({ ...position });
+  if (positionHistory.length > 10) positionHistory.shift();
+  if (isWaving(positionHistory)) {
+    type = 'reset';
+    confidence = 0.85;
+  }
+
+  // confidence < 0.7 무시 (Design §2.4)
+  if (confidence < 0.7) {
+    type = 'none';
+    confidence = 0;
+  }
+
+  // 3프레임 안정화
+  gestureHistory.push(type);
+  if (gestureHistory.length > 3) gestureHistory.shift();
+  const stable = gestureHistory.length === 3 && gestureHistory.every(g => g === type);
+
+  prevPosition = position;
+
+  return {
+    type: stable ? type : 'none',
+    confidence: stable ? confidence : 0,
+    position,
+    delta,
+    pinchDistance,
+  };
+}
+
+export function resetGestureState() {
+  prevPosition = { x: 0.5, y: 0.5 };
+  gestureHistory = [];
+  positionHistory = [];
+}
+
+function countExtended(lm: Landmark[]): number {
+  let count = 0;
+  // 엄지: 팁이 IP보다 x 방향으로 멀면 펼침
+  if (Math.abs(lm[4].x - lm[2].x) > 0.04) count++;
+  // 나머지 4개: 팁이 PIP보다 y가 작으면 (위쪽) 펼침
+  for (let i = 1; i < 5; i++) {
+    if (lm[TIPS[i]].y < lm[PIPS[i]].y - 0.02) count++;
+  }
+  return count;
+}
+
+function isFingerExtended(lm: Landmark[], fingerIdx: number): boolean {
+  return lm[TIPS[fingerIdx]].y < lm[PIPS[fingerIdx]].y - 0.02;
+}
+
+function dist2D(a: Landmark, b: Landmark): number {
+  return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);
+}
+
+function isWaving(history: Array<{ x: number; y: number }>): boolean {
+  if (history.length < 8) return false;
+  let dirChanges = 0;
+  for (let i = 2; i < history.length; i++) {
+    const prev = history[i - 1].x - history[i - 2].x;
+    const curr = history[i].x - history[i - 1].x;
+    if (prev * curr < 0 && Math.abs(curr) > 0.005) dirChanges++;
+  }
+  return dirChanges >= 3;
+}