blacktrigram 0.7.2

package/lib/components/screens/combat/components/hud/DifficultyIndicator.js

@@ -0,0 +1,129 @@
+import { DifficultyTier } from "../../../../../systems/ai/AdaptiveDifficulty.js";
+import "../../../../../systems/ai/index.js";
+import { hexColorToCSS, hexToRgbaString } from "../../../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../../../shared/base/useKoreanTheme.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/combat/components/hud/DifficultyIndicator.tsx
+/**
+* DifficultyIndicator Component - AI Difficulty Tier Display
+*
+* Shows the current AI difficulty tier with Korean-English bilingual text
+* and color-coded visual feedback based on tier level.
+*
+* **Korean Philosophy (난이도 표시)**:
+* Provides transparent feedback to player about AI challenge level,
+* helping them understand their skill progression.
+*/
+/**
+* Get tier display name with Korean and English
+*/
+function getTierName(tier) {
+	switch (tier) {
+		case DifficultyTier.BEGINNER: return {
+			korean: "초보",
+			english: "Beginner"
+		};
+		case DifficultyTier.NOVICE: return {
+			korean: "입문",
+			english: "Novice"
+		};
+		case DifficultyTier.INTERMEDIATE: return {
+			korean: "중급",
+			english: "Intermediate"
+		};
+		case DifficultyTier.ADVANCED: return {
+			korean: "고급",
+			english: "Advanced"
+		};
+		case DifficultyTier.EXPERT: return {
+			korean: "전문",
+			english: "Expert"
+		};
+		default: return {
+			korean: "중급",
+			english: "Intermediate"
+		};
+	}
+}
+/**
+* Get numeric color for difficulty tier using theme colors
+* Maps tiers to existing color scheme for consistency
+*/
+function getTierColorValue(tier, theme) {
+	switch (tier) {
+		case DifficultyTier.BEGINNER: return theme.colors.POSITIVE_GREEN;
+		case DifficultyTier.NOVICE: return theme.colors.ACCENT_GREEN;
+		case DifficultyTier.INTERMEDIATE: return theme.colors.ACCENT_GOLD;
+		case DifficultyTier.ADVANCED: return theme.colors.SECONDARY_ORANGE;
+		case DifficultyTier.EXPERT: return theme.colors.NEGATIVE_RED;
+		default: return theme.colors.ACCENT_GOLD;
+	}
+}
+/**
+* DifficultyIndicator - Visual feedback for current AI difficulty tier
+*
+* Uses relative positioning for embedding in container HUDs
+*/
+var DifficultyIndicator = ({ tier, isMobile }) => {
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "small",
+		isMobile
+	});
+	const tierName = getTierName(tier);
+	const tierColorValue = getTierColorValue(tier, theme);
+	const tierColor = useMemo(() => hexColorToCSS(tierColorValue), [tierColorValue]);
+	const tierBackground = useMemo(() => hexToRgbaString(tierColorValue, .13), [tierColorValue]);
+	const tierBoxShadow = useMemo(() => hexToRgbaString(tierColorValue, .27), [tierColorValue]);
+	const fontSize = isMobile ? 11 : 13;
+	const padding = isMobile ? "6px 10px" : "8px 12px";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "difficulty-indicator",
+		style: {
+			position: "relative",
+			padding,
+			background: tierBackground,
+			border: `2px solid ${tierColor}`,
+			borderRadius: "4px",
+			fontFamily: theme.fontFamily.KOREAN,
+			fontSize: `${fontSize}px`,
+			color: tierColor,
+			textShadow: "0 0 4px rgba(0,0,0,0.8)",
+			pointerEvents: "none",
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: "2px",
+			transition: "all 0.3s ease-in-out",
+			boxShadow: `0 0 8px ${tierBoxShadow}`,
+			width: "100%",
+			boxSizing: "border-box"
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-testid": "difficulty-label",
+			style: {
+				fontSize: isMobile ? "9px" : "10px",
+				opacity: .8,
+				letterSpacing: "0.5px"
+			},
+			children: "AI Difficulty"
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-testid": "difficulty-tier",
+			style: {
+				fontWeight: "bold",
+				whiteSpace: "nowrap",
+				letterSpacing: "0.5px"
+			},
+			children: [
+				tierName.korean,
+				" | ",
+				tierName.english
+			]
+		})]
+	});
+};
+//#endregion
+export { DifficultyIndicator };
+
+//# sourceMappingURL=DifficultyIndicator.js.map

