blacktrigram 0.7.2

package/lib/components/screens/training/components/TrainingModeSelectorOverlayHtml.js

@@ -0,0 +1,188 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import { SPACING } from "../../../../types/constants/ui.js";
+import "../../../../types/constants/index.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { getNeonTextShadow, getSmoothTransition } from "../../../../utils/visualEffects.js";
+import { formatBilingualText, getEnhancedKoreanOverlayStyles, getResponsiveSpacing } from "../../../../utils/koreanThemeHelpers.js";
+/* empty css          */
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/training/components/TrainingModeSelectorOverlayHtml.tsx
+/**
+* TrainingModeSelectorOverlayHtml - Html overlay for training mode selection
+*
+* Allows switching between different training modes with consistent Korean theming.
+* Uses KOREAN_COLORS constants and bilingual formatting.
+*
+* @module components/screens/training
+* @category Training UI
+* @korean 훈련모드선택오버레이
+*/
+/**
+* Mode information
+*/
+var MODE_INFO = {
+	basics: {
+		korean: "기본 훈련",
+		english: "Basic Training",
+		description: "기초 타격 연습 | Basic striking practice"
+	},
+	advanced: {
+		korean: "고급 훈련",
+		english: "Advanced Training",
+		description: "급소 정밀 타격 | Vital point precision"
+	},
+	free: {
+		korean: "자유 훈련",
+		english: "Free Practice",
+		description: "AI 대련 | Combat vs AI opponent"
+	},
+	stance_training: {
+		korean: "팔괘 수련",
+		english: "Stance Training",
+		description: "팔괘 전환 연습 | Eight trigrams mastery"
+	},
+	vital_point: {
+		korean: "급소 훈련",
+		english: "Vital Point Training",
+		description: "정밀 타격 연습 | Precision targeting drill"
+	},
+	combo_practice: {
+		korean: "연속 기술",
+		english: "Combo Practice",
+		description: "연속 타격 훈련 | Multi-hit techniques"
+	},
+	footwork: {
+		korean: "보법 훈련",
+		english: "Footwork Training",
+		description: "보법 수련 | Movement drills"
+	}
+};
+/**
+* TrainingModeSelectorOverlayHtml Component
+*
+* Html overlay for selecting training mode with Korean theming.
+* Compact horizontal grid layout optimized for desktop and mobile.
+*
+* Optimized with React.memo for 60fps performance:
+* - Prevents re-renders when currentMode hasn't changed
+* - Callback expected to be stable (parent should use useCallback)
+*
+* @example
+* ```tsx
+* <TrainingModeSelectorOverlayHtml
+*   currentMode="vital_point"
+*   onModeChange={(mode) => console.log(mode)}
+*   isMobile={false}
+* />
+* ```
+*
+* @korean 훈련모드선택오버레이컴포넌트
+*/
+var TrainingModeSelectorOverlayHtml = React.memo(({ currentMode, onModeChange, isMobile }) => {
+	const padding = getResponsiveSpacing("sm", isMobile);
+	const gap = getResponsiveSpacing("xs", isMobile);
+	const panelStyle = {
+		...getEnhancedKoreanOverlayStyles({
+			opacity: .9,
+			glowIntensity: "medium",
+			includeGradient: false,
+			includeBackdropBlur: true,
+			depthLayers: 3
+		}),
+		width: "100%",
+		padding: `${padding}px`,
+		boxSizing: "border-box"
+	};
+	const titleFontSize = isMobile ? 13 : 15;
+	const descFontSize = isMobile ? 9 : 10;
+	return /* @__PURE__ */ jsxs("div", {
+		style: panelStyle,
+		"data-testid": "training-mode-selector-html",
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				marginBottom: `${SPACING.SM}px`,
+				textAlign: "center"
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: `${titleFontSize}px`,
+					fontWeight: "bold",
+					color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN),
+					fontFamily: FONT_FAMILY.KOREAN,
+					textShadow: getNeonTextShadow(KOREAN_COLORS.PRIMARY_CYAN, "medium"),
+					transition: getSmoothTransition("all", "normal")
+				},
+				children: formatBilingualText("훈련 모드", "Training Mode", "pipe")
+			}), /* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: `${descFontSize}px`,
+					color: hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY),
+					fontStyle: "italic",
+					marginTop: "2px",
+					minHeight: "16px",
+					fontFamily: FONT_FAMILY.KOREAN,
+					transition: getSmoothTransition("all", "normal")
+				},
+				children: MODE_INFO[currentMode].description
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "grid",
+				gridTemplateColumns: "repeat(2, 1fr)",
+				gap: `${gap}px`
+			},
+			children: Object.keys(MODE_INFO).map((mode) => {
+				const isSelected = mode === currentMode;
+				const info = MODE_INFO[mode];
+				return /* @__PURE__ */ jsxs("button", {
+					onClick: () => onModeChange(mode),
+					className: `mode-button ${isSelected ? "selected" : ""}`,
+					style: {
+						padding: isMobile ? "6px 4px" : "8px 6px",
+						textAlign: "center",
+						fontSize: isMobile ? "10px" : "11px",
+						minHeight: isMobile ? "45px" : "50px",
+						display: "flex",
+						flexDirection: "column",
+						justifyContent: "center",
+						alignItems: "center",
+						fontFamily: FONT_FAMILY.KOREAN
+					},
+					"data-testid": `mode-${mode}`,
+					children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							fontWeight: "bold",
+							color: hexToRgbaString(isSelected ? KOREAN_COLORS.PRIMARY_CYAN : KOREAN_COLORS.TEXT_PRIMARY),
+							fontSize: isMobile ? "11px" : "12px",
+							marginBottom: "2px",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							width: "100%",
+							minWidth: 0
+						},
+						children: info.korean
+					}), /* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: isMobile ? "8px" : "9px",
+							color: hexToRgbaString(isSelected ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.TEXT_TERTIARY),
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							width: "100%",
+							minWidth: 0
+						},
+						children: info.english
+					})]
+				}, mode);
+			})
+		})]
+	});
+}, (prevProps, nextProps) => {
+	return prevProps.currentMode === nextProps.currentMode && prevProps.isMobile === nextProps.isMobile && prevProps.onModeChange === nextProps.onModeChange;
+});
+TrainingModeSelectorOverlayHtml.displayName = "TrainingModeSelectorOverlayHtml";
+//#endregion
+export { TrainingModeSelectorOverlayHtml as default };
+
+//# sourceMappingURL=TrainingModeSelectorOverlayHtml.js.map

package/lib/components/screens/training/components/TrainingModeSelectorOverlayHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrainingModeSelectorOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/training/components/TrainingModeSelectorOverlayHtml.tsx"],"sourcesContent":["/**\n * TrainingModeSelectorOverlayHtml - Html overlay for training mode selection\n *\n * Allows switching between different training modes with consistent Korean theming.\n * Uses KOREAN_COLORS constants and bilingual formatting.\n *\n * @module components/screens/training\n * @category Training UI\n * @korean 훈련모드선택오버레이\n */\n\nimport React from \"react\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { SPACING } from \"../../../../types/constants/ui\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport {\n  formatBilingualText,\n  getEnhancedKoreanOverlayStyles,\n  getResponsiveSpacing,\n} from \"../../../../utils/koreanThemeHelpers\";\nimport {\n  getNeonTextShadow,\n  getSmoothTransition,\n} from \"../../../../utils/visualEffects\";\nimport \"../training.css\";\n\n/**\n * Training mode types\n */\nexport type TrainingMode =\n  | \"basics\" // Basic Training - Simple striking practice\n  | \"advanced\" // Advanced Training - Vital point precision\n  | \"free\" // Free Practice - Open combat vs AI\n  | \"stance_training\" // Stance Training - Practice 8 trigrams\n  | \"vital_point\" // Vital Point Training - Precision targeting\n  | \"combo_practice\" // Combo Practice - Multi-hit techniques\n  | \"footwork\"; // Footwork Training - Movement drills (보법 훈련)\n\n/**\n * Props for TrainingModeSelectorOverlayHtml component\n */\nexport interface TrainingModeSelectorOverlayHtmlProps {\n  /** Currently selected training mode */\n  readonly currentMode: TrainingMode;\n  /** Callback when mode changes */\n  readonly onModeChange: (mode: TrainingMode) => void;\n  /** Whether on mobile device */\n  readonly isMobile: boolean;\n}\n\n/**\n * Mode information\n */\nconst MODE_INFO: Record<\n  TrainingMode,\n  { korean: string; english: string; description: string }\n> = {\n  basics: {\n    korean: \"기본 훈련\",\n    english: \"Basic Training\",\n    description: \"기초 타격 연습 | Basic striking practice\",\n  },\n  advanced: {\n    korean: \"고급 훈련\",\n    english: \"Advanced Training\",\n    description: \"급소 정밀 타격 | Vital point precision\",\n  },\n  free: {\n    korean: \"자유 훈련\",\n    english: \"Free Practice\",\n    description: \"AI 대련 | Combat vs AI opponent\",\n  },\n  stance_training: {\n    korean: \"팔괘 수련\",\n    english: \"Stance Training\",\n    description: \"팔괘 전환 연습 | Eight trigrams mastery\",\n  },\n  vital_point: {\n    korean: \"급소 훈련\",\n    english: \"Vital Point Training\",\n    description: \"정밀 타격 연습 | Precision targeting drill\",\n  },\n  combo_practice: {\n    korean: \"연속 기술\",\n    english: \"Combo Practice\",\n    description: \"연속 타격 훈련 | Multi-hit techniques\",\n  },\n  footwork: {\n    korean: \"보법 훈련\",\n    english: \"Footwork Training\",\n    description: \"보법 수련 | Movement drills\",\n  },\n};\n\n/**\n * TrainingModeSelectorOverlayHtml Component\n *\n * Html overlay for selecting training mode with Korean theming.\n * Compact horizontal grid layout optimized for desktop and mobile.\n *\n * Optimized with React.memo for 60fps performance:\n * - Prevents re-renders when currentMode hasn't changed\n * - Callback expected to be stable (parent should use useCallback)\n *\n * @example\n * ```tsx\n * <TrainingModeSelectorOverlayHtml\n *   currentMode=\"vital_point\"\n *   onModeChange={(mode) => console.log(mode)}\n *   isMobile={false}\n * />\n * ```\n *\n * @korean 훈련모드선택오버레이컴포넌트\n */\nexport const TrainingModeSelectorOverlayHtml =\n  React.memo<TrainingModeSelectorOverlayHtmlProps>(\n    ({ currentMode, onModeChange, isMobile }) => {\n      // Use 100% width to fill container instead of fixed width\n      const padding = getResponsiveSpacing(\"sm\", isMobile);\n      const gap = getResponsiveSpacing(\"xs\", isMobile);\n\n      // Enhanced panel styles with neon glow - now uses 100% width\n      const panelStyle: React.CSSProperties = {\n        ...getEnhancedKoreanOverlayStyles({\n          opacity: 0.9,\n          glowIntensity: \"medium\",\n          includeGradient: false,\n          includeBackdropBlur: true,\n          depthLayers: 3,\n        }),\n        width: \"100%\",\n        padding: `${padding}px`,\n        boxSizing: \"border-box\",\n      };\n\n      const titleFontSize = isMobile ? 13 : 15;\n      const descFontSize = isMobile ? 9 : 10;\n\n      return (\n        <div style={panelStyle} data-testid=\"training-mode-selector-html\">\n          {/* Header with bilingual title */}\n          <div style={{ marginBottom: `${SPACING.SM}px`, textAlign: \"center\" }}>\n            <div\n              style={{\n                fontSize: `${titleFontSize}px`,\n                fontWeight: \"bold\",\n                color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN),\n                fontFamily: FONT_FAMILY.KOREAN,\n                textShadow: getNeonTextShadow(\n                  KOREAN_COLORS.PRIMARY_CYAN,\n                  \"medium\",\n                ),\n                transition: getSmoothTransition(\"all\", \"normal\"),\n              }}\n            >\n              {formatBilingualText(\"훈련 모드\", \"Training Mode\", \"pipe\")}\n            </div>\n            <div\n              style={{\n                fontSize: `${descFontSize}px`,\n                color: hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY),\n                fontStyle: \"italic\",\n                marginTop: \"2px\",\n                minHeight: \"16px\",\n                fontFamily: FONT_FAMILY.KOREAN,\n                transition: getSmoothTransition(\"all\", \"normal\"),\n              }}\n            >\n              {MODE_INFO[currentMode].description}\n            </div>\n          </div>\n\n          {/* Mode Buttons - Grid layout (2 columns to fit narrow side HUD) */}\n          <div\n            style={{\n              display: \"grid\",\n              gridTemplateColumns: \"repeat(2, 1fr)\",\n              gap: `${gap}px`,\n            }}\n          >\n            {(Object.keys(MODE_INFO) as TrainingMode[]).map((mode) => {\n              const isSelected = mode === currentMode;\n              const info = MODE_INFO[mode];\n\n              return (\n                <button\n                  key={mode}\n                  onClick={() => onModeChange(mode)}\n                  className={`mode-button ${isSelected ? \"selected\" : \"\"}`}\n                  style={{\n                    padding: isMobile ? \"6px 4px\" : \"8px 6px\",\n                    textAlign: \"center\",\n                    fontSize: isMobile ? \"10px\" : \"11px\",\n                    minHeight: isMobile ? \"45px\" : \"50px\",\n                    display: \"flex\",\n                    flexDirection: \"column\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                    fontFamily: FONT_FAMILY.KOREAN,\n                  }}\n                  data-testid={`mode-${mode}`}\n                >\n                  <div\n                    style={{\n                      fontWeight: \"bold\",\n                      color: hexToRgbaString(\n                        isSelected\n                          ? KOREAN_COLORS.PRIMARY_CYAN\n                          : KOREAN_COLORS.TEXT_PRIMARY,\n                      ),\n                      fontSize: isMobile ? \"11px\" : \"12px\",\n                      marginBottom: \"2px\",\n                      overflow: \"hidden\",\n                      textOverflow: \"ellipsis\",\n                      width: \"100%\",\n                      minWidth: 0,\n                    }}\n                  >\n                    {info.korean}\n                  </div>\n                  <div\n                    style={{\n                      fontSize: isMobile ? \"8px\" : \"9px\",\n                      color: hexToRgbaString(\n                        isSelected\n                          ? KOREAN_COLORS.ACCENT_GOLD\n                          : KOREAN_COLORS.TEXT_TERTIARY,\n                      ),\n                      overflow: \"hidden\",\n                      textOverflow: \"ellipsis\",\n                      width: \"100%\",\n                      minWidth: 0,\n                    }}\n                  >\n                    {info.english}\n                  </div>\n                </button>\n              );\n            })}\n          </div>\n        </div>\n      );\n    },\n    (prevProps, nextProps) => {\n      // Only re-render if current mode, mobile state, or mode change callback changes.\n      // Including onModeChange here prevents stale callback closures when the parent\n      // provides a new function that captures updated state.\n      return (\n        prevProps.currentMode === nextProps.currentMode &&\n        prevProps.isMobile === nextProps.isMobile &&\n        prevProps.onModeChange === nextProps.onModeChange\n      );\n    },\n  );\n\nTrainingModeSelectorOverlayHtml.displayName = \"TrainingModeSelectorOverlayHtml\";\n\nexport default TrainingModeSelectorOverlayHtml;\n"],"mappings":"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"}

