blacktrigram 0.7.2

package/lib/components/shared/three/indicators/GuardIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GuardIndicator.js","names":[],"sources":["../../../../../src/components/shared/three/indicators/GuardIndicator.tsx"],"sourcesContent":["/**\n * GuardIndicator - Visual indicator showing current fighting stance guard position\n * Displays Korean traditional stance name, English translation, and guard characteristics\n *\n * @module components/shared/three/indicators/GuardIndicator\n * @category Combat UI\n * @korean 방어자세표시기\n */\n\nimport React, { useMemo } from \"react\";\nimport { STANCE_GUARD_CONFIGS } from \"../../../../systems/animation\";\nimport { TRIGRAM_DATA } from \"../../../../systems/trigram/types\";\nimport { TrigramStance } from \"../../../../types/common\";\nimport { KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\n\n/**\n * Props for GuardIndicator component\n */\nexport interface GuardIndicatorProps {\n  /** Current trigram stance */\n  readonly currentStance: TrigramStance;\n  /** Whether player is in guard animation state */\n  readonly isInGuard: boolean;\n  /** Player position: 'left' for player 1, 'right' for player 2 */\n  readonly position: \"left\" | \"right\";\n  /** Whether to use mobile-optimized sizing */\n  readonly isMobile?: boolean;\n}\n\n/**\n * Get guard height label based on arm positions\n *\n * Guard heights based on shoulder.x (vertical angle in radians):\n * - High guard (고위): shoulder at chin level (x <= -0.8)\n *   GEON (-1.0), LI (-1.6), GAN (-1.0)\n * - Mid guard (중위): shoulder at chest level (-0.8 < x < -0.4)\n *   TAE (-0.7), JIN (-0.6), SON (-0.8), GAM (-0.8)\n * - Low guard (저위): shoulder low (x >= -0.4)\n *   GON (-0.4)\n */\nfunction getGuardHeight(stance: TrigramStance): {\n  korean: string;\n  english: string;\n} {\n  const config = STANCE_GUARD_CONFIGS[stance];\n  const shoulderY = config.guardPose.leftArm.shoulder.x; // x is vertical in Euler\n\n  if (shoulderY <= -0.8) {\n    return { korean: \"고위\", english: \"High\" };\n  } else if (shoulderY < -0.4) {\n    return { korean: \"중위\", english: \"Mid\" };\n  } else {\n    return { korean: \"저위\", english: \"Low\" };\n  }\n}\n\n/**\n * Get traditional Korean stance name from guard config\n */\nfunction getTraditionalStanceName(stance: TrigramStance): {\n  korean: string;\n  romanized: string;\n} {\n  const stanceNames: Record<\n    TrigramStance,\n    { korean: string; romanized: string }\n  > = {\n    [TrigramStance.GEON]: { korean: \"앞서기\", romanized: \"Ap Seogi\" },\n    [TrigramStance.TAE]: { korean: \"범서기\", romanized: \"Beom Seogi\" },\n    [TrigramStance.LI]: { korean: \"겨루기 준비\", romanized: \"Gyeorugi Junbi\" },\n    [TrigramStance.JIN]: { korean: \"주춤서기\", romanized: \"Juchum Seogi\" },\n    [TrigramStance.SON]: { korean: \"학다리서기\", romanized: \"Hakdari Seogi\" },\n    [TrigramStance.GAM]: { korean: \"뒷발서기\", romanized: \"Dwitbal Seogi\" },\n    [TrigramStance.GAN]: { korean: \"모아서기\", romanized: \"Moa Seogi\" },\n    [TrigramStance.GON]: { korean: \"중하\", romanized: \"Joong Ha Seogi\" },\n  };\n  return stanceNames[stance];\n}\n\n/**\n * Get weight distribution icon\n */\nfunction getWeightIcon(weight: \"forward\" | \"neutral\" | \"back\"): string {\n  switch (weight) {\n    case \"forward\":\n      return \"▲\"; // Forward lean\n    case \"back\":\n      return \"▼\"; // Back lean\n    case \"neutral\":\n      return \"●\"; // Centered\n  }\n}\n\n/**\n * GuardIndicator Component\n *\n * Displays current guard position information with Korean martial arts terminology.\n * Shows only when player is in a stance guard animation state.\n *\n * Features:\n * - Traditional Korean stance name (앞서기, 앞굽이, etc.)\n * - Romanized pronunciation\n * - Guard height indicator (High/Mid/Low)\n * - Weight distribution visualization\n * - Korean cyberpunk styling with glow effects\n * - Responsive mobile layout\n * - Accessible with proper ARIA labels\n *\n * @example\n * ```tsx\n * <GuardIndicator\n *   currentStance={TrigramStance.GEON}\n *   isInGuard={true}\n *   position=\"left\"\n *   isMobile={false}\n * />\n * ```\n *\n * @public\n * @korean 방어자세표시기\n */\nexport const GuardIndicator: React.FC<GuardIndicatorProps> = ({\n  currentStance,\n  isInGuard,\n  position: _position, // Currently unused - indicator always positioned bottom-right\n  isMobile = false,\n}) => {\n  // Get guard configuration\n  const config = useMemo(\n    () => STANCE_GUARD_CONFIGS[currentStance],\n    [currentStance],\n  );\n\n  const trigramData = useMemo(\n    () => TRIGRAM_DATA[currentStance],\n    [currentStance],\n  );\n\n  const stanceName = useMemo(\n    () => getTraditionalStanceName(currentStance),\n    [currentStance],\n  );\n\n  const guardHeight = useMemo(\n    () => getGuardHeight(currentStance),\n    [currentStance],\n  );\n\n  const weightIcon = useMemo(\n    () => getWeightIcon(config.guardPose.weight),\n    [config.guardPose.weight],\n  );\n\n  // Memoize responsive sizing\n  const layout = useMemo(\n    () => ({\n      fontSize: isMobile ? 10 : 12,\n      titleSize: isMobile ? 13 : 16,\n      iconSize: isMobile ? 14 : 18,\n      padding: isMobile ? \"6px 10px\" : \"8px 12px\",\n      gap: isMobile ? \"3px\" : \"4px\",\n    }),\n    [isMobile],\n  );\n\n  // Container style - uses relative positioning for embedding in container HUDs\n  const containerStyle = useMemo(\n    () => ({\n      position: \"relative\" as const,\n      display: \"flex\",\n      flexDirection: \"column\" as const,\n      gap: layout.gap,\n      backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.85),\n      border: `1px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.6)}`,\n      borderRadius: \"6px\",\n      padding: layout.padding,\n      pointerEvents: \"none\" as const,\n      width: \"100%\",\n      boxSizing: \"border-box\" as const,\n      boxShadow: `0 0 15px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.3)}`,\n    }),\n    [layout],\n  );\n\n  // Don't render if not in guard state\n  if (!isInGuard) return null;\n\n  return (\n    <div\n      data-testid=\"guard-indicator\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={`Guard position: ${stanceName.romanized}, ${guardHeight.english} guard, ${config.guardPose.weight} weight`}\n      style={containerStyle}\n    >\n      {/* Title: GUARD with trigram symbol */}\n      <div\n        style={{\n          fontSize: layout.titleSize,\n          color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 1),\n          fontWeight: \"bold\",\n          textAlign: \"center\",\n          textShadow: `0 0 10px ${hexToRgbaString(\n            KOREAN_COLORS.ACCENT_GOLD,\n            0.6,\n          )}`,\n          borderBottom: `1px solid ${hexToRgbaString(\n            KOREAN_COLORS.PRIMARY_CYAN,\n            0.4,\n          )}`,\n          paddingBottom: layout.gap,\n        }}\n      >\n        {trigramData.symbol} GUARD\n      </div>\n\n      {/* Traditional stance name (Korean) */}\n      <div\n        style={{\n          fontSize: layout.fontSize,\n          color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1),\n          textAlign: \"center\",\n          fontWeight: \"600\",\n        }}\n      >\n        {stanceName.korean}\n      </div>\n\n      {/* Romanized name */}\n      <div\n        style={{\n          fontSize: layout.fontSize,\n          color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.8),\n          textAlign: \"center\",\n          fontStyle: \"italic\",\n        }}\n      >\n        {stanceName.romanized}\n      </div>\n\n      {/* Guard characteristics row */}\n      <div\n        style={{\n          display: \"flex\",\n          justifyContent: \"space-around\",\n          marginTop: layout.gap,\n          paddingTop: layout.gap,\n          borderTop: `1px solid ${hexToRgbaString(\n            KOREAN_COLORS.PRIMARY_CYAN,\n            0.3,\n          )}`,\n        }}\n      >\n        {/* Guard height */}\n        <div style={{ textAlign: \"center\" }}>\n          <div\n            style={{\n              fontSize: layout.iconSize,\n              color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1),\n            }}\n          >\n            ⚔️\n          </div>\n          <div\n            style={{\n              fontSize: layout.fontSize - 1,\n              color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.9),\n            }}\n          >\n            {guardHeight.korean}\n          </div>\n          <div\n            style={{\n              fontSize: layout.fontSize - 2,\n              color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.6),\n            }}\n          >\n            {guardHeight.english}\n          </div>\n        </div>\n\n        {/* Weight distribution */}\n        <div style={{ textAlign: \"center\" }}>\n          <div\n            style={{\n              fontSize: layout.iconSize,\n              color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1),\n            }}\n          >\n            {weightIcon}\n          </div>\n          <div\n            style={{\n              fontSize: layout.fontSize - 1,\n              color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.9),\n            }}\n          >\n            {config.guardPose.weight === \"forward\" && \"전방\"}\n            {config.guardPose.weight === \"neutral\" && \"중립\"}\n            {config.guardPose.weight === \"back\" && \"후방\"}\n          </div>\n          <div\n            style={{\n              fontSize: layout.fontSize - 2,\n              color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.6),\n              textTransform: \"capitalize\" as const,\n            }}\n          >\n            {config.guardPose.weight}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\n/**\n * Memoized GuardIndicator to prevent unnecessary re-renders\n */\nexport default React.memo(GuardIndicator);\n"],"mappings":"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"}