package/lib/components/screens/combat/components/hud/DifficultyIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DifficultyIndicator.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/hud/DifficultyIndicator.tsx"],"sourcesContent":["/**\n * DifficultyIndicator Component - AI Difficulty Tier Display\n *\n * Shows the current AI difficulty tier with Korean-English bilingual text\n * and color-coded visual feedback based on tier level.\n *\n * **Korean Philosophy (난이도 표시)**:\n * Provides transparent feedback to player about AI challenge level,\n * helping them understand their skill progression.\n */\n\nimport React, { useMemo } from \"react\";\nimport { DifficultyTier } from \"../../../../../systems/ai\";\nimport {\n  hexColorToCSS,\n  hexToRgbaString,\n} from \"../../../../../utils/colorUtils\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\n\nexport interface DifficultyIndicatorProps {\n  /** Current difficulty tier (1-5) */\n  readonly tier: DifficultyTier;\n  /** Whether to use mobile-optimized sizing */\n  readonly isMobile: boolean;\n}\n\n/**\n * Get tier display name with Korean and English\n */\nfunction getTierName(tier: DifficultyTier): {\n  korean: string;\n  english: string;\n} {\n  switch (tier) {\n    case DifficultyTier.BEGINNER:\n      return { korean: \"초보\", english: \"Beginner\" };\n    case DifficultyTier.NOVICE:\n      return { korean: \"입문\", english: \"Novice\" };\n    case DifficultyTier.INTERMEDIATE:\n      return { korean: \"중급\", english: \"Intermediate\" };\n    case DifficultyTier.ADVANCED:\n      return { korean: \"고급\", english: \"Advanced\" };\n    case DifficultyTier.EXPERT:\n      return { korean: \"전문\", english: \"Expert\" };\n    default:\n      return { korean: \"중급\", english: \"Intermediate\" };\n  }\n}\n\n/**\n * Get numeric color for difficulty tier using theme colors\n * Maps tiers to existing color scheme for consistency\n */\nfunction getTierColorValue(\n  tier: DifficultyTier,\n  theme: ReturnType<typeof useKoreanTheme>,\n): number {\n  switch (tier) {\n    case DifficultyTier.BEGINNER:\n      return theme.colors.POSITIVE_GREEN; // Green - Easy\n    case DifficultyTier.NOVICE:\n      return theme.colors.ACCENT_GREEN; // Light Green\n    case DifficultyTier.INTERMEDIATE:\n      return theme.colors.ACCENT_GOLD; // Gold - Medium\n    case DifficultyTier.ADVANCED:\n      return theme.colors.SECONDARY_ORANGE; // Orange\n    case DifficultyTier.EXPERT:\n      return theme.colors.NEGATIVE_RED; // Red - Hard\n    default:\n      return theme.colors.ACCENT_GOLD; // Default to medium\n  }\n}\n\n/**\n * DifficultyIndicator - Visual feedback for current AI difficulty tier\n *\n * Uses relative positioning for embedding in container HUDs\n */\nexport const DifficultyIndicator: React.FC<DifficultyIndicatorProps> = ({\n  tier,\n  isMobile,\n}) => {\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"small\", isMobile });\n  const tierName = getTierName(tier);\n  const tierColorValue = getTierColorValue(tier, theme);\n\n  // Memoize color calculations\n  const tierColor = useMemo(\n    () => hexColorToCSS(tierColorValue),\n    [tierColorValue],\n  );\n  const tierBackground = useMemo(\n    () => hexToRgbaString(tierColorValue, 0.13),\n    [tierColorValue],\n  );\n  const tierBoxShadow = useMemo(\n    () => hexToRgbaString(tierColorValue, 0.27),\n    [tierColorValue],\n  );\n\n  // Responsive sizing\n  const fontSize = isMobile ? 11 : 13;\n  const padding = isMobile ? \"6px 10px\" : \"8px 12px\";\n\n  return (\n    <div\n      data-testid=\"difficulty-indicator\"\n      style={{\n        position: \"relative\",\n        padding,\n        background: tierBackground, // 13% opacity background\n        border: `2px solid ${tierColor}`,\n        borderRadius: \"4px\",\n        fontFamily: theme.fontFamily.KOREAN,\n        fontSize: `${fontSize}px`,\n        color: tierColor,\n        textShadow: \"0 0 4px rgba(0,0,0,0.8)\",\n        pointerEvents: \"none\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        gap: \"2px\",\n        transition: \"all 0.3s ease-in-out\", // Smooth color/border transitions\n        boxShadow: `0 0 8px ${tierBoxShadow}`, // Subtle glow effect (27% opacity)\n        width: \"100%\",\n        boxSizing: \"border-box\" as const,\n      }}\n    >\n      <div\n        data-testid=\"difficulty-label\"\n        style={{\n          fontSize: isMobile ? \"9px\" : \"10px\",\n          opacity: 0.8,\n          letterSpacing: \"0.5px\",\n        }}\n      >\n        AI Difficulty\n      </div>\n      <div\n        data-testid=\"difficulty-tier\"\n        style={{\n          fontWeight: \"bold\",\n          whiteSpace: \"nowrap\",\n          letterSpacing: \"0.5px\",\n        }}\n      >\n        {tierName.korean} | {tierName.english}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA6BA,SAAS,YAAY,MAGnB;AACA,SAAQ,MAAR;EACE,KAAK,eAAe,SAClB,QAAO;GAAE,QAAQ;GAAM,SAAS;GAAY;EAC9C,KAAK,eAAe,OAClB,QAAO;GAAE,QAAQ;GAAM,SAAS;GAAU;EAC5C,KAAK,eAAe,aAClB,QAAO;GAAE,QAAQ;GAAM,SAAS;GAAgB;EAClD,KAAK,eAAe,SAClB,QAAO;GAAE,QAAQ;GAAM,SAAS;GAAY;EAC9C,KAAK,eAAe,OAClB,QAAO;GAAE,QAAQ;GAAM,SAAS;GAAU;EAC5C,QACE,QAAO;GAAE,QAAQ;GAAM,SAAS;GAAgB;;;;;;;AAQtD,SAAS,kBACP,MACA,OACQ;AACR,SAAQ,MAAR;EACE,KAAK,eAAe,SAClB,QAAO,MAAM,OAAO;EACtB,KAAK,eAAe,OAClB,QAAO,MAAM,OAAO;EACtB,KAAK,eAAe,aAClB,QAAO,MAAM,OAAO;EACtB,KAAK,eAAe,SAClB,QAAO,MAAM,OAAO;EACtB,KAAK,eAAe,OAClB,QAAO,MAAM,OAAO;EACtB,QACE,QAAO,MAAM,OAAO;;;;;;;;AAS1B,IAAa,uBAA2D,EACtE,MACA,eACI;CACJ,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAS;EAAU,CAAC;CAC7E,MAAM,WAAW,YAAY,KAAK;CAClC,MAAM,iBAAiB,kBAAkB,MAAM,MAAM;CAGrD,MAAM,YAAY,cACV,cAAc,eAAe,EACnC,CAAC,eAAe,CACjB;CACD,MAAM,iBAAiB,cACf,gBAAgB,gBAAgB,IAAK,EAC3C,CAAC,eAAe,CACjB;CACD,MAAM,gBAAgB,cACd,gBAAgB,gBAAgB,IAAK,EAC3C,CAAC,eAAe,CACjB;CAGD,MAAM,WAAW,WAAW,KAAK;CACjC,MAAM,UAAU,WAAW,aAAa;AAExC,QACE,qBAAC,OAAD;EACE,eAAY;EACZ,OAAO;GACL,UAAU;GACV;GACA,YAAY;GACZ,QAAQ,aAAa;GACrB,cAAc;GACd,YAAY,MAAM,WAAW;GAC7B,UAAU,GAAG,SAAS;GACtB,OAAO;GACP,YAAY;GACZ,eAAe;GACf,SAAS;GACT,eAAe;GACf,YAAY;GACZ,KAAK;GACL,YAAY;GACZ,WAAW,WAAW;GACtB,OAAO;GACP,WAAW;GACZ;YArBH,CAuBE,oBAAC,OAAD;GACE,eAAY;GACZ,OAAO;IACL,UAAU,WAAW,QAAQ;IAC7B,SAAS;IACT,eAAe;IAChB;aACF;GAEK,CAAA,EACN,qBAAC,OAAD;GACE,eAAY;GACZ,OAAO;IACL,YAAY;IACZ,YAAY;IACZ,eAAe;IAChB;aANH;IAQG,SAAS;IAAO;IAAI,SAAS;IAC1B;KACF"}

