blacktrigram 0.7.2

package/lib/components/shared/three/ui/TechniqueCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TechniqueCard.js","names":[],"sources":["../../../../../src/components/shared/three/ui/TechniqueCard.tsx"],"sourcesContent":["/**\n * TechniqueCard Component\n *\n * **Korean**: 기술 카드 컴포넌트 (Technique Card Component)\n *\n * Individual technique card displaying technique name, stamina cost, keyboard shortcut,\n * and availability state. Shows detailed tooltip on hover/focus with technique description.\n *\n * Uses Html overlay from @react-three/drei for positioning over 3D scene.\n *\n * @module components/shared/three/ui/TechniqueCard\n * @category Shared UI\n * @korean 기술카드\n */\n\nimport React, { useCallback, useMemo, useState } from \"react\";\nimport { Technique } from \"../../../../types\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { triggerHaptic } from \"../../../../utils/haptics\";\nimport { PlayerArchetype, TrigramStance } from \"../../../../types/common\";\nimport { getArchetypePhysicalAttributes } from \"../../../../data/archetypePhysicalAttributes\";\nimport { physicalReachCalculator } from \"../../../../systems/physics\";\nimport { AnimationType } from \"../../../../systems/animation\";\nimport \"./HUDAnimations.css\";\n\n/**\n * Props for TechniqueCard component.\n */\nexport interface TechniqueCardProps {\n  /** Technique to display */\n  readonly technique: Technique;\n\n  /** Whether technique is currently selected */\n  readonly isSelected: boolean;\n\n  /** Whether technique is available (sufficient resources and no cooldown) */\n  readonly isAvailable: boolean;\n\n  /** Stamina cost percentage (0-100) */\n  readonly staminaCost: number;\n\n  /** Ki cost percentage (0-100) */\n  readonly kiCost: number;\n\n  /** Remaining cooldown in milliseconds */\n  readonly remainingCooldown?: number;\n\n  /** Keyboard shortcut key */\n  readonly keyboardShortcut: string;\n\n  /** Click handler */\n  readonly onClick: () => void;\n\n  /** Hover handler */\n  readonly onHover: (technique: Technique | null) => void;\n\n  /** Whether rendering for mobile device */\n  readonly isMobile: boolean;\n\n  /** Player archetype for reach calculation (optional) */\n  readonly playerArchetype?: PlayerArchetype;\n\n  /** Player stance for reach calculation (optional) */\n  readonly playerStance?: TrigramStance;\n\n  /** @deprecated Card position no longer needed - parent handles layout */\n  readonly position?: { x: number; y: number };\n}\n\n/**\n * TechniqueCard Component\n *\n * Displays a single technique card with Korean/English names, resource costs,\n * keyboard shortcut, and availability indicators.\n *\n * @param props - Component props\n * @returns TechniqueCard component\n */\nexport const TechniqueCard: React.FC<TechniqueCardProps> = ({\n  technique,\n  isSelected,\n  isAvailable,\n  staminaCost,\n  kiCost,\n  remainingCooldown,\n  keyboardShortcut,\n  onClick,\n  onHover,\n  isMobile,\n  playerArchetype,\n  playerStance,\n  // position prop is deprecated but kept for backwards compatibility\n}) => {\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  // Calculate effective reach if player info is available\n  const reachInfo = useMemo(() => {\n    if (!playerArchetype || !playerStance || !technique.animation?.type) {\n      return null;\n    }\n\n    // Map TechniqueAnimationConfig.type to AnimationType\n    // For now, use a simple default mapping\n    // TODO: Create proper mapping from AttackAnimationType to AnimationType\n    const animationType = AnimationType.JAB; // Default fallback\n\n    const physicalAttributes = getArchetypePhysicalAttributes(playerArchetype);\n    const maxReach = physicalReachCalculator.calculateMaxReach(\n      physicalAttributes,\n      animationType,\n      playerStance\n    );\n\n    // Determine body part from technique type using PhysicalReachCalculator\n    const techniqueType = physicalReachCalculator.getTechniqueTypeFromAnimation(animationType);\n    let bodyPart: string;\n    \n    switch (techniqueType) {\n      case \"punch\":\n      case \"elbow\":\n        bodyPart = \"Arm (팔)\";\n        break;\n      case \"kick\":\n      case \"knee\":\n        bodyPart = \"Leg (다리)\";\n        break;\n      case \"pressure_point\":\n      default:\n        bodyPart = \"Body (몸통)\";\n        break;\n    }\n\n    return {\n      maxReach: (maxReach * 100).toFixed(1), // Convert to cm\n      bodyPart,\n    };\n  }, [playerArchetype, playerStance, technique.animation]);\n\n  // Calculate card size based on device\n  const cardSize = useMemo(\n    () => ({\n      width: isMobile ? 70 : 90,\n      height: isMobile ? 80 : 100,\n      fontSize: isMobile ? 10 : 12,\n      shortcutSize: isMobile ? 16 : 20,\n    }),\n    [isMobile]\n  );\n\n  // Format cooldown time\n  const cooldownText = useMemo(() => {\n    if (!remainingCooldown || remainingCooldown <= 0) return null;\n    const seconds = Math.ceil(remainingCooldown / 1000);\n    return `${seconds}s`;\n  }, [remainingCooldown]);\n\n  // Card background color based on state\n  const backgroundColor = useMemo(() => {\n    if (!isAvailable) return \"rgba(50, 50, 50, 0.8)\";\n    if (isSelected) return `rgba(0, 255, 255, 0.3)`;\n    return \"rgba(26, 26, 30, 0.9)\";\n  }, [isAvailable, isSelected]);\n\n  // Border color based on state\n  const borderColor = useMemo(() => {\n    if (!isAvailable) return \"#666\";\n    if (isSelected) return KOREAN_COLORS.PRIMARY_CYAN;\n    return KOREAN_COLORS.ACCENT_GOLD;\n  }, [isAvailable, isSelected]);\n\n  // Convert color to hex string helper\n  const borderColorHex = useMemo(() => {\n    if (typeof borderColor === \"number\") {\n      return `#${borderColor.toString(16).padStart(6, \"0\")}`;\n    }\n    return borderColor;\n  }, [borderColor]);\n\n  // Helper for converting KOREAN_COLORS to hex\n  const primaryCyanHex = useMemo(\n    () => `#${KOREAN_COLORS.PRIMARY_CYAN.toString(16).padStart(6, \"0\")}`,\n    []\n  );\n  const accentGoldHex = useMemo(\n    () => `#${KOREAN_COLORS.ACCENT_GOLD.toString(16).padStart(6, \"0\")}`,\n    []\n  );\n\n  // Border glow effect for selected card\n  const boxShadow = useMemo(() => {\n    if (isSelected && isAvailable) {\n      return `0 0 15px rgba(0, 255, 255, 0.8), 0 0 25px rgba(0, 255, 255, 0.5)`;\n    }\n    if (isAvailable) {\n      return `0 0 10px rgba(255, 170, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.5)`;\n    }\n    return \"0 2px 8px rgba(0, 0, 0, 0.5)\";\n  }, [isSelected, isAvailable]);\n\n  // Animation class based on availability state\n  const animationClass = useMemo(\n    () => (isAvailable ? \"hud-animated\" : \"\"),\n    [isAvailable]\n  );\n\n  // Touch handler for mobile - provides immediate response without 300ms delay\n  const handleTouch = useCallback(\n    (e: React.TouchEvent) => {\n      if (!isAvailable) return;\n      e.preventDefault(); // Prevent ghost click on mobile\n      triggerHaptic(\"light\");\n      onClick();\n    },\n    [isAvailable, onClick]\n  );\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={isAvailable ? 0 : -1}\n      aria-label={`${technique.name.korean} (${technique.name.english}). Stamina: ${staminaCost}, Ki: ${kiCost}`}\n      aria-disabled={!isAvailable}\n      aria-describedby={showTooltip && isAvailable ? `tooltip-${technique.id}` : undefined}\n      className={animationClass}\n      style={{\n        position: \"relative\",\n        width: `${cardSize.width}px`,\n        height: `${cardSize.height}px`,\n        backgroundColor,\n        border: `2px solid ${borderColorHex}`,\n        borderRadius: \"8px\",\n        boxShadow,\n        cursor: isAvailable ? \"pointer\" : \"not-allowed\",\n        transition: \"all 0.2s ease-in-out, transform 0.15s ease-out\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        justifyContent: \"space-between\",\n        padding: \"6px\",\n        fontFamily: FONT_FAMILY.KOREAN,\n        opacity: isAvailable ? 1 : 0.5,\n        touchAction: \"manipulation\", // Disable double-tap zoom\n        userSelect: \"none\", // Prevent text selection on touch\n        animation: isSelected && isAvailable ? \"techniqueSelected 1.5s ease-in-out infinite\" : \n                   isAvailable ? \"techniqueGlow 2s ease-in-out infinite\" : \"none\",\n      }}\n      onClick={isAvailable ? onClick : undefined}\n      onTouchEnd={handleTouch}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        onHover(technique);\n      }}\n      onMouseLeave={() => {\n        setShowTooltip(false);\n        onHover(null);\n      }}\n      onFocus={() => {\n        setShowTooltip(true);\n        onHover(technique);\n      }}\n      onBlur={() => {\n        setShowTooltip(false);\n        onHover(null);\n      }}\n      data-testid={`technique-card-${technique.id}`}\n    >\n      {/* Keyboard Shortcut */}\n      <div\n        style={{\n          position: \"absolute\",\n          top: \"4px\",\n          right: \"4px\",\n          width: `${cardSize.shortcutSize}px`,\n          height: `${cardSize.shortcutSize}px`,\n          backgroundColor: \"rgba(0, 0, 0, 0.7)\",\n          border: \"1px solid #888\",\n          borderRadius: \"4px\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          fontSize: `${cardSize.fontSize}px`,\n          fontWeight: \"bold\",\n          color: isAvailable ? \"#fff\" : \"#666\",\n        }}\n      >\n        {keyboardShortcut}\n      </div>\n\n      {/* Technique Name (Korean) */}\n      <div\n        style={{\n          fontSize: `${cardSize.fontSize}px`,\n          fontWeight: \"bold\",\n          color: isAvailable ? accentGoldHex : \"#888\",\n          textAlign: \"center\",\n          marginTop: \"20px\",\n          lineHeight: \"1.2\",\n        }}\n      >\n        {technique.name.korean}\n      </div>\n\n      {/* Technique Name (English) */}\n      <div\n        style={{\n          fontSize: `${cardSize.fontSize - 2}px`,\n          color: isAvailable ? \"#ccc\" : \"#666\",\n          textAlign: \"center\",\n          marginTop: \"2px\",\n          lineHeight: \"1.1\",\n        }}\n      >\n        {technique.name.english}\n      </div>\n\n      {/* Resource Costs */}\n      <div\n        style={{\n          display: \"flex\",\n          gap: \"8px\",\n          marginTop: \"auto\",\n          fontSize: `${cardSize.fontSize - 2}px`,\n        }}\n      >\n        {/* Stamina Cost */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: \"2px\",\n            color: isAvailable ? \"#0f0\" : \"#666\",\n          }}\n        >\n          <span>⚡</span>\n          <span>{staminaCost}</span>\n        </div>\n\n        {/* Ki Cost */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: \"2px\",\n            color: isAvailable ? \"#0ff\" : \"#666\",\n          }}\n        >\n          <span>氣</span>\n          <span>{kiCost}</span>\n        </div>\n      </div>\n\n      {/* Cooldown Overlay */}\n      {cooldownText && (\n        <div\n          style={{\n            position: \"absolute\",\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            backgroundColor: \"rgba(0, 0, 0, 0.7)\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            borderRadius: \"6px\",\n            fontSize: `${cardSize.shortcutSize}px`,\n            fontWeight: \"bold\",\n            color: \"#f00\",\n          }}\n        >\n          {cooldownText}\n        </div>\n      )}\n\n      {/* Tooltip */}\n      {showTooltip && isAvailable && (\n        <div\n          id={`tooltip-${technique.id}`}\n          role=\"tooltip\"\n          style={{\n            position: \"absolute\",\n            bottom: `${cardSize.height + 10}px`,\n            left: \"50%\",\n            transform: \"translateX(-50%)\",\n            minWidth: \"200px\",\n            maxWidth: \"300px\",\n            padding: \"10px\",\n            backgroundColor: \"rgba(10, 10, 15, 0.95)\",\n            border: `2px solid ${primaryCyanHex}`,\n            borderRadius: \"8px\",\n            fontSize: \"12px\",\n            color: \"#fff\",\n            zIndex: 1000,\n            pointerEvents: \"none\",\n            fontFamily: FONT_FAMILY.KOREAN,\n          }}\n        >\n          <div\n            style={{\n              fontWeight: \"bold\",\n              marginBottom: \"6px\",\n              color: accentGoldHex,\n            }}\n          >\n            {technique.name.korean} | {technique.name.english}\n          </div>\n          <div\n            style={{ fontSize: \"11px\", lineHeight: \"1.4\", marginBottom: \"8px\" }}\n          >\n            {technique.description.korean}\n          </div>\n          <div style={{ fontSize: \"11px\", lineHeight: \"1.4\", color: \"#ccc\" }}>\n            {technique.description.english}\n          </div>\n          <div style={{ marginTop: \"8px\", fontSize: \"10px\", color: \"#aaa\" }}>\n            <div>\n              Damage: {technique.damage.min}-{technique.damage.max}\n            </div>\n            <div>Cooldown: {technique.cooldown / 1000}s</div>\n            {technique.requiredStance && (\n              <div>Stance: {technique.requiredStance}</div>\n            )}\n            {reachInfo && (\n              <>\n                <div style={{ marginTop: \"4px\", color: primaryCyanHex, fontWeight: \"bold\" }}>\n                  Reach: {reachInfo.maxReach}cm\n                </div>\n                <div style={{ fontSize: \"9px\", color: \"#999\" }}>\n                  {reachInfo.bodyPart}\n                </div>\n              </>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default TechniqueCard;\n"],"mappings":"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"}

