blacktrigram 0.7.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnatomyOverlay3D.js","names":[],"sources":["../../../../../src/components/screens/training/components/AnatomyOverlay3D.tsx"],"sourcesContent":["/**\n * AnatomyOverlay3D - Toggleable anatomy visualization layers\n *\n * Provides skeleton, nerves, vascular, and surface anatomy overlays\n * for educational training visualization\n */\n\nimport { useFrame } from \"@react-three/fiber\";\nimport React, { useEffect, useMemo, useRef } from \"react\";\nimport * as THREE from \"three\";\nimport { KOREAN_COLORS } from \"../../../../types/constants\";\n\n// Visual effect constants for bloom optimization\n// Note: Emissive intensity values are balanced for visual clarity and performance.\n// When applied to many simultaneous overlays/markers, emissive intensities above ~2.0 can\n// increase rendering cost and bloom pass overhead. VitalPointMarker3D intentionally uses\n// higher emissive values (up to ~3.5) for a small number of selected markers, which is\n// acceptable because the total marker count is low. For dense anatomy overlays, prefer\n// keeping emissive intensities at or below ~2.0 and consider implementing LOD or\n// distance-based emissive scaling if brighter values or higher object counts are needed.\n// See VitalPointMarker3D for a concrete example: it exposes a configurable\n// `maxEmissiveIntensity` prop that caps per-marker glow. Use higher caps there for a\n// small number of critical vital point markers, while keeping dense overlay layers like\n// those in AnatomyOverlay3D within the ~2.0 guideline to maintain 60fps performance.\nconst SKELETON_EMISSIVE_INTENSITY = 1.0; // Enhanced glow for skeletal structure\nconst NERVE_EMISSIVE_INTENSITY = 1.5; // Balanced for bloom without performance impact\nconst VASCULAR_EMISSIVE_INTENSITY = 2.0; // Moderate intensity for blood vessels\nconst VASCULAR_PULSE_BASE = 1.0; // Base intensity for vascular pulse animation\nconst VASCULAR_PULSE_AMPLITUDE = 0.5; // Pulse variation amplitude (max 1.5 total)\n\n// Transmission constants for glass-like anatomy layers\nconst SKELETON_MAJOR_TRANSMISSION = 0.1; // Reduced transmission for more solid bone appearance (was 0.3)\nconst SKELETON_MAJOR_THICKNESS = 0.5; // Increased thickness for realistic bone structure (was 0.3)\nconst SKELETON_LIMB_TRANSMISSION = 0.05; // Reduced transmission for limbs (was 0.2)\nconst SKELETON_LIMB_THICKNESS = 0.4; // Increased thickness for limb bones (was 0.2)\nconst VASCULAR_TRANSMISSION = 0.2; // All vascular system meshes\nconst VASCULAR_THICKNESS = 0.2;\n\n/**\n * Anatomy layer types\n */\nexport type AnatomyLayer = \"skeleton\" | \"nerves\" | \"vascular\" | \"surface\";\n\n/**\n * Props for AnatomyOverlay3D component\n */\nexport interface AnatomyOverlay3DProps {\n  /** Position of the anatomy overlay (typically the dummy position) */\n  readonly position: [number, number, number];\n  /** Which anatomy layers to display */\n  readonly visibleLayers: readonly AnatomyLayer[];\n  /** Opacity of the overlay (0-1) */\n  readonly opacity?: number;\n  /** Whether on mobile device (reserved for future mobile-specific optimizations) */\n  readonly isMobile?: boolean;\n}\n\n/**\n * Skeleton Layer Component\n * Simplified skeletal structure visualization with glass-like transmission\n */\nconst SkeletonLayer: React.FC<{ opacity: number }> = ({ opacity }) => {\n  const groupRef = useRef<THREE.Group>(null);\n\n  // Memoize skull geometry to prevent recreating on every render\n  // 두개골 기하학 메모화 | Skull geometry memoization\n  const skullGeometry = useMemo(() => new THREE.SphereGeometry(0.25, 16, 16), []);\n\n  // 자원 정리 | Resource cleanup - Dispose skull geometry on unmount\n  useEffect(() => {\n    return () => {\n      skullGeometry.dispose();\n    };\n  }, [skullGeometry]);\n\n  // Pulsing emissive animation for skeleton layer\n  useFrame((state) => {\n    if (!groupRef.current) return;\n\n    // Enhanced pulse for better visibility (amplitude increased from 0.2 to 0.4)\n    const pulse = Math.sin(state.clock.elapsedTime * 2) * 0.4 + 0.6;\n\n    // Rebuild mesh cache each frame to ensure all meshes are captured\n    const meshes: THREE.Mesh[] = [];\n    groupRef.current.traverse((child) => {\n      if (\n        child instanceof THREE.Mesh &&\n        child.material instanceof THREE.MeshPhysicalMaterial\n      ) {\n        meshes.push(child);\n      }\n    });\n\n    // Update all meshes with pulsing emissive\n    meshes.forEach((mesh) => {\n      if (mesh.material instanceof THREE.MeshPhysicalMaterial) {\n        mesh.material.emissiveIntensity = pulse;\n      }\n    });\n  });\n\n  return (\n    <group ref={groupRef}>\n      {/* Spine - vertical line */}\n      <mesh position={[0, 1.0, -0.05]}>\n        <cylinderGeometry args={[0.03, 0.03, 1.6, 8]} />\n        <meshPhysicalMaterial\n          color={KOREAN_COLORS.WHITE_SOLID}\n          transparent\n          opacity={opacity}\n          transmission={SKELETON_MAJOR_TRANSMISSION}\n          thickness={SKELETON_MAJOR_THICKNESS}\n          roughness={0.4} // Increased roughness for bone texture (was 0.1)\n          clearcoat={0.3}\n          metalness={0} // Bone is non-metallic\n          emissive={KOREAN_COLORS.PRIMARY_CYAN}\n          emissiveIntensity={SKELETON_EMISSIVE_INTENSITY}\n          // Bone surface detail\n          ior={1.55} // Index of refraction for bone\n          sheen={0.1} // Slight sheen for bone surface\n          sheenRoughness={0.9}\n        />\n      </mesh>\n\n      {/* Skull - wireframe sphere */}\n      <lineSegments position={[0, 1.6, 0]}>\n        <edgesGeometry args={[skullGeometry]} />\n        <lineBasicMaterial\n          color={KOREAN_COLORS.WHITE_SOLID}\n          transparent\n          opacity={opacity}\n        />\n      </lineSegments>\n\n      {/* Rib cage - horizontal lines */}\n      {[1.3, 1.15, 1.0, 0.85, 0.7].map((y, i) => (\n        <mesh key={i} position={[0, y, 0]} rotation={[0, 0, Math.PI / 2]}>\n          <torusGeometry args={[0.25 - i * 0.02, 0.02, 8, 16]} />\n          <meshPhysicalMaterial\n            color={KOREAN_COLORS.WHITE_SOLID}\n            transparent\n            opacity={opacity * 0.7}\n            transmission={SKELETON_MAJOR_TRANSMISSION}\n            thickness={SKELETON_MAJOR_THICKNESS}\n            roughness={0.4} // Bone texture (consistent with spine)\n            clearcoat={0.3}\n            metalness={0} // Bone is non-metallic\n            emissive={KOREAN_COLORS.PRIMARY_CYAN}\n            emissiveIntensity={SKELETON_EMISSIVE_INTENSITY}\n            // Bone surface detail\n            ior={1.55} // Index of refraction for bone\n            sheen={0.1} // Slight sheen for bone surface\n            sheenRoughness={0.9}\n          />\n        </mesh>\n      ))}\n\n      {/* Pelvis - simplified structure */}\n      <mesh position={[0, 0.5, 0]} rotation={[0, 0, Math.PI / 2]}>\n        <torusGeometry args={[0.25, 0.03, 8, 16]} />\n        <meshPhysicalMaterial\n          color={KOREAN_COLORS.WHITE_SOLID}\n          transparent\n          opacity={opacity}\n          transmission={SKELETON_MAJOR_TRANSMISSION}\n          thickness={SKELETON_MAJOR_THICKNESS}\n          roughness={0.4} // Bone texture (consistent with spine)\n          clearcoat={0.3}\n          metalness={0} // Bone is non-metallic\n          emissive={KOREAN_COLORS.PRIMARY_CYAN}\n          emissiveIntensity={SKELETON_EMISSIVE_INTENSITY}\n          // Bone surface detail\n          ior={1.55} // Index of refraction for bone\n          sheen={0.1} // Slight sheen for bone surface\n          sheenRoughness={0.9}\n        />\n      </mesh>\n\n      {/* Left arm bones */}\n      <mesh position={[-0.4, 1.0, 0]} rotation={[0, 0, Math.PI / 6]}>\n        <cylinderGeometry args={[0.02, 0.02, 0.6, 8]} />\n        <meshPhysicalMaterial\n          color={KOREAN_COLORS.WHITE_SOLID}\n          transparent\n          opacity={opacity * 0.8}\n          transmission={SKELETON_LIMB_TRANSMISSION}\n          thickness={SKELETON_LIMB_THICKNESS}\n          roughness={0.4} // Bone texture (consistent with spine)\n          metalness={0} // Bone is non-metallic\n          emissive={KOREAN_COLORS.PRIMARY_CYAN}\n          emissiveIntensity={SKELETON_EMISSIVE_INTENSITY}\n          // Bone surface detail\n          ior={1.55} // Index of refraction for bone\n          sheen={0.1} // Slight sheen for bone surface\n          sheenRoughness={0.9}\n        />\n      </mesh>\n\n      {/* Right arm bones */}\n      <mesh position={[0.4, 1.0, 0]} rotation={[0, 0, -Math.PI / 6]}>\n        <cylinderGeometry args={[0.02, 0.02, 0.6, 8]} />\n        <meshPhysicalMaterial\n          color={KOREAN_COLORS.WHITE_SOLID}\n          transparent\n          opacity={opacity * 0.8}\n          transmission={SKELETON_LIMB_TRANSMISSION}\n          thickness={SKELETON_LIMB_THICKNESS}\n          roughness={0.4} // Bone texture (consistent with spine)\n          metalness={0} // Bone is non-metallic\n          emissive={KOREAN_COLORS.PRIMARY_CYAN}\n          emissiveIntensity={SKELETON_EMISSIVE_INTENSITY}\n          // Bone surface detail\n          ior={1.55} // Index of refraction for bone\n          sheen={0.1} // Slight sheen for bone surface\n          sheenRoughness={0.9}\n        />\n      </mesh>\n\n      {/* Leg bones */}\n      <mesh position={[-0.2, 0.3, 0]}>\n        <cylinderGeometry args={[0.02, 0.02, 0.5, 8]} />\n        <meshPhysicalMaterial\n          color={KOREAN_COLORS.WHITE_SOLID}\n          transparent\n          opacity={opacity * 0.8}\n          transmission={SKELETON_LIMB_TRANSMISSION}\n          thickness={SKELETON_LIMB_THICKNESS}\n          roughness={0.4} // Bone texture (consistent with spine)\n          metalness={0} // Bone is non-metallic\n          emissive={KOREAN_COLORS.PRIMARY_CYAN}\n          emissiveIntensity={SKELETON_EMISSIVE_INTENSITY}\n          // Bone surface detail\n          ior={1.55} // Index of refraction for bone\n          sheen={0.1} // Slight sheen for bone surface\n          sheenRoughness={0.9}\n        />\n      </mesh>\n      <mesh position={[0.2, 0.3, 0]}>\n        <cylinderGeometry args={[0.02, 0.02, 0.5, 8]} />\n        <meshPhysicalMaterial\n          color={KOREAN_COLORS.WHITE_SOLID}\n          transparent\n          opacity={opacity * 0.8}\n          transmission={SKELETON_LIMB_TRANSMISSION}\n          thickness={SKELETON_LIMB_THICKNESS}\n          roughness={0.4} // Bone texture (consistent with spine)\n          metalness={0} // Bone is non-metallic\n          emissive={KOREAN_COLORS.PRIMARY_CYAN}\n          emissiveIntensity={SKELETON_EMISSIVE_INTENSITY}\n          // Bone surface detail\n          ior={1.55} // Index of refraction for bone\n          sheen={0.1} // Slight sheen for bone surface\n          sheenRoughness={0.9}\n        />\n      </mesh>\n    </group>\n  );\n};\n\n/**\n * Nerves Layer Component\n * Nervous system pathways visualization\n */\nconst NervesLayer: React.FC<{ opacity: number }> = ({ opacity }) => {\n  const groupRef = useRef<THREE.Group>(null);\n\n  // Pulsing animation for nerve pathways\n  useFrame((state) => {\n    if (!groupRef.current) return;\n\n    const pulse = Math.sin(state.clock.elapsedTime * 3) * 0.5 + 0.5;\n    const targetIntensity = 1.0 + pulse * 0.5;\n\n    // Rebuild mesh cache each frame to ensure all meshes are captured\n    const meshes: THREE.Mesh[] = [];\n    groupRef.current.traverse((child) => {\n      if (\n        child instanceof THREE.Mesh &&\n        child.material instanceof THREE.MeshPhysicalMaterial\n      ) {\n        meshes.push(child);\n      }\n    });\n\n    // Update all meshes with pulsing emissive\n    meshes.forEach((mesh) => {\n      if (mesh.material instanceof THREE.MeshPhysicalMaterial) {\n        mesh.material.emissiveIntensity = targetIntensity;\n      }\n    });\n  });\n\n  return (\n    <group ref={groupRef}>\n      {/* Spinal cord - central nerve */}\n      <mesh position={[0, 1.0, -0.08]}>\n        <cylinderGeometry args={[0.025, 0.025, 1.6, 8]} />\n        <meshPhysicalMaterial\n          color={KOREAN_COLORS.SECONDARY_YELLOW}\n          transparent\n          opacity={opacity}\n          emissive={KOREAN_COLORS.SECONDARY_YELLOW}\n          emissiveIntensity={NERVE_EMISSIVE_INTENSITY}\n          roughness={0.2}\n          clearcoat={1.0}\n        />\n      </mesh>\n\n      {/* Nerve branches - from spine to limbs */}\n      {/* Cervical nerves (neck area) */}\n      {[-0.15, 0.15].map((x, i) => (\n        <mesh\n          key={`cervical-${i}`}\n          position={[x, 1.4, -0.08]}\n          rotation={[0, 0, x > 0 ? -Math.PI / 4 : Math.PI / 4]}\n        >\n          <cylinderGeometry args={[0.015, 0.015, 0.2, 6]} />\n          <meshPhysicalMaterial\n            color={KOREAN_COLORS.ACCENT_GOLD}\n            transparent\n            opacity={opacity * 0.8}\n            emissive={KOREAN_COLORS.ACCENT_GOLD}\n            emissiveIntensity={1.5}\n            roughness={0.2}\n            clearcoat={1.0}\n          />\n        </mesh>\n      ))}\n\n      {/* Brachial plexus (arm nerves) */}\n      {[-0.3, 0.3].map((x, i) => (\n        <mesh\n          key={`brachial-${i}`}\n          position={[x, 1.1, -0.08]}\n          rotation={[0, 0, x > 0 ? -Math.PI / 3 : Math.PI / 3]}\n        >\n          <cylinderGeometry args={[0.015, 0.01, 0.3, 6]} />\n          <meshPhysicalMaterial\n            color={KOREAN_COLORS.ACCENT_GOLD}\n            transparent\n            opacity={opacity * 0.7}\n            emissive={KOREAN_COLORS.ACCENT_GOLD}\n            emissiveIntensity={NERVE_EMISSIVE_INTENSITY}\n            roughness={0.2}\n            clearcoat={1.0}\n          />\n        </mesh>\n      ))}\n\n      {/* Lumbar/sacral nerves (leg nerves) */}\n      {[-0.15, 0.15].map((x, i) => (\n        <mesh\n          key={`lumbar-${i}`}\n          position={[x, 0.5, -0.08]}\n          rotation={[0, 0, x > 0 ? -Math.PI / 6 : Math.PI / 6]}\n        >\n          <cylinderGeometry args={[0.015, 0.01, 0.4, 6]} />\n          <meshPhysicalMaterial\n            color={KOREAN_COLORS.ACCENT_GOLD}\n            transparent\n            opacity={opacity * 0.7}\n            emissive={KOREAN_COLORS.ACCENT_GOLD}\n            emissiveIntensity={NERVE_EMISSIVE_INTENSITY}\n            roughness={0.2}\n            clearcoat={1.0}\n          />\n        </mesh>\n      ))}\n    </group>\n  );\n};\n\n/**\n * Vascular Layer Component\n * Blood vessel system visualization with glass-like transmission\n */\nconst VascularLayer: React.FC<{ opacity: number }> = ({ opacity }) => {\n  const groupRef = useRef<THREE.Group>(null);\n\n  // Pulsing animation simulating blood flow\n  useFrame((state) => {\n    if (!groupRef.current) return;\n\n    const pulse = Math.sin(state.clock.elapsedTime * 2) * 0.5 + 0.5;\n    const targetIntensity = VASCULAR_PULSE_BASE + pulse * VASCULAR_PULSE_AMPLITUDE;\n\n    // Rebuild mesh cache each frame to ensure all meshes are captured\n    const meshes: THREE.Mesh[] = [];\n    groupRef.current.traverse((child) => {\n      if (\n        child instanceof THREE.Mesh &&\n        child.material instanceof THREE.MeshPhysicalMaterial\n      ) {\n        meshes.push(child);\n      }\n    });\n\n    // Update all meshes with pulsing emissive\n    meshes.forEach((mesh) => {\n      if (mesh.material instanceof THREE.MeshPhysicalMaterial) {\n        mesh.material.emissiveIntensity = targetIntensity;\n      }\n    });\n  });\n\n  return (\n    <group ref={groupRef}>\n      {/* Aorta - main artery */}\n      <mesh position={[0, 1.0, -0.1]}>\n        <cylinderGeometry args={[0.02, 0.02, 1.4, 8]} />\n        <meshPhysicalMaterial\n          color={KOREAN_COLORS.ACCENT_RED}\n          transparent\n          opacity={opacity}\n          transmission={VASCULAR_TRANSMISSION}\n          thickness={VASCULAR_THICKNESS}\n          roughness={0.2}\n          clearcoat={0.8}\n          emissive={KOREAN_COLORS.ACCENT_RED}\n          emissiveIntensity={VASCULAR_EMISSIVE_INTENSITY}\n        />\n      </mesh>\n\n      {/* Carotid arteries (neck) */}\n      {[-0.1, 0.1].map((x, i) => (\n        <mesh key={`carotid-${i}`} position={[x, 1.4, -0.05]}>\n          <cylinderGeometry args={[0.015, 0.015, 0.3, 6]} />\n          <meshPhysicalMaterial\n            color={KOREAN_COLORS.ACCENT_RED}\n            transparent\n            opacity={opacity * 0.9}\n            transmission={VASCULAR_TRANSMISSION}\n            thickness={VASCULAR_THICKNESS}\n            roughness={0.2}\n            clearcoat={0.8}\n            emissive={KOREAN_COLORS.ACCENT_RED}\n            emissiveIntensity={VASCULAR_EMISSIVE_INTENSITY}\n          />\n        </mesh>\n      ))}\n\n      {/* Subclavian/axillary arteries (shoulder to arm) */}\n      {[-0.25, 0.25].map((x, i) => (\n        <mesh\n          key={`subclavian-${i}`}\n          position={[x, 1.15, -0.08]}\n          rotation={[0, 0, x > 0 ? -Math.PI / 4 : Math.PI / 4]}\n        >\n          <cylinderGeometry args={[0.012, 0.012, 0.25, 6]} />\n          <meshPhysicalMaterial\n            color={KOREAN_COLORS.ACCENT_RED}\n            transparent\n            opacity={opacity * 0.8}\n            transmission={VASCULAR_TRANSMISSION}\n            thickness={VASCULAR_THICKNESS}\n            roughness={0.2}\n            clearcoat={0.8}\n            emissive={KOREAN_COLORS.ACCENT_RED}\n            emissiveIntensity={VASCULAR_EMISSIVE_INTENSITY}\n          />\n        </mesh>\n      ))}\n\n      {/* Femoral arteries (legs) */}\n      {[-0.15, 0.15].map((x, i) => (\n        <mesh key={`femoral-${i}`} position={[x, 0.4, -0.08]}>\n          <cylinderGeometry args={[0.012, 0.012, 0.35, 6]} />\n          <meshPhysicalMaterial\n            color={KOREAN_COLORS.ACCENT_RED}\n            transparent\n            opacity={opacity * 0.8}\n            transmission={VASCULAR_TRANSMISSION}\n            thickness={VASCULAR_THICKNESS}\n            roughness={0.2}\n            clearcoat={0.8}\n            emissive={KOREAN_COLORS.ACCENT_RED}\n            emissiveIntensity={VASCULAR_EMISSIVE_INTENSITY}\n          />\n        </mesh>\n      ))}\n    </group>\n  );\n};\n\n/**\n * Surface Layer Component\n * Surface anatomy landmarks and skin layer\n */\nconst SurfaceLayer: React.FC<{ opacity: number }> = ({ opacity }) => {\n  return (\n    <group>\n      {/* Glass Skin Shell - Slightly larger than dummy to envelop internals */}\n      <mesh position={[0, 1.6, 0]}>\n        <sphereGeometry args={[0.26, 32, 32]} />\n        <meshPhysicalMaterial\n          color={KOREAN_COLORS.PRIMARY_CYAN}\n          roughness={0.2}\n          transmission={0.9}\n          thickness={0.5}\n          transparent\n          opacity={opacity * 0.5}\n        />\n      </mesh>\n\n      <mesh position={[0, 1.0, 0]}>\n        <capsuleGeometry args={[0.31, 0.8, 8, 16]} />\n        <meshPhysicalMaterial\n          color={KOREAN_COLORS.PRIMARY_CYAN}\n          roughness={0.2}\n          transmission={0.9}\n          thickness={0.5}\n          transparent\n          opacity={opacity * 0.5}\n        />\n      </mesh>\n\n      {/* Arms */}\n      <mesh position={[-0.4, 1.0, 0]} rotation={[0, 0, Math.PI / 6]}>\n        <capsuleGeometry args={[0.11, 0.6, 4, 8]} />\n        <meshPhysicalMaterial\n          color={KOREAN_COLORS.PRIMARY_CYAN}\n          roughness={0.2}\n          transmission={0.9}\n          thickness={0.5}\n          transparent\n          opacity={opacity * 0.5}\n        />\n      </mesh>\n      <mesh position={[0.4, 1.0, 0]} rotation={[0, 0, -Math.PI / 6]}>\n        <capsuleGeometry args={[0.11, 0.6, 4, 8]} />\n        <meshPhysicalMaterial\n          color={KOREAN_COLORS.PRIMARY_CYAN}\n          roughness={0.2}\n          transmission={0.9}\n          thickness={0.5}\n          transparent\n          opacity={opacity * 0.5}\n        />\n      </mesh>\n\n      {/* Legs */}\n      <mesh position={[-0.2, 0.3, 0]}>\n        <capsuleGeometry args={[0.13, 0.5, 4, 8]} />\n        <meshPhysicalMaterial\n          color={KOREAN_COLORS.PRIMARY_CYAN}\n          roughness={0.2}\n          transmission={0.9}\n          thickness={0.5}\n          transparent\n          opacity={opacity * 0.5}\n        />\n      </mesh>\n      <mesh position={[0.2, 0.3, 0]}>\n        <capsuleGeometry args={[0.13, 0.5, 4, 8]} />\n        <meshPhysicalMaterial\n          color={KOREAN_COLORS.PRIMARY_CYAN}\n          roughness={0.2}\n          transmission={0.9}\n          thickness={0.5}\n          transparent\n          opacity={opacity * 0.5}\n        />\n      </mesh>\n    </group>\n  );\n};\n\n/**\n * AnatomyOverlay3D Component\n * Main component that manages all anatomy layers\n */\nexport const AnatomyOverlay3D: React.FC<AnatomyOverlay3DProps> = ({\n  position,\n  visibleLayers,\n  opacity = 0.7,\n}) => {\n  // Memoize layer visibility checks\n  const showSkeleton = useMemo(\n    () => visibleLayers.includes(\"skeleton\"),\n    [visibleLayers]\n  );\n  const showNerves = useMemo(\n    () => visibleLayers.includes(\"nerves\"),\n    [visibleLayers]\n  );\n  const showVascular = useMemo(\n    () => visibleLayers.includes(\"vascular\"),\n    [visibleLayers]\n  );\n  const showSurface = useMemo(\n    () => visibleLayers.includes(\"surface\"),\n    [visibleLayers]\n  );\n\n  return (\n    <group position={position} name=\"anatomy-overlay-3d\">\n      {showSkeleton && <SkeletonLayer opacity={opacity} />}\n      {showNerves && <NervesLayer opacity={opacity} />}\n      {showVascular && <VascularLayer opacity={opacity} />}\n      {showSurface && <SurfaceLayer opacity={opacity} />}\n    </group>\n  );\n};\n\nexport default AnatomyOverlay3D;\n"],"mappings":"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"}

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