package/lib/components/screens/combat/components/hud/FPSMonitor.d.ts

@@ -0,0 +1,48 @@
+/**
+ * FPSMonitor - Real-time performance monitoring component
+ *
+ * Displays current FPS (frames per second) and provides performance warnings
+ * when frame rate drops below target thresholds. Helps verify 60fps target
+ * and identify performance bottlenecks during combat.
+ *
+ * @module components/combat/components/FPSMonitor
+ * @category Performance Monitoring
+ * @korean FPS모니터
+ */
+import React from "react";
+export interface FPSMonitorProps {
+    /** Whether to show the FPS monitor */
+    readonly enabled?: boolean;
+    /** FPS threshold for warning (default: 50) */
+    readonly warningThreshold?: number;
+    /** FPS threshold for critical warning (default: 30) */
+    readonly criticalThreshold?: number;
+    /** Callback when FPS drops below threshold */
+    readonly onFPSDrop?: (fps: number) => void;
+    /** Position from top in pixels (default: 10) */
+    readonly top?: number;
+    /** Position from right in pixels (default: 10) */
+    readonly right?: number;
+}
+/**
+ * FPSMonitor Component
+ *
+ * Monitors and displays real-time FPS during combat. Uses Three.js useFrame
+ * to calculate frames per second and provides visual feedback:
+ * - Green: 60+ fps (excellent)
+ * - Yellow: 50-59 fps (warning)
+ * - Orange: 30-49 fps (poor)
+ * - Red: <30 fps (critical)
+ *
+ * @example
+ * ```tsx
+ * <FPSMonitor
+ *   enabled={showPerformanceStats}
+ *   warningThreshold={50}
+ *   onFPSDrop={(fps) => console.warn(`Performance drop: ${fps} fps`)}
+ * />
+ * ```
+ */
+export declare const FPSMonitor: React.FC<FPSMonitorProps>;
+export default FPSMonitor;
+//# sourceMappingURL=FPSMonitor.d.ts.map

package/lib/components/screens/combat/components/hud/FPSMonitor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FPSMonitor.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/hud/FPSMonitor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAGjF,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,8CAA8C;IAC9C,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACnC,uDAAuD;IACvD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACpC,8CAA8C;IAC9C,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,gDAAgD;IAChD,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+GhD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/screens/combat/components/hud/FPSMonitor.js

