blacktrigram 0.7.44 → 0.7.45

package/lib/components/shared/base/useKoreanTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKoreanTheme.js","names":[],"sources":["../../../../src/components/shared/base/useKoreanTheme.ts"],"sourcesContent":["/**\n * useKoreanTheme - Custom hook for Korean cyberpunk theming\n * \n * Provides centralized Korean theme styling and responsive utilities\n * Eliminates code duplication across UI components\n * \n * Enhanced with:\n * - Korean typography optimization (line height, letter spacing, word break)\n * - Accessibility features (focus indicators, touch targets, high contrast)\n * - WCAG 2.1 AA compliant color contrast ratios\n * \n * @module components/base\n */\n\nimport { useMemo } from \"react\";\nimport { KOREAN_COLORS, FONT_FAMILY } from \"../../../types/constants\";\nimport { hexToRgbaString } from \"../../../utils/colorUtils\";\n\n/**\n * Button variant configuration\n */\nexport interface ButtonVariantConfig {\n  readonly background: number;\n  readonly border: number;\n  readonly text: number;\n  readonly hoverBg: string;\n  readonly activeBg: string;\n}\n\n/**\n * Panel variant configuration\n */\nexport interface PanelVariantConfig {\n  readonly background: string;\n  readonly border: string;\n  readonly boxShadow: string;\n}\n\n/**\n * Size dimension configuration\n */\nexport interface SizeDimensions {\n  readonly padding: string;\n  readonly fontSize: string;\n  readonly borderWidth: string;\n}\n\n/**\n * Text size configuration\n */\nexport interface TextSizeConfig {\n  readonly korean: string;\n  readonly english: string;\n}\n\n/**\n * Korean typography configuration\n */\nexport interface KoreanTypographyConfig {\n  readonly fontFamily: string;\n  readonly lineHeight: number;\n  readonly letterSpacing: string;\n  readonly wordBreak: \"normal\" | \"break-all\" | \"keep-all\" | \"break-word\";\n  readonly wordWrap: \"normal\" | \"break-word\";\n}\n\n/**\n * Accessibility configuration\n */\nexport interface AccessibilityConfig {\n  readonly focusOutline: string;\n  readonly focusOutlineOffset: string;\n  readonly minTouchTarget: string;\n  readonly highContrastFocusOutline: string;\n}\n\n/**\n * Korean theme hook configuration\n */\nexport interface UseKoreanThemeConfig {\n  readonly variant?: \"primary\" | \"secondary\" | \"danger\" | \"default\" | \"bordered\" | \"elevated\";\n  readonly size?: \"sm\" | \"md\" | \"lg\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n  readonly disabled?: boolean;\n  readonly isMobile?: boolean;\n  readonly highContrast?: boolean;\n}\n\n/**\n * Custom hook for Korean cyberpunk theming\n * \n * Provides consistent styling patterns for all Korean-themed components\n * Enhanced with Korean typography optimization and accessibility features\n * \n * @example\n * ```tsx\n * const { buttonVariant, sizeDimensions, koreanTypography } = useKoreanTheme({\n *   variant: \"primary\",\n *   size: \"md\"\n * });\n * ```\n */\nexport function useKoreanTheme(config: UseKoreanThemeConfig = {}) {\n  const {\n    variant = \"primary\",\n    size = \"md\",\n    disabled = false,\n    isMobile = false,\n    highContrast = false,\n  } = config;\n\n  /**\n   * Get button variant colors\n   */\n  const buttonVariant = useMemo<ButtonVariantConfig>(() => {\n    switch (variant) {\n      case \"primary\":\n        return {\n          background: KOREAN_COLORS.UI_BACKGROUND_DARK,\n          border: KOREAN_COLORS.PRIMARY_CYAN,\n          text: KOREAN_COLORS.ACCENT_GOLD,\n          hoverBg: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.1),\n          activeBg: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.2),\n        };\n      case \"secondary\":\n        return {\n          background: KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n          border: KOREAN_COLORS.ACCENT_GOLD,\n          text: KOREAN_COLORS.TEXT_PRIMARY,\n          hoverBg: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.1),\n          activeBg: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.2),\n        };\n      case \"danger\":\n        return {\n          background: KOREAN_COLORS.UI_BACKGROUND_DARK,\n          border: KOREAN_COLORS.ACCENT_RED,\n          text: KOREAN_COLORS.ACCENT_RED,\n          hoverBg: hexToRgbaString(KOREAN_COLORS.ACCENT_RED, 0.1),\n          activeBg: hexToRgbaString(KOREAN_COLORS.ACCENT_RED, 0.2),\n        };\n      default:\n        return {\n          background: KOREAN_COLORS.UI_BACKGROUND_DARK,\n          border: KOREAN_COLORS.PRIMARY_CYAN,\n          text: KOREAN_COLORS.ACCENT_GOLD,\n          hoverBg: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.1),\n          activeBg: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.2),\n        };\n    }\n  }, [variant]);\n\n  /**\n   * Get panel variant styling\n   */\n  const panelVariant = useMemo<PanelVariantConfig>(() => {\n    switch (variant) {\n      case \"bordered\":\n        return {\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.95),\n          border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.8)}`,\n          boxShadow: `0 0 15px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.3)}`,\n        };\n      case \"elevated\":\n        return {\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.9),\n          border: `1px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.5)}`,\n          boxShadow: `\n            0 4px 12px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, 0.5)},\n            0 0 20px ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.2)}\n          `,\n        };\n      case \"default\":\n      default:\n        return {\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.85),\n          border: `1px solid ${hexToRgbaString(KOREAN_COLORS.UI_BORDER, 0.5)}`,\n          boxShadow: \"none\",\n        };\n    }\n  }, [variant]);\n\n  /**\n   * Get size dimensions for buttons with touch-optimized mobile values\n   * Mobile: 48px+ minimum touch targets with 16px+ Korean font\n   */\n  const buttonSize = useMemo<SizeDimensions>(() => {\n    // Touch-optimized sizing for mobile (no scale down)\n    const scale = isMobile ? 1.0 : 1.0; // Keep full size on mobile for 48px+ targets\n    \n    switch (size) {\n      case \"sm\":\n      case \"small\":\n        return {\n          padding: `${Math.round(8 * scale)}px ${Math.round(16 * scale)}px`,\n          fontSize: isMobile ? \"14px\" : `${Math.round(14 * scale)}px`, // Maintain readable size\n          borderWidth: \"1px\",\n        };\n      case \"lg\":\n      case \"large\":\n        return {\n          padding: `${Math.round(16 * scale)}px ${Math.round(32 * scale)}px`,\n          fontSize: isMobile ? \"18px\" : `${Math.round(20 * scale)}px`, // 18px minimum for Korean\n          borderWidth: \"3px\",\n        };\n      case \"md\":\n      case \"medium\":\n      default:\n        return {\n          padding: `${Math.round(12 * scale)}px ${Math.round(24 * scale)}px`,\n          fontSize: isMobile ? \"16px\" : `${Math.round(16 * scale)}px`, // 16px minimum for Korean\n          borderWidth: \"2px\",\n        };\n    }\n  }, [size, isMobile]);\n\n  /**\n   * Get text size configuration\n   */\n  const textSize = useMemo<TextSizeConfig>(() => {\n    const scale = isMobile ? 0.9 : 1.0;\n    \n    switch (size) {\n      case \"small\":\n        return {\n          korean: `${Math.round(14 * scale)}px`,\n          english: `${Math.round(12 * scale)}px`,\n        };\n      case \"large\":\n        return {\n          korean: `${Math.round(24 * scale)}px`,\n          english: `${Math.round(18 * scale)}px`,\n        };\n      case \"xlarge\":\n        return {\n          korean: `${Math.round(32 * scale)}px`,\n          english: `${Math.round(24 * scale)}px`,\n        };\n      case \"medium\":\n      default:\n        return {\n          korean: `${Math.round(18 * scale)}px`,\n          english: `${Math.round(14 * scale)}px`,\n        };\n    }\n  }, [size, isMobile]);\n\n  /**\n   * Calculate responsive size\n   */\n  const calculateResponsiveSize = useMemo(() => {\n    return (baseSize: number) => {\n      return isMobile ? Math.round(baseSize * 0.8) : baseSize;\n    };\n  }, [isMobile]);\n\n  /**\n   * Apply Korean theme to base styles\n   */\n  const applyKoreanTheme = useMemo(() => {\n    return (baseStyle: React.CSSProperties): React.CSSProperties => {\n      return {\n        ...baseStyle,\n        fontFamily: FONT_FAMILY.KOREAN,\n        color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),\n        opacity: disabled ? 0.5 : 1,\n      };\n    };\n  }, [disabled]);\n\n  /**\n   * Korean typography configuration\n   * Optimized for Korean character readability\n   * \n   * - Line height: 1.6 for Korean characters (vs 1.5 for Latin)\n   * - Letter spacing: -0.01em for tighter Korean spacing\n   * - Word break: keep-all to prevent breaking Korean words\n   * - Word wrap: break-word for long words\n   */\n  const koreanTypography = useMemo<KoreanTypographyConfig>(() => ({\n    fontFamily: FONT_FAMILY.KOREAN,\n    lineHeight: 1.6, // Optimal for Korean character readability\n    letterSpacing: \"-0.01em\", // Tighter spacing for Korean\n    wordBreak: \"keep-all\", // Prevent breaking Korean words mid-syllable\n    wordWrap: \"break-word\", // Wrap long words appropriately\n  }), []);\n\n  /**\n   * Accessibility configuration\n   * WCAG 2.1 AA compliant focus indicators and touch targets\n   */\n  const accessibility = useMemo<AccessibilityConfig>(() => ({\n    focusOutline: highContrast\n      ? `4px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD)}` // High contrast mode\n      : `3px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN)}`, // Normal mode\n    focusOutlineOffset: \"2px\",\n    minTouchTarget: \"44px\", // WCAG 2.1 AA minimum touch target size\n    highContrastFocusOutline: `4px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD)}`,\n  }), [highContrast]);\n\n  return {\n    buttonVariant,\n    panelVariant,\n    buttonSize,\n    textSize,\n    calculateResponsiveSize,\n    applyKoreanTheme,\n    koreanTypography,\n    accessibility,\n    colors: KOREAN_COLORS,\n    fontFamily: FONT_FAMILY,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"useKoreanTheme.js","names":[],"sources":["../../../../src/components/shared/base/useKoreanTheme.ts"],"sourcesContent":["/**\n * useKoreanTheme - Custom hook for Korean cyberpunk theming\n * \n * Provides centralized Korean theme styling and responsive utilities\n * Eliminates code duplication across UI components\n * \n * Enhanced with:\n * - Korean typography optimization (line height, letter spacing, word break)\n * - Accessibility features (focus indicators, touch targets, high contrast)\n * - WCAG 2.1 AA compliant color contrast ratios\n * \n * @module components/base\n */\n\nimport { useMemo } from \"react\";\nimport { KOREAN_COLORS, FONT_FAMILY } from \"../../../types/constants\";\nimport { hexToRgbaString } from \"../../../utils/colorUtils\";\n\n/**\n * Button variant configuration\n */\nexport interface ButtonVariantConfig {\n  readonly background: number;\n  readonly border: number;\n  readonly text: number;\n  readonly hoverBg: string;\n  readonly activeBg: string;\n}\n\n/**\n * Panel variant configuration\n */\nexport interface PanelVariantConfig {\n  readonly background: string;\n  readonly border: string;\n  readonly boxShadow: string;\n}\n\n/**\n * Size dimension configuration\n */\nexport interface SizeDimensions {\n  readonly padding: string;\n  readonly fontSize: string;\n  readonly borderWidth: string;\n}\n\n/**\n * Text size configuration\n */\nexport interface TextSizeConfig {\n  readonly korean: string;\n  readonly english: string;\n}\n\n/**\n * Korean typography configuration\n */\nexport interface KoreanTypographyConfig {\n  readonly fontFamily: string;\n  readonly lineHeight: number;\n  readonly letterSpacing: string;\n  readonly wordBreak: \"normal\" | \"break-all\" | \"keep-all\" | \"break-word\";\n  readonly wordWrap: \"normal\" | \"break-word\";\n}\n\n/**\n * Accessibility configuration\n */\nexport interface AccessibilityConfig {\n  readonly focusOutline: string;\n  readonly focusOutlineOffset: string;\n  readonly minTouchTarget: string;\n  readonly highContrastFocusOutline: string;\n}\n\n/**\n * Korean theme hook configuration\n */\nexport interface UseKoreanThemeConfig {\n  readonly variant?: \"primary\" | \"secondary\" | \"danger\" | \"default\" | \"bordered\" | \"elevated\";\n  readonly size?: \"sm\" | \"md\" | \"lg\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n  readonly disabled?: boolean;\n  readonly isMobile?: boolean;\n  readonly highContrast?: boolean;\n}\n\n/**\n * Custom hook for Korean cyberpunk theming\n * \n * Provides consistent styling patterns for all Korean-themed components\n * Enhanced with Korean typography optimization and accessibility features\n * \n * @example\n * ```tsx\n * const { buttonVariant, sizeDimensions, koreanTypography } = useKoreanTheme({\n *   variant: \"primary\",\n *   size: \"md\"\n * });\n * ```\n */\nexport function useKoreanTheme(config: UseKoreanThemeConfig = {}) {\n  const {\n    variant = \"primary\",\n    size = \"md\",\n    disabled = false,\n    isMobile = false,\n    highContrast = false,\n  } = config;\n\n  /**\n   * Get button variant colors\n   */\n  const buttonVariant = useMemo<ButtonVariantConfig>(() => {\n    switch (variant) {\n      case \"primary\":\n        return {\n          background: KOREAN_COLORS.UI_BACKGROUND_DARK,\n          border: KOREAN_COLORS.PRIMARY_CYAN,\n          text: KOREAN_COLORS.ACCENT_GOLD,\n          hoverBg: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.1),\n          activeBg: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.2),\n        };\n      case \"secondary\":\n        return {\n          background: KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n          border: KOREAN_COLORS.ACCENT_GOLD,\n          text: KOREAN_COLORS.TEXT_PRIMARY,\n          hoverBg: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.1),\n          activeBg: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.2),\n        };\n      case \"danger\":\n        return {\n          background: KOREAN_COLORS.UI_BACKGROUND_DARK,\n          border: KOREAN_COLORS.ACCENT_RED,\n          text: KOREAN_COLORS.ACCENT_RED,\n          hoverBg: hexToRgbaString(KOREAN_COLORS.ACCENT_RED, 0.1),\n          activeBg: hexToRgbaString(KOREAN_COLORS.ACCENT_RED, 0.2),\n        };\n      default:\n        return {\n          background: KOREAN_COLORS.UI_BACKGROUND_DARK,\n          border: KOREAN_COLORS.PRIMARY_CYAN,\n          text: KOREAN_COLORS.ACCENT_GOLD,\n          hoverBg: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.1),\n          activeBg: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.2),\n        };\n    }\n  }, [variant]);\n\n  /**\n   * Get panel variant styling\n   */\n  const panelVariant = useMemo<PanelVariantConfig>(() => {\n    switch (variant) {\n      case \"bordered\":\n        return {\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.95),\n          border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.8)}`,\n          boxShadow: `0 0 15px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.3)}`,\n        };\n      case \"elevated\":\n        return {\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.9),\n          border: `1px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.5)}`,\n          boxShadow: `\n            0 4px 12px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, 0.5)},\n            0 0 20px ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.2)}\n          `,\n        };\n      case \"default\":\n      default:\n        return {\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.85),\n          border: `1px solid ${hexToRgbaString(KOREAN_COLORS.UI_BORDER, 0.5)}`,\n          boxShadow: \"none\",\n        };\n    }\n  }, [variant]);\n\n  /**\n   * Get size dimensions for buttons with touch-optimized mobile values\n   * Mobile: 48px+ minimum touch targets with 16px+ Korean font\n   */\n  const buttonSize = useMemo<SizeDimensions>(() => {\n    const scale = isMobile ? 1.0 : 1.0; // Keep full size on mobile for 48px+ targets\n    \n    switch (size) {\n      case \"sm\":\n      case \"small\":\n        return {\n          padding: `${Math.round(8 * scale)}px ${Math.round(16 * scale)}px`,\n          fontSize: isMobile ? \"14px\" : `${Math.round(14 * scale)}px`, // Maintain readable size\n          borderWidth: \"1px\",\n        };\n      case \"lg\":\n      case \"large\":\n        return {\n          padding: `${Math.round(16 * scale)}px ${Math.round(32 * scale)}px`,\n          fontSize: isMobile ? \"18px\" : `${Math.round(20 * scale)}px`, // 18px minimum for Korean\n          borderWidth: \"3px\",\n        };\n      case \"md\":\n      case \"medium\":\n      default:\n        return {\n          padding: `${Math.round(12 * scale)}px ${Math.round(24 * scale)}px`,\n          fontSize: isMobile ? \"16px\" : `${Math.round(16 * scale)}px`, // 16px minimum for Korean\n          borderWidth: \"2px\",\n        };\n    }\n  }, [size, isMobile]);\n\n  /**\n   * Get text size configuration\n   */\n  const textSize = useMemo<TextSizeConfig>(() => {\n    const scale = isMobile ? 0.9 : 1.0;\n    \n    switch (size) {\n      case \"small\":\n        return {\n          korean: `${Math.round(14 * scale)}px`,\n          english: `${Math.round(12 * scale)}px`,\n        };\n      case \"large\":\n        return {\n          korean: `${Math.round(24 * scale)}px`,\n          english: `${Math.round(18 * scale)}px`,\n        };\n      case \"xlarge\":\n        return {\n          korean: `${Math.round(32 * scale)}px`,\n          english: `${Math.round(24 * scale)}px`,\n        };\n      case \"medium\":\n      default:\n        return {\n          korean: `${Math.round(18 * scale)}px`,\n          english: `${Math.round(14 * scale)}px`,\n        };\n    }\n  }, [size, isMobile]);\n\n  /**\n   * Calculate responsive size\n   */\n  const calculateResponsiveSize = useMemo(() => {\n    return (baseSize: number) => {\n      return isMobile ? Math.round(baseSize * 0.8) : baseSize;\n    };\n  }, [isMobile]);\n\n  /**\n   * Apply Korean theme to base styles\n   */\n  const applyKoreanTheme = useMemo(() => {\n    return (baseStyle: React.CSSProperties): React.CSSProperties => {\n      return {\n        ...baseStyle,\n        fontFamily: FONT_FAMILY.KOREAN,\n        color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),\n        opacity: disabled ? 0.5 : 1,\n      };\n    };\n  }, [disabled]);\n\n  /**\n   * Korean typography configuration\n   * Optimized for Korean character readability\n   * \n   * - Line height: 1.6 for Korean characters (vs 1.5 for Latin)\n   * - Letter spacing: -0.01em for tighter Korean spacing\n   * - Word break: keep-all to prevent breaking Korean words\n   * - Word wrap: break-word for long words\n   */\n  const koreanTypography = useMemo<KoreanTypographyConfig>(() => ({\n    fontFamily: FONT_FAMILY.KOREAN,\n    lineHeight: 1.6, // Optimal for Korean character readability\n    letterSpacing: \"-0.01em\", // Tighter spacing for Korean\n    wordBreak: \"keep-all\", // Prevent breaking Korean words mid-syllable\n    wordWrap: \"break-word\", // Wrap long words appropriately\n  }), []);\n\n  /**\n   * Accessibility configuration\n   * WCAG 2.1 AA compliant focus indicators and touch targets\n   */\n  const accessibility = useMemo<AccessibilityConfig>(() => ({\n    focusOutline: highContrast\n      ? `4px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD)}` // High contrast mode\n      : `3px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN)}`, // Normal mode\n    focusOutlineOffset: \"2px\",\n    minTouchTarget: \"44px\", // WCAG 2.1 AA minimum touch target size\n    highContrastFocusOutline: `4px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD)}`,\n  }), [highContrast]);\n\n  return {\n    buttonVariant,\n    panelVariant,\n    buttonSize,\n    textSize,\n    calculateResponsiveSize,\n    applyKoreanTheme,\n    koreanTypography,\n    accessibility,\n    colors: KOREAN_COLORS,\n    fontFamily: FONT_FAMILY,\n  };\n}\n"],"mappings":"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"}