@@ -0,0 +1,28 @@
+/**
+ * DamageNumber3D - Floating damage number effect in 3D space
+ *
+ * Shows damage numbers that float up and fade out
+ */
+import React from "react";
+/**
+ * Props for DamageNumber3D component
+ */
+export interface DamageNumber3DProps {
+    /** Initial 3D position */
+    readonly position: [number, number, number];
+    /** Damage value to display */
+    readonly damage: number;
+    /** Type of hit (affects color) */
+    readonly type: "normal" | "perfect" | "critical";
+    /** Callback when animation completes */
+    readonly onComplete: () => void;
+    /** Animation duration in seconds */
+    readonly duration?: number;
+}
+/**
+ * DamageNumber3D Component
+ * Displays floating damage numbers in 3D space
+ */
+export declare const DamageNumber3D: React.FC<DamageNumber3DProps>;
+export default DamageNumber3D;
+//# sourceMappingURL=DamageNumber3D.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DamageNumber3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/training/components/DamageNumber3D.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,0BAA0B;IAC1B,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,8BAA8B;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,kCAAkC;IAClC,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IACjD,wCAAwC;IACxC,QAAQ,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC;IAChC,oCAAoC;IACpC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgFxD,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,6 @@
+import "../../../../types/constants/index.js";
+import "../../../../utils/htmlOverlayHelpers.js";
+import "react";
+import "react/jsx-runtime";
+import "@react-three/fiber";
+import "@react-three/drei";

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