@@ -0,0 +1,131 @@
+import { useKoreanTheme } from "../../../../shared/base/useKoreanTheme.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import { Html } from "@react-three/drei";
+//#region src/components/screens/combat/components/hud/FPSMonitor.tsx
+/**
+* FPSMonitor - Real-time performance monitoring component
+*
+* Displays current FPS (frames per second) and provides performance warnings
+* when frame rate drops below target thresholds. Helps verify 60fps target
+* and identify performance bottlenecks during combat.
+*
+* @module components/combat/components/FPSMonitor
+* @category Performance Monitoring
+* @korean FPS모니터
+*/
+/**
+* FPSMonitor Component
+*
+* Monitors and displays real-time FPS during combat. Uses Three.js useFrame
+* to calculate frames per second and provides visual feedback:
+* - Green: 60+ fps (excellent)
+* - Yellow: 50-59 fps (warning)
+* - Orange: 30-49 fps (poor)
+* - Red: <30 fps (critical)
+*
+* @example
+* ```tsx
+* <FPSMonitor
+*   enabled={showPerformanceStats}
+*   warningThreshold={50}
+*   onFPSDrop={(fps) => console.warn(`Performance drop: ${fps} fps`)}
+* />
+* ```
+*/
+var FPSMonitor = ({ enabled = true, warningThreshold = 50, criticalThreshold = 30, onFPSDrop, top = 10, right = 10 }) => {
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "small",
+		isMobile: false
+	});
+	const [fps, setFps] = useState(60);
+	const frameCountRef = useRef(0);
+	const lastTimeRef = useRef(0);
+	const lastWarningTimeRef = useRef(0);
+	const initializedRef = useRef(false);
+	useEffect(() => {
+		lastTimeRef.current = performance.now();
+		initializedRef.current = true;
+	}, []);
+	const updateFPS = useCallback(() => {
+		if (!initializedRef.current) return;
+		frameCountRef.current++;
+		const currentTime = performance.now();
+		const deltaTime = currentTime - lastTimeRef.current;
+		if (deltaTime >= 1e3) {
+			const currentFps = Math.round(frameCountRef.current * 1e3 / deltaTime);
+			setFps(currentFps);
+			if (onFPSDrop && currentFps < warningThreshold) {
+				if (currentTime - lastWarningTimeRef.current >= 3e3) {
+					onFPSDrop(currentFps);
+					lastWarningTimeRef.current = currentTime;
+				}
+			}
+			frameCountRef.current = 0;
+			lastTimeRef.current = currentTime;
+		}
+	}, [onFPSDrop, warningThreshold]);
+	useFrame(() => {
+		if (enabled) updateFPS();
+	});
+	const colorHex = useMemo(() => {
+		let color;
+		if (fps >= 60) color = theme.colors.ACCENT_GOLD;
+		else if (fps >= warningThreshold) color = 16776960;
+		else if (fps >= criticalThreshold) color = 16746496;
+		else color = theme.colors.PRIMARY_RED;
+		return `#${color.toString(16).padStart(6, "0")}`;
+	}, [
+		fps,
+		warningThreshold,
+		criticalThreshold,
+		theme.colors.ACCENT_GOLD,
+		theme.colors.PRIMARY_RED
+	]);
+	const getStatus = () => {
+		if (fps >= 60) return "우수 | Excellent";
+		if (fps >= warningThreshold) return "경고 | Warning";
+		if (fps >= criticalThreshold) return "저하 | Poor";
+		return "심각 | Critical";
+	};
+	if (!enabled) return null;
+	return /* @__PURE__ */ jsx(Html, {
+		fullscreen: true,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-testid": "fps-monitor",
+			style: {
+				position: "absolute",
+				top: `${top}px`,
+				right: `${right}px`,
+				padding: "8px 12px",
+				background: "rgba(0, 0, 0, 0.8)",
+				border: `2px solid ${colorHex}`,
+				borderRadius: "4px",
+				fontFamily: theme.fontFamily.KOREAN,
+				fontSize: "12px",
+				color: colorHex,
+				pointerEvents: "none",
+				zIndex: 9999
+			},
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: {
+					fontWeight: "bold",
+					marginBottom: "2px"
+				},
+				children: ["FPS: ", fps]
+			}), /* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: "10px",
+					opacity: .9
+				},
+				children: getStatus()
+			})]
+		})
+	});
+};
+//#endregion
+export { FPSMonitor as default };
+
+//# sourceMappingURL=FPSMonitor.js.map

package/lib/components/screens/combat/components/hud/FPSMonitor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FPSMonitor.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/hud/FPSMonitor.tsx"],"sourcesContent":["/**\n * FPSMonitor - Real-time performance monitoring component\n *\n * Displays current FPS (frames per second) and provides performance warnings\n * when frame rate drops below target thresholds. Helps verify 60fps target\n * and identify performance bottlenecks during combat.\n *\n * @module components/combat/components/FPSMonitor\n * @category Performance Monitoring\n * @korean FPS모니터\n */\n\nimport { useFrame } from \"@react-three/fiber\";\nimport { Html } from \"@react-three/drei\";\nimport React, { useRef, useState, useCallback, useEffect, useMemo } from \"react\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\n\nexport interface FPSMonitorProps {\n  /** Whether to show the FPS monitor */\n  readonly enabled?: boolean;\n  /** FPS threshold for warning (default: 50) */\n  readonly warningThreshold?: number;\n  /** FPS threshold for critical warning (default: 30) */\n  readonly criticalThreshold?: number;\n  /** Callback when FPS drops below threshold */\n  readonly onFPSDrop?: (fps: number) => void;\n  /** Position from top in pixels (default: 10) */\n  readonly top?: number;\n  /** Position from right in pixels (default: 10) */\n  readonly right?: number;\n}\n\n/**\n * FPSMonitor Component\n *\n * Monitors and displays real-time FPS during combat. Uses Three.js useFrame\n * to calculate frames per second and provides visual feedback:\n * - Green: 60+ fps (excellent)\n * - Yellow: 50-59 fps (warning)\n * - Orange: 30-49 fps (poor)\n * - Red: <30 fps (critical)\n *\n * @example\n * ```tsx\n * <FPSMonitor\n *   enabled={showPerformanceStats}\n *   warningThreshold={50}\n *   onFPSDrop={(fps) => console.warn(`Performance drop: ${fps} fps`)}\n * />\n * ```\n */\nexport const FPSMonitor: React.FC<FPSMonitorProps> = ({\n  enabled = true,\n  warningThreshold = 50,\n  criticalThreshold = 30,\n  onFPSDrop,\n  top = 10,\n  right = 10,\n}) => {\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"small\", isMobile: false });\n  const [fps, setFps] = useState(60);\n  const frameCountRef = useRef(0);\n  const lastTimeRef = useRef(0);\n  const lastWarningTimeRef = useRef(0);\n  const initializedRef = useRef(false);\n  \n  // Initialize performance.now() after mount to avoid impure function call during render\n  useEffect(() => {\n    lastTimeRef.current = performance.now();\n    initializedRef.current = true;\n  }, []);\n\n  const updateFPS = useCallback(() => {\n    // Skip FPS calculation until properly initialized\n    if (!initializedRef.current) return;\n    \n    frameCountRef.current++;\n    const currentTime = performance.now();\n    const deltaTime = currentTime - lastTimeRef.current;\n\n    // Update FPS every second\n    if (deltaTime >= 1000) {\n      const currentFps = Math.round((frameCountRef.current * 1000) / deltaTime);\n      setFps(currentFps);\n      \n      // Trigger warning callback if FPS drops (max once per 3 seconds)\n      if (onFPSDrop && currentFps < warningThreshold) {\n        const timeSinceLastWarning = currentTime - lastWarningTimeRef.current;\n        if (timeSinceLastWarning >= 3000) {\n          onFPSDrop(currentFps);\n          lastWarningTimeRef.current = currentTime;\n        }\n      }\n\n      frameCountRef.current = 0;\n      lastTimeRef.current = currentTime;\n    }\n  }, [onFPSDrop, warningThreshold]);\n\n  useFrame(() => {\n    if (enabled) {\n      updateFPS();\n    }\n  });\n\n  // Calculate color as hex string based on FPS (memoized to avoid repeated conversions)\n  // Note: Returns a 24-bit RGB hex color with no alpha channel.\n  // The conversion below is intentionally hex-only; if alpha support is added\n  // in the future, this logic will need to be updated accordingly.\n  const colorHex = useMemo(() => {\n    let color: number;\n    if (fps >= 60) {\n      color = theme.colors.ACCENT_GOLD; // Excellent\n    } else if (fps >= warningThreshold) {\n      color = 0xffff00; // Warning (yellow)\n    } else if (fps >= criticalThreshold) {\n      color = 0xff8800; // Poor (orange)\n    } else {\n      color = theme.colors.PRIMARY_RED; // Critical (red)\n    }\n    return `#${color.toString(16).padStart(6, \"0\")}`;\n  }, [fps, warningThreshold, criticalThreshold, theme.colors.ACCENT_GOLD, theme.colors.PRIMARY_RED]);\n\n  const getStatus = () => {\n    if (fps >= 60) return \"우수 | Excellent\";\n    if (fps >= warningThreshold) return \"경고 | Warning\";\n    if (fps >= criticalThreshold) return \"저하 | Poor\";\n    return \"심각 | Critical\";\n  };\n\n  if (!enabled) {\n    return null;\n  }\n\n  return (\n    <Html fullscreen>\n      <div\n        data-testid=\"fps-monitor\"\n        style={{\n          position: \"absolute\",\n          top: `${top}px`,\n          right: `${right}px`,\n          padding: \"8px 12px\",\n          background: \"rgba(0, 0, 0, 0.8)\",\n          border: `2px solid ${colorHex}`,\n          borderRadius: \"4px\",\n          fontFamily: theme.fontFamily.KOREAN,\n          fontSize: \"12px\",\n          color: colorHex,\n          pointerEvents: \"none\",\n          zIndex: 9999,\n        }}\n      >\n        <div style={{ fontWeight: \"bold\", marginBottom: \"2px\" }}>\n          FPS: {fps}\n        </div>\n        <div style={{ fontSize: \"10px\", opacity: 0.9 }}>\n          {getStatus()}\n        </div>\n      </div>\n    </Html>\n  );\n};\n\nexport default FPSMonitor;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,IAAa,cAAyC,EACpD,UAAU,MACV,mBAAmB,IACnB,oBAAoB,IACpB,WACA,MAAM,IACN,QAAQ,SACJ;CACJ,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAS,UAAU;EAAO,CAAC;CACpF,MAAM,CAAC,KAAK,UAAU,SAAS,GAAG;CAClC,MAAM,gBAAgB,OAAO,EAAE;CAC/B,MAAM,cAAc,OAAO,EAAE;CAC7B,MAAM,qBAAqB,OAAO,EAAE;CACpC,MAAM,iBAAiB,OAAO,MAAM;AAGpC,iBAAgB;AACd,cAAY,UAAU,YAAY,KAAK;AACvC,iBAAe,UAAU;IACxB,EAAE,CAAC;CAEN,MAAM,YAAY,kBAAkB;AAElC,MAAI,CAAC,eAAe,QAAS;AAE7B,gBAAc;EACd,MAAM,cAAc,YAAY,KAAK;EACrC,MAAM,YAAY,cAAc,YAAY;AAG5C,MAAI,aAAa,KAAM;GACrB,MAAM,aAAa,KAAK,MAAO,cAAc,UAAU,MAAQ,UAAU;AACzE,UAAO,WAAW;AAGlB,OAAI,aAAa,aAAa;QACC,cAAc,mBAAmB,WAClC,KAAM;AAChC,eAAU,WAAW;AACrB,wBAAmB,UAAU;;;AAIjC,iBAAc,UAAU;AACxB,eAAY,UAAU;;IAEvB,CAAC,WAAW,iBAAiB,CAAC;AAEjC,gBAAe;AACb,MAAI,QACF,YAAW;GAEb;CAMF,MAAM,WAAW,cAAc;EAC7B,IAAI;AACJ,MAAI,OAAO,GACT,SAAQ,MAAM,OAAO;WACZ,OAAO,iBAChB,SAAQ;WACC,OAAO,kBAChB,SAAQ;MAER,SAAQ,MAAM,OAAO;AAEvB,SAAO,IAAI,MAAM,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI;IAC7C;EAAC;EAAK;EAAkB;EAAmB,MAAM,OAAO;EAAa,MAAM,OAAO;EAAY,CAAC;CAElG,MAAM,kBAAkB;AACtB,MAAI,OAAO,GAAI,QAAO;AACtB,MAAI,OAAO,iBAAkB,QAAO;AACpC,MAAI,OAAO,kBAAmB,QAAO;AACrC,SAAO;;AAGT,KAAI,CAAC,QACH,QAAO;AAGT,QACE,oBAAC,MAAD;EAAM,YAAA;YACJ,qBAAC,OAAD;GACE,eAAY;GACZ,OAAO;IACL,UAAU;IACV,KAAK,GAAG,IAAI;IACZ,OAAO,GAAG,MAAM;IAChB,SAAS;IACT,YAAY;IACZ,QAAQ,aAAa;IACrB,cAAc;IACd,YAAY,MAAM,WAAW;IAC7B,UAAU;IACV,OAAO;IACP,eAAe;IACf,QAAQ;IACT;aAfH,CAiBE,qBAAC,OAAD;IAAK,OAAO;KAAE,YAAY;KAAQ,cAAc;KAAO;cAAvD,CAAyD,SACjD,IACF;OACN,oBAAC,OAAD;IAAK,OAAO;KAAE,UAAU;KAAQ,SAAS;KAAK;cAC3C,WAAW;IACR,CAAA,CACF;;EACD,CAAA"}

