3

src/App.tsx

@@ -7,6 +7,24 @@ import { PreviewStep } from './components/PreviewStep';
 import { parseShareUrl } from './utils/share'; 
 import { ChevronRight, ChevronLeft, Box, AlertTriangle } from 'lucide-react';
 
+// ВАЖНО: ErrorBoundary должен быть ЗДЕСЬ, снаружи компонента App
+class ErrorBoundary extends React.Component<{children: React.ReactNode}, {hasError: boolean}> {
+  state = { hasError: false };
+  static getDerivedStateFromError() { return { hasError: true }; }
+  render() {
+    if (this.state.hasError) return (
+      <div className="h-full flex flex-col items-center justify-center text-red-400">
+          <AlertTriangle size={32} className="mb-2"/>
+          <p>Ошибка отрисовки интерфейса.</p>
+          <button onClick={() => window.location.reload()} className="mt-4 px-4 py-2 bg-slate-800 rounded hover:bg-slate-700 transition-colors">
+              Перезагрузить
+          </button>
+      </div>
+    );
+    return this.props.children;
+  }
+}
+
 const App = () => {
   const [step, setStep] = useState(1);
   
@@ -37,7 +55,7 @@ const App = () => {
         window.history.replaceState({}, '', window.location.pathname);
       }
     } catch (e) {
-      console.error("URL error", e);
+      console.error("URL load error", e);
     }
   }, []);
 
@@ -49,22 +67,6 @@ const App = () => {
     }
   }, [config, splits]);
 
