blacktrigram 0.7.2

package/lib/components/screens/combat/components/indicators/StaminaWarning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaminaWarning.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/indicators/StaminaWarning.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkExD,CAAC"}

package/lib/components/screens/combat/components/indicators/StaminaWarning.js

@@ -0,0 +1,83 @@
+import { hexToRgbaString } from "../../../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../../../shared/base/useKoreanTheme.js";
+import { useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/combat/components/indicators/StaminaWarning.tsx
+/**
+* StaminaWarning Component - Visual warning for low stamina
+*
+* Displays a yellow flashing indicator when stamina drops below critical threshold (20%).
+* Uses CSS animation for attention-grabbing flash effect.
+*
+* NOTE: This component is rendered OUTSIDE the Canvas as part of the HTML overlay.
+* It does NOT use Html from drei - it's a standard React component.
+*
+* Refactored to use useKoreanTheme for consistent styling.
+*
+* @module components/combat/StaminaWarning
+* @category Combat UI
+* @korean 체력경고
+*/
+/**
+* StaminaWarning - Yellow flash warning for critical stamina depletion
+*
+* Renders a fullscreen flashing yellow border when stamina drops below 20%.
+* Only visible when stamina is below 20. If stamina is 20 or higher, the component does not render.
+* Uses CSS keyframe animation for fast attention-grabbing flash at 60fps.
+* Uses useKoreanTheme for consistent color scheme.
+*
+* @example
+* ```tsx
+* <StaminaWarning stamina={15} isMobile={false} /> // Renders warning
+* <StaminaWarning stamina={25} isMobile={false} /> // Does not render
+* ```
+*/
+var StaminaWarning = ({ stamina, isMobile }) => {
+	const theme = useKoreanTheme({
+		variant: "danger",
+		size: "md",
+		isMobile
+	});
+	const warningStyle = useMemo(() => {
+		const criticalThreshold = 20;
+		if (stamina >= criticalThreshold) return null;
+		const urgency = (criticalThreshold - Math.max(0, Math.min(criticalThreshold, stamina))) / criticalThreshold;
+		const borderWidth = isMobile ? "4px" : "6px";
+		const warningColor = hexToRgbaString(theme.colors.WARNING_YELLOW, 1);
+		const animationDuration = Math.max(.6, 1.2 - urgency * .6);
+		return {
+			position: "fixed",
+			inset: borderWidth,
+			pointerEvents: "none",
+			border: `${borderWidth} solid ${warningColor}`,
+			boxShadow: `0 0 20px ${warningColor}`,
+			animation: `staminaFlash ${animationDuration}s ease-in-out infinite`,
+			transition: "border-color 0.3s ease-out",
+			zIndex: 85
+		};
+	}, [
+		stamina,
+		isMobile,
+		theme.colors.WARNING_YELLOW
+	]);
+	if (stamina >= 20 || !warningStyle) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: `
+          @keyframes staminaFlash {
+            0%, 100% {
+              opacity: 0.3;
+            }
+            50% {
+              opacity: 1;
+            }
+          }
+        ` }), /* @__PURE__ */ jsx("div", {
+		"data-testid": "stamina-warning",
+		style: warningStyle,
+		"aria-hidden": "true"
+	})] });
+};
+StaminaWarning.displayName = "StaminaWarning";
+//#endregion
+export { StaminaWarning };
+
+//# sourceMappingURL=StaminaWarning.js.map