package/lib/components/screens/combat/components/hud/MobileControlsWrapper.d.ts

@@ -0,0 +1,82 @@
+/**
+ * MobileControlsWrapper - Mobile touch controls container
+ *
+ * Wraps all mobile-specific touch controls including:
+ * - Virtual D-Pad for movement
+ * - Action buttons (attack/block)
+ * - Stance wheel for trigram stance selection
+ * - Gesture recognizer for swipe actions
+ *
+ * PRIORITY SUPPORT: Optimized for high-end mobile devices (Super HD, 2K+)
+ * - Enhanced touch targets (56px on Super HD vs 48px standard)
+ * - Larger fonts and better spacing on high-resolution displays
+ * - Full feature parity with desktop experience
+ *
+ * Integrated with:
+ * - CombatScreen3D: Full combat gameplay with mobile controls
+ * - TrainingScreen3D: Training mode with mobile controls
+ * - deviceDetection.ts: Robust mobile detection (handles 2712x1220 Super HD)
+ * - mobileUIUtils.ts: Touch target and font sizing utilities
+ *
+ * Only rendered on mobile devices (isMobile=true)
+ *
+ * @module components/combat/components/MobileControlsWrapper
+ * @category Combat UI
+ * @korean 모바일컨트롤래퍼
+ */
+import React from "react";
+import { ButtonEventType } from "../../../../shared/mobile/ActionButtons";
+import { Direction, DPadEventType } from "../../../../shared/mobile/VirtualDPad";
+import { GestureEvent } from "../../../../../hooks/useTouchControls";
+export interface MobileControlsWrapperProps {
+    /** Whether mobile controls are enabled */
+    readonly enabled: boolean;
+    /** Current stance index (0-7) */
+    readonly currentStanceIndex: number;
+    /** Whether stance wheel is expanded */
+    readonly stanceWheelExpanded: boolean;
+    /** D-Pad movement handler */
+    readonly onMove: (direction: Direction | null, eventType: DPadEventType) => void;
+    /** Attack button handler */
+    readonly onAttack: () => void;
+    /** Block button handler */
+    readonly onBlock: (eventType: ButtonEventType) => void;
+    /** Stance change handler */
+    readonly onStanceChange: (stanceIndex: number) => void;
+    /** Stance wheel toggle handler */
+    readonly onStanceWheelToggle: () => void;
+    /** Gesture handler */
+    readonly onGesture: (gesture: GestureEvent) => void;
+}
+/**
+ * MobileControlsWrapper - Container for all mobile touch controls
+ *
+ * Provides virtual controls for mobile combat gameplay:
+ * - Virtual D-Pad (bottom-left) for 8-direction movement
+ * - Action Buttons (bottom-right) for attack/block
+ * - Stance Wheel (right-center) for trigram stance selection
+ * - Gesture Recognition for swipe-based actions
+ *
+ * Positioning Strategy:
+ * - All controls positioned using centralized layout constants
+ * - D-Pad and ActionButtons use getMobileControlsBottom() for consistency
+ * - Z-index: MOBILE_CONTROLS (50) to ensure visibility over HUD elements
+ *
+ * @example
+ * ```tsx
+ * <MobileControlsWrapper
+ *   enabled={mobileControlsEnabled}
+ *   currentStanceIndex={currentStanceIndex}
+ *   stanceWheelExpanded={stanceWheelExpanded}
+ *   onMove={handleMobileMove}
+ *   onAttack={handleMobileAttack}
+ *   onBlock={handleMobileBlock}
+ *   onStanceChange={handleMobileStanceChange}
+ *   onStanceWheelToggle={() => setStanceWheelExpanded(!stanceWheelExpanded)}
+ *   onGesture={handleMobileGesture}
+ * />
+ * ```
+ */
+export declare const MobileControlsWrapper: React.FC<MobileControlsWrapperProps>;
+export default MobileControlsWrapper;
+//# sourceMappingURL=MobileControlsWrapper.d.ts.map