package/lib/components/shared/debug/PerformanceDebugOverlayHtml.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PerformanceDebugOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/debug/PerformanceDebugOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AA4BnD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,2BAA2B,iFAsOtC,CAAC"}
+{"version":3,"file":"PerformanceDebugOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/debug/PerformanceDebugOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AA4BnD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,2BAA2B,iFAmOtC,CAAC"}

package/lib/components/shared/debug/PerformanceDebugOverlayHtml.js.map

@@ -1 +1 @@
-{"version":3,"file":"PerformanceDebugOverlayHtml.js","names":[],"sources":["../../../../src/components/shared/debug/PerformanceDebugOverlayHtml.tsx"],"sourcesContent":["/**\n * Performance Debug Overlay\n *\n * Shows real-time animation performance metrics in development mode.\n * Displays frame times, cache hit rate, and object pool status.\n *\n * Only visible in development mode.\n *\n * @module components/shared/debug/PerformanceDebugOverlayHtml\n * @category Debug\n * @korean 성능디버그오버레이\n */\n\nimport React, { useEffect, useState } from \"react\";\nimport { performanceMonitor } from \"../../../systems/animation\";\nimport { ThreeObjectPools } from \"../../../utils/threeObjectPool\";\nimport { KOREAN_COLORS } from \"@/types/constants\";\nimport { hexToRgbaString, hexColorToCSS } from \"../../../utils/colorUtils\";\n\n/**\n * Performance metrics interface\n * @korean 성능지표\n */\ninterface PerformanceMetrics {\n  avgFrameTime: number;\n  maxFrameTime: number;\n  cacheHitRate: number;\n  cacheEntries: number;\n}\n\n/**\n * Pool status interface\n * @korean 풀상태\n */\ninterface PoolStatus {\n  euler: number;\n  vector3: number;\n  matrix4: number;\n  quaternion: number;\n}\n\n/**\n * Performance Debug Overlay Component\n *\n * Shows real-time animation performance metrics:\n * - Average/max frame times\n * - Cache hit rate\n * - Object pool utilization\n *\n * Only renders in development mode.\n *\n * Optimized with React.memo for 60fps performance:\n * - Memoized to prevent parent re-renders from affecting it\n * - Internal state updates only via interval\n *\n * @returns Performance overlay or null in production\n * @korean 성능디버그오버레이컴포넌트\n */\nexport const PerformanceDebugOverlayHtml = React.memo(() => {\n  const [metrics, setMetrics] = useState<PerformanceMetrics>({\n    avgFrameTime: 0,\n    maxFrameTime: 0,\n    cacheHitRate: 0,\n    cacheEntries: 0,\n  });\n  const [pools, setPools] = useState<PoolStatus>({\n    euler: 0,\n    vector3: 0,\n    matrix4: 0,\n    quaternion: 0,\n  });\n\n  useEffect(() => {\n    // Update metrics every second\n    const interval = setInterval(() => {\n      const newMetrics = performanceMonitor.getMetrics();\n      setMetrics({\n        avgFrameTime: newMetrics.avgFrameTime,\n        maxFrameTime: newMetrics.maxFrameTime,\n        cacheHitRate: newMetrics.cacheHitRate,\n        cacheEntries: newMetrics.cacheEntries,\n      });\n      setPools(ThreeObjectPools.getStatus());\n    }, 1000);\n\n    return () => clearInterval(interval);\n  }, []);\n\n  // Only show in development\n  if (import.meta.env.PROD) {\n    return null;\n  }\n\n  // Color coding for frame times using KOREAN_COLORS\n  const frameTimeColor =\n    metrics.avgFrameTime < 5\n      ? hexColorToCSS(KOREAN_COLORS.POSITIVE_GREEN) // Green: Target met\n      : metrics.avgFrameTime < 8\n        ? hexColorToCSS(KOREAN_COLORS.WARNING_YELLOW) // Yellow: Warning\n        : hexColorToCSS(KOREAN_COLORS.ACCENT_RED); // Red: Critical\n\n  const cacheColor =\n    metrics.cacheHitRate > 0.9\n      ? hexColorToCSS(KOREAN_COLORS.POSITIVE_GREEN) // Green: Excellent\n      : metrics.cacheHitRate > 0.7\n        ? hexColorToCSS(KOREAN_COLORS.WARNING_YELLOW) // Yellow: Good\n        : hexColorToCSS(KOREAN_COLORS.ACCENT_RED); // Red: Poor\n\n  const poolColor = (available: number, threshold: number) =>\n    available > threshold\n      ? hexColorToCSS(KOREAN_COLORS.POSITIVE_GREEN)\n      : hexColorToCSS(KOREAN_COLORS.WARNING_YELLOW);\n\n  return (\n    <div\n      style={{\n        position: \"fixed\",\n        top: 10,\n        right: 10,\n        background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.85),\n        color: hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN),\n        padding: \"12px\",\n        fontFamily: \"monospace\",\n        fontSize: \"11px\",\n        lineHeight: \"1.4\",\n        zIndex: 9999,\n        border: `1px solid ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}`,\n        borderRadius: \"4px\",\n        minWidth: \"200px\",\n        userSelect: \"none\",\n        pointerEvents: \"none\",\n      }}\n      data-testid=\"performance-debug-overlay\"\n    >\n      <div\n        style={{\n          fontWeight: \"bold\",\n          marginBottom: \"8px\",\n          color: hexColorToCSS(KOREAN_COLORS.TEXT_PRIMARY),\n        }}\n      >\n        🎯 Animation Performance\n      </div>\n      <div\n        style={{\n          borderBottom: `1px solid ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}`,\n          marginBottom: \"6px\",\n        }}\n      />\n\n      {/* Frame Times */}\n      <div style={{ marginBottom: \"4px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Avg Frame:{\" \"}\n        </span>\n        <span style={{ color: frameTimeColor, fontWeight: \"bold\" }}>\n          {metrics.avgFrameTime.toFixed(2)}ms\n        </span>\n        <span\n          style={{\n            color: hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_LIGHT),\n            fontSize: \"9px\",\n            marginLeft: \"4px\",\n          }}\n        >\n          (target: &lt;5ms)\n        </span>\n      </div>\n      <div style={{ marginBottom: \"6px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Max Frame:{\" \"}\n        </span>\n        <span style={{ color: frameTimeColor }}>\n          {metrics.maxFrameTime.toFixed(2)}ms\n        </span>\n      </div>\n\n      {/* Cache Performance */}\n      <div style={{ marginBottom: \"4px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Cache Hit:{\" \"}\n        </span>\n        <span style={{ color: cacheColor, fontWeight: \"bold\" }}>\n          {(metrics.cacheHitRate * 100).toFixed(1)}%\n        </span>\n        <span\n          style={{\n            color: hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_LIGHT),\n            fontSize: \"9px\",\n            marginLeft: \"4px\",\n          }}\n        >\n          (target: &gt;90%)\n        </span>\n      </div>\n      <div style={{ marginBottom: \"8px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Cached:{\" \"}\n        </span>\n        <span>{metrics.cacheEntries} keyframes</span>\n      </div>\n\n      <div\n        style={{\n          borderBottom: `1px solid ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}`,\n          marginBottom: \"6px\",\n        }}\n      />\n\n      {/* Object Pools */}\n      <div\n        style={{\n          fontSize: \"10px\",\n          color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY),\n          marginBottom: \"4px\",\n        }}\n      >\n        Object Pools (available)\n      </div>\n      <div style={{ marginBottom: \"2px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Euler:{\" \"}\n        </span>\n        <span style={{ color: poolColor(pools.euler, 100) }}>\n          {pools.euler}\n        </span>\n      </div>\n      <div style={{ marginBottom: \"2px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Vector3:{\" \"}\n        </span>\n        <span style={{ color: poolColor(pools.vector3, 100) }}>\n          {pools.vector3}\n        </span>\n      </div>\n      <div style={{ marginBottom: \"2px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Matrix4:{\" \"}\n        </span>\n        <span style={{ color: poolColor(pools.matrix4, 50) }}>\n          {pools.matrix4}\n        </span>\n      </div>\n      <div style={{ marginBottom: \"2px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Quaternion:{\" \"}\n        </span>\n        <span style={{ color: poolColor(pools.quaternion, 50) }}>\n          {pools.quaternion}\n        </span>\n      </div>\n\n      {/* Performance Status */}\n      <div\n        style={{\n          borderTop: `1px solid ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}`,\n          marginTop: \"8px\",\n          paddingTop: \"6px\",\n        }}\n      >\n        <div style={{ fontSize: \"10px\" }}>\n          <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n            Status:{\" \"}\n          </span>\n          {metrics.avgFrameTime < 5 && metrics.cacheHitRate > 0.9 ? (\n            <span\n              style={{\n                color: hexColorToCSS(KOREAN_COLORS.POSITIVE_GREEN),\n                fontWeight: \"bold\",\n              }}\n            >\n              ✓ OPTIMAL\n            </span>\n          ) : metrics.avgFrameTime < 8 && metrics.cacheHitRate > 0.7 ? (\n            <span\n              style={{ color: hexColorToCSS(KOREAN_COLORS.WARNING_YELLOW) }}\n            >\n              ⚠ GOOD\n            </span>\n          ) : (\n            <span style={{ color: hexColorToCSS(KOREAN_COLORS.ACCENT_RED) }}>\n              ✗ NEEDS OPTIMIZATION\n            </span>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nPerformanceDebugOverlayHtml.displayName = \"PerformanceDebugOverlayHtml\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,IAAa,8BAA8B,MAAM,WAAW;CAC1D,MAAM,CAAC,SAAS,cAAc,SAA6B;EACzD,cAAc;EACd,cAAc;EACd,cAAc;EACd,cAAc;EACf,CAAC;CACF,MAAM,CAAC,OAAO,YAAY,SAAqB;EAC7C,OAAO;EACP,SAAS;EACT,SAAS;EACT,YAAY;EACb,CAAC;CAEF,gBAAgB;EAEd,MAAM,WAAW,kBAAkB;GACjC,MAAM,aAAa,mBAAmB,YAAY;GAClD,WAAW;IACT,cAAc,WAAW;IACzB,cAAc,WAAW;IACzB,cAAc,WAAW;IACzB,cAAc,WAAW;IAC1B,CAAC;GACF,SAAS,iBAAiB,WAAW,CAAC;KACrC,IAAK;EAER,aAAa,cAAc,SAAS;IACnC,EAAE,CAAC;CAIJ,OAAO;EAsMT;AAEF,4BAA4B,cAAc"}
+{"version":3,"file":"PerformanceDebugOverlayHtml.js","names":[],"sources":["../../../../src/components/shared/debug/PerformanceDebugOverlayHtml.tsx"],"sourcesContent":["/**\n * Performance Debug Overlay\n *\n * Shows real-time animation performance metrics in development mode.\n * Displays frame times, cache hit rate, and object pool status.\n *\n * Only visible in development mode.\n *\n * @module components/shared/debug/PerformanceDebugOverlayHtml\n * @category Debug\n * @korean 성능디버그오버레이\n */\n\nimport React, { useEffect, useState } from \"react\";\nimport { performanceMonitor } from \"../../../systems/animation\";\nimport { ThreeObjectPools } from \"../../../utils/threeObjectPool\";\nimport { KOREAN_COLORS } from \"@/types/constants\";\nimport { hexToRgbaString, hexColorToCSS } from \"../../../utils/colorUtils\";\n\n/**\n * Performance metrics interface\n * @korean 성능지표\n */\ninterface PerformanceMetrics {\n  avgFrameTime: number;\n  maxFrameTime: number;\n  cacheHitRate: number;\n  cacheEntries: number;\n}\n\n/**\n * Pool status interface\n * @korean 풀상태\n */\ninterface PoolStatus {\n  euler: number;\n  vector3: number;\n  matrix4: number;\n  quaternion: number;\n}\n\n/**\n * Performance Debug Overlay Component\n *\n * Shows real-time animation performance metrics:\n * - Average/max frame times\n * - Cache hit rate\n * - Object pool utilization\n *\n * Only renders in development mode.\n *\n * Optimized with React.memo for 60fps performance:\n * - Memoized to prevent parent re-renders from affecting it\n * - Internal state updates only via interval\n *\n * @returns Performance overlay or null in production\n * @korean 성능디버그오버레이컴포넌트\n */\nexport const PerformanceDebugOverlayHtml = React.memo(() => {\n  const [metrics, setMetrics] = useState<PerformanceMetrics>({\n    avgFrameTime: 0,\n    maxFrameTime: 0,\n    cacheHitRate: 0,\n    cacheEntries: 0,\n  });\n  const [pools, setPools] = useState<PoolStatus>({\n    euler: 0,\n    vector3: 0,\n    matrix4: 0,\n    quaternion: 0,\n  });\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      const newMetrics = performanceMonitor.getMetrics();\n      setMetrics({\n        avgFrameTime: newMetrics.avgFrameTime,\n        maxFrameTime: newMetrics.maxFrameTime,\n        cacheHitRate: newMetrics.cacheHitRate,\n        cacheEntries: newMetrics.cacheEntries,\n      });\n      setPools(ThreeObjectPools.getStatus());\n    }, 1000);\n\n    return () => clearInterval(interval);\n  }, []);\n\n  if (import.meta.env.PROD) {\n    return null;\n  }\n\n  const frameTimeColor =\n    metrics.avgFrameTime < 5\n      ? hexColorToCSS(KOREAN_COLORS.POSITIVE_GREEN) // Green: Target met\n      : metrics.avgFrameTime < 8\n        ? hexColorToCSS(KOREAN_COLORS.WARNING_YELLOW) // Yellow: Warning\n        : hexColorToCSS(KOREAN_COLORS.ACCENT_RED); // Red: Critical\n\n  const cacheColor =\n    metrics.cacheHitRate > 0.9\n      ? hexColorToCSS(KOREAN_COLORS.POSITIVE_GREEN) // Green: Excellent\n      : metrics.cacheHitRate > 0.7\n        ? hexColorToCSS(KOREAN_COLORS.WARNING_YELLOW) // Yellow: Good\n        : hexColorToCSS(KOREAN_COLORS.ACCENT_RED); // Red: Poor\n\n  const poolColor = (available: number, threshold: number) =>\n    available > threshold\n      ? hexColorToCSS(KOREAN_COLORS.POSITIVE_GREEN)\n      : hexColorToCSS(KOREAN_COLORS.WARNING_YELLOW);\n\n  return (\n    <div\n      style={{\n        position: \"fixed\",\n        top: 10,\n        right: 10,\n        background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.85),\n        color: hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN),\n        padding: \"12px\",\n        fontFamily: \"monospace\",\n        fontSize: \"11px\",\n        lineHeight: \"1.4\",\n        zIndex: 9999,\n        border: `1px solid ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}`,\n        borderRadius: \"4px\",\n        minWidth: \"200px\",\n        userSelect: \"none\",\n        pointerEvents: \"none\",\n      }}\n      data-testid=\"performance-debug-overlay\"\n    >\n      <div\n        style={{\n          fontWeight: \"bold\",\n          marginBottom: \"8px\",\n          color: hexColorToCSS(KOREAN_COLORS.TEXT_PRIMARY),\n        }}\n      >\n        🎯 Animation Performance\n      </div>\n      <div\n        style={{\n          borderBottom: `1px solid ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}`,\n          marginBottom: \"6px\",\n        }}\n      />\n\n      {/* Frame Times */}\n      <div style={{ marginBottom: \"4px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Avg Frame:{\" \"}\n        </span>\n        <span style={{ color: frameTimeColor, fontWeight: \"bold\" }}>\n          {metrics.avgFrameTime.toFixed(2)}ms\n        </span>\n        <span\n          style={{\n            color: hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_LIGHT),\n            fontSize: \"9px\",\n            marginLeft: \"4px\",\n          }}\n        >\n          (target: &lt;5ms)\n        </span>\n      </div>\n      <div style={{ marginBottom: \"6px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Max Frame:{\" \"}\n        </span>\n        <span style={{ color: frameTimeColor }}>\n          {metrics.maxFrameTime.toFixed(2)}ms\n        </span>\n      </div>\n\n      {/* Cache Performance */}\n      <div style={{ marginBottom: \"4px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Cache Hit:{\" \"}\n        </span>\n        <span style={{ color: cacheColor, fontWeight: \"bold\" }}>\n          {(metrics.cacheHitRate * 100).toFixed(1)}%\n        </span>\n        <span\n          style={{\n            color: hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_LIGHT),\n            fontSize: \"9px\",\n            marginLeft: \"4px\",\n          }}\n        >\n          (target: &gt;90%)\n        </span>\n      </div>\n      <div style={{ marginBottom: \"8px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Cached:{\" \"}\n        </span>\n        <span>{metrics.cacheEntries} keyframes</span>\n      </div>\n\n      <div\n        style={{\n          borderBottom: `1px solid ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}`,\n          marginBottom: \"6px\",\n        }}\n      />\n\n      {/* Object Pools */}\n      <div\n        style={{\n          fontSize: \"10px\",\n          color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY),\n          marginBottom: \"4px\",\n        }}\n      >\n        Object Pools (available)\n      </div>\n      <div style={{ marginBottom: \"2px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Euler:{\" \"}\n        </span>\n        <span style={{ color: poolColor(pools.euler, 100) }}>\n          {pools.euler}\n        </span>\n      </div>\n      <div style={{ marginBottom: \"2px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Vector3:{\" \"}\n        </span>\n        <span style={{ color: poolColor(pools.vector3, 100) }}>\n          {pools.vector3}\n        </span>\n      </div>\n      <div style={{ marginBottom: \"2px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Matrix4:{\" \"}\n        </span>\n        <span style={{ color: poolColor(pools.matrix4, 50) }}>\n          {pools.matrix4}\n        </span>\n      </div>\n      <div style={{ marginBottom: \"2px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Quaternion:{\" \"}\n        </span>\n        <span style={{ color: poolColor(pools.quaternion, 50) }}>\n          {pools.quaternion}\n        </span>\n      </div>\n\n      {/* Performance Status */}\n      <div\n        style={{\n          borderTop: `1px solid ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}`,\n          marginTop: \"8px\",\n          paddingTop: \"6px\",\n        }}\n      >\n        <div style={{ fontSize: \"10px\" }}>\n          <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n            Status:{\" \"}\n          </span>\n          {metrics.avgFrameTime < 5 && metrics.cacheHitRate > 0.9 ? (\n            <span\n              style={{\n                color: hexColorToCSS(KOREAN_COLORS.POSITIVE_GREEN),\n                fontWeight: \"bold\",\n              }}\n            >\n              ✓ OPTIMAL\n            </span>\n          ) : metrics.avgFrameTime < 8 && metrics.cacheHitRate > 0.7 ? (\n            <span\n              style={{ color: hexColorToCSS(KOREAN_COLORS.WARNING_YELLOW) }}\n            >\n              ⚠ GOOD\n            </span>\n          ) : (\n            <span style={{ color: hexColorToCSS(KOREAN_COLORS.ACCENT_RED) }}>\n              ✗ NEEDS OPTIMIZATION\n            </span>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nPerformanceDebugOverlayHtml.displayName = \"PerformanceDebugOverlayHtml\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,IAAa,8BAA8B,MAAM,WAAW;CAC1D,MAAM,CAAC,SAAS,cAAc,SAA6B;EACzD,cAAc;EACd,cAAc;EACd,cAAc;EACd,cAAc;EACf,CAAC;CACF,MAAM,CAAC,OAAO,YAAY,SAAqB;EAC7C,OAAO;EACP,SAAS;EACT,SAAS;EACT,YAAY;EACb,CAAC;CAEF,gBAAgB;EACd,MAAM,WAAW,kBAAkB;GACjC,MAAM,aAAa,mBAAmB,YAAY;GAClD,WAAW;IACT,cAAc,WAAW;IACzB,cAAc,WAAW;IACzB,cAAc,WAAW;IACzB,cAAc,WAAW;IAC1B,CAAC;GACF,SAAS,iBAAiB,WAAW,CAAC;KACrC,IAAK;EAER,aAAa,cAAc,SAAS;IACnC,EAAE,CAAC;CAGJ,OAAO;EAqMT;AAEF,4BAA4B,cAAc"}

package/lib/components/shared/effects/ScreenFlash.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenFlash.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/effects/ScreenFlash.tsx"],"names":[],"mappings":"AACA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,wDAAwD;IACxD,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,aAAa,CAAC;CAC5D;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,8BAA8B;IAC9B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,0BAA0B;IAC1B,QAAQ,CAAC,MAAM,EAAE,iBAAiB,CAAC;IACnC,oCAAoC;IACpC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsFlD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB;IAC7B,oCAAoC;;;;;;;IAOpC,wCAAwC;;;;;;;IAOxC,0CAA0C;;;;;;;IAO1C,yCAAyC;;;;;;;CAOjC,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,cAAc;IAoBvB,8CAA8C;oBAdvB,iBAAiB;IAgBxC,6CAA6C;4BAXd,MAAM,OAAO,kBAAkB;IAa9D,gCAAgC;;IAQhC,wCAAwC;;CAG3C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B,GACrC,oBAAoB,MAAM,EAC1B,gBAAgB,MAAM,KACrB,MAEF,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ScreenFlash.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/effects/ScreenFlash.tsx"],"names":[],"mappings":"AACA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,wDAAwD;IACxD,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,aAAa,CAAC;CAC5D;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,8BAA8B;IAC9B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,0BAA0B;IAC1B,QAAQ,CAAC,MAAM,EAAE,iBAAiB,CAAC;IACnC,oCAAoC;IACpC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAiFlD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB;IAC7B,oCAAoC;;;;;;;IAOpC,wCAAwC;;;;;;;IAOxC,0CAA0C;;;;;;;IAO1C,yCAAyC;;;;;;;CAOjC,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,cAAc;IAoBvB,8CAA8C;oBAdvB,iBAAiB;IAgBxC,6CAA6C;4BAXd,MAAM,OAAO,kBAAkB;IAa9D,gCAAgC;;IAQhC,wCAAwC;;CAG3C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B,GACrC,oBAAoB,MAAM,EAC1B,gBAAgB,MAAM,KACrB,MAEF,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ActionButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/mobile/ActionButtons.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,KAMN,MAAM,OAAO,CAAC;AAaf;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,KAAK,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,OAAO,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACvD,mCAAmC;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,iEAAiE;IACjE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,wCAAwC;IACxC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC3B;AA4XD;;;GAGG;AACH,eAAO,MAAM,aAAa,gDAYzB,CAAC"}
+{"version":3,"file":"ActionButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/mobile/ActionButtons.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,KAMN,MAAM,OAAO,CAAC;AAaf;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,KAAK,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,OAAO,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACvD,mCAAmC;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,iEAAiE;IACjE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,wCAAwC;IACxC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC3B;AA4WD;;;GAGG;AACH,eAAO,MAAM,aAAa,gDAYzB,CAAC"}

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

@@ -60,7 +60,6 @@ import { Html } from "@react-three/drei";
 * />
 * ```
 *
-* @public
 * @korean 액션버튼
 */
 var ActionButtonsComponent = ({ onAttack, onBlock, disabled = false, bottom = 34, right = 20, opacity = .8 }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"ActionButtons.js","names":[],"sources":["../../../../src/components/shared/mobile/ActionButtons.tsx"],"sourcesContent":["/**\n * ActionButtons Component\n *\n * Touch-optimized action buttons for combat (Attack and Block)\n * Provides tactile combat controls with visual feedback and haptic response\n *\n * WCAG 2.1 Level AA Compliance:\n * - ARIA labels for screen readers\n * - Keyboard navigation (Enter, Space)\n * - Visible focus indicators (2px cyan border)\n * - 80x80px and 70x70px touch targets (exceeds 44x44px minimum)\n *\n * @module components/mobile/ActionButtons\n * @category Mobile Controls\n * @korean 액션 버튼\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, {\n  useCallback,\n  useState,\n  useMemo,\n  useRef,\n  useEffect,\n} from \"react\";\nimport { KOREAN_COLORS } from \"@/types/constants\";\nimport { triggerOptimizedHaptic } from \"./HapticController\";\nimport {\n  applyOptimizedUpdate,\n  createTransformStyle,\n  createFilterStyle,\n} from \"./TouchOptimizer\";\nimport { getColorRGB } from \"../../../utils/colorHelpers\";\nimport { handleKeyboardNav, getFocusStyle } from \"../../../utils/accessibility\";\nimport { createBilingualLabel } from \"../../../types/AccessibilityTypes\";\nimport { useThrottle } from \"../../../hooks/useThrottle\";\n\n/**\n * Event type for button interactions\n */\nexport type ButtonEventType = \"start\" | \"end\";\n\n/**\n * Props for ActionButtons component\n */\nexport interface ActionButtonsProps {\n  /** Callback when attack button is pressed */\n  readonly onAttack: () => void;\n  /** Callback when block button is pressed/released */\n  readonly onBlock: (eventType: ButtonEventType) => void;\n  /** Whether buttons are disabled */\n  readonly disabled?: boolean;\n  /** Position from bottom in pixels (default: 34 for safe area) */\n  readonly bottom?: number;\n  /** Position from right in pixels (default: 20) */\n  readonly right?: number;\n  /** Opacity of buttons (default: 0.8) */\n  readonly opacity?: number;\n}\n\n/**\n * ActionButtons Component\n *\n * Provides two primary combat action buttons:\n * - Attack Button (⚡): Primary combat action, 80x80px\n * - Block Button (🛡️): Defensive action, 70x70px\n *\n * Features:\n * - Touch-optimized with minimum 44x44px targets\n * - Attack button: 80x80px for primary action\n * - Block button: 70x70px for secondary action\n * - Visual feedback on press\n * - Haptic feedback for tactile response\n * - Korean cyberpunk theming\n * - Hold-to-block support\n *\n * Usage in Combat:\n * - Attack: Executes current stance technique\n * - Block: Activates defensive guard (hold for sustained block)\n *\n * @example\n * ```tsx\n * <ActionButtons\n *   onAttack={() => executeTechnique()}\n *   onBlock={(eventType) => {\n *     if (eventType === 'start') {\n *       activateBlock();\n *     } else {\n *       deactivateBlock();\n *     }\n *   }}\n *   disabled={isPaused}\n * />\n * ```\n *\n * @public\n * @korean 액션버튼\n */\nconst ActionButtonsComponent: React.FC<ActionButtonsProps> = ({\n  onAttack,\n  onBlock,\n  disabled = false,\n  bottom = 34,\n  right = 20,\n  opacity = 0.8,\n}) => {\n  const [attackPressed, setAttackPressed] = useState(false);\n  const [blockPressed, setBlockPressed] = useState(false);\n  const [attackFocused, setAttackFocused] = useState(false);\n  const [blockFocused, setBlockFocused] = useState(false);\n\n  // Button refs for direct DOM manipulation (immediate visual feedback)\n  const attackButtonRef = useRef<HTMLButtonElement>(null);\n  const blockButtonRef = useRef<HTMLButtonElement>(null);\n\n  // Throttle callbacks to ~60fps for performance\n  const throttledOnAttack = useThrottle(onAttack, 16);\n  const throttledOnBlock = useThrottle(onBlock, 16);\n\n  /**\n   * Handle attack button press with optimized latency (<16ms)\n   * Uses direct DOM manipulation for immediate visual feedback\n   */\n  const handleAttackStart = useCallback(\n    (e: React.TouchEvent | React.MouseEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      e.stopPropagation();\n\n      // Immediate visual update using optimized approach (<16ms)\n      applyOptimizedUpdate(\n        attackButtonRef.current,\n        (element) => {\n          // GPU-accelerated transform\n          element.style.transform = createTransformStyle(true, 0.95);\n          element.style.filter = createFilterStyle(true, 1.2);\n        },\n        () => {\n          // Deferred state update\n          setAttackPressed(true);\n          throttledOnAttack();\n          triggerOptimizedHaptic(\"medium\");\n        },\n      );\n    },\n    [disabled, throttledOnAttack],\n  );\n\n  /**\n   * Handle attack button release with optimized latency\n   */\n  const handleAttackEnd = useCallback(\n    (e: React.TouchEvent | React.MouseEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      e.stopPropagation();\n\n      // Immediate visual reset\n      applyOptimizedUpdate(\n        attackButtonRef.current,\n        (element) => {\n          element.style.transform = createTransformStyle(false);\n          element.style.filter = createFilterStyle(false);\n        },\n        () => {\n          setAttackPressed(false);\n        },\n      );\n    },\n    [disabled],\n  );\n\n  /**\n   * Handle block button press with optimized latency (<16ms)\n   */\n  const handleBlockStart = useCallback(\n    (e: React.TouchEvent | React.MouseEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      e.stopPropagation();\n\n      // Immediate visual update\n      applyOptimizedUpdate(\n        blockButtonRef.current,\n        (element) => {\n          element.style.transform = createTransformStyle(true, 0.95);\n          element.style.filter = createFilterStyle(true, 1.2);\n        },\n        () => {\n          setBlockPressed(true);\n          throttledOnBlock(\"start\");\n          triggerOptimizedHaptic(\"light\");\n        },\n      );\n    },\n    [disabled, throttledOnBlock],\n  );\n\n  /**\n   * Handle block button release with optimized latency\n   */\n  const handleBlockEnd = useCallback(\n    (e: React.TouchEvent | React.MouseEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      e.stopPropagation();\n\n      // Immediate visual reset\n      applyOptimizedUpdate(\n        blockButtonRef.current,\n        (element) => {\n          element.style.transform = createTransformStyle(false);\n          element.style.filter = createFilterStyle(false);\n        },\n        () => {\n          setBlockPressed(false);\n          throttledOnBlock(\"end\");\n        },\n      );\n    },\n    [disabled, throttledOnBlock],\n  );\n\n  /**\n   * Cleanup on unmount - reset any pending visual states.\n   * Note: Captures button refs at effect creation time to avoid stale closures.\n   * If the buttons unmount before cleanup runs, the captured variables will still\n   * reference the original DOM elements (now potentially detached), so style changes\n   * are harmless but may not be visible. The null checks primarily guard against\n   * refs that were never set in the first place.\n   */\n  useEffect(() => {\n    // Store refs in variables at effect creation time\n    const attackButton = attackButtonRef.current;\n    const blockButton = blockButtonRef.current;\n\n    return () => {\n      if (attackButton) {\n        attackButton.style.transform = createTransformStyle(false);\n        attackButton.style.filter = createFilterStyle(false);\n      }\n      if (blockButton) {\n        blockButton.style.transform = createTransformStyle(false);\n        blockButton.style.filter = createFilterStyle(false);\n      }\n    };\n  }, []);\n\n  /**\n   * Handle keyboard navigation for attack button\n   */\n  const handleAttackKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n      handleKeyboardNav(e.nativeEvent, {\n        onActivate: () => {\n          setAttackPressed(true);\n          onAttack();\n          triggerOptimizedHaptic(\"medium\");\n          // Release after brief delay\n          setTimeout(() => setAttackPressed(false), 150);\n        },\n      });\n    },\n    [disabled, onAttack],\n  );\n\n  /**\n   * Handle keyboard navigation for block button\n   */\n  const handleBlockKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n      handleKeyboardNav(e.nativeEvent, {\n        onActivate: () => {\n          setBlockPressed(true);\n          onBlock(\"start\");\n          triggerOptimizedHaptic(\"light\");\n          // Release after brief delay\n          setTimeout(() => {\n            setBlockPressed(false);\n            onBlock(\"end\");\n          }, 150);\n        },\n      });\n    },\n    [disabled, onBlock],\n  );\n\n  // Extract RGB colors using shared utility\n  const colors = useMemo(\n    () => ({\n      gold: getColorRGB(KOREAN_COLORS.ACCENT_GOLD),\n      blue: getColorRGB(KOREAN_COLORS.ACCENT_BLUE),\n      primary: getColorRGB(KOREAN_COLORS.PRIMARY_CYAN),\n    }),\n    [],\n  );\n\n  return (\n    <Html fullscreen>\n      <div\n        style={{\n          position: \"absolute\",\n          bottom: `${bottom}px`,\n          right: `${right}px`,\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: \"10px\",\n          opacity: disabled ? 0.3 : opacity,\n          pointerEvents: disabled ? \"none\" : \"auto\",\n        }}\n        data-testid=\"action-buttons\"\n      >\n        {/* Primary Attack Button */}\n        <button\n          ref={attackButtonRef}\n          onTouchStart={handleAttackStart}\n          onTouchEnd={handleAttackEnd}\n          onMouseDown={handleAttackStart}\n          onMouseUp={handleAttackEnd}\n          onMouseLeave={handleAttackEnd}\n          onKeyDown={handleAttackKeyDown}\n          onFocus={() => setAttackFocused(true)}\n          onBlur={() => setAttackFocused(false)}\n          style={{\n            width: \"80px\",\n            height: \"80px\",\n            borderRadius: \"50%\",\n            background: attackPressed\n              ? `rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 1)`\n              : `rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 0.9)`,\n            border: \"3px solid #fff\",\n            fontSize: \"28px\",\n            color: \"#000\",\n            fontWeight: \"bold\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            cursor: \"pointer\",\n            userSelect: \"none\",\n            touchAction: \"none\",\n            transition: \"transform 0.1s ease-out, filter 0.1s ease-out\",\n            // Note: transform and filter are managed via TouchOptimizer/applyOptimizedUpdate\n            // for immediate visual feedback. React state-driven inline styles serve as baseline\n            // values that are overridden during active touch interactions via direct DOM manipulation.\n            transform: createTransformStyle(attackPressed, 0.95),\n            filter: createFilterStyle(attackPressed, 1.2),\n            willChange: \"transform, filter\", // GPU hint\n            boxShadow: attackPressed\n              ? `0 0 25px rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 1), inset 0 4px 8px rgba(0, 0, 0, 0.3)`\n              : `0 4px 12px rgba(0, 0, 0, 0.5), 0 0 15px rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 0.6)`,\n            ...getFocusStyle(attackFocused, {\n              outlineWidth: 3,\n              boxShadow: `0 0 0 4px rgba(${colors.primary.r}, ${colors.primary.g}, ${colors.primary.b}, 0.5), 0 0 25px rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 1)`,\n            }),\n          }}\n          disabled={disabled}\n          aria-label={createBilingualLabel(\"공격\", \"Attack\").label}\n          aria-pressed={attackPressed}\n          role=\"button\"\n          tabIndex={disabled ? -1 : 0}\n          data-testid=\"attack-button\"\n        >\n          ⚡\n        </button>\n\n        {/* Block Button */}\n        <button\n          ref={blockButtonRef}\n          onTouchStart={handleBlockStart}\n          onTouchEnd={handleBlockEnd}\n          onMouseDown={handleBlockStart}\n          onMouseUp={handleBlockEnd}\n          onMouseLeave={handleBlockEnd}\n          onKeyDown={handleBlockKeyDown}\n          onFocus={() => setBlockFocused(true)}\n          onBlur={() => setBlockFocused(false)}\n          style={{\n            width: \"70px\",\n            height: \"70px\",\n            borderRadius: \"50%\",\n            background: blockPressed\n              ? `rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 1)`\n              : `rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 0.9)`,\n            border: \"2px solid #fff\",\n            fontSize: \"24px\",\n            color: \"#fff\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            cursor: \"pointer\",\n            userSelect: \"none\",\n            touchAction: \"none\",\n            transition: \"transform 0.1s ease-out, filter 0.1s ease-out\",\n            transform: createTransformStyle(blockPressed, 0.95),\n            filter: createFilterStyle(blockPressed, 1.2),\n            willChange: \"transform, filter\", // GPU hint\n            boxShadow: blockPressed\n              ? `0 0 20px rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 1), inset 0 4px 8px rgba(0, 0, 0, 0.3)`\n              : `0 4px 10px rgba(0, 0, 0, 0.5), 0 0 12px rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 0.6)`,\n            ...getFocusStyle(blockFocused, {\n              outlineWidth: 3,\n              boxShadow: `0 0 0 4px rgba(${colors.primary.r}, ${colors.primary.g}, ${colors.primary.b}, 0.5), 0 0 20px rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 1)`,\n            }),\n          }}\n          disabled={disabled}\n          aria-label={createBilingualLabel(\"방어\", \"Block\").label}\n          aria-pressed={blockPressed}\n          role=\"button\"\n          tabIndex={disabled ? -1 : 0}\n          data-testid=\"block-button\"\n        >\n          🛡️\n        </button>\n\n        {/* Button Labels (Korean + English) */}\n        <div\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"2px\",\n            alignItems: \"center\",\n            fontSize: \"10px\",\n            color: `rgba(${colors.primary.r}, ${colors.primary.g}, ${colors.primary.b}, 0.9)`,\n            textShadow: \"0 1px 3px rgba(0, 0, 0, 0.8)\",\n            fontWeight: \"bold\",\n            marginTop: \"4px\",\n          }}\n        >\n          <span>공격 | Attack</span>\n          <span style={{ fontSize: \"9px\" }}>방어 | Block</span>\n        </div>\n      </div>\n    </Html>\n  );\n};\n\n/**\n * Memoized ActionButtons with custom comparison\n * Only re-renders when props change\n */\nexport const ActionButtons = React.memo(\n  ActionButtonsComponent,\n  (prevProps, nextProps) => {\n    return (\n      prevProps.disabled === nextProps.disabled &&\n      prevProps.bottom === nextProps.bottom &&\n      prevProps.right === nextProps.right &&\n      prevProps.opacity === nextProps.opacity &&\n      prevProps.onAttack === nextProps.onAttack &&\n      prevProps.onBlock === nextProps.onBlock\n    );\n  },\n);\n\nActionButtons.displayName = \"ActionButtons\";\n"],"mappings":"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"}
+{"version":3,"file":"ActionButtons.js","names":[],"sources":["../../../../src/components/shared/mobile/ActionButtons.tsx"],"sourcesContent":["/**\n * ActionButtons Component\n *\n * Touch-optimized action buttons for combat (Attack and Block)\n * Provides tactile combat controls with visual feedback and haptic response\n *\n * WCAG 2.1 Level AA Compliance:\n * - ARIA labels for screen readers\n * - Keyboard navigation (Enter, Space)\n * - Visible focus indicators (2px cyan border)\n * - 80x80px and 70x70px touch targets (exceeds 44x44px minimum)\n *\n * @module components/mobile/ActionButtons\n * @category Mobile Controls\n * @korean 액션 버튼\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, {\n  useCallback,\n  useState,\n  useMemo,\n  useRef,\n  useEffect,\n} from \"react\";\nimport { KOREAN_COLORS } from \"@/types/constants\";\nimport { triggerOptimizedHaptic } from \"./HapticController\";\nimport {\n  applyOptimizedUpdate,\n  createTransformStyle,\n  createFilterStyle,\n} from \"./TouchOptimizer\";\nimport { getColorRGB } from \"../../../utils/colorHelpers\";\nimport { handleKeyboardNav, getFocusStyle } from \"../../../utils/accessibility\";\nimport { createBilingualLabel } from \"../../../types/AccessibilityTypes\";\nimport { useThrottle } from \"../../../hooks/useThrottle\";\n\n/**\n * Event type for button interactions\n */\nexport type ButtonEventType = \"start\" | \"end\";\n\n/**\n * Props for ActionButtons component\n */\nexport interface ActionButtonsProps {\n  /** Callback when attack button is pressed */\n  readonly onAttack: () => void;\n  /** Callback when block button is pressed/released */\n  readonly onBlock: (eventType: ButtonEventType) => void;\n  /** Whether buttons are disabled */\n  readonly disabled?: boolean;\n  /** Position from bottom in pixels (default: 34 for safe area) */\n  readonly bottom?: number;\n  /** Position from right in pixels (default: 20) */\n  readonly right?: number;\n  /** Opacity of buttons (default: 0.8) */\n  readonly opacity?: number;\n}\n\n/**\n * ActionButtons Component\n *\n * Provides two primary combat action buttons:\n * - Attack Button (⚡): Primary combat action, 80x80px\n * - Block Button (🛡️): Defensive action, 70x70px\n *\n * Features:\n * - Touch-optimized with minimum 44x44px targets\n * - Attack button: 80x80px for primary action\n * - Block button: 70x70px for secondary action\n * - Visual feedback on press\n * - Haptic feedback for tactile response\n * - Korean cyberpunk theming\n * - Hold-to-block support\n *\n * Usage in Combat:\n * - Attack: Executes current stance technique\n * - Block: Activates defensive guard (hold for sustained block)\n *\n * @example\n * ```tsx\n * <ActionButtons\n *   onAttack={() => executeTechnique()}\n *   onBlock={(eventType) => {\n *     if (eventType === 'start') {\n *       activateBlock();\n *     } else {\n *       deactivateBlock();\n *     }\n *   }}\n *   disabled={isPaused}\n * />\n * ```\n *\n * @korean 액션버튼\n */\nconst ActionButtonsComponent: React.FC<ActionButtonsProps> = ({\n  onAttack,\n  onBlock,\n  disabled = false,\n  bottom = 34,\n  right = 20,\n  opacity = 0.8,\n}) => {\n  const [attackPressed, setAttackPressed] = useState(false);\n  const [blockPressed, setBlockPressed] = useState(false);\n  const [attackFocused, setAttackFocused] = useState(false);\n  const [blockFocused, setBlockFocused] = useState(false);\n\n  const attackButtonRef = useRef<HTMLButtonElement>(null);\n  const blockButtonRef = useRef<HTMLButtonElement>(null);\n\n  const throttledOnAttack = useThrottle(onAttack, 16);\n  const throttledOnBlock = useThrottle(onBlock, 16);\n\n  /**\n   * Handle attack button press with optimized latency (<16ms)\n   * Uses direct DOM manipulation for immediate visual feedback\n   */\n  const handleAttackStart = useCallback(\n    (e: React.TouchEvent | React.MouseEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      e.stopPropagation();\n\n      applyOptimizedUpdate(\n        attackButtonRef.current,\n        (element) => {\n          element.style.transform = createTransformStyle(true, 0.95);\n          element.style.filter = createFilterStyle(true, 1.2);\n        },\n        () => {\n          setAttackPressed(true);\n          throttledOnAttack();\n          triggerOptimizedHaptic(\"medium\");\n        },\n      );\n    },\n    [disabled, throttledOnAttack],\n  );\n\n  /**\n   * Handle attack button release with optimized latency\n   */\n  const handleAttackEnd = useCallback(\n    (e: React.TouchEvent | React.MouseEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      e.stopPropagation();\n\n      applyOptimizedUpdate(\n        attackButtonRef.current,\n        (element) => {\n          element.style.transform = createTransformStyle(false);\n          element.style.filter = createFilterStyle(false);\n        },\n        () => {\n          setAttackPressed(false);\n        },\n      );\n    },\n    [disabled],\n  );\n\n  /**\n   * Handle block button press with optimized latency (<16ms)\n   */\n  const handleBlockStart = useCallback(\n    (e: React.TouchEvent | React.MouseEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      e.stopPropagation();\n\n      applyOptimizedUpdate(\n        blockButtonRef.current,\n        (element) => {\n          element.style.transform = createTransformStyle(true, 0.95);\n          element.style.filter = createFilterStyle(true, 1.2);\n        },\n        () => {\n          setBlockPressed(true);\n          throttledOnBlock(\"start\");\n          triggerOptimizedHaptic(\"light\");\n        },\n      );\n    },\n    [disabled, throttledOnBlock],\n  );\n\n  /**\n   * Handle block button release with optimized latency\n   */\n  const handleBlockEnd = useCallback(\n    (e: React.TouchEvent | React.MouseEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      e.stopPropagation();\n\n      applyOptimizedUpdate(\n        blockButtonRef.current,\n        (element) => {\n          element.style.transform = createTransformStyle(false);\n          element.style.filter = createFilterStyle(false);\n        },\n        () => {\n          setBlockPressed(false);\n          throttledOnBlock(\"end\");\n        },\n      );\n    },\n    [disabled, throttledOnBlock],\n  );\n\n  /**\n   * Cleanup on unmount - reset any pending visual states.\n   * Note: Captures button refs at effect creation time to avoid stale closures.\n   * If the buttons unmount before cleanup runs, the captured variables will still\n   * reference the original DOM elements (now potentially detached), so style changes\n   * are harmless but may not be visible. The null checks primarily guard against\n   * refs that were never set in the first place.\n   */\n  useEffect(() => {\n    const attackButton = attackButtonRef.current;\n    const blockButton = blockButtonRef.current;\n\n    return () => {\n      if (attackButton) {\n        attackButton.style.transform = createTransformStyle(false);\n        attackButton.style.filter = createFilterStyle(false);\n      }\n      if (blockButton) {\n        blockButton.style.transform = createTransformStyle(false);\n        blockButton.style.filter = createFilterStyle(false);\n      }\n    };\n  }, []);\n\n  /**\n   * Handle keyboard navigation for attack button\n   */\n  const handleAttackKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n      handleKeyboardNav(e.nativeEvent, {\n        onActivate: () => {\n          setAttackPressed(true);\n          onAttack();\n          triggerOptimizedHaptic(\"medium\");\n          setTimeout(() => setAttackPressed(false), 150);\n        },\n      });\n    },\n    [disabled, onAttack],\n  );\n\n  /**\n   * Handle keyboard navigation for block button\n   */\n  const handleBlockKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n      handleKeyboardNav(e.nativeEvent, {\n        onActivate: () => {\n          setBlockPressed(true);\n          onBlock(\"start\");\n          triggerOptimizedHaptic(\"light\");\n          setTimeout(() => {\n            setBlockPressed(false);\n            onBlock(\"end\");\n          }, 150);\n        },\n      });\n    },\n    [disabled, onBlock],\n  );\n\n  const colors = useMemo(\n    () => ({\n      gold: getColorRGB(KOREAN_COLORS.ACCENT_GOLD),\n      blue: getColorRGB(KOREAN_COLORS.ACCENT_BLUE),\n      primary: getColorRGB(KOREAN_COLORS.PRIMARY_CYAN),\n    }),\n    [],\n  );\n\n  return (\n    <Html fullscreen>\n      <div\n        style={{\n          position: \"absolute\",\n          bottom: `${bottom}px`,\n          right: `${right}px`,\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: \"10px\",\n          opacity: disabled ? 0.3 : opacity,\n          pointerEvents: disabled ? \"none\" : \"auto\",\n        }}\n        data-testid=\"action-buttons\"\n      >\n        {/* Primary Attack Button */}\n        <button\n          ref={attackButtonRef}\n          onTouchStart={handleAttackStart}\n          onTouchEnd={handleAttackEnd}\n          onMouseDown={handleAttackStart}\n          onMouseUp={handleAttackEnd}\n          onMouseLeave={handleAttackEnd}\n          onKeyDown={handleAttackKeyDown}\n          onFocus={() => setAttackFocused(true)}\n          onBlur={() => setAttackFocused(false)}\n          style={{\n            width: \"80px\",\n            height: \"80px\",\n            borderRadius: \"50%\",\n            background: attackPressed\n              ? `rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 1)`\n              : `rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 0.9)`,\n            border: \"3px solid #fff\",\n            fontSize: \"28px\",\n            color: \"#000\",\n            fontWeight: \"bold\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            cursor: \"pointer\",\n            userSelect: \"none\",\n            touchAction: \"none\",\n            transition: \"transform 0.1s ease-out, filter 0.1s ease-out\",\n            transform: createTransformStyle(attackPressed, 0.95),\n            filter: createFilterStyle(attackPressed, 1.2),\n            willChange: \"transform, filter\", // GPU hint\n            boxShadow: attackPressed\n              ? `0 0 25px rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 1), inset 0 4px 8px rgba(0, 0, 0, 0.3)`\n              : `0 4px 12px rgba(0, 0, 0, 0.5), 0 0 15px rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 0.6)`,\n            ...getFocusStyle(attackFocused, {\n              outlineWidth: 3,\n              boxShadow: `0 0 0 4px rgba(${colors.primary.r}, ${colors.primary.g}, ${colors.primary.b}, 0.5), 0 0 25px rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 1)`,\n            }),\n          }}\n          disabled={disabled}\n          aria-label={createBilingualLabel(\"공격\", \"Attack\").label}\n          aria-pressed={attackPressed}\n          role=\"button\"\n          tabIndex={disabled ? -1 : 0}\n          data-testid=\"attack-button\"\n        >\n          ⚡\n        </button>\n\n        {/* Block Button */}\n        <button\n          ref={blockButtonRef}\n          onTouchStart={handleBlockStart}\n          onTouchEnd={handleBlockEnd}\n          onMouseDown={handleBlockStart}\n          onMouseUp={handleBlockEnd}\n          onMouseLeave={handleBlockEnd}\n          onKeyDown={handleBlockKeyDown}\n          onFocus={() => setBlockFocused(true)}\n          onBlur={() => setBlockFocused(false)}\n          style={{\n            width: \"70px\",\n            height: \"70px\",\n            borderRadius: \"50%\",\n            background: blockPressed\n              ? `rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 1)`\n              : `rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 0.9)`,\n            border: \"2px solid #fff\",\n            fontSize: \"24px\",\n            color: \"#fff\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            cursor: \"pointer\",\n            userSelect: \"none\",\n            touchAction: \"none\",\n            transition: \"transform 0.1s ease-out, filter 0.1s ease-out\",\n            transform: createTransformStyle(blockPressed, 0.95),\n            filter: createFilterStyle(blockPressed, 1.2),\n            willChange: \"transform, filter\", // GPU hint\n            boxShadow: blockPressed\n              ? `0 0 20px rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 1), inset 0 4px 8px rgba(0, 0, 0, 0.3)`\n              : `0 4px 10px rgba(0, 0, 0, 0.5), 0 0 12px rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 0.6)`,\n            ...getFocusStyle(blockFocused, {\n              outlineWidth: 3,\n              boxShadow: `0 0 0 4px rgba(${colors.primary.r}, ${colors.primary.g}, ${colors.primary.b}, 0.5), 0 0 20px rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 1)`,\n            }),\n          }}\n          disabled={disabled}\n          aria-label={createBilingualLabel(\"방어\", \"Block\").label}\n          aria-pressed={blockPressed}\n          role=\"button\"\n          tabIndex={disabled ? -1 : 0}\n          data-testid=\"block-button\"\n        >\n          🛡️\n        </button>\n\n        {/* Button Labels (Korean + English) */}\n        <div\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"2px\",\n            alignItems: \"center\",\n            fontSize: \"10px\",\n            color: `rgba(${colors.primary.r}, ${colors.primary.g}, ${colors.primary.b}, 0.9)`,\n            textShadow: \"0 1px 3px rgba(0, 0, 0, 0.8)\",\n            fontWeight: \"bold\",\n            marginTop: \"4px\",\n          }}\n        >\n          <span>공격 | Attack</span>\n          <span style={{ fontSize: \"9px\" }}>방어 | Block</span>\n        </div>\n      </div>\n    </Html>\n  );\n};\n\n/**\n * Memoized ActionButtons with custom comparison\n * Only re-renders when props change\n */\nexport const ActionButtons = React.memo(\n  ActionButtonsComponent,\n  (prevProps, nextProps) => {\n    return (\n      prevProps.disabled === nextProps.disabled &&\n      prevProps.bottom === nextProps.bottom &&\n      prevProps.right === nextProps.right &&\n      prevProps.opacity === nextProps.opacity &&\n      prevProps.onAttack === nextProps.onAttack &&\n      prevProps.onBlock === nextProps.onBlock\n    );\n  },\n);\n\nActionButtons.displayName = \"ActionButtons\";\n"],"mappings":"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"}

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

@@ -57,7 +57,6 @@ export interface GestureRecognizerPureProps {
  * />
  * ```
  *