package/lib/components/screens/combat/components/indicators/StaminaWarning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaminaWarning.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/indicators/StaminaWarning.tsx"],"sourcesContent":["/**\n * StaminaWarning Component - Visual warning for low stamina\n *\n * Displays a yellow flashing indicator when stamina drops below critical threshold (20%).\n * Uses CSS animation for attention-grabbing flash effect.\n *\n * NOTE: This component is rendered OUTSIDE the Canvas as part of the HTML overlay.\n * It does NOT use Html from drei - it's a standard React component.\n *\n * Refactored to use useKoreanTheme for consistent styling.\n *\n * @module components/combat/StaminaWarning\n * @category Combat UI\n * @korean 체력경고\n */\n\nimport React, { useMemo } from \"react\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\n\nexport interface StaminaWarningProps {\n  /**\n   * Current stamina amount (0-100)\n   * @korean 체력량\n   */\n  readonly stamina: number;\n\n  /**\n   * Mobile responsive mode (reduced flash intensity)\n   * @korean 모바일여부\n   */\n  readonly isMobile: boolean;\n}\n\n/**\n * StaminaWarning - Yellow flash warning for critical stamina depletion\n *\n * Renders a fullscreen flashing yellow border when stamina drops below 20%.\n * Only visible when stamina is below 20. If stamina is 20 or higher, the component does not render.\n * Uses CSS keyframe animation for fast attention-grabbing flash at 60fps.\n * Uses useKoreanTheme for consistent color scheme.\n *\n * @example\n * ```tsx\n * <StaminaWarning stamina={15} isMobile={false} /> // Renders warning\n * <StaminaWarning stamina={25} isMobile={false} /> // Does not render\n * ```\n */\nexport const StaminaWarning: React.FC<StaminaWarningProps> = ({\n  stamina,\n  isMobile,\n}) => {\n  const theme = useKoreanTheme({ variant: \"danger\", size: \"md\", isMobile });\n  \n  const warningStyle = useMemo(() => {\n    // Only show when stamina is critically low\n    const criticalThreshold = 20;\n    if (stamina >= criticalThreshold) {\n      return null;\n    }\n\n    // Clamp stamina to 0-20 range for intensity calculation\n    const clampedStamina = Math.max(0, Math.min(criticalThreshold, stamina));\n\n    // Calculate urgency based on how low stamina is (20-0% -> 0-1)\n    const urgency = (criticalThreshold - clampedStamina) / criticalThreshold;\n\n    // Mobile uses thinner border\n    const borderWidth = isMobile ? \"4px\" : \"6px\";\n\n    // Use theme WARNING_YELLOW constant with proper conversion\n    const warningColor = hexToRgbaString(theme.colors.WARNING_YELLOW, 1);\n    // Animation speed increases with urgency\n    const animationDuration = Math.max(0.6, 1.2 - urgency * 0.6);\n\n    return {\n      position: \"fixed\" as const,\n      inset: borderWidth,\n      pointerEvents: \"none\" as const,\n      border: `${borderWidth} solid ${warningColor}`,\n      boxShadow: `0 0 20px ${warningColor}`,\n      animation: `staminaFlash ${animationDuration}s ease-in-out infinite`,\n      transition: \"border-color 0.3s ease-out\",\n      zIndex: 85, // Below balance indicator but above game content\n    };\n  }, [stamina, isMobile, theme.colors.WARNING_YELLOW]);\n\n  // Don't render if stamina is not critical\n  if (stamina >= 20 || !warningStyle) {\n    return null;\n  }\n\n  return (\n    <>\n      {/* CSS keyframe animation for flashing */}\n      <style>\n        {`\n          @keyframes staminaFlash {\n            0%, 100% {\n              opacity: 0.3;\n            }\n            50% {\n              opacity: 1;\n            }\n          }\n        `}\n      </style>\n      <div\n        data-testid=\"stamina-warning\"\n        style={warningStyle}\n        aria-hidden=\"true\"\n      />\n    </>\n  );\n};\n\nStaminaWarning.displayName = \"StaminaWarning\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,IAAa,kBAAiD,EAC5D,SACA,eACI;CACJ,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAU,MAAM;EAAM;EAAU,CAAC;CAEzE,MAAM,eAAe,cAAc;EAEjC,MAAM,oBAAoB;AAC1B,MAAI,WAAW,kBACb,QAAO;EAOT,MAAM,WAAW,oBAHM,KAAK,IAAI,GAAG,KAAK,IAAI,mBAAmB,QAAQ,CAAC,IAGjB;EAGvD,MAAM,cAAc,WAAW,QAAQ;EAGvC,MAAM,eAAe,gBAAgB,MAAM,OAAO,gBAAgB,EAAE;EAEpE,MAAM,oBAAoB,KAAK,IAAI,IAAK,MAAM,UAAU,GAAI;AAE5D,SAAO;GACL,UAAU;GACV,OAAO;GACP,eAAe;GACf,QAAQ,GAAG,YAAY,SAAS;GAChC,WAAW,YAAY;GACvB,WAAW,gBAAgB,kBAAkB;GAC7C,YAAY;GACZ,QAAQ;GACT;IACA;EAAC;EAAS;EAAU,MAAM,OAAO;EAAe,CAAC;AAGpD,KAAI,WAAW,MAAM,CAAC,aACpB,QAAO;AAGT,QACE,qBAAA,UAAA,EAAA,UAAA,CAEE,oBAAC,SAAD,EAAA,UACG;;;;;;;;;WAUK,CAAA,EACR,oBAAC,OAAD;EACE,eAAY;EACZ,OAAO;EACP,eAAY;EACZ,CAAA,CACD,EAAA,CAAA;;AAIP,eAAe,cAAc"}

package/lib/components/screens/combat/components/indicators/TechniqueNameDisplay.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Technique Name Display Component
+ *
+ * Shows Korean technique name during attack execution with animated overlay.
+ * Implements the technique-to-animation link by displaying technique names
+ * when attacks are performed.
+ *
+ * Refactored to use useKoreanTheme for consistent theming.
+ *
+ * @module components/combat/components/TechniqueNameDisplay
+ * @category Combat UI
+ * @korean 기술이름표시
+ */
+import React from "react";
+/**
+ * Props for TechniqueNameDisplay component
+ *
+ * @public
+ * @korean 기술이름표시속성
+ */
+export interface TechniqueNameDisplayProps {
+    /**
+     * Korean technique name to display
+     * @korean 한글기술이름
+     */
+    readonly koreanName?: string;
+    /**
+     * English technique name (optional)
+     * @korean 영어기술이름
+     */
+    readonly englishName?: string;
+    /**
+     * Duration to display in milliseconds
+     * @korean 표시지속시간
+     */
+    readonly duration?: number;
+    /**
+     * Position in 3D space (relative to attacker)
+     * @korean 3D공간위치
+     */
+    readonly position?: [number, number, number];
+    /**
+     * Whether technique is critical hit
+     * @korean 치명타여부
+     */
+    readonly isCritical?: boolean;
+    /**
+     * Whether to show the technique name
+     * @korean 표시여부
+     */
+    readonly visible?: boolean;
+}
+/**
+ * Technique Name Display Component
+ *
+ * Displays Korean and English technique names during attack execution.
+ * Uses Html overlay from @react-three/drei for 3D positioning.
+ * Uses useKoreanTheme for consistent color scheme.
+ *
+ * Features:
+ * - Bilingual Korean-English display
+ * - Animated fade-in/fade-out
+ * - Critical hit styling with red glow
+ * - Auto-hide after duration
+ *
+ * @example
+ * ```tsx
+ * <TechniqueNameDisplay
+ *   koreanName="경동맥격"
+ *   englishName="Carotid Strike"
+ *   duration={2000}
+ *   position={[0, 2, 0]}
+ *   isCritical={true}
+ *   visible={true}
+ * />
+ * ```
+ *
+ * @public
+ * @korean 기술이름표시컴포넌트
+ */
+export declare const TechniqueNameDisplay: React.FC<TechniqueNameDisplayProps>;
+export default TechniqueNameDisplay;
+//# sourceMappingURL=TechniqueNameDisplay.d.ts.map