package/lib/components/screens/combat/components/hud/MobileControlsWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileControlsWrapper.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/hud/MobileControlsWrapper.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAGrE,MAAM,WAAW,0BAA0B;IACzC,0CAA0C;IAC1C,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACpC,uCAAuC;IACvC,QAAQ,CAAC,mBAAmB,EAAE,OAAO,CAAC;IACtC,6BAA6B;IAC7B,QAAQ,CAAC,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IACjF,4BAA4B;IAC5B,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;IAC9B,2BAA2B;IAC3B,QAAQ,CAAC,OAAO,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACvD,4BAA4B;IAC5B,QAAQ,CAAC,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,kCAAkC;IAClC,QAAQ,CAAC,mBAAmB,EAAE,MAAM,IAAI,CAAC;IACzC,sBAAsB;IACtB,QAAQ,CAAC,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;CACrD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAmDtE,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/lib/components/screens/combat/components/hud/MobileControlsWrapper.js

@@ -0,0 +1,73 @@
+import { VirtualDPad } from "../../../../shared/mobile/VirtualDPad.js";
+import { ActionButtons } from "../../../../shared/mobile/ActionButtons.js";
+import { StanceWheelPure } from "../../../../shared/mobile/StanceWheelPure.js";
+import { GestureRecognizerPure } from "../../../../shared/mobile/GestureRecognizerPure.js";
+import "../../../../shared/mobile/index.js";
+import { getMobileControlsBottom } from "../../../../../types/constants/layout.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/combat/components/hud/MobileControlsWrapper.tsx
+/**
+* MobileControlsWrapper - Container for all mobile touch controls
+*
+* Provides virtual controls for mobile combat gameplay:
+* - Virtual D-Pad (bottom-left) for 8-direction movement
+* - Action Buttons (bottom-right) for attack/block
+* - Stance Wheel (right-center) for trigram stance selection
+* - Gesture Recognition for swipe-based actions
+*
+* Positioning Strategy:
+* - All controls positioned using centralized layout constants
+* - D-Pad and ActionButtons use getMobileControlsBottom() for consistency
+* - Z-index: MOBILE_CONTROLS (50) to ensure visibility over HUD elements
+*
+* @example
+* ```tsx
+* <MobileControlsWrapper
+*   enabled={mobileControlsEnabled}
+*   currentStanceIndex={currentStanceIndex}
+*   stanceWheelExpanded={stanceWheelExpanded}
+*   onMove={handleMobileMove}
+*   onAttack={handleMobileAttack}
+*   onBlock={handleMobileBlock}
+*   onStanceChange={handleMobileStanceChange}
+*   onStanceWheelToggle={() => setStanceWheelExpanded(!stanceWheelExpanded)}
+*   onGesture={handleMobileGesture}
+* />
+* ```
+*/
+var MobileControlsWrapper = ({ enabled, currentStanceIndex, stanceWheelExpanded, onMove, onAttack, onBlock, onStanceChange, onStanceWheelToggle, onGesture }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(VirtualDPad, {
+			onMove,
+			disabled: !enabled,
+			opacity: .8,
+			bottom: getMobileControlsBottom()
+		}),
+		/* @__PURE__ */ jsx(ActionButtons, {
+			onAttack,
+			onBlock,
+			disabled: !enabled,
+			opacity: .8,
+			bottom: getMobileControlsBottom()
+		}),
+		/* @__PURE__ */ jsx(StanceWheelPure, {
+			currentStance: currentStanceIndex,
+			onStanceChange,
+			expanded: stanceWheelExpanded,
+			onToggle: onStanceWheelToggle,
+			disabled: !enabled,
+			opacity: .8
+		}),
+		/* @__PURE__ */ jsx(GestureRecognizerPure, {
+			onGesture,
+			enabled,
+			showFeedback: true,
+			minSwipeDistance: 50
+		})
+	] });
+};
+//#endregion
+export { MobileControlsWrapper as default };
+
+//# sourceMappingURL=MobileControlsWrapper.js.map

