Phase B

client/src/components/VisualEditor/LiveCanvas.tsx

@@ -1,6 +1,13 @@
-import { useRef, useEffect, useCallback, useState } from 'react';
+import { useRef, useEffect, useCallback, useState, MutableRefObject } from 'react';
 import { generateEditorPage } from './editorSandbox';
 
+interface ElementPreset {
+  tagName: string;
+  label: string;
+  icon: any;
+  defaultProps: any;
+}
+
 interface LiveCanvasProps {
   html: string;
   css: string;
@@ -9,12 +16,14 @@ interface LiveCanvasProps {
   selectedSelector: string | null;
   onElementClick: (selector: string) => void;
   onElementDrop: (parentSelector: string, slotIndex: number) => void;
+  onElementDropFromToolbox: (preset: ElementPreset, parentSelector: string, slotIndex: number) => void;
   onCanvasClick: () => void;
+  dragDataRef: MutableRefObject<ElementPreset | null>;
 }
 
 export default function LiveCanvas({
   html, css, js, showOutlines, selectedSelector,
-  onElementClick, onElementDrop, onCanvasClick,
+  onElementClick, onElementDrop, onElementDropFromToolbox, onCanvasClick, dragDataRef,
 }: LiveCanvasProps) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const overlayRef = useRef<HTMLDivElement>(null);
@@ -57,20 +66,40 @@ export default function LiveCanvas({
     }, '*');
   }, [showOutlines, ready]);
 
