blacktrigram 0.7.45 → 0.7.48

package/lib/utils/threeObjectPool.js.map

@@ -1 +1 @@
-{"version":3,"file":"threeObjectPool.js","names":[],"sources":["../../src/utils/threeObjectPool.ts"],"sourcesContent":["/**\n * Three.js Object Pool for Animation Performance\n * \n * Specialized object pooling for frequently created Three.js objects\n * to reduce garbage collection pressure during animation updates.\n * \n * Target: Reduce ~1,344 object allocations per frame to near-zero.\n * \n * @module utils/threeObjectPool\n * @category Performance\n * @korean Three.js객체풀\n */\n\nimport * as THREE from \"three\";\n\n/**\n * Pool for THREE.Euler objects used in bone rotations\n * \n * Reduces GC pressure from creating new Euler objects every frame.\n * Prewarmed with 200 objects (2 characters × 28 bones × 3.5 keyframes avg)\n * \n * @korean 오일러풀\n */\nclass EulerPool {\n  private pool: THREE.Euler[] = [];\n  private readonly maxSize: number;\n\n  constructor(maxSize = 500) {\n    this.maxSize = maxSize;\n  }\n\n  /**\n   * Acquire an Euler object from the pool\n   * @returns Pooled or new Euler object (reset to 0,0,0)\n   */\n  acquire(): THREE.Euler {\n    const euler = this.pool.pop();\n    if (euler) {\n      euler.set(0, 0, 0);\n      return euler;\n    }\n    return new THREE.Euler(0, 0, 0);\n  }\n\n  /**\n   * Return an Euler object to the pool\n   * @param euler - Euler object to return\n   */\n  release(euler: THREE.Euler): void {\n    if (this.pool.length < this.maxSize) {\n      this.pool.push(euler);\n    }\n  }\n\n  /**\n   * Pre-populate pool with objects\n   * @param count - Number of objects to create\n   */\n  prewarm(count: number): void {\n    const toCreate = Math.min(count, this.maxSize - this.pool.length);\n    for (let i = 0; i < toCreate; i++) {\n      this.pool.push(new THREE.Euler(0, 0, 0));\n    }\n  }\n\n  /**\n   * Get current pool size\n   */\n  get size(): number {\n    return this.pool.length;\n  }\n\n  /**\n   * Clear all pooled objects\n   */\n  clear(): void {\n    this.pool = [];\n  }\n}\n\n/**\n * Pool for THREE.Vector3 objects used in bone positions\n * \n * Reduces GC pressure from creating new Vector3 objects every frame.\n * Prewarmed with 200 objects (2 characters × 28 bones × 3.5 keyframes avg)\n * \n * @korean 벡터3풀\n */\nclass Vector3Pool {\n  private pool: THREE.Vector3[] = [];\n  private readonly maxSize: number;\n\n  constructor(maxSize = 500) {\n    this.maxSize = maxSize;\n  }\n\n  /**\n   * Acquire a Vector3 object from the pool\n   * @returns Pooled or new Vector3 object (reset to 0,0,0)\n   */\n  acquire(): THREE.Vector3 {\n    const vector = this.pool.pop();\n    if (vector) {\n      vector.set(0, 0, 0);\n      return vector;\n    }\n    return new THREE.Vector3(0, 0, 0);\n  }\n\n  /**\n   * Return a Vector3 object to the pool\n   * @param vector - Vector3 object to return\n   */\n  release(vector: THREE.Vector3): void {\n    if (this.pool.length < this.maxSize) {\n      this.pool.push(vector);\n    }\n  }\n\n  /**\n   * Pre-populate pool with objects\n   * @param count - Number of objects to create\n   */\n  prewarm(count: number): void {\n    const toCreate = Math.min(count, this.maxSize - this.pool.length);\n    for (let i = 0; i < toCreate; i++) {\n      this.pool.push(new THREE.Vector3(0, 0, 0));\n    }\n  }\n\n  /**\n   * Get current pool size\n   */\n  get size(): number {\n    return this.pool.length;\n  }\n\n  /**\n   * Clear all pooled objects\n   */\n  clear(): void {\n    this.pool = [];\n  }\n}\n\n/**\n * Pool for THREE.Matrix4 objects used in bone transformations\n * \n * Reduces GC pressure from creating new Matrix4 objects during calculations.\n * Prewarmed with 100 objects (2 characters × 28 bones × 2 temp matrices)\n * \n * @korean 행렬4풀\n */\nclass Matrix4Pool {\n  private pool: THREE.Matrix4[] = [];\n  private readonly maxSize: number;\n\n  constructor(maxSize = 200) {\n    this.maxSize = maxSize;\n  }\n\n  /**\n   * Acquire a Matrix4 object from the pool\n   * @returns Pooled or new Matrix4 object (reset to identity)\n   */\n  acquire(): THREE.Matrix4 {\n    const matrix = this.pool.pop();\n    if (matrix) {\n      matrix.identity();\n      return matrix;\n    }\n    return new THREE.Matrix4();\n  }\n\n  /**\n   * Return a Matrix4 object to the pool\n   * @param matrix - Matrix4 object to return\n   */\n  release(matrix: THREE.Matrix4): void {\n    if (this.pool.length < this.maxSize) {\n      this.pool.push(matrix);\n    }\n  }\n\n  /**\n   * Pre-populate pool with objects\n   * @param count - Number of objects to create\n   */\n  prewarm(count: number): void {\n    const toCreate = Math.min(count, this.maxSize - this.pool.length);\n    for (let i = 0; i < toCreate; i++) {\n      this.pool.push(new THREE.Matrix4());\n    }\n  }\n\n  /**\n   * Get current pool size\n   */\n  get size(): number {\n    return this.pool.length;\n  }\n\n  /**\n   * Clear all pooled objects\n   */\n  clear(): void {\n    this.pool = [];\n  }\n}\n\n/**\n * Pool for THREE.Quaternion objects used in rotations\n * \n * Reduces GC pressure from quaternion operations.\n * Prewarmed with 100 objects (2 characters × 28 bones × 2 temp quaternions)\n * \n * @korean 쿼터니언풀\n */\nclass QuaternionPool {\n  private pool: THREE.Quaternion[] = [];\n  private readonly maxSize: number;\n\n  constructor(maxSize = 200) {\n    this.maxSize = maxSize;\n  }\n\n  /**\n   * Acquire a Quaternion object from the pool\n   * @returns Pooled or new Quaternion object (reset to identity)\n   */\n  acquire(): THREE.Quaternion {\n    const quat = this.pool.pop();\n    if (quat) {\n      quat.set(0, 0, 0, 1);\n      return quat;\n    }\n    return new THREE.Quaternion(0, 0, 0, 1);\n  }\n\n  /**\n   * Return a Quaternion object to the pool\n   * @param quat - Quaternion object to return\n   */\n  release(quat: THREE.Quaternion): void {\n    if (this.pool.length < this.maxSize) {\n      this.pool.push(quat);\n    }\n  }\n\n  /**\n   * Pre-populate pool with objects\n   * @param count - Number of objects to create\n   */\n  prewarm(count: number): void {\n    const toCreate = Math.min(count, this.maxSize - this.pool.length);\n    for (let i = 0; i < toCreate; i++) {\n      this.pool.push(new THREE.Quaternion(0, 0, 0, 1));\n    }\n  }\n\n  /**\n   * Get current pool size\n   */\n  get size(): number {\n    return this.pool.length;\n  }\n\n  /**\n   * Clear all pooled objects\n   */\n  clear(): void {\n    this.pool = [];\n  }\n}\n\n/**\n * Pool for THREE.Color objects used in material and particle effects\n * \n * Reduces GC pressure from creating new Color objects for visual effects,\n * particle systems, and dynamic material updates.\n * Prewarmed with 50 objects for typical combat scenarios.\n * \n * @korean 색상풀\n */\nclass ColorPool {\n  private pool: THREE.Color[] = [];\n  private readonly maxSize: number;\n\n  constructor(maxSize = 100) {\n    this.maxSize = maxSize;\n  }\n\n  /**\n   * Acquire a Color object from the pool\n   * @returns Pooled or new Color object (reset to white)\n   */\n  acquire(): THREE.Color {\n    const color = this.pool.pop();\n    if (color) {\n      color.set(0xffffff);\n      return color;\n    }\n    return new THREE.Color(0xffffff);\n  }\n\n  /**\n   * Return a Color object to the pool\n   * @param color - Color object to return\n   */\n  release(color: THREE.Color): void {\n    if (this.pool.length < this.maxSize) {\n      this.pool.push(color);\n    }\n  }\n\n  /**\n   * Pre-populate pool with objects\n   * @param count - Number of objects to create\n   */\n  prewarm(count: number): void {\n    const toCreate = Math.min(count, this.maxSize - this.pool.length);\n    for (let i = 0; i < toCreate; i++) {\n      this.pool.push(new THREE.Color(0xffffff));\n    }\n  }\n\n  /**\n   * Get current pool size\n   */\n  get size(): number {\n    return this.pool.length;\n  }\n\n  /**\n   * Clear all pooled objects\n   */\n  clear(): void {\n    this.pool = [];\n  }\n}\n\n/**\n * Global Three.js object pools\n * \n * Singleton pools for animation system to reduce GC pressure.\n * Prewarmed during app initialization for optimal performance.\n * \n * @example\n * ```typescript\n * // Acquire temporary Euler for calculation\n * const tempEuler = ThreeObjectPools.euler.acquire();\n * tempEuler.set(x, y, z);\n * // ... use tempEuler ...\n * ThreeObjectPools.euler.release(tempEuler);\n * \n * // Acquire temporary Color for particle effect\n * const tempColor = ThreeObjectPools.color.acquire();\n * tempColor.set(0xff0000);\n * // ... use tempColor ...\n * ThreeObjectPools.color.release(tempColor);\n * \n * // Prewarm pools on app start\n * ThreeObjectPools.prewarmAll();\n * ```\n * \n * @korean Three.js객체풀들\n */\nexport const ThreeObjectPools = {\n  /** Euler rotation pool */\n  euler: new EulerPool(500),\n  \n  /** Vector3 position pool */\n  vector3: new Vector3Pool(500),\n  \n  /** Matrix4 transformation pool */\n  matrix4: new Matrix4Pool(200),\n  \n  /** Quaternion rotation pool */\n  quaternion: new QuaternionPool(200),\n\n  /** Color pool for materials and effects */\n  color: new ColorPool(100),\n\n  /**\n   * Pre-populate all pools with recommended sizes\n   * \n   * Call this during app initialization for optimal performance.\n   * Recommended sizes based on 2 characters with 28 bones each plus effects:\n   * - Euler: 200 objects (rotations)\n   * - Vector3: 200 objects (positions, velocities)\n   * - Matrix4: 100 objects (transformations)\n   * - Quaternion: 100 objects (rotations)\n   * - Color: 50 objects (particle effects, materials)\n   */\n  prewarmAll(): void {\n    this.euler.prewarm(200);\n    this.vector3.prewarm(200);\n    this.matrix4.prewarm(100);\n    this.quaternion.prewarm(100);\n    this.color.prewarm(50);\n  },\n\n  /**\n   * Get current status of all pools\n   * @returns Pool status for monitoring\n   */\n  getStatus(): {\n    euler: number;\n    vector3: number;\n    matrix4: number;\n    quaternion: number;\n    color: number;\n  } {\n    return {\n      euler: this.euler.size,\n      vector3: this.vector3.size,\n      matrix4: this.matrix4.size,\n      quaternion: this.quaternion.size,\n      color: this.color.size,\n    };\n  },\n\n  /**\n   * Clear all pools (useful for testing)\n   */\n  clearAll(): void {\n    this.euler.clear();\n    this.vector3.clear();\n    this.matrix4.clear();\n    this.quaternion.clear();\n    this.color.clear();\n  },\n} as const;\n\n/**\n * Helper to execute a function with temporary Euler objects\n * Automatically acquires and releases Euler objects.\n * \n * @param count - Number of Euler objects needed\n * @param fn - Function that uses the Euler objects\n * @returns Result of the function\n * \n * @example\n * ```typescript\n * const result = withTempEulers(2, ([euler1, euler2]) => {\n *   euler1.set(x1, y1, z1);\n *   euler2.set(x2, y2, z2);\n *   return calculateSomething(euler1, euler2);\n * });\n * ```\n * \n * @korean 임시오일러사용\n */\nexport function withTempEulers<T>(\n  count: number,\n  fn: (eulers: THREE.Euler[]) => T\n): T {\n  const eulers: THREE.Euler[] = [];\n  try {\n    for (let i = 0; i < count; i++) {\n      eulers.push(ThreeObjectPools.euler.acquire());\n    }\n    return fn(eulers);\n  } finally {\n    eulers.forEach((euler) => ThreeObjectPools.euler.release(euler));\n  }\n}\n\n/**\n * Helper to execute a function with temporary Vector3 objects\n * Automatically acquires and releases Vector3 objects.\n * \n * @param count - Number of Vector3 objects needed\n * @param fn - Function that uses the Vector3 objects\n * @returns Result of the function\n * \n * @korean 임시벡터3사용\n */\nexport function withTempVectors<T>(\n  count: number,\n  fn: (vectors: THREE.Vector3[]) => T\n): T {\n  const vectors: THREE.Vector3[] = [];\n  try {\n    for (let i = 0; i < count; i++) {\n      vectors.push(ThreeObjectPools.vector3.acquire());\n    }\n    return fn(vectors);\n  } finally {\n    vectors.forEach((vector) => ThreeObjectPools.vector3.release(vector));\n  }\n}\n\n/**\n * Helper to execute a function with temporary Matrix4 objects\n * Automatically acquires and releases Matrix4 objects.\n * \n * @param count - Number of Matrix4 objects needed\n * @param fn - Function that uses the Matrix4 objects\n * @returns Result of the function\n * \n * @korean 임시행렬4사용\n */\nexport function withTempMatrices<T>(\n  count: number,\n  fn: (matrices: THREE.Matrix4[]) => T\n): T {\n  const matrices: THREE.Matrix4[] = [];\n  try {\n    for (let i = 0; i < count; i++) {\n      matrices.push(ThreeObjectPools.matrix4.acquire());\n    }\n    return fn(matrices);\n  } finally {\n    matrices.forEach((matrix) => ThreeObjectPools.matrix4.release(matrix));\n  }\n}\n\n/**\n * Helper to execute a function with temporary Color objects\n * Automatically acquires and releases Color objects.\n * \n * @param count - Number of Color objects needed\n * @param fn - Function that uses the Color objects\n * @returns Result of the function\n * \n * @example\n * ```typescript\n * const avgColor = withTempColors(2, ([color1, color2]) => {\n *   color1.set(0xff0000);\n *   color2.set(0x0000ff);\n *   return color1.lerp(color2, 0.5);\n * });\n * ```\n * \n * @korean 임시색상사용\n */\nexport function withTempColors<T>(\n  count: number,\n  fn: (colors: THREE.Color[]) => T\n): T {\n  const colors: THREE.Color[] = [];\n  try {\n    for (let i = 0; i < count; i++) {\n      colors.push(ThreeObjectPools.color.acquire());\n    }\n    return fn(colors);\n  } finally {\n    colors.forEach((color) => ThreeObjectPools.color.release(color));\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"threeObjectPool.js","names":[],"sources":["../../src/utils/threeObjectPool.ts"],"sourcesContent":["/**\n * Three.js Object Pool for Animation Performance\n * \n * Specialized object pooling for frequently created Three.js objects\n * to reduce garbage collection pressure during animation updates.\n * \n * Target: Reduce ~1,344 object allocations per frame to near-zero.\n * \n * @module utils/threeObjectPool\n * @category Performance\n * @korean Three.js객체풀\n */\n\nimport * as THREE from \"three\";\n\n/**\n * Pool for THREE.Euler objects used in bone rotations\n * \n * Reduces GC pressure from creating new Euler objects every frame.\n * Prewarmed with 200 objects (2 characters × 28 bones × 3.5 keyframes avg)\n * \n * @korean 오일러풀\n */\nclass EulerPool {\n  private pool: THREE.Euler[] = [];\n  private readonly maxSize: number;\n\n  constructor(maxSize = 500) {\n    this.maxSize = maxSize;\n  }\n\n  /**\n   * Acquire an Euler object from the pool\n   * @returns Pooled or new Euler object (reset to 0,0,0)\n   */\n  acquire(): THREE.Euler {\n    const euler = this.pool.pop();\n    if (euler) {\n      euler.set(0, 0, 0);\n      return euler;\n    }\n    return new THREE.Euler(0, 0, 0);\n  }\n\n  /**\n   * Return an Euler object to the pool\n   * @param euler - Euler object to return\n   */\n  release(euler: THREE.Euler): void {\n    if (this.pool.length < this.maxSize) {\n      this.pool.push(euler);\n    }\n  }\n\n  /**\n   * Pre-populate pool with objects\n   * @param count - Number of objects to create\n   */\n  prewarm(count: number): void {\n    const toCreate = Math.min(count, this.maxSize - this.pool.length);\n    for (let i = 0; i < toCreate; i++) {\n      this.pool.push(new THREE.Euler(0, 0, 0));\n    }\n  }\n\n  /**\n   * Get current pool size\n   */\n  get size(): number {\n    return this.pool.length;\n  }\n\n  /**\n   * Clear all pooled objects\n   */\n  clear(): void {\n    this.pool = [];\n  }\n}\n\n/**\n * Pool for THREE.Vector3 objects used in bone positions\n * \n * Reduces GC pressure from creating new Vector3 objects every frame.\n * Prewarmed with 200 objects (2 characters × 28 bones × 3.5 keyframes avg)\n * \n * @korean 벡터3풀\n */\nclass Vector3Pool {\n  private pool: THREE.Vector3[] = [];\n  private readonly maxSize: number;\n\n  constructor(maxSize = 500) {\n    this.maxSize = maxSize;\n  }\n\n  /**\n   * Acquire a Vector3 object from the pool\n   * @returns Pooled or new Vector3 object (reset to 0,0,0)\n   */\n  acquire(): THREE.Vector3 {\n    const vector = this.pool.pop();\n    if (vector) {\n      vector.set(0, 0, 0);\n      return vector;\n    }\n    return new THREE.Vector3(0, 0, 0);\n  }\n\n  /**\n   * Return a Vector3 object to the pool\n   * @param vector - Vector3 object to return\n   */\n  release(vector: THREE.Vector3): void {\n    if (this.pool.length < this.maxSize) {\n      this.pool.push(vector);\n    }\n  }\n\n  /**\n   * Pre-populate pool with objects\n   * @param count - Number of objects to create\n   */\n  prewarm(count: number): void {\n    const toCreate = Math.min(count, this.maxSize - this.pool.length);\n    for (let i = 0; i < toCreate; i++) {\n      this.pool.push(new THREE.Vector3(0, 0, 0));\n    }\n  }\n\n  /**\n   * Get current pool size\n   */\n  get size(): number {\n    return this.pool.length;\n  }\n\n  /**\n   * Clear all pooled objects\n   */\n  clear(): void {\n    this.pool = [];\n  }\n}\n\n/**\n * Pool for THREE.Matrix4 objects used in bone transformations\n * \n * Reduces GC pressure from creating new Matrix4 objects during calculations.\n * Prewarmed with 100 objects (2 characters × 28 bones × 2 temp matrices)\n * \n * @korean 행렬4풀\n */\nclass Matrix4Pool {\n  private pool: THREE.Matrix4[] = [];\n  private readonly maxSize: number;\n\n  constructor(maxSize = 200) {\n    this.maxSize = maxSize;\n  }\n\n  /**\n   * Acquire a Matrix4 object from the pool\n   * @returns Pooled or new Matrix4 object (reset to identity)\n   */\n  acquire(): THREE.Matrix4 {\n    const matrix = this.pool.pop();\n    if (matrix) {\n      matrix.identity();\n      return matrix;\n    }\n    return new THREE.Matrix4();\n  }\n\n  /**\n   * Return a Matrix4 object to the pool\n   * @param matrix - Matrix4 object to return\n   */\n  release(matrix: THREE.Matrix4): void {\n    if (this.pool.length < this.maxSize) {\n      this.pool.push(matrix);\n    }\n  }\n\n  /**\n   * Pre-populate pool with objects\n   * @param count - Number of objects to create\n   */\n  prewarm(count: number): void {\n    const toCreate = Math.min(count, this.maxSize - this.pool.length);\n    for (let i = 0; i < toCreate; i++) {\n      this.pool.push(new THREE.Matrix4());\n    }\n  }\n\n  /**\n   * Get current pool size\n   */\n  get size(): number {\n    return this.pool.length;\n  }\n\n  /**\n   * Clear all pooled objects\n   */\n  clear(): void {\n    this.pool = [];\n  }\n}\n\n/**\n * Pool for THREE.Quaternion objects used in rotations\n * \n * Reduces GC pressure from quaternion operations.\n * Prewarmed with 100 objects (2 characters × 28 bones × 2 temp quaternions)\n * \n * @korean 쿼터니언풀\n */\nclass QuaternionPool {\n  private pool: THREE.Quaternion[] = [];\n  private readonly maxSize: number;\n\n  constructor(maxSize = 200) {\n    this.maxSize = maxSize;\n  }\n\n  /**\n   * Acquire a Quaternion object from the pool\n   * @returns Pooled or new Quaternion object (reset to identity)\n   */\n  acquire(): THREE.Quaternion {\n    const quat = this.pool.pop();\n    if (quat) {\n      quat.set(0, 0, 0, 1);\n      return quat;\n    }\n    return new THREE.Quaternion(0, 0, 0, 1);\n  }\n\n  /**\n   * Return a Quaternion object to the pool\n   * @param quat - Quaternion object to return\n   */\n  release(quat: THREE.Quaternion): void {\n    if (this.pool.length < this.maxSize) {\n      this.pool.push(quat);\n    }\n  }\n\n  /**\n   * Pre-populate pool with objects\n   * @param count - Number of objects to create\n   */\n  prewarm(count: number): void {\n    const toCreate = Math.min(count, this.maxSize - this.pool.length);\n    for (let i = 0; i < toCreate; i++) {\n      this.pool.push(new THREE.Quaternion(0, 0, 0, 1));\n    }\n  }\n\n  /**\n   * Get current pool size\n   */\n  get size(): number {\n    return this.pool.length;\n  }\n\n  /**\n   * Clear all pooled objects\n   */\n  clear(): void {\n    this.pool = [];\n  }\n}\n\n/**\n * Pool for THREE.Color objects used in material and particle effects\n * \n * Reduces GC pressure from creating new Color objects for visual effects,\n * particle systems, and dynamic material updates.\n * Prewarmed with 50 objects for typical combat scenarios.\n * \n * @korean 색상풀\n */\nclass ColorPool {\n  private pool: THREE.Color[] = [];\n  private readonly maxSize: number;\n\n  constructor(maxSize = 100) {\n    this.maxSize = maxSize;\n  }\n\n  /**\n   * Acquire a Color object from the pool\n   * @returns Pooled or new Color object (reset to white)\n   */\n  acquire(): THREE.Color {\n    const color = this.pool.pop();\n    if (color) {\n      color.set(0xffffff);\n      return color;\n    }\n    return new THREE.Color(0xffffff);\n  }\n\n  /**\n   * Return a Color object to the pool\n   * @param color - Color object to return\n   */\n  release(color: THREE.Color): void {\n    if (this.pool.length < this.maxSize) {\n      this.pool.push(color);\n    }\n  }\n\n  /**\n   * Pre-populate pool with objects\n   * @param count - Number of objects to create\n   */\n  prewarm(count: number): void {\n    const toCreate = Math.min(count, this.maxSize - this.pool.length);\n    for (let i = 0; i < toCreate; i++) {\n      this.pool.push(new THREE.Color(0xffffff));\n    }\n  }\n\n  /**\n   * Get current pool size\n   */\n  get size(): number {\n    return this.pool.length;\n  }\n\n  /**\n   * Clear all pooled objects\n   */\n  clear(): void {\n    this.pool = [];\n  }\n}\n\n/**\n * Global Three.js object pools\n * \n * Singleton pools for animation system to reduce GC pressure.\n * Prewarmed during app initialization for optimal performance.\n * \n * @example\n * ```typescript\n * // Acquire temporary Euler for calculation\n * const tempEuler = ThreeObjectPools.euler.acquire();\n * tempEuler.set(x, y, z);\n * // ... use tempEuler ...\n * ThreeObjectPools.euler.release(tempEuler);\n * \n * // Acquire temporary Color for particle effect\n * const tempColor = ThreeObjectPools.color.acquire();\n * tempColor.set(0xff0000);\n * // ... use tempColor ...\n * ThreeObjectPools.color.release(tempColor);\n * \n * // Prewarm pools on app start\n * ThreeObjectPools.prewarmAll();\n * ```\n * \n * @korean Three.js객체풀들\n */\nexport const ThreeObjectPools = {\n  /** Euler rotation pool */\n  euler: new EulerPool(500),\n  \n  /** Vector3 position pool */\n  vector3: new Vector3Pool(500),\n  \n  /** Matrix4 transformation pool */\n  matrix4: new Matrix4Pool(200),\n  \n  /** Quaternion rotation pool */\n  quaternion: new QuaternionPool(200),\n\n  /** Color pool for materials and effects */\n  color: new ColorPool(100),\n\n  /**\n   * Pre-populate all pools with recommended sizes\n   * \n   * Call this during app initialization for optimal performance.\n   * Recommended sizes based on 2 characters with 28 bones each plus effects:\n   * - Euler: 200 objects (rotations)\n   * - Vector3: 200 objects (positions, velocities)\n   * - Matrix4: 100 objects (transformations)\n   * - Quaternion: 100 objects (rotations)\n   * - Color: 50 objects (particle effects, materials)\n   */\n  prewarmAll(): void {\n    this.euler.prewarm(200);\n    this.vector3.prewarm(200);\n    this.matrix4.prewarm(100);\n    this.quaternion.prewarm(100);\n    this.color.prewarm(50);\n  },\n\n  /**\n   * Get current status of all pools\n   * @returns Pool status for monitoring\n   */\n  getStatus(): {\n    euler: number;\n    vector3: number;\n    matrix4: number;\n    quaternion: number;\n    color: number;\n  } {\n    return {\n      euler: this.euler.size,\n      vector3: this.vector3.size,\n      matrix4: this.matrix4.size,\n      quaternion: this.quaternion.size,\n      color: this.color.size,\n    };\n  },\n\n  /**\n   * Clear all pools (useful for testing)\n   */\n  clearAll(): void {\n    this.euler.clear();\n    this.vector3.clear();\n    this.matrix4.clear();\n    this.quaternion.clear();\n    this.color.clear();\n  },\n} as const;\n\n/**\n * Helper to execute a function with temporary Euler objects\n * Automatically acquires and releases Euler objects.\n * \n * @param count - Number of Euler objects needed\n * @param fn - Function that uses the Euler objects\n * @returns Result of the function\n * \n * @example\n * ```typescript\n * const result = withTempEulers(2, ([euler1, euler2]) => {\n *   euler1.set(x1, y1, z1);\n *   euler2.set(x2, y2, z2);\n *   return calculateSomething(euler1, euler2);\n * });\n * ```\n * \n * @korean 임시오일러사용\n */\nexport function withTempEulers<T>(\n  count: number,\n  fn: (eulers: THREE.Euler[]) => T\n): T {\n  const eulers: THREE.Euler[] = [];\n  try {\n    for (let i = 0; i < count; i++) {\n      eulers.push(ThreeObjectPools.euler.acquire());\n    }\n    return fn(eulers);\n  } finally {\n    eulers.forEach((euler) => ThreeObjectPools.euler.release(euler));\n  }\n}\n\n/**\n * Helper to execute a function with temporary Vector3 objects\n * Automatically acquires and releases Vector3 objects.\n * \n * @param count - Number of Vector3 objects needed\n * @param fn - Function that uses the Vector3 objects\n * @returns Result of the function\n * \n * @korean 임시벡터3사용\n */\nexport function withTempVectors<T>(\n  count: number,\n  fn: (vectors: THREE.Vector3[]) => T\n): T {\n  const vectors: THREE.Vector3[] = [];\n  try {\n    for (let i = 0; i < count; i++) {\n      vectors.push(ThreeObjectPools.vector3.acquire());\n    }\n    return fn(vectors);\n  } finally {\n    vectors.forEach((vector) => ThreeObjectPools.vector3.release(vector));\n  }\n}\n\n/**\n * Helper to execute a function with temporary Matrix4 objects\n * Automatically acquires and releases Matrix4 objects.\n * \n * @param count - Number of Matrix4 objects needed\n * @param fn - Function that uses the Matrix4 objects\n * @returns Result of the function\n * \n * @korean 임시행렬4사용\n */\nexport function withTempMatrices<T>(\n  count: number,\n  fn: (matrices: THREE.Matrix4[]) => T\n): T {\n  const matrices: THREE.Matrix4[] = [];\n  try {\n    for (let i = 0; i < count; i++) {\n      matrices.push(ThreeObjectPools.matrix4.acquire());\n    }\n    return fn(matrices);\n  } finally {\n    matrices.forEach((matrix) => ThreeObjectPools.matrix4.release(matrix));\n  }\n}\n\n/**\n * Helper to execute a function with temporary Color objects\n * Automatically acquires and releases Color objects.\n * \n * @param count - Number of Color objects needed\n * @param fn - Function that uses the Color objects\n * @returns Result of the function\n * \n * @example\n * ```typescript\n * const avgColor = withTempColors(2, ([color1, color2]) => {\n *   color1.set(0xff0000);\n *   color2.set(0x0000ff);\n *   return color1.lerp(color2, 0.5);\n * });\n * ```\n * \n * @korean 임시색상사용\n */\nexport function withTempColors<T>(\n  count: number,\n  fn: (colors: THREE.Color[]) => T\n): T {\n  const colors: THREE.Color[] = [];\n  try {\n    for (let i = 0; i < count; i++) {\n      colors.push(ThreeObjectPools.color.acquire());\n    }\n    return fn(colors);\n  } finally {\n    colors.forEach((color) => ThreeObjectPools.color.release(color));\n  }\n}\n"],"mappings":"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"}