@@ -0,0 +1,47 @@
+/**
+ * FootPlacementMarkers3D - 3D markers showing foot placement for footwork drills
+ *
+ * Renders visual indicators on the ground to guide footwork training,
+ * showing target positions for Korean martial arts footwork patterns.
+ *
+ * @module components/screens/training/components/FootPlacementMarkers3D
+ * @category Training 3D Components
+ * @korean 발위치표시3D컴포넌트
+ */
+import React from "react";
+import type { FootworkDrill } from "./FootworkDrillsOverlayHtml";
+/**
+ * Footwork drill pattern types for 3D visualization
+ *
+ * Derived from FootworkDrill, excluding "free_practice" (which has no pattern),
+ * and adding a "none" sentinel for cases with no active pattern.
+ */
+export type FootworkDrillPattern = Exclude<FootworkDrill, "free_practice"> | "none";
+/**
+ * Props for FootPlacementMarkers3D component
+ */
+export interface FootPlacementMarkers3DProps {
+    /** Center position for the pattern */
+    readonly centerPosition?: [number, number, number];
+    /** Current drill pattern to display */
+    readonly pattern: FootworkDrillPattern;
+    /** Current step in pattern (0-based) */
+    readonly currentStep?: number;
+    /** Whether markers are visible */
+    readonly visible?: boolean;
+    /** Scale factor for markers */
+    readonly scale?: number;
+    /** Whether to animate markers */
+    readonly animated?: boolean;
+}
+/**
+ * FootPlacementMarkers3D Component
+ *
+ * Displays 3D foot placement markers on the ground for footwork drills,
+ * with Korean martial arts-themed visual feedback.
+ *
+ * @korean 발위치표시3D
+ */
+export declare const FootPlacementMarkers3D: React.FC<FootPlacementMarkers3DProps>;
+export default FootPlacementMarkers3D;
+//# sourceMappingURL=FootPlacementMarkers3D.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FootPlacementMarkers3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/training/components/FootPlacementMarkers3D.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAC5B,OAAO,CAAC,aAAa,EAAE,eAAe,CAAC,GACvC,MAAM,CAAC;AAEX;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,sCAAsC;IACtC,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACnD,uCAAuC;IACvC,QAAQ,CAAC,OAAO,EAAE,oBAAoB,CAAC;IACvC,wCAAwC;IACxC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,kCAAkC;IAClC,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,iCAAiC;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AA8KD;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA+BxE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

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