package/lib/components/shared/three/indicators/HapticFeedback.d.ts

@@ -0,0 +1,184 @@
+/**
+ * Haptic Feedback System for Combat UI
+ *
+ * Provides tactile feedback for mobile devices during combat interactions
+ * such as guard activation, stance changes, and guard breaks.
+ *
+ * Uses the Vibration API with fallback for unsupported devices.
+ *
+ * @module components/shared/three/indicators/HapticFeedback
+ * @category Combat UI
+ * @korean 햅틱피드백
+ */
+/**
+ * Haptic pattern type
+ * @korean 햅틱패턴타입
+ */
+export type HapticPattern = number | number[];
+/**
+ * Check if haptic feedback is supported on this device
+ *
+ * @returns True if the Vibration API is available
+ *
+ * @example
+ * ```typescript
+ * if (isHapticSupported()) {
+ *   triggerGuardHaptic('activate');
+ * }
+ * ```
+ *
+ * @public
+ * @korean 햅틱지원여부
+ */
+export declare function isHapticSupported(): boolean;
+/**
+ * Trigger haptic feedback for guard activation or break
+ *
+ * Provides tactile feedback when a player activates their guard
+ * or when their guard is broken by an opponent.
+ *
+ * Patterns:
+ * - **activate**: Light single vibration (50ms) for guard activation
+ * - **break**: Strong triple-pulse pattern (100ms, 50ms pause, 100ms) for guard break
+ *
+ * @param type - Type of guard haptic feedback
+ *
+ * @example
+ * ```typescript
+ * // When player activates guard
+ * triggerGuardHaptic('activate');
+ *
+ * // When guard is broken
+ * triggerGuardHaptic('break');
+ * ```
+ *
+ * @public
+ * @korean 방어햅틱트리거
+ */
+export declare function triggerGuardHaptic(type: "activate" | "break"): void;
+/**
+ * Trigger haptic feedback for stance change
+ *
+ * Provides medium-strength tactile feedback when a player transitions
+ * between trigram stances (건→태→리→진→손→감→간→곤).
+ *
+ * @example
+ * ```typescript
+ * // When stance changes from Geon to Tae
+ * triggerStanceChangeHaptic();
+ * ```
+ *
+ * @public
+ * @korean 자세변경햅틱트리거
+ */
+export declare function triggerStanceChangeHaptic(): void;
+/**
+ * Trigger custom haptic pattern
+ *
+ * Allows for custom vibration patterns using the Vibration API.
+ * Can specify either a single duration or a pattern array.
+ *
+ * Pattern arrays alternate between vibration and pause:
+ * - [200, 100, 200] = vibrate 200ms, pause 100ms, vibrate 200ms
+ *
+ * @param pattern - Vibration duration in ms or pattern array
+ *
+ * @example
+ * ```typescript
+ * // Single vibration
+ * triggerCustomHaptic(200);
+ *
+ * // Complex pattern
+ * triggerCustomHaptic([100, 50, 100, 50, 100]);
+ * ```
+ *
+ * @public
+ * @korean 사용자정의햅틱트리거
+ */
+export declare function triggerCustomHaptic(pattern: HapticPattern): void;
+/**
+ * Stop all haptic feedback
+ *
+ * Immediately stops any ongoing vibration. Useful for interrupting
+ * long or repeated patterns.
+ *
+ * @example
+ * ```typescript
+ * // Stop any ongoing haptic feedback
+ * stopHaptic();
+ * ```
+ *
+ * @public
+ * @korean 햅틱중지
+ */
+export declare function stopHaptic(): void;
+/**
+ * Check if device is mobile
+ *
+ * Simple heuristic to detect mobile devices based on screen size,
+ * user agent, and touch support.
+ *
+ * @returns True if device is likely mobile
+ *
+ * @example
+ * ```typescript
+ * if (isMobileDevice() && isHapticSupported()) {
+ *   triggerStanceChangeHaptic();
+ * }
+ * ```
+ *
+ * @public
+ * @korean 모바일기기여부
+ */
+export declare function isMobileDevice(): boolean;
+/**
+ * Haptic feedback settings
+ *
+ * Allows for global configuration of haptic feedback intensity
+ * and enable/disable state.
+ *
+ * @korean 햅틱설정
+ */
+export interface HapticSettings {
+    /** Whether haptic feedback is enabled */
+    readonly enabled: boolean;
+    /** Intensity multiplier (0.0 to 1.0) */
+    readonly intensity: number;
+}
+/**
+ * Default haptic settings
+ * @korean 기본햅틱설정
+ */
+export declare const DEFAULT_HAPTIC_SETTINGS: HapticSettings;
+/**
+ * Apply intensity modifier to haptic pattern
+ *
+ * Scales vibration durations based on intensity setting.
+ *
+ * @param pattern - Original haptic pattern
+ * @param intensity - Intensity multiplier (0.0 to 1.0)
+ * @returns Scaled haptic pattern
+ *
+ * @internal
+ * @korean 햅틱강도적용
+ */
+export declare function applyIntensity(pattern: HapticPattern, intensity: number): HapticPattern;
+/**
+ * Trigger haptic with settings
+ *
+ * Wrapper function that applies haptic settings before triggering.
+ *
+ * @param pattern - Haptic pattern to trigger
+ * @param settings - Haptic settings to apply
+ *
+ * @example
+ * ```typescript
+ * const settings = { enabled: true, intensity: 0.7 };
+ * triggerWithSettings(100, settings); // Triggers 70ms vibration
+ * ```
+ *
+ * @public
+ * @korean 설정포함햅틱트리거
+ */
+export declare function triggerWithSettings(pattern: HapticPattern, settings?: HapticSettings): void;
+//# sourceMappingURL=HapticFeedback.d.ts.map