package/lib/components/screens/combat/components/indicators/TechniqueNameDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TechniqueNameDisplay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/indicators/TechniqueNameDisplay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAuC,MAAM,OAAO,CAAC;AAK5D;;;;;GAKG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAE9B;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAE7C;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAoIpE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/components/screens/combat/components/indicators/TechniqueNameDisplay.js

@@ -0,0 +1,161 @@
+import { hexColorToCSS } from "../../../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../../../shared/base/useKoreanTheme.js";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Html } from "@react-three/drei";
+//#region src/components/screens/combat/components/indicators/TechniqueNameDisplay.tsx
+/**
+* Technique Name Display Component
+* 
+* Shows Korean technique name during attack execution with animated overlay.
+* Implements the technique-to-animation link by displaying technique names
+* when attacks are performed.
+* 
+* Refactored to use useKoreanTheme for consistent theming.
+* 
+* @module components/combat/components/TechniqueNameDisplay
+* @category Combat UI
+* @korean 기술이름표시
+*/
+/**
+* Technique Name Display Component
+* 
+* Displays Korean and English technique names during attack execution.
+* Uses Html overlay from @react-three/drei for 3D positioning.
+* Uses useKoreanTheme for consistent color scheme.
+* 
+* Features:
+* - Bilingual Korean-English display
+* - Animated fade-in/fade-out
+* - Critical hit styling with red glow
+* - Auto-hide after duration
+* 
+* @example
+* ```tsx
+* <TechniqueNameDisplay
+*   koreanName="경동맥격"
+*   englishName="Carotid Strike"
+*   duration={2000}
+*   position={[0, 2, 0]}
+*   isCritical={true}
+*   visible={true}
+* />
+* ```
+* 
+* @public
+* @korean 기술이름표시컴포넌트
+*/
+var TechniqueNameDisplay = ({ koreanName, englishName, duration = 2e3, position = [
+	0,
+	2,
+	0
+], isCritical = false, visible = true }) => {
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "xlarge",
+		isMobile: false
+	});
+	const [opacity, setOpacity] = useState(0);
+	const [isVisible, setIsVisible] = useState(false);
+	useEffect(() => {
+		if (!visible || !koreanName && !englishName) {
+			setIsVisible(false);
+			setOpacity(0);
+			return;
+		}
+		setIsVisible(true);
+		setOpacity(1);
+		const fadeOutTimer = setTimeout(() => {
+			setOpacity(0);
+		}, duration - 500);
+		const hideTimer = setTimeout(() => {
+			setIsVisible(false);
+		}, duration);
+		return () => {
+			clearTimeout(fadeOutTimer);
+			clearTimeout(hideTimer);
+		};
+	}, [
+		visible,
+		koreanName,
+		englishName,
+		duration
+	]);
+	const { textColor, glowColor } = useMemo(() => {
+		if (isCritical) return {
+			textColor: "#FF0055",
+			glowColor: "#FF0055"
+		};
+		return {
+			textColor: hexColorToCSS(theme.colors.ACCENT_GOLD),
+			glowColor: hexColorToCSS(theme.colors.PRIMARY_CYAN)
+		};
+	}, [
+		isCritical,
+		theme.colors.ACCENT_GOLD,
+		theme.colors.PRIMARY_CYAN
+	]);
+	if (!isVisible || !koreanName && !englishName) return null;
+	return /* @__PURE__ */ jsx(Html, {
+		position,
+		center: true,
+		distanceFactor: 10,
+		occlude: false,
+		style: {
+			transition: "opacity 0.5s ease-in-out",
+			opacity,
+			pointerEvents: "none",
+			userSelect: "none"
+		},
+		"data-testid": "technique-name-display",
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "center",
+				gap: "4px",
+				fontFamily: theme.fontFamily.KOREAN,
+				textShadow: `0 0 10px ${glowColor}, 0 0 20px ${glowColor}`
+			},
+			children: [
+				koreanName && /* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: isCritical ? "32px" : "28px",
+						fontWeight: "bold",
+						color: textColor,
+						letterSpacing: "2px"
+					},
+					"data-testid": "technique-name-korean",
+					children: koreanName
+				}),
+				englishName && /* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: isCritical ? "18px" : "16px",
+						fontWeight: "normal",
+						color: hexColorToCSS(theme.colors.PRIMARY_CYAN),
+						opacity: .8,
+						letterSpacing: "1px"
+					},
+					"data-testid": "technique-name-english",
+					children: englishName
+				}),
+				isCritical && /* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: "14px",
+						fontWeight: "bold",
+						color: "#FF0055",
+						marginTop: "4px",
+						textTransform: "uppercase",
+						letterSpacing: "2px"
+					},
+					"data-testid": "technique-critical-indicator",
+					children: "치명타 | CRITICAL"
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { TechniqueNameDisplay as default };
+
+//# sourceMappingURL=TechniqueNameDisplay.js.map

package/lib/components/screens/combat/components/indicators/TechniqueNameDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TechniqueNameDisplay.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/indicators/TechniqueNameDisplay.tsx"],"sourcesContent":["/**\n * Technique Name Display Component\n * \n * Shows Korean technique name during attack execution with animated overlay.\n * Implements the technique-to-animation link by displaying technique names\n * when attacks are performed.\n * \n * Refactored to use useKoreanTheme for consistent theming.\n * \n * @module components/combat/components/TechniqueNameDisplay\n * @category Combat UI\n * @korean 기술이름표시\n */\n\nimport React, { useEffect, useState, useMemo } from \"react\";\nimport { Html } from \"@react-three/drei\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexColorToCSS } from \"../../../../../utils/colorUtils\";\n\n/**\n * Props for TechniqueNameDisplay component\n * \n * @public\n * @korean 기술이름표시속성\n */\nexport interface TechniqueNameDisplayProps {\n  /**\n   * Korean technique name to display\n   * @korean 한글기술이름\n   */\n  readonly koreanName?: string;\n\n  /**\n   * English technique name (optional)\n   * @korean 영어기술이름\n   */\n  readonly englishName?: string;\n\n  /**\n   * Duration to display in milliseconds\n   * @korean 표시지속시간\n   */\n  readonly duration?: number;\n\n  /**\n   * Position in 3D space (relative to attacker)\n   * @korean 3D공간위치\n   */\n  readonly position?: [number, number, number];\n\n  /**\n   * Whether technique is critical hit\n   * @korean 치명타여부\n   */\n  readonly isCritical?: boolean;\n\n  /**\n   * Whether to show the technique name\n   * @korean 표시여부\n   */\n  readonly visible?: boolean;\n}\n\n/**\n * Technique Name Display Component\n * \n * Displays Korean and English technique names during attack execution.\n * Uses Html overlay from @react-three/drei for 3D positioning.\n * Uses useKoreanTheme for consistent color scheme.\n * \n * Features:\n * - Bilingual Korean-English display\n * - Animated fade-in/fade-out\n * - Critical hit styling with red glow\n * - Auto-hide after duration\n * \n * @example\n * ```tsx\n * <TechniqueNameDisplay\n *   koreanName=\"경동맥격\"\n *   englishName=\"Carotid Strike\"\n *   duration={2000}\n *   position={[0, 2, 0]}\n *   isCritical={true}\n *   visible={true}\n * />\n * ```\n * \n * @public\n * @korean 기술이름표시컴포넌트\n */\nexport const TechniqueNameDisplay: React.FC<TechniqueNameDisplayProps> = ({\n  koreanName,\n  englishName,\n  duration = 2000,\n  position = [0, 2, 0],\n  isCritical = false,\n  visible = true,\n}) => {\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"xlarge\", isMobile: false });\n  const [opacity, setOpacity] = useState(0);\n  const [isVisible, setIsVisible] = useState(false);\n\n  useEffect(() => {\n    if (!visible || (!koreanName && !englishName)) {\n      // Ensure overlay is hidden when not visible or no names provided\n      setIsVisible(false);\n      setOpacity(0);\n      return;\n    }\n\n    // Fade in\n    setIsVisible(true);\n    setOpacity(1);\n\n    // Fade out after duration\n    const fadeOutTimer = setTimeout(() => {\n      setOpacity(0);\n    }, duration - 500); // Start fading 500ms before end\n\n    // Hide completely after fade out\n    const hideTimer = setTimeout(() => {\n      setIsVisible(false);\n    }, duration);\n\n    return () => {\n      clearTimeout(fadeOutTimer);\n      clearTimeout(hideTimer);\n    };\n  }, [visible, koreanName, englishName, duration]);\n\n  // Memoize colors to avoid recalculating on every render\n  const { textColor, glowColor } = useMemo(() => {\n    if (isCritical) {\n      return {\n        textColor: \"#FF0055\",\n        glowColor: \"#FF0055\",\n      };\n    }\n    return {\n      textColor: hexColorToCSS(theme.colors.ACCENT_GOLD),\n      glowColor: hexColorToCSS(theme.colors.PRIMARY_CYAN),\n    };\n  }, [isCritical, theme.colors.ACCENT_GOLD, theme.colors.PRIMARY_CYAN]);\n\n  if (!isVisible || (!koreanName && !englishName)) {\n    return null;\n  }\n\n  return (\n    <Html\n      position={position}\n      center\n      distanceFactor={10}\n      occlude={false}\n      style={{\n        transition: \"opacity 0.5s ease-in-out\",\n        opacity,\n        pointerEvents: \"none\",\n        userSelect: \"none\",\n      }}\n      data-testid=\"technique-name-display\"\n    >\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          gap: \"4px\",\n          fontFamily: theme.fontFamily.KOREAN,\n          textShadow: `0 0 10px ${glowColor}, 0 0 20px ${glowColor}`,\n        }}\n      >\n        {/* Korean name (primary) */}\n        {koreanName && (\n          <div\n            style={{\n              fontSize: isCritical ? \"32px\" : \"28px\",\n              fontWeight: \"bold\",\n              color: textColor,\n              letterSpacing: \"2px\",\n            }}\n            data-testid=\"technique-name-korean\"\n          >\n            {koreanName}\n          </div>\n        )}\n\n        {/* English name (secondary) */}\n        {englishName && (\n          <div\n            style={{\n              fontSize: isCritical ? \"18px\" : \"16px\",\n              fontWeight: \"normal\",\n              color: hexColorToCSS(theme.colors.PRIMARY_CYAN),\n              opacity: 0.8,\n              letterSpacing: \"1px\",\n            }}\n            data-testid=\"technique-name-english\"\n          >\n            {englishName}\n          </div>\n        )}\n\n        {/* Critical hit indicator */}\n        {isCritical && (\n          <div\n            style={{\n              fontSize: \"14px\",\n              fontWeight: \"bold\",\n              color: \"#FF0055\",\n              marginTop: \"4px\",\n              textTransform: \"uppercase\",\n              letterSpacing: \"2px\",\n            }}\n            data-testid=\"technique-critical-indicator\"\n          >\n            치명타 | CRITICAL\n          </div>\n        )}\n      </div>\n    </Html>\n  );\n};\n\nexport default TechniqueNameDisplay;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2FA,IAAa,wBAA6D,EACxE,YACA,aACA,WAAW,KACX,WAAW;CAAC;CAAG;CAAG;CAAE,EACpB,aAAa,OACb,UAAU,WACN;CACJ,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAU,UAAU;EAAO,CAAC;CACrF,MAAM,CAAC,SAAS,cAAc,SAAS,EAAE;CACzC,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;AAEjD,iBAAgB;AACd,MAAI,CAAC,WAAY,CAAC,cAAc,CAAC,aAAc;AAE7C,gBAAa,MAAM;AACnB,cAAW,EAAE;AACb;;AAIF,eAAa,KAAK;AAClB,aAAW,EAAE;EAGb,MAAM,eAAe,iBAAiB;AACpC,cAAW,EAAE;KACZ,WAAW,IAAI;EAGlB,MAAM,YAAY,iBAAiB;AACjC,gBAAa,MAAM;KAClB,SAAS;AAEZ,eAAa;AACX,gBAAa,aAAa;AAC1B,gBAAa,UAAU;;IAExB;EAAC;EAAS;EAAY;EAAa;EAAS,CAAC;CAGhD,MAAM,EAAE,WAAW,cAAc,cAAc;AAC7C,MAAI,WACF,QAAO;GACL,WAAW;GACX,WAAW;GACZ;AAEH,SAAO;GACL,WAAW,cAAc,MAAM,OAAO,YAAY;GAClD,WAAW,cAAc,MAAM,OAAO,aAAa;GACpD;IACA;EAAC;EAAY,MAAM,OAAO;EAAa,MAAM,OAAO;EAAa,CAAC;AAErE,KAAI,CAAC,aAAc,CAAC,cAAc,CAAC,YACjC,QAAO;AAGT,QACE,oBAAC,MAAD;EACY;EACV,QAAA;EACA,gBAAgB;EAChB,SAAS;EACT,OAAO;GACL,YAAY;GACZ;GACA,eAAe;GACf,YAAY;GACb;EACD,eAAY;YAEZ,qBAAC,OAAD;GACE,OAAO;IACL,SAAS;IACT,eAAe;IACf,YAAY;IACZ,KAAK;IACL,YAAY,MAAM,WAAW;IAC7B,YAAY,YAAY,UAAU,aAAa;IAChD;aARH;IAWG,cACC,oBAAC,OAAD;KACE,OAAO;MACL,UAAU,aAAa,SAAS;MAChC,YAAY;MACZ,OAAO;MACP,eAAe;MAChB;KACD,eAAY;eAEX;KACG,CAAA;IAIP,eACC,oBAAC,OAAD;KACE,OAAO;MACL,UAAU,aAAa,SAAS;MAChC,YAAY;MACZ,OAAO,cAAc,MAAM,OAAO,aAAa;MAC/C,SAAS;MACT,eAAe;MAChB;KACD,eAAY;eAEX;KACG,CAAA;IAIP,cACC,oBAAC,OAAD;KACE,OAAO;MACL,UAAU;MACV,YAAY;MACZ,OAAO;MACP,WAAW;MACX,eAAe;MACf,eAAe;MAChB;KACD,eAAY;eACb;KAEK,CAAA;IAEJ;;EACD,CAAA"}

package/lib/components/screens/combat/helpers/AnimationUpdater.d.ts

@@ -0,0 +1,38 @@
+/**
+ * AnimationUpdater - Component that updates player animations at 60fps
+ *
+ * Uses useFrame to call update() on both animation state machines.
+ * This component only updates animation state and renders no visual elements.
+ *
+ * @module components/combat/helpers/AnimationUpdater
+ * @category Combat Utilities
+ * @korean 애니메이션업데이터
+ */
+import React from "react";
+import { usePlayerAnimation } from "../../../../hooks/usePlayerAnimation";
+/**
+ * Props for AnimationUpdater component
+ */
+export interface AnimationUpdaterProps {
+    /** Player 1 animation state machine */
+    readonly player1Animation: ReturnType<typeof usePlayerAnimation>;
+    /** Player 2 animation state machine */
+    readonly player2Animation: ReturnType<typeof usePlayerAnimation>;
+}
+/**
+ * AnimationUpdater Component
+ *
+ * Updates both player animations at 60fps using Three.js useFrame hook.
+ * Component only updates animation state, renders no visual elements.
+ *
+ * @example
+ * ```tsx
+ * <AnimationUpdater
+ *   player1Animation={player1Animation}
+ *   player2Animation={player2Animation}
+ * />
+ * ```
+ */
+export declare const AnimationUpdater: React.FC<AnimationUpdaterProps>;
+export default AnimationUpdater;
+//# sourceMappingURL=AnimationUpdater.d.ts.map

package/lib/components/screens/combat/helpers/AnimationUpdater.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationUpdater.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/combat/helpers/AnimationUpdater.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE1E;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,uCAAuC;IACvC,QAAQ,CAAC,gBAAgB,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;IACjE,uCAAuC;IACvC,QAAQ,CAAC,gBAAgB,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;CAClE;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAW5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/screens/combat/helpers/AnimationUpdater.js

@@ -0,0 +1,37 @@
+import { useFrame } from "@react-three/fiber";
+//#region src/components/screens/combat/helpers/AnimationUpdater.tsx
+/**
+* AnimationUpdater - Component that updates player animations at 60fps
+*
+* Uses useFrame to call update() on both animation state machines.
+* This component only updates animation state and renders no visual elements.
+*
+* @module components/combat/helpers/AnimationUpdater
+* @category Combat Utilities
+* @korean 애니메이션업데이터
+*/
+/**
+* AnimationUpdater Component
+*
+* Updates both player animations at 60fps using Three.js useFrame hook.
+* Component only updates animation state, renders no visual elements.
+*
+* @example
+* ```tsx
+* <AnimationUpdater
+*   player1Animation={player1Animation}
+*   player2Animation={player2Animation}
+* />
+* ```
+*/
+var AnimationUpdater = ({ player1Animation, player2Animation }) => {
+	useFrame((_state, delta) => {
+		player1Animation.update(delta);
+		player2Animation.update(delta);
+	});
+	return null;
+};
+//#endregion
+export { AnimationUpdater as default };
+
+//# sourceMappingURL=AnimationUpdater.js.map

package/lib/components/screens/combat/helpers/AnimationUpdater.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationUpdater.js","names":[],"sources":["../../../../../src/components/screens/combat/helpers/AnimationUpdater.tsx"],"sourcesContent":["/**\n * AnimationUpdater - Component that updates player animations at 60fps\n *\n * Uses useFrame to call update() on both animation state machines.\n * This component only updates animation state and renders no visual elements.\n *\n * @module components/combat/helpers/AnimationUpdater\n * @category Combat Utilities\n * @korean 애니메이션업데이터\n */\n\nimport { useFrame } from \"@react-three/fiber\";\nimport React from \"react\";\nimport { usePlayerAnimation } from \"../../../../hooks/usePlayerAnimation\";\n\n/**\n * Props for AnimationUpdater component\n */\nexport interface AnimationUpdaterProps {\n  /** Player 1 animation state machine */\n  readonly player1Animation: ReturnType<typeof usePlayerAnimation>;\n  /** Player 2 animation state machine */\n  readonly player2Animation: ReturnType<typeof usePlayerAnimation>;\n}\n\n/**\n * AnimationUpdater Component\n *\n * Updates both player animations at 60fps using Three.js useFrame hook.\n * Component only updates animation state, renders no visual elements.\n *\n * @example\n * ```tsx\n * <AnimationUpdater\n *   player1Animation={player1Animation}\n *   player2Animation={player2Animation}\n * />\n * ```\n */\nexport const AnimationUpdater: React.FC<AnimationUpdaterProps> = ({\n  player1Animation,\n  player2Animation,\n}) => {\n  useFrame((_state, delta) => {\n    // Update both player animations at 60fps\n    player1Animation.update(delta);\n    player2Animation.update(delta);\n  });\n\n  return null; // Component only updates animation state, renders no visual elements\n};\n\nexport default AnimationUpdater;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,IAAa,oBAAqD,EAChE,kBACA,uBACI;AACJ,WAAU,QAAQ,UAAU;AAE1B,mBAAiB,OAAO,MAAM;AAC9B,mBAAiB,OAAO,MAAM;GAC9B;AAEF,QAAO"}