package/lib/components/shared/three/ui/VitalPointOverlayControlsHtml.d.ts

@@ -0,0 +1,76 @@
+/**
+ * VitalPointOverlayControlsHtml - UI controls for vital point visualization
+ *
+ * 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/three/ui/VitalPointOverlayControlsHtml
+ */
+import React from "react";
+import { VitalPointSeverity } from "../../../../types/common";
+import type { BodyRegionFilter } from "../effects/VitalPointMarkers3D";
+export type { BodyRegionFilter } from "../effects/VitalPointMarkers3D";
+/**
+ * Props for VitalPointOverlayControlsHtml component
+ */
+export interface VitalPointOverlayControlsProps {
+    /** Whether overlay is currently visible */
+    readonly visible: boolean;
+    /** Callback when visibility changes */
+    readonly onVisibleChange: (visible: boolean) => void;
+    /** Current severity filters */
+    readonly severityFilters: VitalPointSeverity[];
+    /** Callback when severity filters change */
+    readonly onSeverityFiltersChange: (filters: VitalPointSeverity[]) => void;
+    /** Current region filter */
+    readonly regionFilter: BodyRegionFilter;
+    /** Callback when region filter changes */
+    readonly onRegionFilterChange: (filter: BodyRegionFilter) => void;
+    /** Current search query */
+    readonly searchQuery?: string;
+    /** Callback when search query changes */
+    readonly onSearchQueryChange?: (query: string) => void;
+    /** Whether labels are shown */
+    readonly showLabels: boolean;
+    /** Callback when label visibility changes */
+    readonly onShowLabelsChange: (show: boolean) => void;
+    /** Whether animations are enabled */
+    readonly animated: boolean;
+    /** Callback when animation state changes */
+    readonly onAnimatedChange: (animated: boolean) => void;
+    /** Marker scale multiplier */
+    readonly scale: number;
+    /** Callback when scale changes */
+    readonly onScaleChange: (scale: number) => void;
+    /** Whether on mobile device */
+    readonly isMobile?: boolean;
+    /**
+     * Screen position for the control panel.
+     *
+     * All values must be valid CSS position values, such as `"20px"`, `"10%"`, `"1rem"`, or `"auto"`.
+     * These are applied directly to the `style` of the Html overlay container.
+     */
+    readonly screenPosition?: {
+        /** CSS `top` position (e.g., "20px", "10%", "1rem", "auto") */
+        top?: string;
+        /** CSS `left` position (e.g., "20px", "10%", "1rem", "auto") */
+        left?: string;
+        /** CSS `right` position (e.g., "20px", "10%", "1rem", "auto") */
+        right?: string;
+        /** CSS `bottom` position (e.g., "20px", "10%", "1rem", "auto") */
+        bottom?: string;
+    };
+}
+/**
+ * VitalPointOverlayControlsHtml Component
+ * Provides comprehensive UI for vital point visualization control
+ */
+export declare const VitalPointOverlayControlsHtml: React.FC<VitalPointOverlayControlsProps>;
+export default VitalPointOverlayControlsHtml;
+//# sourceMappingURL=VitalPointOverlayControlsHtml.d.ts.map