package/lib/components/shared/three/indicators/HapticFeedback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HapticFeedback.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/indicators/HapticFeedback.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;AAE9C;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,IAAI,OAAO,CAM3C;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,GAAG,IAAI,CAkBnE;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,yBAAyB,IAAI,IAAI,CAYhD;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI,CAWhE;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,UAAU,IAAI,IAAI,CAYjC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,IAAI,OAAO,CAmBxC;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,wCAAwC;IACxC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,cAGrC,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,MAAM,GAChB,aAAa,CAQf;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,aAAa,EACtB,QAAQ,GAAE,cAAwC,GACjD,IAAI,CAON"}

package/lib/components/shared/three/indicators/HapticFeedback.js

@@ -0,0 +1,46 @@
+//#region src/components/shared/three/indicators/HapticFeedback.ts
+/**
+* Check if haptic feedback is supported on this device
+* 
+* @returns True if the Vibration API is available
+* 
+* @example
+* ```typescript
+* if (isHapticSupported()) {
+*   triggerGuardHaptic('activate');
+* }
+* ```
+* 
+* @public
+* @korean 햅틱지원여부
+*/
+function isHapticSupported() {
+	return typeof navigator !== "undefined" && "vibrate" in navigator && typeof navigator.vibrate === "function";
+}
+/**
+* Trigger haptic feedback for stance change
+* 
+* Provides medium-strength tactile feedback when a player transitions
+* between trigram stances (건→태→리→진→손→감→간→곤).
+* 
+* @example
+* ```typescript
+* // When stance changes from Geon to Tae
+* triggerStanceChangeHaptic();
+* ```
+* 
+* @public
+* @korean 자세변경햅틱트리거
+*/
+function triggerStanceChangeHaptic() {
+	if (!isHapticSupported()) return;
+	try {
+		navigator.vibrate(75);
+	} catch (error) {
+		console.warn("Haptic feedback failed:", error);
+	}
+}
+//#endregion
+export { triggerStanceChangeHaptic };
+
+//# sourceMappingURL=HapticFeedback.js.map