package/lib/components/screens/combat/helpers/combatHelpers.d.ts

@@ -0,0 +1,37 @@
+/**
+ * CombatScreen3D Helper Utilities
+ *
+ * Extracted helper functions and constants from CombatScreen3D
+ * for better code organization and maintainability.
+ *
+ * @module components/combat/helpers/combatHelpers
+ * @category Combat Utilities
+ * @korean 전투화면도우미
+ */
+import { PlayerState } from "../../../../systems";
+import { TrigramStance } from "../../../../types";
+/**
+ * Map of trigram stances to their array indices for fast lookups
+ */
+export declare const STANCE_INDEX_MAP: Map<TrigramStance, number>;
+/**
+ * Round announcement fade-out delay (in milliseconds)
+ * Wait for previous announcement to fully fade out before showing next one
+ */
+export declare const ANNOUNCEMENT_FADE_OUT_DELAY = 300;
+/**
+ * Calculate accuracy percentage for a player
+ * Uses hits / (hits + misses) when miss tracking is available
+ * Falls back to 100% if hits exist but no miss tracking, or 0% if no combat activity
+ *
+ * @param player - Player state with combat statistics
+ * @returns Accuracy percentage (0-100)
+ *
+ * @example
+ * ```typescript
+ * const accuracy = calculateAccuracy(playerState);
+ * console.log(`Accuracy: ${accuracy}%`);
+ * ```
+ */
+export declare const calculateAccuracy: (player: PlayerState) => number;
+//# sourceMappingURL=combatHelpers.d.ts.map