package/lib/components/shared/three/ui/VitalPointOverlayControlsHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VitalPointOverlayControlsHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/ui/VitalPointOverlayControlsHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAGH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE;;GAEG;AACH,MAAM,WAAW,8BAA8B;IAC7C,2CAA2C;IAC3C,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,uCAAuC;IACvC,QAAQ,CAAC,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD,+BAA+B;IAC/B,QAAQ,CAAC,eAAe,EAAE,kBAAkB,EAAE,CAAC;IAC/C,4CAA4C;IAC5C,QAAQ,CAAC,uBAAuB,EAAE,CAAC,OAAO,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC1E,4BAA4B;IAC5B,QAAQ,CAAC,YAAY,EAAE,gBAAgB,CAAC;IACxC,0CAA0C;IAC1C,QAAQ,CAAC,oBAAoB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClE,2BAA2B;IAC3B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,yCAAyC;IACzC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,+BAA+B;IAC/B,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,6CAA6C;IAC7C,QAAQ,CAAC,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD,qCAAqC;IACrC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,4CAA4C;IAC5C,QAAQ,CAAC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,8BAA8B;IAC9B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,kCAAkC;IAClC,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;;OAKG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE;QACxB,+DAA+D;QAC/D,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,gEAAgE;QAChE,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,iEAAiE;QACjE,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,kEAAkE;QAClE,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AA6BD;;;GAGG;AACH,eAAO,MAAM,6BAA6B,EAAE,KAAK,CAAC,EAAE,CAClD,8BAA8B,CAupB/B,CAAC;AAEF,eAAe,6BAA6B,CAAC"}

package/lib/components/shared/three/ui/VitalPointOverlayControlsHtml.js

@@ -0,0 +1,551 @@
+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 KOREAN_VITAL_POINTS, { getVitalPointsStats } from "../../../../systems/vitalpoint/KoreanVitalPoints.js";
+import { useCallback, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Html } from "@react-three/drei";
+//#region src/components/shared/three/ui/VitalPointOverlayControlsHtml.tsx
+/**
+* VitalPointOverlayControlsHtml - UI controls for vital point visualization
+*
+* 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/three/ui/VitalPointOverlayControlsHtml
+*/
+/**
+* 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";
+	}
+};
+/**
+* VitalPointOverlayControlsHtml Component
+* Provides comprehensive UI for vital point visualization control
+*/
+var VitalPointOverlayControlsHtml = ({ 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__ */ jsx(Html, {
+		fullscreen: true,
+		style: { pointerEvents: "none" },
+		children: /* @__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: 200
+			},
+			"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)}44`,
+							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 { VitalPointOverlayControlsHtml as default };
+
+//# sourceMappingURL=VitalPointOverlayControlsHtml.js.map