blacktrigram 0.7.2

package/lib/components/shared/mobile/GestureRecognizerPure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GestureRecognizerPure.js","names":[],"sources":["../../../../src/components/shared/mobile/GestureRecognizerPure.tsx"],"sourcesContent":["/**\n * GestureRecognizerPure Component - Pure DOM version (no Three.js/drei dependency)\n *\n * Visual overlay for gesture detection feedback\n * Displays swipe trails and multi-touch indicators\n *\n * This is a pure DOM version that renders OUTSIDE the Three.js Canvas.\n * It does NOT use Html from @react-three/drei, making it compatible with\n * rendering outside Canvas contexts.\n *\n * @module components/mobile/GestureRecognizerPure\n * @category Mobile Controls\n * @korean 제스처 인식기 (순수 DOM)\n */\n\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { KOREAN_COLORS } from \"@/types/constants\";\nimport {\n  GestureEvent,\n  useTouchControls,\n} from \"../../../hooks/useTouchControls\";\nimport { getColorRGB } from \"../../../utils/colorHelpers\";\n\n/**\n * Props for GestureRecognizerPure component\n */\nexport interface GestureRecognizerPureProps {\n  /** Callback when gesture is detected */\n  readonly onGesture: (gesture: GestureEvent) => void;\n  /** Whether gesture recognition is enabled */\n  readonly enabled?: boolean;\n  /** Whether to show visual feedback */\n  readonly showFeedback?: boolean;\n  /** Minimum swipe distance in pixels (default: 50) */\n  readonly minSwipeDistance?: number;\n}\n\n/**\n * Visual feedback state for gestures\n */\ninterface GestureFeedback {\n  readonly id: number;\n  readonly type: string;\n  readonly timestamp: number;\n  readonly x: number;\n  readonly y: number;\n  readonly age?: number; // Cached age to avoid impure function calls during render\n}\n\n/**\n * GestureRecognizerPure Component\n *\n * Pure DOM gesture detection and visual feedback for mobile controls\n * Features:\n * - Swipe detection (4 directions)\n * - Two-finger tap detection\n * - Visual trail feedback\n * - Gesture type indicators\n * - Auto-fading feedback\n *\n * Gesture Mappings:\n * - Swipe Right: Advance toward opponent\n * - Swipe Left: Retreat from opponent\n * - Swipe Up: High attack mode\n * - Swipe Down: Low attack mode\n * - Two-Finger Tap: Vital point targeting mode\n *\n * @example\n * ```tsx\n * <GestureRecognizerPure\n *   onGesture={(gesture) => {\n *     console.log('Detected:', gesture.type);\n *     handleGesture(gesture);\n *   }}\n *   enabled={!isPaused}\n *   showFeedback={true}\n * />\n * ```\n *\n * @public\n * @korean 제스처인식기순수\n */\nexport const GestureRecognizerPure: React.FC<GestureRecognizerPureProps> = ({\n  onGesture,\n  enabled = true,\n  showFeedback = true,\n  minSwipeDistance = 50,\n}) => {\n  const [feedbacks, setFeedbacks] = useState<GestureFeedback[]>([]);\n  const [nextId, setNextId] = useState(0);\n\n  /**\n   * Handle detected gesture\n   */\n  const handleGesture = useCallback(\n    (gesture: GestureEvent) => {\n      // Pass gesture to parent\n      onGesture(gesture);\n\n      // Add visual feedback\n      if (\n        showFeedback &&\n        gesture.endX !== undefined &&\n        gesture.endY !== undefined\n      ) {\n        const feedback: GestureFeedback = {\n          id: nextId,\n          type: gesture.type,\n          timestamp: Date.now(),\n          x: gesture.endX,\n          y: gesture.endY,\n        };\n\n        setFeedbacks((prev) => [...prev, feedback]);\n        setNextId((prev) => prev + 1);\n      }\n    },\n    [onGesture, showFeedback, nextId],\n  );\n\n  /**\n   * Use touch controls hook for gesture detection\n   */\n  useTouchControls({\n    onGesture: handleGesture,\n    enabled,\n    minSwipeDistance,\n  });\n\n  /**\n   * Clean up old feedback indicators and update ages\n   */\n  useEffect(() => {\n    if (!showFeedback) return;\n\n    const interval = setInterval(() => {\n      const now = Date.now();\n      setFeedbacks((prev) =>\n        prev\n          .filter((fb) => now - fb.timestamp < 1000)\n          .map((fb) => ({ ...fb, age: now - fb.timestamp })),\n      );\n    }, 100);\n\n    return () => clearInterval(interval);\n  }, [showFeedback]);\n\n  if (!showFeedback) {\n    return null;\n  }\n\n  // Get RGB colors using shared utility\n  const primaryColor = getColorRGB(KOREAN_COLORS.PRIMARY_CYAN);\n  const goldColor = getColorRGB(KOREAN_COLORS.ACCENT_GOLD);\n\n  /**\n   * Get display info for gesture type\n   */\n  const getGestureDisplay = (\n    type: string,\n  ): { korean: string; english: string; icon: string } => {\n    const displays: Record<\n      string,\n      { korean: string; english: string; icon: string }\n    > = {\n      \"swipe-right\": { korean: \"전진\", english: \"Advance\", icon: \"→\" },\n      \"swipe-left\": { korean: \"후퇴\", english: \"Retreat\", icon: \"←\" },\n      \"swipe-up\": { korean: \"상단\", english: \"High\", icon: \"↑\" },\n      \"swipe-down\": { korean: \"하단\", english: \"Low\", icon: \"↓\" },\n      \"two-finger-tap\": { korean: \"급소\", english: \"Vital Point\", icon: \"🎯\" },\n      tap: { korean: \"터치\", english: \"Tap\", icon: \"👆\" },\n    };\n    return (\n      displays[type] ?? { korean: \"제스처\", english: \"Gesture\", icon: \"✋\" }\n    );\n  };\n\n  return (\n    <div\n      style={{\n        position: \"absolute\", // Changed from fixed to position relative to container\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        pointerEvents: \"none\",\n        zIndex: 1000,\n      }}\n      data-testid=\"gesture-recognizer-pure\"\n    >\n      {/* Gesture feedback indicators */}\n      {feedbacks.map((feedback) => {\n        const age = feedback.age ?? 0;\n        const opacity = Math.max(0, 1 - age / 1000);\n        const scale = 1 + age / 500;\n        const display = getGestureDisplay(feedback.type);\n\n        return (\n          <div\n            key={feedback.id}\n            style={{\n              position: \"absolute\",\n              left: `${feedback.x}px`,\n              top: `${feedback.y}px`,\n              transform: `translate(-50%, -50%) scale(${scale})`,\n              opacity,\n              transition: \"all 0.1s ease-out\",\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              gap: \"4px\",\n            }}\n            data-testid={`gesture-feedback-pure-${feedback.id}`}\n          >\n            {/* Icon */}\n            <div\n              style={{\n                fontSize: \"32px\",\n                color: `rgba(${goldColor.r}, ${goldColor.g}, ${goldColor.b}, ${opacity})`,\n                textShadow: `0 0 10px rgba(${goldColor.r}, ${goldColor.g}, ${goldColor.b}, ${opacity * 0.8})`,\n              }}\n            >\n              {display.icon}\n            </div>\n\n            {/* Label */}\n            <div\n              style={{\n                background: `rgba(0, 0, 0, ${opacity * 0.8})`,\n                border: `2px solid rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, ${opacity})`,\n                borderRadius: \"8px\",\n                padding: \"4px 8px\",\n                fontSize: \"12px\",\n                fontWeight: \"bold\",\n                color: `rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, ${opacity})`,\n                textAlign: \"center\",\n                whiteSpace: \"nowrap\",\n                textShadow: \"0 1px 3px rgba(0, 0, 0, 0.8)\",\n              }}\n            >\n              {display.korean} | {display.english}\n            </div>\n          </div>\n        );\n      })}\n\n      {/* Gesture instructions overlay (optional) */}\n      {enabled && (\n        <div\n          style={{\n            position: \"absolute\",\n            top: \"10px\",\n            right: \"10px\",\n            background: \"rgba(0, 0, 0, 0.7)\",\n            border: `2px solid rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, 0.6)`,\n            borderRadius: \"8px\",\n            padding: \"8px 12px\",\n            fontSize: \"10px\",\n            color: `rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, 0.9)`,\n            maxWidth: \"150px\",\n            opacity: 0.7,\n          }}\n          data-testid=\"gesture-instructions-pure\"\n        >\n          <div style={{ fontWeight: \"bold\", marginBottom: \"4px\" }}>\n            제스처 | Gestures\n          </div>\n          <div>← → 이동 | Move</div>\n          <div>↑ ↓ 공격 | Attack</div>\n          <div>🤞 급소 | Vital</div>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/lib/components/shared/mobile/HapticController.d.ts