package/lib/components/shared/three/indicators/HapticFeedback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HapticFeedback.js","names":[],"sources":["../../../../../src/components/shared/three/indicators/HapticFeedback.ts"],"sourcesContent":["/**\n * Haptic Feedback System for Combat UI\n * \n * Provides tactile feedback for mobile devices during combat interactions\n * such as guard activation, stance changes, and guard breaks.\n * \n * Uses the Vibration API with fallback for unsupported devices.\n * \n * @module components/shared/three/indicators/HapticFeedback\n * @category Combat UI\n * @korean 햅틱피드백\n */\n\n/**\n * Haptic pattern type\n * @korean 햅틱패턴타입\n */\nexport type HapticPattern = number | number[];\n\n/**\n * Check if haptic feedback is supported on this device\n * \n * @returns True if the Vibration API is available\n * \n * @example\n * ```typescript\n * if (isHapticSupported()) {\n *   triggerGuardHaptic('activate');\n * }\n * ```\n * \n * @public\n * @korean 햅틱지원여부\n */\nexport function isHapticSupported(): boolean {\n  return (\n    typeof navigator !== \"undefined\" &&\n    \"vibrate\" in navigator &&\n    typeof navigator.vibrate === \"function\"\n  );\n}\n\n/**\n * Trigger haptic feedback for guard activation or break\n * \n * Provides tactile feedback when a player activates their guard\n * or when their guard is broken by an opponent.\n * \n * Patterns:\n * - **activate**: Light single vibration (50ms) for guard activation\n * - **break**: Strong triple-pulse pattern (100ms, 50ms pause, 100ms) for guard break\n * \n * @param type - Type of guard haptic feedback\n * \n * @example\n * ```typescript\n * // When player activates guard\n * triggerGuardHaptic('activate');\n * \n * // When guard is broken\n * triggerGuardHaptic('break');\n * ```\n * \n * @public\n * @korean 방어햅틱트리거\n */\nexport function triggerGuardHaptic(type: \"activate\" | \"break\"): void {\n  if (!isHapticSupported()) {\n    return;\n  }\n\n  try {\n    if (type === \"activate\") {\n      // Light haptic - single short vibration\n      navigator.vibrate(50);\n    } else if (type === \"break\") {\n      // Strong haptic - triple pulse pattern for impact\n      // Pattern: vibrate 100ms, pause 50ms, vibrate 100ms\n      navigator.vibrate([100, 50, 100]);\n    }\n  } catch (error) {\n    // Silently fail if vibration fails\n    console.warn(\"Haptic feedback failed:\", error);\n  }\n}\n\n/**\n * Trigger haptic feedback for stance change\n * \n * Provides medium-strength tactile feedback when a player transitions\n * between trigram stances (건→태→리→진→손→감→간→곤).\n * \n * @example\n * ```typescript\n * // When stance changes from Geon to Tae\n * triggerStanceChangeHaptic();\n * ```\n * \n * @public\n * @korean 자세변경햅틱트리거\n */\nexport function triggerStanceChangeHaptic(): void {\n  if (!isHapticSupported()) {\n    return;\n  }\n\n  try {\n    // Medium haptic - single medium vibration\n    navigator.vibrate(75);\n  } catch (error) {\n    // Silently fail if vibration fails\n    console.warn(\"Haptic feedback failed:\", error);\n  }\n}\n\n/**\n * Trigger custom haptic pattern\n * \n * Allows for custom vibration patterns using the Vibration API.\n * Can specify either a single duration or a pattern array.\n * \n * Pattern arrays alternate between vibration and pause:\n * - [200, 100, 200] = vibrate 200ms, pause 100ms, vibrate 200ms\n * \n * @param pattern - Vibration duration in ms or pattern array\n * \n * @example\n * ```typescript\n * // Single vibration\n * triggerCustomHaptic(200);\n * \n * // Complex pattern\n * triggerCustomHaptic([100, 50, 100, 50, 100]);\n * ```\n * \n * @public\n * @korean 사용자정의햅틱트리거\n */\nexport function triggerCustomHaptic(pattern: HapticPattern): void {\n  if (!isHapticSupported()) {\n    return;\n  }\n\n  try {\n    navigator.vibrate(pattern);\n  } catch (error) {\n    // Silently fail if vibration fails\n    console.warn(\"Haptic feedback failed:\", error);\n  }\n}\n\n/**\n * Stop all haptic feedback\n * \n * Immediately stops any ongoing vibration. Useful for interrupting\n * long or repeated patterns.\n * \n * @example\n * ```typescript\n * // Stop any ongoing haptic feedback\n * stopHaptic();\n * ```\n * \n * @public\n * @korean 햅틱중지\n */\nexport function stopHaptic(): void {\n  if (!isHapticSupported()) {\n    return;\n  }\n\n  try {\n    // Passing 0 or empty array stops vibration\n    navigator.vibrate(0);\n  } catch (error) {\n    // Silently fail if vibration stop fails\n    console.warn(\"Haptic stop failed:\", error);\n  }\n}\n\n/**\n * Check if device is mobile\n * \n * Simple heuristic to detect mobile devices based on screen size,\n * user agent, and touch support.\n * \n * @returns True if device is likely mobile\n * \n * @example\n * ```typescript\n * if (isMobileDevice() && isHapticSupported()) {\n *   triggerStanceChangeHaptic();\n * }\n * ```\n * \n * @public\n * @korean 모바일기기여부\n */\nexport function isMobileDevice(): boolean {\n  if (typeof window === \"undefined\" || typeof navigator === \"undefined\") {\n    return false;\n  }\n\n  // Check screen size (mobile typically < 768px)\n  const isMobileSize = window.innerWidth < 768;\n\n  // Check user agent for mobile indicators\n  const mobileKeywords = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;\n  const isMobileUA = mobileKeywords.test(navigator.userAgent);\n\n  // Check for touch support (modern browsers)\n  const hasTouch =\n    \"ontouchstart\" in window ||\n    navigator.maxTouchPoints > 0;\n\n  // Device is mobile if it meets size OR user agent criteria AND has touch\n  return (isMobileSize || isMobileUA) && hasTouch;\n}\n\n/**\n * Haptic feedback settings\n * \n * Allows for global configuration of haptic feedback intensity\n * and enable/disable state.\n * \n * @korean 햅틱설정\n */\nexport interface HapticSettings {\n  /** Whether haptic feedback is enabled */\n  readonly enabled: boolean;\n  /** Intensity multiplier (0.0 to 1.0) */\n  readonly intensity: number;\n}\n\n/**\n * Default haptic settings\n * @korean 기본햅틱설정\n */\nexport const DEFAULT_HAPTIC_SETTINGS: HapticSettings = {\n  enabled: true,\n  intensity: 1.0,\n};\n\n/**\n * Apply intensity modifier to haptic pattern\n * \n * Scales vibration durations based on intensity setting.\n * \n * @param pattern - Original haptic pattern\n * @param intensity - Intensity multiplier (0.0 to 1.0)\n * @returns Scaled haptic pattern\n * \n * @internal\n * @korean 햅틱강도적용\n */\nexport function applyIntensity(\n  pattern: HapticPattern,\n  intensity: number\n): HapticPattern {\n  const clampedIntensity = Math.max(0, Math.min(1, intensity));\n\n  if (typeof pattern === \"number\") {\n    return Math.round(pattern * clampedIntensity);\n  }\n\n  return pattern.map((duration) => Math.round(duration * clampedIntensity));\n}\n\n/**\n * Trigger haptic with settings\n * \n * Wrapper function that applies haptic settings before triggering.\n * \n * @param pattern - Haptic pattern to trigger\n * @param settings - Haptic settings to apply\n * \n * @example\n * ```typescript\n * const settings = { enabled: true, intensity: 0.7 };\n * triggerWithSettings(100, settings); // Triggers 70ms vibration\n * ```\n * \n * @public\n * @korean 설정포함햅틱트리거\n */\nexport function triggerWithSettings(\n  pattern: HapticPattern,\n  settings: HapticSettings = DEFAULT_HAPTIC_SETTINGS\n): void {\n  if (!settings.enabled || !isHapticSupported()) {\n    return;\n  }\n\n  const scaledPattern = applyIntensity(pattern, settings.intensity);\n  triggerCustomHaptic(scaledPattern);\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAkCA,SAAgB,oBAA6B;AAC3C,QACE,OAAO,cAAc,eACrB,aAAa,aACb,OAAO,UAAU,YAAY;;;;;;;;;;;;;;;;;AA+DjC,SAAgB,4BAAkC;AAChD,KAAI,CAAC,mBAAmB,CACtB;AAGF,KAAI;AAEF,YAAU,QAAQ,GAAG;UACd,OAAO;AAEd,UAAQ,KAAK,2BAA2B,MAAM"}

package/lib/components/shared/three/indicators/StanceChangeIndicator.d.ts

@@ -0,0 +1,53 @@
+/**
+ * StanceChangeIndicator - Visual feedback for stance changes
+ * Displays Korean and English stance names with trigram symbols
+ *
+ * @module components/shared/three/indicators/StanceChangeIndicator
+ * @category Combat UI
+ * @korean 자세변경표시기
+ */
+import React from "react";
+/**
+ * Props for StanceChangeIndicator component
+ */
+export interface StanceChangeIndicatorProps {
+    /** Current stance index (0-7) */
+    readonly currentStance: number;
+    /** Previous stance index (0-7) for change detection */
+    readonly previousStance: number;
+    /** Mobile layout flag */
+    readonly isMobile?: boolean;
+    /** Display duration in milliseconds (default: 1000ms) */
+    readonly duration?: number;
+    /** Show transition progress bar (default: true) */
+    readonly showProgress?: boolean;
+    /** Transition duration in milliseconds for progress bar (default: 600ms) */
+    readonly transitionDuration?: number;
+}
+/**
+ * StanceChangeIndicator Component
+ *
+ * Displays a temporary overlay showing the current trigram stance
+ * with Korean name, English name, and trigram symbol.
+ *
+ * Features:
+ * - Fade in/out animation
+ * - Korean cyberpunk styling
+ * - Responsive mobile layout
+ * - Trigram symbol display
+ * - Glow effect for visual emphasis
+ *
+ * @example
+ * ```tsx
+ * <StanceChangeIndicator
+ *   currentStance={player.stance}
+ *   previousStance={previousStance}
+ *   isMobile={isMobile}
+ * />
+ * ```
+ *
+ * @public
+ * @korean 자세변경표시기
+ */
+export declare const StanceChangeIndicator: React.FC<StanceChangeIndicatorProps>;
+//# sourceMappingURL=StanceChangeIndicator.d.ts.map

package/lib/components/shared/three/indicators/StanceChangeIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StanceChangeIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/indicators/StanceChangeIndicator.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,KAA+C,MAAM,OAAO,CAAC;AAapE;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,iCAAiC;IACjC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,uDAAuD;IACvD,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,yBAAyB;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,yDAAyD;IACzD,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,mDAAmD;IACnD,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,4EAA4E;IAC5E,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA2PtE,CAAC"}

package/lib/components/shared/three/indicators/StanceChangeIndicator.js

@@ -0,0 +1,222 @@
+import { TrigramStance } from "../../../../types/common.js";
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import "../../../../types/constants/index.js";
+import { TRIGRAM_STANCES_ORDER } from "../../../../systems/trigram/types.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { getTrigramElementColor, getTrigramEnglishName, getTrigramKoreanName, getTrigramSymbol } from "./ElementalColorSystem.js";
+import { triggerStanceChangeHaptic } from "./HapticFeedback.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Html } from "@react-three/drei";
+//#region src/components/shared/three/indicators/StanceChangeIndicator.tsx
+/**
+* StanceChangeIndicator - Visual feedback for stance changes
+* Displays Korean and English stance names with trigram symbols
+* 
+* @module components/shared/three/indicators/StanceChangeIndicator
+* @category Combat UI
+* @korean 자세변경표시기
+*/
+/**
+* StanceChangeIndicator Component
+* 
+* Displays a temporary overlay showing the current trigram stance
+* with Korean name, English name, and trigram symbol.
+* 
+* Features:
+* - Fade in/out animation
+* - Korean cyberpunk styling
+* - Responsive mobile layout
+* - Trigram symbol display
+* - Glow effect for visual emphasis
+* 
+* @example
+* ```tsx
+* <StanceChangeIndicator
+*   currentStance={player.stance}
+*   previousStance={previousStance}
+*   isMobile={isMobile}
+* />
+* ```
+* 
+* @public
+* @korean 자세변경표시기
+*/
+var StanceChangeIndicator = ({ currentStance, previousStance, isMobile = false, duration = 1e3, showProgress = true, transitionDuration = 600 }) => {
+	const [showIndicator, setShowIndicator] = useState(false);
+	const [progress, setProgress] = useState(0);
+	const isMountedRef = useRef(true);
+	const startTimeRef = useRef(0);
+	const animationFrameRef = useRef(void 0);
+	useEffect(() => {
+		isMountedRef.current = true;
+		return () => {
+			isMountedRef.current = false;
+		};
+	}, []);
+	useEffect(() => {
+		if (animationFrameRef.current !== void 0) {
+			cancelAnimationFrame(animationFrameRef.current);
+			animationFrameRef.current = void 0;
+		}
+		if (currentStance !== previousStance) {
+			setShowIndicator(true);
+			setProgress(0);
+			startTimeRef.current = 0;
+			triggerStanceChangeHaptic();
+			if (showProgress) {
+				const animate = (timestamp) => {
+					if (!isMountedRef.current) return;
+					if (startTimeRef.current === 0) startTimeRef.current = timestamp;
+					const elapsed = timestamp - startTimeRef.current;
+					const newProgress = Math.min(elapsed / transitionDuration * 100, 100);
+					setProgress(newProgress);
+					if (newProgress < 100) animationFrameRef.current = requestAnimationFrame(animate);
+				};
+				animationFrameRef.current = requestAnimationFrame(animate);
+			}
+			const timer = setTimeout(() => {
+				if (isMountedRef.current) setShowIndicator(false);
+			}, duration);
+			return () => {
+				clearTimeout(timer);
+				if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+			};
+		}
+	}, [
+		currentStance,
+		previousStance,
+		duration,
+		showProgress,
+		transitionDuration
+	]);
+	const stance = useMemo(() => TRIGRAM_STANCES_ORDER[currentStance] ?? TrigramStance.GEON, [currentStance]);
+	const elementalColor = useMemo(() => getTrigramElementColor(stance), [stance]);
+	const koreanName = useMemo(() => getTrigramKoreanName(stance), [stance]);
+	const englishName = useMemo(() => getTrigramEnglishName(stance), [stance]);
+	const trigramSymbol = useMemo(() => getTrigramSymbol(stance), [stance]);
+	const animationStyles = useMemo(() => /* @__PURE__ */ jsx("style", { children: `
+        @keyframes fadeInOut {
+          0% {
+            opacity: 0;
+            transform: translateY(-20px);
+          }
+          10% {
+            opacity: 1;
+            transform: translateY(0);
+          }
+          90% {
+            opacity: 1;
+            transform: translateY(0);
+          }
+          100% {
+            opacity: 0;
+            transform: translateY(-10px);
+          }
+        }
+      ` }), []);
+	if (!showIndicator) return null;
+	const fontSize = isMobile ? 24 : 36;
+	const subFontSize = isMobile ? 14 : 18;
+	const top = isMobile ? "30%" : "20%";
+	const primaryColorHex = hexToRgbaString(elementalColor, 1);
+	return /* @__PURE__ */ jsx(Html, {
+		fullscreen: true,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-testid": "stance-change-indicator",
+			role: "status",
+			"aria-live": "polite",
+			"aria-label": `Stance changed to ${englishName}`,
+			style: {
+				position: "absolute",
+				top,
+				left: "50%",
+				transform: "translateX(-50%)",
+				textAlign: "center",
+				animation: "fadeInOut 1s",
+				pointerEvents: "none",
+				zIndex: 1e3
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						fontSize: `${fontSize}px`,
+						color: primaryColorHex,
+						fontFamily: FONT_FAMILY.KOREAN,
+						fontWeight: "bold",
+						textShadow: `0 0 20px ${hexToRgbaString(elementalColor, .8)}, 
+                        0 0 40px ${hexToRgbaString(elementalColor, .5)}`,
+						marginBottom: "8px"
+					},
+					children: [
+						koreanName,
+						" ",
+						trigramSymbol
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: `${subFontSize}px`,
+						color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 1),
+						fontFamily: FONT_FAMILY.KOREAN,
+						textShadow: `0 0 10px ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .6)}`,
+						marginBottom: showProgress ? "12px" : "0"
+					},
+					children: englishName
+				}),
+				showProgress && /* @__PURE__ */ jsxs("div", {
+					"data-testid": "stance-transition-progress",
+					style: {
+						width: "200px",
+						margin: "0 auto",
+						padding: "8px 0"
+					},
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: "11px",
+								color: "rgba(255, 255, 255, 0.7)",
+								fontFamily: FONT_FAMILY.KOREAN,
+								marginBottom: "4px",
+								letterSpacing: "1px"
+							},
+							children: "팔괘전환 | Transition"
+						}),
+						/* @__PURE__ */ jsx("div", {
+							style: {
+								width: "100%",
+								height: "6px",
+								backgroundColor: "rgba(0, 0, 0, 0.6)",
+								borderRadius: "3px",
+								overflow: "hidden",
+								border: `1px solid ${hexToRgbaString(elementalColor, .3)}`
+							},
+							children: /* @__PURE__ */ jsx("div", { style: {
+								width: `${progress}%`,
+								height: "100%",
+								backgroundColor: primaryColorHex,
+								transition: "width 0.05s linear",
+								boxShadow: `0 0 8px ${primaryColorHex}`
+							} })
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								fontSize: "10px",
+								color: "rgba(255, 255, 255, 0.5)",
+								fontFamily: FONT_FAMILY.KOREAN,
+								marginTop: "4px"
+							},
+							children: [Math.max(0, Math.ceil(transitionDuration * (1 - progress / 100))), "ms"]
+						})
+					]
+				}),
+				animationStyles
+			]
+		})
+	});
+};
+//#endregion
+export { StanceChangeIndicator };
+
+//# sourceMappingURL=StanceChangeIndicator.js.map

