blacktrigram 0.7.2

package/lib/components/shared/ui/VitalPointOverlayControlsPure.js

@@ -0,0 +1,550 @@
+import { VitalPointSeverity } from "../../../types/common.js";
+import { KOREAN_COLORS } from "../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../types/constants/typography.js";
+import "../../../types/constants/index.js";
+import { Z_INDEX } from "../../../types/LayoutTypes.js";
+import KOREAN_VITAL_POINTS, { getVitalPointsStats } from "../../../systems/vitalpoint/KoreanVitalPoints.js";
+import { useCallback, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/shared/ui/VitalPointOverlayControlsPure.tsx
+/**
+* VitalPointOverlayControlsPure - Pure DOM controls for vital point visualization
+*
+* Pure DOM version (no Three.js Html wrapper) for use in HUD overlays.
+* Identical functionality to VitalPointOverlayControlsHtml but renders as pure React DOM.
+*
+* Provides comprehensive controls for the 70-point vital point overlay system:
+* - Toggle overlay visibility
+* - Filter by severity level
+* - Filter by body region
+* - Search vital points
+* - Adjust marker scale
+* - Toggle labels
+* - Toggle animations
+*
+* @module components/shared/ui/VitalPointOverlayControlsPure
+*/
+/**
+* Convert numeric color to CSS hex string
+*/
+var colorToHex = (color) => {
+	return `#${color.toString(16).padStart(6, "0")}`;
+};
+/**
+* Get color for severity level
+*/
+var getSeverityColor = (severity) => {
+	switch (severity) {
+		case VitalPointSeverity.LETHAL: return "#ff0000";
+		case VitalPointSeverity.CRITICAL: return "#ff6600";
+		case VitalPointSeverity.MAJOR: return "#ffaa00";
+		case VitalPointSeverity.MODERATE: return "#ffd700";
+		case VitalPointSeverity.MINOR: return "#00ff88";
+		default: return "#00ffff";
+	}
+};
+/**
+* VitalPointOverlayControlsPure Component
+* Pure DOM version - renders directly without Three.js Html wrapper
+*/
+var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters, onSeverityFiltersChange, regionFilter, onRegionFilterChange, searchQuery: externalSearchQuery, onSearchQueryChange, showLabels, onShowLabelsChange, animated, onAnimatedChange, scale, onScaleChange, isMobile = false, screenPosition }) => {
+	const [expanded, setExpanded] = useState(false);
+	const [internalSearchQuery, setInternalSearchQuery] = useState("");
+	const searchQuery = externalSearchQuery ?? internalSearchQuery;
+	const setSearchQuery = onSearchQueryChange ?? setInternalSearchQuery;
+	const stats = useMemo(() => getVitalPointsStats(), []);
+	const defaultPosition = useMemo(() => ({
+		top: isMobile ? "180px" : "220px",
+		left: isMobile ? "10px" : "20px"
+	}), [isMobile]);
+	const finalPosition = screenPosition ?? defaultPosition;
+	const filteredCount = useMemo(() => {
+		let points = [...KOREAN_VITAL_POINTS];
+		if (severityFilters.length > 0) points = points.filter((vp) => severityFilters.includes(vp.severity));
+		if (regionFilter !== "all") if (regionFilter === "arms") points = points.filter((vp) => vp.id.startsWith("arm_left_") || vp.id.startsWith("arm_right_"));
+		else if (regionFilter === "legs") points = points.filter((vp) => vp.id.startsWith("leg_left_") || vp.id.startsWith("leg_right_"));
+		else {
+			const prefix = `${regionFilter}_`;
+			points = points.filter((vp) => vp.id.startsWith(prefix));
+		}
+		if (searchQuery) {
+			const query = searchQuery.toLowerCase();
+			points = points.filter((vp) => vp.names.korean.toLowerCase().includes(query) || vp.names.english.toLowerCase().includes(query) || vp.names.romanized.toLowerCase().includes(query) || vp.id.toLowerCase().includes(query));
+		}
+		return points.length;
+	}, [
+		severityFilters,
+		regionFilter,
+		searchQuery
+	]);
+	const toggleSeverityFilter = useCallback((severity) => {
+		onSeverityFiltersChange(severityFilters.includes(severity) ? severityFilters.filter((s) => s !== severity) : [...severityFilters, severity]);
+	}, [severityFilters, onSeverityFiltersChange]);
+	const severityOptions = [
+		VitalPointSeverity.LETHAL,
+		VitalPointSeverity.CRITICAL,
+		VitalPointSeverity.MAJOR,
+		VitalPointSeverity.MODERATE,
+		VitalPointSeverity.MINOR
+	];
+	const regionOptions = [
+		{
+			value: "all",
+			label: "All Regions",
+			korean: "전체"
+		},
+		{
+			value: "head",
+			label: "Head",
+			korean: "머리"
+		},
+		{
+			value: "torso",
+			label: "Torso",
+			korean: "몸통"
+		},
+		{
+			value: "arms",
+			label: "Arms",
+			korean: "팔"
+		},
+		{
+			value: "legs",
+			label: "Legs",
+			korean: "다리"
+		}
+	];
+	const panelWidth = isMobile ? 280 : 350;
+	const buttonHeight = isMobile ? 32 : 36;
+	const fontSize = isMobile ? 11 : 13;
+	const smallFontSize = isMobile ? 9 : 10;
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			position: "absolute",
+			top: finalPosition.top,
+			left: finalPosition.left,
+			right: finalPosition.right,
+			bottom: finalPosition.bottom,
+			width: panelWidth,
+			background: `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)}f0`,
+			border: `2px solid ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}`,
+			borderRadius: "12px",
+			padding: isMobile ? "12px" : "16px",
+			fontFamily: FONT_FAMILY.KOREAN,
+			color: "#ffffff",
+			boxShadow: `0 0 30px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}40, inset 0 0 20px ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)}80`,
+			transition: "all 0.3s ease",
+			pointerEvents: "all",
+			zIndex: Z_INDEX.MODAL
+		},
+		"data-testid": "vital-point-overlay-controls",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					justifyContent: "space-between",
+					alignItems: "center",
+					marginBottom: "12px",
+					paddingBottom: "12px",
+					borderBottom: `1px solid ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}40`,
+					background: `linear-gradient(90deg, ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)}00 0%, ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}10 50%, ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)}00 100%)`
+				},
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: isMobile ? 14 : 16,
+						fontWeight: "bold"
+					},
+					children: "급소 오버레이 | Vital Points"
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						fontSize: smallFontSize,
+						color: colorToHex(KOREAN_COLORS.TEXT_SECONDARY),
+						marginTop: "2px"
+					},
+					children: [
+						filteredCount,
+						" / ",
+						stats.total,
+						" 표시 | Showing"
+					]
+				})] }), /* @__PURE__ */ jsx("button", {
+					onClick: () => setExpanded(!expanded),
+					style: {
+						background: `linear-gradient(135deg, ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)} 0%, ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)} 100%)`,
+						border: `2px solid ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}`,
+						borderRadius: "6px",
+						padding: "8px 14px",
+						color: "#ffffff",
+						fontSize,
+						cursor: "pointer",
+						transition: "all 0.2s ease",
+						boxShadow: `0 2px 8px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}30`
+					},
+					onMouseEnter: (e) => {
+						e.currentTarget.style.transform = "scale(1.05)";
+						e.currentTarget.style.boxShadow = `0 4px 12px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}50`;
+					},
+					onMouseLeave: (e) => {
+						e.currentTarget.style.transform = "scale(1)";
+						e.currentTarget.style.boxShadow = `0 2px 8px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}30`;
+					},
+					"data-testid": "toggle-expand-button",
+					children: expanded ? "▼" : "▶"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: { marginBottom: "14px" },
+				children: /* @__PURE__ */ jsx("button", {
+					onClick: () => onVisibleChange(!visible),
+					style: {
+						width: "100%",
+						height: buttonHeight,
+						background: visible ? `linear-gradient(135deg, ${colorToHex(KOREAN_COLORS.ACCENT_GOLD)} 0%, ${colorToHex(KOREAN_COLORS.SECONDARY_YELLOW)} 100%)` : `linear-gradient(135deg, ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)} 0%, ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)} 100%)`,
+						border: `2px solid ${visible ? colorToHex(KOREAN_COLORS.ACCENT_GOLD) : colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}`,
+						borderRadius: "8px",
+						color: visible ? "#1a1a1a" : "#ffffff",
+						fontSize: isMobile ? 13 : 15,
+						fontWeight: "bold",
+						cursor: "pointer",
+						transition: "all 0.3s ease",
+						boxShadow: visible ? `0 4px 16px ${colorToHex(KOREAN_COLORS.ACCENT_GOLD)}60, inset 0 2px 4px rgba(255,255,255,0.2)` : `0 2px 8px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}30`,
+						textTransform: "uppercase",
+						letterSpacing: "0.5px"
+					},
+					onMouseEnter: (e) => {
+						e.currentTarget.style.transform = "translateY(-2px)";
+						e.currentTarget.style.boxShadow = visible ? `0 6px 20px ${colorToHex(KOREAN_COLORS.ACCENT_GOLD)}80` : `0 4px 12px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}50`;
+					},
+					onMouseLeave: (e) => {
+						e.currentTarget.style.transform = "translateY(0)";
+						e.currentTarget.style.boxShadow = visible ? `0 4px 16px ${colorToHex(KOREAN_COLORS.ACCENT_GOLD)}60` : `0 2px 8px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}30`;
+					},
+					"data-testid": "toggle-visibility-button",
+					children: visible ? "✓ 활성화 | Enabled" : "비활성화 | Disabled"
+				})
+			}),
+			expanded && visible && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: { marginBottom: "14px" },
+					children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize,
+							marginBottom: "8px",
+							color: colorToHex(KOREAN_COLORS.ACCENT_CYAN),
+							fontWeight: "600",
+							textTransform: "uppercase",
+							letterSpacing: "1px"
+						},
+						children: "심각도 필터 | Severity Filter"
+					}), /* @__PURE__ */ jsx("div", {
+						style: {
+							display: "flex",
+							flexWrap: "wrap",
+							gap: "8px"
+						},
+						children: severityOptions.map((severity) => {
+							const isActive = severityFilters.includes(severity);
+							const severityColor = getSeverityColor(severity);
+							return /* @__PURE__ */ jsx("button", {
+								onClick: () => toggleSeverityFilter(severity),
+								style: {
+									background: isActive ? `linear-gradient(135deg, ${severityColor} 0%, ${severityColor}cc 100%)` : `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`,
+									border: `2px solid ${severityColor}`,
+									borderRadius: "6px",
+									padding: "6px 12px",
+									color: "#ffffff",
+									fontSize: smallFontSize,
+									cursor: "pointer",
+									opacity: isActive ? 1 : .6,
+									transition: "all 0.2s ease",
+									fontWeight: isActive ? "bold" : "normal",
+									boxShadow: isActive ? `0 2px 8px ${severityColor}50` : "none"
+								},
+								onMouseEnter: (e) => {
+									e.currentTarget.style.opacity = "1";
+									e.currentTarget.style.transform = "scale(1.05)";
+								},
+								onMouseLeave: (e) => {
+									e.currentTarget.style.opacity = isActive ? "1" : "0.6";
+									e.currentTarget.style.transform = "scale(1)";
+								},
+								"data-testid": `severity-filter-${severity}`,
+								children: severity
+							}, severity);
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: { marginBottom: "14px" },
+					children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize,
+							marginBottom: "8px",
+							color: colorToHex(KOREAN_COLORS.ACCENT_CYAN),
+							fontWeight: "600",
+							textTransform: "uppercase",
+							letterSpacing: "1px"
+						},
+						children: "부위 필터 | Region Filter"
+					}), /* @__PURE__ */ jsx("div", {
+						style: {
+							display: "flex",
+							flexWrap: "wrap",
+							gap: "8px"
+						},
+						children: regionOptions.map((option) => {
+							const isActive = regionFilter === option.value;
+							return /* @__PURE__ */ jsxs("button", {
+								onClick: () => onRegionFilterChange(option.value),
+								style: {
+									background: isActive ? `linear-gradient(135deg, ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)} 0%, ${colorToHex(KOREAN_COLORS.ACCENT_BLUE)} 100%)` : `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`,
+									border: `2px solid ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}`,
+									borderRadius: "6px",
+									padding: "6px 12px",
+									color: "#ffffff",
+									fontSize: smallFontSize,
+									cursor: "pointer",
+									opacity: isActive ? 1 : .6,
+									transition: "all 0.2s ease",
+									fontWeight: isActive ? "bold" : "normal",
+									boxShadow: isActive ? `0 2px 8px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}50` : "none"
+								},
+								onMouseEnter: (e) => {
+									e.currentTarget.style.opacity = "1";
+									e.currentTarget.style.transform = "scale(1.05)";
+								},
+								onMouseLeave: (e) => {
+									e.currentTarget.style.opacity = isActive ? "1" : "0.6";
+									e.currentTarget.style.transform = "scale(1)";
+								},
+								"data-testid": `region-filter-${option.value}`,
+								children: [
+									option.korean,
+									" | ",
+									option.label
+								]
+							}, option.value);
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: { marginBottom: "14px" },
+					children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize,
+							marginBottom: "8px",
+							color: colorToHex(KOREAN_COLORS.ACCENT_CYAN),
+							fontWeight: "600",
+							textTransform: "uppercase",
+							letterSpacing: "1px"
+						},
+						children: "검색 | Search"
+					}), /* @__PURE__ */ jsxs("div", {
+						style: { position: "relative" },
+						children: [/* @__PURE__ */ jsx("input", {
+							type: "text",
+							value: searchQuery,
+							onChange: (e) => setSearchQuery(e.target.value),
+							placeholder: "급소 이름... | Point name...",
+							style: {
+								width: "100%",
+								height: buttonHeight,
+								background: `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`,
+								border: `2px solid ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}40`,
+								borderRadius: "8px",
+								padding: "0 40px 0 14px",
+								color: "#ffffff",
+								fontSize,
+								fontFamily: FONT_FAMILY.KOREAN,
+								transition: "all 0.2s ease",
+								outline: "none"
+							},
+							onFocus: (e) => {
+								e.currentTarget.style.borderColor = colorToHex(KOREAN_COLORS.PRIMARY_CYAN);
+								e.currentTarget.style.boxShadow = `0 0 12px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}40`;
+							},
+							onBlur: (e) => {
+								e.currentTarget.style.borderColor = `${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}40`;
+								e.currentTarget.style.boxShadow = "none";
+							},
+							"data-testid": "search-input"
+						}), searchQuery && /* @__PURE__ */ jsx("button", {
+							onClick: () => setSearchQuery(""),
+							style: {
+								position: "absolute",
+								right: "8px",
+								top: "50%",
+								transform: "translateY(-50%)",
+								background: "transparent",
+								border: "none",
+								color: colorToHex(KOREAN_COLORS.TEXT_SECONDARY),
+								cursor: "pointer",
+								fontSize: "16px",
+								padding: "4px",
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
+								borderRadius: "4px",
+								transition: "all 0.2s ease"
+							},
+							onMouseEnter: (e) => {
+								e.currentTarget.style.color = colorToHex(KOREAN_COLORS.ACCENT_RED);
+								e.currentTarget.style.background = `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`;
+							},
+							onMouseLeave: (e) => {
+								e.currentTarget.style.color = colorToHex(KOREAN_COLORS.TEXT_SECONDARY);
+								e.currentTarget.style.background = "transparent";
+							},
+							"data-testid": "search-clear-button",
+							title: "Clear search",
+							children: "✕"
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: { marginBottom: "14px" },
+					children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize,
+							marginBottom: "8px",
+							color: colorToHex(KOREAN_COLORS.ACCENT_CYAN),
+							fontWeight: "600",
+							textTransform: "uppercase",
+							letterSpacing: "1px"
+						},
+						children: "표시 옵션 | Display Options"
+					}), /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							flexDirection: "column",
+							gap: "8px"
+						},
+						children: [/* @__PURE__ */ jsxs("label", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "8px",
+								cursor: "pointer"
+							},
+							children: [/* @__PURE__ */ jsx("input", {
+								type: "checkbox",
+								checked: showLabels,
+								onChange: (e) => onShowLabelsChange(e.target.checked),
+								style: {
+									width: "16px",
+									height: "16px",
+									accentColor: colorToHex(KOREAN_COLORS.PRIMARY_CYAN)
+								},
+								"data-testid": "show-labels-checkbox"
+							}), /* @__PURE__ */ jsx("span", {
+								style: { fontSize },
+								children: "라벨 표시 | Show Labels"
+							})]
+						}), /* @__PURE__ */ jsxs("label", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "8px",
+								cursor: "pointer"
+							},
+							children: [/* @__PURE__ */ jsx("input", {
+								type: "checkbox",
+								checked: animated,
+								onChange: (e) => onAnimatedChange(e.target.checked),
+								style: {
+									width: "16px",
+									height: "16px",
+									accentColor: colorToHex(KOREAN_COLORS.PRIMARY_CYAN)
+								},
+								"data-testid": "animated-checkbox"
+							}), /* @__PURE__ */ jsx("span", {
+								style: { fontSize },
+								children: "애니메이션 | Animations"
+							})]
+						})]
+					})]
+				}),
+				(severityFilters.length > 0 || regionFilter !== "all" || searchQuery !== "") && /* @__PURE__ */ jsx("div", {
+					style: { marginBottom: "14px" },
+					children: /* @__PURE__ */ jsx("button", {
+						onClick: () => {
+							onSeverityFiltersChange([]);
+							onRegionFilterChange("all");
+							setSearchQuery("");
+						},
+						style: {
+							width: "100%",
+							height: buttonHeight - 4,
+							background: `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`,
+							border: `2px solid ${colorToHex(KOREAN_COLORS.ACCENT_ORANGE)}`,
+							borderRadius: "6px",
+							color: colorToHex(KOREAN_COLORS.ACCENT_ORANGE),
+							fontSize: smallFontSize,
+							cursor: "pointer",
+							transition: "all 0.2s ease",
+							fontWeight: "bold"
+						},
+						onMouseEnter: (e) => {
+							e.currentTarget.style.background = `${colorToHex(KOREAN_COLORS.ACCENT_ORANGE)}20`;
+							e.currentTarget.style.transform = "translateY(-1px)";
+						},
+						onMouseLeave: (e) => {
+							e.currentTarget.style.background = `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`;
+							e.currentTarget.style.transform = "translateY(0)";
+						},
+						"data-testid": "reset-filters-button",
+						children: "🔄 필터 초기화 | Reset Filters"
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						fontSize,
+						marginBottom: "6px",
+						color: colorToHex(KOREAN_COLORS.ACCENT_CYAN)
+					},
+					children: [
+						"크기 | Scale: ",
+						scale.toFixed(1),
+						"x"
+					]
+				}), /* @__PURE__ */ jsx("input", {
+					type: "range",
+					min: "0.5",
+					max: "2.0",
+					step: "0.1",
+					value: scale,
+					onChange: (e) => onScaleChange(parseFloat(e.target.value)),
+					style: {
+						width: "100%",
+						accentColor: colorToHex(KOREAN_COLORS.PRIMARY_CYAN)
+					},
+					"data-testid": "scale-slider"
+				})] }),
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						marginTop: "12px",
+						paddingTop: "12px",
+						borderTop: `1px solid ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}40`,
+						fontSize: smallFontSize,
+						color: colorToHex(KOREAN_COLORS.TEXT_SECONDARY)
+					},
+					children: [/* @__PURE__ */ jsxs("div", { children: [
+						"머리: ",
+						stats.byRegion.head,
+						" | 몸통: ",
+						stats.byRegion.torso
+					] }), /* @__PURE__ */ jsxs("div", { children: [
+						"팔: ",
+						stats.byRegion.arms,
+						" | 다리: ",
+						stats.byRegion.legs
+					] })]
+				})
+			] })
+		]
+	});
+};
+//#endregion
+export { VitalPointOverlayControlsPure as default };
+
+//# sourceMappingURL=VitalPointOverlayControlsPure.js.map