@@ -0,0 +1,253 @@
+/**
+ * HapticController
+ *
+ * Optimized haptic feedback system with device capability detection
+ * Provides differentiated haptic patterns without causing frame drops
+ *
+ * Key Features:
+ * - Device capability detection (auto-disable on low-end devices)
+ * - Differentiated feedback intensities (light, medium, strong)
+ * - Frame-drop prevention (<2ms overhead)
+ * - Adaptive patterns based on device performance
+ * - Throttling to prevent excessive haptic triggers
+ *
+ * Browser Compatibility Note:
+ * navigator.vibrate() returns boolean in some browsers (Chrome, Edge) and void in others (Firefox).
+ * This implementation normalizes return values to boolean for consistency.
+ *
+ * @module components/mobile/HapticController
+ * @category Mobile Controls
+ * @korean 햅틱 컨트롤러
+ */
+/**
+ * Haptic intensity levels
+ */
+export type HapticIntensity = 'light' | 'medium' | 'strong' | 'disabled';
+/**
+ * Device performance tier
+ */
+export type DevicePerformanceTier = 'high' | 'medium' | 'low';
+/**
+ * HapticController class
+ * Manages haptic feedback with device-aware optimization
+ *
+ * @public
+ * @korean 햅틱컨트롤러
+ */
+export declare class HapticController {
+    private static instance;
+    private isSupported;
+    private isEnabled;
+    private performanceTier;
+    /**
+     * Last trigger timestamp for throttling.
+     * Initialized to -Infinity to ensure the first trigger always succeeds.
+     * Using -Infinity instead of 0 prevents throttling when performance.now() returns 0,
+     * which can occur in test environments or immediately after page load.
+     */
+    private lastTriggerTime;
+    private minTriggerInterval;
+    /**
+     * Private constructor for singleton pattern
+     */
+    private constructor();
+    /**
+     * Get singleton instance
+     *
+     * @returns HapticController instance
+     * @korean 인스턴스가져오기
+     */
+    static getInstance(): HapticController;
+    /**
+     * Detect if haptic feedback is supported
+     *
+     * @returns True if Vibration API is available
+     * @korean 햅틱지원감지
+     */
+    private detectHapticSupport;
+    /**
+     * Detect device performance tier
+     * Uses multiple heuristics to determine device capability
+     *
+     * @returns Performance tier (high, medium, low)
+     * @korean 성능등급감지
+     */
+    private detectPerformanceTier;
+    /**
+     * Trigger haptic feedback with optimized patterns
+     *
+     * @param intensity - Haptic intensity level
+     * @returns True if haptic was triggered
+     * @korean 햅틱실행
+     *
+     * @example
+     * ```typescript
+     * const haptic = HapticController.getInstance();
+     *
+     * // Light haptic for button tap
+     * haptic.trigger('light');
+     *
+     * // Strong haptic for critical hit
+     * haptic.trigger('strong');
+     * ```
+     *
+     * @public
+     */
+    trigger(intensity: HapticIntensity): boolean;
+    /**
+     * Trigger custom haptic pattern
+     *
+     * @param pattern - Custom vibration pattern
+     * @returns True if haptic was triggered
+     * @korean 커스텀햅틱실행
+     *
+     * @example
+     * ```typescript
+     * const haptic = HapticController.getInstance();
+     *
+     * // Custom combo pattern
+     * haptic.triggerCustom([30, 20, 30, 20, 50]);
+     * ```
+     *
+     * @public
+     */
+    triggerCustom(pattern: number | number[]): boolean;
+    /**
+     * Stop any ongoing haptic feedback
+     *
+     * @returns True if haptic was stopped
+     * @korean 햅틱중지
+     *
+     * @public
+     */
+    stop(): boolean;
+    /**
+     * Enable haptic feedback
+     *
+     * @korean 햅틱활성화
+     * @public
+     */
+    enable(): void;
+    /**
+     * Disable haptic feedback
+     *
+     * @korean 햅틱비활성화
+     * @public
+     */
+    disable(): void;
+    /**
+     * Check if haptic is currently enabled
+     *
+     * @returns True if haptic is enabled
+     * @korean 햅틱활성화상태
+     * @public
+     */
+    isHapticEnabled(): boolean;
+    /**
+     * Get current device performance tier
+     *
+     * @returns Performance tier
+     * @korean 성능등급가져오기
+     * @public
+     */
+    getPerformanceTier(): DevicePerformanceTier;
+    /**
+     * Set minimum interval between haptic triggers
+     *
+     * @param intervalMs - Minimum interval in milliseconds
+     * @korean 최소간격설정
+     * @public
+     */
+    setMinTriggerInterval(intervalMs: number): void;
+}
+/**
+ * Convenience function to trigger haptic feedback
+ * Uses singleton HapticController instance
+ *
+ * @param intensity - Haptic intensity level
+ * @returns True if haptic was triggered
+ * @korean 햅틱실행
+ *
+ * @example
+ * ```typescript
+ * // Light haptic for UI interaction
+ * triggerOptimizedHaptic('light');
+ *
+ * // Medium haptic for combat action
+ * triggerOptimizedHaptic('medium');
+ *
+ * // Strong haptic for critical hit
+ * triggerOptimizedHaptic('strong');
+ * ```
+ *
+ * @public
+ */
+export declare function triggerOptimizedHaptic(intensity: HapticIntensity): boolean;
+/**
+ * Convenience function to trigger custom haptic pattern
+ *
+ * @param pattern - Custom vibration pattern
+ * @returns True if haptic was triggered
+ * @korean 커스텀햅틱실행
+ *
+ * @public
+ */
+export declare function triggerCustomOptimizedHaptic(pattern: number | number[]): boolean;
+/**
+ * Convenience function to stop haptic feedback
+ *
+ * @returns True if haptic was stopped
+ * @korean 햅틱중지
+ * @public
+ */
+export declare function stopOptimizedHaptic(): boolean;
+/**
+ * Combat-specific optimized haptic patterns
+ * Pre-configured for common combat scenarios
+ *
+ * @korean 전투 햅틱 패턴
+ * @public
+ */
+export declare const OptimizedCombatHaptics: {
+    /**
+     * Standard attack hit feedback
+     * @korean 일반 공격
+     */
+    readonly attack: () => boolean;
+    /**
+     * Block successful feedback
+     * @korean 방어 성공
+     */
+    readonly block: () => boolean;
+    /**
+     * Critical hit feedback with double pulse
+     * @korean 크리티컬 히트
+     */
+    readonly criticalHit: () => boolean;
+    /**
+     * Vital point strike feedback
+     * @korean 급소 타격
+     */
+    readonly vitalPointStrike: () => boolean;
+    /**
+     * Stance change feedback
+     * @korean 자세 변경
+     */
+    readonly stanceChange: () => boolean;
+    /**
+     * Combo counter increment
+     * @korean 콤보 카운터
+     */
+    readonly comboIncrement: () => boolean;
+    /**
+     * Player KO feedback with extended pattern
+     * @korean 플레이어 KO
+     */
+    readonly knockout: () => boolean;
+    /**
+     * Error or invalid action feedback
+     * @korean 오류 피드백
+     */
+    readonly error: () => boolean;
+};
+//# sourceMappingURL=HapticController.d.ts.map