package/lib/components/screens/combat/components/hud/MobileControlsWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileControlsWrapper.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/hud/MobileControlsWrapper.tsx"],"sourcesContent":["/**\n * MobileControlsWrapper - Mobile touch controls container\n *\n * Wraps all mobile-specific touch controls including:\n * - Virtual D-Pad for movement\n * - Action buttons (attack/block)\n * - Stance wheel for trigram stance selection\n * - Gesture recognizer for swipe actions\n *\n * PRIORITY SUPPORT: Optimized for high-end mobile devices (Super HD, 2K+)\n * - Enhanced touch targets (56px on Super HD vs 48px standard)\n * - Larger fonts and better spacing on high-resolution displays\n * - Full feature parity with desktop experience\n *\n * Integrated with:\n * - CombatScreen3D: Full combat gameplay with mobile controls\n * - TrainingScreen3D: Training mode with mobile controls\n * - deviceDetection.ts: Robust mobile detection (handles 2712x1220 Super HD)\n * - mobileUIUtils.ts: Touch target and font sizing utilities\n *\n * Only rendered on mobile devices (isMobile=true)\n *\n * @module components/combat/components/MobileControlsWrapper\n * @category Combat UI\n * @korean 모바일컨트롤래퍼\n */\n\nimport React from \"react\";\nimport {\n  ActionButtons,\n  GestureRecognizerPure,\n  StanceWheelPure,\n  VirtualDPad,\n} from \"../../../../shared/mobile\";\nimport { ButtonEventType } from \"../../../../shared/mobile/ActionButtons\";\nimport { Direction, DPadEventType } from \"../../../../shared/mobile/VirtualDPad\";\nimport { GestureEvent } from \"../../../../../hooks/useTouchControls\";\nimport { getMobileControlsBottom } from \"../../../../../types/constants/layout\";\n\nexport interface MobileControlsWrapperProps {\n  /** Whether mobile controls are enabled */\n  readonly enabled: boolean;\n  /** Current stance index (0-7) */\n  readonly currentStanceIndex: number;\n  /** Whether stance wheel is expanded */\n  readonly stanceWheelExpanded: boolean;\n  /** D-Pad movement handler */\n  readonly onMove: (direction: Direction | null, eventType: DPadEventType) => void;\n  /** Attack button handler */\n  readonly onAttack: () => void;\n  /** Block button handler */\n  readonly onBlock: (eventType: ButtonEventType) => void;\n  /** Stance change handler */\n  readonly onStanceChange: (stanceIndex: number) => void;\n  /** Stance wheel toggle handler */\n  readonly onStanceWheelToggle: () => void;\n  /** Gesture handler */\n  readonly onGesture: (gesture: GestureEvent) => void;\n}\n\n/**\n * MobileControlsWrapper - Container for all mobile touch controls\n *\n * Provides virtual controls for mobile combat gameplay:\n * - Virtual D-Pad (bottom-left) for 8-direction movement\n * - Action Buttons (bottom-right) for attack/block\n * - Stance Wheel (right-center) for trigram stance selection\n * - Gesture Recognition for swipe-based actions\n *\n * Positioning Strategy:\n * - All controls positioned using centralized layout constants\n * - D-Pad and ActionButtons use getMobileControlsBottom() for consistency\n * - Z-index: MOBILE_CONTROLS (50) to ensure visibility over HUD elements\n *\n * @example\n * ```tsx\n * <MobileControlsWrapper\n *   enabled={mobileControlsEnabled}\n *   currentStanceIndex={currentStanceIndex}\n *   stanceWheelExpanded={stanceWheelExpanded}\n *   onMove={handleMobileMove}\n *   onAttack={handleMobileAttack}\n *   onBlock={handleMobileBlock}\n *   onStanceChange={handleMobileStanceChange}\n *   onStanceWheelToggle={() => setStanceWheelExpanded(!stanceWheelExpanded)}\n *   onGesture={handleMobileGesture}\n * />\n * ```\n */\nexport const MobileControlsWrapper: React.FC<MobileControlsWrapperProps> = ({\n  enabled,\n  currentStanceIndex,\n  stanceWheelExpanded,\n  onMove,\n  onAttack,\n  onBlock,\n  onStanceChange,\n  onStanceWheelToggle,\n  onGesture,\n}) => {\n  return (\n    <>\n      {/* Virtual D-Pad - Bottom-left for movement */}\n      {/* Positioned using centralized constant for consistency */}\n      <VirtualDPad\n        onMove={onMove}\n        disabled={!enabled}\n        opacity={0.8}\n        bottom={getMobileControlsBottom()}\n      />\n\n      {/* Action Buttons - Bottom-right for attack/block */}\n      {/* Positioned using centralized constant for consistency */}\n      <ActionButtons\n        onAttack={onAttack}\n        onBlock={onBlock}\n        disabled={!enabled}\n        opacity={0.8}\n        bottom={getMobileControlsBottom()}\n      />\n\n      {/* Stance Wheel - Right-center for trigram stance selection */}\n      <StanceWheelPure\n        currentStance={currentStanceIndex}\n        onStanceChange={onStanceChange}\n        expanded={stanceWheelExpanded}\n        onToggle={onStanceWheelToggle}\n        disabled={!enabled}\n        opacity={0.8}\n      />\n\n      {/* Gesture Recognizer - Full-screen swipe detection */}\n      <GestureRecognizerPure\n        onGesture={onGesture}\n        enabled={enabled}\n        showFeedback={true}\n        minSwipeDistance={50}\n      />\n    </>\n  );\n};\n\nexport default MobileControlsWrapper;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFA,IAAa,yBAA+D,EAC1E,SACA,oBACA,qBACA,QACA,UACA,SACA,gBACA,qBACA,gBACI;AACJ,QACE,qBAAA,UAAA,EAAA,UAAA;EAGE,oBAAC,aAAD;GACU;GACR,UAAU,CAAC;GACX,SAAS;GACT,QAAQ,yBAAyB;GACjC,CAAA;EAIF,oBAAC,eAAD;GACY;GACD;GACT,UAAU,CAAC;GACX,SAAS;GACT,QAAQ,yBAAyB;GACjC,CAAA;EAGF,oBAAC,iBAAD;GACE,eAAe;GACC;GAChB,UAAU;GACV,UAAU;GACV,UAAU,CAAC;GACX,SAAS;GACT,CAAA;EAGF,oBAAC,uBAAD;GACa;GACF;GACT,cAAc;GACd,kBAAkB;GAClB,CAAA;EACD,EAAA,CAAA"}