package/lib/utils/visualEffects.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualEffects.js","names":[],"sources":["../../src/utils/visualEffects.ts"],"sourcesContent":["/**\n * Visual Effects Utilities for Korean Cyberpunk Aesthetic\n *\n * Provides advanced visual effects for HTML overlay components including:\n * - Neon glow effects (box-shadow, text-shadow)\n * - Depth effects (layered shadows, gradients, backdrop-blur)\n * - Smooth transitions and animations\n * - Korean font rendering optimization\n * - Hover and focus state generators\n *\n * All effects follow Korean martial arts cyberpunk theme with 60fps performance target.\n *\n * @module utils/visualEffects\n * @category UI Utilities\n * @korean 시각효과유틸리티\n */\n\nimport { KOREAN_COLORS } from \"@/types/constants\";\nimport { hexToRgbaString } from \"./colorUtils\";\n\n/**\n * Neon glow intensity levels\n * @korean 네온글로우강도\n */\nexport type GlowIntensity = \"subtle\" | \"medium\" | \"strong\" | \"intense\";\n\n/**\n * Hover state animation types\n * @korean 호버상태애니메이션\n */\nexport type HoverAnimationType =\n  | \"glow\"\n  | \"scale\"\n  | \"lift\"\n  | \"pulse\"\n  | \"combined\";\n\n/**\n * Transition timing presets\n * @korean 전환타이밍프리셋\n */\nexport type TransitionTiming = \"fast\" | \"normal\" | \"slow\" | \"smooth\";\n\n/**\n * Depth effect layer configuration\n * @korean 깊이효과레이어설정\n */\nexport interface DepthEffectConfig {\n  readonly layers: number;\n  readonly baseOffset: number;\n  readonly baseBlur: number;\n  readonly color: number;\n  readonly opacity: number;\n}\n\n/**\n * Get neon glow effect CSS string\n *\n * Creates cyberpunk-style neon glow using box-shadow with Korean colors.\n * Supports multiple intensity levels for different UI elements.\n *\n * @param color - Hex color value from KOREAN_COLORS\n * @param intensity - Glow intensity level\n * @param includeInset - Whether to include inset glow (default: true)\n * @returns CSS box-shadow string with neon glow effect\n *\n * @example\n * ```typescript\n * const glow = getNeonGlowEffect(KOREAN_COLORS.PRIMARY_CYAN, 'medium', true);\n * // Returns: \"0 0 20px rgba(0,230,230,0.6), inset 0 0 10px rgba(0,230,230,0.3)\"\n * // Note: Color conversion is handled by hexToRgbaString utility\n * ```\n *\n * @korean 네온글로우효과얻기\n */\nexport function getNeonGlowEffect(\n  color: number,\n  intensity: GlowIntensity = \"medium\",\n  includeInset: boolean = true,\n): string {\n  const glowConfig = {\n    subtle: { outer: 10, outerOpacity: 0.4, inner: 5, innerOpacity: 0.2 },\n    medium: { outer: 20, outerOpacity: 0.6, inner: 10, innerOpacity: 0.3 },\n    strong: { outer: 30, outerOpacity: 0.8, inner: 15, innerOpacity: 0.4 },\n    intense: { outer: 40, outerOpacity: 1.0, inner: 20, innerOpacity: 0.5 },\n  };\n\n  const config = glowConfig[intensity];\n  const outerGlow = `0 0 ${config.outer}px ${hexToRgbaString(color, config.outerOpacity)}`;\n  const insetGlow = includeInset\n    ? `, inset 0 0 ${config.inner}px ${hexToRgbaString(color, config.innerOpacity)}`\n    : \"\";\n\n  return `${outerGlow}${insetGlow}`;\n}\n\n/**\n * Get neon text shadow effect\n *\n * Creates glowing text effect for Korean and English text using text-shadow.\n * Multiple shadow layers create authentic neon glow appearance.\n *\n * @param color - Hex color value from KOREAN_COLORS\n * @param intensity - Glow intensity level\n * @returns CSS text-shadow string with neon glow\n *\n * @example\n * ```typescript\n * const textGlow = getNeonTextShadow(KOREAN_COLORS.ACCENT_GOLD, 'strong');\n * // Returns: \"0 0 10px rgba(255,196,0,0.8), 0 0 20px rgba(255,196,0,0.6), 0 0 30px rgba(255,196,0,0.4)\"\n * ```\n *\n * @korean 네온텍스트그림자얻기\n */\nexport function getNeonTextShadow(\n  color: number,\n  intensity: GlowIntensity = \"medium\",\n): string {\n  const shadowConfig = {\n    subtle: [\n      { blur: 5, opacity: 0.6 },\n      { blur: 10, opacity: 0.4 },\n    ],\n    medium: [\n      { blur: 10, opacity: 0.8 },\n      { blur: 20, opacity: 0.6 },\n      { blur: 30, opacity: 0.4 },\n    ],\n    strong: [\n      { blur: 15, opacity: 1.0 },\n      { blur: 30, opacity: 0.8 },\n      { blur: 45, opacity: 0.6 },\n    ],\n    intense: [\n      { blur: 20, opacity: 1.0 },\n      { blur: 40, opacity: 0.9 },\n      { blur: 60, opacity: 0.7 },\n      { blur: 80, opacity: 0.5 },\n    ],\n  };\n\n  const shadows = shadowConfig[intensity];\n  return shadows\n    .map(\n      ({ blur, opacity }) => `0 0 ${blur}px ${hexToRgbaString(color, opacity)}`,\n    )\n    .join(\", \");\n}\n\n/**\n * Get layered depth effect\n *\n * Creates depth using multiple shadow layers with increasing offset and blur.\n * Provides 3D-like appearance for Korean-themed UI panels.\n *\n * @param config - Depth effect configuration\n * @returns CSS box-shadow string with layered depth\n *\n * @example\n * ```typescript\n * const depth = getLayeredDepthEffect({\n *   layers: 3,\n *   baseOffset: 2,\n *   baseBlur: 4,\n *   color: KOREAN_COLORS.BLACK_SOLID,\n *   opacity: 0.5,\n * });\n * ```\n *\n * @korean 레이어깊이효과얻기\n */\nexport function getLayeredDepthEffect(config: DepthEffectConfig): string {\n  const { layers, baseOffset, baseBlur, color, opacity } = config;\n  const shadows: string[] = [];\n\n  for (let i = 1; i <= layers; i++) {\n    const offset = baseOffset * i;\n    const blur = baseBlur * i;\n    const layerOpacity = opacity * (1 - ((i - 1) / layers) * 0.3); // Fade each layer\n    shadows.push(\n      `0 ${offset}px ${blur}px ${hexToRgbaString(color, layerOpacity)}`,\n    );\n  }\n\n  return shadows.join(\", \");\n}\n\n/**\n * Get cyberpunk gradient background\n *\n * Creates Korean-themed gradient with cyberpunk colors.\n * Supports both linear and radial gradients.\n *\n * @param primaryColor - Primary hex color\n * @param secondaryColor - Secondary hex color\n * @param angle - Gradient angle in degrees (default: 135)\n * @param type - Gradient type ('linear' | 'radial')\n * @returns CSS gradient string\n *\n * @example\n * ```typescript\n * const gradient = getCyberpunkGradient(\n *   KOREAN_COLORS.PRIMARY_CYAN,\n *   KOREAN_COLORS.UI_BACKGROUND_DARK,\n *   135,\n *   'linear'\n * );\n * ```\n *\n * @korean 사이버펑크그라디언트얻기\n */\nexport function getCyberpunkGradient(\n  primaryColor: number,\n  secondaryColor: number,\n  angle: number = 135,\n  type: \"linear\" | \"radial\" = \"linear\",\n): string {\n  const color1 = hexToRgbaString(primaryColor, 0.2);\n  const color2 = hexToRgbaString(secondaryColor, 0.9);\n\n  if (type === \"radial\") {\n    return `radial-gradient(circle at top left, ${color1} 0%, ${color2} 100%)`;\n  }\n\n  return `linear-gradient(${angle}deg, ${color1} 0%, ${color2} 100%)`;\n}\n\n/**\n * Get smooth transition CSS\n *\n * Returns standardized transition string for consistent animations.\n * All transitions target 60fps performance.\n *\n * @param properties - CSS properties to transition (default: 'all')\n * @param timing - Timing preset\n * @returns CSS transition string\n *\n * @example\n * ```typescript\n * const transition = getSmoothTransition('all', 'normal');\n * // Returns: \"all 0.2s ease-in-out\"\n * ```\n *\n * @korean 부드러운전환얻기\n */\nexport function getSmoothTransition(\n  properties: string = \"all\",\n  timing: TransitionTiming = \"normal\",\n): string {\n  const timingConfig = {\n    fast: { duration: \"0.15s\", easing: \"ease-out\" },\n    normal: { duration: \"0.2s\", easing: \"ease-in-out\" },\n    slow: { duration: \"0.3s\", easing: \"ease-in-out\" },\n    smooth: { duration: \"0.25s\", easing: \"cubic-bezier(0.4, 0, 0.2, 1)\" },\n  };\n\n  const config = timingConfig[timing];\n  return `${properties} ${config.duration} ${config.easing}`;\n}\n\n/**\n * Get Korean font optimization styles\n *\n * Applies optimal font rendering for Korean characters (Hangul).\n * Includes anti-aliasing, subpixel rendering, and letter spacing.\n *\n * @param fontSize - Font size in pixels\n * @param fontWeight - Font weight (default: 'normal')\n * @returns React.CSSProperties with Korean font optimization\n *\n * @example\n * ```typescript\n * const fontStyle = getKoreanFontOptimization(16, 'bold');\n * // Returns: { fontSize: '16px', WebkitFontSmoothing: 'antialiased', ... }\n * ```\n *\n * @korean 한글폰트최적화얻기\n */\nexport function getKoreanFontOptimization(\n  fontSize: number,\n  fontWeight: \"normal\" | \"bold\" = \"normal\",\n): React.CSSProperties & {\n  WebkitFontSmoothing?: string;\n  MozOsxFontSmoothing?: string;\n} {\n  return {\n    fontSize: `${fontSize}px`,\n    fontWeight,\n    WebkitFontSmoothing: \"antialiased\",\n    MozOsxFontSmoothing: \"grayscale\",\n    textRendering: \"optimizeLegibility\",\n    letterSpacing: \"0.02em\",\n    // Korean characters need slightly more line height\n    lineHeight: 1.5,\n  };\n}\n\n/**\n * Map numeric glow intensity to GlowIntensity type\n *\n * Helper to standardize glow intensity mapping across components.\n * Converts numeric intensity values to discrete levels.\n *\n * @param glowIntensity - Numeric glow intensity (0-2+ scale)\n * @returns GlowIntensity level (\"subtle\", \"medium\", \"strong\", \"intense\")\n *\n * Mapping thresholds:\n * - intense: >= 1.5\n * - strong: >= 1.0\n * - medium: >= 0.6\n * - subtle: < 0.6\n *\n * @example\n * ```typescript\n * const level = mapGlowIntensityLevel(0.8);\n * // Returns: \"medium\"\n * mapGlowIntensityLevel(2.0);\n * // Returns: \"intense\"\n * ```\n *\n * @korean 광도레벨매핑\n */\nexport function mapGlowIntensityLevel(glowIntensity: number): GlowIntensity {\n  if (glowIntensity >= 1.5) return \"intense\";\n  if (glowIntensity >= 1.0) return \"strong\";\n  if (glowIntensity >= 0.6) return \"medium\";\n  return \"subtle\";\n}\n\n/**\n * Get hover state styles with glow effect\n *\n * Generates hover state styles with Korean cyberpunk animations.\n * Includes glow intensification, scale, and lift effects.\n *\n * @param baseColor - Base hex color\n * @param animation - Animation type\n * @param intensity - Glow intensity for hover state\n * @returns React.CSSProperties for hover state\n *\n * @example\n * ```typescript\n * const hoverStyle = getHoverStateStyles(\n *   KOREAN_COLORS.PRIMARY_CYAN,\n *   'combined',\n *   'strong'\n * );\n * ```\n *\n * @korean 호버상태스타일얻기\n */\nexport function getHoverStateStyles(\n  baseColor: number,\n  animation: HoverAnimationType = \"combined\",\n  intensity: GlowIntensity = \"strong\",\n): React.CSSProperties {\n  const baseStyles: React.CSSProperties = {\n    transition: getSmoothTransition(\"all\", \"normal\"),\n    cursor: \"pointer\",\n  };\n\n  const glowStyles: React.CSSProperties = {\n    boxShadow: getNeonGlowEffect(baseColor, intensity, true),\n  };\n\n  const scaleStyles: React.CSSProperties = {\n    transform: \"scale(1.05)\",\n  };\n\n  const liftStyles: React.CSSProperties = {\n    transform: \"translateY(-2px)\",\n    boxShadow: getLayeredDepthEffect({\n      layers: 3,\n      baseOffset: 4,\n      baseBlur: 8,\n      color: KOREAN_COLORS.BLACK_SOLID,\n      opacity: 0.6,\n    }),\n  };\n\n  const pulseStyles: React.CSSProperties = {\n    animation: \"pulse 1.5s ease-in-out infinite\",\n  };\n\n  switch (animation) {\n    case \"glow\":\n      return { ...baseStyles, ...glowStyles };\n    case \"scale\":\n      return { ...baseStyles, ...scaleStyles };\n    case \"lift\":\n      return { ...baseStyles, ...liftStyles };\n    case \"pulse\":\n      return { ...baseStyles, ...pulseStyles };\n    case \"combined\":\n      return {\n        ...baseStyles,\n        ...glowStyles,\n        transform: \"scale(1.02) translateY(-1px)\",\n      };\n    default:\n      return baseStyles;\n  }\n}\n\n/**\n * Get focus state styles with accessibility\n *\n * Creates WCAG-compliant focus indicators with Korean cyberpunk styling.\n * Ensures 2px border with high contrast (4.5:1 minimum).\n *\n * Note: While outline is set to \"none\", the custom 2px border provides\n * equivalent accessibility. For users relying on high-contrast mode or\n * custom browser settings, consider using outline-offset as an additional\n * fallback or ensure the custom border has sufficient contrast (4.5:1+).\n *\n * @param color - Hex color for focus indicator\n * @param includeGlow - Whether to include glow effect (default: true)\n * @returns React.CSSProperties for focus state\n *\n * @example\n * ```typescript\n * const focusStyle = getFocusStateStyles(KOREAN_COLORS.ACCENT_GOLD, true);\n * ```\n *\n * @korean 포커스상태스타일얻기\n */\nexport function getFocusStateStyles(\n  color: number,\n  includeGlow: boolean = true,\n): React.CSSProperties {\n  const baseStyles: React.CSSProperties = {\n    outline: \"none\",\n    border: `2px solid ${hexToRgbaString(color, 1.0)}`,\n  };\n\n  if (includeGlow) {\n    return {\n      ...baseStyles,\n      boxShadow: getNeonGlowEffect(color, \"medium\", false),\n    };\n  }\n\n  return baseStyles;\n}\n\n/**\n * Get backdrop blur effect\n *\n * Creates frosted glass effect for Korean-themed overlays.\n * GPU-accelerated for 60fps performance.\n *\n * @param blurAmount - Blur amount in pixels (default: 10)\n * @param saturation - Color saturation multiplier (default: 1.5)\n * @returns React.CSSProperties with backdrop blur\n *\n * @example\n * ```typescript\n * const backdropStyle = getBackdropBlurEffect(12, 1.8);\n * ```\n *\n * @korean 배경블러효과얻기\n */\nexport function getBackdropBlurEffect(\n  blurAmount: number = 10,\n  saturation: number = 1.5,\n): React.CSSProperties & {\n  WebkitBackdropFilter?: string;\n} {\n  return {\n    backdropFilter: `blur(${blurAmount}px) saturate(${saturation})`,\n    WebkitBackdropFilter: `blur(${blurAmount}px) saturate(${saturation})`,\n    // Fallback for browsers without backdrop-filter support\n    backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.8),\n  };\n}\n\n/**\n * Get trigram symbol glow effect\n *\n * Creates glowing effect for Eight Trigram symbols (☰☱☲☳☴☵☶☷).\n * Uses stance-specific colors from KOREAN_COLORS.\n *\n * @param trigramColor - Trigram-specific hex color\n * @param isActive - Whether trigram is currently active\n * @returns React.CSSProperties with trigram glow\n *\n * @example\n * ```typescript\n * const trigramGlow = getTrigramSymbolGlow(\n *   KOREAN_COLORS.TRIGRAM_GEON_PRIMARY,\n *   true\n * );\n * ```\n *\n * @korean 팔괘상징글로우얻기\n */\nexport function getTrigramSymbolGlow(\n  trigramColor: number,\n  isActive: boolean,\n): React.CSSProperties {\n  const intensity = isActive ? \"intense\" : \"subtle\";\n  const scale = isActive ? 1.1 : 1.0;\n\n  return {\n    color: hexToRgbaString(trigramColor, 1.0),\n    textShadow: getNeonTextShadow(trigramColor, intensity),\n    transform: `scale(${scale})`,\n    transition: getSmoothTransition(\"all\", \"normal\"),\n    filter: isActive ? \"brightness(1.2)\" : \"brightness(1.0)\",\n  };\n}\n\n/**\n * Get GPU-accelerated animation hint\n *\n * Applies will-change CSS property to hint GPU acceleration.\n * Use sparingly - only for actively animating elements.\n *\n * @param properties - Properties that will animate\n * @returns React.CSSProperties with GPU hints\n *\n * @example\n * ```typescript\n * const gpuHint = getGPUAccelerationHint('transform, opacity');\n * ```\n *\n * @korean GPU가속힌트얻기\n */\nexport function getGPUAccelerationHint(\n  properties: string = \"transform\",\n): React.CSSProperties {\n  return {\n    willChange: properties,\n    transform: \"translateZ(0)\", // Force GPU layer\n  };\n}\n\n/**\n * Combine multiple shadow effects\n *\n * Merges multiple box-shadow strings into a single CSS value.\n * Useful for combining glow, depth, and custom shadows.\n *\n * @param shadows - Array of box-shadow strings\n * @returns Combined box-shadow CSS string\n *\n * @example\n * ```typescript\n * const combined = combineShadowEffects([\n *   getNeonGlowEffect(KOREAN_COLORS.PRIMARY_CYAN, 'medium'),\n *   getLayeredDepthEffect({ layers: 2, baseOffset: 2, baseBlur: 4, color: 0x000000, opacity: 0.5 })\n * ]);\n * ```\n *\n * @korean 그림자효과결합\n */\nexport function combineShadowEffects(shadows: string[]): string {\n  return shadows.filter(Boolean).join(\", \");\n}\n\n/**\n * Get pulsing animation keyframes\n *\n * Returns CSS keyframe animation for pulsing glow effect.\n * Should be injected into global styles or style tag once.\n * Use unique animation names to avoid conflicts.\n *\n * @param animationName - Unique name for the animation (default: 'pulse')\n * @returns CSS keyframes string\n *\n * @example\n * ```typescript\n * const keyframes = getPulsingKeyframes('pulse-glow');\n * // Inject into global styles once:\n * const style = document.createElement('style');\n * style.innerHTML = keyframes;\n * document.head.appendChild(style);\n * ```\n *\n * @warning SSR and Duplicate Keyframes\n * When using this in Server-Side Rendering (SSR) environments or with multiple\n * component instances, ensure keyframe definitions are registered globally only once.\n * Consider using a global registry or checking for existing keyframe definitions\n * before injection to prevent duplicates and hydration mismatches. Example:\n * ```typescript\n * if (!document.querySelector(`style[data-keyframe=\"${animationName}\"]`)) {\n *   const style = document.createElement('style');\n *   style.setAttribute('data-keyframe', animationName);\n *   style.innerHTML = getPulsingKeyframes(animationName);\n *   document.head.appendChild(style);\n * }\n * ```\n *\n * @korean 펄스애니메이션키프레임얻기\n */\nexport function getPulsingKeyframes(animationName: string = \"pulse\"): string {\n  return `\n    @keyframes ${animationName} {\n      0%, 100% {\n        opacity: 1;\n        transform: scale(1);\n      }\n      50% {\n        opacity: 0.8;\n        transform: scale(1.05);\n      }\n    }\n  `;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,SAAgB,kBACd,OACA,YAA2B,UAC3B,eAAwB,MAChB;CAQR,MAAM,SAAS;EANb,QAAQ;GAAE,OAAO;GAAI,cAAc;GAAK,OAAO;GAAG,cAAc;GAAK;EACrE,QAAQ;GAAE,OAAO;GAAI,cAAc;GAAK,OAAO;GAAI,cAAc;GAAK;EACtE,QAAQ;GAAE,OAAO;GAAI,cAAc;GAAK,OAAO;GAAI,cAAc;GAAK;EACtE,SAAS;GAAE,OAAO;GAAI,cAAc;GAAK,OAAO;GAAI,cAAc;GAAK;EAG1D,CAAW;CAM1B,OAAO,GAAG,OALe,OAAO,MAAM,KAAK,gBAAgB,OAAO,OAAO,aAAa,KACpE,eACd,eAAe,OAAO,MAAM,KAAK,gBAAgB,OAAO,OAAO,aAAa,KAC5E;;;;;;;;;;;;;;;;;;;;AAuBN,SAAgB,kBACd,OACA,YAA2B,UACnB;CAyBR,OADgB;EAtBd,QAAQ,CACN;GAAE,MAAM;GAAG,SAAS;GAAK,EACzB;GAAE,MAAM;GAAI,SAAS;GAAK,CAC3B;EACD,QAAQ;GACN;IAAE,MAAM;IAAI,SAAS;IAAK;GAC1B;IAAE,MAAM;IAAI,SAAS;IAAK;GAC1B;IAAE,MAAM;IAAI,SAAS;IAAK;GAC3B;EACD,QAAQ;GACN;IAAE,MAAM;IAAI,SAAS;IAAK;GAC1B;IAAE,MAAM;IAAI,SAAS;IAAK;GAC1B;IAAE,MAAM;IAAI,SAAS;IAAK;GAC3B;EACD,SAAS;GACP;IAAE,MAAM;IAAI,SAAS;IAAK;GAC1B;IAAE,MAAM;IAAI,SAAS;IAAK;GAC1B;IAAE,MAAM;IAAI,SAAS;IAAK;GAC1B;IAAE,MAAM;IAAI,SAAS;IAAK;GAC3B;EAGa,CAAa,WAE1B,KACE,EAAE,MAAM,cAAc,OAAO,KAAK,KAAK,gBAAgB,OAAO,QAAQ,GACxE,CACA,KAAK,KAAK;;;;;;;;;;;;;;;;;;;;;;;;AAyBf,SAAgB,sBAAsB,QAAmC;CACvE,MAAM,EAAE,QAAQ,YAAY,UAAU,OAAO,YAAY;CACzD,MAAM,UAAoB,EAAE;CAE5B,KAAK,IAAI,IAAI,GAAG,KAAK,QAAQ,KAAK;EAChC,MAAM,SAAS,aAAa;EAC5B,MAAM,OAAO,WAAW;EACxB,MAAM,eAAe,WAAW,KAAM,IAAI,KAAK,SAAU;EACzD,QAAQ,KACN,KAAK,OAAO,KAAK,KAAK,KAAK,gBAAgB,OAAO,aAAa,GAChE;;CAGH,OAAO,QAAQ,KAAK,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;AA2B3B,SAAgB,qBACd,cACA,gBACA,QAAgB,KAChB,OAA4B,UACpB;CACR,MAAM,SAAS,gBAAgB,cAAc,GAAI;CACjD,MAAM,SAAS,gBAAgB,gBAAgB,GAAI;CAEnD,IAAI,SAAS,UACX,OAAO,uCAAuC,OAAO,OAAO,OAAO;CAGrE,OAAO,mBAAmB,MAAM,OAAO,OAAO,OAAO,OAAO;;;;;;;;;;;;;;;;;;;;AAqB9D,SAAgB,oBACd,aAAqB,OACrB,SAA2B,UACnB;CAQR,MAAM,SAAS;EANb,MAAM;GAAE,UAAU;GAAS,QAAQ;GAAY;EAC/C,QAAQ;GAAE,UAAU;GAAQ,QAAQ;GAAe;EACnD,MAAM;GAAE,UAAU;GAAQ,QAAQ;GAAe;EACjD,QAAQ;GAAE,UAAU;GAAS,QAAQ;GAAgC;EAGxD,CAAa;CAC5B,OAAO,GAAG,WAAW,GAAG,OAAO,SAAS,GAAG,OAAO;;;;;;;;;;;;;;;;;;;;AAqBpD,SAAgB,0BACd,UACA,aAAgC,UAIhC;CACA,OAAO;EACL,UAAU,GAAG,SAAS;EACtB;EACA,qBAAqB;EACrB,qBAAqB;EACrB,eAAe;EACf,eAAe;EAEf,YAAY;EACb;;;;;;;;;;;;;;;;;;;;;;;;AAyDH,SAAgB,oBACd,WACA,YAAgC,YAChC,YAA2B,UACN;CACrB,MAAM,aAAkC;EACtC,YAAY,oBAAoB,OAAO,SAAS;EAChD,QAAQ;EACT;CAED,MAAM,aAAkC,EACtC,WAAW,kBAAkB,WAAW,WAAW,KAAK,EACzD;CAED,MAAM,cAAmC,EACvC,WAAW,eACZ;CAED,MAAM,aAAkC;EACtC,WAAW;EACX,WAAW,sBAAsB;GAC/B,QAAQ;GACR,YAAY;GACZ,UAAU;GACV,OAAO,cAAc;GACrB,SAAS;GACV,CAAC;EACH;CAED,MAAM,cAAmC,EACvC,WAAW,mCACZ;CAED,QAAQ,WAAR;EACE,KAAK,QACH,OAAO;GAAE,GAAG;GAAY,GAAG;GAAY;EACzC,KAAK,SACH,OAAO;GAAE,GAAG;GAAY,GAAG;GAAa;EAC1C,KAAK,QACH,OAAO;GAAE,GAAG;GAAY,GAAG;GAAY;EACzC,KAAK,SACH,OAAO;GAAE,GAAG;GAAY,GAAG;GAAa;EAC1C,KAAK,YACH,OAAO;GACL,GAAG;GACH,GAAG;GACH,WAAW;GACZ;EACH,SACE,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;AA0Bb,SAAgB,oBACd,OACA,cAAuB,MACF;CACrB,MAAM,aAAkC;EACtC,SAAS;EACT,QAAQ,aAAa,gBAAgB,OAAO,EAAI;EACjD;CAED,IAAI,aACF,OAAO;EACL,GAAG;EACH,WAAW,kBAAkB,OAAO,UAAU,MAAM;EACrD;CAGH,OAAO;;;;;;;;;;;;;;;;;;;AAoBT,SAAgB,sBACd,aAAqB,IACrB,aAAqB,KAGrB;CACA,OAAO;EACL,gBAAgB,QAAQ,WAAW,eAAe,WAAW;EAC7D,sBAAsB,QAAQ,WAAW,eAAe,WAAW;EAEnE,iBAAiB,gBAAgB,cAAc,oBAAoB,GAAI;EACxE;;;;;;;;;;;;;;;;;;;;;AAmFH,SAAgB,qBAAqB,SAA2B;CAC9D,OAAO,QAAQ,OAAO,QAAQ,CAAC,KAAK,KAAK"}
+{"version":3,"file":"visualEffects.js","names":[],"sources":["../../src/utils/visualEffects.ts"],"sourcesContent":["/**\n * Visual Effects Utilities for Korean Cyberpunk Aesthetic\n *\n * Provides advanced visual effects for HTML overlay components including:\n * - Neon glow effects (box-shadow, text-shadow)\n * - Depth effects (layered shadows, gradients, backdrop-blur)\n * - Smooth transitions and animations\n * - Korean font rendering optimization\n * - Hover and focus state generators\n *\n * All effects follow Korean martial arts cyberpunk theme with 60fps performance target.\n *\n * @module utils/visualEffects\n * @category UI Utilities\n * @korean 시각효과유틸리티\n */\n\nimport { KOREAN_COLORS } from \"@/types/constants\";\nimport { hexToRgbaString } from \"./colorUtils\";\n\n/**\n * Neon glow intensity levels\n * @korean 네온글로우강도\n */\nexport type GlowIntensity = \"subtle\" | \"medium\" | \"strong\" | \"intense\";\n\n/**\n * Hover state animation types\n * @korean 호버상태애니메이션\n */\nexport type HoverAnimationType =\n  | \"glow\"\n  | \"scale\"\n  | \"lift\"\n  | \"pulse\"\n  | \"combined\";\n\n/**\n * Transition timing presets\n * @korean 전환타이밍프리셋\n */\nexport type TransitionTiming = \"fast\" | \"normal\" | \"slow\" | \"smooth\";\n\n/**\n * Depth effect layer configuration\n * @korean 깊이효과레이어설정\n */\nexport interface DepthEffectConfig {\n  readonly layers: number;\n  readonly baseOffset: number;\n  readonly baseBlur: number;\n  readonly color: number;\n  readonly opacity: number;\n}\n\n/**\n * Get neon glow effect CSS string\n *\n * Creates cyberpunk-style neon glow using box-shadow with Korean colors.\n * Supports multiple intensity levels for different UI elements.\n *\n * @param color - Hex color value from KOREAN_COLORS\n * @param intensity - Glow intensity level\n * @param includeInset - Whether to include inset glow (default: true)\n * @returns CSS box-shadow string with neon glow effect\n *\n * @example\n * ```typescript\n * const glow = getNeonGlowEffect(KOREAN_COLORS.PRIMARY_CYAN, 'medium', true);\n * // Returns: \"0 0 20px rgba(0,230,230,0.6), inset 0 0 10px rgba(0,230,230,0.3)\"\n * // Note: Color conversion is handled by hexToRgbaString utility\n * ```\n *\n * @korean 네온글로우효과얻기\n */\nexport function getNeonGlowEffect(\n  color: number,\n  intensity: GlowIntensity = \"medium\",\n  includeInset: boolean = true,\n): string {\n  const glowConfig = {\n    subtle: { outer: 10, outerOpacity: 0.4, inner: 5, innerOpacity: 0.2 },\n    medium: { outer: 20, outerOpacity: 0.6, inner: 10, innerOpacity: 0.3 },\n    strong: { outer: 30, outerOpacity: 0.8, inner: 15, innerOpacity: 0.4 },\n    intense: { outer: 40, outerOpacity: 1.0, inner: 20, innerOpacity: 0.5 },\n  };\n\n  const config = glowConfig[intensity];\n  const outerGlow = `0 0 ${config.outer}px ${hexToRgbaString(color, config.outerOpacity)}`;\n  const insetGlow = includeInset\n    ? `, inset 0 0 ${config.inner}px ${hexToRgbaString(color, config.innerOpacity)}`\n    : \"\";\n\n  return `${outerGlow}${insetGlow}`;\n}\n\n/**\n * Get neon text shadow effect\n *\n * Creates glowing text effect for Korean and English text using text-shadow.\n * Multiple shadow layers create authentic neon glow appearance.\n *\n * @param color - Hex color value from KOREAN_COLORS\n * @param intensity - Glow intensity level\n * @returns CSS text-shadow string with neon glow\n *\n * @example\n * ```typescript\n * const textGlow = getNeonTextShadow(KOREAN_COLORS.ACCENT_GOLD, 'strong');\n * // Returns: \"0 0 10px rgba(255,196,0,0.8), 0 0 20px rgba(255,196,0,0.6), 0 0 30px rgba(255,196,0,0.4)\"\n * ```\n *\n * @korean 네온텍스트그림자얻기\n */\nexport function getNeonTextShadow(\n  color: number,\n  intensity: GlowIntensity = \"medium\",\n): string {\n  const shadowConfig = {\n    subtle: [\n      { blur: 5, opacity: 0.6 },\n      { blur: 10, opacity: 0.4 },\n    ],\n    medium: [\n      { blur: 10, opacity: 0.8 },\n      { blur: 20, opacity: 0.6 },\n      { blur: 30, opacity: 0.4 },\n    ],\n    strong: [\n      { blur: 15, opacity: 1.0 },\n      { blur: 30, opacity: 0.8 },\n      { blur: 45, opacity: 0.6 },\n    ],\n    intense: [\n      { blur: 20, opacity: 1.0 },\n      { blur: 40, opacity: 0.9 },\n      { blur: 60, opacity: 0.7 },\n      { blur: 80, opacity: 0.5 },\n    ],\n  };\n\n  const shadows = shadowConfig[intensity];\n  return shadows\n    .map(\n      ({ blur, opacity }) => `0 0 ${blur}px ${hexToRgbaString(color, opacity)}`,\n    )\n    .join(\", \");\n}\n\n/**\n * Get layered depth effect\n *\n * Creates depth using multiple shadow layers with increasing offset and blur.\n * Provides 3D-like appearance for Korean-themed UI panels.\n *\n * @param config - Depth effect configuration\n * @returns CSS box-shadow string with layered depth\n *\n * @example\n * ```typescript\n * const depth = getLayeredDepthEffect({\n *   layers: 3,\n *   baseOffset: 2,\n *   baseBlur: 4,\n *   color: KOREAN_COLORS.BLACK_SOLID,\n *   opacity: 0.5,\n * });\n * ```\n *\n * @korean 레이어깊이효과얻기\n */\nexport function getLayeredDepthEffect(config: DepthEffectConfig): string {\n  const { layers, baseOffset, baseBlur, color, opacity } = config;\n  const shadows: string[] = [];\n\n  for (let i = 1; i <= layers; i++) {\n    const offset = baseOffset * i;\n    const blur = baseBlur * i;\n    const layerOpacity = opacity * (1 - ((i - 1) / layers) * 0.3); // Fade each layer\n    shadows.push(\n      `0 ${offset}px ${blur}px ${hexToRgbaString(color, layerOpacity)}`,\n    );\n  }\n\n  return shadows.join(\", \");\n}\n\n/**\n * Get cyberpunk gradient background\n *\n * Creates Korean-themed gradient with cyberpunk colors.\n * Supports both linear and radial gradients.\n *\n * @param primaryColor - Primary hex color\n * @param secondaryColor - Secondary hex color\n * @param angle - Gradient angle in degrees (default: 135)\n * @param type - Gradient type ('linear' | 'radial')\n * @returns CSS gradient string\n *\n * @example\n * ```typescript\n * const gradient = getCyberpunkGradient(\n *   KOREAN_COLORS.PRIMARY_CYAN,\n *   KOREAN_COLORS.UI_BACKGROUND_DARK,\n *   135,\n *   'linear'\n * );\n * ```\n *\n * @korean 사이버펑크그라디언트얻기\n */\nexport function getCyberpunkGradient(\n  primaryColor: number,\n  secondaryColor: number,\n  angle: number = 135,\n  type: \"linear\" | \"radial\" = \"linear\",\n): string {\n  const color1 = hexToRgbaString(primaryColor, 0.2);\n  const color2 = hexToRgbaString(secondaryColor, 0.9);\n\n  if (type === \"radial\") {\n    return `radial-gradient(circle at top left, ${color1} 0%, ${color2} 100%)`;\n  }\n\n  return `linear-gradient(${angle}deg, ${color1} 0%, ${color2} 100%)`;\n}\n\n/**\n * Get smooth transition CSS\n *\n * Returns standardized transition string for consistent animations.\n * All transitions target 60fps performance.\n *\n * @param properties - CSS properties to transition (default: 'all')\n * @param timing - Timing preset\n * @returns CSS transition string\n *\n * @example\n * ```typescript\n * const transition = getSmoothTransition('all', 'normal');\n * // Returns: \"all 0.2s ease-in-out\"\n * ```\n *\n * @korean 부드러운전환얻기\n */\nexport function getSmoothTransition(\n  properties: string = \"all\",\n  timing: TransitionTiming = \"normal\",\n): string {\n  const timingConfig = {\n    fast: { duration: \"0.15s\", easing: \"ease-out\" },\n    normal: { duration: \"0.2s\", easing: \"ease-in-out\" },\n    slow: { duration: \"0.3s\", easing: \"ease-in-out\" },\n    smooth: { duration: \"0.25s\", easing: \"cubic-bezier(0.4, 0, 0.2, 1)\" },\n  };\n\n  const config = timingConfig[timing];\n  return `${properties} ${config.duration} ${config.easing}`;\n}\n\n/**\n * Get Korean font optimization styles\n *\n * Applies optimal font rendering for Korean characters (Hangul).\n * Includes anti-aliasing, subpixel rendering, and letter spacing.\n *\n * @param fontSize - Font size in pixels\n * @param fontWeight - Font weight (default: 'normal')\n * @returns React.CSSProperties with Korean font optimization\n *\n * @example\n * ```typescript\n * const fontStyle = getKoreanFontOptimization(16, 'bold');\n * // Returns: { fontSize: '16px', WebkitFontSmoothing: 'antialiased', ... }\n * ```\n *\n * @korean 한글폰트최적화얻기\n */\nexport function getKoreanFontOptimization(\n  fontSize: number,\n  fontWeight: \"normal\" | \"bold\" = \"normal\",\n): React.CSSProperties & {\n  WebkitFontSmoothing?: string;\n  MozOsxFontSmoothing?: string;\n} {\n  return {\n    fontSize: `${fontSize}px`,\n    fontWeight,\n    WebkitFontSmoothing: \"antialiased\",\n    MozOsxFontSmoothing: \"grayscale\",\n    textRendering: \"optimizeLegibility\",\n    letterSpacing: \"0.02em\",\n    // Korean characters need slightly more line height\n    lineHeight: 1.5,\n  };\n}\n\n/**\n * Map numeric glow intensity to GlowIntensity type\n *\n * Helper to standardize glow intensity mapping across components.\n * Converts numeric intensity values to discrete levels.\n *\n * @param glowIntensity - Numeric glow intensity (0-2+ scale)\n * @returns GlowIntensity level (\"subtle\", \"medium\", \"strong\", \"intense\")\n *\n * Mapping thresholds:\n * - intense: >= 1.5\n * - strong: >= 1.0\n * - medium: >= 0.6\n * - subtle: < 0.6\n *\n * @example\n * ```typescript\n * const level = mapGlowIntensityLevel(0.8);\n * // Returns: \"medium\"\n * mapGlowIntensityLevel(2.0);\n * // Returns: \"intense\"\n * ```\n *\n * @korean 광도레벨매핑\n */\nexport function mapGlowIntensityLevel(glowIntensity: number): GlowIntensity {\n  if (glowIntensity >= 1.5) return \"intense\";\n  if (glowIntensity >= 1.0) return \"strong\";\n  if (glowIntensity >= 0.6) return \"medium\";\n  return \"subtle\";\n}\n\n/**\n * Get hover state styles with glow effect\n *\n * Generates hover state styles with Korean cyberpunk animations.\n * Includes glow intensification, scale, and lift effects.\n *\n * @param baseColor - Base hex color\n * @param animation - Animation type\n * @param intensity - Glow intensity for hover state\n * @returns React.CSSProperties for hover state\n *\n * @example\n * ```typescript\n * const hoverStyle = getHoverStateStyles(\n *   KOREAN_COLORS.PRIMARY_CYAN,\n *   'combined',\n *   'strong'\n * );\n * ```\n *\n * @korean 호버상태스타일얻기\n */\nexport function getHoverStateStyles(\n  baseColor: number,\n  animation: HoverAnimationType = \"combined\",\n  intensity: GlowIntensity = \"strong\",\n): React.CSSProperties {\n  const baseStyles: React.CSSProperties = {\n    transition: getSmoothTransition(\"all\", \"normal\"),\n    cursor: \"pointer\",\n  };\n\n  const glowStyles: React.CSSProperties = {\n    boxShadow: getNeonGlowEffect(baseColor, intensity, true),\n  };\n\n  const scaleStyles: React.CSSProperties = {\n    transform: \"scale(1.05)\",\n  };\n\n  const liftStyles: React.CSSProperties = {\n    transform: \"translateY(-2px)\",\n    boxShadow: getLayeredDepthEffect({\n      layers: 3,\n      baseOffset: 4,\n      baseBlur: 8,\n      color: KOREAN_COLORS.BLACK_SOLID,\n      opacity: 0.6,\n    }),\n  };\n\n  const pulseStyles: React.CSSProperties = {\n    animation: \"pulse 1.5s ease-in-out infinite\",\n  };\n\n  switch (animation) {\n    case \"glow\":\n      return { ...baseStyles, ...glowStyles };\n    case \"scale\":\n      return { ...baseStyles, ...scaleStyles };\n    case \"lift\":\n      return { ...baseStyles, ...liftStyles };\n    case \"pulse\":\n      return { ...baseStyles, ...pulseStyles };\n    case \"combined\":\n      return {\n        ...baseStyles,\n        ...glowStyles,\n        transform: \"scale(1.02) translateY(-1px)\",\n      };\n    default:\n      return baseStyles;\n  }\n}\n\n/**\n * Get focus state styles with accessibility\n *\n * Creates WCAG-compliant focus indicators with Korean cyberpunk styling.\n * Ensures 2px border with high contrast (4.5:1 minimum).\n *\n * Note: While outline is set to \"none\", the custom 2px border provides\n * equivalent accessibility. For users relying on high-contrast mode or\n * custom browser settings, consider using outline-offset as an additional\n * fallback or ensure the custom border has sufficient contrast (4.5:1+).\n *\n * @param color - Hex color for focus indicator\n * @param includeGlow - Whether to include glow effect (default: true)\n * @returns React.CSSProperties for focus state\n *\n * @example\n * ```typescript\n * const focusStyle = getFocusStateStyles(KOREAN_COLORS.ACCENT_GOLD, true);\n * ```\n *\n * @korean 포커스상태스타일얻기\n */\nexport function getFocusStateStyles(\n  color: number,\n  includeGlow: boolean = true,\n): React.CSSProperties {\n  const baseStyles: React.CSSProperties = {\n    outline: \"none\",\n    border: `2px solid ${hexToRgbaString(color, 1.0)}`,\n  };\n\n  if (includeGlow) {\n    return {\n      ...baseStyles,\n      boxShadow: getNeonGlowEffect(color, \"medium\", false),\n    };\n  }\n\n  return baseStyles;\n}\n\n/**\n * Get backdrop blur effect\n *\n * Creates frosted glass effect for Korean-themed overlays.\n * GPU-accelerated for 60fps performance.\n *\n * @param blurAmount - Blur amount in pixels (default: 10)\n * @param saturation - Color saturation multiplier (default: 1.5)\n * @returns React.CSSProperties with backdrop blur\n *\n * @example\n * ```typescript\n * const backdropStyle = getBackdropBlurEffect(12, 1.8);\n * ```\n *\n * @korean 배경블러효과얻기\n */\nexport function getBackdropBlurEffect(\n  blurAmount: number = 10,\n  saturation: number = 1.5,\n): React.CSSProperties & {\n  WebkitBackdropFilter?: string;\n} {\n  return {\n    backdropFilter: `blur(${blurAmount}px) saturate(${saturation})`,\n    WebkitBackdropFilter: `blur(${blurAmount}px) saturate(${saturation})`,\n    // Fallback for browsers without backdrop-filter support\n    backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.8),\n  };\n}\n\n/**\n * Get trigram symbol glow effect\n *\n * Creates glowing effect for Eight Trigram symbols (☰☱☲☳☴☵☶☷).\n * Uses stance-specific colors from KOREAN_COLORS.\n *\n * @param trigramColor - Trigram-specific hex color\n * @param isActive - Whether trigram is currently active\n * @returns React.CSSProperties with trigram glow\n *\n * @example\n * ```typescript\n * const trigramGlow = getTrigramSymbolGlow(\n *   KOREAN_COLORS.TRIGRAM_GEON_PRIMARY,\n *   true\n * );\n * ```\n *\n * @korean 팔괘상징글로우얻기\n */\nexport function getTrigramSymbolGlow(\n  trigramColor: number,\n  isActive: boolean,\n): React.CSSProperties {\n  const intensity = isActive ? \"intense\" : \"subtle\";\n  const scale = isActive ? 1.1 : 1.0;\n\n  return {\n    color: hexToRgbaString(trigramColor, 1.0),\n    textShadow: getNeonTextShadow(trigramColor, intensity),\n    transform: `scale(${scale})`,\n    transition: getSmoothTransition(\"all\", \"normal\"),\n    filter: isActive ? \"brightness(1.2)\" : \"brightness(1.0)\",\n  };\n}\n\n/**\n * Get GPU-accelerated animation hint\n *\n * Applies will-change CSS property to hint GPU acceleration.\n * Use sparingly - only for actively animating elements.\n *\n * @param properties - Properties that will animate\n * @returns React.CSSProperties with GPU hints\n *\n * @example\n * ```typescript\n * const gpuHint = getGPUAccelerationHint('transform, opacity');\n * ```\n *\n * @korean GPU가속힌트얻기\n */\nexport function getGPUAccelerationHint(\n  properties: string = \"transform\",\n): React.CSSProperties {\n  return {\n    willChange: properties,\n    transform: \"translateZ(0)\", // Force GPU layer\n  };\n}\n\n/**\n * Combine multiple shadow effects\n *\n * Merges multiple box-shadow strings into a single CSS value.\n * Useful for combining glow, depth, and custom shadows.\n *\n * @param shadows - Array of box-shadow strings\n * @returns Combined box-shadow CSS string\n *\n * @example\n * ```typescript\n * const combined = combineShadowEffects([\n *   getNeonGlowEffect(KOREAN_COLORS.PRIMARY_CYAN, 'medium'),\n *   getLayeredDepthEffect({ layers: 2, baseOffset: 2, baseBlur: 4, color: 0x000000, opacity: 0.5 })\n * ]);\n * ```\n *\n * @korean 그림자효과결합\n */\nexport function combineShadowEffects(shadows: string[]): string {\n  return shadows.filter(Boolean).join(\", \");\n}\n\n/**\n * Get pulsing animation keyframes\n *\n * Returns CSS keyframe animation for pulsing glow effect.\n * Should be injected into global styles or style tag once.\n * Use unique animation names to avoid conflicts.\n *\n * @param animationName - Unique name for the animation (default: 'pulse')\n * @returns CSS keyframes string\n *\n * @example\n * ```typescript\n * const keyframes = getPulsingKeyframes('pulse-glow');\n * // Inject into global styles once:\n * const style = document.createElement('style');\n * style.innerHTML = keyframes;\n * document.head.appendChild(style);\n * ```\n *\n * @warning SSR and Duplicate Keyframes\n * When using this in Server-Side Rendering (SSR) environments or with multiple\n * component instances, ensure keyframe definitions are registered globally only once.\n * Consider using a global registry or checking for existing keyframe definitions\n * before injection to prevent duplicates and hydration mismatches. Example:\n * ```typescript\n * if (!document.querySelector(`style[data-keyframe=\"${animationName}\"]`)) {\n *   const style = document.createElement('style');\n *   style.setAttribute('data-keyframe', animationName);\n *   style.innerHTML = getPulsingKeyframes(animationName);\n *   document.head.appendChild(style);\n * }\n * ```\n *\n * @korean 펄스애니메이션키프레임얻기\n */\nexport function getPulsingKeyframes(animationName: string = \"pulse\"): string {\n  return `\n    @keyframes ${animationName} {\n      0%, 100% {\n        opacity: 1;\n        transform: scale(1);\n      }\n      50% {\n        opacity: 0.8;\n        transform: scale(1.05);\n      }\n    }\n  `;\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blacktrigram",
-  "version": "0.7.45",
+  "version": "0.7.48",
   "description": "Black Trigram (흑괘) - Korean Martial Arts Combat Simulator. Reusable game systems, combat mechanics, animation framework, and Korean martial arts data built with React, Three.js, and TypeScript.",
   "type": "module",
   "main": "./lib/index.js",
@@ -187,7 +187,7 @@
     "three": "0.184.0"
   },
   "devDependencies": {
-    "@aws-sdk/client-bedrock-runtime": "3.1045.0",
+    "@aws-sdk/client-bedrock-runtime": "3.1046.0",
     "@eslint/js": "10.0.1",
     "@react-three/drei": "10.7.7",
     "@react-three/fiber": "9.6.1",
@@ -231,14 +231,14 @@
     "ts-morph": "28.0.0",
     "ts-node": "10.9.2",
     "tsc-alias": "1.8.17",
-    "tsx": "4.21.0",
+    "tsx": "4.22.0",
     "typedoc": "0.28.19",
     "typedoc-plugin-markdown": "4.11.0",
     "typedoc-plugin-mermaid": "1.12.0",
     "typedoc-plugin-missing-exports": "4.1.3",
     "typescript": "6.0.3",
     "typescript-eslint": "8.59.3",
-    "vite": "8.0.12",
+    "vite": "8.0.13",
     "vite-bundle-analyzer": "1.3.8",
     "vite-tsconfig-paths": "6.1.1",
     "vitest": "4.1.6"