+  // Store callbacks in refs for stable message handler
+  const callbacksRef = useRef({ onElementClick, onElementDrop, onElementDropFromToolbox, onCanvasClick, dragDataRef });
+  callbacksRef.current = { onElementClick, onElementDrop, onElementDropFromToolbox, onCanvasClick, dragDataRef };
+
+  // Handle drop response from iframe (sent after GET_ELEMENT_AT query)
+  const handleIframeDrop = useCallback((selector: string) => {
+    const { dragDataRef: ddr, onElementDrop: oed, onElementDropFromToolbox: oedft } = callbacksRef.current;
+    const preset = ddr.current;
+    if (!preset) {
+      oed(selector, 0);
+      return;
+    }
+    oedft(preset, selector, 0);
+    ddr.current = null;
+  }, []);
+
   // Receive messages from iframe
   useEffect(() => {
     const handler = (event: MessageEvent) => {
       if (event.source !== iframeRef.current?.contentWindow) return;
       const data = event.data;
+      const cbs = callbacksRef.current;
       switch (data.type) {
         case 'ELEMENT_CLICK':
-          onElementClick(data.selector);
+          cbs.onElementClick(data.selector);
+          break;
+        case 'ELEMENT_DROP':
+          handleIframeDrop(data.selector);
           break;
         case 'ELEMENT_DROP_IN_SLOT':
-          onElementDrop(data.parentSelector, data.slotIndex);
+          cbs.onElementDrop(data.parentSelector, data.slotIndex);
           break;
         case 'CANVAS_CLICK':
-          onCanvasClick();
+          cbs.onCanvasClick();
           break;
         case 'READY':
           setReady(true);
@@ -79,7 +108,24 @@ export default function LiveCanvas({
     };
     window.addEventListener('message', handler);
     return () => window.removeEventListener('message', handler);
-  }, [onElementClick, onElementDrop, onCanvasClick]);
+  }, [handleIframeDrop]);
+
+  // Handle overlay drop: query iframe for element at drop point
+  const handleOverlayDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    const rect = iframeRef.current?.getBoundingClientRect();
+    if (!rect || !iframeRef.current?.contentWindow) return;
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    iframeRef.current.contentWindow.postMessage({
+      type: 'GET_ELEMENT_AT',
+      x, y, action: 'drop',
+    }, '*');
+  }, []);
+
+  const handleOverlayDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+  }, []);
 
   return (
     <div className="relative w-full h-full">
@@ -92,8 +138,8 @@ export default function LiveCanvas({
       <div
         ref={overlayRef}
         className="absolute inset-0 z-10"
-        onDragOver={(e) => e.preventDefault()}
-        onDrop={(e) => e.preventDefault()}
+        onDragOver={handleOverlayDragOver}
+        onDrop={handleOverlayDrop}
         onClick={() => onCanvasClick()}
       />
     </div>

client/src/components/VisualEditor/Toolbox.tsx

@@ -145,13 +145,18 @@ const ELEMENT_CATEGORIES: { name: string; icon: any; items: ElementPreset[] }[]
   },
 ];
 
-export default function Toolbox() {
+interface ToolboxProps {
+  onDragStart?: (preset: ElementPreset) => void;
+}
+
+export default function Toolbox({ onDragStart }: ToolboxProps) {
   const [expandedCategories, setExpandedCategories] = useState<Set<string>>(() => new Set(ELEMENT_CATEGORIES.slice(0, 3).map(c => c.name)));
 
   const handleDragStart = useCallback((e: React.DragEvent, element: ElementPreset) => {
     e.dataTransfer.setData('application/visual-element', JSON.stringify(element));
     e.dataTransfer.effectAllowed = 'copy';
-  }, []);
+    onDragStart?.(element);
+  }, [onDragStart]);
 
   const toggleCategory = useCallback((name: string) => {
     setExpandedCategories(prev => {

client/src/components/VisualEditor/VisualEditor.tsx

@@ -12,7 +12,6 @@ import {
   Plus, Code, Palette, Layout
 } from 'lucide-react';
 import { getColor } from '../Collaboration/CollaboratorAvatars';
-import { getSocket } from '../../hooks/useWebSocket';
 
 type DeviceMode = 'desktop' | 'tablet' | 'mobile';
 
@@ -104,6 +103,11 @@ export default function VisualEditor() {
   const [contextMenu, setContextMenu] = useState<{ x: number; y: number; elementId: string } | null>(null);
   const [showTagModal, setShowTagModal] = useState(false);
   const [iframeSelector, setIframeSelector] = useState<string | null>(null);
+  const dragDataRef = useRef<any>(null);
+
+  // Subscribe to blockCode changes reactively
+  const blockCode = useEditorStore((s) => s.blockCode);
+  const currentBlockCode = blockCode[activeFileId || ''] || '';
 
   // Collaborator hovers
   const collaborators = useCollaborationStore((s) => s.collaborators);
@@ -141,9 +145,8 @@ export default function VisualEditor() {
   }, [fileTree]);
 
   const liveJs = useMemo(() => {
-    const state = useEditorStore.getState();
-    return state.getBlockCode(activeFileId || '') || '';
-  }, [activeFileId, visualElements]);
+    return currentBlockCode;
+  }, [currentBlockCode]);
 
   // Map iframe selector to element ID
   const handleElementClick = useCallback((selector: string) => {
@@ -179,35 +182,45 @@ export default function VisualEditor() {
     setIframeSelector(null);
   }, [setSelectedElement]);
 
-  // Handle drop from toolbox into slot
-  const handleElementDrop = useCallback((parentSelector: string, slotIndex: number) => {
-    // Find parent element by selector
-    const match = parentSelector.match(/#([\w-]+)/);
-    if (!match) return;
-    const parentIdAttr = match[1];
-    const searchByAttr = (els: VisualElement[]): VisualElement | null => {
-      for (const e of els) {
-        if (e.props?.id === parentIdAttr || e.attributes?.id === parentIdAttr) return e;
-        if (e.children) {
-          const found = searchByAttr(e.children);
-          if (found) return found;
-        }
+  // Search for element by HTML id attribute
+  const searchByAttr = useCallback((els: VisualElement[] | undefined, idAttr: string): VisualElement | null => {
+    if (!els) return null;
+    for (const e of els) {
+      if (e.props?.id === idAttr || e.attributes?.id === idAttr) return e;
+      if (e.children) {
+        const found = searchByAttr(e.children, idAttr);
+        if (found) return found;
       }
-      return null;
-    };
-    const parent = searchByAttr(visualElements || []);
-    if (!parent) return;
+    }
+    return null;
+  }, []);
 
-    const child = createVisualElement('div', {
-      style: { padding: '12px', border: '1px dashed #6366f1', borderRadius: '4px' }
-    });
-    // Auto-ID generation
-    const autoId = incrementCounter('div');
+  // Create a new element from preset and add to parent
+  const createElementFromPreset = useCallback((preset: any, parentId: string, slotIndex: number) => {
+    const child = createVisualElement(preset.tagName, preset.defaultProps || {});
+    const autoId = incrementCounter(preset.tagName);
     child.props = { ...child.props, id: autoId };
     child.attributes = { ...child.attributes, id: autoId };
+    addVisualElement(child, parentId, slotIndex);
+  }, [addVisualElement, incrementCounter]);
+
+  // Handle drop from within canvas (no preset, use generic div)
+  const handleElementDrop = useCallback((parentSelector: string, slotIndex: number) => {
+    const match = parentSelector.match(/#([\w-]+)/);
+    if (!match) return;
+    const parent = searchByAttr(visualElements, match[1]);
+    if (!parent) return;
+    createElementFromPreset({ tagName: 'div', defaultProps: { style: { padding: '12px', border: '1px dashed #6366f1', borderRadius: '4px' } } }, parent.id, slotIndex);
+  }, [visualElements, searchByAttr, createElementFromPreset]);
 
-    addVisualElement(child, parent.id);
-  }, [visualElements, addVisualElement, incrementCounter]);
+  // Handle drop from toolbox (carries element preset data)
+  const handleElementDropFromToolbox = useCallback((preset: any, parentSelector: string, slotIndex: number) => {
+    const match = parentSelector.match(/#([\w-]+)/);
+    if (!match) return;
+    const parent = searchByAttr(visualElements, match[1]);
+    if (!parent) return;
+    createElementFromPreset(preset, parent.id, slotIndex);
+  }, [visualElements, searchByAttr, createElementFromPreset]);
 
   const handleElementClickLocal = useCallback((e: React.MouseEvent, elementId: string) => {
     e.stopPropagation();
@@ -237,6 +250,18 @@ export default function VisualEditor() {
   const selectedElement = selectedElementId ? findElementById(visualElements || [], selectedElementId) : null;
   const device = DEVICE_SIZES[deviceMode];
 
+  // Find parent and index of an element in the tree
+  const findParentAndIndex = useCallback((id: string, els: VisualElement[], parentId?: string, sibIdx?: number): { parentId: string | null; index: number } | null => {
+    for (let i = 0; i < (els || []).length; i++) {
+      if (els[i].id === id) return { parentId: parentId || null, index: i };
+      if (els[i].children) {
+        const found = findParentAndIndex(id, els[i].children, els[i].id, i);
+        if (found) return found;
+      }
+    }
+    return null;
+  }, []);
+
   // Context menu actions
   const cmDuplicate = useCallback(() => {
     if (!contextMenu) return;
@@ -246,10 +271,15 @@ export default function VisualEditor() {
       const autoId = incrementCounter(el.tagName);
       dup.props = { ...dup.props, id: autoId };
       dup.attributes = { ...dup.attributes, id: autoId };
-      addVisualElement(dup);
+      const location = findParentAndIndex(contextMenu.elementId, visualElements || []);
+      if (location) {
+        addVisualElement(dup, location.parentId || undefined, location.index + 1);
+      } else {
+        addVisualElement(dup);
+      }
     }
     setContextMenu(null);
-  }, [contextMenu, visualElements, addVisualElement, incrementCounter]);
+  }, [contextMenu, visualElements, addVisualElement, incrementCounter, findParentAndIndex]);
 
   const cmDelete = useCallback(() => {
     if (contextMenu) { removeVisualElement(contextMenu.elementId); setContextMenu(null); }
@@ -337,7 +367,7 @@ export default function VisualEditor() {
           Elements
         </div>
         <div className="flex-1 overflow-y-auto px-2">
-          <Toolbox />
+          <Toolbox onDragStart={(preset) => { dragDataRef.current = preset; }} />
         </div>
       </div>
 
@@ -392,7 +422,9 @@ export default function VisualEditor() {
                 selectedSelector={iframeSelector}
                 onElementClick={handleElementClick}
                 onElementDrop={handleElementDrop}
+                onElementDropFromToolbox={handleElementDropFromToolbox}
                 onCanvasClick={handleCanvasClick}
+                dragDataRef={dragDataRef}
               />
             )}
           </div>

client/src/store/editorStore.ts

@@ -42,7 +42,7 @@ interface EditorStore {
   toggleSnapToGrid: () => void;
   toggleMiniMap: () => void;
   setVisualElements: (elements: VisualElement[]) => void;
-  addVisualElement: (element: VisualElement, parentId?: string) => void;
+  addVisualElement: (element: VisualElement, parentId?: string, insertIndex?: number) => void;
   updateVisualElement: (id: string, updates: Partial<VisualElement>) => void;
   removeVisualElement: (id: string) => void;
   setFileTree: (files: ProjectFile[]) => void;
@@ -70,7 +70,7 @@ function getChildCount(elements: VisualElement[], id: string): number {
       if (found !== -1) return found;
     }
   }
-  return 0;
+  return -1;
 }
 
 function getLinkedFiles(fileId: string, fileTree: ProjectFile[]): string[] {
@@ -132,17 +132,29 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
 
   setVisualElements: (elements) => set({ visualElements: elements || [] }),
 
-  addVisualElement: (element, parentId) =>
+  addVisualElement: (element, parentId, insertIndex) =>
     set((state) => {
       const elements = state.visualElements || [];
       let newElements: VisualElement[];
       if (!parentId) {
-        newElements = [...elements, element];
+        if (insertIndex !== undefined) {
+          const copy = [...elements];
+          copy.splice(insertIndex, 0, element);
+          newElements = copy;
+        } else {
+          newElements = [...elements, element];
+        }
       } else {
         const addToParent = (els: VisualElement[]): VisualElement[] =>
           (els || []).map((el) => {
             if (el.id === parentId) {
-              return { ...el, children: [...(el.children || []), element] };
+              const children = [...(el.children || [])];
+              if (insertIndex !== undefined) {
+                children.splice(insertIndex, 0, element);
+              } else {
+                children.push(element);
+              }
+              return { ...el, children };
             }
             if (el.children) {
               return { ...el, children: addToParent(el.children) };
@@ -151,7 +163,6 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
           });
         newElements = addToParent(elements);
       }
-      // Recalculate slots for parent
       setTimeout(() => {
         if (parentId) get().recalculateSlots(parentId);
         get().recomputeRegistry();
@@ -334,7 +345,7 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
 
   setSlotCount: (elementId, count) => {
     const state = get();
-    const childCount = getChildCount(state.visualElements, elementId);
+    const childCount = Math.max(0, getChildCount(state.visualElements, elementId));
     const clampedCount = Math.max(count, childCount, 1);
     set((s) => ({
       slotCounts: { ...s.slotCounts, [elementId]: clampedCount },