package/lib/components/screens/combat/components/hud/PlayerStateOverlayHtml.d.ts

@@ -0,0 +1,80 @@
+/**
+ * PlayerStateOverlayHtml Component - Unified player state visual indicators
+ *
+ * Combines all player state visual effects into a single overlay:
+ * - Pain vignette
+ * - Balance indicator
+ * - Consciousness blur
+ * - Blood loss warning
+ * - Stamina warning
+ *
+ * @module components/combat/PlayerStateOverlayHtml
+ * @category Combat UI
+ * @korean 플레이어상태오버레이
+ */
+import React from "react";
+import type { BalanceState } from "../../../../../types/player-visual";
+export interface PlayerStateOverlayProps {
+    /**
+     * Current pain level (0-100)
+     * @korean 통증
+     */
+    readonly pain: number;
+    /**
+     * Current balance state
+     * @korean 균형상태
+     */
+    readonly balanceState: BalanceState;
+    /**
+     * Player position ('left' or 'right')
+     * @korean 플레이어위치
+     */
+    readonly position: "left" | "right";
+    /**
+     * Current consciousness level (0-100)
+     * @korean 의식
+     */
+    readonly consciousness: number;
+    /**
+     * Current blood loss (0-100, optional)
+     * @korean 출혈
+     */
+    readonly bloodLoss?: number;
+    /**
+     * Current stamina (0-100)
+     * @korean 체력
+     */
+    readonly stamina: number;
+    /**
+     * Mobile responsive mode
+     * @korean 모바일여부
+     */
+    readonly isMobile: boolean;
+}
+/**
+ * PlayerStateOverlayHtml - Unified visual effects for player state
+ *
+ * Combines all player state visual indicators into a single component
+ * with optimal performance and consistent rendering. All effects use
+ * smooth 0.5s transitions and are optimized for 60fps.
+ *
+ * Optimized with React.memo for performance:
+ * - Prevents re-renders when props haven't changed
+ * - Custom comparison function for precise control
+ * - Reduces DOM updates for 60fps target
+ *
+ * @example
+ * ```tsx
+ * <PlayerStateOverlayHtml
+ *   pain={65}
+ *   balanceState="SHAKEN"
+ *   position="left"
+ *   consciousness={80}
+ *   bloodLoss={45}
+ *   stamina={15}
+ *   isMobile={false}
+ * />
+ * ```
+ */
+export declare const PlayerStateOverlayHtml: React.NamedExoticComponent<PlayerStateOverlayProps>;
+//# sourceMappingURL=PlayerStateOverlayHtml.d.ts.map

package/lib/components/screens/combat/components/hud/PlayerStateOverlayHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerStateOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/hud/PlayerStateOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAEvE,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IAEpC;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAEpC;;;OAGG;IACH,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAE/B;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,sBAAsB,qDA8ClC,CAAC"}