UI/UX Overhaul: v3.1 - Enhanced Drag & Drop, Compact Status Bar, and Interaction Improvements

src/App.jsx

@@ -9,6 +9,7 @@ const dist = (p1, p2) => Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2
  * Gets the closest point on a line segment [a, b] from point p.
  */
 const getClosestPointOnSegment = (p, a, b) => {
+  if (!a || !b) return { x: 0, y: 0 };
   const l2 = Math.pow(dist(a, b), 2);
   if (l2 === 0) return a;
   let t = ((p.x - a.x) * (b.x - a.x) + (p.y - a.y) * (b.y - a.y)) / l2;
@@ -27,7 +28,7 @@ const getRandomColor = () => {
 };
 
 // --- Magnifier Component ---
-function Magnifier({ imgUrl, regions, selectedId, mousePos, side, imgSize, focusModeB, hoveredPoint }) {
+function Magnifier({ imgUrl, regions, selectedId, mousePos, side, imgSize, focusModeB, hoveredPoint, draggingPoint }) {
   if (!imgUrl || !mousePos || mousePos.side !== side) return null;
 
   const zoom = 2.5;
@@ -85,13 +86,15 @@ function Magnifier({ imgUrl, regions, selectedId, mousePos, side, imgSize, focus
                 }}
               />
               {localPoints.map((p, idx) => {
-                const isHovered = hoveredPoint?.regionId === reg.id && hoveredPoint?.index === idx;
+                const isDragging = draggingPoint?.regionId === reg.id && draggingPoint?.index === idx && draggingPoint.side === side;
+                const isHovered = !draggingPoint && hoveredPoint?.regionId === reg.id && hoveredPoint?.index === idx;
+
                 return (
                   <circle
                     key={idx}
                     cx={p.x} cy={p.y}
-                    r={isSelected ? 4 : 2}
-                    fill={isHovered ? '#00ffff' : (isSelected ? '#fff' : reg.color)}
+                    r={isSelected ? 3.5 : 1.5}
+                    fill={(isDragging || isHovered) ? '#00ffff' : (isSelected ? '#fff' : reg.color)}
                     stroke="#000"
                     strokeWidth={0.5}
                   />
@@ -118,6 +121,8 @@ export default function App() {
   const [imgB, setImgB] = useState(null);
   const [imgSizeA, setImgSizeA] = useState({ width: 0, height: 0 });
   const [imgSizeB, setImgSizeB] = useState({ width: 0, height: 0 });
+  const [isDragOverA, setIsDragOverA] = useState(false);
+  const [isDragOverB, setIsDragOverB] = useState(false);
 
   const [regions, setRegions] = useState([]);
   const [selectedRegionId, setSelectedRegionId] = useState(null);
@@ -137,9 +142,8 @@ export default function App() {
 
   const selectedRegion = regions.find(r => r.id === selectedRegionId);
 
-  const handleImageUpload = (e, side) => {
-    const file = e.target.files[0];
-    if (file) {
+  const processImageFile = (file, side) => {
+    if (file && file.type.startsWith('image/')) {
       const url = URL.createObjectURL(file);
       const img = new Image();
       img.onload = () => {
@@ -155,6 +159,28 @@ export default function App() {
     }
   };
 
+  const handleImageUpload = (e, side) => {
+    const file = e.target.files[0];
+    processImageFile(file, side);
+  };
+
+  const handleDrop = (e, side) => {
+    e.preventDefault();
+    side === 'A' ? setIsDragOverA(false) : setIsDragOverB(false);
+    const file = e.dataTransfer.files[0];
+    processImageFile(file, side);
+  };
+
+  const handleDragOver = (e, side) => {
+    e.preventDefault();
+    side === 'A' ? setIsDragOverA(true) : setIsDragOverB(true);
+  };
+
+  const handleDragLeave = (e, side) => {
+    e.preventDefault();
+    side === 'A' ? setIsDragOverA(false) : setIsDragOverB(false);
+  };
+
   const handleJsonUpload = (e) => {
     const file = e.target.files[0];
     if (!file) return;
@@ -189,6 +215,8 @@ export default function App() {
   const deleteRegion = (id) => {
     setRegions(regions.filter(r => r.id !== id));
     if (selectedRegionId === id) setSelectedRegionId(null);
+    setHoveredPoint(null);
+    setHoveredEdge(null);
   };
 
   const handlePointMouseDown = (e, side, regionId, index) => {
@@ -216,26 +244,31 @@ export default function App() {
       side
     });
 
-    if (draggingPoint && draggingPoint.side === side) {
-      setRegions(prev => prev.map(r => {
-        if (r.id === draggingPoint.regionId) {
-          const key = side === 'A' ? 'pointsA' : 'pointsB';
-          const newPts = [...r[key]];
-          newPts[draggingPoint.index] = mousePos;
-          return { ...r, [key]: newPts };
-        }
-        return r;
-      }));
+    if (draggingPoint) {
+      if (draggingPoint.side === side) {
+        setRegions(prev => prev.map(r => {
+          if (r.id === draggingPoint.regionId) {
+            const key = side === 'A' ? 'pointsA' : 'pointsB';
+            const newPts = [...r[key]];
+            newPts[draggingPoint.index] = mousePos;
+            return { ...r, [key]: newPts };
+          }
+          return r;
+        }));
+      }
+      setHoveredPoint(null);
+      setHoveredEdge(null);
       return;
     }
 
     if (selectedRegionId) {
       const region = regions.find(r => r.id === selectedRegionId);
+      if (!region) return;
       const points = side === 'A' ? region.pointsA : region.pointsB;
 
       let foundPt = null;
       for (let i = 0; i < points.length; i++) {
-        if (dist(mousePos, points[i]) < 0.03) {
+        if (dist(mousePos, points[i]) < 0.025) {
           foundPt = { regionId: region.id, index: i };
           break;
         }
@@ -246,24 +279,48 @@ export default function App() {
         setHoveredEdge(null);
       } else {
         setHoveredPoint(null);
-        let foundEdge = null;
+
+        let minD = Infinity;
+        let closestEdgeIdx = -1;
+        let closestProj = null;
+
         for (let i = 0; i < points.length; i++) {
           const p1 = points[i];
           const p2 = points[(i + 1) % points.length];
           const d = distToSegment(mousePos, p1, p2);
-          if (d < 0.025) {
-            const projPoint = getClosestPointOnSegment(mousePos, p1, p2);
-            foundEdge = { regionId: region.id, index: i, side, point: projPoint };
-            break;
+          if (d < minD) {
+            minD = d;
+            closestEdgeIdx = i;
+            closestProj = getClosestPointOnSegment(mousePos, p1, p2);
           }
         }
-        setHoveredEdge(foundEdge);
+
+        if (closestEdgeIdx !== -1) {
+          setHoveredEdge({
+            regionId: region.id,
+            index: closestEdgeIdx,
+            side,
+            point: closestProj,
+            isClose: minD < 0.025
+          });
+        } else {
+          setHoveredEdge(null);
+        }
       }
+    } else {
+      setHoveredPoint(null);
+      setHoveredEdge(null);
     }
   };
 
   const handleMouseUp = () => setDraggingPoint(null);
-  const handleMouseLeave = () => setMagnifierPos(null);
+  const handleMouseLeave = () => {
+    setMagnifierPos(null);
+    if (!draggingPoint) {
+      setHoveredEdge(null);
+      setHoveredPoint(null);
+    }
+  };
 
   const handleDownloadResult = () => {
     const canvas = canvasPreviewRef.current;
@@ -281,21 +338,27 @@ export default function App() {
       if (key === 'z') setIsZPressed(true);
 
       if (key === 'a' && hoveredEdge) {
-        const { regionId, index, side, point } = hoveredEdge;
+        const { regionId, index, side, point, isClose } = hoveredEdge;
         setRegions(prev => prev.map(r => {
           if (r.id === regionId) {
             const newPointsA = [...r.pointsA];
             const newPointsB = [...r.pointsB];
+
+            // Check index safety
+            if (index >= newPointsA.length || index >= newPointsB.length) return r;
+
             let finalPtA, finalPtB;
+
             if (side === 'A') {
-              finalPtA = point;
+              finalPtA = isClose ? point : { x: (newPointsA[index].x + newPointsA[(index + 1) % newPointsA.length].x) / 2, y: (newPointsA[index].y + newPointsA[(index + 1) % newPointsA.length].y) / 2 };
               const b1 = newPointsB[index], b2 = newPointsB[(index + 1) % newPointsB.length];
               finalPtB = { x: (b1.x + b2.x) / 2, y: (b1.y + b2.y) / 2 };
             } else {
-              finalPtB = point;
+              finalPtB = isClose ? point : { x: (newPointsB[index].x + newPointsB[(index + 1) % newPointsB.length].x) / 2, y: (newPointsB[index].y + newPointsB[(index + 1) % newPointsB.length].y) / 2 };
               const a1 = newPointsA[index], a2 = newPointsA[(index + 1) % newPointsA.length];
               finalPtA = { x: (a1.x + a2.x) / 2, y: (a1.y + a2.y) / 2 };
             }
+
             newPointsA.splice(index + 1, 0, finalPtA);
             newPointsB.splice(index + 1, 0, finalPtB);
             return { ...r, pointsA: newPointsA, pointsB: newPointsB };
@@ -332,21 +395,17 @@ export default function App() {
     };
   }, [hoveredEdge, hoveredPoint]);
 
-  // --- Texture Mapping Core (Improved Ear Clipping) ---
+  // --- Triangulation logic ---
   const triangulate = (points) => {
     if (points.length < 3) return [];
     const indices = points.map((_, i) => i);
     const result = [];
-
-    // Signed area for orientation
     let area = 0;
     for (let i = 0; i < points.length; i++) {
-      const p1 = points[i];
-      const p2 = points[(i + 1) % points.length];
+      const p1 = points[i], p2 = points[(i + 1) % points.length];
       area += (p2.x - p1.x) * (p2.y + p1.y);
     }
     const clockwise = area > 0;
-
     const isPointInTriangle = (p, a, b, c) => {
       const areaOrig = Math.abs((b.x - a.x) * (c.y - a.y) - (c.x - a.x) * (b.y - a.y));
       const area1 = Math.abs((a.x - p.x) * (b.y - p.y) - (b.x - p.x) * (a.y - p.y));
@@ -354,42 +413,28 @@ export default function App() {
       const area3 = Math.abs((c.x - p.x) * (a.y - p.y) - (a.x - p.x) * (c.y - p.y));
       return Math.abs(area1 + area2 + area3 - areaOrig) < 0.0001;
     };
-
     const isConvex = (pPrev, pCurr, pNext) => {
       const val = (pCurr.x - pPrev.x) * (pNext.y - pPrev.y) - (pCurr.y - pPrev.y) * (pNext.x - pPrev.x);
       return clockwise ? val < 0 : val > 0;
     };
-
     let limit = points.length * 10;
     while (indices.length > 3 && limit > 0) {
       limit--;
       let earFound = false;
       for (let i = 0; i < indices.length; i++) {
-        const prevIdx = indices[(i + indices.length - 1) % indices.length];
-        const currIdx = indices[i];
-        const nextIdx = indices[(i + 1) % indices.length];
-
-        const pPrev = points[prevIdx];
-        const pCurr = points[currIdx];
-        const pNext = points[nextIdx];
-
+        const prevIdx = indices[(i + indices.length - 1) % indices.length], currIdx = indices[i], nextIdx = indices[(i + 1) % indices.length];
+        const pPrev = points[prevIdx], pCurr = points[currIdx], pNext = points[nextIdx];
         if (!isConvex(pPrev, pCurr, pNext)) continue;
-
         let hasPointInside = false;
         for (let j = 0; j < indices.length; j++) {
           const pIdx = indices[j];
           if (pIdx === prevIdx || pIdx === currIdx || pIdx === nextIdx) continue;
           if (isPointInTriangle(points[pIdx], pPrev, pCurr, pNext)) {
-            hasPointInside = true;
-            break;
+            hasPointInside = true; break;
           }
         }
-
         if (!hasPointInside) {
-          result.push(prevIdx, currIdx, nextIdx);
-          indices.splice(i, 1);
-          earFound = true;
-          break;
+          result.push(prevIdx, currIdx, nextIdx); indices.splice(i, 1); earFound = true; break;
         }
       }
       if (!earFound) break;
@@ -400,16 +445,13 @@ export default function App() {
 
   const drawMapping = useCallback(() => {
     if (!previewMode || !imgA || !imgB || !canvasPreviewRef.current) return;
-    const canvas = canvasPreviewRef.current;
-    const ctx = canvas.getContext('2d');
-    const imageA = new Image();
-    const imageB = new Image();
+    const canvas = canvasPreviewRef.current, ctx = canvas.getContext('2d');
+    const imageA = new Image(), imageB = new Image();
     let loaded = 0;
     const onLoad = () => {
       loaded++;
       if (loaded === 2) {
-        canvas.width = imageA.width;
-        canvas.height = imageA.height;
+        canvas.width = imageA.width; canvas.height = imageA.height;
         ctx.drawImage(imageA, 0, 0);
         regions.forEach(region => {
           if (region.pointsA.length < 3) return;
@@ -430,9 +472,7 @@ export default function App() {
 
   const drawTriangle = (ctx, img, p0, p1, p2, t0, t1, t2) => {
     ctx.save();
-    ctx.beginPath();
-    ctx.moveTo(p0.x, p0.y); ctx.lineTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.closePath();
-    ctx.clip();
+    ctx.beginPath(); ctx.moveTo(p0.x, p0.y); ctx.lineTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.closePath(); ctx.clip();
     const delta = (t0.x - t2.x) * (t1.y - t2.y) - (t1.x - t2.x) * (t0.y - t2.y);
     if (Math.abs(delta) < 0.001) { ctx.restore(); return; }
     const a = ((p0.x - p2.x) * (t1.y - t2.y) - (p1.x - p2.x) * (t0.y - t2.y)) / delta;
@@ -441,9 +481,7 @@ export default function App() {
     const d = ((t0.x - t2.x) * (p1.y - p2.y) - (t1.x - t2.x) * (p0.y - p2.y)) / delta;
     const e = p2.x - a * t2.x - c * t2.y;
     const f = p2.y - b * t2.x - d * t2.y;
-    ctx.setTransform(a, b, c, d, e, f);
-    ctx.drawImage(img, 0, 0);
-    ctx.restore();
+    ctx.setTransform(a, b, c, d, e, f); ctx.drawImage(img, 0, 0); ctx.restore();
   };
 
   const renderSVG = (side) => {
@@ -460,44 +498,48 @@ export default function App() {
 
           return (
             <g key={r.id}>
+              {/* Defensive check for hoveredEdge index safety */}
+              {isSelected && hoveredEdge && hoveredEdge.side === side && points[hoveredEdge.index] && (
+                <line
+                  x1={points[hoveredEdge.index].x * 100} y1={points[hoveredEdge.index].y * 100}
+                  x2={points[(hoveredEdge.index + 1) % points.length].x * 100} y2={points[(hoveredEdge.index + 1) % points.length].y * 100}
+                  stroke="#00ffff" strokeWidth="2" strokeOpacity="0.9" vectorEffect="non-scaling-stroke"
+                />
+              )}
+
               <polygon
                 points={polyStr}
                 className="pointer-events-auto cursor-pointer"
                 onMouseDown={() => setSelectedRegionId(r.id)}
                 style={{
-                  fill: r.color,
-                  fillOpacity: isSelected ? 0.35 : 0.1,
-                  stroke: isSelected ? '#fff' : r.color,
-                  strokeWidth: isSelected ? 1 : 0.5,
+                  fill: r.color, fillOpacity: isSelected ? 0.35 : 0.1,
+                  stroke: isSelected ? '#fff' : r.color, strokeWidth: isSelected ? 1 : 0.5,
                   vectorEffect: 'non-scaling-stroke'
                 }}
               />
               {points.map((p, idx) => {
-                const isHoveredOrDragging = (hoveredPoint?.regionId === r.id && hoveredPoint?.index === idx) ||
-                  (draggingPoint?.regionId === r.id && draggingPoint?.index === idx && draggingPoint.side === side);
+                const isDragging = draggingPoint?.regionId === r.id && draggingPoint?.index === idx && draggingPoint.side === side;
+                const isHovered = !draggingPoint && hoveredPoint?.regionId === r.id && hoveredPoint?.index === idx;
 
-                // Point size logic: increased selected point size by 0.25
                 const finalRadius = isSelected ? 0.75 : 0.25;
 
                 return (
                   <circle
-                    key={idx}
-                    cx={p.x * 100} cy={p.y * 100}
-                    r={finalRadius}
+                    key={idx} cx={p.x * 100} cy={p.y * 100} r={finalRadius}
                     className="pointer-events-auto cursor-move"
                     onMouseDown={(e) => handlePointMouseDown(e, side, r.id, idx)}
                     style={{
-                      fill: isHoveredOrDragging ? '#00ffff' : (isSelected ? '#fff' : r.color),
-                      stroke: isHoveredOrDragging ? '#fff' : '#000',
-                      strokeWidth: 0.2,
-                      vectorEffect: 'non-scaling-stroke'
+                      fill: (isDragging || isHovered) ? '#00ffff' : (isSelected ? '#fff' : r.color),
+                      stroke: (isDragging || isHovered) ? '#fff' : '#000',
+                      strokeWidth: 0.2, vectorEffect: 'non-scaling-stroke'
                     }}
                   />
                 );
               })}
-              {isSelected && hoveredEdge && hoveredEdge.side === side && (
+              {/* Ghost point preview */}
+              {isSelected && hoveredEdge && hoveredEdge.side === side && hoveredEdge.isClose && (
                 <circle cx={hoveredEdge.point.x * 100} cy={hoveredEdge.point.y * 100} r={1.2}
-                  style={{ fill: '#fff', stroke: '#00e5ff', strokeWidth: 0.5, vectorEffect: 'non-scaling-stroke', filter: 'drop-shadow(0 0 2px rgba(0,229,255,0.8))' }}
+                  style={{ fill: '#fff', stroke: '#00ffff', strokeWidth: 0.5, vectorEffect: 'non-scaling-stroke', filter: 'drop-shadow(0 0 2px rgba(0,255,255,0.8))' }}
                 />
               )}
             </g>
@@ -514,7 +556,7 @@ export default function App() {
           <div className="p-2.5 bg-indigo-600 rounded-xl shadow-lg shadow-indigo-500/20"><Target size={22} /></div>
           <div>
             <h1 className="text-lg font-black tracking-tighter leading-none italic">UV WRAPPER</h1>
-            <span className="text-[9px] text-indigo-400 font-bold uppercase tracking-[0.3em]">Mapping Engine v2.8</span>
+            <span className="text-[9px] text-indigo-400 font-bold uppercase tracking-[0.3em]">Mapping Engine v3.1</span>
           </div>
         </div>
 
@@ -547,7 +589,10 @@ export default function App() {
       <main className="flex-1 flex overflow-hidden relative">
         {!previewMode ? (
           <>
-            <div className="flex-1 flex flex-col border-r border-white/5 bg-[#080808]">
+            <div
+              className={`flex-1 flex flex-col border-r border-white/5 bg-[#080808] transition-colors ${isDragOverA ? 'bg-indigo-900/10' : ''}`}
+              onDragOver={(e) => handleDragOver(e, 'A')} onDragLeave={(e) => handleDragLeave(e, 'A')} onDrop={(e) => handleDrop(e, 'A')}
+            >
               <div className="p-3 text-center text-[10px] font-black text-zinc-600 uppercase tracking-[0.4em] bg-zinc-900/40 flex items-center justify-center gap-2">
                 <Target size={12} /> Target Canvas (A)
               </div>
@@ -555,84 +600,76 @@ export default function App() {
                 {!imgA ? (
                   <label className="flex flex-col items-center gap-4 cursor-pointer p-12 border-2 border-dashed border-zinc-800 rounded-3xl hover:bg-zinc-900/50 transition-all">
                     <Upload className="text-zinc-700" size={40} />
-                    <span className="text-zinc-500 font-bold">Upload UV Target</span>
+                    <span className="text-zinc-500 font-bold text-center">Upload or Drag UV Target</span>
                     <input type="file" className="hidden" onChange={(e) => handleImageUpload(e, 'A')} />
                   </label>
                 ) : (
-                  <div className="relative inline-block shadow-2xl border border-white/5"
-                    onMouseMove={(e) => handleMouseMove(e, 'A')}
-                    onMouseLeave={handleMouseLeave}
-                  >
+                  <div className="relative inline-block shadow-2xl border border-white/5" onMouseMove={(e) => handleMouseMove(e, 'A')} onMouseLeave={handleMouseLeave}>
                     <img ref={imgRefA} src={imgA} className="max-w-full max-h-[72vh] block select-none rounded-sm" draggable={false} />
                     {renderSVG('A')}
-                    {isZPressed && <Magnifier imgUrl={imgA} regions={regions} selectedId={selectedRegionId} mousePos={magnifierPos} side="A" imgSize={imgSizeA} focusModeB={focusModeB} hoveredPoint={hoveredPoint} />}
+                    {isZPressed && <Magnifier imgUrl={imgA} regions={regions} selectedId={selectedRegionId} mousePos={magnifierPos} side="A" imgSize={imgSizeA} focusModeB={focusModeB} hoveredPoint={hoveredPoint} draggingPoint={draggingPoint} />}
                   </div>
                 )}
               </div>
             </div>
 
-            <div className="flex-1 flex flex-col bg-[#0b0b0b]">
+            <div
+              className={`flex-1 flex flex-col bg-[#0b0b0b] transition-colors ${isDragOverB ? 'bg-indigo-900/10' : ''}`}
+              onDragOver={(e) => handleDragOver(e, 'B')} onDragLeave={(e) => handleDragLeave(e, 'B')} onDrop={(e) => handleDrop(e, 'B')}
+            >
               <div className="p-2 px-4 flex items-center justify-between bg-zinc-900/40">
                 <span className="text-[10px] font-black text-zinc-600 uppercase tracking-[0.4em] flex items-center gap-2"><Search size={12} /> Source Texture (B)</span>
                 <button
                   onClick={() => setFocusModeB(!focusModeB)}
                   className={`flex items-center gap-2 px-4 py-1 rounded-full text-[10px] font-black tracking-widest transition-all border ${focusModeB ? 'bg-indigo-600 border-indigo-500 text-white shadow-lg shadow-indigo-600/30' : 'bg-zinc-800 border-white/5 text-zinc-500'}`}
                 >
-                  <MousePointer2 size={12} />
-                  Focus Mode: {focusModeB ? 'ON' : 'OFF'}
+                  <MousePointer2 size={12} /> Focus Mode: {focusModeB ? 'ON' : 'OFF'}
                 </button>
               </div>
               <div className="flex-1 relative flex items-center justify-center p-12 overflow-hidden bg-[radial-gradient(circle_at_center,_#141414_0%,_#0b0b0b_100%)]">
                 {!imgB ? (
                   <label className="flex flex-col items-center gap-4 cursor-pointer p-12 border-2 border-dashed border-zinc-800 rounded-3xl hover:bg-zinc-900/50 transition-all">
                     <Upload className="text-zinc-700" size={40} />
-                    <span className="text-zinc-500 font-bold">Upload Source Drawing</span>
+                    <span className="text-zinc-500 font-bold text-center">Upload or Drag Source Drawing</span>
                     <input type="file" className="hidden" onChange={(e) => handleImageUpload(e, 'B')} />
                   </label>
                 ) : (
-                  <div className="relative inline-block shadow-2xl border border-white/5"
-                    onMouseMove={(e) => handleMouseMove(e, 'B')}
-                    onMouseLeave={handleMouseLeave}
-                  >
+                  <div className="relative inline-block shadow-2xl border border-white/5" onMouseMove={(e) => handleMouseMove(e, 'B')} onMouseLeave={handleMouseLeave}>
                     <img ref={imgRefB} src={imgB} className="max-w-full max-h-[72vh] block select-none rounded-sm" draggable={false} />
                     {renderSVG('B')}
-                    {isZPressed && <Magnifier imgUrl={imgB} regions={regions} selectedId={selectedRegionId} mousePos={magnifierPos} side="B" imgSize={imgSizeB} focusModeB={focusModeB} hoveredPoint={hoveredPoint} />}
+                    {isZPressed && <Magnifier imgUrl={imgB} regions={regions} selectedId={selectedRegionId} mousePos={magnifierPos} side="B" imgSize={imgSizeB} focusModeB={focusModeB} hoveredPoint={hoveredPoint} draggingPoint={draggingPoint} />}
                   </div>
                 )}
               </div>
             </div>
 
-            {/* Bottom Status Bar */}
-            <div className="absolute bottom-8 left-1/2 -translate-x-1/2 px-10 py-5 bg-[#111]/90 backdrop-blur-xl rounded-[2rem] border border-white/10 flex gap-12 items-center shadow-2xl z-40">
-              <div className="flex items-center gap-5 pr-10 border-r border-white/10">
-                <div className="text-[9px] font-black text-zinc-500 uppercase tracking-widest">Selection</div>
+            {/* Bottom Status Bar - Scaled Down */}
+            <div className="absolute bottom-5 left-1/2 -translate-x-1/2 px-5 py-2 bg-[#111]/90 backdrop-blur-xl rounded-xl border border-white/10 flex gap-6 items-center shadow-2xl z-40 transform scale-90 origin-bottom">
+              <div className="flex items-center gap-3 pr-6 border-r border-white/10">
+                <div className="text-[8px] font-black text-zinc-500 uppercase tracking-widest">Active</div>
                 {selectedRegion ? (
-                  <div className="flex items-center gap-4">
-                    <div className="w-6 h-6 rounded-full shadow-lg border-2 border-white/20" style={{ backgroundColor: selectedRegion.color }} />
-                    <span className="text-sm font-black tracking-tight">{selectedRegion.name}</span>
-                    <button onClick={() => deleteRegion(selectedRegionId)} className="p-2 text-zinc-600 hover:text-red-400 hover:bg-red-400/10 rounded-full transition-all"><Trash2 size={16} /></button>
+                  <div className="flex items-center gap-2.5">
+                    <div className="w-3.5 h-3.5 rounded-full shadow border border-white/20" style={{ backgroundColor: selectedRegion.color }} />
+                    <span className="text-[11px] font-black tracking-tight">{selectedRegion.name}</span>
+                    <button onClick={(e) => { e.stopPropagation(); deleteRegion(selectedRegionId); }} className="p-1 text-zinc-600 hover:text-red-400 rounded-full transition-all"><Trash2 size={13} /></button>
                   </div>
                 ) : (
-                  <span className="text-sm font-bold text-zinc-700 italic">No Active Selection</span>
+                  <span className="text-[11px] font-bold text-zinc-700 italic">None Selected</span>
                 )}
               </div>
 
-              <div className="flex gap-8 items-center text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em]">
-                <div className="flex items-center gap-2"><kbd className="px-2 py-1 bg-zinc-800 rounded-md border border-white/5 text-white">Z</kbd> Hold for Magnifier</div>
-                <div className="flex items-center gap-2"><kbd className="px-2 py-1 bg-zinc-800 rounded-md border border-white/5 text-white">A</kbd> Add Point</div>
-                <div className="flex items-center gap-2"><kbd className="px-2 py-1 bg-zinc-800 rounded-md border border-white/5 text-white">D</kbd> Delete Point</div>
+              <div className="flex gap-5 items-center text-[9px] font-bold text-zinc-500 uppercase tracking-[0.2em]">
+                <div className="flex items-center gap-2"><kbd className="px-1.5 py-0.5 bg-zinc-800 rounded border border-white/5 text-white">Z</kbd> Magnifier</div>
+                <div className="flex items-center gap-2"><kbd className="px-1.5 py-0.5 bg-zinc-800 rounded border border-white/5 text-white">A</kbd> Add Point</div>
+                <div className="flex items-center gap-2"><kbd className="px-1.5 py-0.5 bg-zinc-800 rounded border border-white/5 text-white">D</kbd> Delete</div>
               </div>
             </div>
           </>
         ) : (
           <div className="flex-1 flex flex-col items-center justify-center bg-[#050505] p-12 overflow-auto">
             <div className="mb-6">
-              <button
-                onClick={handleDownloadResult}
-                className="flex items-center gap-2 px-8 py-3 bg-emerald-600 hover:bg-emerald-500 text-white rounded-full font-black shadow-xl shadow-emerald-600/20 transition-all active:scale-95"
-              >
-                <Download size={20} />
-                Download Result (.png)
+              <button onClick={handleDownloadResult} className="flex items-center gap-2 px-8 py-3 bg-emerald-600 hover:bg-emerald-500 text-white rounded-full font-black shadow-xl transition-all active:scale-95">
+                <Download size={20} /> Download Synthesis (.png)
               </button>
             </div>
             <div className="bg-[#111] p-8 rounded-[3rem] shadow-[0_50px_100px_rgba(0,0,0,0.8)] border border-white/5 max-w-full max-h-full">