package/lib/components/screens/combat/helpers/combatHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combatHelpers.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/combat/helpers/combatHelpers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD;;GAEG;AACH,eAAO,MAAM,gBAAgB,4BAAmC,CAAC;AAKjE;;;GAGG;AACH,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,iBAAiB,GAAI,QAAQ,WAAW,KAAG,MAavD,CAAC"}

package/lib/components/screens/combat/helpers/combatHelpers.js

@@ -0,0 +1,33 @@
+import { TRIGRAM_STANCES_ORDER } from "../../../../systems/trigram/types.js";
+//#region src/components/screens/combat/helpers/combatHelpers.ts
+/**
+* Map of trigram stances to their array indices for fast lookups
+*/
+var STANCE_INDEX_MAP = /* @__PURE__ */ new Map();
+TRIGRAM_STANCES_ORDER.forEach((stance, index) => {
+	STANCE_INDEX_MAP.set(stance, index);
+});
+/**
+* Calculate accuracy percentage for a player
+* Uses hits / (hits + misses) when miss tracking is available
+* Falls back to 100% if hits exist but no miss tracking, or 0% if no combat activity
+*
+* @param player - Player state with combat statistics
+* @returns Accuracy percentage (0-100)
+*
+* @example
+* ```typescript
+* const accuracy = calculateAccuracy(playerState);
+* console.log(`Accuracy: ${accuracy}%`);
+* ```
+*/
+var calculateAccuracy = (player) => {
+	const hits = player.hitsLanded ?? 0;
+	const totalAttempts = hits + (player.misses ?? 0);
+	if (totalAttempts > 0) return hits / totalAttempts * 100;
+	return hits > 0 ? 100 : 0;
+};
+//#endregion
+export { STANCE_INDEX_MAP, calculateAccuracy };
+
+//# sourceMappingURL=combatHelpers.js.map