package/lib/components/screens/training/components/TrainingStatsOverlayHtml.d.ts

@@ -0,0 +1,63 @@
+/**
+ * TrainingStatsOverlayHtml - Html overlay for training statistics
+ *
+ * Displays score, combo, hits, misses, and accuracy with consistent Korean theming.
+ * Uses Korean cyberpunk color palette and bilingual text formatting.
+ *
+ * @module components/screens/training
+ * @category Training UI
+ * @korean 훈련통계오버레이
+ */
+import React from "react";
+/**
+ * Training statistics interface
+ */
+export interface TrainingStats {
+    readonly score: number;
+    readonly combo: number;
+    readonly hits: number;
+    readonly misses: number;
+    readonly accuracy: number;
+    readonly sessionDuration?: number;
+    readonly bestCombo?: number;
+    readonly perfectStrikes?: number;
+}
+/**
+ * Props for TrainingStatsOverlayHtml component
+ */
+export interface TrainingStatsOverlayHtmlProps {
+    /** Current training statistics */
+    readonly stats: TrainingStats;
+    /** Whether on mobile device */
+    readonly isMobile: boolean;
+    /** Viewport width for Super HD font scaling */
+    readonly width?: number;
+    /** Distance to training dummy in meters (for distance-based hit feedback) */
+    readonly distanceToDummy?: number;
+    /** Effective reach for current technique in meters */
+    readonly effectiveReach?: number;
+}
+/**
+ * TrainingStatsOverlayHtml Component
+ *
+ * Html overlay displaying training performance metrics with Korean theming.
+ * All colors use KOREAN_COLORS constants for consistency.
+ *
+ * Optimized with React.memo for 60fps performance:
+ * - Memoized with custom comparison function
+ * - Only re-renders when stats actually change
+ * - Reduces unnecessary DOM updates
+ *
+ * @example
+ * ```tsx
+ * <TrainingStatsOverlayHtml
+ *   stats={{ score: 1500, combo: 8, hits: 45, misses: 5, accuracy: 90 }}
+ *   isMobile={false}
+ * />
+ * ```
+ *
+ * @korean 훈련통계오버레이컴포넌트
+ */
+export declare const TrainingStatsOverlayHtml: React.NamedExoticComponent<TrainingStatsOverlayHtmlProps>;
+export default TrainingStatsOverlayHtml;
+//# sourceMappingURL=TrainingStatsOverlayHtml.d.ts.map