package/lib/components/shared/three/indicators/StanceChangeIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StanceChangeIndicator.js","names":[],"sources":["../../../../../src/components/shared/three/indicators/StanceChangeIndicator.tsx"],"sourcesContent":["/**\n * StanceChangeIndicator - Visual feedback for stance changes\n * Displays Korean and English stance names with trigram symbols\n * \n * @module components/shared/three/indicators/StanceChangeIndicator\n * @category Combat UI\n * @korean 자세변경표시기\n */\n\n \nimport { Html } from \"@react-three/drei\";\nimport React, { useEffect, useState, useMemo, useRef } from \"react\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { TRIGRAM_STANCES_ORDER } from \"../../../../systems/trigram/types\";\nimport { TrigramStance } from \"../../../../types/common\";\nimport { \n  getTrigramElementColor, \n  getTrigramKoreanName, \n  getTrigramEnglishName,\n  getTrigramSymbol\n} from \"./ElementalColorSystem\";\nimport { triggerStanceChangeHaptic } from \"./HapticFeedback\";\n\n/**\n * Props for StanceChangeIndicator component\n */\nexport interface StanceChangeIndicatorProps {\n  /** Current stance index (0-7) */\n  readonly currentStance: number;\n  /** Previous stance index (0-7) for change detection */\n  readonly previousStance: number;\n  /** Mobile layout flag */\n  readonly isMobile?: boolean;\n  /** Display duration in milliseconds (default: 1000ms) */\n  readonly duration?: number;\n  /** Show transition progress bar (default: true) */\n  readonly showProgress?: boolean;\n  /** Transition duration in milliseconds for progress bar (default: 600ms) */\n  readonly transitionDuration?: number;\n}\n\n/**\n * StanceChangeIndicator Component\n * \n * Displays a temporary overlay showing the current trigram stance\n * with Korean name, English name, and trigram symbol.\n * \n * Features:\n * - Fade in/out animation\n * - Korean cyberpunk styling\n * - Responsive mobile layout\n * - Trigram symbol display\n * - Glow effect for visual emphasis\n * \n * @example\n * ```tsx\n * <StanceChangeIndicator\n *   currentStance={player.stance}\n *   previousStance={previousStance}\n *   isMobile={isMobile}\n * />\n * ```\n * \n * @public\n * @korean 자세변경표시기\n */\nexport const StanceChangeIndicator: React.FC<StanceChangeIndicatorProps> = ({\n  currentStance,\n  previousStance,\n  isMobile = false,\n  duration = 1000,\n  showProgress = true,\n  transitionDuration = 600,\n}) => {\n  const [showIndicator, setShowIndicator] = useState(false);\n  const [progress, setProgress] = useState(0);\n  const isMountedRef = useRef(true);\n  const startTimeRef = useRef<number>(0);\n  const animationFrameRef = useRef<number | undefined>(undefined);\n\n  // Track component mount state\n  useEffect(() => {\n    isMountedRef.current = true;\n    return () => {\n      isMountedRef.current = false;\n    };\n  }, []);\n\n  // Show/hide indicator based on stance change\n  // This effect intentionally sets state synchronously for immediate visual feedback\n  useEffect(() => {\n    // Cancel any existing animation frame first\n    if (animationFrameRef.current !== undefined) {\n      cancelAnimationFrame(animationFrameRef.current);\n      animationFrameRef.current = undefined;\n    }\n\n    if (currentStance !== previousStance) {\n      setShowIndicator(true);\n      setProgress(0);\n      startTimeRef.current = 0;\n\n      // Trigger haptic feedback for stance change\n      triggerStanceChangeHaptic();\n\n      // Animation loop for progress bar\n      if (showProgress) {\n        const animate = (timestamp: number) => {\n          if (!isMountedRef.current) return;\n          \n          // Initialize start time on first frame\n          if (startTimeRef.current === 0) {\n            startTimeRef.current = timestamp;\n          }\n          \n          const elapsed = timestamp - startTimeRef.current;\n          const newProgress = Math.min((elapsed / transitionDuration) * 100, 100);\n          \n          setProgress(newProgress);\n\n          if (newProgress < 100) {\n            animationFrameRef.current = requestAnimationFrame(animate);\n          }\n        };\n\n        animationFrameRef.current = requestAnimationFrame(animate);\n      }\n\n      const timer = setTimeout(() => {\n        if (isMountedRef.current) {\n          setShowIndicator(false);\n        }\n      }, duration);\n\n      return () => {\n        clearTimeout(timer);\n        if (animationFrameRef.current) {\n          cancelAnimationFrame(animationFrameRef.current);\n        }\n      };\n    }\n  }, [currentStance, previousStance, duration, showProgress, transitionDuration]);\n\n  // Get trigram stance from index\n  const stance = useMemo(\n    () => TRIGRAM_STANCES_ORDER[currentStance] ?? TrigramStance.GEON,\n    [currentStance]\n  );\n\n  // Get elemental color for stance\n  const elementalColor = useMemo(\n    () => getTrigramElementColor(stance),\n    [stance]\n  );\n\n  // Get trigram names using elemental color system\n  const koreanName = useMemo(\n    () => getTrigramKoreanName(stance),\n    [stance]\n  );\n\n  const englishName = useMemo(\n    () => getTrigramEnglishName(stance),\n    [stance]\n  );\n\n  const trigramSymbol = useMemo(\n    () => getTrigramSymbol(stance),\n    [stance]\n  );\n\n  // Memoize animation styles to prevent redefinition on every render\n  const animationStyles = useMemo(() => (\n    <style>\n      {`\n        @keyframes fadeInOut {\n          0% {\n            opacity: 0;\n            transform: translateY(-20px);\n          }\n          10% {\n            opacity: 1;\n            transform: translateY(0);\n          }\n          90% {\n            opacity: 1;\n            transform: translateY(0);\n          }\n          100% {\n            opacity: 0;\n            transform: translateY(-10px);\n          }\n        }\n      `}\n    </style>\n  ), []);\n\n  if (!showIndicator) return null;\n\n  const fontSize = isMobile ? 24 : 36;\n  const subFontSize = isMobile ? 14 : 18;\n  const top = isMobile ? \"30%\" : \"20%\";\n\n  // Use elemental color system\n  const primaryColorHex = hexToRgbaString(elementalColor, 1);\n\n  return (\n    <Html fullscreen>\n      <div\n        data-testid=\"stance-change-indicator\"\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={`Stance changed to ${englishName}`}\n        style={{\n          position: \"absolute\",\n          top,\n          left: \"50%\",\n          transform: \"translateX(-50%)\",\n          textAlign: \"center\",\n          animation: \"fadeInOut 1s\",\n          pointerEvents: \"none\",\n          zIndex: 1000,\n        }}\n      >\n        {/* Main stance display */}\n        <div\n          style={{\n            fontSize: `${fontSize}px`,\n            color: primaryColorHex,\n            fontFamily: FONT_FAMILY.KOREAN,\n            fontWeight: \"bold\",\n            textShadow: `0 0 20px ${hexToRgbaString(elementalColor, 0.8)}, \n                        0 0 40px ${hexToRgbaString(elementalColor, 0.5)}`,\n            marginBottom: \"8px\",\n          }}\n        >\n          {koreanName} {trigramSymbol}\n        </div>\n\n        {/* English name */}\n        <div\n          style={{\n            fontSize: `${subFontSize}px`,\n            color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 1),\n            fontFamily: FONT_FAMILY.KOREAN,\n            textShadow: `0 0 10px ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.6)}`,\n            marginBottom: showProgress ? \"12px\" : \"0\",\n          }}\n        >\n          {englishName}\n        </div>\n\n        {/* Transition progress bar (600ms) */}\n        {showProgress && (\n          <div\n            data-testid=\"stance-transition-progress\"\n            style={{\n              width: \"200px\",\n              margin: \"0 auto\",\n              padding: \"8px 0\",\n            }}\n          >\n            {/* Progress label */}\n            <div\n              style={{\n                fontSize: \"11px\",\n                color: \"rgba(255, 255, 255, 0.7)\",\n                fontFamily: FONT_FAMILY.KOREAN,\n                marginBottom: \"4px\",\n                letterSpacing: \"1px\",\n              }}\n            >\n              팔괘전환 | Transition\n            </div>\n            \n            {/* Progress bar container */}\n            <div\n              style={{\n                width: \"100%\",\n                height: \"6px\",\n                backgroundColor: \"rgba(0, 0, 0, 0.6)\",\n                borderRadius: \"3px\",\n                overflow: \"hidden\",\n                border: `1px solid ${hexToRgbaString(elementalColor, 0.3)}`,\n              }}\n            >\n              {/* Progress bar fill */}\n              <div\n                style={{\n                  width: `${progress}%`,\n                  height: \"100%\",\n                  backgroundColor: primaryColorHex,\n                  transition: \"width 0.05s linear\",\n                  boxShadow: `0 0 8px ${primaryColorHex}`,\n                }}\n              />\n            </div>\n            \n            {/* Time remaining */}\n            <div\n              style={{\n                fontSize: \"10px\",\n                color: \"rgba(255, 255, 255, 0.5)\",\n                fontFamily: FONT_FAMILY.KOREAN,\n                marginTop: \"4px\",\n              }}\n            >\n              {Math.max(0, Math.ceil(transitionDuration * (1 - progress / 100)))}ms\n            </div>\n          </div>\n        )}\n\n        {/* CSS Animation - Memoized to prevent redefinition */}\n        {animationStyles}\n      </div>\n    </Html>\n  );\n};\n"],"mappings":"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"}