- * @public
  * @korean 제스처인식기순수
  */
 export declare const GestureRecognizerPure: React.FC<GestureRecognizerPureProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"GestureRecognizerPure.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/mobile/GestureRecognizerPure.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EACL,YAAY,EAEb,MAAM,iCAAiC,CAAC;AAGzC;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,wCAAwC;IACxC,QAAQ,CAAC,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACpD,6CAA6C;IAC7C,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,sCAAsC;IACtC,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,qDAAqD;IACrD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CACpC;AAcD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAgMtE,CAAC"}
+{"version":3,"file":"GestureRecognizerPure.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/mobile/GestureRecognizerPure.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EACL,YAAY,EAEb,MAAM,iCAAiC,CAAC;AAGzC;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,wCAAwC;IACxC,QAAQ,CAAC,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACpD,6CAA6C;IAC7C,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,sCAAsC;IACtC,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,qDAAqD;IACrD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CACpC;AAcD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA6LtE,CAAC"}

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

@@ -48,7 +48,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * />
 * ```
 *
-* @public
 * @korean 제스처인식기순수
 */
 var GestureRecognizerPure = ({ onGesture, enabled = true, showFeedback = true, minSwipeDistance = 50 }) => {

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

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

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

@@ -31,7 +31,6 @@ export type DevicePerformanceTier = 'high' | 'medium' | 'low';
  * HapticController class
  * Manages haptic feedback with device-aware optimization
  *
- * @public
  * @korean 햅틱컨트롤러
  */
 export declare class HapticController {
@@ -91,7 +90,6 @@ export declare class HapticController {
      * haptic.trigger('strong');
      * ```
      *