package/lib/components/screens/training/components/TrainingStatsOverlayHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrainingStatsOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/training/components/TrainingStatsOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAgBvC;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;CAClC;AAED;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC5C,kCAAkC;IAClC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC;IAC9B,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,+CAA+C;IAC/C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IAClC,sDAAsD;IACtD,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;CAClC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,wBAAwB,2DAiQlC,CAAC;AAmFJ,eAAe,wBAAwB,CAAC"}

package/lib/components/screens/training/components/TrainingStatsOverlayHtml.js

@@ -0,0 +1,253 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import { SPACING } from "../../../../types/constants/ui.js";
+import "../../../../types/constants/index.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { getNeonTextShadow, getSmoothTransition } from "../../../../utils/visualEffects.js";
+import { formatBilingualText, getEnhancedKoreanOverlayStyles, getResponsiveSpacing } from "../../../../utils/koreanThemeHelpers.js";
+import { getMobileKoreanFontSize } from "../../../../utils/mobileUIUtils.js";
+import { getSafeAreaPadding } from "../../../../utils/safeAreaUtils.js";
+import React, { useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/training/components/TrainingStatsOverlayHtml.tsx
+/**
+* TrainingStatsOverlayHtml - Html overlay for training statistics
+*
+* Displays score, combo, hits, misses, and accuracy with consistent Korean theming.
+* Uses Korean cyberpunk color palette and bilingual text formatting.
+*
+* @module components/screens/training
+* @category Training UI
+* @korean 훈련통계오버레이
+*/
+/**
+* TrainingStatsOverlayHtml Component
+*
+* Html overlay displaying training performance metrics with Korean theming.
+* All colors use KOREAN_COLORS constants for consistency.
+*
+* Optimized with React.memo for 60fps performance:
+* - Memoized with custom comparison function
+* - Only re-renders when stats actually change
+* - Reduces unnecessary DOM updates
+*
+* @example
+* ```tsx
+* <TrainingStatsOverlayHtml
+*   stats={{ score: 1500, combo: 8, hits: 45, misses: 5, accuracy: 90 }}
+*   isMobile={false}
+* />
+* ```
+*
+* @korean 훈련통계오버레이컴포넌트
+*/
+var TrainingStatsOverlayHtml = React.memo(({ stats, isMobile, width = 375, distanceToDummy, effectiveReach = .7 }) => {
+	const panelWidth = width > 10 ? width : isMobile ? 180 : 200;
+	const padding = getResponsiveSpacing("sm", isMobile);
+	const gap = getResponsiveSpacing("xs", isMobile);
+	const safeAreaStyles = useMemo(() => isMobile ? getSafeAreaPadding(["top"], padding) : {}, [isMobile, padding]);
+	const formattedAccuracy = useMemo(() => stats.accuracy.toFixed(1), [stats.accuracy]);
+	const formattedDuration = useMemo(() => {
+		if (!stats.sessionDuration) return "00:00";
+		const minutes = Math.floor(stats.sessionDuration / 60);
+		const seconds = stats.sessionDuration % 60;
+		return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+	}, [stats.sessionDuration]);
+	const distanceInfo = useMemo(() => {
+		if (distanceToDummy === void 0) return null;
+		const isInRange = distanceToDummy <= effectiveReach;
+		return {
+			formatted: distanceToDummy.toFixed(2),
+			isInRange,
+			rangeStatus: isInRange ? "사정거리 내 | In Range" : "사정거리 밖 | Out of Range"
+		};
+	}, [distanceToDummy, effectiveReach]);
+	const perfectRate = useMemo(() => {
+		const totalAttempts = stats.hits + stats.misses;
+		if (totalAttempts === 0 || !stats.perfectStrikes) return "0";
+		return (stats.perfectStrikes / totalAttempts * 100).toFixed(1);
+	}, [
+		stats.hits,
+		stats.misses,
+		stats.perfectStrikes
+	]);
+	const panelStyle = {
+		...getEnhancedKoreanOverlayStyles({
+			opacity: .92,
+			glowIntensity: "medium",
+			includeGradient: false,
+			includeBackdropBlur: true,
+			depthLayers: 3
+		}),
+		...safeAreaStyles,
+		width: `${panelWidth}px`,
+		padding: `${padding}px`
+	};
+	const titleFontSize = isMobile ? getMobileKoreanFontSize("SMALL", width ?? 375) : 18;
+	return /* @__PURE__ */ jsxs("div", {
+		style: panelStyle,
+		"data-testid": "training-stats-html",
+		children: [/* @__PURE__ */ jsx("div", {
+			style: { marginBottom: `${padding}px` },
+			children: /* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: `${titleFontSize}px`,
+					fontWeight: "bold",
+					color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD),
+					fontFamily: FONT_FAMILY.KOREAN,
+					textShadow: getNeonTextShadow(KOREAN_COLORS.ACCENT_GOLD, "medium"),
+					transition: getSmoothTransition("all", "normal")
+				},
+				children: formatBilingualText("훈련 통계", "Training Statistics", "pipe")
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: `${gap}px`
+			},
+			children: [
+				/* @__PURE__ */ jsx(StatRow, {
+					korean: "점수",
+					english: "Score",
+					value: stats.score.toLocaleString(),
+					color: KOREAN_COLORS.ACCENT_GOLD,
+					isMobile,
+					width
+				}),
+				/* @__PURE__ */ jsx(StatRow, {
+					korean: "콤보",
+					english: "Combo",
+					value: `${stats.combo}x`,
+					color: stats.combo > 5 ? KOREAN_COLORS.ACCENT_RED : KOREAN_COLORS.PRIMARY_CYAN,
+					isMobile,
+					width
+				}),
+				/* @__PURE__ */ jsx(StatRow, {
+					korean: "성공",
+					english: "Hits",
+					value: stats.hits.toString(),
+					color: KOREAN_COLORS.ACCENT_GREEN,
+					isMobile,
+					width
+				}),
+				/* @__PURE__ */ jsx(StatRow, {
+					korean: "실패",
+					english: "Misses",
+					value: stats.misses.toString(),
+					color: KOREAN_COLORS.TEXT_TERTIARY,
+					isMobile,
+					width
+				}),
+				/* @__PURE__ */ jsx(StatRow, {
+					korean: "정확도",
+					english: "Accuracy",
+					value: `${formattedAccuracy}%`,
+					color: stats.accuracy >= 80 ? KOREAN_COLORS.ACCENT_GREEN : stats.accuracy >= 50 ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.ACCENT_RED,
+					isMobile,
+					width
+				}),
+				stats.sessionDuration !== void 0 && /* @__PURE__ */ jsx(StatRow, {
+					korean: "시간",
+					english: "Duration",
+					value: formattedDuration,
+					color: KOREAN_COLORS.PRIMARY_CYAN,
+					isMobile,
+					width
+				}),
+				stats.bestCombo !== void 0 && stats.bestCombo > 0 && /* @__PURE__ */ jsx(StatRow, {
+					korean: "최고 콤보",
+					english: "Best Combo",
+					value: `${stats.bestCombo}x`,
+					color: KOREAN_COLORS.ACCENT_GOLD,
+					isMobile,
+					width
+				}),
+				stats.hits + stats.misses > 0 && /* @__PURE__ */ jsx(StatRow, {
+					korean: "완벽률",
+					english: "Perfect Rate",
+					value: `${perfectRate}%`,
+					color: parseFloat(perfectRate) >= 30 ? KOREAN_COLORS.ACCENT_GOLD : parseFloat(perfectRate) >= 10 ? KOREAN_COLORS.PRIMARY_CYAN : KOREAN_COLORS.TEXT_TERTIARY,
+					isMobile,
+					width
+				}),
+				distanceInfo && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StatRow, {
+					korean: "거리",
+					english: "Distance",
+					value: `${distanceInfo.formatted}m`,
+					color: distanceInfo.isInRange ? KOREAN_COLORS.ACCENT_GREEN : KOREAN_COLORS.ACCENT_RED,
+					isMobile,
+					width
+				}), /* @__PURE__ */ jsx(StatRow, {
+					korean: "상태",
+					english: "Status",
+					value: distanceInfo.rangeStatus.split(" | ")[isMobile ? 0 : 1],
+					color: distanceInfo.isInRange ? KOREAN_COLORS.ACCENT_GREEN : KOREAN_COLORS.ACCENT_RED,
+					isMobile,
+					width
+				})] })
+			]
+		})]
+	});
+}, (prevProps, nextProps) => {
+	return prevProps.stats.score === nextProps.stats.score && prevProps.stats.combo === nextProps.stats.combo && prevProps.stats.hits === nextProps.stats.hits && prevProps.stats.misses === nextProps.stats.misses && prevProps.stats.accuracy === nextProps.stats.accuracy && prevProps.stats.sessionDuration === nextProps.stats.sessionDuration && prevProps.stats.bestCombo === nextProps.stats.bestCombo && prevProps.stats.perfectStrikes === nextProps.stats.perfectStrikes && prevProps.isMobile === nextProps.isMobile && prevProps.width === nextProps.width && prevProps.distanceToDummy === nextProps.distanceToDummy && prevProps.effectiveReach === nextProps.effectiveReach;
+});
+TrainingStatsOverlayHtml.displayName = "TrainingStatsOverlayHtml";
+/**
+* Single stat row component with Korean theming
+*
+* Uses KOREAN_COLORS constants for all text colors
+* Enhanced with smooth transitions and neon glow on value
+*
+* Optimized with React.memo for performance
+*
+* @korean 통계행컴포넌트
+*/
+var StatRow = React.memo(({ korean, english, value, color, isMobile, width }) => {
+	const labelFontSize = isMobile ? getMobileKoreanFontSize("SMALL", width) : 14;
+	const sublabelFontSize = isMobile ? 12 : 11;
+	const valueFontSize = isMobile ? getMobileKoreanFontSize("MEDIUM", width) : 20;
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			justifyContent: "space-between",
+			alignItems: "center",
+			paddingBottom: `${SPACING.SM}px`,
+			borderBottom: `1px solid ${hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY, .1)}`,
+			transition: getSmoothTransition("all", "normal")
+		},
+		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				fontSize: `${labelFontSize}px`,
+				color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN),
+				fontWeight: "bold",
+				fontFamily: FONT_FAMILY.KOREAN,
+				textShadow: getNeonTextShadow(KOREAN_COLORS.PRIMARY_CYAN, "subtle")
+			},
+			children: korean
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				fontSize: `${sublabelFontSize}px`,
+				color: hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY),
+				fontFamily: FONT_FAMILY.KOREAN
+			},
+			children: english
+		})] }), /* @__PURE__ */ jsx("div", {
+			style: {
+				fontSize: `${valueFontSize}px`,
+				fontWeight: "bold",
+				color: hexToRgbaString(color),
+				fontFamily: FONT_FAMILY.KOREAN,
+				textShadow: getNeonTextShadow(color, "medium"),
+				transition: getSmoothTransition("transform, color", "normal"),
+				transform: "scale(1)"
+			},
+			children: value
+		})]
+	});
+});
+StatRow.displayName = "StatRow";
+//#endregion
+export { TrainingStatsOverlayHtml as default };
+
+//# sourceMappingURL=TrainingStatsOverlayHtml.js.map

