@hua-labs/motion-core 2.1.0-alpha.6 → 2.1.0-alpha.8

package/dist/index.js

@@ -1,66 +1,4242 @@
-"use client";
-// ========================================
-// HUA Motion Core - 메인 export 파일
-// ========================================
-// ========================================
-// 핵심 모션 엔진 (의존성 제로)
-// ========================================
-// MotionEngine - 순수 JavaScript 모션 엔진
-export { MotionEngine, motionEngine } from './core/MotionEngine';
-// TransitionEffects - 전환 효과 시스템
-export { TransitionEffects, transitionEffects } from './core/TransitionEffects';
-// PerformanceOptimizer - 성능 최적화
-export { PerformanceOptimizer, performanceOptimizer } from './core/PerformanceOptimizer';
-// ========================================
-// 3단계 추상화 (Core 패키지 핵심)
-// ========================================
-// 1단계: useSimplePageMotion (프리셋 기반)
-export { useSimplePageMotion } from './hooks/useSimplePageMotion';
-// 2단계: usePageMotions (페이지 레벨)
-export { usePageMotions } from './hooks/usePageMotions';
-// 3단계: useSmartMotion (개별 요소) - 기존 호환성 유지
-export { useSmartMotion } from './hooks/useSmartMotion';
-// 통합 Motion Hook (단일 타입으로 여러 hook 중 선택)
-export { useUnifiedMotion } from './hooks/useUnifiedMotion';
-// ========================================
-// 기본 모션 훅들 (Core 패키지 범위)
-// ========================================
-// 기본 모션 (fade, slide, scale, bounce, pulse)
-export { useFadeIn } from './hooks/useFadeIn';
-export { useSlideUp } from './hooks/useSlideUp';
-export { useSlideLeft } from './hooks/useSlideLeft';
-export { useSlideRight } from './hooks/useSlideRight';
-export { useScaleIn } from './hooks/useScaleIn';
-export { useBounceIn } from './hooks/useBounceIn';
-export { usePulse } from './hooks/usePulse';
-export { useSpringMotion } from './hooks/useSpringMotion';
-export { useGradient } from './hooks/useGradient';
-// 스태거 모션 (여러 아이템 순차 애니메이션)
-export { useStaggerMotion } from './hooks/useStaggerMotion';
-// 기본 인터랙션 (hover, click, focus)
-export { useHoverMotion } from './hooks/useHoverMotion';
-export { useClickToggle } from './hooks/useClickToggle';
-export { useFocusToggle } from './hooks/useFocusToggle';
-// 기본 스크롤 (reveal, progress)
-export { useScrollReveal } from './hooks/useScrollReveal';
-export { useScrollProgress } from './hooks/useScrollProgress';
-// 기본 유틸리티 (state, repeat, toggle)
-export { useMotionState } from './hooks/useMotionState';
-export { useRepeat } from './hooks/useRepeat';
-export { useToggleMotion } from './hooks/useToggleMotion';
-// ========================================
-// 기본 제스처 훅들 (Core 패키지 범위)
-// ========================================
-// 기본 제스처 (gesture, gestureMotion)
-export { useGesture } from './hooks/useGesture';
-export { useGestureMotion } from './hooks/useGestureMotion';
-// ========================================
-// 프리셋 시스템 (Core 패키지 범위)
-// ========================================
-export * from './presets';
-// ========================================
-// 기본 이징 함수들 (Core 패키지 범위)
-// ========================================
-export { linear, easeIn, easeOut, easeInOut, easeInQuad, easeOutQuad, easeInOutQuad } from './utils/easing';
-export { getEasing, applyEasing, safeApplyEasing, isValidEasing, getAvailableEasings, isEasingFunction, easingPresets, getPresetEasing } from './utils/easing';
+'use strict';
+
+var react = require('react');
+
+// src/core/MotionEngine.ts
+var MotionEngine = class {
+  constructor() {
+    this.motions = /* @__PURE__ */ new Map();
+    this.isRunning = false;
+    this.animationFrameId = null;
+  }
+  /**
+   * 모션 시작
+   */
+  motion(element, motionFrames, options) {
+    return new Promise((resolve) => {
+      const motionId = this.generateMotionId();
+      this.enableGPUAcceleration(element);
+      this.createLayer(element);
+      const motion = {
+        id: motionId,
+        element,
+        isRunning: true,
+        isPaused: false,
+        currentProgress: 0,
+        startTime: Date.now() + (options.delay || 0),
+        pauseTime: 0,
+        options: {
+          ...options,
+          onComplete: () => {
+            options.onComplete?.();
+            this.motions.delete(motionId);
+          }
+        }
+      };
+      this.motions.set(motionId, motion);
+      if (!this.isRunning) {
+        this.startAnimationLoop();
+      }
+      options.onStart?.();
+      resolve(motionId);
+    });
+  }
+  /**
+   * 모션 중지
+   */
+  stop(motionId) {
+    const motion = this.motions.get(motionId);
+    if (motion) {
+      motion.isRunning = false;
+      motion.options.onCancel?.();
+      this.motions.delete(motionId);
+    }
+  }
+  /**
+   * 모션 일시정지
+   */
+  pause(motionId) {
+    const motion = this.motions.get(motionId);
+    if (motion && motion.isRunning && !motion.isPaused) {
+      motion.isPaused = true;
+      motion.pauseTime = Date.now();
+    }
+  }
+  /**
+   * 모션 재개
+   */
+  resume(motionId) {
+    const motion = this.motions.get(motionId);
+    if (motion && motion.isPaused) {
+      motion.isPaused = false;
+      if (motion.pauseTime > 0) {
+        motion.startTime += Date.now() - motion.pauseTime;
+      }
+    }
+  }
+  /**
+   * 모든 모션 중지
+   */
+  stopAll() {
+    this.motions.forEach((motion) => {
+      motion.isRunning = false;
+      motion.options.onCancel?.();
+    });
+    this.motions.clear();
+    this.stopAnimationLoop();
+  }
+  /**
+   * 모션 상태 확인
+   */
+  getMotion(motionId) {
+    return this.motions.get(motionId);
+  }
+  /**
+   * 실행 중인 모션 수
+   */
+  getActiveMotionCount() {
+    return this.motions.size;
+  }
+  /**
+   * 애니메이션 루프 시작
+   */
+  startAnimationLoop() {
+    if (this.isRunning) return;
+    this.isRunning = true;
+    this.animate();
+  }
+  /**
+   * 애니메이션 루프 중지
+   */
+  stopAnimationLoop() {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+    this.isRunning = false;
+  }
+  /**
+   * 메인 애니메이션 루프
+   */
+  animate() {
+    if (!this.isRunning || this.motions.size === 0) {
+      this.stopAnimationLoop();
+      return;
+    }
+    const currentTime = Date.now();
+    const completedMotions = [];
+    this.motions.forEach((motion) => {
+      if (!motion.isRunning || motion.isPaused) return;
+      const elapsed = currentTime - motion.startTime;
+      if (elapsed < 0) return;
+      const progress = Math.min(elapsed / motion.options.duration, 1);
+      const easedProgress = motion.options.easing(progress);
+      motion.currentProgress = easedProgress;
+      this.applyMotionFrame(motion.element, easedProgress);
+      motion.options.onUpdate?.(easedProgress);
+      if (progress >= 1) {
+        completedMotions.push(motion.id);
+        motion.isRunning = false;
+        motion.options.onComplete?.();
+      }
+    });
+    completedMotions.forEach((id) => this.motions.delete(id));
+    this.animationFrameId = requestAnimationFrame(() => this.animate());
+  }
+  /**
+   * 모션 프레임 적용
+   */
+  applyMotionFrame(element, progress) {
+    const transforms = [];
+    if (element.style.transform) {
+      transforms.push(element.style.transform);
+    }
+    element.style.transform = transforms.join(" ");
+  }
+  /**
+   * GPU 가속 활성화
+   */
+  enableGPUAcceleration(element) {
+    element.style.willChange = "transform, opacity";
+    element.style.transform = "translateZ(0)";
+  }
+  /**
+   * 레이어 분리
+   */
+  createLayer(element) {
+    element.style.transform = "translateZ(0)";
+    element.style.backfaceVisibility = "hidden";
+  }
+  /**
+   * 고유 모션 ID 생성
+   */
+  generateMotionId() {
+    return `motion_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+  }
+  /**
+   * 정리
+   */
+  destroy() {
+    this.stopAll();
+    this.stopAnimationLoop();
+  }
+};
+var motionEngine = new MotionEngine();
+
+// src/core/TransitionEffects.ts
+var TransitionEffects = class _TransitionEffects {
+  constructor() {
+    this.activeTransitions = /* @__PURE__ */ new Map();
+  }
+  static getInstance() {
+    if (!_TransitionEffects.instance) {
+      _TransitionEffects.instance = new _TransitionEffects();
+    }
+    return _TransitionEffects.instance;
+  }
+  /**
+   * 페이드 인/아웃 전환
+   */
+  async fade(element, options) {
+    const transitionId = this.generateTransitionId();
+    return new Promise(async (resolve) => {
+      const initialOpacity = parseFloat(getComputedStyle(element).opacity) || 1;
+      const targetOpacity = options.direction === "reverse" ? 0 : 1;
+      if (options.direction === "reverse") {
+        element.style.opacity = initialOpacity.toString();
+      } else {
+        element.style.opacity = "0";
+      }
+      this.enableGPUAcceleration(element);
+      const motionId = await motionEngine.motion(
+        element,
+        [
+          { progress: 0, properties: { opacity: options.direction === "reverse" ? initialOpacity : 0 } },
+          { progress: 1, properties: { opacity: targetOpacity } }
+        ],
+        {
+          duration: options.duration,
+          easing: options.easing || this.getDefaultEasing(),
+          delay: options.delay,
+          onStart: options.onTransitionStart,
+          onUpdate: (progress) => {
+            const currentOpacity = options.direction === "reverse" ? initialOpacity * (1 - progress) : targetOpacity * progress;
+            element.style.opacity = currentOpacity.toString();
+          },
+          onComplete: () => {
+            options.onTransitionComplete?.();
+            this.activeTransitions.delete(transitionId);
+            resolve();
+          }
+        }
+      );
+      this.activeTransitions.set(transitionId, motionId);
+    });
+  }
+  /**
+   * 슬라이드 전환
+   */
+  async slide(element, options) {
+    const transitionId = this.generateTransitionId();
+    const distance = options.distance || 100;
+    return new Promise(async (resolve) => {
+      const initialTransform = getComputedStyle(element).transform;
+      const isReverse = options.direction === "reverse";
+      if (!isReverse) {
+        element.style.transform = `translateX(${distance}px)`;
+      }
+      this.enableGPUAcceleration(element);
+      const motionId = await motionEngine.motion(
+        element,
+        [
+          { progress: 0, properties: { translateX: isReverse ? 0 : distance } },
+          { progress: 1, properties: { translateX: isReverse ? distance : 0 } }
+        ],
+        {
+          duration: options.duration,
+          easing: options.easing || this.getDefaultEasing(),
+          delay: options.delay,
+          onStart: options.onTransitionStart,
+          onUpdate: (progress) => {
+            const currentTranslateX = isReverse ? distance * progress : distance * (1 - progress);
+            element.style.transform = `translateX(${currentTranslateX}px)`;
+          },
+          onComplete: () => {
+            element.style.transform = initialTransform;
+            options.onTransitionComplete?.();
+            this.activeTransitions.delete(transitionId);
+            resolve();
+          }
+        }
+      );
+      this.activeTransitions.set(transitionId, motionId);
+    });
+  }
+  /**
+   * 스케일 전환
+   */
+  async scale(element, options) {
+    const transitionId = this.generateTransitionId();
+    const scaleValue = options.scale || 0.8;
+    return new Promise(async (resolve) => {
+      const initialTransform = getComputedStyle(element).transform;
+      const isReverse = options.direction === "reverse";
+      if (!isReverse) {
+        element.style.transform = `scale(${scaleValue})`;
+      }
+      this.enableGPUAcceleration(element);
+      const motionId = await motionEngine.motion(
+        element,
+        [
+          { progress: 0, properties: { scale: isReverse ? 1 : scaleValue } },
+          { progress: 1, properties: { scale: isReverse ? scaleValue : 1 } }
+        ],
+        {
+          duration: options.duration,
+          easing: options.easing || this.getDefaultEasing(),
+          delay: options.delay,
+          onStart: options.onTransitionStart,
+          onUpdate: (progress) => {
+            const currentScale = isReverse ? 1 - (1 - scaleValue) * progress : scaleValue + (1 - scaleValue) * progress;
+            element.style.transform = `scale(${currentScale})`;
+          },
+          onComplete: () => {
+            element.style.transform = initialTransform;
+            options.onTransitionComplete?.();
+            this.activeTransitions.delete(transitionId);
+            resolve();
+          }
+        }
+      );
+      this.activeTransitions.set(transitionId, motionId);
+    });
+  }
+  /**
+   * 플립 전환 (3D 회전)
+   */
+  async flip(element, options) {
+    const transitionId = this.generateTransitionId();
+    const perspective = options.perspective || 1e3;
+    return new Promise(async (resolve) => {
+      const initialTransform = getComputedStyle(element).transform;
+      const isReverse = options.direction === "reverse";
+      element.style.perspective = `${perspective}px`;
+      element.style.transformStyle = "preserve-3d";
+      if (!isReverse) {
+        element.style.transform = `rotateY(90deg)`;
+      }
+      this.enableGPUAcceleration(element);
+      const motionId = await motionEngine.motion(
+        element,
+        [
+          { progress: 0, properties: { rotateY: isReverse ? 0 : 90 } },
+          { progress: 1, properties: { rotateY: isReverse ? 90 : 0 } }
+        ],
+        {
+          duration: options.duration,
+          easing: options.easing || this.getDefaultEasing(),
+          delay: options.delay,
+          onStart: options.onTransitionStart,
+          onUpdate: (progress) => {
+            const currentRotateY = isReverse ? 90 * progress : 90 * (1 - progress);
+            element.style.transform = `rotateY(${currentRotateY}deg)`;
+          },
+          onComplete: () => {
+            element.style.transform = initialTransform;
+            element.style.perspective = "";
+            element.style.transformStyle = "";
+            options.onTransitionComplete?.();
+            this.activeTransitions.delete(transitionId);
+            resolve();
+          }
+        }
+      );
+      this.activeTransitions.set(transitionId, motionId);
+    });
+  }
+  /**
+   * 큐브 전환 (3D 큐브 회전)
+   */
+  async cube(element, options) {
+    const transitionId = this.generateTransitionId();
+    const perspective = options.perspective || 1200;
+    return new Promise(async (resolve) => {
+      const initialTransform = getComputedStyle(element).transform;
+      const isReverse = options.direction === "reverse";
+      element.style.perspective = `${perspective}px`;
+      element.style.transformStyle = "preserve-3d";
+      if (!isReverse) {
+        element.style.transform = `rotateX(90deg) rotateY(45deg)`;
+      }
+      this.enableGPUAcceleration(element);
+      const motionId = await motionEngine.motion(
+        element,
+        [
+          { progress: 0, properties: { rotateX: isReverse ? 0 : 90, rotateY: isReverse ? 0 : 45 } },
+          { progress: 1, properties: { rotateX: isReverse ? 90 : 0, rotateY: isReverse ? 45 : 0 } }
+        ],
+        {
+          duration: options.duration,
+          easing: options.easing || this.getDefaultEasing(),
+          delay: options.delay,
+          onStart: options.onTransitionStart,
+          onUpdate: (progress) => {
+            const currentRotateX = isReverse ? 90 * progress : 90 * (1 - progress);
+            const currentRotateY = isReverse ? 45 * progress : 45 * (1 - progress);
+            element.style.transform = `rotateX(${currentRotateX}deg) rotateY(${currentRotateY}deg)`;
+          },
+          onComplete: () => {
+            element.style.transform = initialTransform;
+            element.style.perspective = "";
+            element.style.transformStyle = "";
+            options.onTransitionComplete?.();
+            this.activeTransitions.delete(transitionId);
+            resolve();
+          }
+        }
+      );
+      this.activeTransitions.set(transitionId, motionId);
+    });
+  }
+  /**
+   * 모프 전환 (복합 변형)
+   */
+  async morph(element, options) {
+    const transitionId = this.generateTransitionId();
+    return new Promise(async (resolve) => {
+      const initialTransform = getComputedStyle(element).transform;
+      const isReverse = options.direction === "reverse";
+      if (!isReverse) {
+        element.style.transform = `scale(0.9) rotate(5deg)`;
+      }
+      this.enableGPUAcceleration(element);
+      const motionId = await motionEngine.motion(
+        element,
+        [
+          { progress: 0, properties: { scale: isReverse ? 1 : 0.9, rotate: isReverse ? 0 : 5 } },
+          { progress: 1, properties: { scale: isReverse ? 0.9 : 1, rotate: isReverse ? 5 : 0 } }
+        ],
+        {
+          duration: options.duration,
+          easing: options.easing || this.getDefaultEasing(),
+          delay: options.delay,
+          onStart: options.onTransitionStart,
+          onUpdate: (progress) => {
+            const currentScale = isReverse ? 1 - 0.1 * progress : 0.9 + 0.1 * progress;
+            const currentRotate = isReverse ? 5 * progress : 5 * (1 - progress);
+            element.style.transform = `scale(${currentScale}) rotate(${currentRotate}deg)`;
+          },
+          onComplete: () => {
+            element.style.transform = initialTransform;
+            options.onTransitionComplete?.();
+            this.activeTransitions.delete(transitionId);
+            resolve();
+          }
+        }
+      );
+      this.activeTransitions.set(transitionId, motionId);
+    });
+  }
+  /**
+   * 전환 중지
+   */
+  stopTransition(transitionId) {
+    const motionId = this.activeTransitions.get(transitionId);
+    if (motionId) {
+      motionEngine.stop(motionId);
+      this.activeTransitions.delete(transitionId);
+    }
+  }
+  /**
+   * 모든 전환 중지
+   */
+  stopAllTransitions() {
+    this.activeTransitions.forEach((motionId) => {
+      motionEngine.stop(motionId);
+    });
+    this.activeTransitions.clear();
+  }
+  /**
+   * 활성 전환 수 확인
+   */
+  getActiveTransitionCount() {
+    return this.activeTransitions.size;
+  }
+  /**
+   * GPU 가속 활성화
+   */
+  enableGPUAcceleration(element) {
+    element.style.willChange = "transform, opacity";
+    element.style.transform = "translateZ(0)";
+  }
+  /**
+   * 기본 이징 함수
+   */
+  getDefaultEasing() {
+    return (t) => t * t * (3 - 2 * t);
+  }
+  /**
+   * 고유 전환 ID 생성
+   */
+  generateTransitionId() {
+    return `transition_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+  }
+  /**
+   * 정리
+   */
+  destroy() {
+    this.stopAllTransitions();
+  }
+};
+var transitionEffects = TransitionEffects.getInstance();
+
+// src/core/PerformanceOptimizer.ts
+var PerformanceOptimizer = class _PerformanceOptimizer {
+  constructor() {
+    this.performanceObserver = null;
+    this.layerRegistry = /* @__PURE__ */ new Set();
+    this.isMonitoring = false;
+    this.config = {
+      enableGPUAcceleration: true,
+      enableLayerSeparation: true,
+      enableMemoryOptimization: true,
+      targetFPS: 60,
+      maxLayerCount: 100,
+      memoryThreshold: 50 * 1024 * 1024
+      // 50MB
+    };
+    this.metrics = {
+      fps: 0,
+      layerCount: 0,
+      activeMotions: 0
+    };
+    this.initializePerformanceMonitoring();
+  }
+  static getInstance() {
+    if (!_PerformanceOptimizer.instance) {
+      _PerformanceOptimizer.instance = new _PerformanceOptimizer();
+    }
+    return _PerformanceOptimizer.instance;
+  }
+  /**
+   * 성능 모니터링 초기화
+   */
+  initializePerformanceMonitoring() {
+    if (typeof PerformanceObserver !== "undefined") {
+      try {
+        this.performanceObserver = new PerformanceObserver((list) => {
+          const entries = list.getEntries();
+          this.updatePerformanceMetrics(entries);
+        });
+        this.performanceObserver.observe({ entryTypes: ["measure", "navigation"] });
+      } catch (error) {
+        if (process.env.NODE_ENV === "development") {
+          console.warn("Performance monitoring not supported:", error);
+        }
+      }
+    }
+  }
+  /**
+   * 성능 메트릭 업데이트
+   */
+  updatePerformanceMetrics(entries) {
+    entries.forEach((entry) => {
+      if (entry.entryType === "measure") {
+        this.calculateFPS();
+      }
+    });
+  }
+  /**
+   * FPS 계산
+   */
+  calculateFPS() {
+    const now = performance.now();
+    const deltaTime = now - (this.lastFrameTime || now);
+    this.lastFrameTime = now;
+    if (deltaTime > 0) {
+      this.metrics.fps = Math.round(1e3 / deltaTime);
+    }
+  }
+  /**
+   * GPU 가속 활성화
+   */
+  enableGPUAcceleration(element) {
+    if (!this.config.enableGPUAcceleration) return;
+    try {
+      element.style.willChange = "transform, opacity";
+      element.style.transform = "translateZ(0)";
+      element.style.backfaceVisibility = "hidden";
+      element.style.transformStyle = "preserve-3d";
+      this.registerLayer(element);
+    } catch (error) {
+      if (process.env.NODE_ENV === "development") {
+        console.warn("GPU acceleration failed:", error);
+      }
+    }
+  }
+  /**
+   * 레이어 분리 및 최적화
+   */
+  createOptimizedLayer(element) {
+    if (!this.config.enableLayerSeparation) return;
+    try {
+      element.style.transform = "translateZ(0)";
+      element.style.backfaceVisibility = "hidden";
+      element.style.perspective = "1000px";
+      this.registerLayer(element);
+      this.checkLayerLimit();
+    } catch (error) {
+      if (process.env.NODE_ENV === "development") {
+        console.warn("Layer optimization failed:", error);
+      }
+    }
+  }
+  /**
+   * 레이어 등록
+   */
+  registerLayer(element) {
+    if (this.layerRegistry.has(element)) return;
+    this.layerRegistry.add(element);
+    this.metrics.layerCount = this.layerRegistry.size;
+    this.checkMemoryUsage();
+  }
+  /**
+   * 레이어 제거
+   */
+  removeLayer(element) {
+    if (this.layerRegistry.has(element)) {
+      this.layerRegistry.delete(element);
+      this.metrics.layerCount = this.layerRegistry.size;
+      element.style.willChange = "auto";
+      element.style.transform = "";
+      element.style.backfaceVisibility = "";
+      element.style.transformStyle = "";
+      element.style.perspective = "";
+    }
+  }
+  /**
+   * 레이어 수 제한 체크
+   */
+  checkLayerLimit() {
+    if (this.metrics.layerCount > this.config.maxLayerCount) {
+      if (process.env.NODE_ENV === "development") {
+        console.warn(`Layer count (${this.metrics.layerCount}) exceeds limit (${this.config.maxLayerCount})`);
+      }
+      this.cleanupOldLayers();
+    }
+  }
+  /**
+   * 오래된 레이어 정리
+   */
+  cleanupOldLayers() {
+    const layersToRemove = Array.from(this.layerRegistry).slice(0, 10);
+    layersToRemove.forEach((layer) => {
+      this.removeLayer(layer);
+    });
+  }
+  /**
+   * 메모리 사용량 체크
+   */
+  checkMemoryUsage() {
+    if (!this.config.enableMemoryOptimization) return;
+    if ("memory" in performance) {
+      const memory = performance.memory;
+      this.metrics.memoryUsage = memory.usedJSHeapSize;
+      if (memory.usedJSHeapSize > this.config.memoryThreshold) {
+        if (process.env.NODE_ENV === "development") {
+          console.warn("Memory usage high, cleaning up...");
+        }
+        this.cleanupMemory();
+      }
+    }
+  }
+  /**
+   * 메모리 정리
+   */
+  cleanupMemory() {
+    if ("gc" in window) {
+      try {
+        window.gc();
+      } catch (error) {
+      }
+    }
+    this.cleanupOldLayers();
+  }
+  /**
+   * 성능 최적화 설정 업데이트
+   */
+  updateConfig(newConfig) {
+    this.config = { ...this.config, ...newConfig };
+    if (!this.config.enableGPUAcceleration) {
+      this.disableAllGPUAcceleration();
+    }
+    if (!this.config.enableLayerSeparation) {
+      this.disableAllLayers();
+    }
+  }
+  /**
+   * 모든 GPU 가속 비활성화
+   */
+  disableAllGPUAcceleration() {
+    this.layerRegistry.forEach((element) => {
+      element.style.willChange = "auto";
+      element.style.transform = "";
+    });
+  }
+  /**
+   * 모든 레이어 비활성화
+   */
+  disableAllLayers() {
+    this.layerRegistry.forEach((element) => {
+      this.removeLayer(element);
+    });
+  }
+  /**
+   * 성능 메트릭 가져오기
+   */
+  getMetrics() {
+    return { ...this.metrics };
+  }
+  /**
+   * 성능 모니터링 시작
+   */
+  startMonitoring() {
+    if (this.isMonitoring) return;
+    this.isMonitoring = true;
+    this.monitoringInterval = setInterval(() => {
+      this.updateMetrics();
+    }, 1e3);
+  }
+  /**
+   * 성능 모니터링 중지
+   */
+  stopMonitoring() {
+    if (!this.isMonitoring) return;
+    this.isMonitoring = false;
+    if (this.monitoringInterval) {
+      clearInterval(this.monitoringInterval);
+      this.monitoringInterval = void 0;
+    }
+  }
+  /**
+   * 메트릭 업데이트
+   */
+  updateMetrics() {
+    if ("memory" in performance) {
+      const memory = performance.memory;
+      this.metrics.memoryUsage = memory.usedJSHeapSize;
+    }
+    this.metrics.layerCount = this.layerRegistry.size;
+  }
+  /**
+   * 성능 리포트 생성
+   */
+  generateReport() {
+    const metrics = this.getMetrics();
+    return `
+=== HUA Motion Performance Report ===
+FPS: ${metrics.fps}
+Active Layers: ${metrics.layerCount}
+Memory Usage: ${this.formatBytes(metrics.memoryUsage || 0)}
+Active Motions: ${metrics.activeMotions}
+GPU Acceleration: ${this.config.enableGPUAcceleration ? "Enabled" : "Disabled"}
+Layer Separation: ${this.config.enableLayerSeparation ? "Enabled" : "Disabled"}
+Memory Optimization: ${this.config.enableMemoryOptimization ? "Enabled" : "Disabled"}
+=====================================
+    `.trim();
+  }
+  /**
+   * 바이트 단위 포맷팅
+   */
+  formatBytes(bytes) {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  }
+  /**
+   * 성능 최적화 권장사항
+   */
+  getOptimizationRecommendations() {
+    const recommendations = [];
+    const metrics = this.getMetrics();
+    if (metrics.fps < this.config.targetFPS) {
+      recommendations.push("FPS\uAC00 \uB0AE\uC2B5\uB2C8\uB2E4. GPU \uAC00\uC18D\uC744 \uD65C\uC131\uD654\uD558\uAC70\uB098 \uB808\uC774\uC5B4 \uC218\uB97C \uC904\uC774\uC138\uC694.");
+    }
+    if (metrics.layerCount > this.config.maxLayerCount * 0.8) {
+      recommendations.push("\uB808\uC774\uC5B4 \uC218\uAC00 \uB9CE\uC2B5\uB2C8\uB2E4. \uBD88\uD544\uC694\uD55C \uB808\uC774\uC5B4\uB97C \uC815\uB9AC\uD558\uC138\uC694.");
+    }
+    if (metrics.memoryUsage && metrics.memoryUsage > this.config.memoryThreshold * 0.8) {
+      recommendations.push("\uBA54\uBAA8\uB9AC \uC0AC\uC6A9\uB7C9\uC774 \uB192\uC2B5\uB2C8\uB2E4. \uBA54\uBAA8\uB9AC \uC815\uB9AC\uB97C \uACE0\uB824\uD558\uC138\uC694.");
+    }
+    return recommendations;
+  }
+  /**
+   * 정리
+   */
+  destroy() {
+    this.stopMonitoring();
+    if (this.performanceObserver) {
+      this.performanceObserver.disconnect();
+      this.performanceObserver = null;
+    }
+    this.layerRegistry.forEach((element) => {
+      this.removeLayer(element);
+    });
+    this.layerRegistry.clear();
+  }
+};
+var performanceOptimizer = PerformanceOptimizer.getInstance();
+
+// src/presets/index.ts
+var MOTION_PRESETS = {
+  hero: {
+    entrance: "fadeIn",
+    delay: 200,
+    duration: 800,
+    hover: false,
+    click: false
+  },
+  title: {
+    entrance: "slideUp",
+    delay: 400,
+    duration: 700,
+    hover: false,
+    click: false
+  },
+  button: {
+    entrance: "scaleIn",
+    delay: 600,
+    duration: 300,
+    hover: true,
+    click: true
+  },
+  card: {
+    entrance: "slideUp",
+    delay: 800,
+    duration: 500,
+    hover: true,
+    click: false
+  },
+  text: {
+    entrance: "fadeIn",
+    delay: 200,
+    duration: 600,
+    hover: false,
+    click: false
+  },
+  image: {
+    entrance: "scaleIn",
+    delay: 400,
+    duration: 600,
+    hover: true,
+    click: false
+  }
+};
+var PAGE_MOTIONS = {
+  // 홈페이지
+  home: {
+    hero: { type: "hero" },
+    title: { type: "title" },
+    description: { type: "text" },
+    cta: { type: "button" },
+    feature1: { type: "card" },
+    feature2: { type: "card" },
+    feature3: { type: "card" }
+  },
+  // 대시보드
+  dashboard: {
+    header: { type: "hero" },
+    sidebar: { type: "card", entrance: "slideLeft" },
+    main: { type: "text", entrance: "fadeIn" },
+    card1: { type: "card" },
+    card2: { type: "card" },
+    card3: { type: "card" },
+    chart: { type: "image" }
+  },
+  // 제품 페이지
+  product: {
+    hero: { type: "hero" },
+    title: { type: "title" },
+    image: { type: "image" },
+    description: { type: "text" },
+    price: { type: "text" },
+    buyButton: { type: "button" },
+    features: { type: "card" }
+  },
+  // 블로그
+  blog: {
+    header: { type: "hero" },
+    title: { type: "title" },
+    content: { type: "text" },
+    sidebar: { type: "card", entrance: "slideRight" },
+    related1: { type: "card" },
+    related2: { type: "card" },
+    related3: { type: "card" }
+  }
+};
+function mergeWithPreset(preset, custom = {}) {
+  return {
+    ...preset,
+    ...custom
+  };
+}
+function getPagePreset(pageType) {
+  return PAGE_MOTIONS[pageType];
+}
+function getMotionPreset(type) {
+  return MOTION_PRESETS[type] || MOTION_PRESETS.text;
+}
+
+// src/hooks/useSimplePageMotion.ts
+function useSimplePageMotion(pageType) {
+  const config = getPagePreset(pageType);
+  return useSimplePageMotions(config);
+}
+function useSimplePageMotions(config) {
+  const [motions, setMotions] = react.useState(/* @__PURE__ */ new Map());
+  const observersRef = react.useRef(/* @__PURE__ */ new Map());
+  const calculateMotionValues = react.useCallback((isVisible, elementConfig) => {
+    const preset = getMotionPreset(elementConfig.type);
+    mergeWithPreset(preset, elementConfig);
+    let opacity = isVisible ? 1 : 0;
+    let translateY = isVisible ? 0 : 20;
+    let translateX = 0;
+    let scale = isVisible ? 1 : 0.95;
+    return { opacity, translateY, translateX, scale };
+  }, []);
+  react.useEffect(() => {
+    const newMotions = /* @__PURE__ */ new Map();
+    Object.entries(config).forEach(([elementId, elementConfig]) => {
+      const ref = { current: null };
+      const { opacity, translateY, translateX, scale } = calculateMotionValues(false, elementConfig);
+      newMotions.set(elementId, {
+        ref,
+        style: {
+          opacity,
+          transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`,
+          transition: `all ${elementConfig.duration || 700}ms ease-out`,
+          pointerEvents: "auto",
+          willChange: "transform, opacity"
+        },
+        isVisible: false,
+        isHovered: false,
+        isClicked: false
+      });
+    });
+    setMotions(newMotions);
+  }, [config, calculateMotionValues]);
+  react.useEffect(() => {
+    const visibleElements = /* @__PURE__ */ new Set();
+    Object.entries(config).forEach(([elementId, elementConfig]) => {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && !visibleElements.has(elementId)) {
+              visibleElements.add(elementId);
+              const preset = getMotionPreset(elementConfig.type);
+              const mergedConfig = mergeWithPreset(preset, elementConfig);
+              const delay = mergedConfig.delay || 0;
+              setTimeout(() => {
+                const { opacity, translateY, translateX, scale } = calculateMotionValues(true, elementConfig);
+                setMotions((prev) => {
+                  const current = prev.get(elementId);
+                  if (!current) return prev;
+                  const newMotion = {
+                    ...current,
+                    style: {
+                      ...current.style,
+                      opacity,
+                      transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`
+                    },
+                    isVisible: true
+                  };
+                  const newMap = new Map(prev);
+                  newMap.set(elementId, newMotion);
+                  return newMap;
+                });
+                if (process.env.NODE_ENV === "development") {
+                  console.log("\uBAA8\uC158 \uC2E4\uD589:", elementId, "delay:", delay);
+                }
+              }, delay);
+              observer.unobserve(entry.target);
+            }
+          });
+        },
+        { threshold: elementConfig.threshold || 0.1 }
+      );
+      observersRef.current.set(elementId, observer);
+    });
+    const timer = setTimeout(() => {
+      Object.entries(config).forEach(([elementId]) => {
+        const observer = observersRef.current.get(elementId);
+        if (observer) {
+          const element = document.querySelector(`[data-motion-id="${elementId}"]`);
+          if (element) {
+            observer.observe(element);
+          }
+        }
+      });
+    }, 100);
+    return () => {
+      clearTimeout(timer);
+      observersRef.current.forEach((observer) => observer.disconnect());
+      observersRef.current.clear();
+    };
+  }, [config, calculateMotionValues]);
+  const getPageMotionRefs = react.useCallback(() => {
+    const result = {};
+    motions.forEach((motion, elementId) => {
+      result[elementId] = motion;
+    });
+    return result;
+  }, [motions]);
+  return getPageMotionRefs();
+}
+
+// src/managers/MotionStateManager.ts
+var MotionStateManager = class {
+  constructor() {
+    this.states = /* @__PURE__ */ new Map();
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  /**
+   * 요소의 상태를 초기화
+   */
+  initializeElement(elementId, config) {
+    const initialState = {
+      internalVisibility: false,
+      // 초기에 숨김 상태로 시작 (스크롤 리빌용)
+      triggeredVisibility: false,
+      // Intersection Observer가 아직 트리거되지 않음
+      finalVisibility: false,
+      // 초기에 숨김 상태로 시작
+      opacity: 0,
+      // 초기에 투명 상태로 시작
+      translateY: 20,
+      // 초기에 아래로 이동된 상태로 시작
+      translateX: 0,
+      scale: 0.95,
+      // 초기에 약간 축소된 상태로 시작
+      rotation: 0,
+      isHovered: false,
+      isClicked: false,
+      isAnimating: false
+    };
+    this.states.set(elementId, initialState);
+    this.computeFinalState(elementId);
+  }
+  /**
+   * 내부 가시성 상태 업데이트 (초기화, 리셋 등)
+   */
+  setInternalVisibility(elementId, visible) {
+    const state = this.states.get(elementId);
+    if (!state) return;
+    state.internalVisibility = visible;
+    this.computeFinalState(elementId);
+    this.notifyListeners(elementId, state);
+  }
+  /**
+   * 외부 트리거 가시성 상태 업데이트 (Intersection Observer)
+   */
+  setTriggeredVisibility(elementId, visible) {
+    const state = this.states.get(elementId);
+    if (!state) return;
+    state.triggeredVisibility = visible;
+    this.computeFinalState(elementId);
+    this.notifyListeners(elementId, state);
+  }
+  /**
+   * 모션 값 업데이트
+   */
+  updateMotionValues(elementId, values) {
+    const state = this.states.get(elementId);
+    if (!state) return;
+    Object.assign(state, values);
+    this.notifyListeners(elementId, state);
+  }
+  /**
+   * 최종 상태 계산
+   */
+  computeFinalState(elementId) {
+    const state = this.states.get(elementId);
+    if (!state) return;
+    state.finalVisibility = state.internalVisibility || state.triggeredVisibility;
+    state.isAnimating = state.finalVisibility && (state.opacity < 1 || state.translateY > 0);
+  }
+  /**
+   * 현재 상태 조회
+   */
+  getState(elementId) {
+    return this.states.get(elementId);
+  }
+  /**
+   * 모든 상태 조회
+   */
+  getAllStates() {
+    return new Map(this.states);
+  }
+  /**
+   * 상태 변경 리스너 등록
+   */
+  subscribe(elementId, listener) {
+    if (!this.listeners.has(elementId)) {
+      this.listeners.set(elementId, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(elementId).add(listener);
+    return () => {
+      const listeners = this.listeners.get(elementId);
+      if (listeners) {
+        listeners.delete(listener);
+      }
+    };
+  }
+  /**
+   * 리스너들에게 상태 변경 알림
+   */
+  notifyListeners(elementId, state) {
+    const listeners = this.listeners.get(elementId);
+    if (!listeners) return;
+    listeners.forEach((listener) => {
+      try {
+        listener(state);
+      } catch (error) {
+        if (process.env.NODE_ENV === "development") {
+          console.error(`MotionStateManager listener error for ${elementId}:`, error);
+        }
+      }
+    });
+  }
+  /**
+   * 모든 상태 초기화
+   */
+  reset() {
+    this.states.clear();
+    this.listeners.clear();
+  }
+  /**
+   * 특정 요소 상태 초기화
+   */
+  resetElement(elementId) {
+    this.states.delete(elementId);
+    this.listeners.delete(elementId);
+  }
+  /**
+   * 디버그용 상태 출력
+   */
+  debug() {
+    if (process.env.NODE_ENV === "development") {
+      console.log("MotionStateManager Debug:");
+      this.states.forEach((state, elementId) => {
+        console.log(`  ${elementId}:`, {
+          internalVisibility: state.internalVisibility,
+          triggeredVisibility: state.triggeredVisibility,
+          finalVisibility: state.finalVisibility,
+          opacity: state.opacity,
+          translateY: state.translateY,
+          isAnimating: state.isAnimating
+        });
+      });
+    }
+  }
+};
+var motionStateManager = new MotionStateManager();
+
+// src/hooks/usePageMotions.ts
+function usePageMotions(config) {
+  const [motions, setMotions] = react.useState(/* @__PURE__ */ new Map());
+  const observersRef = react.useRef(/* @__PURE__ */ new Map());
+  const unsubscribeRef = react.useRef(/* @__PURE__ */ new Map());
+  const [resetKey, setResetKey] = react.useState(0);
+  const reset = react.useCallback(() => {
+    observersRef.current.forEach((observer) => observer.disconnect());
+    observersRef.current.clear();
+    unsubscribeRef.current.forEach((unsubscribe) => unsubscribe());
+    unsubscribeRef.current.clear();
+    motionStateManager.reset();
+    setMotions(/* @__PURE__ */ new Map());
+    setResetKey((prev) => prev + 1);
+  }, []);
+  const calculateMotionValues = react.useCallback((state, elementConfig) => {
+    const preset = getMotionPreset(elementConfig.type);
+    const mergedConfig = mergeWithPreset(preset, elementConfig);
+    let opacity = state.finalVisibility ? 1 : 0;
+    let translateY = state.finalVisibility ? 0 : 20;
+    let translateX = 0;
+    let scale = state.finalVisibility ? 1 : 0.95;
+    if (mergedConfig.hover && state.isHovered) {
+      scale *= 1.1;
+      translateY -= 5;
+      opacity = 0.9;
+    }
+    if (mergedConfig.click && state.isClicked) {
+      scale *= 0.9;
+      translateY += 3;
+      opacity = 0.8;
+    }
+    return { opacity, translateY, translateX, scale };
+  }, []);
+  const updateMotionState = react.useCallback((elementId, updates) => {
+    const currentState = motionStateManager.getState(elementId);
+    if (!currentState) return;
+    if (updates.opacity !== void 0 || updates.translateY !== void 0 || updates.translateX !== void 0 || updates.scale !== void 0) {
+      motionStateManager.updateMotionValues(elementId, updates);
+    }
+    if (updates.isHovered !== void 0) {
+      currentState.isHovered = updates.isHovered;
+      motionStateManager.notifyListeners(elementId, currentState);
+    }
+    if (updates.isClicked !== void 0) {
+      currentState.isClicked = updates.isClicked;
+      motionStateManager.notifyListeners(elementId, currentState);
+    }
+  }, []);
+  react.useEffect(() => {
+    const newMotions = /* @__PURE__ */ new Map();
+    if (!config || typeof config !== "object") {
+      if (process.env.NODE_ENV === "development") {
+        console.warn("usePageMotions: config\uAC00 \uC720\uD6A8\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4:", config);
+      }
+      return;
+    }
+    motionStateManager.reset();
+    Object.entries(config).forEach(([elementId, elementConfig]) => {
+      const ref = { current: null };
+      motionStateManager.initializeElement(elementId, elementConfig);
+      const initialState = motionStateManager.getState(elementId);
+      if (process.env.NODE_ENV === "development") {
+        console.log(`\uCD08\uAE30 \uC0C1\uD0DC [${elementId}]:`, initialState);
+      }
+      const { opacity, translateY, translateX, scale } = calculateMotionValues(initialState, elementConfig);
+      newMotions.set(elementId, {
+        ref,
+        style: {
+          opacity,
+          transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`,
+          transition: `all ${elementConfig.duration || 700}ms ease-out`,
+          pointerEvents: "auto",
+          willChange: "transform, opacity"
+        },
+        isVisible: initialState.finalVisibility,
+        isHovered: initialState.isHovered,
+        isClicked: initialState.isClicked
+      });
+      const unsubscribe = motionStateManager.subscribe(elementId, (newState) => {
+        const { opacity: opacity2, translateY: translateY2, translateX: translateX2, scale: scale2 } = calculateMotionValues(newState, elementConfig);
+        setMotions((prev) => {
+          const current = prev.get(elementId);
+          if (!current) return prev;
+          const transform = `translate(${translateX2}px, ${translateY2}px) scale(${scale2})`;
+          const hasChanged = current.style.opacity !== opacity2 || current.style.transform !== transform || current.isVisible !== newState.finalVisibility || current.isHovered !== newState.isHovered || current.isClicked !== newState.isClicked;
+          if (!hasChanged) return prev;
+          const newMotion = {
+            ...current,
+            style: {
+              ...current.style,
+              opacity: opacity2,
+              transform
+            },
+            isVisible: newState.finalVisibility,
+            isHovered: newState.isHovered,
+            isClicked: newState.isClicked
+          };
+          const newMap = new Map(prev);
+          newMap.set(elementId, newMotion);
+          return newMap;
+        });
+      });
+      unsubscribeRef.current.set(elementId, unsubscribe);
+    });
+    setMotions(newMotions);
+    return () => {
+      unsubscribeRef.current.forEach((unsubscribe) => unsubscribe());
+      unsubscribeRef.current.clear();
+      motionStateManager.reset();
+    };
+  }, [config, resetKey]);
+  react.useEffect(() => {
+    const visibleElements = /* @__PURE__ */ new Set();
+    if (!config || typeof config !== "object") {
+      return;
+    }
+    Object.entries(config).forEach(([elementId, elementConfig]) => {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && !visibleElements.has(elementId)) {
+              visibleElements.add(elementId);
+              const preset = getMotionPreset(elementConfig.type);
+              const mergedConfig = mergeWithPreset(preset, elementConfig);
+              const delay = mergedConfig.delay || 0;
+              setTimeout(() => {
+                motionStateManager.setTriggeredVisibility(elementId, true);
+                if (process.env.NODE_ENV === "development") {
+                  console.log("\uBAA8\uC158 \uC2E4\uD589:", elementId, "delay:", delay);
+                }
+              }, delay);
+              observer.unobserve(entry.target);
+            }
+          });
+        },
+        {
+          threshold: elementConfig.threshold || 0.3,
+          // 30% 보여야 실행
+          rootMargin: "0px 0px -50px 0px"
+          // 하단에서 50px 전에 실행
+        }
+      );
+      observersRef.current.set(elementId, observer);
+    });
+    const timer = setTimeout(() => {
+      if (!config || typeof config !== "object") {
+        return;
+      }
+      Object.entries(config).forEach(([elementId]) => {
+        const observer = observersRef.current.get(elementId);
+        if (observer) {
+          const element = document.querySelector(`[data-motion-id="${elementId}"]`);
+          if (element) {
+            observer.observe(element);
+          }
+        }
+      });
+    }, 100);
+    return () => {
+      clearTimeout(timer);
+      observersRef.current.forEach((observer) => observer.disconnect());
+      observersRef.current.clear();
+    };
+  }, [config, resetKey]);
+  react.useEffect(() => {
+    if (!config || typeof config !== "object") {
+      return;
+    }
+    const handleMouseEnter = (event) => {
+      const target = event.target;
+      if (!target) return;
+      let element = target;
+      let elementId = null;
+      while (element && element !== document.body) {
+        if (element.getAttribute && typeof element.getAttribute === "function") {
+          elementId = element.getAttribute("data-motion-id");
+          if (elementId) break;
+        }
+        element = element.parentElement;
+      }
+      if (elementId && config[elementId]?.hover) {
+        if (process.env.NODE_ENV === "development") {
+          console.log("\uD638\uBC84 \uC2DC\uC791:", elementId);
+        }
+        updateMotionState(elementId, { isHovered: true });
+      }
+    };
+    const handleMouseLeave = (event) => {
+      const target = event.target;
+      if (!target) return;
+      let element = target;
+      let elementId = null;
+      while (element && element !== document.body) {
+        if (element.getAttribute && typeof element.getAttribute === "function") {
+          elementId = element.getAttribute("data-motion-id");
+          if (elementId) break;
+        }
+        element = element.parentElement;
+      }
+      if (elementId && config[elementId]?.hover) {
+        if (process.env.NODE_ENV === "development") {
+          console.log("\uD638\uBC84 \uC885\uB8CC:", elementId);
+        }
+        updateMotionState(elementId, { isHovered: false });
+      }
+    };
+    const handleMouseDown = (event) => {
+      const target = event.target;
+      if (!target) return;
+      let element = target;
+      let elementId = null;
+      while (element && element !== document.body) {
+        if (element.getAttribute && typeof element.getAttribute === "function") {
+          elementId = element.getAttribute("data-motion-id");
+          if (elementId) break;
+        }
+        element = element.parentElement;
+      }
+      if (elementId && config[elementId]?.click) {
+        if (process.env.NODE_ENV === "development") {
+          console.log("\uD074\uB9AD \uC2DC\uC791:", elementId);
+        }
+        updateMotionState(elementId, { isClicked: true });
+      }
+    };
+    const handleMouseUp = (event) => {
+      const target = event.target;
+      if (!target) return;
+      let element = target;
+      let elementId = null;
+      while (element && element !== document.body) {
+        if (element.getAttribute && typeof element.getAttribute === "function") {
+          elementId = element.getAttribute("data-motion-id");
+          if (elementId) break;
+        }
+        element = element.parentElement;
+      }
+      if (elementId && config[elementId]?.click) {
+        if (process.env.NODE_ENV === "development") {
+          console.log("\uD074\uB9AD \uC885\uB8CC:", elementId);
+        }
+        updateMotionState(elementId, { isClicked: false });
+      }
+    };
+    const timer = setTimeout(() => {
+      document.addEventListener("mouseenter", handleMouseEnter, false);
+      document.addEventListener("mouseleave", handleMouseLeave, false);
+      document.addEventListener("mousedown", handleMouseDown, false);
+      document.addEventListener("mouseup", handleMouseUp, false);
+    }, 200);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener("mouseenter", handleMouseEnter, false);
+      document.removeEventListener("mouseleave", handleMouseLeave, false);
+      document.removeEventListener("mousedown", handleMouseDown, false);
+      document.removeEventListener("mouseup", handleMouseUp, false);
+    };
+  }, [config]);
+  const getPageMotionRefs = react.useCallback(() => {
+    const result = {};
+    motions.forEach((motion, elementId) => {
+      result[elementId] = motion;
+    });
+    return result;
+  }, [motions]);
+  return {
+    ...getPageMotionRefs(),
+    reset
+  };
+}
+function useSmartMotion(options = {}) {
+  const {
+    type = "text",
+    entrance: customEntrance,
+    hover: customHover,
+    click: customClick,
+    delay: customDelay,
+    duration: customDuration,
+    threshold = 0.1,
+    autoLanguageSync = false
+  } = options;
+  const getPresetConfig = react.useCallback(() => {
+    return MOTION_PRESETS[type] || MOTION_PRESETS.text;
+  }, [type]);
+  const preset = getPresetConfig();
+  const entrance = customEntrance || preset.entrance;
+  const hover = customHover !== void 0 ? customHover : preset.hover;
+  const click = customClick !== void 0 ? customClick : preset.click;
+  const delay = customDelay !== void 0 ? customDelay : preset.delay;
+  const duration = customDuration !== void 0 ? customDuration : preset.duration;
+  const elementRef = react.useRef(null);
+  const getInitialMotionValues = () => {
+    const initialState = {
+      isVisible: false,
+      isHovered: false,
+      isClicked: false,
+      opacity: 0,
+      translateY: 0,
+      translateX: 0,
+      scale: 1
+    };
+    switch (entrance) {
+      case "fadeIn":
+        initialState.opacity = 0;
+        break;
+      case "slideUp":
+        initialState.opacity = 0;
+        initialState.translateY = 20;
+        break;
+      case "slideLeft":
+        initialState.opacity = 0;
+        initialState.translateX = -20;
+        break;
+      case "slideRight":
+        initialState.opacity = 0;
+        initialState.translateX = 20;
+        break;
+      case "scaleIn":
+        initialState.opacity = 0;
+        initialState.scale = 0.8;
+        break;
+      case "bounceIn":
+        initialState.opacity = 0;
+        initialState.scale = 0.5;
+        break;
+    }
+    return initialState;
+  };
+  const [state, setState] = react.useState(() => {
+    const initialValues = getInitialMotionValues();
+    if (threshold === 0) {
+      initialValues.isVisible = true;
+      initialValues.opacity = 1;
+      initialValues.translateY = 0;
+      initialValues.translateX = 0;
+      initialValues.scale = 1;
+    }
+    return initialValues;
+  });
+  const calculateMotionValues = react.useCallback((currentState) => {
+    const { isVisible, isHovered, isClicked } = currentState;
+    let opacity = 0;
+    let translateY = 0;
+    let translateX = 0;
+    let scale = 1;
+    if (isVisible) {
+      opacity = 1;
+      switch (entrance) {
+        case "fadeIn":
+          break;
+        case "slideUp":
+          translateY = 0;
+          break;
+        case "slideLeft":
+          translateX = 0;
+          break;
+        case "slideRight":
+          translateX = 0;
+          break;
+        case "scaleIn":
+          scale = 1;
+          break;
+        case "bounceIn":
+          scale = 1;
+          break;
+      }
+    } else {
+      switch (entrance) {
+        case "fadeIn":
+          opacity = 0;
+          break;
+        case "slideUp":
+          opacity = 0;
+          translateY = 20;
+          break;
+        case "slideLeft":
+          opacity = 0;
+          translateX = -20;
+          break;
+        case "slideRight":
+          opacity = 0;
+          translateX = 20;
+          break;
+        case "scaleIn":
+          opacity = 0;
+          scale = 0.8;
+          break;
+        case "bounceIn":
+          opacity = 0;
+          scale = 0.5;
+          break;
+      }
+    }
+    if (hover && isHovered) {
+      scale *= 1.1;
+      translateY -= 5;
+    }
+    if (click && isClicked) {
+      scale *= 0.85;
+      translateY += 3;
+    }
+    return { opacity, translateY, translateX, scale };
+  }, [entrance, hover, click]);
+  react.useEffect(() => {
+    if (!elementRef.current) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setTimeout(() => {
+              setState((prev) => ({ ...prev, isVisible: true }));
+            }, delay);
+          }
+        });
+      },
+      { threshold }
+    );
+    observer.observe(elementRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [delay, threshold]);
+  react.useEffect(() => {
+    if (!hover || !elementRef.current) return;
+    const element = elementRef.current;
+    const handleMouseEnter = () => {
+      setState((prev) => ({ ...prev, isHovered: true }));
+    };
+    const handleMouseLeave = () => {
+      setState((prev) => ({ ...prev, isHovered: false }));
+    };
+    element.addEventListener("mouseenter", handleMouseEnter);
+    element.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      element.removeEventListener("mouseenter", handleMouseEnter);
+      element.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [hover]);
+  react.useEffect(() => {
+    if (!click || !elementRef.current) return;
+    const element = elementRef.current;
+    const handleClick = () => {
+      setState((prev) => ({ ...prev, isClicked: true }));
+      setTimeout(() => {
+        setState((prev) => ({ ...prev, isClicked: false }));
+      }, 300);
+    };
+    element.addEventListener("click", handleClick);
+    return () => {
+      element.removeEventListener("click", handleClick);
+    };
+  }, [click]);
+  react.useEffect(() => {
+    setState((prev) => {
+      const { opacity, translateY, translateX, scale } = calculateMotionValues(prev);
+      if (prev.opacity === opacity && prev.translateY === translateY && prev.translateX === translateX && prev.scale === scale) {
+        return prev;
+      }
+      return { ...prev, opacity, translateY, translateX, scale };
+    });
+  }, [state.isVisible, state.isHovered, state.isClicked, calculateMotionValues]);
+  react.useEffect(() => {
+    if (!autoLanguageSync) return;
+    const handleLanguageChange = () => {
+      setState((prev) => ({ ...prev, isVisible: false }));
+      setTimeout(() => {
+        setState((prev) => ({ ...prev, isVisible: true }));
+      }, 100);
+    };
+    window.addEventListener("storage", handleLanguageChange);
+    return () => {
+      window.removeEventListener("storage", handleLanguageChange);
+    };
+  }, [autoLanguageSync]);
+  const motionStyle = react.useMemo(() => ({
+    opacity: state.opacity,
+    transform: `translate(${state.translateX}px, ${state.translateY}px) scale(${state.scale})`,
+    transition: `all ${duration}ms ease-out`,
+    // CSS transition과 충돌 방지
+    pointerEvents: "auto",
+    // 강제로 스타일 적용
+    willChange: "transform, opacity"
+  }), [state.opacity, state.translateX, state.translateY, state.scale, duration]);
+  return {
+    ref: elementRef,
+    style: motionStyle,
+    isVisible: state.isVisible,
+    isHovered: state.isHovered,
+    isClicked: state.isClicked
+  };
+}
+function getInitialStyle(type, distance) {
+  switch (type) {
+    case "slideUp":
+      return { opacity: 0, transform: `translateY(${distance}px)` };
+    case "slideLeft":
+      return { opacity: 0, transform: `translateX(${distance}px)` };
+    case "slideRight":
+      return { opacity: 0, transform: `translateX(-${distance}px)` };
+    case "scaleIn":
+      return { opacity: 0, transform: "scale(0)" };
+    case "bounceIn":
+      return { opacity: 0, transform: "scale(0)" };
+    case "fadeIn":
+    default:
+      return { opacity: 0, transform: "none" };
+  }
+}
+function getVisibleStyle() {
+  return { opacity: 1, transform: "none" };
+}
+function getEasingForType(type, easing2) {
+  if (easing2) return easing2;
+  if (type === "bounceIn") return "cubic-bezier(0.34, 1.56, 0.64, 1)";
+  return "ease-out";
+}
+function useUnifiedMotion(options) {
+  const {
+    type,
+    duration = 600,
+    autoStart = false,
+    delay = 0,
+    easing: easing2,
+    threshold = 0.1,
+    triggerOnce = true,
+    distance = 50,
+    onComplete,
+    onStart,
+    onStop,
+    onReset
+  } = options;
+  const resolvedEasing = getEasingForType(type, easing2);
+  const ref = react.useRef(null);
+  const [isVisible, setIsVisible] = react.useState(false);
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const [progress, setProgress] = react.useState(0);
+  const observerRef = react.useRef(null);
+  const timeoutRef = react.useRef(null);
+  const startRef = react.useRef(() => {
+  });
+  const start = react.useCallback(() => {
+    if (isAnimating) return;
+    setIsAnimating(true);
+    setProgress(0);
+    onStart?.();
+    timeoutRef.current = window.setTimeout(() => {
+      setIsVisible(true);
+      setProgress(1);
+      setIsAnimating(false);
+      onComplete?.();
+    }, delay);
+  }, [isAnimating, delay, onStart, onComplete]);
+  startRef.current = start;
+  const stop = react.useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setIsAnimating(false);
+    onStop?.();
+  }, [onStop]);
+  const reset = react.useCallback(() => {
+    stop();
+    setIsVisible(false);
+    setProgress(0);
+    onReset?.();
+  }, [stop, onReset]);
+  react.useEffect(() => {
+    if (!ref.current || !autoStart) return;
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            startRef.current();
+            if (triggerOnce) {
+              observerRef.current?.disconnect();
+            }
+          }
+        });
+      },
+      { threshold }
+    );
+    observerRef.current.observe(ref.current);
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, [autoStart, threshold, triggerOnce]);
+  react.useEffect(() => {
+    return () => stop();
+  }, [stop]);
+  const style = react.useMemo(() => {
+    const base = isVisible ? getVisibleStyle() : getInitialStyle(type, distance);
+    return {
+      ...base,
+      transition: `all ${duration}ms ${resolvedEasing}`,
+      "--motion-delay": `${delay}ms`,
+      "--motion-duration": `${duration}ms`,
+      "--motion-easing": resolvedEasing,
+      "--motion-progress": `${progress}`
+    };
+  }, [isVisible, type, distance, duration, resolvedEasing, delay, progress]);
+  return {
+    ref,
+    isVisible,
+    isAnimating,
+    style,
+    progress,
+    start,
+    stop,
+    reset
+  };
+}
+function useFadeIn(options = {}) {
+  const {
+    delay = 0,
+    duration = 700,
+    threshold = 0.1,
+    triggerOnce = true,
+    easing: easing2 = "ease-out",
+    autoStart = true,
+    initialOpacity = 0,
+    targetOpacity = 1,
+    onComplete,
+    onStart,
+    onStop,
+    onReset
+  } = options;
+  const ref = react.useRef(null);
+  const [isVisible, setIsVisible] = react.useState(false);
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const [progress, setProgress] = react.useState(0);
+  const [nodeReady, setNodeReady] = react.useState(false);
+  const observerRef = react.useRef(null);
+  const motionRef = react.useRef(null);
+  const timeoutRef = react.useRef(null);
+  const startRef = react.useRef(() => {
+  });
+  react.useEffect(() => {
+    if (nodeReady) return;
+    if (ref.current) {
+      setNodeReady(true);
+      return;
+    }
+    const id = setInterval(() => {
+      if (ref.current) {
+        setNodeReady(true);
+        clearInterval(id);
+      }
+    }, 50);
+    return () => clearInterval(id);
+  }, [nodeReady]);
+  const start = react.useCallback(() => {
+    if (isAnimating) return;
+    setIsAnimating(true);
+    setProgress(0);
+    onStart?.();
+    if (delay > 0) {
+      timeoutRef.current = window.setTimeout(() => {
+        setIsVisible(true);
+        setProgress(1);
+        setIsAnimating(false);
+        onComplete?.();
+      }, delay);
+    } else {
+      setIsVisible(true);
+      setProgress(1);
+      setIsAnimating(false);
+      onComplete?.();
+    }
+  }, [delay, isAnimating, onStart, onComplete]);
+  startRef.current = start;
+  const stop = react.useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    if (motionRef.current) {
+      cancelAnimationFrame(motionRef.current);
+      motionRef.current = null;
+    }
+    setIsAnimating(false);
+    onStop?.();
+  }, [onStop]);
+  const reset = react.useCallback(() => {
+    stop();
+    setIsVisible(false);
+    setProgress(0);
+    onReset?.();
+  }, [stop, onReset]);
+  react.useEffect(() => {
+    if (!ref.current || !autoStart) return;
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            startRef.current();
+            if (triggerOnce) {
+              observerRef.current?.disconnect();
+            }
+          }
+        });
+      },
+      { threshold }
+    );
+    observerRef.current.observe(ref.current);
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [autoStart, threshold, triggerOnce, nodeReady]);
+  react.useEffect(() => {
+    if (!autoStart) {
+      start();
+    }
+  }, [autoStart, start]);
+  react.useEffect(() => {
+    return () => {
+      stop();
+    };
+  }, [stop]);
+  const style = react.useMemo(() => ({
+    opacity: isVisible ? targetOpacity : initialOpacity,
+    transition: `opacity ${duration}ms ${easing2}`,
+    "--motion-delay": `${delay}ms`,
+    "--motion-duration": `${duration}ms`,
+    "--motion-easing": easing2,
+    "--motion-progress": `${progress}`
+  }), [isVisible, targetOpacity, initialOpacity, duration, easing2, delay, progress]);
+  return {
+    ref,
+    isVisible,
+    isAnimating,
+    style,
+    progress,
+    start,
+    stop,
+    reset
+  };
+}
+function useSlideUp(options = {}) {
+  const {
+    delay = 0,
+    duration = 700,
+    threshold = 0.1,
+    triggerOnce = true,
+    easing: easing2 = "ease-out",
+    autoStart = true,
+    direction = "up",
+    distance = 50,
+    onComplete,
+    onStart,
+    onStop,
+    onReset
+  } = options;
+  const ref = react.useRef(null);
+  const [isVisible, setIsVisible] = react.useState(false);
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const [progress, setProgress] = react.useState(0);
+  const [nodeReady, setNodeReady] = react.useState(false);
+  const observerRef = react.useRef(null);
+  const timeoutRef = react.useRef(null);
+  const startRef = react.useRef(() => {
+  });
+  react.useEffect(() => {
+    if (nodeReady) return;
+    if (ref.current) {
+      setNodeReady(true);
+      return;
+    }
+    const id = setInterval(() => {
+      if (ref.current) {
+        setNodeReady(true);
+        clearInterval(id);
+      }
+    }, 50);
+    return () => clearInterval(id);
+  }, [nodeReady]);
+  const getInitialTransform = react.useCallback(() => {
+    switch (direction) {
+      case "up":
+        return `translateY(${distance}px)`;
+      case "down":
+        return `translateY(-${distance}px)`;
+      case "left":
+        return `translateX(${distance}px)`;
+      case "right":
+        return `translateX(-${distance}px)`;
+      default:
+        return `translateY(${distance}px)`;
+    }
+  }, [direction, distance]);
+  const start = react.useCallback(() => {
+    if (isAnimating) return;
+    setIsAnimating(true);
+    setProgress(0);
+    onStart?.();
+    if (delay > 0) {
+      timeoutRef.current = window.setTimeout(() => {
+        setIsVisible(true);
+        setProgress(1);
+        setIsAnimating(false);
+        onComplete?.();
+      }, delay);
+    } else {
+      setIsVisible(true);
+      setProgress(1);
+      setIsAnimating(false);
+      onComplete?.();
+    }
+  }, [delay, isAnimating, onStart, onComplete]);
+  startRef.current = start;
+  const stop = react.useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setIsAnimating(false);
+    onStop?.();
+  }, [onStop]);
+  const reset = react.useCallback(() => {
+    stop();
+    setIsVisible(false);
+    setProgress(0);
+    onReset?.();
+  }, [stop, onReset]);
+  react.useEffect(() => {
+    if (!ref.current || !autoStart) return;
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            startRef.current();
+            if (triggerOnce) {
+              observerRef.current?.disconnect();
+            }
+          }
+        });
+      },
+      { threshold }
+    );
+    observerRef.current.observe(ref.current);
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [autoStart, threshold, triggerOnce, nodeReady]);
+  react.useEffect(() => {
+    if (!autoStart) {
+      start();
+    }
+  }, [autoStart, start]);
+  react.useEffect(() => {
+    return () => {
+      stop();
+    };
+  }, [stop]);
+  const initialTransform = react.useMemo(() => getInitialTransform(), [getInitialTransform]);
+  const finalTransform = react.useMemo(() => {
+    return direction === "left" || direction === "right" ? "translateX(0)" : "translateY(0)";
+  }, [direction]);
+  const style = react.useMemo(() => ({
+    opacity: isVisible ? 1 : 0,
+    transform: isVisible ? finalTransform : initialTransform,
+    transition: `opacity ${duration}ms ${easing2}, transform ${duration}ms ${easing2}`,
+    "--motion-delay": `${delay}ms`,
+    "--motion-duration": `${duration}ms`,
+    "--motion-easing": easing2,
+    "--motion-progress": `${progress}`,
+    "--motion-direction": direction,
+    "--motion-distance": `${distance}px`
+  }), [isVisible, initialTransform, finalTransform, duration, easing2, delay, progress, direction, distance]);
+  return {
+    ref,
+    isVisible,
+    isAnimating,
+    style,
+    progress,
+    start,
+    stop,
+    reset
+  };
+}
+
+// src/hooks/useSlideLeft.ts
+function useSlideLeft(options = {}) {
+  return useSlideUp({ ...options, direction: "left" });
+}
+
+// src/hooks/useSlideRight.ts
+function useSlideRight(options = {}) {
+  return useSlideUp({ ...options, direction: "right" });
+}
+function useScaleIn(options = {}) {
+  const {
+    initialScale = 0,
+    targetScale = 1,
+    duration = 700,
+    delay = 0,
+    autoStart = true,
+    easing: easing2 = "ease-out",
+    threshold = 0.1,
+    triggerOnce = true,
+    onComplete,
+    onStart,
+    onStop,
+    onReset
+  } = options;
+  const ref = react.useRef(null);
+  const [scale, setScale] = react.useState(autoStart ? initialScale : targetScale);
+  const [opacity, setOpacity] = react.useState(autoStart ? 0 : 1);
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const [isVisible, setIsVisible] = react.useState(autoStart ? false : true);
+  const [progress, setProgress] = react.useState(autoStart ? 0 : 1);
+  const observerRef = react.useRef(null);
+  const timeoutRef = react.useRef(null);
+  const startRef = react.useRef(() => {
+  });
+  const start = react.useCallback(() => {
+    if (isAnimating) return;
+    setIsAnimating(true);
+    setScale(initialScale);
+    setOpacity(0);
+    setProgress(0);
+    onStart?.();
+    timeoutRef.current = window.setTimeout(() => {
+      setProgress(1);
+      setScale(targetScale);
+      setOpacity(1);
+      setIsVisible(true);
+      setIsAnimating(false);
+      onComplete?.();
+    }, delay);
+  }, [delay, initialScale, targetScale, isAnimating, onStart, onComplete]);
+  startRef.current = start;
+  const stop = react.useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setIsAnimating(false);
+    onStop?.();
+  }, [onStop]);
+  const reset = react.useCallback(() => {
+    stop();
+    setScale(initialScale);
+    setOpacity(0);
+    setProgress(0);
+    setIsVisible(false);
+    if (ref.current) {
+      const element = ref.current;
+      element.style.transition = "none";
+      element.style.opacity = "0";
+      element.style.transform = `scale(${initialScale})`;
+      requestAnimationFrame(() => {
+        element.style.transition = "";
+      });
+    }
+    onReset?.();
+  }, [stop, initialScale, onReset]);
+  react.useEffect(() => {
+    if (!ref.current || !autoStart) return;
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            startRef.current();
+            if (triggerOnce) {
+              observerRef.current?.disconnect();
+            }
+          }
+        });
+      },
+      { threshold }
+    );
+    observerRef.current.observe(ref.current);
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [autoStart, threshold, triggerOnce]);
+  react.useEffect(() => {
+    return () => {
+      stop();
+    };
+  }, [stop]);
+  const style = react.useMemo(() => ({
+    transform: `scale(${scale})`,
+    opacity,
+    transition: `all ${duration}ms ${easing2}`,
+    "--motion-delay": `${delay}ms`,
+    "--motion-duration": `${duration}ms`,
+    "--motion-easing": easing2,
+    "--motion-progress": `${progress}`
+  }), [scale, opacity, duration, easing2, delay, progress]);
+  return {
+    ref,
+    isVisible,
+    isAnimating,
+    style,
+    progress,
+    start,
+    reset,
+    stop
+  };
+}
+function useBounceIn(options = {}) {
+  const {
+    duration = 600,
+    delay = 0,
+    autoStart = true,
+    intensity = 0.3,
+    threshold = 0.1,
+    triggerOnce = true,
+    easing: easing2 = "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    // 바운스 이징
+    onComplete,
+    onStart,
+    onStop,
+    onReset
+  } = options;
+  const ref = react.useRef(null);
+  const [scale, setScale] = react.useState(autoStart ? 0 : 1);
+  const [opacity, setOpacity] = react.useState(autoStart ? 0 : 1);
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const [isVisible, setIsVisible] = react.useState(autoStart ? false : true);
+  const [progress, setProgress] = react.useState(autoStart ? 0 : 1);
+  const observerRef = react.useRef(null);
+  const timeoutRef = react.useRef(null);
+  const bounceTimeoutRef = react.useRef(null);
+  const startRef = react.useRef(() => {
+  });
+  const start = react.useCallback(() => {
+    if (isAnimating) return;
+    setIsAnimating(true);
+    setScale(0);
+    setOpacity(0);
+    setProgress(0);
+    onStart?.();
+    timeoutRef.current = window.setTimeout(() => {
+      setProgress(0.5);
+      setScale(1 + intensity);
+      setOpacity(1);
+      bounceTimeoutRef.current = window.setTimeout(() => {
+        setProgress(1);
+        setScale(1);
+        setIsVisible(true);
+        setIsAnimating(false);
+        onComplete?.();
+      }, duration * 0.3);
+    }, delay);
+  }, [delay, intensity, duration, isAnimating, onStart, onComplete]);
+  startRef.current = start;
+  const stop = react.useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    if (bounceTimeoutRef.current) {
+      clearTimeout(bounceTimeoutRef.current);
+      bounceTimeoutRef.current = null;
+    }
+    setIsAnimating(false);
+    onStop?.();
+  }, [onStop]);
+  const reset = react.useCallback(() => {
+    stop();
+    setScale(0);
+    setOpacity(0);
+    setProgress(0);
+    setIsVisible(false);
+    if (ref.current) {
+      const element = ref.current;
+      element.style.transition = "none";
+      element.style.opacity = "0";
+      element.style.transform = "scale(0)";
+      requestAnimationFrame(() => {
+        element.style.transition = "";
+      });
+    }
+    onReset?.();
+  }, [stop, onReset]);
+  react.useEffect(() => {
+    if (!ref.current || !autoStart) return;
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            startRef.current();
+            if (triggerOnce) {
+              observerRef.current?.disconnect();
+            }
+          }
+        });
+      },
+      { threshold }
+    );
+    observerRef.current.observe(ref.current);
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [autoStart, threshold, triggerOnce]);
+  react.useEffect(() => {
+    return () => {
+      stop();
+    };
+  }, [stop]);
+  const style = react.useMemo(() => ({
+    transform: `scale(${scale})`,
+    opacity,
+    transition: `all ${duration}ms ${easing2}`,
+    "--motion-delay": `${delay}ms`,
+    "--motion-duration": `${duration}ms`,
+    "--motion-easing": easing2,
+    "--motion-progress": `${progress}`
+  }), [scale, opacity, duration, easing2, delay, progress]);
+  return {
+    ref,
+    isVisible,
+    isAnimating,
+    style,
+    progress,
+    start,
+    reset,
+    stop
+  };
+}
+
+// src/utils/easing.ts
+var linear = (t) => t;
+var easeIn = (t) => t * t;
+var easeOut = (t) => 1 - (1 - t) * (1 - t);
+var easeInOut = (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+var easeInQuad = (t) => t * t;
+var easeOutQuad = (t) => 1 - (1 - t) * (1 - t);
+var easeInOutQuad = (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+var easeInCubic = (t) => t * t * t;
+var easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
+var easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+var easeInQuart = (t) => t * t * t * t;
+var easeOutQuart = (t) => 1 - Math.pow(1 - t, 4);
+var easeInOutQuart = (t) => t < 0.5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2;
+var easeInQuint = (t) => t * t * t * t * t;
+var easeOutQuint = (t) => 1 - Math.pow(1 - t, 5);
+var easeInOutQuint = (t) => t < 0.5 ? 16 * t * t * t * t * t : 1 - Math.pow(-2 * t + 2, 5) / 2;
+var easeInSine = (t) => 1 - Math.cos(t * Math.PI / 2);
+var easeOutSine = (t) => Math.sin(t * Math.PI / 2);
+var easeInOutSine = (t) => -(Math.cos(Math.PI * t) - 1) / 2;
+var easeInExpo = (t) => t === 0 ? 0 : Math.pow(2, 10 * t - 10);
+var easeOutExpo = (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+var easeInOutExpo = (t) => {
+  if (t === 0) return 0;
+  if (t === 1) return 1;
+  if (t < 0.5) return Math.pow(2, 20 * t - 10) / 2;
+  return (2 - Math.pow(2, -20 * t + 10)) / 2;
+};
+var easeInCirc = (t) => 1 - Math.sqrt(1 - Math.pow(t, 2));
+var easeOutCirc = (t) => Math.sqrt(1 - Math.pow(t - 1, 2));
+var easeInOutCirc = (t) => {
+  if (t < 0.5) return (1 - Math.sqrt(1 - Math.pow(2 * t, 2))) / 2;
+  return (Math.sqrt(1 - Math.pow(-2 * t + 2, 2)) + 1) / 2;
+};
+var easeInBounce = (t) => 1 - easeOutBounce(1 - t);
+var easeOutBounce = (t) => {
+  const n1 = 7.5625;
+  const d1 = 2.75;
+  if (t < 1 / d1) {
+    return n1 * t * t;
+  } else if (t < 2 / d1) {
+    return n1 * (t -= 1.5 / d1) * t + 0.75;
+  } else if (t < 2.5 / d1) {
+    return n1 * (t -= 2.25 / d1) * t + 0.9375;
+  } else {
+    return n1 * (t -= 2.625 / d1) * t + 0.984375;
+  }
+};
+var easeInOutBounce = (t) => {
+  if (t < 0.5) return (1 - easeOutBounce(1 - 2 * t)) / 2;
+  return (1 + easeOutBounce(2 * t - 1)) / 2;
+};
+var easeInBack = (t) => {
+  const c1 = 1.70158;
+  const c3 = c1 + 1;
+  return c3 * t * t * t - c1 * t * t;
+};
+var easeOutBack = (t) => {
+  const c1 = 1.70158;
+  const c3 = c1 + 1;
+  return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+};
+var easeInOutBack = (t) => {
+  const c1 = 1.70158;
+  const c2 = c1 * 1.525;
+  if (t < 0.5) {
+    return Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2) / 2;
+  } else {
+    return (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2;
+  }
+};
+var easeInElastic = (t) => {
+  const c4 = 2 * Math.PI / 3;
+  if (t === 0) return 0;
+  if (t === 1) return 1;
+  return -Math.pow(2, 10 * t - 10) * Math.sin((t * 10 - 0.75) * c4);
+};
+var easeOutElastic = (t) => {
+  const c4 = 2 * Math.PI / 3;
+  if (t === 0) return 0;
+  if (t === 1) return 1;
+  return Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
+};
+var easeInOutElastic = (t) => {
+  const c5 = 2 * Math.PI / 4.5;
+  if (t === 0) return 0;
+  if (t === 1) return 1;
+  if (t < 0.5) {
+    return -(Math.pow(2, 20 * t - 10) * Math.sin((20 * t - 11.125) * c5)) / 2;
+  } else {
+    return Math.pow(2, -20 * t + 10) * Math.sin((20 * t - 11.125) * c5) / 2 + 1;
+  }
+};
+var pulse = (t) => Math.sin(t * Math.PI) * 0.5 + 0.5;
+var pulseSmooth = (t) => Math.sin(t * Math.PI * 2) * 0.3 + 0.7;
+var skeletonWave = (t) => Math.sin((t - 0.5) * Math.PI * 2) * 0.5 + 0.5;
+var blink = (t) => t < 0.5 ? 1 : 0;
+var easing = {
+  linear,
+  easeIn,
+  easeOut,
+  easeInOut,
+  easeInQuad,
+  easeOutQuad,
+  easeInOutQuad,
+  easeInCubic,
+  easeOutCubic,
+  easeInOutCubic,
+  easeInQuart,
+  easeOutQuart,
+  easeInOutQuart,
+  easeInQuint,
+  easeOutQuint,
+  easeInOutQuint,
+  easeInSine,
+  easeOutSine,
+  easeInOutSine,
+  easeInExpo,
+  easeOutExpo,
+  easeInOutExpo,
+  easeInCirc,
+  easeOutCirc,
+  easeInOutCirc,
+  easeInBounce,
+  easeOutBounce,
+  easeInOutBounce,
+  easeInBack,
+  easeOutBack,
+  easeInOutBack,
+  easeInElastic,
+  easeOutElastic,
+  easeInOutElastic,
+  pulse,
+  pulseSmooth,
+  skeletonWave,
+  blink
+};
+function isValidEasing(easingName) {
+  return easingName in easing;
+}
+function getEasing(easingName) {
+  if (typeof easingName === "function") {
+    return easingName;
+  }
+  if (typeof easingName === "string") {
+    if (easingName in easing) {
+      return easing[easingName];
+    }
+    if (easingName === "bounce") {
+      return easing.easeOutBounce;
+    }
+    if (process.env.NODE_ENV === "development") {
+      console.warn(`[HUA Motion] Unknown easing "${easingName}", using default "easeOut".`);
+    }
+  }
+  return easeOut;
+}
+function applyEasing(t, easingName) {
+  const easingFn = getEasing(easingName);
+  return easingFn(t);
+}
+function safeApplyEasing(t, easingName) {
+  try {
+    const easingFn = getEasing(easingName);
+    return easingFn(t);
+  } catch (err) {
+    if (process.env.NODE_ENV === "development") {
+      console.error(`[HUA Motion] Failed to apply easing "${easingName}":`, err);
+    }
+    return easeOut(t);
+  }
+}
+function getAvailableEasings() {
+  return Object.keys(easing);
+}
+function isEasingFunction(value) {
+  return typeof value === "function";
+}
+var easingPresets = {
+  default: "easeOut",
+  smooth: "easeInOutCubic",
+  fast: "easeOutQuad",
+  slow: "easeInOutSine",
+  bouncy: "easeOutBounce",
+  elastic: "easeOutElastic",
+  fade: "easeInOut",
+  scale: "easeOutBack"
+};
+function getPresetEasing(preset) {
+  const easingName = easingPresets[preset];
+  return getEasing(easingName);
+}
+
+// src/hooks/usePulse.ts
+function usePulse(options = {}) {
+  const {
+    duration = 3e3,
+    intensity = 1,
+    repeatCount = Infinity,
+    repeatDelay = 0,
+    autoStart = false
+  } = options;
+  const ref = react.useRef(null);
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const [isVisible, setIsVisible] = react.useState(true);
+  const [progress, setProgress] = react.useState(0);
+  const motionRef = react.useRef(null);
+  const easingFn = react.useMemo(() => getEasing("easeInOut"), []);
+  const start = react.useCallback(() => {
+    if (!ref.current) return;
+    const element = ref.current;
+    let currentRepeat = 0;
+    setIsAnimating(true);
+    const animate = (startTime) => {
+      const updateMotion = (currentTime) => {
+        const elapsed = currentTime - startTime;
+        const rawProgress = Math.min(elapsed / duration, 1);
+        const easedProgress = easingFn(rawProgress);
+        const finalProgress = currentRepeat % 2 === 1 ? 1 - easedProgress : easedProgress;
+        const opacity = 0.3 + 0.7 * finalProgress * intensity;
+        element.style.opacity = opacity.toString();
+        setProgress(rawProgress);
+        if (rawProgress < 1) {
+          motionRef.current = requestAnimationFrame(updateMotion);
+        } else {
+          currentRepeat++;
+          if (repeatCount === Infinity || currentRepeat < repeatCount * 2) {
+            if (repeatDelay > 0) {
+              const delayTimeout = window.setTimeout(() => {
+                motionRef.current = requestAnimationFrame(() => animate(performance.now()));
+              }, repeatDelay);
+              motionRef.current = delayTimeout;
+            } else {
+              motionRef.current = requestAnimationFrame(() => animate(performance.now()));
+            }
+          } else {
+            setIsAnimating(false);
+          }
+        }
+      };
+      motionRef.current = requestAnimationFrame(updateMotion);
+    };
+    animate(performance.now());
+  }, [duration, intensity, repeatCount, repeatDelay, easingFn]);
+  const stop = react.useCallback(() => {
+    if (motionRef.current) {
+      cancelAnimationFrame(motionRef.current);
+      clearTimeout(motionRef.current);
+      motionRef.current = null;
+    }
+    setIsAnimating(false);
+  }, []);
+  const reset = react.useCallback(() => {
+    if (motionRef.current) {
+      cancelAnimationFrame(motionRef.current);
+      clearTimeout(motionRef.current);
+      motionRef.current = null;
+    }
+    setIsAnimating(false);
+    setProgress(0);
+    if (ref.current) {
+      const element = ref.current;
+      element.style.transition = "none";
+      element.style.opacity = "1";
+      requestAnimationFrame(() => {
+        element.style.transition = "";
+      });
+    }
+  }, []);
+  react.useEffect(() => {
+    if (autoStart) {
+      start();
+    }
+  }, [autoStart, start]);
+  react.useEffect(() => {
+    return () => {
+      if (motionRef.current) {
+        cancelAnimationFrame(motionRef.current);
+        clearTimeout(motionRef.current);
+      }
+    };
+  }, []);
+  const style = react.useMemo(() => ({
+    opacity: isAnimating ? 0.3 + 0.7 * progress * intensity : 1,
+    transition: isAnimating ? "none" : "opacity 0.3s ease-in-out"
+  }), [isAnimating, progress, intensity]);
+  return {
+    ref,
+    isVisible,
+    isAnimating,
+    style,
+    progress,
+    start,
+    stop,
+    reset
+  };
+}
+function useSpringMotion(options) {
+  const {
+    from,
+    to,
+    mass = 1,
+    stiffness = 100,
+    damping = 10,
+    restDelta = 0.01,
+    restSpeed = 0.01,
+    onComplete,
+    enabled = true,
+    autoStart = false
+  } = options;
+  const ref = react.useRef(null);
+  const [springState, setSpringState] = react.useState({
+    value: from,
+    velocity: 0,
+    isAnimating: false
+  });
+  const [isVisible, setIsVisible] = react.useState(true);
+  const [progress, setProgress] = react.useState(0);
+  const motionRef = react.useRef(null);
+  const lastTimeRef = react.useRef(0);
+  const calculateSpring = react.useCallback((currentValue, currentVelocity, targetValue, deltaTime) => {
+    const displacement = currentValue - targetValue;
+    const springForce = -stiffness * displacement;
+    const dampingForce = -damping * currentVelocity;
+    const totalForce = springForce + dampingForce;
+    const acceleration = totalForce / mass;
+    const newVelocity = currentVelocity + acceleration * deltaTime;
+    const newValue = currentValue + newVelocity * deltaTime;
+    return { value: newValue, velocity: newVelocity };
+  }, [mass, stiffness, damping]);
+  const animate = react.useCallback((currentTime) => {
+    if (!enabled || !springState.isAnimating) return;
+    const deltaTime = Math.min(currentTime - lastTimeRef.current, 16) / 1e3;
+    lastTimeRef.current = currentTime;
+    const { value, velocity } = calculateSpring(
+      springState.value,
+      springState.velocity,
+      to,
+      deltaTime
+    );
+    const range = Math.abs(to - from);
+    const currentProgress = range > 0 ? Math.min(Math.abs(value - from) / range, 1) : 1;
+    setProgress(currentProgress);
+    const isAtRest = Math.abs(value - to) < restDelta && Math.abs(velocity) < restSpeed;
+    if (isAtRest) {
+      setSpringState({
+        value: to,
+        velocity: 0,
+        isAnimating: false
+      });
+      setProgress(1);
+      onComplete?.();
+      return;
+    }
+    setSpringState({
+      value,
+      velocity,
+      isAnimating: true
+    });
+    motionRef.current = requestAnimationFrame(animate);
+  }, [enabled, springState.isAnimating, to, from, restDelta, restSpeed, onComplete, calculateSpring]);
+  const start = react.useCallback(() => {
+    if (springState.isAnimating) return;
+    setSpringState((prev) => ({
+      ...prev,
+      isAnimating: true
+    }));
+    lastTimeRef.current = performance.now();
+    motionRef.current = requestAnimationFrame(animate);
+  }, [springState.isAnimating, animate]);
+  const stop = react.useCallback(() => {
+    if (motionRef.current) {
+      cancelAnimationFrame(motionRef.current);
+      motionRef.current = null;
+    }
+    setSpringState((prev) => ({
+      ...prev,
+      isAnimating: false
+    }));
+  }, []);
+  const reset = react.useCallback(() => {
+    stop();
+    setSpringState({
+      value: from,
+      velocity: 0,
+      isAnimating: false
+    });
+    setProgress(0);
+    motionRef.current = null;
+  }, [from, stop]);
+  react.useEffect(() => {
+    if (autoStart) {
+      start();
+    }
+  }, [autoStart, start]);
+  react.useEffect(() => {
+    return () => {
+      if (motionRef.current) {
+        cancelAnimationFrame(motionRef.current);
+      }
+    };
+  }, []);
+  const style = react.useMemo(() => ({
+    "--motion-progress": `${progress}`,
+    "--motion-value": `${springState.value}`
+  }), [progress, springState.value]);
+  return {
+    ref,
+    isVisible,
+    isAnimating: springState.isAnimating,
+    style,
+    progress,
+    value: springState.value,
+    velocity: springState.velocity,
+    start,
+    stop,
+    reset
+  };
+}
+var defaultColors = ["#60a5fa", "#34d399", "#fbbf24", "#f87171"];
+var keyframesInjected = false;
+function ensureGradientKeyframes() {
+  if (typeof document === "undefined" || keyframesInjected) return;
+  const name = "gradientShift";
+  if (!document.head.querySelector(`style[data-gradient="${name}"]`)) {
+    const style = document.createElement("style");
+    style.setAttribute("data-gradient", name);
+    style.textContent = `
+      @keyframes ${name} {
+        0%, 100% { background-position: 0% 50%; }
+        50% { background-position: 100% 50%; }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+  keyframesInjected = true;
+}
+function useGradient(options = {}) {
+  const {
+    colors = defaultColors,
+    duration = 6e3,
+    direction = "diagonal",
+    size = 300,
+    easing: easing2 = "ease-in-out",
+    autoStart = false
+  } = options;
+  const ref = react.useRef(null);
+  const [isAnimating, setIsAnimating] = react.useState(autoStart);
+  const [isVisible, setIsVisible] = react.useState(true);
+  const [motionProgress, setMotionProgress] = react.useState(0);
+  react.useEffect(() => {
+    ensureGradientKeyframes();
+  }, []);
+  const style = react.useMemo(() => {
+    const gradientDirection = direction === "horizontal" ? "90deg" : direction === "vertical" ? "180deg" : "135deg";
+    const background = `linear-gradient(${gradientDirection}, ${colors.join(", ")})`;
+    const backgroundSize = `${size}% ${size}%`;
+    return {
+      background,
+      backgroundSize,
+      animation: isAnimating ? `gradientShift ${duration}ms ${easing2} infinite` : "none",
+      backgroundPosition: isAnimating ? void 0 : `${motionProgress}% 50%`
+    };
+  }, [colors, direction, size, duration, easing2, isAnimating, motionProgress]);
+  const start = react.useCallback(() => {
+    setIsAnimating(true);
+  }, []);
+  const pause = react.useCallback(() => {
+    setIsAnimating(false);
+  }, []);
+  const resume = react.useCallback(() => {
+    setIsAnimating(true);
+  }, []);
+  const reset = react.useCallback(() => {
+    setIsAnimating(false);
+    setMotionProgress(0);
+  }, []);
+  const stop = react.useCallback(() => {
+    setIsAnimating(false);
+  }, []);
+  react.useEffect(() => {
+    if (!isAnimating) {
+      const interval = setInterval(() => {
+        setMotionProgress((prev) => {
+          const newProgress = prev + 100 / (duration / 16);
+          return newProgress >= 100 ? 0 : newProgress;
+        });
+      }, 16);
+      return () => clearInterval(interval);
+    }
+  }, [isAnimating, duration]);
+  react.useEffect(() => {
+    setIsAnimating(autoStart);
+  }, [autoStart]);
+  return {
+    ref,
+    isVisible,
+    isAnimating,
+    style,
+    progress: motionProgress / 100,
+    start,
+    pause,
+    resume,
+    reset,
+    stop
+  };
+}
+function useHoverMotion(options = {}) {
+  const {
+    duration = 200,
+    easing: easing2 = "ease-out",
+    hoverScale = 1.05,
+    hoverY = -2,
+    hoverOpacity = 1
+  } = options;
+  const ref = react.useRef(null);
+  const [isHovered, setIsHovered] = react.useState(false);
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  react.useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const handleMouseEnter = () => {
+      setIsHovered(true);
+      setIsAnimating(true);
+    };
+    const handleMouseLeave = () => {
+      setIsHovered(false);
+      setIsAnimating(true);
+    };
+    const handleTransitionEnd = () => {
+      setIsAnimating(false);
+    };
+    element.addEventListener("mouseenter", handleMouseEnter);
+    element.addEventListener("mouseleave", handleMouseLeave);
+    element.addEventListener("transitionend", handleTransitionEnd);
+    return () => {
+      element.removeEventListener("mouseenter", handleMouseEnter);
+      element.removeEventListener("mouseleave", handleMouseLeave);
+      element.removeEventListener("transitionend", handleTransitionEnd);
+    };
+  }, []);
+  const style = react.useMemo(() => ({
+    transform: isHovered ? `scale(${hoverScale}) translateY(${hoverY}px)` : "scale(1) translateY(0px)",
+    opacity: isHovered ? hoverOpacity : 1,
+    transition: `transform ${duration}ms ${easing2}, opacity ${duration}ms ${easing2}`
+  }), [isHovered, hoverScale, hoverY, hoverOpacity, duration, easing2]);
+  const start = react.useCallback(() => {
+    setIsHovered(true);
+    setIsAnimating(true);
+  }, []);
+  const stop = react.useCallback(() => {
+    setIsAnimating(false);
+  }, []);
+  const reset = react.useCallback(() => {
+    setIsHovered(false);
+    setIsAnimating(false);
+  }, []);
+  return {
+    ref,
+    isVisible: true,
+    isAnimating,
+    isHovered,
+    style,
+    progress: isHovered ? 1 : 0,
+    start,
+    stop,
+    reset
+  };
+}
+function useClickToggle(options = {}) {
+  const {
+    initialState = false,
+    toggleOnClick = true,
+    toggleOnDoubleClick = false,
+    toggleOnRightClick = false,
+    toggleOnEnter = true,
+    toggleOnSpace = true,
+    autoReset = false,
+    resetDelay = 3e3,
+    preventDefault = false,
+    stopPropagation = false,
+    showOnMount = false
+  } = options;
+  const [isActive, setIsActive] = react.useState(showOnMount ? initialState : false);
+  const [mounted, setMounted] = react.useState(false);
+  const resetTimeoutRef = react.useRef(null);
+  react.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const startResetTimer = react.useCallback(() => {
+    if (!autoReset || resetDelay <= 0) return;
+    if (resetTimeoutRef.current !== null) {
+      clearTimeout(resetTimeoutRef.current);
+    }
+    resetTimeoutRef.current = window.setTimeout(() => {
+      setIsActive(false);
+      resetTimeoutRef.current = null;
+    }, resetDelay);
+  }, [autoReset, resetDelay]);
+  const toggle = react.useCallback(() => {
+    if (!mounted) return;
+    setIsActive((prev) => {
+      const newState = !prev;
+      if (newState && autoReset) {
+        startResetTimer();
+      } else if (!newState && resetTimeoutRef.current !== null) {
+        clearTimeout(resetTimeoutRef.current);
+        resetTimeoutRef.current = null;
+      }
+      return newState;
+    });
+  }, [mounted, autoReset, startResetTimer]);
+  const activate = react.useCallback(() => {
+    if (!mounted || isActive) return;
+    setIsActive(true);
+    if (autoReset) {
+      startResetTimer();
+    }
+  }, [mounted, isActive, autoReset, startResetTimer]);
+  const deactivate = react.useCallback(() => {
+    if (!mounted || !isActive) return;
+    setIsActive(false);
+    if (resetTimeoutRef.current !== null) {
+      clearTimeout(resetTimeoutRef.current);
+      resetTimeoutRef.current = null;
+    }
+  }, [mounted, isActive]);
+  const reset = react.useCallback(() => {
+    setIsActive(initialState);
+    if (resetTimeoutRef.current !== null) {
+      clearTimeout(resetTimeoutRef.current);
+      resetTimeoutRef.current = null;
+    }
+  }, [initialState]);
+  const handleClick = react.useCallback((event) => {
+    if (!toggleOnClick) return;
+    if (preventDefault) event.preventDefault();
+    if (stopPropagation) event.stopPropagation();
+    toggle();
+  }, [toggleOnClick, preventDefault, stopPropagation, toggle]);
+  const handleDoubleClick = react.useCallback((event) => {
+    if (!toggleOnDoubleClick) return;
+    if (preventDefault) event.preventDefault();
+    if (stopPropagation) event.stopPropagation();
+    toggle();
+  }, [toggleOnDoubleClick, preventDefault, stopPropagation, toggle]);
+  const handleContextMenu = react.useCallback((event) => {
+    if (!toggleOnRightClick) return;
+    if (preventDefault) event.preventDefault();
+    if (stopPropagation) event.stopPropagation();
+    toggle();
+  }, [toggleOnRightClick, preventDefault, stopPropagation, toggle]);
+  const handleKeyDown = react.useCallback((event) => {
+    const shouldToggle = event.key === "Enter" && toggleOnEnter || event.key === " " && toggleOnSpace;
+    if (!shouldToggle) return;
+    if (preventDefault) event.preventDefault();
+    if (stopPropagation) event.stopPropagation();
+    toggle();
+  }, [toggleOnEnter, toggleOnSpace, preventDefault, stopPropagation, toggle]);
+  react.useEffect(() => {
+    return () => {
+      if (resetTimeoutRef.current !== null) {
+        clearTimeout(resetTimeoutRef.current);
+      }
+    };
+  }, []);
+  const clickHandlers = {
+    ...toggleOnClick && { onClick: handleClick },
+    ...toggleOnDoubleClick && { onDoubleClick: handleDoubleClick },
+    ...toggleOnRightClick && { onContextMenu: handleContextMenu },
+    ...(toggleOnEnter || toggleOnSpace) && { onKeyDown: handleKeyDown }
+  };
+  return {
+    isActive,
+    mounted,
+    toggle,
+    activate,
+    deactivate,
+    reset,
+    clickHandlers
+  };
+}
+function useFocusToggle(options = {}) {
+  const {
+    initialState = false,
+    toggleOnFocus = true,
+    toggleOnBlur = false,
+    toggleOnFocusIn = false,
+    toggleOnFocusOut = false,
+    autoReset = false,
+    resetDelay = 3e3,
+    preventDefault = false,
+    stopPropagation = false,
+    showOnMount = false
+  } = options;
+  const [isActive, setIsActive] = react.useState(showOnMount ? initialState : false);
+  const [mounted, setMounted] = react.useState(false);
+  const resetTimeoutRef = react.useRef(null);
+  const elementRef = react.useRef(null);
+  react.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const startResetTimer = react.useCallback(() => {
+    if (!autoReset || resetDelay <= 0) return;
+    if (resetTimeoutRef.current !== null) {
+      clearTimeout(resetTimeoutRef.current);
+    }
+    resetTimeoutRef.current = window.setTimeout(() => {
+      setIsActive(false);
+      resetTimeoutRef.current = null;
+    }, resetDelay);
+  }, [autoReset, resetDelay]);
+  const toggle = react.useCallback(() => {
+    if (!mounted) return;
+    setIsActive((prev) => {
+      const newState = !prev;
+      if (newState && autoReset) {
+        startResetTimer();
+      } else if (!newState && resetTimeoutRef.current !== null) {
+        clearTimeout(resetTimeoutRef.current);
+        resetTimeoutRef.current = null;
+      }
+      return newState;
+    });
+  }, [mounted, autoReset, startResetTimer]);
+  const activate = react.useCallback(() => {
+    if (!mounted || isActive) return;
+    setIsActive(true);
+    if (autoReset) {
+      startResetTimer();
+    }
+  }, [mounted, isActive, autoReset, startResetTimer]);
+  const deactivate = react.useCallback(() => {
+    if (!mounted || !isActive) return;
+    setIsActive(false);
+    if (resetTimeoutRef.current !== null) {
+      clearTimeout(resetTimeoutRef.current);
+      resetTimeoutRef.current = null;
+    }
+  }, [mounted, isActive]);
+  const reset = react.useCallback(() => {
+    setIsActive(initialState);
+    if (resetTimeoutRef.current !== null) {
+      clearTimeout(resetTimeoutRef.current);
+      resetTimeoutRef.current = null;
+    }
+  }, [initialState]);
+  const handleFocus = react.useCallback((event) => {
+    if (!toggleOnFocus) return;
+    if (preventDefault) event.preventDefault();
+    if (stopPropagation) event.stopPropagation();
+    activate();
+  }, [toggleOnFocus, preventDefault, stopPropagation, activate]);
+  const handleBlur = react.useCallback((event) => {
+    if (!toggleOnBlur) return;
+    if (preventDefault) event.preventDefault();
+    if (stopPropagation) event.stopPropagation();
+    deactivate();
+  }, [toggleOnBlur, preventDefault, stopPropagation, deactivate]);
+  const handleFocusIn = react.useCallback((event) => {
+    if (!toggleOnFocusIn) return;
+    if (preventDefault) event.preventDefault();
+    if (stopPropagation) event.stopPropagation();
+    activate();
+  }, [toggleOnFocusIn, preventDefault, stopPropagation, activate]);
+  const handleFocusOut = react.useCallback((event) => {
+    if (!toggleOnFocusOut) return;
+    if (preventDefault) event.preventDefault();
+    if (stopPropagation) event.stopPropagation();
+    deactivate();
+  }, [toggleOnFocusOut, preventDefault, stopPropagation, deactivate]);
+  react.useEffect(() => {
+    return () => {
+      if (resetTimeoutRef.current !== null) {
+        clearTimeout(resetTimeoutRef.current);
+      }
+    };
+  }, []);
+  const focusHandlers = {
+    ...toggleOnFocus && { onFocus: handleFocus },
+    ...toggleOnBlur && { onBlur: handleBlur },
+    ...toggleOnFocusIn && { onFocusIn: handleFocusIn },
+    ...toggleOnFocusOut && { onFocusOut: handleFocusOut }
+  };
+  return {
+    isActive,
+    mounted,
+    toggle,
+    activate,
+    deactivate,
+    reset,
+    focusHandlers,
+    ref: elementRef
+  };
+}
+function useScrollReveal(options = {}) {
+  const {
+    threshold = 0.1,
+    rootMargin = "0px",
+    triggerOnce = true,
+    delay = 0,
+    duration = 700,
+    easing: easing2 = "ease-out",
+    motionType = "fadeIn",
+    onComplete,
+    onStart,
+    onStop,
+    onReset
+  } = options;
+  const ref = react.useRef(null);
+  const [isVisible, setIsVisible] = react.useState(false);
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const [hasTriggered, setHasTriggered] = react.useState(false);
+  const [progress, setProgress] = react.useState(0);
+  const observerCallback = react.useCallback((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting && (!triggerOnce || !hasTriggered)) {
+        setIsAnimating(true);
+        onStart?.();
+        setTimeout(() => {
+          setIsVisible(true);
+          setHasTriggered(true);
+          setProgress(1);
+          setIsAnimating(false);
+          onComplete?.();
+        }, delay);
+      }
+    });
+  }, [triggerOnce, hasTriggered, delay, onStart, onComplete]);
+  react.useEffect(() => {
+    if (!ref.current) return;
+    const observer = new IntersectionObserver(observerCallback, {
+      threshold,
+      rootMargin
+    });
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [observerCallback, threshold, rootMargin]);
+  const style = react.useMemo(() => {
+    const baseTransition = `all ${duration}ms ${easing2}`;
+    if (!isVisible) {
+      switch (motionType) {
+        case "fadeIn":
+          return {
+            opacity: 0,
+            transition: baseTransition
+          };
+        case "slideUp":
+          return {
+            opacity: 0,
+            transform: "translateY(32px)",
+            transition: baseTransition
+          };
+        case "slideLeft":
+          return {
+            opacity: 0,
+            transform: "translateX(-32px)",
+            transition: baseTransition
+          };
+        case "slideRight":
+          return {
+            opacity: 0,
+            transform: "translateX(32px)",
+            transition: baseTransition
+          };
+        case "scaleIn":
+          return {
+            opacity: 0,
+            transform: "scale(0.95)",
+            transition: baseTransition
+          };
+        case "bounceIn":
+          return {
+            opacity: 0,
+            transform: "scale(0.75)",
+            transition: baseTransition
+          };
+        default:
+          return {
+            opacity: 0,
+            transition: baseTransition
+          };
+      }
+    }
+    return {
+      opacity: 1,
+      transform: "none",
+      transition: baseTransition
+    };
+  }, [isVisible, motionType, duration, easing2]);
+  const start = react.useCallback(() => {
+    setIsAnimating(true);
+    onStart?.();
+    setTimeout(() => {
+      setIsVisible(true);
+      setProgress(1);
+      setIsAnimating(false);
+      onComplete?.();
+    }, delay);
+  }, [delay, onStart, onComplete]);
+  const reset = react.useCallback(() => {
+    setIsVisible(false);
+    setIsAnimating(false);
+    setProgress(0);
+    setHasTriggered(false);
+    onReset?.();
+  }, [onReset]);
+  const stop = react.useCallback(() => {
+    setIsAnimating(false);
+    onStop?.();
+  }, [onStop]);
+  return {
+    ref,
+    isVisible,
+    isAnimating,
+    progress,
+    style,
+    start,
+    reset,
+    stop
+  };
+}
+function useScrollProgress(options = {}) {
+  const {
+    target,
+    offset = 0,
+    showOnMount = false
+  } = options;
+  const [progress, setProgress] = react.useState(showOnMount ? 0 : 0);
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => {
+    setMounted(true);
+  }, []);
+  react.useEffect(() => {
+    if (!mounted) return;
+    const calculateProgress = () => {
+      if (typeof window !== "undefined") {
+        const scrollTop = window.pageYOffset;
+        const scrollHeight = target || document.documentElement.scrollHeight - window.innerHeight;
+        const adjustedScrollTop = Math.max(0, scrollTop - offset);
+        const progressPercent = Math.min(100, Math.max(0, adjustedScrollTop / scrollHeight * 100));
+        setProgress(progressPercent);
+      }
+    };
+    calculateProgress();
+    window.addEventListener("scroll", calculateProgress, { passive: true });
+    window.addEventListener("resize", calculateProgress, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", calculateProgress);
+      window.removeEventListener("resize", calculateProgress);
+    };
+  }, [target, offset, mounted]);
+  return {
+    progress,
+    mounted
+  };
+}
+function useMotionState(options = {}) {
+  const {
+    initialState = "idle",
+    autoPlay,
+    autoStart = autoPlay ?? false,
+    loop = false,
+    direction = "forward",
+    duration = 1e3,
+    delay = 0,
+    showOnMount = false
+  } = options;
+  const [state, setState] = react.useState(showOnMount ? initialState : "idle");
+  const [currentDirection, setCurrentDirection] = react.useState(direction);
+  const [progress, setProgress] = react.useState(0);
+  const [elapsed, setElapsed] = react.useState(0);
+  const [mounted, setMounted] = react.useState(false);
+  const motionRef = react.useRef(null);
+  const startTimeRef = react.useRef(null);
+  const pauseTimeRef = react.useRef(null);
+  const totalPausedTimeRef = react.useRef(0);
+  react.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const animate = react.useCallback((timestamp) => {
+    if (!startTimeRef.current) {
+      startTimeRef.current = timestamp;
+    }
+    const adjustedTimestamp = timestamp - totalPausedTimeRef.current;
+    const elapsedTime = adjustedTimestamp - startTimeRef.current;
+    const newElapsed = Math.max(0, elapsedTime - delay);
+    setElapsed(newElapsed);
+    let newProgress = 0;
+    if (newElapsed >= 0) {
+      newProgress = Math.min(100, newElapsed / duration * 100);
+    }
+    if (currentDirection === "reverse") {
+      newProgress = 100 - newProgress;
+    } else if (currentDirection === "alternate") {
+      const cycle = Math.floor(newElapsed / duration);
+      const cycleProgress = newElapsed % duration / duration;
+      newProgress = cycle % 2 === 0 ? cycleProgress * 100 : (1 - cycleProgress) * 100;
+    }
+    setProgress(newProgress);
+    if (newElapsed >= duration) {
+      if (loop) {
+        startTimeRef.current = timestamp || performance.now();
+        totalPausedTimeRef.current = 0;
+        setElapsed(0);
+        setProgress(currentDirection === "reverse" ? 100 : 0);
+      } else {
+        setState("completed");
+        setProgress(currentDirection === "reverse" ? 0 : 100);
+        if (motionRef.current) {
+          cancelAnimationFrame(motionRef.current);
+          motionRef.current = null;
+        }
+        return;
+      }
+    }
+    if (state === "playing") {
+      motionRef.current = requestAnimationFrame(animate);
+    }
+  }, [state, duration, delay, loop, currentDirection]);
+  const play = react.useCallback(() => {
+    if (!mounted) return;
+    if (state === "completed") {
+      reset();
+    }
+    setState("playing");
+    if (pauseTimeRef.current) {
+      totalPausedTimeRef.current += performance.now() - pauseTimeRef.current;
+      pauseTimeRef.current = null;
+    } else {
+      startTimeRef.current = null;
+      totalPausedTimeRef.current = 0;
+    }
+    if (!motionRef.current) {
+      motionRef.current = requestAnimationFrame(animate);
+    }
+  }, [mounted, state, animate]);
+  const pause = react.useCallback(() => {
+    if (state !== "playing") return;
+    setState("paused");
+    pauseTimeRef.current = performance.now();
+    if (motionRef.current) {
+      cancelAnimationFrame(motionRef.current);
+      motionRef.current = null;
+    }
+  }, [state]);
+  const stop = react.useCallback(() => {
+    setState("idle");
+    setProgress(0);
+    setElapsed(0);
+    startTimeRef.current = null;
+    pauseTimeRef.current = null;
+    totalPausedTimeRef.current = 0;
+    if (motionRef.current) {
+      cancelAnimationFrame(motionRef.current);
+      motionRef.current = null;
+    }
+  }, []);
+  const reset = react.useCallback(() => {
+    setState("idle");
+    setProgress(0);
+    setElapsed(0);
+    setCurrentDirection(direction);
+    startTimeRef.current = null;
+    pauseTimeRef.current = null;
+    totalPausedTimeRef.current = 0;
+    if (motionRef.current) {
+      cancelAnimationFrame(motionRef.current);
+      motionRef.current = null;
+    }
+  }, [direction]);
+  const reverse = react.useCallback(() => {
+    const newDirection = currentDirection === "forward" ? "reverse" : "forward";
+    setCurrentDirection(newDirection);
+    if (state === "playing") {
+      const remainingTime = duration - elapsed;
+      startTimeRef.current = performance.now() - remainingTime;
+      totalPausedTimeRef.current = 0;
+    }
+  }, [currentDirection, state, duration, elapsed]);
+  const seek = react.useCallback((targetProgress) => {
+    const clampedProgress = Math.max(0, Math.min(100, targetProgress));
+    setProgress(clampedProgress);
+    let targetElapsed = 0;
+    if (currentDirection === "reverse") {
+      targetElapsed = (100 - clampedProgress) / 100 * duration;
+    } else if (currentDirection === "alternate") {
+      targetElapsed = clampedProgress / 100 * duration;
+    } else {
+      targetElapsed = clampedProgress / 100 * duration;
+    }
+    setElapsed(targetElapsed);
+    if (state === "playing" && startTimeRef.current) {
+      const currentTime = performance.now();
+      startTimeRef.current = currentTime - targetElapsed - totalPausedTimeRef.current;
+    }
+  }, [currentDirection, duration, state]);
+  const setMotionState = react.useCallback((newState) => {
+    setState(newState);
+    if (newState === "playing" && !motionRef.current) {
+      motionRef.current = requestAnimationFrame(animate);
+    } else if (newState !== "playing" && motionRef.current) {
+      cancelAnimationFrame(motionRef.current);
+      motionRef.current = null;
+    }
+  }, [animate]);
+  react.useEffect(() => {
+    if (mounted && autoStart && state === "idle") {
+      play();
+    }
+  }, [mounted, autoStart, state, play]);
+  react.useEffect(() => {
+    return () => {
+      if (motionRef.current) {
+        cancelAnimationFrame(motionRef.current);
+      }
+    };
+  }, []);
+  return {
+    state,
+    direction: currentDirection,
+    progress,
+    elapsed,
+    remaining: Math.max(0, duration - elapsed),
+    mounted,
+    play,
+    pause,
+    stop,
+    reset,
+    reverse,
+    seek,
+    setState: setMotionState
+  };
+}
+function useRepeat(options = {}) {
+  const {
+    duration = 1e3,
+    delay = 0,
+    autoStart = true,
+    type = "pulse",
+    intensity = 0.1
+  } = options;
+  const ref = react.useRef(null);
+  const [scale, setScale] = react.useState(1);
+  const [opacity, setOpacity] = react.useState(1);
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const [progress, setProgress] = react.useState(0);
+  const animationTimers = react.useRef([]);
+  const isRunning = react.useRef(false);
+  const clearAllTimers = react.useCallback(() => {
+    animationTimers.current.forEach((id) => clearTimeout(id));
+    animationTimers.current = [];
+  }, []);
+  const addTimer = react.useCallback((callback, ms) => {
+    const id = window.setTimeout(callback, ms);
+    animationTimers.current.push(id);
+    return id;
+  }, []);
+  const animate = react.useCallback(() => {
+    if (!isRunning.current) return;
+    setIsAnimating(true);
+    setProgress(0);
+    switch (type) {
+      case "pulse":
+        setScale(1 + intensity);
+        addTimer(() => {
+          if (!isRunning.current) return;
+          setScale(1);
+          setProgress(0.5);
+        }, duration / 2);
+        break;
+      case "bounce":
+        setScale(1 + intensity);
+        addTimer(() => {
+          if (!isRunning.current) return;
+          setScale(1 - intensity);
+          setProgress(0.33);
+        }, duration / 3);
+        addTimer(() => {
+          if (!isRunning.current) return;
+          setScale(1);
+          setProgress(0.66);
+        }, duration);
+        break;
+      case "wave":
+        setScale(1 + intensity);
+        addTimer(() => {
+          if (!isRunning.current) return;
+          setScale(1 - intensity);
+          setProgress(0.5);
+        }, duration / 2);
+        addTimer(() => {
+          if (!isRunning.current) return;
+          setScale(1);
+          setProgress(0.75);
+        }, duration);
+        break;
+      case "fade":
+        setOpacity(0.5);
+        addTimer(() => {
+          if (!isRunning.current) return;
+          setOpacity(1);
+          setProgress(0.5);
+        }, duration / 2);
+        break;
+    }
+    addTimer(() => {
+      if (!isRunning.current) return;
+      setProgress(1);
+      setIsAnimating(false);
+      animate();
+    }, duration);
+  }, [type, intensity, duration, addTimer]);
+  const start = react.useCallback(() => {
+    isRunning.current = true;
+    clearAllTimers();
+    if (delay > 0) {
+      addTimer(() => animate(), delay);
+    } else {
+      animate();
+    }
+  }, [delay, animate, clearAllTimers, addTimer]);
+  const stop = react.useCallback(() => {
+    isRunning.current = false;
+    clearAllTimers();
+    setIsAnimating(false);
+    setScale(1);
+    setOpacity(1);
+    setProgress(0);
+  }, [clearAllTimers]);
+  const reset = react.useCallback(() => {
+    stop();
+  }, [stop]);
+  react.useEffect(() => {
+    if (autoStart) {
+      start();
+    }
+    return () => {
+      isRunning.current = false;
+      clearAllTimers();
+    };
+  }, []);
+  const style = react.useMemo(() => ({
+    transform: `scale(${scale})`,
+    opacity,
+    transition: `transform ${duration / 2}ms ease-in-out, opacity ${duration / 2}ms ease-in-out`
+  }), [scale, opacity, duration]);
+  return {
+    ref,
+    isVisible: true,
+    isAnimating,
+    style,
+    progress,
+    start,
+    stop,
+    reset
+  };
+}
+function useToggleMotion(options = {}) {
+  const { duration = 300, delay = 0, easing: easing2 = "ease-in-out" } = options;
+  const ref = react.useRef(null);
+  const [isVisible, setIsVisible] = react.useState(false);
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const show = react.useCallback(() => {
+    setIsVisible(true);
+    setIsAnimating(true);
+    setTimeout(() => setIsAnimating(false), duration + delay);
+  }, [duration, delay]);
+  const hide = react.useCallback(() => {
+    setIsVisible(false);
+    setIsAnimating(true);
+    setTimeout(() => setIsAnimating(false), duration + delay);
+  }, [duration, delay]);
+  const toggle = react.useCallback(() => {
+    if (isVisible) {
+      hide();
+    } else {
+      show();
+    }
+  }, [isVisible, show, hide]);
+  const start = react.useCallback(() => show(), [show]);
+  const stop = react.useCallback(() => setIsAnimating(false), []);
+  const reset = react.useCallback(() => {
+    setIsVisible(false);
+    setIsAnimating(false);
+  }, []);
+  const style = react.useMemo(() => ({
+    opacity: isVisible ? 1 : 0,
+    transform: isVisible ? "translateY(0) scale(1)" : "translateY(10px) scale(0.95)",
+    transition: `opacity ${duration}ms ${easing2} ${delay}ms, transform ${duration}ms ${easing2} ${delay}ms`
+  }), [isVisible, duration, easing2, delay]);
+  return {
+    ref,
+    isVisible,
+    isAnimating,
+    style,
+    progress: isVisible ? 1 : 0,
+    start,
+    stop,
+    reset,
+    toggle,
+    show,
+    hide
+  };
+}
+
+// src/hooks/useSlideDown.ts
+function useSlideDown(options = {}) {
+  return useSlideUp({ ...options, direction: "down" });
+}
+function useInView(options = {}) {
+  const {
+    threshold = 0,
+    rootMargin = "0px",
+    triggerOnce = false,
+    initialInView = false
+  } = options;
+  const ref = react.useRef(null);
+  const [inView, setInView] = react.useState(initialInView);
+  const [entry, setEntry] = react.useState(null);
+  const frozenRef = react.useRef(false);
+  const handleIntersect = react.useCallback(
+    (entries) => {
+      const [observerEntry] = entries;
+      if (frozenRef.current) return;
+      setEntry(observerEntry);
+      setInView(observerEntry.isIntersecting);
+      if (triggerOnce && observerEntry.isIntersecting) {
+        frozenRef.current = true;
+      }
+    },
+    [triggerOnce]
+  );
+  react.useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const observer = new IntersectionObserver(handleIntersect, {
+      threshold,
+      rootMargin
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [threshold, rootMargin, handleIntersect]);
+  return {
+    ref,
+    inView,
+    entry
+  };
+}
+function useMouse(options = {}) {
+  const { targetRef, throttle = 0 } = options;
+  const [state, setState] = react.useState({
+    x: 0,
+    y: 0,
+    elementX: 0,
+    elementY: 0,
+    isOver: false
+  });
+  const lastUpdateRef = react.useRef(0);
+  const rafIdRef = react.useRef(null);
+  const updateMousePosition = react.useCallback(
+    (clientX, clientY, isOver) => {
+      const now = Date.now();
+      if (throttle > 0 && now - lastUpdateRef.current < throttle) {
+        return;
+      }
+      lastUpdateRef.current = now;
+      let elementX = 0;
+      let elementY = 0;
+      if (targetRef?.current) {
+        const rect = targetRef.current.getBoundingClientRect();
+        elementX = (clientX - rect.left) / rect.width;
+        elementY = (clientY - rect.top) / rect.height;
+        elementX = Math.max(0, Math.min(1, elementX));
+        elementY = Math.max(0, Math.min(1, elementY));
+      }
+      setState({
+        x: clientX,
+        y: clientY,
+        elementX,
+        elementY,
+        isOver
+      });
+    },
+    [targetRef, throttle]
+  );
+  react.useEffect(() => {
+    const target = targetRef?.current;
+    const handleMouseMove = (e) => {
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+      }
+      rafIdRef.current = requestAnimationFrame(() => {
+        const isOver = target ? target.contains(e.target) : true;
+        updateMousePosition(e.clientX, e.clientY, isOver);
+      });
+    };
+    const handleMouseEnter = () => {
+      setState((prev) => ({ ...prev, isOver: true }));
+    };
+    const handleMouseLeave = () => {
+      setState((prev) => ({ ...prev, isOver: false }));
+    };
+    if (target) {
+      target.addEventListener("mousemove", handleMouseMove);
+      target.addEventListener("mouseenter", handleMouseEnter);
+      target.addEventListener("mouseleave", handleMouseLeave);
+    } else {
+      window.addEventListener("mousemove", handleMouseMove);
+    }
+    return () => {
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+      }
+      if (target) {
+        target.removeEventListener("mousemove", handleMouseMove);
+        target.removeEventListener("mouseenter", handleMouseEnter);
+        target.removeEventListener("mouseleave", handleMouseLeave);
+      } else {
+        window.removeEventListener("mousemove", handleMouseMove);
+      }
+    };
+  }, [targetRef, updateMousePosition]);
+  return state;
+}
+function useReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = react.useState(false);
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleChange = (event) => {
+      setPrefersReducedMotion(event.matches);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, []);
+  return {
+    prefersReducedMotion
+  };
+}
+function useWindowSize(options = {}) {
+  const {
+    debounce = 100,
+    initialWidth = 0,
+    initialHeight = 0
+  } = options;
+  const [state, setState] = react.useState({
+    width: initialWidth,
+    height: initialHeight,
+    isMounted: false
+  });
+  const timeoutRef = react.useRef(null);
+  const updateSize = react.useCallback(() => {
+    if (typeof window === "undefined") return;
+    setState({
+      width: window.innerWidth,
+      height: window.innerHeight,
+      isMounted: true
+    });
+  }, []);
+  const handleResize = react.useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    if (debounce > 0) {
+      timeoutRef.current = window.setTimeout(updateSize, debounce);
+    } else {
+      updateSize();
+    }
+  }, [debounce, updateSize]);
+  react.useEffect(() => {
+    updateSize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [handleResize, updateSize]);
+  return state;
+}
+function useGesture(options = {}) {
+  const {
+    enabled = true,
+    threshold = 10,
+    timeout = 300,
+    swipeThreshold = 50,
+    swipeVelocity = 0.3,
+    swipeDirections = ["up", "down", "left", "right"],
+    pinchThreshold = 10,
+    minScale = 0.1,
+    maxScale = 10,
+    rotateThreshold = 5,
+    panThreshold = 10,
+    onSwipe,
+    onPinch,
+    onRotate,
+    onPan,
+    onTap,
+    onDoubleTap,
+    onLongPress,
+    onStart,
+    onMove,
+    onEnd
+  } = options;
+  const [isActive, setIsActive] = react.useState(false);
+  const [gesture, setGesture] = react.useState(null);
+  const [scale, setScale] = react.useState(1);
+  const [rotation, setRotation] = react.useState(0);
+  const [deltaX, setDeltaX] = react.useState(0);
+  const [deltaY, setDeltaY] = react.useState(0);
+  const [distance, setDistance] = react.useState(0);
+  const [velocity, setVelocity] = react.useState(0);
+  const stateRef = react.useRef({
+    isActive: false,
+    startX: 0,
+    startY: 0,
+    currentX: 0,
+    currentY: 0,
+    deltaX: 0,
+    deltaY: 0,
+    distance: 0,
+    velocity: 0,
+    startTime: 0,
+    currentTime: 0,
+    scale: 1,
+    rotation: 0,
+    startDistance: 0,
+    startAngle: 0,
+    touchCount: 0
+  });
+  const timeoutRef = react.useRef(null);
+  const longPressRef = react.useRef(null);
+  const lastTapRef = react.useRef(0);
+  const getDistance = react.useCallback((x1, y1, x2, y2) => {
+    return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+  }, []);
+  const getAngle = react.useCallback((x1, y1, x2, y2) => {
+    return Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
+  }, []);
+  const getSwipeDirection = react.useCallback((deltaX2, deltaY2) => {
+    const absX = Math.abs(deltaX2);
+    const absY = Math.abs(deltaY2);
+    if (absX > absY) {
+      return deltaX2 > 0 ? "right" : "left";
+    } else {
+      return deltaY2 > 0 ? "down" : "up";
+    }
+  }, []);
+  const startGesture = react.useCallback((x, y, touchCount = 1) => {
+    if (!enabled) return;
+    const now = performance.now();
+    stateRef.current = {
+      ...stateRef.current,
+      isActive: true,
+      startX: x,
+      startY: y,
+      currentX: x,
+      currentY: y,
+      deltaX: 0,
+      deltaY: 0,
+      distance: 0,
+      velocity: 0,
+      startTime: now,
+      currentTime: now,
+      touchCount
+    };
+    setIsActive(true);
+    setGesture(null);
+    onStart?.(x, y);
+    if (onLongPress) {
+      longPressRef.current = window.setTimeout(() => {
+        onLongPress(x, y);
+      }, 500);
+    }
+  }, [enabled, onStart, onLongPress]);
+  const updateGesture = react.useCallback((x, y, touches) => {
+    if (!enabled || !stateRef.current.isActive) return;
+    const now = performance.now();
+    const state = stateRef.current;
+    const deltaX2 = x - state.startX;
+    const deltaY2 = y - state.startY;
+    const distance2 = getDistance(state.startX, state.startY, x, y);
+    const velocity2 = distance2 / (now - state.startTime) * 1e3;
+    state.currentX = x;
+    state.currentY = y;
+    state.deltaX = deltaX2;
+    state.deltaY = deltaY2;
+    state.distance = distance2;
+    state.velocity = velocity2;
+    state.currentTime = now;
+    setDeltaX(deltaX2);
+    setDeltaY(deltaY2);
+    setDistance(distance2);
+    setVelocity(velocity2);
+    if (touches && touches.length === 2) {
+      const touch1 = touches[0];
+      const touch2 = touches[1];
+      const currentDistance = getDistance(touch1.clientX, touch1.clientY, touch2.clientX, touch2.clientY);
+      const currentAngle = getAngle(touch1.clientX, touch1.clientY, touch2.clientX, touch2.clientY);
+      if (state.startDistance === 0) {
+        state.startDistance = currentDistance;
+        state.startAngle = currentAngle;
+      } else {
+        const scaleDelta = currentDistance / state.startDistance;
+        const newScale = Math.max(minScale, Math.min(maxScale, scale * scaleDelta));
+        if (Math.abs(scaleDelta - 1) * 100 > pinchThreshold) {
+          setScale(newScale);
+          setGesture("pinch");
+          onPinch?.(newScale, scaleDelta - 1);
+        }
+        const angleDelta = currentAngle - state.startAngle;
+        if (Math.abs(angleDelta) > rotateThreshold) {
+          const newRotation = rotation + angleDelta;
+          setRotation(newRotation);
+          setGesture("rotate");
+          onRotate?.(newRotation, angleDelta);
+        }
+      }
+    }
+    if (distance2 > panThreshold) {
+      setGesture("pan");
+      onPan?.(deltaX2, deltaY2, x - state.startX, y - state.startY);
+    }
+    onMove?.(x, y);
+  }, [enabled, getDistance, getAngle, scale, rotation, minScale, maxScale, pinchThreshold, rotateThreshold, panThreshold, onPinch, onRotate, onPan, onMove]);
+  const endGesture = react.useCallback((x, y) => {
+    if (!enabled || !stateRef.current.isActive) return;
+    const state = stateRef.current;
+    const now = performance.now();
+    const deltaX2 = x - state.startX;
+    const deltaY2 = y - state.startY;
+    const distance2 = getDistance(state.startX, state.startY, x, y);
+    const velocity2 = distance2 / (now - state.startTime) * 1e3;
+    if (longPressRef.current) {
+      clearTimeout(longPressRef.current);
+      longPressRef.current = null;
+    }
+    if (distance2 > swipeThreshold && velocity2 > swipeVelocity) {
+      const direction = getSwipeDirection(deltaX2, deltaY2);
+      if (direction && swipeDirections.includes(direction)) {
+        setGesture(`swipe-${direction}`);
+        onSwipe?.(direction, distance2, velocity2);
+      }
+    }
+    if (distance2 < threshold && now - state.startTime < timeout) {
+      const timeSinceLastTap = now - lastTapRef.current;
+      if (timeSinceLastTap < 300) {
+        onDoubleTap?.(x, y);
+        lastTapRef.current = 0;
+      } else {
+        onTap?.(x, y);
+        lastTapRef.current = now;
+      }
+    }
+    state.isActive = false;
+    setIsActive(false);
+    onEnd?.(x, y);
+    timeoutRef.current = window.setTimeout(() => {
+      setGesture(null);
+      setDeltaX(0);
+      setDeltaY(0);
+      setDistance(0);
+      setVelocity(0);
+    }, 100);
+  }, [enabled, getDistance, getSwipeDirection, swipeThreshold, swipeVelocity, swipeDirections, threshold, timeout, onSwipe, onTap, onDoubleTap, onEnd]);
+  const onTouchStart = react.useCallback((e) => {
+    if (e.cancelable) {
+      e.preventDefault();
+    }
+    const touch = e.touches[0];
+    startGesture(touch.clientX, touch.clientY, e.touches.length);
+  }, [startGesture]);
+  const onTouchMove = react.useCallback((e) => {
+    if (e.cancelable) {
+      e.preventDefault();
+    }
+    const touch = e.touches[0];
+    updateGesture(touch.clientX, touch.clientY, Array.from(e.touches));
+  }, [updateGesture]);
+  const onTouchEnd = react.useCallback((e) => {
+    if (e.cancelable) {
+      e.preventDefault();
+    }
+    const touch = e.changedTouches[0];
+    endGesture(touch.clientX, touch.clientY);
+  }, [endGesture]);
+  const onMouseDown = react.useCallback((e) => {
+    e.preventDefault();
+    startGesture(e.clientX, e.clientY, 1);
+  }, [startGesture]);
+  const onMouseMove = react.useCallback((e) => {
+    e.preventDefault();
+    updateGesture(e.clientX, e.clientY);
+  }, [updateGesture]);
+  const onMouseUp = react.useCallback((e) => {
+    e.preventDefault();
+    endGesture(e.clientX, e.clientY);
+  }, [endGesture]);
+  const start = react.useCallback(() => {
+    setIsActive(true);
+  }, []);
+  const stop = react.useCallback(() => {
+    setIsActive(false);
+    setGesture(null);
+    if (longPressRef.current) {
+      clearTimeout(longPressRef.current);
+      longPressRef.current = null;
+    }
+  }, []);
+  const reset = react.useCallback(() => {
+    setIsActive(false);
+    setGesture(null);
+    setScale(1);
+    setRotation(0);
+    setDeltaX(0);
+    setDeltaY(0);
+    setDistance(0);
+    setVelocity(0);
+    if (longPressRef.current) {
+      clearTimeout(longPressRef.current);
+      longPressRef.current = null;
+    }
+  }, []);
+  react.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      if (longPressRef.current) {
+        clearTimeout(longPressRef.current);
+      }
+    };
+  }, []);
+  return {
+    isActive,
+    gesture,
+    scale,
+    rotation,
+    deltaX,
+    deltaY,
+    distance,
+    velocity,
+    start,
+    stop,
+    reset,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    onMouseDown,
+    onMouseMove,
+    onMouseUp
+  };
+}
+function useGestureMotion(options) {
+  const {
+    gestureType,
+    duration = 300,
+    easing: easing2 = "ease-out",
+    sensitivity = 1,
+    enabled = true,
+    onGestureStart,
+    onGestureEnd
+  } = options;
+  const elementRef = react.useRef(null);
+  const [gestureState, setGestureState] = react.useState({
+    isActive: false,
+    x: 0,
+    y: 0,
+    deltaX: 0,
+    deltaY: 0,
+    scale: 1,
+    rotation: 0
+  });
+  const [motionStyle, setMotionStyle] = react.useState({});
+  const startPoint = react.useRef({ x: 0, y: 0 });
+  const isDragging = react.useRef(false);
+  const updateMotionStyle = react.useCallback(() => {
+    if (!enabled) return;
+    const { isActive, deltaX, deltaY, scale, rotation } = gestureState;
+    let transform = "";
+    switch (gestureType) {
+      case "hover":
+        transform = isActive ? `scale(${1 + sensitivity * 0.05}) translateY(-${sensitivity * 2}px)` : "scale(1) translateY(0)";
+        break;
+      case "drag":
+        transform = isActive ? `translate(${deltaX * sensitivity}px, ${deltaY * sensitivity}px)` : "translate(0, 0)";
+        break;
+      case "pinch":
+        transform = `scale(${scale})`;
+        break;
+      case "swipe":
+        transform = isActive ? `translateX(${deltaX * sensitivity}px) rotateY(${deltaX * 0.1}deg)` : "translateX(0) rotateY(0)";
+        break;
+      case "tilt":
+        transform = isActive ? `rotateX(${deltaY * 0.1}deg) rotateY(${deltaX * 0.1}deg)` : "rotateX(0) rotateY(0)";
+        break;
+    }
+    setMotionStyle({
+      transform,
+      transition: isActive ? "none" : `all ${duration}ms ${easing2}`,
+      cursor: gestureType === "drag" && isActive ? "grabbing" : "pointer"
+    });
+  }, [gestureState, gestureType, enabled, duration, easing2, sensitivity]);
+  const handleMouseDown = react.useCallback((e) => {
+    if (!enabled || gestureType !== "drag") return;
+    isDragging.current = true;
+    startPoint.current = { x: e.clientX, y: e.clientY };
+    setGestureState((prev) => ({ ...prev, isActive: true }));
+    onGestureStart?.();
+  }, [enabled, gestureType, onGestureStart]);
+  const handleMouseMove = react.useCallback((e) => {
+    if (!enabled || !isDragging.current) return;
+    const deltaX = e.clientX - startPoint.current.x;
+    const deltaY = e.clientY - startPoint.current.y;
+    setGestureState((prev) => ({
+      ...prev,
+      x: e.clientX,
+      y: e.clientY,
+      deltaX,
+      deltaY
+    }));
+  }, [enabled]);
+  const handleMouseUp = react.useCallback(() => {
+    if (!enabled) return;
+    isDragging.current = false;
+    setGestureState((prev) => ({ ...prev, isActive: false }));
+    onGestureEnd?.();
+  }, [enabled, onGestureEnd]);
+  const handleMouseEnter = react.useCallback(() => {
+    if (!enabled || gestureType !== "hover") return;
+    setGestureState((prev) => ({ ...prev, isActive: true }));
+    onGestureStart?.();
+  }, [enabled, gestureType, onGestureStart]);
+  const handleMouseLeave = react.useCallback(() => {
+    if (!enabled || gestureType !== "hover") return;
+    setGestureState((prev) => ({ ...prev, isActive: false }));
+    onGestureEnd?.();
+  }, [enabled, gestureType, onGestureEnd]);
+  const handleTouchStart = react.useCallback((e) => {
+    if (!enabled) return;
+    const touch = e.touches[0];
+    startPoint.current = { x: touch.clientX, y: touch.clientY };
+    setGestureState((prev) => ({ ...prev, isActive: true }));
+    onGestureStart?.();
+  }, [enabled, onGestureStart]);
+  const handleTouchMove = react.useCallback((e) => {
+    if (!enabled) return;
+    const touch = e.touches[0];
+    const deltaX = touch.clientX - startPoint.current.x;
+    const deltaY = touch.clientY - startPoint.current.y;
+    setGestureState((prev) => ({
+      ...prev,
+      x: touch.clientX,
+      y: touch.clientY,
+      deltaX,
+      deltaY
+    }));
+  }, [enabled]);
+  const handleTouchEnd = react.useCallback(() => {
+    if (!enabled) return;
+    setGestureState((prev) => ({ ...prev, isActive: false }));
+    onGestureEnd?.();
+  }, [enabled, onGestureEnd]);
+  react.useEffect(() => {
+    if (!elementRef.current) return;
+    const element = elementRef.current;
+    if (gestureType === "hover") {
+      element.addEventListener("mouseenter", handleMouseEnter);
+      element.addEventListener("mouseleave", handleMouseLeave);
+    } else if (gestureType === "drag") {
+      element.addEventListener("mousedown", handleMouseDown);
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    }
+    element.addEventListener("touchstart", handleTouchStart);
+    element.addEventListener("touchmove", handleTouchMove);
+    element.addEventListener("touchend", handleTouchEnd);
+    return () => {
+      element.removeEventListener("mouseenter", handleMouseEnter);
+      element.removeEventListener("mouseleave", handleMouseLeave);
+      element.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      element.removeEventListener("touchstart", handleTouchStart);
+      element.removeEventListener("touchmove", handleTouchMove);
+      element.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, [gestureType, handleMouseEnter, handleMouseLeave, handleMouseDown, handleMouseMove, handleMouseUp, handleTouchStart, handleTouchMove, handleTouchEnd]);
+  react.useEffect(() => {
+    updateMotionStyle();
+  }, [updateMotionStyle]);
+  return {
+    ref: elementRef,
+    gestureState,
+    motionStyle,
+    isActive: gestureState.isActive
+  };
+}
+
+exports.MOTION_PRESETS = MOTION_PRESETS;
+exports.MotionEngine = MotionEngine;
+exports.PAGE_MOTIONS = PAGE_MOTIONS;
+exports.PerformanceOptimizer = PerformanceOptimizer;
+exports.TransitionEffects = TransitionEffects;
+exports.applyEasing = applyEasing;
+exports.easeIn = easeIn;
+exports.easeInOut = easeInOut;
+exports.easeInOutQuad = easeInOutQuad;
+exports.easeInQuad = easeInQuad;
+exports.easeOut = easeOut;
+exports.easeOutQuad = easeOutQuad;
+exports.easingPresets = easingPresets;
+exports.getAvailableEasings = getAvailableEasings;
+exports.getEasing = getEasing;
+exports.getMotionPreset = getMotionPreset;
+exports.getPagePreset = getPagePreset;
+exports.getPresetEasing = getPresetEasing;
+exports.isEasingFunction = isEasingFunction;
+exports.isValidEasing = isValidEasing;
+exports.linear = linear;
+exports.mergeWithPreset = mergeWithPreset;
+exports.motionEngine = motionEngine;
+exports.performanceOptimizer = performanceOptimizer;
+exports.safeApplyEasing = safeApplyEasing;
+exports.transitionEffects = transitionEffects;
+exports.useBounceIn = useBounceIn;
+exports.useClickToggle = useClickToggle;
+exports.useFadeIn = useFadeIn;
+exports.useFocusToggle = useFocusToggle;
+exports.useGesture = useGesture;
+exports.useGestureMotion = useGestureMotion;
+exports.useGradient = useGradient;
+exports.useHoverMotion = useHoverMotion;
+exports.useInView = useInView;
+exports.useMotionState = useMotionState;
+exports.useMouse = useMouse;
+exports.usePageMotions = usePageMotions;
+exports.usePulse = usePulse;
+exports.useReducedMotion = useReducedMotion;
+exports.useRepeat = useRepeat;
+exports.useScaleIn = useScaleIn;
+exports.useScrollProgress = useScrollProgress;
+exports.useScrollReveal = useScrollReveal;
+exports.useSimplePageMotion = useSimplePageMotion;
+exports.useSlideDown = useSlideDown;
+exports.useSlideLeft = useSlideLeft;
+exports.useSlideRight = useSlideRight;
+exports.useSlideUp = useSlideUp;
+exports.useSmartMotion = useSmartMotion;
+exports.useSpringMotion = useSpringMotion;
+exports.useToggleMotion = useToggleMotion;
+exports.useUnifiedMotion = useUnifiedMotion;
+exports.useWindowSize = useWindowSize;
+//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map