-     * @public
      */
     trigger(intensity: HapticIntensity): boolean;
     /**
@@ -109,7 +107,6 @@ export declare class HapticController {
      * haptic.triggerCustom([30, 20, 30, 20, 50]);
      * ```
      *
-     * @public
      */
     triggerCustom(pattern: number | number[]): boolean;
     /**
@@ -118,21 +115,18 @@ export declare class HapticController {
      * @returns True if haptic was stopped
      * @korean 햅틱중지
      *
-     * @public
      */
     stop(): boolean;
     /**
      * Enable haptic feedback
      *
      * @korean 햅틱활성화
-     * @public
      */
     enable(): void;
     /**
      * Disable haptic feedback
      *
      * @korean 햅틱비활성화
-     * @public
      */
     disable(): void;
     /**
@@ -140,7 +134,6 @@ export declare class HapticController {
      *
      * @returns True if haptic is enabled
      * @korean 햅틱활성화상태
-     * @public
      */
     isHapticEnabled(): boolean;
     /**
@@ -148,7 +141,6 @@ export declare class HapticController {
      *
      * @returns Performance tier
      * @korean 성능등급가져오기
-     * @public
      */
     getPerformanceTier(): DevicePerformanceTier;
     /**
@@ -156,7 +148,6 @@ export declare class HapticController {
      *
      * @param intervalMs - Minimum interval in milliseconds
      * @korean 최소간격설정
-     * @public
      */
     setMinTriggerInterval(intervalMs: number): void;
 }