package/lib/components/shared/mobile/HapticController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HapticController.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/mobile/HapticController.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;AA4D9D;;;;;;GAMG;AACH,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAiC;IACxD,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,eAAe,CAAiC;IACxD;;;;;OAKG;IACH,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,kBAAkB,CAAc;IAExC;;OAEG;IACH,OAAO;IAUP;;;;;OAKG;WACW,WAAW,IAAI,gBAAgB;IAK7C;;;;;OAKG;IACH,OAAO,CAAC,mBAAmB;IAS3B;;;;;;OAMG;IACH,OAAO,CAAC,qBAAqB;IAkC7B;;;;;;;;;;;;;;;;;;;OAmBG;IACI,OAAO,CAAC,SAAS,EAAE,eAAe,GAAG,OAAO;IA8BnD;;;;;;;;;;;;;;;;OAgBG;IACI,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO;IAgCzD;;;;;;;OAOG;IACI,IAAI,IAAI,OAAO;IAetB;;;;;OAKG;IACI,MAAM,IAAI,IAAI;IAIrB;;;;;OAKG;IACI,OAAO,IAAI,IAAI;IAKtB;;;;;;OAMG;IACI,eAAe,IAAI,OAAO;IAIjC;;;;;;OAMG;IACI,kBAAkB,IAAI,qBAAqB;IAIlD;;;;;;OAMG;IACI,qBAAqB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;CAGvD;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,eAAe,GAAG,OAAO,CAE1E;AAED;;;;;;;;GAQG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,CAEhF;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,IAAI,OAAO,CAE7C;AAED;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB;IACjC;;;OAGG;;IAGH;;;OAGG;;IAGH;;;OAGG;;IAGH;;;OAGG;;IAGH;;;OAGG;;IAGH;;;OAGG;;IAGH;;;OAGG;;IAGH;;;OAGG;;CAEK,CAAC"}