package/lib/components/screens/combat/helpers/combatHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combatHelpers.js","names":[],"sources":["../../../../../src/components/screens/combat/helpers/combatHelpers.ts"],"sourcesContent":["/**\n * CombatScreen3D Helper Utilities\n *\n * Extracted helper functions and constants from CombatScreen3D\n * for better code organization and maintainability.\n *\n * @module components/combat/helpers/combatHelpers\n * @category Combat Utilities\n * @korean 전투화면도우미\n */\n\nimport { PlayerState } from \"../../../../systems\";\nimport { TrigramStance } from \"../../../../types\";\nimport { TRIGRAM_STANCES_ORDER } from \"../../../../systems/trigram/types\";\n\n/**\n * Map of trigram stances to their array indices for fast lookups\n */\nexport const STANCE_INDEX_MAP = new Map<TrigramStance, number>();\nTRIGRAM_STANCES_ORDER.forEach((stance, index) => {\n  STANCE_INDEX_MAP.set(stance, index);\n});\n\n/**\n * Round announcement fade-out delay (in milliseconds)\n * Wait for previous announcement to fully fade out before showing next one\n */\nexport const ANNOUNCEMENT_FADE_OUT_DELAY = 300;\n\n/**\n * Calculate accuracy percentage for a player\n * Uses hits / (hits + misses) when miss tracking is available\n * Falls back to 100% if hits exist but no miss tracking, or 0% if no combat activity\n *\n * @param player - Player state with combat statistics\n * @returns Accuracy percentage (0-100)\n *\n * @example\n * ```typescript\n * const accuracy = calculateAccuracy(playerState);\n * console.log(`Accuracy: ${accuracy}%`);\n * ```\n */\nexport const calculateAccuracy = (player: PlayerState): number => {\n  const hits = player.hitsLanded ?? 0;\n  const misses = player.misses ?? 0;\n  const totalAttempts = hits + misses;\n\n  // If we have miss tracking, use proper accuracy formula\n  if (totalAttempts > 0) {\n    return (hits / totalAttempts) * 100;\n  }\n\n  // Fallback: if no miss tracking and hits exist, show 100%\n  // Otherwise 0% (no combat activity)\n  return hits > 0 ? 100 : 0;\n};\n"],"mappings":";;;;;AAkBA,IAAa,mCAAmB,IAAI,KAA4B;AAChE,sBAAsB,SAAS,QAAQ,UAAU;AAC/C,kBAAiB,IAAI,QAAQ,MAAM;EACnC;;;;;;;;;;;;;;;AAsBF,IAAa,qBAAqB,WAAgC;CAChE,MAAM,OAAO,OAAO,cAAc;CAElC,MAAM,gBAAgB,QADP,OAAO,UAAU;AAIhC,KAAI,gBAAgB,EAClB,QAAQ,OAAO,gBAAiB;AAKlC,QAAO,OAAO,IAAI,MAAM"}