@@ -180,7 +171,6 @@ export declare class HapticController {
  * triggerOptimizedHaptic('strong');
  * ```
  *
- * @public
  */
 export declare function triggerOptimizedHaptic(intensity: HapticIntensity): boolean;
 /**
@@ -190,7 +180,6 @@ export declare function triggerOptimizedHaptic(intensity: HapticIntensity): bool
  * @returns True if haptic was triggered
  * @korean 커스텀햅틱실행
  *
- * @public
  */
 export declare function triggerCustomOptimizedHaptic(pattern: number | number[]): boolean;
 /**
@@ -198,7 +187,6 @@ export declare function triggerCustomOptimizedHaptic(pattern: number | number[])
  *
  * @returns True if haptic was stopped
  * @korean 햅틱중지
- * @public
  */
 export declare function stopOptimizedHaptic(): boolean;
 /**
@@ -206,7 +194,6 @@ export declare function stopOptimizedHaptic(): boolean;
  * Pre-configured for common combat scenarios
  *
  * @korean 전투 햅틱 패턴
- * @public
  */
 export declare const OptimizedCombatHaptics: {
     /**

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

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

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

@@ -51,7 +51,6 @@ var ADAPTIVE_HAPTIC_PATTERNS = {
 * HapticController class
 * Manages haptic feedback with device-aware optimization
 * 
-* @public
 * @korean 햅틱컨트롤러
 */
 var HapticController = class HapticController {
@@ -135,7 +134,6 @@ var HapticController = class HapticController {
 	* haptic.trigger('strong');
 	* ```
 	* 
-	* @public
 	*/
 	trigger(intensity) {
 		if (!this.isSupported || !this.isEnabled || intensity === "disabled") return false;
@@ -165,7 +163,6 @@ var HapticController = class HapticController {
 	* haptic.triggerCustom([30, 20, 30, 20, 50]);
 	* ```
 	* 
-	* @public
 	*/
 	triggerCustom(pattern) {
 		if (!this.isSupported || !this.isEnabled) return false;
@@ -188,7 +185,6 @@ var HapticController = class HapticController {
 	* @returns True if haptic was stopped
 	* @korean 햅틱중지
 	* 
-	* @public
 	*/
 	stop() {
 		if (!this.isSupported) return false;
@@ -203,7 +199,6 @@ var HapticController = class HapticController {
 	* Enable haptic feedback
 	* 
 	* @korean 햅틱활성화
-	* @public
 	*/
 	enable() {
 		this.isEnabled = true;
@@ -212,7 +207,6 @@ var HapticController = class HapticController {
 	* Disable haptic feedback
 	* 
 	* @korean 햅틱비활성화
-	* @public
 	*/
 	disable() {
 		this.isEnabled = false;
@@ -223,7 +217,6 @@ var HapticController = class HapticController {
 	* 
 	* @returns True if haptic is enabled
 	* @korean 햅틱활성화상태
-	* @public
 	*/
 	isHapticEnabled() {
 		return this.isSupported && this.isEnabled;
@@ -233,7 +226,6 @@ var HapticController = class HapticController {
 	* 
 	* @returns Performance tier
 	* @korean 성능등급가져오기
-	* @public
 	*/
 	getPerformanceTier() {
 		return this.performanceTier;
@@ -243,7 +235,6 @@ var HapticController = class HapticController {
 	* 
 	* @param intervalMs - Minimum interval in milliseconds
 	* @korean 최소간격설정
-	* @public
 	*/
 	setMinTriggerInterval(intervalMs) {
 		this.minTriggerInterval = Math.max(0, intervalMs);
@@ -269,7 +260,6 @@ var HapticController = class HapticController {
 * triggerOptimizedHaptic('strong');
 * ```
 * 
-* @public
 */
 function triggerOptimizedHaptic(intensity) {
 	return HapticController.getInstance().trigger(intensity);

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

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

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

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