package/lib/components/shared/mobile/HapticController.js

@@ -0,0 +1,280 @@
+//#region src/components/shared/mobile/HapticController.ts
+/**
+* Optimized haptic patterns for different intensities
+* Designed to provide clear feedback without frame drops
+* 
+* @korean 햅틱 패턴
+*/
+var HAPTIC_PATTERNS = {
+	light: {
+		vibration: [20],
+		maxFrameTime: .5
+	},
+	medium: {
+		vibration: [40],
+		maxFrameTime: 1
+	},
+	strong: {
+		vibration: [60],
+		maxFrameTime: 2
+	},
+	disabled: {
+		vibration: [],
+		maxFrameTime: 0
+	}
+};
+/**
+* Adaptive haptic patterns for low-end devices
+* Reduced intensities to prevent frame drops
+* 
+* @korean 적응형 햅틱 패턴
+*/
+var ADAPTIVE_HAPTIC_PATTERNS = {
+	light: {
+		vibration: [10],
+		maxFrameTime: .2
+	},
+	medium: {
+		vibration: [20],
+		maxFrameTime: .5
+	},
+	strong: {
+		vibration: [30],
+		maxFrameTime: 1
+	},
+	disabled: {
+		vibration: [],
+		maxFrameTime: 0
+	}
+};
+/**
+* HapticController class
+* Manages haptic feedback with device-aware optimization
+* 
+* @public
+* @korean 햅틱컨트롤러
+*/
+var HapticController = class HapticController {
+	static instance = null;
+	isSupported = false;
+	isEnabled = true;
+	performanceTier = "high";
+	/**
+	* Last trigger timestamp for throttling.
+	* Initialized to -Infinity to ensure the first trigger always succeeds.
+	* Using -Infinity instead of 0 prevents throttling when performance.now() returns 0,
+	* which can occur in test environments or immediately after page load.
+	*/
+	lastTriggerTime = -Infinity;
+	minTriggerInterval = 50;
+	/**
+	* Private constructor for singleton pattern
+	*/
+	constructor() {
+		this.isSupported = this.detectHapticSupport();
+		this.performanceTier = this.detectPerformanceTier();
+		if (this.performanceTier === "low") this.isEnabled = false;
+	}
+	/**
+	* Get singleton instance
+	* 
+	* @returns HapticController instance
+	* @korean 인스턴스가져오기
+	*/
+	static getInstance() {
+		this.instance ??= new HapticController();
+		return this.instance;
+	}
+	/**
+	* Detect if haptic feedback is supported
+	* 
+	* @returns True if Vibration API is available
+	* @korean 햅틱지원감지
+	*/
+	detectHapticSupport() {
+		if (typeof navigator === "undefined") return false;
+		return "vibrate" in navigator;
+	}
+	/**
+	* Detect device performance tier
+	* Uses multiple heuristics to determine device capability
+	* 
+	* @returns Performance tier (high, medium, low)
+	* @korean 성능등급감지
+	*/
+	detectPerformanceTier() {
+		if (typeof navigator === "undefined") return "medium";
+		const cores = navigator.hardwareConcurrency ?? 4;
+		const memory = navigator.deviceMemory ?? 4;
+		const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+		let score = 0;
+		if (cores >= 8) score += 2;
+		else if (cores >= 4) score += 1;
+		if (memory >= 8) score += 2;
+		else if (memory >= 4) score += 1;
+		if (!isMobile) score += 1;
+		if (score >= 4) return "high";
+		if (score >= 2) return "medium";
+		return "low";
+	}
+	/**
+	* Trigger haptic feedback with optimized patterns
+	* 
+	* @param intensity - Haptic intensity level
+	* @returns True if haptic was triggered
+	* @korean 햅틱실행
+	* 
+	* @example
+	* ```typescript
+	* const haptic = HapticController.getInstance();
+	* 
+	* // Light haptic for button tap
+	* haptic.trigger('light');
+	* 
+	* // Strong haptic for critical hit
+	* haptic.trigger('strong');
+	* ```
+	* 
+	* @public
+	*/
+	trigger(intensity) {
+		if (!this.isSupported || !this.isEnabled || intensity === "disabled") return false;
+		const now = performance.now();
+		if (now - this.lastTriggerTime < this.minTriggerInterval) return false;
+		this.lastTriggerTime = now;
+		const pattern = (this.performanceTier === "low" ? ADAPTIVE_HAPTIC_PATTERNS : HAPTIC_PATTERNS)[intensity];
+		try {
+			return navigator.vibrate(pattern.vibration) !== false;
+		} catch (error) {
+			console.warn("Haptic feedback failed:", error);
+			return false;
+		}
+	}
+	/**
+	* Trigger custom haptic pattern
+	* 
+	* @param pattern - Custom vibration pattern
+	* @returns True if haptic was triggered
+	* @korean 커스텀햅틱실행
+	* 
+	* @example
+	* ```typescript
+	* const haptic = HapticController.getInstance();
+	* 
+	* // Custom combo pattern
+	* haptic.triggerCustom([30, 20, 30, 20, 50]);
+	* ```
+	* 
+	* @public
+	*/
+	triggerCustom(pattern) {
+		if (!this.isSupported || !this.isEnabled) return false;
+		const now = performance.now();
+		if (now - this.lastTriggerTime < this.minTriggerInterval) return false;
+		this.lastTriggerTime = now;
+		try {
+			let adaptedPattern = pattern;
+			if (this.performanceTier === "low") if (Array.isArray(pattern)) adaptedPattern = pattern.map((duration) => Math.floor(duration * .5));
+			else adaptedPattern = Math.floor(pattern * .5);
+			return navigator.vibrate(adaptedPattern) !== false;
+		} catch (error) {
+			console.warn("Custom haptic feedback failed:", error);
+			return false;
+		}
+	}
+	/**
+	* Stop any ongoing haptic feedback
+	* 
+	* @returns True if haptic was stopped
+	* @korean 햅틱중지
+	* 
+	* @public
+	*/
+	stop() {
+		if (!this.isSupported) return false;
+		try {
+			return navigator.vibrate(0) !== false;
+		} catch (error) {
+			console.warn("Failed to stop haptic feedback:", error);
+			return false;
+		}
+	}
+	/**
+	* Enable haptic feedback
+	* 
+	* @korean 햅틱활성화
+	* @public
+	*/
+	enable() {
+		this.isEnabled = true;
+	}
+	/**
+	* Disable haptic feedback
+	* 
+	* @korean 햅틱비활성화
+	* @public
+	*/
+	disable() {
+		this.isEnabled = false;
+		this.stop();
+	}
+	/**
+	* Check if haptic is currently enabled
+	* 
+	* @returns True if haptic is enabled
+	* @korean 햅틱활성화상태
+	* @public
+	*/
+	isHapticEnabled() {
+		return this.isSupported && this.isEnabled;
+	}
+	/**
+	* Get current device performance tier
+	* 
+	* @returns Performance tier
+	* @korean 성능등급가져오기
+	* @public
+	*/
+	getPerformanceTier() {
+		return this.performanceTier;
+	}
+	/**
+	* Set minimum interval between haptic triggers
+	* 
+	* @param intervalMs - Minimum interval in milliseconds
+	* @korean 최소간격설정
+	* @public
+	*/
+	setMinTriggerInterval(intervalMs) {
+		this.minTriggerInterval = Math.max(0, intervalMs);
+	}
+};
+/**
+* Convenience function to trigger haptic feedback
+* Uses singleton HapticController instance
+* 
+* @param intensity - Haptic intensity level
+* @returns True if haptic was triggered
+* @korean 햅틱실행
+* 
+* @example
+* ```typescript
+* // Light haptic for UI interaction
+* triggerOptimizedHaptic('light');
+* 
+* // Medium haptic for combat action
+* triggerOptimizedHaptic('medium');
+* 
+* // Strong haptic for critical hit
+* triggerOptimizedHaptic('strong');
+* ```
+* 
+* @public
+*/
+function triggerOptimizedHaptic(intensity) {
+	return HapticController.getInstance().trigger(intensity);
+}
+//#endregion
+export { HapticController, triggerOptimizedHaptic };
+
+//# sourceMappingURL=HapticController.js.map