package/lib/components/shared/ui/VitalPointOverlayControlsPure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VitalPointOverlayControlsPure.js","names":[],"sources":["../../../../src/components/shared/ui/VitalPointOverlayControlsPure.tsx"],"sourcesContent":["/**\n * VitalPointOverlayControlsPure - Pure DOM controls for vital point visualization\n *\n * Pure DOM version (no Three.js Html wrapper) for use in HUD overlays.\n * Identical functionality to VitalPointOverlayControlsHtml but renders as pure React DOM.\n *\n * Provides comprehensive controls for the 70-point vital point overlay system:\n * - Toggle overlay visibility\n * - Filter by severity level\n * - Filter by body region\n * - Search vital points\n * - Adjust marker scale\n * - Toggle labels\n * - Toggle animations\n *\n * @module components/shared/ui/VitalPointOverlayControlsPure\n */\n\nimport React, { useCallback, useMemo, useState } from \"react\";\nimport {\n  KOREAN_VITAL_POINTS,\n  getVitalPointsStats,\n} from \"../../../systems/vitalpoint/KoreanVitalPoints\";\nimport { VitalPointSeverity } from \"../../../types/common\";\nimport { Z_INDEX } from \"../../../types/LayoutTypes\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"@/types/constants\";\nimport type { BodyRegionFilter } from \"../three/effects/VitalPointMarkers3D\";\n\nexport type { BodyRegionFilter } from \"../three/effects/VitalPointMarkers3D\";\n\n/**\n * Props for VitalPointOverlayControlsPure component\n */\nexport interface VitalPointOverlayControlsPureProps {\n  /** Whether overlay is currently visible */\n  readonly visible: boolean;\n  /** Callback when visibility changes */\n  readonly onVisibleChange: (visible: boolean) => void;\n  /** Current severity filters */\n  readonly severityFilters: VitalPointSeverity[];\n  /** Callback when severity filters change */\n  readonly onSeverityFiltersChange: (filters: VitalPointSeverity[]) => void;\n  /** Current region filter */\n  readonly regionFilter: BodyRegionFilter;\n  /** Callback when region filter changes */\n  readonly onRegionFilterChange: (filter: BodyRegionFilter) => void;\n  /** Current search query */\n  readonly searchQuery?: string;\n  /** Callback when search query changes */\n  readonly onSearchQueryChange?: (query: string) => void;\n  /** Whether labels are shown */\n  readonly showLabels: boolean;\n  /** Callback when label visibility changes */\n  readonly onShowLabelsChange: (show: boolean) => void;\n  /** Whether animations are enabled */\n  readonly animated: boolean;\n  /** Callback when animation state changes */\n  readonly onAnimatedChange: (animated: boolean) => void;\n  /** Marker scale multiplier */\n  readonly scale: number;\n  /** Callback when scale changes */\n  readonly onScaleChange: (scale: number) => void;\n  /** Whether on mobile device */\n  readonly isMobile?: boolean;\n  /**\n   * Screen position for the control panel.\n   *\n   * All values must be valid CSS position values, such as `\"20px\"`, `\"10%\"`, `\"1rem\"`, or `\"auto\"`.\n   * These are applied directly to the `style` of the container.\n   */\n  readonly screenPosition?: {\n    /** CSS `top` position (e.g., \"20px\", \"10%\", \"1rem\", \"auto\") */\n    top?: string;\n    /** CSS `left` position (e.g., \"20px\", \"10%\", \"1rem\", \"auto\") */\n    left?: string;\n    /** CSS `right` position (e.g., \"20px\", \"10%\", \"1rem\", \"auto\") */\n    right?: string;\n    /** CSS `bottom` position (e.g., \"20px\", \"10%\", \"1rem\", \"auto\") */\n    bottom?: string;\n  };\n}\n\n/**\n * Convert numeric color to CSS hex string\n */\nconst colorToHex = (color: number): string => {\n  return `#${color.toString(16).padStart(6, \"0\")}`;\n};\n\n/**\n * Get color for severity level\n */\nconst getSeverityColor = (severity: VitalPointSeverity): string => {\n  switch (severity) {\n    case VitalPointSeverity.LETHAL:\n      return \"#ff0000\"; // Red\n    case VitalPointSeverity.CRITICAL:\n      return \"#ff6600\"; // Orange\n    case VitalPointSeverity.MAJOR:\n      return \"#ffaa00\"; // Gold\n    case VitalPointSeverity.MODERATE:\n      return \"#ffd700\"; // Yellow\n    case VitalPointSeverity.MINOR:\n      return \"#00ff88\"; // Green\n    default:\n      return \"#00ffff\"; // Cyan\n  }\n};\n\n/**\n * VitalPointOverlayControlsPure Component\n * Pure DOM version - renders directly without Three.js Html wrapper\n */\nexport const VitalPointOverlayControlsPure: React.FC<\n  VitalPointOverlayControlsPureProps\n> = ({\n  visible,\n  onVisibleChange,\n  severityFilters,\n  onSeverityFiltersChange,\n  regionFilter,\n  onRegionFilterChange,\n  searchQuery: externalSearchQuery,\n  onSearchQueryChange,\n  showLabels,\n  onShowLabelsChange,\n  animated,\n  onAnimatedChange,\n  scale,\n  onScaleChange,\n  isMobile = false,\n  screenPosition,\n}) => {\n  const [expanded, setExpanded] = useState(false);\n\n  // Use internal state if no external control provided\n  const [internalSearchQuery, setInternalSearchQuery] = useState(\"\");\n  const searchQuery = externalSearchQuery ?? internalSearchQuery;\n  const setSearchQuery = onSearchQueryChange ?? setInternalSearchQuery;\n\n  // Get system statistics\n  const stats = useMemo(() => getVitalPointsStats(), []);\n\n  // Default screen position - left side, below player 1 status (accounting for stance indicator)\n  const defaultPosition: {\n    top?: string;\n    left?: string;\n    right?: string;\n    bottom?: string;\n  } = useMemo(\n    () => ({\n      top: isMobile ? \"180px\" : \"220px\",\n      left: isMobile ? \"10px\" : \"20px\",\n    }),\n    [isMobile],\n  );\n\n  const finalPosition = screenPosition ?? defaultPosition;\n\n  // Get filtered count\n  const filteredCount = useMemo(() => {\n    let points = [...KOREAN_VITAL_POINTS];\n\n    // Filter by severity\n    if (severityFilters.length > 0) {\n      points = points.filter((vp) => severityFilters.includes(vp.severity));\n    }\n\n    // Filter by region\n    if (regionFilter !== \"all\") {\n      if (regionFilter === \"arms\") {\n        // Match both left and right arm vital points\n        points = points.filter(\n          (vp) =>\n            vp.id.startsWith(\"arm_left_\") || vp.id.startsWith(\"arm_right_\"),\n        );\n      } else if (regionFilter === \"legs\") {\n        // Match both left and right leg vital points\n        points = points.filter(\n          (vp) =>\n            vp.id.startsWith(\"leg_left_\") || vp.id.startsWith(\"leg_right_\"),\n        );\n      } else {\n        // Simple prefix match for head_ or torso_\n        const prefix = `${regionFilter}_`;\n        points = points.filter((vp) => vp.id.startsWith(prefix));\n      }\n    }\n\n    // Filter by search query\n    if (searchQuery) {\n      const query = searchQuery.toLowerCase();\n      points = points.filter(\n        (vp) =>\n          vp.names.korean.toLowerCase().includes(query) ||\n          vp.names.english.toLowerCase().includes(query) ||\n          vp.names.romanized.toLowerCase().includes(query) ||\n          vp.id.toLowerCase().includes(query),\n      );\n    }\n\n    return points.length;\n  }, [severityFilters, regionFilter, searchQuery]);\n\n  // Toggle severity filter\n  const toggleSeverityFilter = useCallback(\n    (severity: VitalPointSeverity) => {\n      const newFilters = severityFilters.includes(severity)\n        ? severityFilters.filter((s) => s !== severity)\n        : [...severityFilters, severity];\n      onSeverityFiltersChange(newFilters);\n    },\n    [severityFilters, onSeverityFiltersChange],\n  );\n\n  // Severity options\n  const severityOptions: VitalPointSeverity[] = [\n    VitalPointSeverity.LETHAL,\n    VitalPointSeverity.CRITICAL,\n    VitalPointSeverity.MAJOR,\n    VitalPointSeverity.MODERATE,\n    VitalPointSeverity.MINOR,\n  ];\n\n  // Region options\n  const regionOptions: {\n    value: BodyRegionFilter;\n    label: string;\n    korean: string;\n  }[] = [\n    { value: \"all\", label: \"All Regions\", korean: \"전체\" },\n    { value: \"head\", label: \"Head\", korean: \"머리\" },\n    { value: \"torso\", label: \"Torso\", korean: \"몸통\" },\n    { value: \"arms\", label: \"Arms\", korean: \"팔\" },\n    { value: \"legs\", label: \"Legs\", korean: \"다리\" },\n  ];\n\n  // Panel styles\n  const panelWidth = isMobile ? 280 : 350;\n  const buttonHeight = isMobile ? 32 : 36;\n  const fontSize = isMobile ? 11 : 13;\n  const smallFontSize = isMobile ? 9 : 10;\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        top: finalPosition.top,\n        left: finalPosition.left,\n        right: finalPosition.right,\n        bottom: finalPosition.bottom,\n        width: panelWidth,\n        background: `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)}f0`,\n        border: `2px solid ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}`,\n        borderRadius: \"12px\",\n        padding: isMobile ? \"12px\" : \"16px\",\n        fontFamily: FONT_FAMILY.KOREAN,\n        color: \"#ffffff\",\n        boxShadow: `0 0 30px ${colorToHex(\n          KOREAN_COLORS.PRIMARY_CYAN,\n        )}40, inset 0 0 20px ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)}80`,\n        transition: \"all 0.3s ease\",\n        pointerEvents: \"all\",\n        zIndex: Z_INDEX.MODAL,\n      }}\n      data-testid=\"vital-point-overlay-controls\"\n    >\n      {/* Header with toggle */}\n      <div\n        style={{\n          display: \"flex\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n          marginBottom: \"12px\",\n          paddingBottom: \"12px\",\n          borderBottom: `1px solid ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}40`,\n          background: `linear-gradient(90deg, ${colorToHex(\n            KOREAN_COLORS.UI_BACKGROUND_DARK,\n          )}00 0%, ${colorToHex(\n            KOREAN_COLORS.PRIMARY_CYAN,\n          )}10 50%, ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)}00 100%)`,\n        }}\n      >\n        <div>\n          <div style={{ fontSize: isMobile ? 14 : 16, fontWeight: \"bold\" }}>\n            급소 오버레이 | Vital Points\n          </div>\n          <div\n            style={{\n              fontSize: smallFontSize,\n              color: colorToHex(KOREAN_COLORS.TEXT_SECONDARY),\n              marginTop: \"2px\",\n            }}\n          >\n            {filteredCount} / {stats.total} 표시 | Showing\n          </div>\n        </div>\n        <button\n          onClick={() => setExpanded(!expanded)}\n          style={{\n            background: `linear-gradient(135deg, ${colorToHex(\n              KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n            )} 0%, ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)} 100%)`,\n            border: `2px solid ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}`,\n            borderRadius: \"6px\",\n            padding: \"8px 14px\",\n            color: \"#ffffff\",\n            fontSize,\n            cursor: \"pointer\",\n            transition: \"all 0.2s ease\",\n            boxShadow: `0 2px 8px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}30`,\n          }}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.transform = \"scale(1.05)\";\n            e.currentTarget.style.boxShadow = `0 4px 12px ${colorToHex(\n              KOREAN_COLORS.PRIMARY_CYAN,\n            )}50`;\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.transform = \"scale(1)\";\n            e.currentTarget.style.boxShadow = `0 2px 8px ${colorToHex(\n              KOREAN_COLORS.PRIMARY_CYAN,\n            )}30`;\n          }}\n          data-testid=\"toggle-expand-button\"\n        >\n          {expanded ? \"▼\" : \"▶\"}\n        </button>\n      </div>\n\n      {/* Main toggle */}\n      <div style={{ marginBottom: \"14px\" }}>\n        <button\n          onClick={() => onVisibleChange(!visible)}\n          style={{\n            width: \"100%\",\n            height: buttonHeight,\n            background: visible\n              ? `linear-gradient(135deg, ${colorToHex(\n                  KOREAN_COLORS.ACCENT_GOLD,\n                )} 0%, ${colorToHex(KOREAN_COLORS.SECONDARY_YELLOW)} 100%)`\n              : `linear-gradient(135deg, ${colorToHex(\n                  KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n                )} 0%, ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)} 100%)`,\n            border: `2px solid ${\n              visible\n                ? colorToHex(KOREAN_COLORS.ACCENT_GOLD)\n                : colorToHex(KOREAN_COLORS.PRIMARY_CYAN)\n            }`,\n            borderRadius: \"8px\",\n            color: visible ? \"#1a1a1a\" : \"#ffffff\",\n            fontSize: isMobile ? 13 : 15,\n            fontWeight: \"bold\",\n            cursor: \"pointer\",\n            transition: \"all 0.3s ease\",\n            boxShadow: visible\n              ? `0 4px 16px ${colorToHex(\n                  KOREAN_COLORS.ACCENT_GOLD,\n                )}60, inset 0 2px 4px rgba(255,255,255,0.2)`\n              : `0 2px 8px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}30`,\n            textTransform: \"uppercase\",\n            letterSpacing: \"0.5px\",\n          }}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.transform = \"translateY(-2px)\";\n            e.currentTarget.style.boxShadow = visible\n              ? `0 6px 20px ${colorToHex(KOREAN_COLORS.ACCENT_GOLD)}80`\n              : `0 4px 12px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}50`;\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.transform = \"translateY(0)\";\n            e.currentTarget.style.boxShadow = visible\n              ? `0 4px 16px ${colorToHex(KOREAN_COLORS.ACCENT_GOLD)}60`\n              : `0 2px 8px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}30`;\n          }}\n          data-testid=\"toggle-visibility-button\"\n        >\n          {visible ? \"✓ 활성화 | Enabled\" : \"비활성화 | Disabled\"}\n        </button>\n      </div>\n\n      {/* Expanded controls */}\n      {expanded && visible && (\n        <>\n          {/* Severity filters */}\n          <div style={{ marginBottom: \"14px\" }}>\n            <div\n              style={{\n                fontSize,\n                marginBottom: \"8px\",\n                color: colorToHex(KOREAN_COLORS.ACCENT_CYAN),\n                fontWeight: \"600\",\n                textTransform: \"uppercase\",\n                letterSpacing: \"1px\",\n              }}\n            >\n              심각도 필터 | Severity Filter\n            </div>\n            <div\n              style={{\n                display: \"flex\",\n                flexWrap: \"wrap\",\n                gap: \"8px\",\n              }}\n            >\n              {severityOptions.map((severity) => {\n                const isActive = severityFilters.includes(severity);\n                const severityColor = getSeverityColor(severity);\n                return (\n                  <button\n                    key={severity}\n                    onClick={() => toggleSeverityFilter(severity)}\n                    style={{\n                      background: isActive\n                        ? `linear-gradient(135deg, ${severityColor} 0%, ${severityColor}cc 100%)`\n                        : `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`,\n                      border: `2px solid ${severityColor}`,\n                      borderRadius: \"6px\",\n                      padding: \"6px 12px\",\n                      color: \"#ffffff\",\n                      fontSize: smallFontSize,\n                      cursor: \"pointer\",\n                      opacity: isActive ? 1 : 0.6,\n                      transition: \"all 0.2s ease\",\n                      fontWeight: isActive ? \"bold\" : \"normal\",\n                      boxShadow: isActive\n                        ? `0 2px 8px ${severityColor}50`\n                        : \"none\",\n                    }}\n                    onMouseEnter={(e) => {\n                      e.currentTarget.style.opacity = \"1\";\n                      e.currentTarget.style.transform = \"scale(1.05)\";\n                    }}\n                    onMouseLeave={(e) => {\n                      e.currentTarget.style.opacity = isActive ? \"1\" : \"0.6\";\n                      e.currentTarget.style.transform = \"scale(1)\";\n                    }}\n                    data-testid={`severity-filter-${severity}`}\n                  >\n                    {severity}\n                  </button>\n                );\n              })}\n            </div>\n          </div>\n\n          {/* Region filter */}\n          <div style={{ marginBottom: \"14px\" }}>\n            <div\n              style={{\n                fontSize,\n                marginBottom: \"8px\",\n                color: colorToHex(KOREAN_COLORS.ACCENT_CYAN),\n                fontWeight: \"600\",\n                textTransform: \"uppercase\",\n                letterSpacing: \"1px\",\n              }}\n            >\n              부위 필터 | Region Filter\n            </div>\n            <div\n              style={{\n                display: \"flex\",\n                flexWrap: \"wrap\",\n                gap: \"8px\",\n              }}\n            >\n              {regionOptions.map((option) => {\n                const isActive = regionFilter === option.value;\n                return (\n                  <button\n                    key={option.value}\n                    onClick={() => onRegionFilterChange(option.value)}\n                    style={{\n                      background: isActive\n                        ? `linear-gradient(135deg, ${colorToHex(\n                            KOREAN_COLORS.PRIMARY_CYAN,\n                          )} 0%, ${colorToHex(KOREAN_COLORS.ACCENT_BLUE)} 100%)`\n                        : `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`,\n                      border: `2px solid ${colorToHex(\n                        KOREAN_COLORS.PRIMARY_CYAN,\n                      )}`,\n                      borderRadius: \"6px\",\n                      padding: \"6px 12px\",\n                      color: \"#ffffff\",\n                      fontSize: smallFontSize,\n                      cursor: \"pointer\",\n                      opacity: isActive ? 1 : 0.6,\n                      transition: \"all 0.2s ease\",\n                      fontWeight: isActive ? \"bold\" : \"normal\",\n                      boxShadow: isActive\n                        ? `0 2px 8px ${colorToHex(\n                            KOREAN_COLORS.PRIMARY_CYAN,\n                          )}50`\n                        : \"none\",\n                    }}\n                    onMouseEnter={(e) => {\n                      e.currentTarget.style.opacity = \"1\";\n                      e.currentTarget.style.transform = \"scale(1.05)\";\n                    }}\n                    onMouseLeave={(e) => {\n                      e.currentTarget.style.opacity = isActive ? \"1\" : \"0.6\";\n                      e.currentTarget.style.transform = \"scale(1)\";\n                    }}\n                    data-testid={`region-filter-${option.value}`}\n                  >\n                    {option.korean} | {option.label}\n                  </button>\n                );\n              })}\n            </div>\n          </div>\n\n          {/* Search box with clear button */}\n          <div style={{ marginBottom: \"14px\" }}>\n            <div\n              style={{\n                fontSize,\n                marginBottom: \"8px\",\n                color: colorToHex(KOREAN_COLORS.ACCENT_CYAN),\n                fontWeight: \"600\",\n                textTransform: \"uppercase\",\n                letterSpacing: \"1px\",\n              }}\n            >\n              검색 | Search\n            </div>\n            <div style={{ position: \"relative\" }}>\n              <input\n                type=\"text\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                placeholder=\"급소 이름... | Point name...\"\n                style={{\n                  width: \"100%\",\n                  height: buttonHeight,\n                  background: `${colorToHex(\n                    KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n                  )}`,\n                  border: `2px solid ${colorToHex(\n                    KOREAN_COLORS.PRIMARY_CYAN,\n                  )}40`,\n                  borderRadius: \"8px\",\n                  padding: \"0 40px 0 14px\", // Add right padding for clear button\n                  color: \"#ffffff\",\n                  fontSize,\n                  fontFamily: FONT_FAMILY.KOREAN,\n                  transition: \"all 0.2s ease\",\n                  outline: \"none\",\n                }}\n                onFocus={(e) => {\n                  e.currentTarget.style.borderColor = colorToHex(\n                    KOREAN_COLORS.PRIMARY_CYAN,\n                  );\n                  e.currentTarget.style.boxShadow = `0 0 12px ${colorToHex(\n                    KOREAN_COLORS.PRIMARY_CYAN,\n                  )}40`;\n                }}\n                onBlur={(e) => {\n                  e.currentTarget.style.borderColor = `${colorToHex(\n                    KOREAN_COLORS.PRIMARY_CYAN,\n                  )}40`;\n                  e.currentTarget.style.boxShadow = \"none\";\n                }}\n                data-testid=\"search-input\"\n              />\n              {/* Clear button */}\n              {searchQuery && (\n                <button\n                  onClick={() => setSearchQuery(\"\")}\n                  style={{\n                    position: \"absolute\",\n                    right: \"8px\",\n                    top: \"50%\",\n                    transform: \"translateY(-50%)\",\n                    background: \"transparent\",\n                    border: \"none\",\n                    color: colorToHex(KOREAN_COLORS.TEXT_SECONDARY),\n                    cursor: \"pointer\",\n                    fontSize: \"16px\",\n                    padding: \"4px\",\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    borderRadius: \"4px\",\n                    transition: \"all 0.2s ease\",\n                  }}\n                  onMouseEnter={(e) => {\n                    e.currentTarget.style.color = colorToHex(\n                      KOREAN_COLORS.ACCENT_RED,\n                    );\n                    e.currentTarget.style.background = `${colorToHex(\n                      KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n                    )}`;\n                  }}\n                  onMouseLeave={(e) => {\n                    e.currentTarget.style.color = colorToHex(\n                      KOREAN_COLORS.TEXT_SECONDARY,\n                    );\n                    e.currentTarget.style.background = \"transparent\";\n                  }}\n                  data-testid=\"search-clear-button\"\n                  title=\"Clear search\"\n                >\n                  ✕\n                </button>\n              )}\n            </div>\n          </div>\n\n          {/* Display options */}\n          <div style={{ marginBottom: \"14px\" }}>\n            <div\n              style={{\n                fontSize,\n                marginBottom: \"8px\",\n                color: colorToHex(KOREAN_COLORS.ACCENT_CYAN),\n                fontWeight: \"600\",\n                textTransform: \"uppercase\",\n                letterSpacing: \"1px\",\n              }}\n            >\n              표시 옵션 | Display Options\n            </div>\n            <div\n              style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}\n            >\n              <label\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  gap: \"8px\",\n                  cursor: \"pointer\",\n                }}\n              >\n                <input\n                  type=\"checkbox\"\n                  checked={showLabels}\n                  onChange={(e) => onShowLabelsChange(e.target.checked)}\n                  style={{\n                    width: \"16px\",\n                    height: \"16px\",\n                    accentColor: colorToHex(KOREAN_COLORS.PRIMARY_CYAN),\n                  }}\n                  data-testid=\"show-labels-checkbox\"\n                />\n                <span style={{ fontSize }}>라벨 표시 | Show Labels</span>\n              </label>\n              <label\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  gap: \"8px\",\n                  cursor: \"pointer\",\n                }}\n              >\n                <input\n                  type=\"checkbox\"\n                  checked={animated}\n                  onChange={(e) => onAnimatedChange(e.target.checked)}\n                  style={{\n                    width: \"16px\",\n                    height: \"16px\",\n                    accentColor: colorToHex(KOREAN_COLORS.PRIMARY_CYAN),\n                  }}\n                  data-testid=\"animated-checkbox\"\n                />\n                <span style={{ fontSize }}>애니메이션 | Animations</span>\n              </label>\n            </div>\n          </div>\n\n          {/* Reset filters button */}\n          {(severityFilters.length > 0 ||\n            regionFilter !== \"all\" ||\n            searchQuery !== \"\") && (\n            <div style={{ marginBottom: \"14px\" }}>\n              <button\n                onClick={() => {\n                  onSeverityFiltersChange([]);\n                  onRegionFilterChange(\"all\");\n                  setSearchQuery(\"\");\n                }}\n                style={{\n                  width: \"100%\",\n                  height: buttonHeight - 4,\n                  background: `${colorToHex(\n                    KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n                  )}`,\n                  border: `2px solid ${colorToHex(\n                    KOREAN_COLORS.ACCENT_ORANGE,\n                  )}`,\n                  borderRadius: \"6px\",\n                  color: colorToHex(KOREAN_COLORS.ACCENT_ORANGE),\n                  fontSize: smallFontSize,\n                  cursor: \"pointer\",\n                  transition: \"all 0.2s ease\",\n                  fontWeight: \"bold\",\n                }}\n                onMouseEnter={(e) => {\n                  e.currentTarget.style.background = `${colorToHex(\n                    KOREAN_COLORS.ACCENT_ORANGE,\n                  )}20`;\n                  e.currentTarget.style.transform = \"translateY(-1px)\";\n                }}\n                onMouseLeave={(e) => {\n                  e.currentTarget.style.background = `${colorToHex(\n                    KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n                  )}`;\n                  e.currentTarget.style.transform = \"translateY(0)\";\n                }}\n                data-testid=\"reset-filters-button\"\n              >\n                🔄 필터 초기화 | Reset Filters\n              </button>\n            </div>\n          )}\n\n          {/* Scale slider */}\n          <div>\n            <div\n              style={{\n                fontSize,\n                marginBottom: \"6px\",\n                color: colorToHex(KOREAN_COLORS.ACCENT_CYAN),\n              }}\n            >\n              크기 | Scale: {scale.toFixed(1)}x\n            </div>\n            <input\n              type=\"range\"\n              min=\"0.5\"\n              max=\"2.0\"\n              step=\"0.1\"\n              value={scale}\n              onChange={(e) => onScaleChange(parseFloat(e.target.value))}\n              style={{\n                width: \"100%\",\n                accentColor: colorToHex(KOREAN_COLORS.PRIMARY_CYAN),\n              }}\n              data-testid=\"scale-slider\"\n            />\n          </div>\n\n          {/* Statistics */}\n          <div\n            style={{\n              marginTop: \"12px\",\n              paddingTop: \"12px\",\n              borderTop: `1px solid ${colorToHex(\n                KOREAN_COLORS.PRIMARY_CYAN,\n              )}40`,\n              fontSize: smallFontSize,\n              color: colorToHex(KOREAN_COLORS.TEXT_SECONDARY),\n            }}\n          >\n            <div>\n              머리: {stats.byRegion.head} | 몸통: {stats.byRegion.torso}\n            </div>\n            <div>\n              팔: {stats.byRegion.arms} | 다리: {stats.byRegion.legs}\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default VitalPointOverlayControlsPure;\n"],"mappings":"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"}

package/lib/components/shared/ui/VolumeControl.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+export interface VolumeControlProps {
+    readonly position?: "top-right" | "bottom-right" | "top-left" | "bottom-left" | "custom";
+    readonly style?: React.CSSProperties;
+    readonly showLabels?: boolean;
+    readonly compact?: boolean;
+}
+/**
+ * Volume Control Component
+ *
+ * Provides controls for:
+ * - Master volume
+ * - Music volume
+ * - SFX volume
+ * - Mute/unmute toggle
+ *
+ * Inspired by template game (https://github.com/Hack23/game)
+ */
+export declare const VolumeControl: React.FC<VolumeControlProps>;
+//# sourceMappingURL=VolumeControl.d.ts.map

package/lib/components/shared/ui/VolumeControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeControl.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ui/VolumeControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,QAAQ,CAAC,EACd,WAAW,GACX,cAAc,GACd,UAAU,GACV,aAAa,GACb,QAAQ,CAAC;IACb,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+StD,CAAC"}