package/lib/components/screens/combat/helpers/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @module components/combat/helpers
+ * @category Combat Utilities
+ */
+export { AnimationUpdater } from "./AnimationUpdater";
+export type { AnimationUpdaterProps } from "./AnimationUpdater";
+export { STANCE_INDEX_MAP, ANNOUNCEMENT_FADE_OUT_DELAY, calculateAccuracy, } from "./combatHelpers";
+//# sourceMappingURL=index.d.ts.map

package/lib/components/screens/combat/helpers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/combat/helpers/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EACL,gBAAgB,EAChB,2BAA2B,EAC3B,iBAAiB,GAClB,MAAM,iBAAiB,CAAC"}

package/lib/components/screens/combat/helpers/index.js

@@ -0,0 +1,2 @@
+import "./AnimationUpdater.js";
+import "./combatHelpers.js";

package/lib/components/screens/combat/hooks/useAICombat.d.ts

@@ -0,0 +1,108 @@
+/**
+ * useAICombat Hook - AI Combat System Integration
+ *
+ * Custom hook for AI combat behavior with strategic decision-making.
+ *
+ * Manages AI opponent behavior including:
+ * - Strategic decision-making via DecisionTree
+ * - Combo attack sequences
+ * - Adaptive difficulty based on player skill
+ * - Performance monitoring (<10ms target for decisions)
+ *
+ * Side effects:
+ * - Manages internal state for AI actions and aggression
+ * - Sets up intervals/timers for AI action scheduling
+ * - Updates state in response to combat events and round status
+ *
+ * @param config Configuration object for AI combat behavior.
+ * @param config.player The AI-controlled player state.
+ * @param config.opponent The opponent player state.
+ * @param config.personality The AI's personality archetype.
+ * @param config.adaptiveDifficulty Adaptive difficulty system instance.
+ * @param config.arenaBounds Arena boundaries for movement validation.
+ * @param config.roundStarted Whether the combat round has started.
+ * @param config.roundEnded Whether the combat round has ended.
+ * @param config.isPaused Whether the game is paused.
+ * @param config.onExecuteAction Callback to execute AI actions.
+ * @param config.onStanceChange Callback to handle stance changes.
+ *
+ * @returns AI combat state and control functions
+ *
+ * @example
+ * ```typescript
+ * const { aiState } = useAICombat({
+ *   player: aiPlayer,
+ *   opponent: humanPlayer,
+ *   personality: AI_PERSONALITIES.AGGRESSIVE_STRIKER,
+ *   adaptiveDifficulty,
+ *   arenaBounds,
+ *   roundStarted,
+ *   roundEnded,
+ *   isPaused,
+ *   onExecuteAction: handleAction,
+ *   onStanceChange: handleStanceChange,
+ * });
+ * ```
+ */
+import { AdaptiveDifficulty, AIComboSystem, AIDecisionTree, AIPersonality, DifficultyParameters } from "../../../../systems/ai";
+import { PlayerState } from "../../../../systems/player";
+import { KoreanTechnique } from "../../../../systems/vitalpoint/types";
+import { Position, TrigramStance } from "../../../../types";
+/**
+ * AI state management
+ */
+interface AIState {
+    nextAction: number;
+    targetPosition: Position;
+    lastActionType: string;
+    consecutiveAttacks: number;
+    actionCooldown: number;
+    aggressionLevel: number;
+    selectedTechnique?: KoreanTechnique;
+    targetVitalPoint?: string;
+    recentTechniques: string[];
+}
+/**
+ * AI combat hook configuration
+ */
+interface UseAICombatConfig {
+    readonly player: PlayerState;
+    readonly opponent: PlayerState;
+    readonly personality: AIPersonality;
+    readonly adaptiveDifficulty: AdaptiveDifficulty;
+    readonly isPaused: boolean;
+    readonly roundStarted: boolean;
+    readonly roundEnded: boolean;
+    readonly arenaBounds: {
+        readonly x: number;
+        readonly y: number;
+        readonly width: number;
+        readonly height: number;
+        readonly scale?: number;
+        readonly worldWidthMeters: number;
+        readonly worldDepthMeters: number;
+    };
+    readonly onExecuteAction: (action: string, targetPosition?: Position, selectedTechnique?: KoreanTechnique, targetVitalPoint?: string) => void;
+    readonly onStanceChange?: (stance: TrigramStance) => void;
+    readonly onLateralityChange?: () => void;
+    readonly playerLaterality?: "left" | "right";
+    readonly opponentLaterality?: "left" | "right";
+}
+/**
+ * AI combat hook return type
+ */
+interface UseAICombatReturn {
+    readonly aiState: AIState;
+    readonly comboSystem: AIComboSystem;
+    readonly decisionTree: AIDecisionTree;
+    readonly adjustedPersonality: AIPersonality;
+    readonly executeAIAction: (action: string, targetPosition?: Position, selectedTechnique?: KoreanTechnique, targetVitalPoint?: string) => void;
+    readonly currentDifficultyParams: DifficultyParameters;
+    readonly updateDifficultyTarget: (newParams: DifficultyParameters) => void;
+}
+/**
+ * Custom hook for AI combat behavior
+ */
+export declare function useAICombat(config: UseAICombatConfig): UseAICombatReturn;
+export {};
+//# sourceMappingURL=useAICombat.d.ts.map