Now I cannot increase the size from anywhere it's only dragging but that's only from the middle make sure that's working OK why are you doing like this make sure that's working I want see I'm clarifying once again if I wanna increase the size of the element only from the border OK any border so if I are placing on the right border I can extend to right if I'm keeping the upside border I can extend to upside if I am keeping bottom down side bottom right left side corner I can extend aside understood so if my mouse point inside that element we cannot extend the size of it only we can drag - Follow Up Deployment

index.html

@@ -47,129 +47,116 @@
     </script>
     <script>
         $(document).ready(function() {
-            // Make elements draggable
+            // Current tool state
+            let currentTool = 'select'; // 'select', 'hand', 'text', 'rectangle', 'circle', 'line'
+            let isPanning = false;
+            let panStart = { x: 0, y: 0 };
+            let canvasStart = { x: 0, y: 0 };
+            
+            // Make component cards draggable (clone mode)
             $('.element-card').draggable({
                 helper: 'clone',
                 cursor: 'move',
                 zIndex: 1000,
-                revert: 'invalid'
+                revert: 'invalid',
+                start: function(event, ui) {
+                    // Improve visual feedback during drag
+                    ui.helper.addClass('opacity-75');
+                }
             });
 
             // Make canvas a drop zone
             $('#dropZone').droppable({
                 accept: '.element-card',
+                tolerance: 'pointer',
+                activeClass: 'border-2 border-dashed border-accent-blue',
                 drop: function(event, ui) {
                     const elementType = ui.draggable.data('element');
-                    addElementToCanvas(elementType);
+                    const position = { 
+                        x: event.clientX - event.target.getBoundingClientRect().left, 
+                        y: event.clientY - event.target.getBoundingClientRect().top 
+                    };
+                    addElementToCanvas(elementType, position);
                 }
             });
 
-            // Function to add element to canvas
-            function addElementToCanvas(type) {
+            // Function to add element to canvas with position
+            function addElementToCanvas(type, position) {
                 const elementId = 'element-' + Date.now();
                 let elementHTML = '';
 
+                // Position element at drop point
+                const adjustedPosition = {
+                    x: position.x - 50,
+                    y: position.y - 25
+                };
+
                 switch(type) {
                     case 'button':
                         elementHTML = `
                             <div class="canvas-element glass-panel p-2 rounded flex items-center justify-center absolute" 
-                                 style="width: 120px; height: 40px; top: 100px; left: 100px;"
+                                 style="width: 120px; height: 40px; top: ${adjustedPosition.y}px; left: ${adjustedPosition.x}px;"
                                  id="${elementId}">
                                 <span class="text-sm">Button</span>
-                                <div class="resizer resizer-nw"></div>
-                                <div class="resizer resizer-ne"></div>
-                                <div class="resizer resizer-sw"></div>
-                                <div class="resizer resizer-se"></div>
-                                <div class="rotator"></div>
                             </div>
                         `;
                         break;
                     case 'input':
                         elementHTML = `
                             <div class="canvas-element glass-panel p-2 rounded absolute" 
-                                 style="width: 200px; height: 40px; top: 100px; left: 100px;"
+                                 style="width: 200px; height: 40px; top: ${adjustedPosition.y}px; left: ${adjustedPosition.x}px;"
                                  id="${elementId}">
                                 <input type="text" placeholder="Input field" class="w-full h-full bg-transparent border border-gray-600 rounded px-2 text-sm">
-                                <div class="resizer resizer-nw"></div>
-                                <div class="resizer resizer-ne"></div>
-                                <div class="resizer resizer-sw"></div>
-                                <div class="resizer resizer-se"></div>
-                                <div class="rotator"></div>
                             </div>
                         `;
                         break;
                     case 'card':
                         elementHTML = `
                             <div class="canvas-element glass-panel p-4 rounded absolute" 
-                                 style="width: 250px; height: 150px; top: 100px; left: 100px;"
+                                 style="width: 250px; height: 150px; top: ${adjustedPosition.y}px; left: ${adjustedPosition.x}px;"
                                  id="${elementId}">
                                 <h3 class="font-semibold mb-2">Card Title</h3>
                                 <p class="text-xs">Card content goes here...</p>
-                                <div class="resizer resizer-nw"></div>
-                                <div class="resizer resizer-ne"></div>
-                                <div class="resizer resizer-sw"></div>
-                                <div class="resizer resizer-se"></div>
-                                <div class="rotator"></div>
                             </div>
                         `;
                         break;
                     case 'image':
                         elementHTML = `
                             <div class="canvas-element glass-panel rounded absolute flex items-center justify-center" 
-                                 style="width: 200px; height: 150px; top: 100px; left: 100px;"
+                                 style="width: 200px; height: 150px; top: ${adjustedPosition.y}px; left: ${adjustedPosition.x}px;"
                                  id="${elementId}">
                                 <i class="fas fa-image text-4xl text-gray-500"></i>
-                                <div class="resizer resizer-nw"></div>
-                                <div class="resizer resizer-ne"></div>
-                                <div class="resizer resizer-sw"></div>
-                                <div class="resizer resizer-se"></div>
-                                <div class="rotator"></div>
                             </div>
                         `;
                         break;
                     case 'container':
                         elementHTML = `
                             <div class="canvas-element glass-panel p-4 rounded absolute" 
-                                 style="width: 300px; height: 200px; top: 100px; left: 100px;"
+                                 style="width: 300px; height: 200px; top: ${adjustedPosition.y}px; left: ${adjustedPosition.x}px;"
                                  id="${elementId}">
                                 <div class="w-full h-full border-2 border-dashed border-gray-600 rounded flex items-center justify-center">
                                     <span class="text-gray-500">Container</span>
                                 </div>
-                                <div class="resizer resizer-nw"></div>
-                                <div class="resizer resizer-ne"></div>
-                                <div class="resizer resizer-sw"></div>
-                                <div class="resizer resizer-se"></div>
-                                <div class="rotator"></div>
                             </div>
                         `;
                         break;
                     case 'section':
                         elementHTML = `
                             <div class="canvas-element glass-panel p-4 rounded absolute" 
-                                 style="width: 400px; height: 300px; top: 100px; left: 100px;"
+                                 style="width: 400px; height: 300px; top: ${adjustedPosition.y}px; left: ${adjustedPosition.x}px;"
                                  id="${elementId}">
                                 <div class="w-full h-full border border-gray-600 rounded flex items-center justify-center">
                                     <span class="text-gray-500">Section</span>
                                 </div>
-                                <div class="resizer resizer-nw"></div>
-                                <div class="resizer resizer-ne"></div>
-                                <div class="resizer resizer-sw"></div>
-                                <div class="resizer resizer-se"></div>
-                                <div class="rotator"></div>
                             </div>
                         `;
                         break;
                     default:
                         elementHTML = `
                             <div class="canvas-element glass-panel p-2 rounded absolute" 
-                                 style="width: 150px; height: 50px; top: 100px; left: 100px;"
+                                 style="width: 150px; height: 50px; top: ${adjustedPosition.y}px; left: ${adjustedPosition.x}px;"
                                  id="${elementId}">
                                 <span class="text-sm">${type.charAt(0).toUpperCase() + type.slice(1)}</span>
-                                <div class="resizer resizer-nw"></div>
-                                <div class="resizer resizer-ne"></div>
-                                <div class="resizer resizer-sw"></div>
-                                <div class="resizer resizer-se"></div>
-                                <div class="rotator"></div>
                             </div>
                         `;
                 }
@@ -179,8 +166,11 @@
                 // Make the new element selectable
                 $(`#${elementId}`).click(function(e) {
                     e.stopPropagation();
-                    $('.canvas-element').removeClass('selected');
-                    $(this).addClass('selected');
+                    if (currentTool === 'select') {
+                        $('.canvas-element').removeClass('selected');
+                        $(this).addClass('selected');
+                        updatePropertyPanel($(this));
+                    }
                 });
                 
                 // Make the new element draggable
@@ -188,17 +178,28 @@
                 
                 // Make the new element resizable and rotatable
                 makeElementResizableRotatable(`#${elementId}`);
+                
+                // Select the newly added element
+                if (currentTool === 'select') {
+                    $('.canvas-element').removeClass('selected');
+                    $(`#${elementId}`).addClass('selected');
+                    updatePropertyPanel($(`#${elementId}`));
+                }
             }
 
-            // Make canvas elements draggable
+            // Make canvas elements draggable with better containment
             function makeElementDraggable(selector) {
                 $(selector).draggable({
-                    containment: '#dropZone',
+                    containment: 'parent',
                     cursor: 'move',
                     handle: ':not(.resizer):not(.rotator)',
                     start: function() {
                         $(this).addClass('dragging');
                     },
+                    drag: function(event, ui) {
+                        // Smooth dragging without visual artifacts
+                        ui.helper.removeClass('bg-dark-700');
+                    },
                     stop: function() {
                         $(this).removeClass('dragging');
                     }
@@ -208,12 +209,28 @@
             // Make elements resizable and rotatable
             function makeElementResizableRotatable(selector) {
                 interact(selector)
+                    .draggable({
+                        inertia: true,
+                        modifiers: [
+                            interact.modifiers.restrictRect({
+                                restriction: 'parent'
+                            })
+                        ],
+                        autoScroll: true,
+                        listeners: {
+                            move: dragMoveListener
+                        }
+                    })
                     .resizable({
-                        edges: { left: true, right: true, bottom: true, top: true },
+                        edges: { 
+                            left: '.resize-left',
+                            right: '.resize-right', 
+                            top: '.resize-top',
+                            bottom: '.resize-bottom'
+                        },
                         modifiers: [
                             interact.modifiers.restrictEdges({
-                                outer: 'parent',
-                                endOnly: true
+                                outer: 'parent'
                             })
                         ],
                         inertia: true
@@ -239,20 +256,89 @@
                     })
                     .on('resizeend', function (event) {
                         event.target.classList.remove('resizing');
+                        // Reset resize classes
+                        event.target.classList.remove('resize-left', 'resize-right', 'resize-top', 'resize-bottom');
                     });
             }
 
+            // Drag move listener for positioning elements
+            function dragMoveListener (event) {
+                var target = event.target;
+                var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
+                var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
+
+                target.style.transform = 'translate(' + x + 'px,' + y + 'px)';
+
+                target.setAttribute('data-x', x);
+                target.setAttribute('data-y', y);
+            }
+
+            // Update cursor and resize state based on mouse position relative to element edges
+            $(document).on('mousemove', '.canvas-element', function(e) {
+                const element = $(this);
+                const offset = element.offset();
+                const width = element.outerWidth();
+                const height = element.outerHeight();
+                const x = e.pageX - offset.left;
+                const y = e.pageY - offset.top;
+                const edgeThreshold = 8;
+
+                // Check if mouse is near any edge
+                const nearLeft = x < edgeThreshold;
+                const nearRight = x > width - edgeThreshold;
+                const nearTop = y < edgeThreshold;
+                const nearBottom = y > height - edgeThreshold;
+                const nearAnyEdge = nearLeft || nearRight || nearTop || nearBottom;
+
+                // Set appropriate cursor
+                if ((nearLeft && nearTop) || (nearRight && nearBottom)) {
+                    element.css('cursor', 'nwse-resize');
+                } else if ((nearRight && nearTop) || (nearLeft && nearBottom)) {
+                    element.css('cursor', 'nesw-resize');
+                } else if (nearLeft || nearRight) {
+                    element.css('cursor', 'ew-resize');
+                } else if (nearTop || nearBottom) {
+                    element.css('cursor', 'ns-resize');
+                } else {
+                    element.css('cursor', 'move');
+                }
+
+                // Add resize classes for interact.js
+                element.removeClass('resize-left resize-right resize-top resize-bottom');
+                if (nearLeft) element.addClass('resize-left');
+                if (nearRight) element.addClass('resize-right');
+                if (nearTop) element.addClass('resize-top');
+                if (nearBottom) element.addClass('resize-bottom');
+            });
+
+            // Reset cursor and resize state when mouse leaves element
+            $(document).on('mouseleave', '.canvas-element', function() {
+                $(this).css('cursor', 'default')
+                       .removeClass('resize-left resize-right resize-top resize-bottom');
+            });
+
             // Select canvas elements
             $(document).on('click', '.canvas-element', function(e) {
                 e.stopPropagation();
-                $('.canvas-element').removeClass('selected');
-                $(this).addClass('selected');
+                if (currentTool === 'select') {
+                    $('.canvas-element').removeClass('selected');
+                    $(this).addClass('selected');
+                    updatePropertyPanel($(this));
+                }
+            });
+            
+            // Add hover effect for bounding box visualization
+            $(document).on('mouseenter', '.canvas-element', function() {
+                $(this).addClass('hovered');
+            }).on('mouseleave', '.canvas-element', function() {
+                $(this).removeClass('hovered');
             });
 
             // Deselect when clicking on canvas
             $('#dropZone').click(function(e) {
-                if (e.target.id === 'dropZone') {
+                if (e.target.id === 'dropZone' && currentTool === 'select') {
                     $('.canvas-element').removeClass('selected');
+                    updatePropertyPanel(null);
                 }
             });
 
@@ -261,6 +347,100 @@
                 makeElementDraggable(this);
                 makeElementResizableRotatable(this);
             });
+            
+            // Tool selection
+            $('.tool-btn').click(function() {
+                $('.tool-btn').removeClass('bg-dark-700');
+                $(this).addClass('bg-dark-700');
+                currentTool = $(this).data('tool');
+                
+                // Update cursor based on tool
+                updateCanvasCursor();
+            });
+            
+            // Update cursor based on current tool
+            function updateCanvasCursor() {
+                const canvas = $('#canvas');
+                canvas.removeClass('cursor-move cursor-crosshair cursor-text');
+                
+                switch(currentTool) {
+                    case 'hand':
+                        canvas.addClass('cursor-move');
+                        break;
+                    case 'rectangle':
+                    case 'circle':
+                    case 'line':
+                        canvas.addClass('cursor-crosshair');
+                        break;
+                    case 'text':
+                        canvas.addClass('cursor-text');
+                        break;
+                    default:
+                        canvas.css('cursor', 'default');
+                }
+            }
+            
+            // Spacebar panning functionality
+            $(document).keydown(function(e) {
+                if (e.keyCode === 32 && !isPanning) { // Spacebar
+                    e.preventDefault();
+                    isPanning = true;
+                    $('#canvas').addClass('cursor-grab');
+                }
+            });
+            
+            $(document).keyup(function(e) {
+                if (e.keyCode === 32 && isPanning) {
+                    isPanning = false;
+                    $('#canvas').removeClass('cursor-grab cursor-grabbing');
+                }
+            });
+            
+            // Panning implementation
+            $('#canvas').mousedown(function(e) {
+                if (isPanning) {
+                    e.preventDefault();
+                    panStart = { x: e.clientX, y: e.clientY };
+                    canvasStart = { 
+                        x: parseInt($('#dropZone').css('left')) || 0, 
+                        y: parseInt($('#dropZone').css('top')) || 0 
+                    };
+                    $('#canvas').addClass('cursor-grabbing').removeClass('cursor-grab');
+                    $(document).on('mousemove.pan', function(e) {
+                        const dx = e.clientX - panStart.x;
+                        const dy = e.clientY - panStart.y;
+                        $('#dropZone').css({
+                            left: canvasStart.x + dx,
+                            top: canvasStart.y + dy
+                        });
+                    });
+                }
+            });
+            
+            $(document).mouseup(function(e) {
+                if (isPanning) {
+                    $('#canvas').addClass('cursor-grab').removeClass('cursor-grabbing');
+                    $(document).off('mousemove.pan');
+                }
+            });
+            
+            // Update property panel based on selected element
+            function updatePropertyPanel(element) {
+                if (element) {
+                    const elementType = element.data('element') || 'element';
+                    $('#selectedElementName').text(elementType.charAt(0).toUpperCase() + elementType.slice(1) + ' selected');
+                    
+                    // Show/hide text customization based on element content
+                    if (element.find('span, h3, p, input').length > 0) {
+                        $('#textCustomization').show();
+                    } else {
+                        $('#textCustomization').hide();
+                    }
+                } else {
+                    $('#selectedElementName').text('No element selected');
+                    $('#textCustomization').hide();
+                }
+            }
         });
     </script>
     <style>
@@ -335,31 +515,6 @@
             background-size: 20px 20px;
         }
         
-        .resizer {
-            position: absolute;
-            width: 10px;
-            height: 10px;
-            background: rgba(0, 212, 255, 0.8);
-            border-radius: 50%;
-            z-index: 10;
-        }
-        
-        .resizer-nw { top: -5px; left: -5px; cursor: nw-resize; }
-        .resizer-ne { top: -5px; right: -5px; cursor: ne-resize; }
-        .resizer-sw { bottom: -5px; left: -5px; cursor: sw-resize; }
-        .resizer-se { bottom: -5px; right: -5px; cursor: se-resize; }
-        
-        .rotator {
-            position: absolute;
-            top: -30px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 20px;
-            height: 20px;
-            background: rgba(0, 212, 255, 0.8);
-            border-radius: 50%;
-            cursor: grab;
-        }
         
         .canvas-element {
             position: absolute;
@@ -371,6 +526,10 @@
             box-shadow: 0 0 0 2px #00D4FF, 0 0 15px rgba(0, 212, 255, 0.5);
         }
         
+        .canvas-element.hovered {
+            box-shadow: 0 0 0 1px #00D4FF, 0 0 10px rgba(0, 212, 255, 0.3);
+        }
+        
         .dragging {
             opacity: 0.7;
             z-index: 1000;
@@ -380,6 +539,7 @@
             position: relative;
             width: 100%;
             height: 100%;
+            transition: border-color 0.2s ease;
         }
         
         .property-slider::-webkit-slider-thumb {
@@ -448,6 +608,14 @@
             color: #00D4FF;
         }
         
+        .tool-btn {
+            transition: all 0.2s ease;
+        }
+        
+        .tool-btn:hover {
+            background: rgba(100, 100, 150, 0.1);
+        }
+        
         .layer-item {
             transition: all 0.2s ease;
         }
@@ -611,17 +779,45 @@
             
             <!-- Canvas Area -->
             <div class="flex-1 overflow-auto relative canvas-grid" id="canvas">
-                <div class="drop-zone" id="dropZone">
+                <div class="drop-zone absolute" id="dropZone" style="width: 200%; height: 200%; left: -50%; top: -50%;">
                     <!-- Canvas is now clean - ready for elements to be added -->
                 </div>
             </div>
+            
+            <!-- Bottom Toolbar -->
+            <div class="glass h-10 flex items-center justify-center border-t border-gray-800">
+                <div class="flex space-x-1">
+                    <button class="tool-btn w-8 h-8 rounded flex items-center justify-center bg-dark-700" data-tool="select" title="Selection Tool (V)">
+                        <i class="fas fa-mouse-pointer text-xs"></i>
+                    </button>
+                    <button class="tool-btn w-8 h-8 rounded flex items-center justify-center" data-tool="hand" title="Hand Tool (H)">
+                        <i class="fas fa-hand-paper text-xs"></i>
+                    </button>
+                    <button class="tool-btn w-8 h-8 rounded flex items-center justify-center" data-tool="rectangle" title="Rectangle Tool (R)">
+                        <i class="fas fa-square text-xs"></i>
+                    </button>
+                    <button class="tool-btn w-8 h-8 rounded flex items-center justify-center" data-tool="circle" title="Ellipse Tool (O)">
+                        <i class="fas fa-circle text-xs"></i>
+                    </button>
+                    <button class="tool-btn w-8 h-8 rounded flex items-center justify-center" data-tool="line" title="Line Tool (L)">
+                        <i class="fas fa-minus text-xs"></i>
+                    </button>
+                    <button class="tool-btn w-8 h-8 rounded flex items-center justify-center" data-tool="text" title="Text Tool (T)">
+                        <i class="fas fa-font text-xs"></i>
+                    </button>
+                    <div class="w-px h-6 bg-gray-700 mx-1"></div>
+                    <button class="tool-btn w-8 h-8 rounded flex items-center justify-center" data-tool="eyedropper" title="Eyedropper Tool (I)">
+                        <i class="fas fa-eye-dropper text-xs"></i>
+                    </button>
+                </div>
+            </div>
         </div>
         
         <!-- Right Customization Panel -->
         <div class="w-48 glass-panel flex flex-col border-l border-gray-800">
             <div class="p-2 border-b border-gray-800">
                 <h2 class="text-xs font-semibold">Properties</h2>
-                <p class="tiny-text text-gray-400">Primary Button selected</p>
+                <p class="tiny-text text-gray-400" id="selectedElementName">No element selected</p>
             </div>
             
             <div class="flex-1 overflow-y-auto p-2">
@@ -676,12 +872,12 @@
                     </div>
                 </div>
                 
-                <div class="mb-2">
+                <div class="mb-2" id="textCustomization">
                     <h3 class="font-medium tiny-text mb-1">Text</h3>
                     <div class="space-y-2">
                         <div>
                             <label class="tiny-text text-gray-400">Content</label>
-                            <input type="text" value="Primary Button" class="w-full mt-1 tiny-input rounded-md glow-input">
+                            <input type="text" value="Primary Button" class="w-full mt-1 tiny-input rounded-md glow-input" id="textContent">
                         </div>
                         
                         <div>