-  // Error Boundary
-  class ErrorBoundary extends React.Component<{children: React.ReactNode}, {hasError: boolean}> {
-    state = { hasError: false };
-    static getDerivedStateFromError() { return { hasError: true }; }
-    render() {
-      if (this.state.hasError) return (
-        <div className="flex flex-col items-center justify-center h-full text-red-400">
-            <AlertTriangle className="mb-2" size={32}/>
-            <p>Ошибка отрисовки.</p>
-            <button onClick={() => window.location.reload()} className="mt-4 px-4 py-2 bg-slate-800 rounded">Перезагрузить</button>
-        </div>
-      );
-      return this.props.children;
-    }
-  }
-
   return (
     <div className="h-screen flex flex-col font-sans text-gray-100 bg-slate-950 overflow-hidden">
       {/* Header */}
@@ -85,25 +87,24 @@ const App = () => {
         </div>
       </header>
 
-      {/* Main Content: flex-1 ensures it fills space, overflow-hidden prevents body scroll */}
-      <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-6 overflow-hidden flex flex-col min-h-0">
+      {/* Main Content */}
+      <main className="flex-1 w-full max-w-7xl mx-auto p-4 overflow-hidden flex flex-col min-h-0">
         {step === 1 && (
-            <div className="h-full overflow-y-auto animate-fade-in">
+            <div className="h-full overflow-y-auto animate-fade-in custom-scrollbar">
                 <ConfigStep config={config} onChange={setConfig} />
             </div>
         )}
         
         {step === 2 && (
-            <div className="h-full flex flex-col animate-fade-in">
+            <div className="h-full flex flex-col animate-fade-in min-h-0">
                 <ErrorBoundary>
-                    {/* УБРАН KEY, чтобы компонент не пересоздавался при каждом чихе */}
                     <LayoutStep config={config} splits={splits} onChange={setSplits} />
                 </ErrorBoundary>
             </div>
         )}
 
         {step === 3 && (
-            <div className="h-full flex flex-col animate-fade-in">
+            <div className="h-full flex flex-col animate-fade-in min-h-0">
                 <PreviewStep parts={parts} config={config} splits={splits} />
             </div>
         )}

src/components/LayoutStep.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState, useMemo } from 'react';
 import { AppConfig, LayoutSplits, Partition } from '../types';
-import { Grid, MousePointer2, Trash2, RotateCcw, X, Move, Settings2 } from 'lucide-react';
+// Добавил Settings, Move и прочее в импорты
+import { Grid, MousePointer2, Trash2, RotateCcw, X, Move, Settings, Plus } from 'lucide-react';
 
 interface Props {
   config: AppConfig;
@@ -24,11 +25,11 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
   const [dragging, setDragging] = useState<DragTarget | null>(null);
   const [isButtonHovered, setIsButtonHovered] = useState(false);
 
-  // Main Grid
+  // Main Grid Hover
   const [phantomMainAxis, setPhantomMainAxis] = useState<Axis | null>(null);
   const [hoveredMainSplit, setHoveredMainSplit] = useState<{ axis: Axis; index: number } | null>(null);
 
-  // Partitions
+  // Partition Hover
   const [hoveredCell, setHoveredCell] = useState<{ i: number; j: number } | null>(null);
   const [hoveredPartition, setHoveredPartition] = useState<{ id: string; cellKey: string } | null>(null);
   const [phantomPartition, setPhantomPartition] = useState<{ axis: Axis; offset: number; min: number; max: number } | null>(null);
@@ -60,39 +61,33 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
   };
   const selectedData = getSelectedPartition();
 
-  // -- LOGIC: Calculate T-Junction Limits --
-  // Вычисляет min/max для линии, чтобы она упиралась в ближайшие соседи
-  const calculateLimits = (lx: number, ly: number, axis: Axis, parts: Partition[]) => {
-      let min = 0;
-      let max = 1;
+  // -- LOGIC: T-Junction Limits --
+  // Находит ближайшие стенки, чтобы ограничить новую перегородку
+  const getHoveredBoundaries = (lx: number, ly: number, parts: Partition[]) => {
+      let minX = 0, maxX = 1;
+      let minY = 0, maxY = 1;
 
-      // Ищем ближайшие перпендикулярные стенки
       parts.forEach(p => {
-          if (p.axis === axis) return; // Нас интересуют только перпендикулярные
-
           const pMin = p.min ?? 0;
           const pMax = p.max ?? 1;
 
-          if (axis === 'x') {
-              // Мы рисуем Вертикальную (X). Ищем Горизонтальные (Y), которые мы пересекаем по X
-              // Горизонтальная стенка находится на высоте p.offset.
-              // Она занимает по ширине от pMin до pMax.
-              // Попадаем ли мы в ее ширину?
-              if (lx >= pMin && lx <= pMax) {
-                  if (p.offset < ly) min = Math.max(min, p.offset); // Стенка сверху
-                  if (p.offset > ly) max = Math.min(max, p.offset); // Стенка снизу
+          if (p.axis === 'x') {
+              // Вертикальная стенка (x=offset, y=min..max)
+              // Проверяем, находится ли мышь в её диапазоне по Y
+              if (ly >= pMin && ly <= pMax) {
+                  if (p.offset < lx) minX = Math.max(minX, p.offset);
+                  if (p.offset > lx) maxX = Math.min(maxX, p.offset);
               }
           } else {
-              // Мы рисуем Горизонтальную (Y). Ищем Вертикальные (X)
-              // Вертикальная на p.offset
-              // Занимает высоту pMin..pMax
-              if (ly >= pMin && ly <= pMax) {
-                  if (p.offset < lx) min = Math.max(min, p.offset); // Стенка слева
-                  if (p.offset > lx) max = Math.min(max, p.offset); // Стенка справа
+              // Горизонтальная стенка (y=offset, x=min..max)
+              // Проверяем, находится ли мышь в её диапазоне по X
+              if (lx >= pMin && lx <= pMax) {
+                  if (p.offset < ly) minY = Math.max(minY, p.offset);
+                  if (p.offset > ly) maxY = Math.min(maxY, p.offset);
               }
           }
       });
-      return { min, max };
+      return { minX, maxX, minY, maxY };
   };
 
   // -- ACTIONS --
@@ -108,6 +103,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
       height: config.drawer.height || 80,
       rounded: false
     };
+    // Обновляем стейт, но НЕ сбрасываем mode, так как ErrorBoundary теперь снаружи
     onChange({ ...splits, partitions: { ...safePartitions, [key]: [...current, newPart] } });
     setSelectedPartitionId(newPart.id);
   };
@@ -161,8 +157,11 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
         } else {
           newOffset = (ny - cellY1) / (cellY2 - cellY1);
         }
-        // Ограничитель, чтобы не вытащить за границы
-        newOffset = Math.max(0.01, Math.min(0.99, newOffset));
+        
+        // Ограничиваем в пределах "родительской" зоны (0-1) внутри ячейки
+        // В идеале тут тоже надо проверять коллизии, но пока просто границы ячейки
+        newOffset = Math.max(0.02, Math.min(0.98, newOffset));
+        
         if (!isNaN(newOffset)) {
           updatePartition(dragging.cellKey, dragging.id, { offset: newOffset });
         }
@@ -189,7 +188,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
       setPhantomPartition(null);
       setHoveredCell(null);
 
-      // 1. Find Cell
+      // 1. Находим ячейку
       let cellIdx = null;
       for (let i = 0; i < sortedX.length - 1; i++) {
         if (nx >= sortedX[i] && nx <= sortedX[i+1]) {
@@ -210,12 +209,10 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
         const cx1 = sortedX[cellIdx.i]; const cx2 = sortedX[cellIdx.i+1];
         const cy1 = sortedY[cellIdx.j]; const cy2 = sortedY[cellIdx.j+1];
         const cw = cx2 - cx1; const ch = cy2 - cy1;
-        
-        // Local coordinates
         const lx = (nx - cx1) / cw;
         const ly = (ny - cy1) / ch;
 
-        // 2. Check Hover Existing
+        // 2. Проверяем наведение на существующие (для удаления/выделения)
         let found = null;
         const SNAP = 0.05;
         for (const p of parts) {
@@ -230,20 +227,28 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
         if (found) {
           setHoveredPartition({ id: found.id, cellKey: key });
         } else {
-          // 3. Calc Phantom with T-Junctions
-          const distL = lx; const distR = 1 - lx;
-          const distT = ly; const distB = 1 - ly;
+          // 3. Вычисляем T-образные границы
+          const bounds = getHoveredBoundaries(lx, ly, parts);
+          
+          const distL = lx - bounds.minX; 
+          const distR = bounds.maxX - lx;
+          const distT = ly - bounds.minY; 
+          const distB = bounds.maxY - ly;
+          
           const minX = Math.min(distL, distR);
           const minY = Math.min(distT, distB);
           
-          const axis = minX < minY ? 'y' : 'x';
-          
-          // Рассчитываем min/max на основе пересечений
-          const { min, max } = calculateLimits(lx, ly, axis, parts);
+          // Определяем ось перпендикулярно ближайшей стороне
+          const axis = minX < minY ? 'y' : 'x'; 
           
           // Проверяем, есть ли место
-          if (max - min > 0.1) {
+          const width = bounds.maxX - bounds.minX;
+          const height = bounds.maxY - bounds.minY;
+          
+          if ((axis === 'y' && height > 0.1) || (axis === 'x' && width > 0.1)) {
              const offset = axis === 'x' ? lx : ly;
+             const min = axis === 'x' ? bounds.minY : bounds.minX;
+             const max = axis === 'x' ? bounds.maxY : bounds.maxX;
              setPhantomPartition({ axis, offset, min, max });
           }
         }
@@ -336,7 +341,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
               
               return (
                 <g key={p.id} onDoubleClick={(e) => { e.stopPropagation(); removePartition(key, p.id); }}>
-                  <line x1={lx1} y1={ly1} x2={lx2} y2={ly2} stroke="transparent" strokeWidth="40" />
+                  <line x1={lx1} y1={ly1} x2={lx2} y2={ly2} stroke="transparent" strokeWidth="30" />
                   <line x1={lx1} y1={ly1} x2={lx2} y2={ly2} stroke={isSel ? "#a855f7" : (isHov ? "#d8b4fe" : "#7e22ce")} strokeWidth={isSel ? 6 : 4} strokeLinecap="round" />
                 </g>
               );
@@ -370,7 +375,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
   return (
     <div className="bg-slate-900 p-4 rounded-xl shadow-lg border border-slate-800 h-full flex flex-col relative overflow-hidden">
       
-      {/* HEADER */}
+      {/* TOOLBAR */}
       <div className="flex justify-between items-center mb-2 z-20 shrink-0">
         <h2 className="text-lg font-bold flex items-center gap-2 text-primary">
           <Grid size={20} /> 2. Редактор макета
@@ -412,7 +417,8 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
       {/* WORKSPACE */}
       <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">
             <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"
+                <div 
+                    className="relative shadow-2xl bg-[#1e293b] border border-slate-600 rounded-sm overflow-hidden"
                     style={{ 
                         width: aspectRatio > 1 ? 'auto' : '100%',
                         height: aspectRatio > 1 ? '100%' : 'auto',
@@ -458,17 +464,18 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
                 </div>
             </div>
 
-            {/* --- SIDEBAR --- */}
+            {/* --- SIDEBAR FOR EDITING --- */}
             {mode === 'cells' && selectedData && (
                 <div className="absolute top-0 right-0 bottom-0 w-72 bg-slate-900 border-l border-slate-700 p-4 shadow-2xl flex flex-col z-30 animate-in slide-in-from-right duration-200">
                     <div className="flex justify-between items-center mb-6">
                         <h3 className="text-sm font-bold text-white flex items-center gap-2">
-                            <Settings2 size={16} className="text-purple-400"/> Настройки стенки
+                            <Settings size={16} className="text-purple-400"/> Настройки стенки
                         </h3>
                         <button onClick={() => setSelectedPartitionId(null)} className="text-gray-400 hover:text-white"><X size={20}/></button>
                     </div>
 
                     <div className="bg-slate-800 p-4 rounded border border-slate-700 space-y-6">
+                        {/* Height */}
                         <div>
                             <div className="flex justify-between text-xs text-gray-300 mb-2">
                                 <span>Высота</span> <span className="font-mono bg-slate-900 px-1.5 py-0.5 rounded text-xs">{selectedData.part.height} мм</span>
@@ -479,6 +486,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
                             />
                         </div>
 
+                        {/* Rounded */}
                         <div className="flex items-center justify-between">
                             <label htmlFor="rounded-check" className="text-xs text-gray-300 cursor-pointer select-none">Скруглить края</label>
                             <input type="checkbox" id="rounded-check" checked={selectedData.part.rounded}
@@ -487,6 +495,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
                             />
                         </div>
 
+                        {/* Delete */}
                         <button 
                             onClick={() => removePartition(selectedData.key, selectedData.part.id)}
                             className="w-full py-2 bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/30 rounded text-xs flex items-center justify-center gap-2 transition-colors mt-4"

src/services/geometryGenerator.ts

@@ -101,7 +101,6 @@ export const createBinGeometry = (
   partitions.forEach(p => {
       const pMin = p.min ?? 0;
       const pMax = p.max ?? 1;
-      
       const lengthRatio = pMax - pMin;
       const midRatio = pMin + (lengthRatio / 2);