package/lib/components/screens/training/components/TrainingStatsOverlayHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrainingStatsOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/training/components/TrainingStatsOverlayHtml.tsx"],"sourcesContent":["/**\n * TrainingStatsOverlayHtml - Html overlay for training statistics\n *\n * Displays score, combo, hits, misses, and accuracy with consistent Korean theming.\n * Uses Korean cyberpunk color palette and bilingual text formatting.\n *\n * @module components/screens/training\n * @category Training UI\n * @korean 훈련통계오버레이\n */\n\nimport React, { useMemo } from \"react\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { SPACING } from \"../../../../types/constants/ui\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport {\n  formatBilingualText,\n  getEnhancedKoreanOverlayStyles,\n  getResponsiveSpacing,\n} from \"../../../../utils/koreanThemeHelpers\";\nimport { getMobileKoreanFontSize } from \"../../../../utils/mobileUIUtils\";\nimport { getSafeAreaPadding } from \"../../../../utils/safeAreaUtils\";\nimport {\n  getNeonTextShadow,\n  getSmoothTransition,\n} from \"../../../../utils/visualEffects\";\n\n/**\n * Training statistics interface\n */\nexport interface TrainingStats {\n  readonly score: number;\n  readonly combo: number;\n  readonly hits: number;\n  readonly misses: number;\n  readonly accuracy: number;\n  readonly sessionDuration?: number;\n  readonly bestCombo?: number;\n  readonly perfectStrikes?: number;\n}\n\n/**\n * Props for TrainingStatsOverlayHtml component\n */\nexport interface TrainingStatsOverlayHtmlProps {\n  /** Current training statistics */\n  readonly stats: TrainingStats;\n  /** Whether on mobile device */\n  readonly isMobile: boolean;\n  /** Viewport width for Super HD font scaling */\n  readonly width?: number;\n  /** Distance to training dummy in meters (for distance-based hit feedback) */\n  readonly distanceToDummy?: number;\n  /** Effective reach for current technique in meters */\n  readonly effectiveReach?: number;\n}\n\n/**\n * TrainingStatsOverlayHtml Component\n *\n * Html overlay displaying training performance metrics with Korean theming.\n * All colors use KOREAN_COLORS constants for consistency.\n *\n * Optimized with React.memo for 60fps performance:\n * - Memoized with custom comparison function\n * - Only re-renders when stats actually change\n * - Reduces unnecessary DOM updates\n *\n * @example\n * ```tsx\n * <TrainingStatsOverlayHtml\n *   stats={{ score: 1500, combo: 8, hits: 45, misses: 5, accuracy: 90 }}\n *   isMobile={false}\n * />\n * ```\n *\n * @korean 훈련통계오버레이컴포넌트\n */\nexport const TrainingStatsOverlayHtml =\n  React.memo<TrainingStatsOverlayHtmlProps>(\n    ({\n      stats,\n      isMobile,\n      width = 375,\n      distanceToDummy,\n      effectiveReach = 0.7, // Default punch reach\n    }) => {\n      // Use full width of container (passed from parent HUD)\n      const panelWidth = width > 10 ? width : isMobile ? 180 : 200;\n      const padding = getResponsiveSpacing(\"sm\", isMobile);\n      const gap = getResponsiveSpacing(\"xs\", isMobile);\n\n      // Safe area support for notched devices\n      const safeAreaStyles = useMemo(\n        () => (isMobile ? getSafeAreaPadding([\"top\"], padding) : {}),\n        [isMobile, padding],\n      );\n\n      // Format accuracy with memoization\n      const formattedAccuracy = useMemo(\n        () => stats.accuracy.toFixed(1),\n        [stats.accuracy],\n      );\n\n      // Format session duration\n      const formattedDuration = useMemo(() => {\n        if (!stats.sessionDuration) return \"00:00\";\n        const minutes = Math.floor(stats.sessionDuration / 60);\n        const seconds = stats.sessionDuration % 60;\n        return `${minutes.toString().padStart(2, \"0\")}:${seconds.toString().padStart(2, \"0\")}`;\n      }, [stats.sessionDuration]);\n\n      // Format distance to dummy and check if in range\n      const distanceInfo = useMemo(() => {\n        if (distanceToDummy === undefined) return null;\n        const isInRange = distanceToDummy <= effectiveReach;\n        return {\n          formatted: distanceToDummy.toFixed(2),\n          isInRange,\n          rangeStatus: isInRange\n            ? \"사정거리 내 | In Range\"\n            : \"사정거리 밖 | Out of Range\",\n        };\n      }, [distanceToDummy, effectiveReach]);\n\n      // Calculate perfect strike rate\n      const perfectRate = useMemo(() => {\n        const totalAttempts = stats.hits + stats.misses;\n        if (totalAttempts === 0 || !stats.perfectStrikes) return \"0\";\n        return ((stats.perfectStrikes / totalAttempts) * 100).toFixed(1);\n      }, [stats.hits, stats.misses, stats.perfectStrikes]);\n\n      // Enhanced panel styles with neon glow and safe area support\n      const panelStyle: React.CSSProperties = {\n        ...getEnhancedKoreanOverlayStyles({\n          opacity: 0.92,\n          glowIntensity: \"medium\",\n          includeGradient: false,\n          includeBackdropBlur: true,\n          depthLayers: 3,\n        }),\n        ...safeAreaStyles,\n        width: `${panelWidth}px`,\n        padding: `${padding}px`,\n      };\n\n      // Header title styles with improved mobile font size (16px+ for Korean)\n      const titleFontSize = isMobile\n        ? getMobileKoreanFontSize(\"SMALL\", width ?? 375) // 16px minimum\n        : 18;\n\n      return (\n        <div style={panelStyle} data-testid=\"training-stats-html\">\n          {/* Header with bilingual title */}\n          <div style={{ marginBottom: `${padding}px` }}>\n            <div\n              style={{\n                fontSize: `${titleFontSize}px`,\n                fontWeight: \"bold\",\n                color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD),\n                fontFamily: FONT_FAMILY.KOREAN,\n                textShadow: getNeonTextShadow(\n                  KOREAN_COLORS.ACCENT_GOLD,\n                  \"medium\",\n                ),\n                transition: getSmoothTransition(\"all\", \"normal\"),\n              }}\n            >\n              {formatBilingualText(\"훈련 통계\", \"Training Statistics\", \"pipe\")}\n            </div>\n          </div>\n\n          {/* Stats Grid with consistent Korean theming */}\n          <div\n            style={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              gap: `${gap}px`,\n            }}\n          >\n            {/* Score - 점수 */}\n            <StatRow\n              korean=\"점수\"\n              english=\"Score\"\n              value={stats.score.toLocaleString()}\n              color={KOREAN_COLORS.ACCENT_GOLD}\n              isMobile={isMobile}\n              width={width}\n            />\n\n            {/* Combo - 콤보 */}\n            <StatRow\n              korean=\"콤보\"\n              english=\"Combo\"\n              value={`${stats.combo}x`}\n              color={\n                stats.combo > 5\n                  ? KOREAN_COLORS.ACCENT_RED\n                  : KOREAN_COLORS.PRIMARY_CYAN\n              }\n              isMobile={isMobile}\n              width={width}\n            />\n\n            {/* Hits - 성공 */}\n            <StatRow\n              korean=\"성공\"\n              english=\"Hits\"\n              value={stats.hits.toString()}\n              color={KOREAN_COLORS.ACCENT_GREEN}\n              isMobile={isMobile}\n              width={width}\n            />\n\n            {/* Misses - 실패 */}\n            <StatRow\n              korean=\"실패\"\n              english=\"Misses\"\n              value={stats.misses.toString()}\n              color={KOREAN_COLORS.TEXT_TERTIARY}\n              isMobile={isMobile}\n              width={width}\n            />\n\n            {/* Accuracy - 정확도 */}\n            <StatRow\n              korean=\"정확도\"\n              english=\"Accuracy\"\n              value={`${formattedAccuracy}%`}\n              color={\n                stats.accuracy >= 80\n                  ? KOREAN_COLORS.ACCENT_GREEN\n                  : stats.accuracy >= 50\n                    ? KOREAN_COLORS.ACCENT_GOLD\n                    : KOREAN_COLORS.ACCENT_RED\n              }\n              isMobile={isMobile}\n              width={width}\n            />\n\n            {/* Session Duration - 시간 */}\n            {stats.sessionDuration !== undefined && (\n              <StatRow\n                korean=\"시간\"\n                english=\"Duration\"\n                value={formattedDuration}\n                color={KOREAN_COLORS.PRIMARY_CYAN}\n                isMobile={isMobile}\n                width={width}\n              />\n            )}\n\n            {/* Best Combo - 최고 콤보 */}\n            {stats.bestCombo !== undefined && stats.bestCombo > 0 && (\n              <StatRow\n                korean=\"최고 콤보\"\n                english=\"Best Combo\"\n                value={`${stats.bestCombo}x`}\n                color={KOREAN_COLORS.ACCENT_GOLD}\n                isMobile={isMobile}\n                width={width}\n              />\n            )}\n\n            {/* Perfect Rate - 완벽률 */}\n            {stats.hits + stats.misses > 0 && (\n              <StatRow\n                korean=\"완벽률\"\n                english=\"Perfect Rate\"\n                value={`${perfectRate}%`}\n                color={\n                  parseFloat(perfectRate) >= 30\n                    ? KOREAN_COLORS.ACCENT_GOLD\n                    : parseFloat(perfectRate) >= 10\n                      ? KOREAN_COLORS.PRIMARY_CYAN\n                      : KOREAN_COLORS.TEXT_TERTIARY\n                }\n                isMobile={isMobile}\n                width={width}\n              />\n            )}\n\n            {/* Distance to Dummy - 거리 */}\n            {distanceInfo && (\n              <>\n                <StatRow\n                  korean=\"거리\"\n                  english=\"Distance\"\n                  value={`${distanceInfo.formatted}m`}\n                  color={\n                    distanceInfo.isInRange\n                      ? KOREAN_COLORS.ACCENT_GREEN\n                      : KOREAN_COLORS.ACCENT_RED\n                  }\n                  isMobile={isMobile}\n                  width={width}\n                />\n                <StatRow\n                  korean=\"상태\"\n                  english=\"Status\"\n                  value={\n                    distanceInfo.rangeStatus.split(\" | \")[isMobile ? 0 : 1]\n                  }\n                  color={\n                    distanceInfo.isInRange\n                      ? KOREAN_COLORS.ACCENT_GREEN\n                      : KOREAN_COLORS.ACCENT_RED\n                  }\n                  isMobile={isMobile}\n                  width={width}\n                />\n              </>\n            )}\n          </div>\n        </div>\n      );\n    },\n    (prevProps, nextProps) => {\n      // Custom comparison for optimal re-render prevention\n      // Only re-render if stats values actually changed\n      return (\n        prevProps.stats.score === nextProps.stats.score &&\n        prevProps.stats.combo === nextProps.stats.combo &&\n        prevProps.stats.hits === nextProps.stats.hits &&\n        prevProps.stats.misses === nextProps.stats.misses &&\n        prevProps.stats.accuracy === nextProps.stats.accuracy &&\n        prevProps.stats.sessionDuration === nextProps.stats.sessionDuration &&\n        prevProps.stats.bestCombo === nextProps.stats.bestCombo &&\n        prevProps.stats.perfectStrikes === nextProps.stats.perfectStrikes &&\n        prevProps.isMobile === nextProps.isMobile &&\n        prevProps.width === nextProps.width &&\n        prevProps.distanceToDummy === nextProps.distanceToDummy &&\n        prevProps.effectiveReach === nextProps.effectiveReach\n      );\n    },\n  );\n\nTrainingStatsOverlayHtml.displayName = \"TrainingStatsOverlayHtml\";\n\n/**\n * Single stat row component with Korean theming\n *\n * Uses KOREAN_COLORS constants for all text colors\n * Enhanced with smooth transitions and neon glow on value\n *\n * Optimized with React.memo for performance\n *\n * @korean 통계행컴포넌트\n */\nconst StatRow = React.memo<{\n  korean: string;\n  english: string;\n  value: string;\n  color: number; // Numeric hex color from KOREAN_COLORS (e.g., 0x00ffff)\n  isMobile: boolean;\n  width: number; // Width for Super HD font scaling\n}>(({ korean, english, value, color, isMobile, width }) => {\n  // Improved font sizes for mobile readability (min 16px for Korean body text)\n  const labelFontSize = isMobile\n    ? getMobileKoreanFontSize(\"SMALL\", width) // 16px minimum\n    : 14;\n  const sublabelFontSize = isMobile ? 12 : 11; // Increased from 8-9px\n  const valueFontSize = isMobile\n    ? getMobileKoreanFontSize(\"MEDIUM\", width) // 18px minimum\n    : 20;\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"space-between\",\n        alignItems: \"center\",\n        paddingBottom: `${SPACING.SM}px`,\n        borderBottom: `1px solid ${hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY, 0.1)}`,\n        transition: getSmoothTransition(\"all\", \"normal\"),\n      }}\n    >\n      <div>\n        <div\n          style={{\n            fontSize: `${labelFontSize}px`,\n            color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN),\n            fontWeight: \"bold\",\n            fontFamily: FONT_FAMILY.KOREAN,\n            textShadow: getNeonTextShadow(KOREAN_COLORS.PRIMARY_CYAN, \"subtle\"),\n          }}\n        >\n          {korean}\n        </div>\n        <div\n          style={{\n            fontSize: `${sublabelFontSize}px`,\n            color: hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY),\n            fontFamily: FONT_FAMILY.KOREAN,\n          }}\n        >\n          {english}\n        </div>\n      </div>\n      <div\n        style={{\n          fontSize: `${valueFontSize}px`,\n          fontWeight: \"bold\",\n          color: hexToRgbaString(color),\n          fontFamily: FONT_FAMILY.KOREAN,\n          textShadow: getNeonTextShadow(color, \"medium\"),\n          transition: getSmoothTransition(\"transform, color\", \"normal\"),\n          transform: \"scale(1)\",\n        }}\n      >\n        {value}\n      </div>\n    </div>\n  );\n});\n\nStatRow.displayName = \"StatRow\";\n\nexport default TrainingStatsOverlayHtml;\n"],"mappings":"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"}