package/lib/components/shared/mobile/HapticController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HapticController.js","names":[],"sources":["../../../../src/components/shared/mobile/HapticController.ts"],"sourcesContent":["/**\n * HapticController\n * \n * Optimized haptic feedback system with device capability detection\n * Provides differentiated haptic patterns without causing frame drops\n * \n * Key Features:\n * - Device capability detection (auto-disable on low-end devices)\n * - Differentiated feedback intensities (light, medium, strong)\n * - Frame-drop prevention (<2ms overhead)\n * - Adaptive patterns based on device performance\n * - Throttling to prevent excessive haptic triggers\n * \n * Browser Compatibility Note:\n * navigator.vibrate() returns boolean in some browsers (Chrome, Edge) and void in others (Firefox).\n * This implementation normalizes return values to boolean for consistency.\n * \n * @module components/mobile/HapticController\n * @category Mobile Controls\n * @korean 햅틱 컨트롤러\n */\n\n/**\n * Haptic intensity levels\n */\nexport type HapticIntensity = 'light' | 'medium' | 'strong' | 'disabled';\n\n/**\n * Device performance tier\n */\nexport type DevicePerformanceTier = 'high' | 'medium' | 'low';\n\n/**\n * Haptic pattern configuration\n */\ninterface HapticPattern {\n  readonly vibration: number | number[];\n  readonly maxFrameTime: number; // Maximum frame time impact in ms\n}\n\n/**\n * Optimized haptic patterns for different intensities\n * Designed to provide clear feedback without frame drops\n * \n * @korean 햅틱 패턴\n */\nconst HAPTIC_PATTERNS: Record<HapticIntensity, HapticPattern> = {\n  light: {\n    vibration: [20], // Short, crisp tap\n    maxFrameTime: 0.5, // Minimal impact\n  },\n  medium: {\n    vibration: [40], // Medium pulse\n    maxFrameTime: 1.0, // Small impact\n  },\n  strong: {\n    vibration: [60], // Strong pulse\n    maxFrameTime: 2.0, // Noticeable impact\n  },\n  disabled: {\n    vibration: [],\n    maxFrameTime: 0,\n  },\n} as const;\n\n/**\n * Adaptive haptic patterns for low-end devices\n * Reduced intensities to prevent frame drops\n * \n * @korean 적응형 햅틱 패턴\n */\nconst ADAPTIVE_HAPTIC_PATTERNS: Record<HapticIntensity, HapticPattern> = {\n  light: {\n    vibration: [10], // Minimal vibration\n    maxFrameTime: 0.2,\n  },\n  medium: {\n    vibration: [20], // Reduced medium\n    maxFrameTime: 0.5,\n  },\n  strong: {\n    vibration: [30], // Reduced strong\n    maxFrameTime: 1.0,\n  },\n  disabled: {\n    vibration: [],\n    maxFrameTime: 0,\n  },\n} as const;\n\n/**\n * HapticController class\n * Manages haptic feedback with device-aware optimization\n * \n * @public\n * @korean 햅틱컨트롤러\n */\nexport class HapticController {\n  private static instance: HapticController | null = null;\n  private isSupported: boolean = false;\n  private isEnabled: boolean = true;\n  private performanceTier: DevicePerformanceTier = 'high';\n  /**\n   * Last trigger timestamp for throttling.\n   * Initialized to -Infinity to ensure the first trigger always succeeds.\n   * Using -Infinity instead of 0 prevents throttling when performance.now() returns 0,\n   * which can occur in test environments or immediately after page load.\n   */\n  private lastTriggerTime: number = -Infinity;\n  private minTriggerInterval: number = 50; // Minimum 50ms between haptics\n\n  /**\n   * Private constructor for singleton pattern\n   */\n  private constructor() {\n    this.isSupported = this.detectHapticSupport();\n    this.performanceTier = this.detectPerformanceTier();\n    \n    // Disable haptics on low-end devices by default\n    if (this.performanceTier === 'low') {\n      this.isEnabled = false;\n    }\n  }\n\n  /**\n   * Get singleton instance\n   * \n   * @returns HapticController instance\n   * @korean 인스턴스가져오기\n   */\n  public static getInstance(): HapticController {\n    this.instance ??= new HapticController();\n    return this.instance;\n  }\n\n  /**\n   * Detect if haptic feedback is supported\n   * \n   * @returns True if Vibration API is available\n   * @korean 햅틱지원감지\n   */\n  private detectHapticSupport(): boolean {\n    if (typeof navigator === 'undefined') {\n      return false;\n    }\n\n    // Check for Vibration API\n    return 'vibrate' in navigator;\n  }\n\n  /**\n   * Detect device performance tier\n   * Uses multiple heuristics to determine device capability\n   * \n   * @returns Performance tier (high, medium, low)\n   * @korean 성능등급감지\n   */\n  private detectPerformanceTier(): DevicePerformanceTier {\n    if (typeof navigator === 'undefined') {\n      return 'medium';\n    }\n\n    // Check navigator.hardwareConcurrency (CPU cores)\n    const cores = navigator.hardwareConcurrency ?? 4;\n    \n    // Check device memory (if available)\n    const memory = (navigator as Navigator & { deviceMemory?: number }).deviceMemory ?? 4;\n    \n    // Check if running on mobile\n    const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);\n    \n    // Heuristic scoring\n    let score = 0;\n    \n    // More cores = better performance\n    if (cores >= 8) score += 2;\n    else if (cores >= 4) score += 1;\n    \n    // More memory = better performance\n    if (memory >= 8) score += 2;\n    else if (memory >= 4) score += 1;\n    \n    // Desktop generally performs better\n    if (!isMobile) score += 1;\n    \n    // Determine tier\n    if (score >= 4) return 'high';\n    if (score >= 2) return 'medium';\n    return 'low';\n  }\n\n  /**\n   * Trigger haptic feedback with optimized patterns\n   * \n   * @param intensity - Haptic intensity level\n   * @returns True if haptic was triggered\n   * @korean 햅틱실행\n   * \n   * @example\n   * ```typescript\n   * const haptic = HapticController.getInstance();\n   * \n   * // Light haptic for button tap\n   * haptic.trigger('light');\n   * \n   * // Strong haptic for critical hit\n   * haptic.trigger('strong');\n   * ```\n   * \n   * @public\n   */\n  public trigger(intensity: HapticIntensity): boolean {\n    // Check if haptics are supported and enabled\n    if (!this.isSupported || !this.isEnabled || intensity === 'disabled') {\n      return false;\n    }\n\n    // Throttle haptic triggers to prevent excessive vibration\n    const now = performance.now();\n    if (now - this.lastTriggerTime < this.minTriggerInterval) {\n      return false;\n    }\n    this.lastTriggerTime = now;\n\n    // Select pattern based on device performance\n    const patterns = this.performanceTier === 'low' \n      ? ADAPTIVE_HAPTIC_PATTERNS \n      : HAPTIC_PATTERNS;\n    \n    const pattern = patterns[intensity];\n\n    try {\n      // Trigger vibration (see class-level comment for browser compatibility notes)\n      const result = navigator.vibrate(pattern.vibration);\n      return result !== false; // Return true if not explicitly false\n    } catch (error) {\n      console.warn('Haptic feedback failed:', error);\n      return false;\n    }\n  }\n\n  /**\n   * Trigger custom haptic pattern\n   * \n   * @param pattern - Custom vibration pattern\n   * @returns True if haptic was triggered\n   * @korean 커스텀햅틱실행\n   * \n   * @example\n   * ```typescript\n   * const haptic = HapticController.getInstance();\n   * \n   * // Custom combo pattern\n   * haptic.triggerCustom([30, 20, 30, 20, 50]);\n   * ```\n   * \n   * @public\n   */\n  public triggerCustom(pattern: number | number[]): boolean {\n    if (!this.isSupported || !this.isEnabled) {\n      return false;\n    }\n\n    // Throttle haptic triggers\n    const now = performance.now();\n    if (now - this.lastTriggerTime < this.minTriggerInterval) {\n      return false;\n    }\n    this.lastTriggerTime = now;\n\n    try {\n      // Adapt pattern for low-end devices (reduce durations by 50%)\n      let adaptedPattern = pattern;\n      if (this.performanceTier === 'low') {\n        if (Array.isArray(pattern)) {\n          adaptedPattern = pattern.map(duration => Math.floor(duration * 0.5));\n        } else {\n          adaptedPattern = Math.floor(pattern * 0.5);\n        }\n      }\n\n      // Trigger vibration (see class-level comment for browser compatibility notes)\n      const result = navigator.vibrate(adaptedPattern);\n      return result !== false; // Return true if not explicitly false\n    } catch (error) {\n      console.warn('Custom haptic feedback failed:', error);\n      return false;\n    }\n  }\n\n  /**\n   * Stop any ongoing haptic feedback\n   * \n   * @returns True if haptic was stopped\n   * @korean 햅틱중지\n   * \n   * @public\n   */\n  public stop(): boolean {\n    if (!this.isSupported) {\n      return false;\n    }\n\n    try {\n      // Stop vibration (see class-level comment for browser compatibility notes)\n      const result = navigator.vibrate(0);\n      return result !== false; // Return true if not explicitly false\n    } catch (error) {\n      console.warn('Failed to stop haptic feedback:', error);\n      return false;\n    }\n  }\n\n  /**\n   * Enable haptic feedback\n   * \n   * @korean 햅틱활성화\n   * @public\n   */\n  public enable(): void {\n    this.isEnabled = true;\n  }\n\n  /**\n   * Disable haptic feedback\n   * \n   * @korean 햅틱비활성화\n   * @public\n   */\n  public disable(): void {\n    this.isEnabled = false;\n    this.stop();\n  }\n\n  /**\n   * Check if haptic is currently enabled\n   * \n   * @returns True if haptic is enabled\n   * @korean 햅틱활성화상태\n   * @public\n   */\n  public isHapticEnabled(): boolean {\n    return this.isSupported && this.isEnabled;\n  }\n\n  /**\n   * Get current device performance tier\n   * \n   * @returns Performance tier\n   * @korean 성능등급가져오기\n   * @public\n   */\n  public getPerformanceTier(): DevicePerformanceTier {\n    return this.performanceTier;\n  }\n\n  /**\n   * Set minimum interval between haptic triggers\n   * \n   * @param intervalMs - Minimum interval in milliseconds\n   * @korean 최소간격설정\n   * @public\n   */\n  public setMinTriggerInterval(intervalMs: number): void {\n    this.minTriggerInterval = Math.max(0, intervalMs);\n  }\n}\n\n/**\n * Convenience function to trigger haptic feedback\n * Uses singleton HapticController instance\n * \n * @param intensity - Haptic intensity level\n * @returns True if haptic was triggered\n * @korean 햅틱실행\n * \n * @example\n * ```typescript\n * // Light haptic for UI interaction\n * triggerOptimizedHaptic('light');\n * \n * // Medium haptic for combat action\n * triggerOptimizedHaptic('medium');\n * \n * // Strong haptic for critical hit\n * triggerOptimizedHaptic('strong');\n * ```\n * \n * @public\n */\nexport function triggerOptimizedHaptic(intensity: HapticIntensity): boolean {\n  return HapticController.getInstance().trigger(intensity);\n}\n\n/**\n * Convenience function to trigger custom haptic pattern\n * \n * @param pattern - Custom vibration pattern\n * @returns True if haptic was triggered\n * @korean 커스텀햅틱실행\n * \n * @public\n */\nexport function triggerCustomOptimizedHaptic(pattern: number | number[]): boolean {\n  return HapticController.getInstance().triggerCustom(pattern);\n}\n\n/**\n * Convenience function to stop haptic feedback\n * \n * @returns True if haptic was stopped\n * @korean 햅틱중지\n * @public\n */\nexport function stopOptimizedHaptic(): boolean {\n  return HapticController.getInstance().stop();\n}\n\n/**\n * Combat-specific optimized haptic patterns\n * Pre-configured for common combat scenarios\n * \n * @korean 전투 햅틱 패턴\n * @public\n */\nexport const OptimizedCombatHaptics = {\n  /**\n   * Standard attack hit feedback\n   * @korean 일반 공격\n   */\n  attack: () => triggerOptimizedHaptic('medium'),\n\n  /**\n   * Block successful feedback\n   * @korean 방어 성공\n   */\n  block: () => triggerOptimizedHaptic('light'),\n\n  /**\n   * Critical hit feedback with double pulse\n   * @korean 크리티컬 히트\n   */\n  criticalHit: () => triggerCustomOptimizedHaptic([40, 20, 60]),\n\n  /**\n   * Vital point strike feedback\n   * @korean 급소 타격\n   */\n  vitalPointStrike: () => triggerOptimizedHaptic('strong'),\n\n  /**\n   * Stance change feedback\n   * @korean 자세 변경\n   */\n  stanceChange: () => triggerOptimizedHaptic('light'),\n\n  /**\n   * Combo counter increment\n   * @korean 콤보 카운터\n   */\n  comboIncrement: () => triggerOptimizedHaptic('light'),\n\n  /**\n   * Player KO feedback with extended pattern\n   * @korean 플레이어 KO\n   */\n  knockout: () => triggerCustomOptimizedHaptic([60, 30, 60, 30, 100]),\n\n  /**\n   * Error or invalid action feedback\n   * @korean 오류 피드백\n   */\n  error: () => triggerCustomOptimizedHaptic([15, 10, 15]),\n} as const;\n"],"mappings":"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"}

package/lib/components/shared/mobile/MobileControlsPure.d.ts

@@ -0,0 +1,43 @@
+/**
+ * MobileControlsPure - Pure DOM mobile controls (no Three.js/drei dependency)
+ *
+ * These controls render OUTSIDE the Three.js Canvas for reliable touch event handling.
+ * The key difference from VirtualDPad/ActionButtons is that these don't use drei's Html
+ * component, which can intercept touch events on mobile devices.
+ *
+ * Visual style matches the existing Korean cyberpunk aesthetic.
+ *
+ * @module components/mobile/MobileControlsPure
+ * @category Mobile Controls
+ * @korean 순수 DOM 모바일 컨트롤
+ */
+import React from "react";
+export type Direction = "up" | "up-right" | "right" | "down-right" | "down" | "down-left" | "left" | "up-left";
+export type DPadEventType = "start" | "end";
+export type ButtonEventType = "start" | "end";
+/**
+ * Props for the combined mobile controls overlay
+ */
+export interface MobileControlsOverlayProps {
+    /** Callback when D-Pad direction changes */
+    readonly onMove: (direction: Direction | null, eventType: DPadEventType) => void;
+    /** Callback when attack is pressed */
+    readonly onAttack: () => void;
+    /** Callback when block is pressed/released */
+    readonly onBlock: (eventType: ButtonEventType) => void;
+    /** Whether controls are disabled */
+    readonly disabled?: boolean;
+    /** Bottom offset in pixels (default: 160 to clear BottomHUD) */
+    readonly bottom?: number;
+    /** Opacity (default: 0.85) */
+    readonly opacity?: number;
+}
+/**
+ * MobileControlsOverlay - Floating mobile controls rendered outside Canvas
+ *
+ * Positions D-Pad on left, Action buttons on right, floating above BottomHUD.
+ * Uses pure DOM events for reliable mobile touch handling.
+ */
+export declare const MobileControlsOverlay: React.FC<MobileControlsOverlayProps>;
+export default MobileControlsOverlay;
+//# sourceMappingURL=MobileControlsPure.d.ts.map

package/lib/components/shared/mobile/MobileControlsPure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileControlsPure.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/mobile/MobileControlsPure.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAM9D,MAAM,MAAM,SAAS,GACjB,IAAI,GACJ,UAAU,GACV,OAAO,GACP,YAAY,GACZ,MAAM,GACN,WAAW,GACX,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,KAAK,CAAC;AAC5C,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,KAAK,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,4CAA4C;IAC5C,QAAQ,CAAC,MAAM,EAAE,CACf,SAAS,EAAE,SAAS,GAAG,IAAI,EAC3B,SAAS,EAAE,aAAa,KACrB,IAAI,CAAC;IACV,sCAAsC;IACtC,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;IAC9B,8CAA8C;IAC9C,QAAQ,CAAC,OAAO,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACvD,oCAAoC;IACpC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,gEAAgE;IAChE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,8BAA8B;IAC9B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC3B;AAuBD;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA+SpE,CAAC;AAIJ,eAAe,qBAAqB,CAAC"}