@@ -0,0 +1,380 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import "../../../../types/constants/index.js";
+import { useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import { Html } from "@react-three/drei";
+import * as THREE from "three";
+//#region src/components/screens/training/components/FootPlacementMarkers3D.tsx
+/**
+* FootPlacementMarkers3D - 3D markers showing foot placement for footwork drills
+* 
+* Renders visual indicators on the ground to guide footwork training,
+* showing target positions for Korean martial arts footwork patterns.
+* 
+* @module components/screens/training/components/FootPlacementMarkers3D
+* @category Training 3D Components
+* @korean 발위치표시3D컴포넌트
+*/
+/**
+* Generate footwork pattern positions
+* 
+* @korean 보법패턴위치생성
+*/
+function getPatternPositions(pattern, center) {
+	const [cx, cy, cz] = center;
+	const radius = 2;
+	const stepDist = .3;
+	switch (pattern) {
+		case "circular_left": return [
+			{
+				position: [
+					cx + radius,
+					cy,
+					cz
+				],
+				label: "1"
+			},
+			{
+				position: [
+					cx,
+					cy,
+					cz - radius
+				],
+				label: "2"
+			},
+			{
+				position: [
+					cx - radius,
+					cy,
+					cz
+				],
+				label: "3"
+			},
+			{
+				position: [
+					cx,
+					cy,
+					cz + radius
+				],
+				label: "4"
+			}
+		];
+		case "circular_right": return [
+			{
+				position: [
+					cx + radius,
+					cy,
+					cz
+				],
+				label: "1"
+			},
+			{
+				position: [
+					cx,
+					cy,
+					cz + radius
+				],
+				label: "2"
+			},
+			{
+				position: [
+					cx - radius,
+					cy,
+					cz
+				],
+				label: "3"
+			},
+			{
+				position: [
+					cx,
+					cy,
+					cz - radius
+				],
+				label: "4"
+			}
+		];
+		case "pivot_combo": return [
+			{
+				position: [
+					cx,
+					cy,
+					cz
+				],
+				label: "Start"
+			},
+			{
+				position: [
+					cx - .5,
+					cy,
+					cz + .5
+				],
+				label: "Pivot L"
+			},
+			{
+				position: [
+					cx,
+					cy,
+					cz
+				],
+				label: "Center"
+			},
+			{
+				position: [
+					cx + .5,
+					cy,
+					cz + .5
+				],
+				label: "Pivot R"
+			}
+		];
+		case "triangle_step": return [
+			{
+				position: [
+					cx,
+					cy,
+					cz
+				],
+				label: "Start"
+			},
+			{
+				position: [
+					cx,
+					cy,
+					cz - stepDist * 2
+				],
+				label: "Forward"
+			},
+			{
+				position: [
+					cx + stepDist * 1.5,
+					cy,
+					cz
+				],
+				label: "Right"
+			},
+			{
+				position: [
+					cx,
+					cy,
+					cz
+				],
+				label: "Back"
+			}
+		];
+		case "slide_drill": return [
+			{
+				position: [
+					cx,
+					cy,
+					cz
+				],
+				label: "Center"
+			},
+			{
+				position: [
+					cx,
+					cy,
+					cz - stepDist
+				],
+				label: "Forward"
+			},
+			{
+				position: [
+					cx + stepDist,
+					cy,
+					cz
+				],
+				label: "Right"
+			},
+			{
+				position: [
+					cx,
+					cy,
+					cz + stepDist
+				],
+				label: "Back"
+			},
+			{
+				position: [
+					cx - stepDist,
+					cy,
+					cz
+				],
+				label: "Left"
+			}
+		];
+		case "shuffle_practice": return [
+			{
+				position: [
+					cx,
+					cy,
+					cz
+				],
+				label: "Start"
+			},
+			{
+				position: [
+					cx,
+					cy,
+					cz - .15
+				],
+				label: "Shuffle 1"
+			},
+			{
+				position: [
+					cx,
+					cy,
+					cz - .3
+				],
+				label: "Shuffle 2"
+			},
+			{
+				position: [
+					cx,
+					cy,
+					cz - .45
+				],
+				label: "Shuffle 3"
+			}
+		];
+		default: return [];
+	}
+}
+/**
+* Single foot placement marker
+*/
+var FootMarker = ({ position, label, isActive, isCompleted, animated }) => {
+	const meshRef = useRef(null);
+	const ringRef = useRef(null);
+	useFrame((state) => {
+		if (!animated) return;
+		if (meshRef.current && isActive) {
+			const pulse = Math.sin(state.clock.elapsedTime * 3) * .1 + 1;
+			meshRef.current.scale.setScalar(pulse);
+		}
+		if (ringRef.current && isActive) {
+			const ringPulse = Math.sin(state.clock.elapsedTime * 2) * .2 + 1;
+			ringRef.current.scale.setScalar(ringPulse);
+		}
+	});
+	const markerColor = isCompleted ? KOREAN_COLORS.ACCENT_GREEN : isActive ? KOREAN_COLORS.PRIMARY_CYAN : KOREAN_COLORS.ACCENT_GOLD;
+	return /* @__PURE__ */ jsxs("group", {
+		position,
+		children: [
+			/* @__PURE__ */ jsxs("mesh", {
+				ref: meshRef,
+				rotation: [
+					-Math.PI / 2,
+					0,
+					0
+				],
+				position: [
+					0,
+					.01,
+					0
+				],
+				children: [/* @__PURE__ */ jsx("circleGeometry", { args: [.2, 32] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+					color: markerColor,
+					transparent: true,
+					opacity: isActive ? .9 : .6,
+					side: THREE.DoubleSide
+				})]
+			}),
+			/* @__PURE__ */ jsxs("mesh", {
+				ref: ringRef,
+				rotation: [
+					-Math.PI / 2,
+					0,
+					0
+				],
+				position: [
+					0,
+					.02,
+					0
+				],
+				children: [/* @__PURE__ */ jsx("ringGeometry", { args: [
+					.2,
+					.25,
+					32
+				] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+					color: markerColor,
+					transparent: true,
+					opacity: isActive ? .7 : .4,
+					side: THREE.DoubleSide
+				})]
+			}),
+			/* @__PURE__ */ jsx(Html, {
+				position: [
+					0,
+					.1,
+					0
+				],
+				center: true,
+				style: {
+					pointerEvents: "none",
+					userSelect: "none"
+				},
+				children: /* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: "12px",
+						fontWeight: "bold",
+						color: isActive ? "#00ffff" : "#ffffff",
+						textShadow: "0 0 4px rgba(0,0,0,0.8)",
+						background: "rgba(0,0,0,0.6)",
+						padding: "2px 6px",
+						borderRadius: "4px"
+					},
+					children: label
+				})
+			}),
+			isActive && /* @__PURE__ */ jsxs("mesh", {
+				position: [
+					0,
+					.5,
+					0
+				],
+				children: [/* @__PURE__ */ jsx("cylinderGeometry", { args: [
+					.02,
+					.02,
+					1,
+					8
+				] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+					color: KOREAN_COLORS.PRIMARY_CYAN,
+					transparent: true,
+					opacity: .4
+				})]
+			})
+		]
+	});
+};
+/**
+* FootPlacementMarkers3D Component
+* 
+* Displays 3D foot placement markers on the ground for footwork drills,
+* with Korean martial arts-themed visual feedback.
+* 
+* @korean 발위치표시3D
+*/
+var FootPlacementMarkers3D = ({ centerPosition = [
+	5,
+	0,
+	0
+], pattern, currentStep = 0, visible = true, scale = 1, animated = true }) => {
+	const positions = useMemo(() => getPatternPositions(pattern, centerPosition), [pattern, centerPosition]);
+	if (!visible || pattern === "none" || positions.length === 0) return null;
+	return /* @__PURE__ */ jsx("group", {
+		scale,
+		children: positions.map((marker, index) => /* @__PURE__ */ jsx(FootMarker, {
+			position: marker.position,
+			label: marker.label,
+			isActive: index === currentStep,
+			isCompleted: index < currentStep,
+			animated
+		}, `${pattern}-${index}`))
+	});
+};
+//#endregion
+export { FootPlacementMarkers3D as default };
+
+//# sourceMappingURL=FootPlacementMarkers3D.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FootPlacementMarkers3D.js","names":[],"sources":["../../../../../src/components/screens/training/components/FootPlacementMarkers3D.tsx"],"sourcesContent":["/**\n * FootPlacementMarkers3D - 3D markers showing foot placement for footwork drills\n * \n * Renders visual indicators on the ground to guide footwork training,\n * showing target positions for Korean martial arts footwork patterns.\n * \n * @module components/screens/training/components/FootPlacementMarkers3D\n * @category Training 3D Components\n * @korean 발위치표시3D컴포넌트\n */\n\nimport { Html } from \"@react-three/drei\";\nimport { useFrame } from \"@react-three/fiber\";\nimport React, { useRef, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport { KOREAN_COLORS } from \"../../../../types/constants\";\nimport type { FootworkDrill } from \"./FootworkDrillsOverlayHtml\";\n\n/**\n * Footwork drill pattern types for 3D visualization\n * \n * Derived from FootworkDrill, excluding \"free_practice\" (which has no pattern),\n * and adding a \"none\" sentinel for cases with no active pattern.\n */\nexport type FootworkDrillPattern = \n  | Exclude<FootworkDrill, \"free_practice\">\n  | \"none\";\n\n/**\n * Props for FootPlacementMarkers3D component\n */\nexport interface FootPlacementMarkers3DProps {\n  /** Center position for the pattern */\n  readonly centerPosition?: [number, number, number];\n  /** Current drill pattern to display */\n  readonly pattern: FootworkDrillPattern;\n  /** Current step in pattern (0-based) */\n  readonly currentStep?: number;\n  /** Whether markers are visible */\n  readonly visible?: boolean;\n  /** Scale factor for markers */\n  readonly scale?: number;\n  /** Whether to animate markers */\n  readonly animated?: boolean;\n}\n\n/**\n * Generate footwork pattern positions\n * \n * @korean 보법패턴위치생성\n */\nfunction getPatternPositions(\n  pattern: FootworkDrillPattern,\n  center: [number, number, number]\n): Array<{ position: [number, number, number]; label: string }> {\n  const [cx, cy, cz] = center;\n  const radius = 2.0; // 2 meters radius for circular patterns\n  const stepDist = 0.3; // 30cm step distance\n\n  switch (pattern) {\n    case \"circular_left\":\n      // 4 positions in a circle (left rotation)\n      return [\n        { position: [cx + radius, cy, cz], label: \"1\" },\n        { position: [cx, cy, cz - radius], label: \"2\" },\n        { position: [cx - radius, cy, cz], label: \"3\" },\n        { position: [cx, cy, cz + radius], label: \"4\" },\n      ];\n\n    case \"circular_right\":\n      // 4 positions in a circle (right rotation)\n      return [\n        { position: [cx + radius, cy, cz], label: \"1\" },\n        { position: [cx, cy, cz + radius], label: \"2\" },\n        { position: [cx - radius, cy, cz], label: \"3\" },\n        { position: [cx, cy, cz - radius], label: \"4\" },\n      ];\n\n    case \"pivot_combo\":\n      // Pivot left and right positions\n      return [\n        { position: [cx, cy, cz], label: \"Start\" },\n        { position: [cx - 0.5, cy, cz + 0.5], label: \"Pivot L\" },\n        { position: [cx, cy, cz], label: \"Center\" },\n        { position: [cx + 0.5, cy, cz + 0.5], label: \"Pivot R\" },\n      ];\n\n    case \"triangle_step\":\n      // Triangle stepping pattern\n      return [\n        { position: [cx, cy, cz], label: \"Start\" },\n        { position: [cx, cy, cz - stepDist * 2], label: \"Forward\" },\n        { position: [cx + stepDist * 1.5, cy, cz], label: \"Right\" },\n        { position: [cx, cy, cz], label: \"Back\" },\n      ];\n\n    case \"slide_drill\":\n      // Four-direction slide pattern (cross shape)\n      return [\n        { position: [cx, cy, cz], label: \"Center\" },\n        { position: [cx, cy, cz - stepDist], label: \"Forward\" },\n        { position: [cx + stepDist, cy, cz], label: \"Right\" },\n        { position: [cx, cy, cz + stepDist], label: \"Back\" },\n        { position: [cx - stepDist, cy, cz], label: \"Left\" },\n      ];\n\n    case \"shuffle_practice\":\n      // Quick forward shuffles\n      return [\n        { position: [cx, cy, cz], label: \"Start\" },\n        { position: [cx, cy, cz - 0.15], label: \"Shuffle 1\" },\n        { position: [cx, cy, cz - 0.30], label: \"Shuffle 2\" },\n        { position: [cx, cy, cz - 0.45], label: \"Shuffle 3\" },\n      ];\n\n    case \"none\":\n    default:\n      return [];\n  }\n}\n\n/**\n * Single foot placement marker\n */\nconst FootMarker: React.FC<{\n  position: [number, number, number];\n  label: string;\n  isActive: boolean;\n  isCompleted: boolean;\n  animated: boolean;\n}> = ({ position, label, isActive, isCompleted, animated }) => {\n  const meshRef = useRef<THREE.Mesh>(null);\n  const ringRef = useRef<THREE.Mesh>(null);\n\n  // Pulsing animation for active marker\n  useFrame((state) => {\n    if (!animated) return;\n    \n    if (meshRef.current && isActive) {\n      const pulse = Math.sin(state.clock.elapsedTime * 3) * 0.1 + 1;\n      meshRef.current.scale.setScalar(pulse);\n    }\n\n    if (ringRef.current && isActive) {\n      const ringPulse = Math.sin(state.clock.elapsedTime * 2) * 0.2 + 1;\n      ringRef.current.scale.setScalar(ringPulse);\n    }\n  });\n\n  const markerColor = isCompleted\n    ? KOREAN_COLORS.ACCENT_GREEN\n    : isActive\n    ? KOREAN_COLORS.PRIMARY_CYAN\n    : KOREAN_COLORS.ACCENT_GOLD;\n\n  return (\n    <group position={position}>\n      {/* Ground circle marker */}\n      <mesh ref={meshRef} rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.01, 0]}>\n        <circleGeometry args={[0.2, 32]} />\n        <meshBasicMaterial\n          color={markerColor}\n          transparent\n          opacity={isActive ? 0.9 : 0.6}\n          side={THREE.DoubleSide}\n        />\n      </mesh>\n\n      {/* Outer ring */}\n      <mesh ref={ringRef} rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.02, 0]}>\n        <ringGeometry args={[0.2, 0.25, 32]} />\n        <meshBasicMaterial\n          color={markerColor}\n          transparent\n          opacity={isActive ? 0.7 : 0.4}\n          side={THREE.DoubleSide}\n        />\n      </mesh>\n\n      {/* Label */}\n      <Html\n        position={[0, 0.1, 0]}\n        center\n        style={{\n          pointerEvents: \"none\",\n          userSelect: \"none\",\n        }}\n      >\n        <div\n          style={{\n            fontSize: \"12px\",\n            fontWeight: \"bold\",\n            color: isActive ? \"#00ffff\" : \"#ffffff\",\n            textShadow: \"0 0 4px rgba(0,0,0,0.8)\",\n            background: \"rgba(0,0,0,0.6)\",\n            padding: \"2px 6px\",\n            borderRadius: \"4px\",\n          }}\n        >\n          {label}\n        </div>\n      </Html>\n\n      {/* Vertical beam for active marker */}\n      {isActive && (\n        <mesh position={[0, 0.5, 0]}>\n          <cylinderGeometry args={[0.02, 0.02, 1, 8]} />\n          <meshBasicMaterial\n            color={KOREAN_COLORS.PRIMARY_CYAN}\n            transparent\n            opacity={0.4}\n          />\n        </mesh>\n      )}\n    </group>\n  );\n};\n\n/**\n * FootPlacementMarkers3D Component\n * \n * Displays 3D foot placement markers on the ground for footwork drills,\n * with Korean martial arts-themed visual feedback.\n * \n * @korean 발위치표시3D\n */\nexport const FootPlacementMarkers3D: React.FC<FootPlacementMarkers3DProps> = ({\n  centerPosition = [5, 0, 0],\n  pattern,\n  currentStep = 0,\n  visible = true,\n  scale = 1.0,\n  animated = true,\n}) => {\n  const positions = useMemo(\n    () => getPatternPositions(pattern, centerPosition),\n    [pattern, centerPosition]\n  );\n\n  if (!visible || pattern === \"none\" || positions.length === 0) {\n    return null;\n  }\n\n  return (\n    <group scale={scale}>\n      {positions.map((marker, index) => (\n        <FootMarker\n          key={`${pattern}-${index}`}\n          position={marker.position}\n          label={marker.label}\n          isActive={index === currentStep}\n          isCompleted={index < currentStep}\n          animated={animated}\n        />\n      ))}\n    </group>\n  );\n};\n\nexport default FootPlacementMarkers3D;\n"],"mappings":"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"}

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

@@ -0,0 +1,47 @@
+/**
+ * FootworkDrillsOverlayHtml - Training component for footwork drills
+ *
+ * Provides specialized footwork training exercises for Korean martial arts
+ * footwork patterns (보법, Bobeop).
+ *
+ * @module components/screens/training/components/FootworkDrillsOverlayHtml
+ * @category Training Components
+ * @korean 보법훈련컴포넌트
+ */
+import React from "react";
+/**
+ * Footwork drill types for training
+ *
+ * @korean 보법훈련타입
+ */
+export type FootworkDrill = "circular_left" | "circular_right" | "pivot_combo" | "triangle_step" | "slide_drill" | "shuffle_practice" | "free_practice";
+/**
+ * Props for FootworkDrillsOverlayHtml component
+ */
+export interface FootworkDrillsOverlayHtmlProps {
+    /** Currently selected drill */
+    readonly currentDrill: FootworkDrill;
+    /** Callback when drill changes */
+    readonly onDrillChange: (drill: FootworkDrill) => void;
+    /** Current step in drill pattern (0-based) */
+    readonly currentStep: number;
+    /** Callback when drill step completes (optional, not yet implemented) */
+    readonly onStepComplete?: () => void;
+    /** Whether drill is currently active */
+    readonly isActive: boolean;
+    /** Callback to start/stop drill */
+    readonly onToggleActive: () => void;
+    /** Whether on mobile device */
+    readonly isMobile: boolean;
+}
+/**
+ * FootworkDrillsOverlayHtml Component
+ *
+ * Provides UI for footwork training drills with step-by-step guidance
+ * and Korean martial arts terminology.
+ *
+ * @korean 보법훈련UI컴포넌트
+ */
+export declare const FootworkDrillsOverlayHtml: React.NamedExoticComponent<FootworkDrillsOverlayHtmlProps>;
+export default FootworkDrillsOverlayHtml;
+//# sourceMappingURL=FootworkDrillsOverlayHtml.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FootworkDrillsOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/training/components/FootworkDrillsOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAIhE;;;;GAIG;AACH,MAAM,MAAM,aAAa,GACrB,eAAe,GACf,gBAAgB,GAChB,aAAa,GACb,eAAe,GACf,aAAa,GACb,kBAAkB,GAClB,eAAe,CAAC;AAiEpB;;GAEG;AACH,MAAM,WAAW,8BAA8B;IAC7C,+BAA+B;IAC/B,QAAQ,CAAC,YAAY,EAAE,aAAa,CAAC;IACrC,kCAAkC;IAClC,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACvD,8CAA8C;IAC9C,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,yEAAyE;IACzE,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC,wCAAwC;IACxC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,mCAAmC;IACnC,QAAQ,CAAC,cAAc,EAAE,MAAM,IAAI,CAAC;IACpC,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,yBAAyB,4DA2PpC,CAAC;AAIH,eAAe,yBAAyB,CAAC"}