package/lib/components/screens/training/components/VitalPointMarker3D.d.ts

@@ -0,0 +1,37 @@
+/**
+ * VitalPointMarker3D - Individual vital point marker with hover labels
+ *
+ * Provides interactive 3D markers for vital points with Korean-English bilingual labels
+ */
+import React from "react";
+import { VitalPoint } from "../../../../systems/vitalpoint/types";
+/**
+ * Props for VitalPointMarker3D component
+ */
+export interface VitalPointMarker3DProps {
+    /** The vital point data to visualize */
+    readonly vitalPoint: VitalPoint;
+    /** Whether this vital point is currently selected */
+    readonly isSelected: boolean;
+    /** Whether training mode is active */
+    readonly isTraining: boolean;
+    /** Whether on mobile device (larger hit targets) */
+    readonly isMobile?: boolean;
+    /** Callback when vital point is clicked/hit */
+    readonly onHit?: (vitalPointId: string) => void;
+    /** Base size multiplier (for difficulty modes) */
+    readonly sizeMultiplier?: number;
+    /** Pulse frequency in Hz (default: 6Hz for selected, 4Hz for training mode) */
+    readonly pulseFrequency?: number;
+    /** Pulse amplitude (default: 0.25 for selected, 0.15 for training mode) */
+    readonly pulseAmplitude?: number;
+    /** Maximum emissive intensity for selected/hovered state (default: 3.5) */
+    readonly maxEmissiveIntensity?: number;
+}
+/**
+ * VitalPointMarker3D Component
+ * Individual 3D marker with hover tooltip
+ */
+export declare const VitalPointMarker3D: React.FC<VitalPointMarker3DProps>;
+export default VitalPointMarker3D;
+//# sourceMappingURL=VitalPointMarker3D.d.ts.map

package/lib/components/screens/training/components/VitalPointMarker3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VitalPointMarker3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/training/components/VitalPointMarker3D.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAMN,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAYlE;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,QAAQ,CAAC,UAAU,EAAE,UAAU,CAAC;IAChC,qDAAqD;IACrD,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,sCAAsC;IACtC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,oDAAoD;IACpD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,+CAA+C;IAC/C,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,kDAAkD;IAClD,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IACjC,+EAA+E;IAC/E,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IACjC,2EAA2E;IAC3E,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IACjC,2EAA2E;IAC3E,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACxC;AA8BD;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAoOhE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}