Fix build

src/components/LayoutStep.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useMemo, useEffect } from 'react';
+import React, { useRef, useState, useMemo } from 'react';
 import { AppConfig, LayoutSplits, Partition } from '../types';
 import { Grid, MousePointer2, Trash2, RotateCcw, X, Move, Settings2 } from 'lucide-react';
 
@@ -18,7 +18,6 @@ type DragTarget =
 
 export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
   const svgRef = useRef<SVGSVGElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
   
   const [mode, setMode] = useState<EditMode>('lines');
   
@@ -148,9 +147,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
     // --- HOVER LOGIC: MAIN LINES ---
     if (mode === 'lines') {
         setHoveredMainSplit(null);
-        const SNAP = 0.015; // Чувствительность
-        // Check hover existing
-        // (Logic handled in individual line elements via onMouseMove to simplify global handler)
+        const SNAP = 0.015; 
         
         // Phantom Line
         if (nx > SNAP && nx < 1-SNAP && ny > SNAP && ny < 1-SNAP) {
@@ -210,9 +207,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
             if (foundPart) {
                 setHoveredPartition({ id: foundPart.id, cellKey: key });
             } else {
-                // Show Phantom Partition based on movement direction logic
-                // If moving more horizontally -> vertical split. Moving vertically -> horizontal split.
-                // Simplified: Distance to edges
+                // Show Phantom Partition
                 const distLeft = lx; const distRight = 1 - lx;
                 const distTop = ly; const distBottom = 1 - ly;
                 const minX = Math.min(distLeft, distRight);
@@ -266,6 +261,13 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
     }
   };
 
+  const handleMainSplitHover = (e: React.MouseEvent, axis: Axis, index: number) => {
+      if (mode !== 'lines' || dragging) return;
+      e.stopPropagation();
+      setHoveredMainSplit({ axis, index });
+      setPhantomMainAxis(null);
+  };
+
   return (
     <div className="bg-slate-900 p-4 rounded-xl shadow-lg border border-slate-800 h-full flex flex-col relative overflow-hidden">
       
@@ -297,13 +299,13 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
           {mode === 'lines' ? (
               <div className="flex gap-3">
                   <span><b className="text-blue-400">ЛКМ:</b> Создать/Тянуть линию</span>
-                  <span><b className="text-red-400">2xЛКМ / ПКМ:</b> Удалить</span>
+                  <span><b className="text-red-400">ПКМ:</b> Удалить</span>
               </div>
           ) : (
               <div className="flex gap-3">
                   <span><b className="text-green-400">ЛКМ в ячейке:</b> Создать перегородку</span>
                   <span><b className="text-purple-400">Драг:</b> Двигать</span>
-                  <span><b className="text-red-400">2xЛКМ:</b> Удалить</span>
+                  <span><b className="text-red-400">ПКМ:</b> Удалить</span>
               </div>
           )}
       </div>
@@ -312,7 +314,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
       <div className="flex-1 bg-slate-800/30 rounded-lg flex flex-col items-center justify-center relative overflow-hidden border border-slate-700/50 min-h-0 w-full">
             
             {/* SVG Container - FILLS SPACE BUT KEEPS ASPECT RATIO */}
-            <div ref={containerRef} className="relative w-full h-full flex items-center justify-center p-4">
+            <div className="relative w-full h-full flex items-center justify-center p-4">
                 <div 
                     className="relative shadow-2xl bg-[#1e293b] border border-slate-600 rounded-sm overflow-hidden"
                     style={{ 
@@ -330,8 +332,8 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
                       ref={svgRef} 
                       viewBox={`0 0 ${viewBoxW} ${viewBoxH}`} 
                       className="w-full h-full touch-none block"
-                      preserveAspectRatio="none" // Важно: растягиваем SVG на весь div
-                      onMouseMove={handleGlobalMouseMove} 
+                      preserveAspectRatio="none"
+                      onMouseMove={handleMouseMove} 
                       onMouseDown={handleMouseDown} 
                       onMouseUp={() => setDragging(null)} 
                       onMouseLeave={() => setDragging(null)} 
@@ -399,7 +401,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
                                           );
                                       })}
 
-                                      {/* Фантомная перегородка (только если наведена мышь на ячейку и нет перегородки под курсором) */}
+                                      {/* Фантомная перегородка */}
                                       {isHovered && phantomPartition && !hoveredPartition && !dragging && (
                                           <g className="pointer-events-none opacity-60">
                                               {phantomPartition.axis === 'x' ? (