Roll Back

client/package.json

@@ -35,7 +35,6 @@
     "@types/prismjs": "^1.26.3",
     "@types/react-syntax-highlighter": "^15.5.11",
     "@vitejs/plugin-react": "^4.2.1",
-    "prettier": "^3.2.0",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.32",
     "tailwindcss": "^3.4.0",

client/src/api/client.ts

@@ -47,7 +47,7 @@ class ApiClient {
     }
   }
 
-  // Auth (kept as REST; auth flows through REST endpoints)
+  // Auth
   async register(email: string, username: string, password: string) {
     return this.request<{ token: string; user: any }>('POST', '/auth/register', { email, username, password });
   }
@@ -76,7 +76,7 @@ class ApiClient {
     return this.request<{ user: any }>('GET', '/auth/me');
   }
 
-  // Projects (kept as REST fallback for when WS is not connected)
+  // Projects
   async getProjects() {
     return this.request<{ projects: any[] }>('GET', '/projects');
   }

client/src/components/CodeView/CodeView.tsx

@@ -10,10 +10,9 @@ import { compileElectron } from '../../compilers/electron';
 import { compileMaui } from '../../compilers/maui';
 import { compileNodeJS } from '../../compilers/nodejs';
 import { SyntaxHighlight } from './SyntaxHighlight';
-import { formatCode, getFileLanguage } from '../../utils/formatCode';
 import {
   Download, Copy, FileCode,
-  Eye, Code2, SplitSquareHorizontal, Save
+  Eye, Code2, SplitSquareHorizontal
 } from 'lucide-react';
 import { saveAs } from 'file-saver';
 import JSZip from 'jszip';
@@ -27,31 +26,6 @@ export default function CodeView() {
   const { emitCursorMove, emitFileChanged } = useWebSocket(id);
   const editorRef = useRef<HTMLDivElement>(null);
   const [isEditing, setIsEditing] = useState(false);
-  const [formattedContent, setFormattedContent] = useState('');
-
-  const activeFile = useMemo(() => {
-    return fileTree.find(f => f.id === activeFileId) || null;
-  }, [fileTree, activeFileId]);
-
-  // Format on file load
-  useEffect(() => {
-    if (activeFile?.content && isEditing) {
-      const lang = getFileLanguage(activeFile.type);
-      formatCode(activeFile.content, lang).then(setFormattedContent);
-    } else {
-      setFormattedContent(activeFileContent);
-    }
-  }, [activeFile?.content, activeFile?.type, isEditing]);
-
-  // Format on save handler
-  const handleFormatSave = useCallback(async () => {
-    if (!activeFile || !isEditing) return;
-    const lang = getFileLanguage(activeFile.type);
-    const formatted = await formatCode(activeFileContent, lang);
-    useEditorStore.getState().saveGeneratedCodeToFile(activeFile.id, formatted);
-    useEditorStore.getState().setActiveFileContent(formatted);
-    setFormattedContent(formatted);
-  }, [activeFile, activeFileContent, isEditing]);
 
   const compiledCode = useMemo(() => {
     if (!currentProject) return '';
@@ -110,19 +84,6 @@ export default function CodeView() {
     }, 100);
   }, [activeFileId, emitCursorMove, emitFileChanged, setActiveFileContent]);
 
-  // Ctrl+S handler in edit mode
-  useEffect(() => {
-    if (!isEditing) return;
-    const handler = (e: KeyboardEvent) => {
-      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
-        e.preventDefault();
-        handleFormatSave();
-      }
-    };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, [handleFormatSave, isEditing]);
-
   const handleDownload = useCallback(async () => {
     if (!currentProject) return;
     const zip = new JSZip();
@@ -171,14 +132,6 @@ export default function CodeView() {
               </button>
             </div>
           )}
-          {isEditing && (
-            <button onClick={handleFormatSave}
-              className="btn-ghost px-2 py-1 text-xs text-green-400"
-              title="Format & Save (Ctrl+S)">
-              <Save className="w-3.5 h-3.5" />
-              Format & Save
-            </button>
-          )}
           <button onClick={() => setIsEditing(!isEditing)}
             className={`btn-ghost px-2 py-1 text-xs ${isEditing ? 'text-primary-400 bg-primary-500/10' : ''}`}
             title={isEditing ? 'View compiled code' : 'Edit source directly'}>

client/src/components/VisualEditor/LiveCanvas.tsx

@@ -1,147 +0,0 @@
-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;
-  js: string;
-  showOutlines: boolean;
-  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, onElementDropFromToolbox, onCanvasClick, dragDataRef,
-}: LiveCanvasProps) {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const overlayRef = useRef<HTMLDivElement>(null);
-  const [ready, setReady] = useState(false);
-  const [initContent, setInitContent] = useState(true);
-
-  // Initial page load
-  useEffect(() => {
-    if (initContent && iframeRef.current) {
-      const page = generateEditorPage(html, css, js);
-      iframeRef.current.srcdoc = page;
-      setInitContent(false);
-    }
-  }, [initContent, html, css, js]);
-
-  // Update content via postMessage after initial load
-  useEffect(() => {
-    if (!ready || !iframeRef.current?.contentWindow) return;
-    iframeRef.current.contentWindow.postMessage({
-      type: 'UPDATE_CONTENT',
-      html, css, js,
-    }, '*');
-  }, [html, css, js, ready]);
-
-  // Update selected element highlight
-  useEffect(() => {
-    if (!ready || !iframeRef.current?.contentWindow) return;
-    iframeRef.current.contentWindow.postMessage({
-      type: 'SELECT_ELEMENT',
-      selector: selectedSelector,
-    }, '*');
-  }, [selectedSelector, ready]);
-
-  // Update outline visibility
-  useEffect(() => {
-    if (!ready || !iframeRef.current?.contentWindow) return;
-    iframeRef.current.contentWindow.postMessage({
-      type: 'SHOW_OUTLINES',
-      show: showOutlines,
-    }, '*');
-  }, [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':
-          cbs.onElementClick(data.selector);
-          break;
-        case 'ELEMENT_DROP':
-          handleIframeDrop(data.selector);
-          break;
-        case 'ELEMENT_DROP_IN_SLOT':
-          cbs.onElementDrop(data.parentSelector, data.slotIndex);
-          break;
-        case 'CANVAS_CLICK':
-          cbs.onCanvasClick();
-          break;
-        case 'READY':
-          setReady(true);
-          break;
-      }
-    };
-    window.addEventListener('message', handler);
-    return () => window.removeEventListener('message', handler);
-  }, [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">
-      <iframe
-        ref={iframeRef}
-        className="w-full h-full border-0"
-        sandbox="allow-scripts allow-same-origin allow-forms allow-modals"
-        title="Live Canvas Preview"
-      />
-      <div
-        ref={overlayRef}
-        className="absolute inset-0 z-10"
-        onDragOver={handleOverlayDragOver}
-        onDrop={handleOverlayDrop}
-        onClick={() => onCanvasClick()}
-      />
-    </div>
-  );
-}

client/src/components/VisualEditor/PropertyPanel.tsx

@@ -5,13 +5,14 @@ import {
   Plus, Trash2, Palette, Type, Move, Square,
   Bold, Italic, AlignLeft, AlignCenter, AlignRight,
   MousePointer, EyeOff, Maximize2, Grid3X3, Play, RotateCcw,
-  Underline, Strikethrough, Layers, Minus
+  Underline, Strikethrough
 } from 'lucide-react';
 
 interface PropertyPanelProps {
   element: VisualElement | null;
 }
 
+// Spacing quick buttons
 const SPACING_PRESETS = ['0', '4px', '8px', '12px', '16px', '24px', '32px', '48px'];
 const RADIUS_PRESETS = [
   { label: 'None', value: '0' }, { label: 'Small', value: '4px' },
@@ -148,10 +149,7 @@ const CSS_CATEGORIES: { name: string; icon: any; properties: CatProp[] }[] = [
 ];
 
 export default function PropertyPanel({ element }: PropertyPanelProps) {
-  const {
-    updateVisualElement, removeVisualElement, setSelectedElement,
-    setSlotCount, slotCounts, setCustomId, incrementCounter,
-  } = useEditorStore();
+  const { updateVisualElement, removeVisualElement, setSelectedElement } = useEditorStore();
   const [expandedCat, setExpandedCat] = useState<string>('Colors');
   const [addingToCat, setAddingToCat] = useState<string | null>(null);
 
@@ -186,24 +184,6 @@ export default function PropertyPanel({ element }: PropertyPanelProps) {
     setAddingToCat(null);
   };
 
-  // Slot count handler
-  const currentSlotCount = slotCounts[element.id] ?? Math.max((element.children || []).length + 1, 1);
-  const childCount = (element.children || []).length;
-
-  const handleSlotChange = (newCount: number) => {
-    setSlotCount(element.id, Math.max(newCount, childCount, 1));
-  };
-
-  // ID edit handler
-  const handleIdChange = (newId: string) => {
-    const oldId = element.props?.id || '';
-    updateVisualElement(element.id, {
-      props: { ...element.props, id: newId },
-      attributes: { ...element.attributes, id: newId },
-    });
-    setCustomId(element.id, newId.length > 0);
-  };
-
   const renderStyleEditor = (prop: CatProp) => {
     const value = (element.styles || {})[prop.key] ?? '';
     return (
@@ -267,8 +247,8 @@ export default function PropertyPanel({ element }: PropertyPanelProps) {
       <div className="grid grid-cols-2 gap-1.5">
         <div>
           <label className="text-[10px] text-surface-400 block mb-0.5">ID</label>
-          <input type="text" value={element.props?.id || ''} onChange={(e) => handleIdChange(e.target.value)}
-            className="w-full bg-surface-800 border border-surface-700 rounded px-1.5 py-0.5 text-[11px] text-surface-200 outline-none" placeholder="auto-generated" />
+          <input type="text" value={element.props?.id || ''} onChange={(e) => updateProp('id', e.target.value)}
+            className="w-full bg-surface-800 border border-surface-700 rounded px-1.5 py-0.5 text-[11px] text-surface-200 outline-none" placeholder="my-id" />
         </div>
         <div>
           <label className="text-[10px] text-surface-400 block mb-0.5">Classes</label>
@@ -278,34 +258,6 @@ export default function PropertyPanel({ element }: PropertyPanelProps) {
         </div>
       </div>
 
-      {/* Slot Count Control */}
-      <div className="border-t border-surface-700 pt-2">
-        <div className="flex items-center justify-between">
-          <label className="text-[10px] text-surface-400 flex items-center gap-1">
-            <Layers className="w-3 h-3" /> Slots
-          </label>
-          <div className="flex items-center gap-1">
-            <button
-              onClick={() => handleSlotChange(currentSlotCount - 1)}
-              disabled={currentSlotCount <= Math.max(childCount, 1)}
-              className="p-0.5 rounded text-surface-400 hover:text-white hover:bg-surface-700 disabled:opacity-30 disabled:cursor-not-allowed"
-            >
-              <Minus className="w-3 h-3" />
-            </button>
-            <span className="text-[11px] text-surface-200 w-6 text-center">{currentSlotCount}</span>
-            <button
-              onClick={() => handleSlotChange(currentSlotCount + 1)}
-              className="p-0.5 rounded text-surface-400 hover:text-white hover:bg-surface-700"
-            >
-              <Plus className="w-3 h-3" />
-            </button>
-          </div>
-        </div>
-        <p className="text-[9px] text-surface-500 mt-0.5">
-          Drop zone slots for children {childCount > 0 ? `(${childCount} children)` : '(empty)'}
-        </p>
-      </div>
-
       {/* Text Content */}
       {['p','h1','h2','h3','h4','h5','h6','span','a','button','label','li','strong','em','b','i','u','s','mark','figcaption','legend','summary','dt','dd','th','td','caption','option','blockquote','pre','code','abbr','cite','time','address'].includes(element.tagName) && (
         <div className="border-t border-surface-700 pt-2">
@@ -373,7 +325,7 @@ export default function PropertyPanel({ element }: PropertyPanelProps) {
         </div>
       )}
 
-      {/* CSS CATEGORIES WITH PLUS BUTTONS */}
+      {/* ===== CSS CATEGORIES WITH PLUS BUTTONS ===== */}
       <div className="border-t border-surface-700 pt-2 space-y-1">
         <h4 className="text-[10px] font-semibold text-surface-400 uppercase tracking-wider mb-1">CSS Styles</h4>
 
@@ -383,6 +335,7 @@ export default function PropertyPanel({ element }: PropertyPanelProps) {
           const activeCount = cat.properties.filter(p => activeStyles.has(p.key)).length;
           return (
             <div key={cat.name} className="border border-surface-700/50 rounded-md">
+              {/* Category header */}
               <button onClick={() => setExpandedCat(isOpen ? '' : cat.name)}
                 className="w-full flex items-center gap-1.5 px-2 py-1.5 bg-surface-800/50 hover:bg-surface-800 text-xs text-surface-300 transition-colors rounded-t-md">
                 <CatIcon className="w-3.5 h-3.5 text-surface-400" />
@@ -392,8 +345,10 @@ export default function PropertyPanel({ element }: PropertyPanelProps) {
 
               {isOpen && (
                 <div className="px-2 py-1.5 space-y-1">
+                  {/* Active properties */}
                   {cat.properties.filter(p => activeStyles.has(p.key)).map(p => renderStyleEditor(p))}
 
+                  {/* Quick presets for Spacing */}
                   {cat.name === 'Spacing & Size' && activeStyles.has('padding') && (
                     <div className="flex flex-wrap gap-1 pt-1">
                       {SPACING_PRESETS.map(v => (
@@ -405,6 +360,7 @@ export default function PropertyPanel({ element }: PropertyPanelProps) {
                     </div>
                   )}
 
+                  {/* Quick presets for border radius */}
                   {cat.name === 'Border & Rounding' && activeStyles.has('borderRadius') && (
                     <div className="flex flex-wrap gap-1 pt-1">
                       {RADIUS_PRESETS.map(r => (
@@ -416,6 +372,7 @@ export default function PropertyPanel({ element }: PropertyPanelProps) {
                     </div>
                   )}
 
+                  {/* Add property button */}
                   <div className="relative pt-0.5">
                     <button onClick={() => setAddingToCat(addingToCat === cat.name ? null : cat.name)}
                       className="w-full flex items-center gap-1 px-2 py-1 rounded text-[10px] text-surface-500 hover:text-primary-400 hover:bg-surface-800 transition-colors">
@@ -442,6 +399,7 @@ export default function PropertyPanel({ element }: PropertyPanelProps) {
         })}
       </div>
 
+      {/* Clear all */}
       {activeStyles.size > 0 && (
         <div className="flex gap-2 pt-1 border-t border-surface-700">
           <button onClick={() => updateVisualElement(element.id, { styles: {} })}

client/src/components/VisualEditor/Toolbox.tsx

@@ -145,18 +145,13 @@ const ELEMENT_CATEGORIES: { name: string; icon: any; items: ElementPreset[] }[]
   },
 ];
 
-interface ToolboxProps {
-  onDragStart?: (preset: ElementPreset) => void;
-}
-
-export default function Toolbox({ onDragStart }: ToolboxProps) {
+export default function Toolbox() {
   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

@@ -5,15 +5,16 @@ import { VisualElement } from '../../types/blocks';
 import PropertyPanel from './PropertyPanel';
 import ElementTree from './ElementTree';
 import Toolbox from './Toolbox';
-import LiveCanvas from './LiveCanvas';
 import {
   Monitor, Tablet, Smartphone, Grid3X3,
   Eye, EyeOff, Trash2, Copy,
   Plus, Code, Palette, Layout
 } from 'lucide-react';
 import { getColor } from '../Collaboration/CollaboratorAvatars';
+import { getSocket } from '../../hooks/useWebSocket';
 
 type DeviceMode = 'desktop' | 'tablet' | 'mobile';
+type DropPosition = 'before' | 'after' | 'inside' | null;
 
 const DEVICE_SIZES: Record<DeviceMode, { width: number; height: number }> = {
   desktop: { width: 1280, height: 800 },
@@ -23,11 +24,11 @@ const DEVICE_SIZES: Record<DeviceMode, { width: number; height: number }> = {
 
 function uuid() { return crypto.randomUUID?.() || Math.random().toString(36).slice(2, 11); }
 
-export function createVisualElement(tagName: string, defaultProps: any): VisualElement {
+function createVisualElement(tagName: string, defaultProps: any): VisualElement {
   const id = uuid();
   return {
     id, tagName, type: 'element',
-    children: [],
+    children: defaultProps?.children || [],
     props: Object.fromEntries(Object.entries(defaultProps || {}).filter(([k]) => k !== 'children' && k !== 'style')),
     styles: defaultProps?.style || {},
     classes: [], attributes: {},
@@ -38,6 +39,7 @@ function duplicateElement(el: VisualElement): VisualElement {
   return { ...el, id: uuid(), children: (el.children || []).map(duplicateElement) };
 }
 
+// Tree helpers
 function findElementById(elements: VisualElement[] | undefined, id: string): VisualElement | null {
   if (!elements) return null;
   for (const el of elements) {
@@ -47,48 +49,35 @@ function findElementById(elements: VisualElement[] | undefined, id: string): Vis
   return null;
 }
 
-function generateElementHtml(elements: VisualElement[]): string {
-  return elements.map(el => renderElementToHtml(el)).join('\n');
+function removeFromTree(elements: VisualElement[], id: string): { result: VisualElement[]; removed: VisualElement | null } {
+  let removed: VisualElement | null = null;
+  const filter = (list: VisualElement[]): VisualElement[] =>
+    list.filter(el => {
+      if (el.id === id) { removed = el; return false; }
+      if (el.children) el.children = filter(el.children);
+      return true;
+    });
+  return { result: filter([...elements]), removed };
 }
 
-function renderElementToHtml(el: VisualElement): string {
-  const attrs: string[] = [];
-  attrs.push(`data-rb-editable="true"`);
-  if (el.props?.id) attrs.push(`id="${escapeHtml(el.props.id)}"`);
-  if (el.attributes) {
-    Object.entries(el.attributes).forEach(([k, v]) => {
-      if (k !== 'id') attrs.push(`${k}="${escapeHtml(v)}"`);
+function insertAt(elements: VisualElement[], targetId: string, newEl: VisualElement, pos: DropPosition): VisualElement[] {
+  if (pos === 'inside') {
+    return elements.map(el => {
+      if (el.id === targetId) return { ...el, children: [...(el.children || []), newEl] };
+      if (el.children) return { ...el, children: insertAt(el.children, targetId, newEl, pos) };
+      return el;
     });
   }
-  if (el.classes?.length) attrs.push(`class="${escapeHtml(el.classes.join(' '))}"`);
-  if (el.props?.src) attrs.push(`src="${escapeHtml(el.props.src)}"`);
-  if (el.props?.href) attrs.push(`href="${escapeHtml(el.props.href)}"`);
-  if (el.props?.alt) attrs.push(`alt="${escapeHtml(el.props.alt)}"`);
-  if (el.props?.placeholder) attrs.push(`placeholder="${escapeHtml(el.props.placeholder)}"`);
-  if (el.props?.type) attrs.push(`type="${escapeHtml(el.props.type)}"`);
-  if (el.props?.value) attrs.push(`value="${escapeHtml(el.props.value)}"`);
-  if (el.props?.name) attrs.push(`name="${escapeHtml(el.props.name)}"`);
-
-  const styleStr = el.styles ? Object.entries(el.styles).map(([k, v]) => `${k}:${v}`).join(';') : '';
-  if (styleStr) attrs.push(`style="${escapeHtml(styleStr)}"`);
-
-  // Slot count attribute
-  if (el.slots && el.slots.length > 0) {
-    attrs.push(`data-rb-has-slots="true" data-rb-slot-count="${el.slots.length}"`);
-  }
-
-  const isVoidTag = ['br','hr','img','input','link','meta','area','base','col','embed','source','track','wbr'].includes(el.tagName);
-  if (isVoidTag) {
-    return `<${el.tagName} ${attrs.join(' ')} />`;
+  const idx = elements.findIndex(el => el.id === targetId);
+  if (idx === -1) {
+    return elements.map(el => {
+      if (el.children) return { ...el, children: insertAt(el.children, targetId, newEl, pos) };
+      return el;
+    });
   }
-
-  const childrenHtml = (el.children || []).map(c => renderElementToHtml(c)).join('\n');
-  const textContent = el.props?.textContent || '';
-  return `<${el.tagName} ${attrs.join(' ')}>${textContent}${childrenHtml}</${el.tagName}>`;
-}
-
-function escapeHtml(str: string): string {
-  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  const arr = [...elements];
+  arr.splice(pos === 'before' ? idx : idx + 1, 0, newEl);
+  return arr;
 }
 
 export default function VisualEditor() {
@@ -96,20 +85,37 @@ export default function VisualEditor() {
     visualElements, setVisualElements, selectedElementId, setSelectedElement,
     viewMode, setViewMode, snapToGrid, toggleSnapToGrid,
     addVisualElement, updateVisualElement, removeVisualElement,
-    activeFileId, fileTree, incrementCounter, setCustomId,
-    setSlotCount, recalculateSlots, recomputeRegistry,
   } = useEditorStore();
   const [deviceMode, setDeviceMode] = useState<DeviceMode>('desktop');
+  const [showGuides, setShowGuides] = useState(true);
   const [contextMenu, setContextMenu] = useState<{ x: number; y: number; elementId: string } | null>(null);
+  const [colorPicker, setColorPicker] = useState<{ elementId: string; property: string; x: number; y: number } | null>(null);
   const [showTagModal, setShowTagModal] = useState(false);
-  const [iframeSelector, setIframeSelector] = useState<string | null>(null);
-  const dragDataRef = useRef<any>(null);
+  const [dragOverId, setDragOverId] = useState<string | null>(null);
+  const [dragOverPos, setDragOverPos] = useState<DropPosition>(null);
+  const [draggedId, setDraggedId] = useState<string | null>(null);
+  const canvasRef = useRef<HTMLDivElement>(null);
 
-  // Subscribe to blockCode changes reactively
-  const blockCode = useEditorStore((s) => s.blockCode);
-  const currentBlockCode = blockCode[activeFileId || ''] || '';
+  // Set up global WS hover emit
+  useEffect(() => {
+    (window as any).__wsElementHoverEmit = (elementId: string | null) => {
+      const socket = getSocket();
+      const projectId = (window as any).__projectId;
+      if (socket?.connected && projectId) {
+        socket.emit('visual_element_hover', { projectId, elementId });
+      }
+    };
+    (window as any).__wsElementHover = (elementId: string | null) => {
+      const fn = (window as any).__wsElementHoverEmit;
+      if (fn) fn(elementId);
+    };
+    return () => {
+      (window as any).__wsElementHover = undefined;
+      (window as any).__wsElementHoverEmit = undefined;
+    };
+  }, []);
 
-  // Collaborator hovers
+  // Collaborator element hovers for overlay
   const collaborators = useCollaborationStore((s) => s.collaborators);
   const collaboratorHoverMap = useMemo(() => {
     const map = new Map<string, { userId: string; username: string; color: string }[]>();
@@ -120,9 +126,10 @@ export default function VisualEditor() {
         map.set(c.selectedElementId, arr);
       }
     });
+    // Set global for child renderers
+    (window as any).__wsCollaboratorHoverMap = map;
     return map;
   }, [collaborators]);
-
   const cmRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -133,113 +140,73 @@ export default function VisualEditor() {
     return () => document.removeEventListener('mousedown', handler);
   }, [contextMenu]);
 
-  // Generate HTML for live canvas
-  const liveHtml = useMemo(() => {
-    return generateElementHtml(visualElements || []);
-  }, [visualElements]);
-
-  // Get CSS and JS from current project context
-  const liveCss = useMemo(() => {
-    const cssFile = fileTree.find(f => f.type === 'css');
-    return cssFile?.content || '';
-  }, [fileTree]);
-
-  const liveJs = useMemo(() => {
-    return currentBlockCode;
-  }, [currentBlockCode]);
-
-  // Map iframe selector to element ID
-  const handleElementClick = useCallback((selector: string) => {
-    setIframeSelector(selector);
-    // Try to find element by matching the ID part of the selector
-    const match = selector.match(/#([\w-]+)/);
-    if (match) {
-      const idAttr = match[1];
-      const el = findElementById(visualElements, selectedElementId || '');
-      // Search all elements for matching ID attribute
-      const searchById = (els: VisualElement[]): VisualElement | null => {
-        for (const e of els) {
-          if (e.props?.id === idAttr || e.attributes?.id === idAttr) return e;
-          if (e.children) {
-            const found = searchById(e.children);
-            if (found) return found;
-          }
-        }
-        return null;
-      };
-      const found = searchById(visualElements || []);
-      if (found) {
-        setSelectedElement(found.id);
-        return;
-      }
+  // Combined drop handler: toolbox elements and reorder
+  const handleCanvasDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    const toolboxData = e.dataTransfer.getData('application/visual-element');
+    if (toolboxData) {
+      const preset = JSON.parse(toolboxData);
+      const element = createVisualElement(preset.tagName, preset.defaultProps);
+      const target = (e.target as HTMLElement).closest('[data-element-id]');
+      const parentId = target?.getAttribute('data-element-id') || undefined;
+      addVisualElement(element, parentId);
+      return;
     }
-    setSelectedElement(null);
-  }, [visualElements, setSelectedElement, selectedElementId]);
-
-  const handleCanvasClick = useCallback(() => {
-    setSelectedElement(null);
-    setContextMenu(null);
-    setIframeSelector(null);
-  }, [setSelectedElement]);
+    // Reorder
+    const dragId = draggedId;
+    const targetId = dragOverId;
+    setDraggedId(null);
+    setDragOverId(null);
+    setDragOverPos(null);
+    if (!dragId || !targetId || dragId === targetId) return;
+    const { result: afterRemove, removed } = removeFromTree(visualElements || [], dragId);
+    if (!removed) { setVisualElements(afterRemove); return; }
+    const newTree = insertAt(afterRemove, targetId, removed, dragOverPos);
+    setVisualElements(newTree);
+  }, [draggedId, dragOverId, dragOverPos, visualElements, setVisualElements, addVisualElement]);
+
+  const handleElementDragStart = useCallback((e: React.DragEvent, elementId: string) => {
+    e.stopPropagation();
+    setDraggedId(elementId);
+    e.dataTransfer.setData('text/plain', elementId);
+    e.dataTransfer.effectAllowed = 'move';
+    if (e.currentTarget instanceof HTMLElement) {
+      const rect = e.currentTarget.getBoundingClientRect();
+      e.dataTransfer.setDragImage(e.currentTarget, e.clientX - rect.left, e.clientY - rect.top);
+    }
+  }, []);
 
-  // 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;
-      }
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    const targetEl = (e.target as HTMLElement).closest('[data-element-id]');
+    const targetId = targetEl?.getAttribute('data-element-id') || null;
+    if (!targetId || targetId === draggedId) { setDragOverId(null); setDragOverPos(null); return; }
+    setDragOverId(targetId);
+    if (targetEl) {
+      const rect = targetEl.getBoundingClientRect();
+      const y = e.clientY - rect.top;
+      const h = rect.height;
+      const isContainer = !['INPUT','IMG','BR','HR'].includes(targetEl.tagName);
+      if (y < h * 0.25) setDragOverPos('before');
+      else if (y > h * 0.75) setDragOverPos('after');
+      else if (isContainer) setDragOverPos('inside');
+      else setDragOverPos('after');
     }
-    return null;
+  }, [draggedId]);
+
+  const handleDragEnd = useCallback(() => {
+    setDraggedId(null); setDragOverId(null); setDragOverPos(null);
   }, []);
 
-  // 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]);
-
-  // 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) => {
+  const handleElementClick = useCallback((e: React.MouseEvent, elementId: string) => {
     e.stopPropagation();
-    setContextMenu(null);
+    setContextMenu(null); setColorPicker(null);
     setSelectedElement(elementId);
-    const el = findElementById(visualElements || [], elementId);
-    if (el?.props?.id) {
-      setIframeSelector(`#${el.props.id}`);
-    }
-  }, [setSelectedElement, visualElements]);
+  }, [setSelectedElement]);
 
-  const handleTreeSelect = useCallback((elementId: string) => {
-    setContextMenu(null);
-    setSelectedElement(elementId);
-    const el = findElementById(visualElements || [], elementId);
-    if (el?.props?.id) {
-      setIframeSelector(`#${el.props.id}`);
-    }
-  }, [setSelectedElement, visualElements]);
+  const handleCanvasClick = useCallback(() => {
+    setSelectedElement(null); setContextMenu(null); setColorPicker(null);
+  }, [setSelectedElement]);
 
   const handleContextMenu = useCallback((e: React.MouseEvent, elementId: string) => {
     e.preventDefault(); e.stopPropagation();
@@ -250,36 +217,13 @@ 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;
     const el = findElementById(visualElements || [], contextMenu.elementId);
-    if (el) {
-      const dup = duplicateElement(el);
-      const autoId = incrementCounter(el.tagName);
-      dup.props = { ...dup.props, id: autoId };
-      dup.attributes = { ...dup.attributes, id: autoId };
-      const location = findParentAndIndex(contextMenu.elementId, visualElements || []);
-      if (location) {
-        addVisualElement(dup, location.parentId || undefined, location.index + 1);
-      } else {
-        addVisualElement(dup);
-      }
-    }
+    if (el) addVisualElement(duplicateElement(el));
     setContextMenu(null);
-  }, [contextMenu, visualElements, addVisualElement, incrementCounter, findParentAndIndex]);
+  }, [contextMenu, visualElements, addVisualElement]);
 
   const cmDelete = useCallback(() => {
     if (contextMenu) { removeVisualElement(contextMenu.elementId); setContextMenu(null); }
@@ -295,45 +239,26 @@ export default function VisualEditor() {
 
   const cmAddChild = useCallback(() => {
     if (!contextMenu) return;
-    const child = createVisualElement('div', {});
-    const autoId = incrementCounter('div');
-    child.props = { ...child.props, id: autoId };
-    child.attributes = { ...child.attributes, id: autoId };
+    const child = createVisualElement('div', { style: { padding: '12px', border: '1px dashed #94a3b8', borderRadius: '4px' } });
     addVisualElement(child, contextMenu.elementId);
-    recalculateSlots(contextMenu.elementId);
     setContextMenu(null);
-  }, [contextMenu, addVisualElement, incrementCounter, recalculateSlots]);
+  }, [contextMenu, addVisualElement]);
 
   const handleAddChild = useCallback((parentId: string) => {
-    const child = createVisualElement('div', {});
-    const autoId = incrementCounter('div');
-    child.props = { ...child.props, id: autoId };
-    child.attributes = { ...child.attributes, id: autoId };
-    addVisualElement(child, parentId);
-    recalculateSlots(parentId);
-  }, [addVisualElement, incrementCounter, recalculateSlots]);
+    addVisualElement(createVisualElement('div', { style: { padding: '12px', border: '1px dashed #6366f1', borderRadius: '4px' } }), parentId);
+  }, [addVisualElement]);
 
   const cmColorPick = useCallback(() => {
     if (!contextMenu) return;
-    const el = findElementById(visualElements || [], contextMenu.elementId);
-    if (el) {
-      updateVisualElement(contextMenu.elementId, {
-        styles: { ...el.styles, color: '#6366f1' }
-      });
-    }
+    setColorPicker({ elementId: contextMenu.elementId, property: 'color', x: contextMenu.x, y: contextMenu.y });
     setContextMenu(null);
-  }, [contextMenu, visualElements, updateVisualElement]);
+  }, [contextMenu]);
 
   const cmBgColorPick = useCallback(() => {
     if (!contextMenu) return;
-    const el = findElementById(visualElements || [], contextMenu.elementId);
-    if (el) {
-      updateVisualElement(contextMenu.elementId, {
-        styles: { ...el.styles, backgroundColor: '#6366f1', color: '#ffffff' }
-      });
-    }
+    setColorPicker({ elementId: contextMenu.elementId, property: 'backgroundColor', x: contextMenu.x, y: contextMenu.y });
     setContextMenu(null);
-  }, [contextMenu, visualElements, updateVisualElement]);
+  }, [contextMenu]);
 
   const ALL_TAGS = ['div','span','p','h1','h2','h3','h4','h5','h6','a','button','input','img','form','section','header','footer','nav','main','aside','ul','ol','li','table','label','textarea','select','article','blockquote','pre','code','figure','figcaption','details','summary','dialog','menu','strong','em','b','i','u','s','mark','small','sub','sup','cite','time','address','video','audio','canvas','iframe','fieldset','legend','progress','meter','dl','dt','dd'];
 
@@ -367,7 +292,7 @@ export default function VisualEditor() {
           Elements
         </div>
         <div className="flex-1 overflow-y-auto px-2">
-          <Toolbox onDragStart={(preset) => { dragDataRef.current = preset; }} />
+          <Toolbox />
         </div>
       </div>
 
@@ -391,6 +316,10 @@ export default function VisualEditor() {
               className={`p-1.5 rounded-md ${snapToGrid ? 'text-primary-400' : 'text-surface-400 hover:text-white'}`} title="Snap to Grid">
               <Grid3X3 className="w-3.5 h-3.5" />
             </button>
+            <button onClick={() => setShowGuides(!showGuides)}
+              className={`p-1.5 rounded-md ${showGuides ? 'text-primary-400' : 'text-surface-400 hover:text-white'}`} title="Guides">
+              {showGuides ? <Eye className="w-3.5 h-3.5" /> : <EyeOff className="w-3.5 h-3.5" />}
+            </button>
           </div>
           <div className="flex items-center gap-2">
             <span className="text-xs text-surface-500">{(visualElements || []).length} elements</span>
@@ -402,30 +331,36 @@ export default function VisualEditor() {
             backgroundImage: snapToGrid ? 'radial-gradient(circle, rgba(148,163,184,0.1) 1px, transparent 1px)' : 'none',
             backgroundSize: snapToGrid ? '20px 20px' : 'auto',
           }}>
-          <div
-            className="bg-white rounded-lg shadow-2xl transition-all duration-300 overflow-hidden"
-            style={{ width: `${device.width}px`, minHeight: `${device.height}px`, maxWidth: '100%' }}>
+          <div ref={canvasRef}
+            className="bg-white rounded-lg shadow-2xl transition-all duration-300 overflow-hidden relative"
+            style={{ width: `${device.width}px`, minHeight: `${device.height}px`, maxWidth: '100%' }}
+            onDrop={handleCanvasDrop} onDragOver={handleDragOver}
+            onClick={handleCanvasClick}>
             {(visualElements || []).length === 0 ? (
               <div className="flex items-center justify-center h-full min-h-[400px]" style={{ color: '#94a3b8', fontSize: '14px' }}>
                 <div className="text-center">
                   <Layout className="w-12 h-12 mx-auto mb-3 opacity-30" />
                   <p>Drag elements from the toolbox</p>
-                  <p className="text-xs mt-1">to the canvas to start building</p>
+                  <p className="text-xs mt-1">or drag existing elements to reorder them</p>
                 </div>
               </div>
             ) : (
-              <LiveCanvas
-                html={liveHtml}
-                css={liveCss}
-                js={liveJs}
-                showOutlines={true}
-                selectedSelector={iframeSelector}
-                onElementClick={handleElementClick}
-                onElementDrop={handleElementDrop}
-                onElementDropFromToolbox={handleElementDropFromToolbox}
-                onCanvasClick={handleCanvasClick}
-                dragDataRef={dragDataRef}
-              />
+              <div className="p-4">
+                {(visualElements || []).map((el) => (
+                  <VisualElementRenderer key={el.id} element={el}
+                    selectedId={selectedElementId} onSelect={handleElementClick}
+                    onContextMenu={handleContextMenu} depth={0}
+                    dragOverId={dragOverPos ? dragOverId : null}
+                    dragOverPos={dragOverPos}
+                    onAddChild={handleAddChild}
+                    onDragStart={handleElementDragStart}
+                    onDrop={handleCanvasDrop}
+                    onDragOver={handleDragOver}
+                    onDragEnd={handleDragEnd}
+                    draggedId={draggedId}
+                    collaboratorHovers={collaboratorHoverMap.get(el.id) || []} />
+                ))}
+              </div>
             )}
           </div>
         </div>
@@ -445,7 +380,7 @@ export default function VisualEditor() {
           <PropertyPanel element={selectedElement} />
         ) : (
           <ElementTree elements={visualElements || []} selectedId={selectedElementId}
-            onSelect={handleTreeSelect} onContextMenu={handleContextMenu} />
+            onSelect={setSelectedElement} onContextMenu={handleContextMenu} />
         )}
       </div>
 
@@ -465,9 +400,151 @@ export default function VisualEditor() {
         </div>
       )}
 
+      {/* Color Picker */}
+      {colorPicker && (
+        <div className="fixed z-50" style={{ left: colorPicker.x, top: colorPicker.y }}>
+          <input type="color" value="#6366f1" autoFocus
+            onChange={(e) => {
+              updateVisualElement(colorPicker.elementId, { styles: { ...(findElementById(visualElements || [], colorPicker.elementId)?.styles || {}), [colorPicker.property]: e.target.value } });
+              setColorPicker(null);
+            }}
+            className="w-32 h-32 cursor-pointer border-0 rounded-lg shadow-xl"
+            style={{ background: 'none' }} onBlur={() => setColorPicker(null)} />
+        </div>
+      )}
+
       {showTagModal && contextMenu && (
         <TagModal currentTag={findElementById(visualElements || [], contextMenu.elementId)?.tagName || 'div'} />
       )}
     </div>
   );
 }
+
+// ===== VISUAL ELEMENT RENDERER =====
+function VisualElementRenderer({
+  element, selectedId, onSelect, onContextMenu, depth, dragOverId, dragOverPos,
+  onAddChild, onDragStart, onDrop, onDragOver, onDragEnd, draggedId,
+  collaboratorHovers,
+}: {
+  element: VisualElement; selectedId: string | null;
+  onSelect: (e: React.MouseEvent, id: string) => void;
+  onContextMenu: (e: React.MouseEvent, id: string) => void;
+  depth: number; dragOverId: string | null; dragOverPos: DropPosition | null;
+  onAddChild: (id: string) => void;
+  onDragStart: (e: React.DragEvent, id: string) => void;
+  onDrop: (e: React.DragEvent) => void;
+  onDragOver: (e: React.DragEvent) => void;
+  onDragEnd: (e: React.DragEvent) => void;
+  draggedId: string | null;
+  collaboratorHovers: { userId: string; username: string; color: string }[];
+}) {
+  const isSelected = selectedId === element.id;
+  const isDragTarget = dragOverId === element.id;
+  const isDragged = draggedId === element.id;
+  const Tag = element.tagName as keyof JSX.IntrinsicElements;
+
+  // Build border/indicator for drop position
+  let dropIndicator: React.CSSProperties = {};
+  if (isDragTarget && dragOverPos === 'before') {
+    dropIndicator = { borderTop: '3px solid #6366f1' };
+  } else if (isDragTarget && dragOverPos === 'after') {
+    dropIndicator = { borderBottom: '3px solid #6366f1' };
+  } else if (isDragTarget && dragOverPos === 'inside') {
+    dropIndicator = { outline: '3px dashed #6366f1', outlineOffset: '2px' };
+  }
+
+  const style: React.CSSProperties = {
+    ...element.styles,
+    ...dropIndicator,
+    outline: isSelected && !isDragTarget ? '2px solid #6366f1' : isDragTarget && dragOverPos === 'inside' ? '3px dashed #6366f1' : collaboratorHovers.length > 0 ? `2px solid ${collaboratorHovers[0].color}` : 'none',
+    outlineOffset: isSelected || collaboratorHovers.length > 0 ? '2px' : '0',
+    position: 'relative',
+    cursor: isDragged ? 'grabbing' : 'grab',
+    transition: 'outline 0.1s ease, border 0.1s ease',
+    opacity: isDragged ? 0.5 : 1,
+  };
+
+  const attribs: Record<string, string> = { ...element.attributes, 'data-element-id': element.id };
+  if (element.props?.src) attribs.src = element.props.src;
+  if (element.props?.href) attribs.href = element.props.href;
+  if (element.props?.alt) attribs.alt = element.props.alt;
+  if (element.props?.placeholder) attribs.placeholder = element.props.placeholder;
+  if (element.props?.type) attribs.type = element.props.type;
+  if (element.props?.value) attribs.value = element.props.value;
+  if (element.props?.name) attribs.name = element.props.name;
+  if (element.props?.id) attribs.id = element.props.id;
+
+  const isVoidTag = ['br','hr','img','input','link','meta','area','base','col','embed','source','track','wbr'].includes(element.tagName);
+
+  if (isVoidTag) {
+    return (
+      <div style={{ position: 'relative', display: 'inline-block' }}>
+        <Tag {...attribs} style={style} className={element.classes.join(' ')}
+          draggable
+          onDragStart={(e: React.DragEvent) => onDragStart(e, element.id)}
+          onDragOver={onDragOver}
+          onDrop={onDrop}
+          onDragEnd={onDragEnd}
+          onClick={(e: React.MouseEvent) => onSelect(e, element.id)}
+          onContextMenu={(e: React.MouseEvent) => onContextMenu(e, element.id)}
+          onMouseEnter={() => (window as any).__wsElementHover?.(element.id)}
+          onMouseLeave={() => (window as any).__wsElementHover?.(null)} />
+        {collaboratorHovers.length > 0 && (
+          <div className="absolute top-0 right-0 flex -space-x-1">
+            {collaboratorHovers.map((c) => (
+              <div key={c.userId} className="w-3.5 h-3.5 rounded-full flex items-center justify-center text-[6px] font-bold text-white"
+                style={{ backgroundColor: c.color }} title={c.username}>
+                {c.username.charAt(0).toUpperCase()}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <Tag {...attribs} style={style} className={element.classes.join(' ')}
+        draggable
+        onDragStart={(e: React.DragEvent) => onDragStart(e, element.id)}
+        onDragOver={onDragOver}
+
+        onDrop={onDrop}
+        onDragEnd={onDragEnd}
+        onClick={(e: React.MouseEvent) => onSelect(e, element.id)}
+        onContextMenu={(e: React.MouseEvent) => onContextMenu(e, element.id)}
+        onMouseEnter={() => (window as any).__wsElementHover?.(element.id)}
+        onMouseLeave={() => (window as any).__wsElementHover?.(null)}>
+        {collaboratorHovers.length > 0 && (
+          <div className="absolute top-0 right-0 flex -space-x-1 z-10">
+            {collaboratorHovers.map((c) => (
+              <div key={c.userId} className="w-3.5 h-3.5 rounded-full flex items-center justify-center text-[6px] font-bold text-white"
+                style={{ backgroundColor: c.color }} title={c.username}>
+                {c.username.charAt(0).toUpperCase()}
+              </div>
+            ))}
+          </div>
+        )}
+        {element.props?.textContent || ''}
+        {(element.children || []).map((child) => (
+          <VisualElementRenderer key={child.id} element={child}
+            selectedId={selectedId} onSelect={onSelect} onContextMenu={onContextMenu}
+            depth={depth + 1} dragOverId={dragOverId} dragOverPos={dragOverPos}
+            onAddChild={onAddChild} onDragStart={onDragStart}
+            onDrop={onDrop} onDragOver={onDragOver}
+            onDragEnd={onDragEnd} draggedId={draggedId}
+            collaboratorHovers={(window as any).__wsCollaboratorHoverMap?.get(child.id) || []} />
+        ))}
+      </Tag>
+      {isVoidTag ? null : (
+        <button onClick={(e) => { e.stopPropagation(); onAddChild(element.id); }}
+          className="absolute -bottom-3 left-1/2 -translate-x-1/2 w-6 h-6 flex items-center justify-center rounded-full
+            bg-primary-600 text-white shadow-lg hover:bg-primary-500 transition-all opacity-0 hover:opacity-100 z-10"
+          title="Add child element">
+          <Plus className="w-3.5 h-3.5" />
+        </button>
+      )}
+    </div>
+  );
+}

client/src/components/VisualEditor/editorSandbox.ts

@@ -1,174 +0,0 @@
-export const SANDBOX_SCRIPT = `
-(function() {
-  var selectedSelector = null;
-
-  window.addEventListener('message', function(event) {
-    var data = event.data;
-    switch (data.type) {
-      case 'UPDATE_CONTENT':
-        updateContent(data.html, data.css, data.js);
-        break;
-      case 'GET_ELEMENT_AT':
-        var el = document.elementFromPoint(data.x - window.frameElement.getBoundingClientRect().left, data.y - window.frameElement.getBoundingClientRect().top);
-        if (el) {
-          var selector = getUniqueSelector(el);
-          if (data.action === 'drop') {
-            window.parent.postMessage({ type: 'ELEMENT_DROP', selector: selector, x: data.x, y: data.y }, '*');
-          } else {
-            window.parent.postMessage({ type: 'ELEMENT_DRAG_OVER', selector: selector, x: data.x, y: data.y }, '*');
-          }
-        }
-        break;
-      case 'SELECT_ELEMENT':
-        selectedSelector = data.selector;
-        document.querySelectorAll('[data-rb-selected]').forEach(function(el) { el.removeAttribute('data-rb-selected'); });
-        if (data.selector) {
-          var selEl = document.querySelector(data.selector);
-          if (selEl) selEl.setAttribute('data-rb-selected', 'true');
-        }
-        break;
-      case 'UPDATE_ELEMENT_ATTRIBUTE':
-        var target = document.querySelector(data.selector);
-        if (target) {
-          target.setAttribute(data.attr, data.value);
-          if (data.attr === 'id' && data.value) {
-            target.setAttribute('data-rb-editable', 'true');
-          }
-        }
-        break;
-      case 'SHOW_OUTLINES':
-        if (data.show) renderDropZones();
-        else document.querySelectorAll('.rb-drop-zone').forEach(function(el) { el.remove(); });
-        break;
-    }
-  });
-
-  function updateContent(html, css, js) {
-    var parser = new DOMParser();
-    var doc = parser.parseFromString(html, 'text/html');
-    document.body.innerHTML = doc.body.innerHTML;
-    document.head.innerHTML = doc.head.innerHTML;
-
-    var styleEl = document.getElementById('rb-styles');
-    if (!styleEl) {
-      styleEl = document.createElement('style');
-      styleEl.id = 'rb-styles';
-      document.head.appendChild(styleEl);
-    }
-    styleEl.textContent = css;
-
-    var scriptEl = document.getElementById('rb-script');
-    if (!scriptEl) {
-      scriptEl = document.createElement('script');
-      scriptEl.id = 'rb-script';
-      document.body.appendChild(scriptEl);
-    }
-    scriptEl.textContent = js;
-
-    attachEditorListeners();
-    renderDropZones();
-  }
-
-  function getUniqueSelector(el) {
-    if (el.id) return '#' + CSS.escape(el.id);
-    var path = [];
-    while (el && el.nodeType === Node.ELEMENT_NODE) {
-      var selector = el.tagName.toLowerCase();
-      if (el.id) { path.unshift('#' + CSS.escape(el.id)); break; }
-      var sib = el.parentNode.childNodes;
-      var idx = 1;
-      for (var i = 0; i < sib.length; i++) {
-        if (sib[i] === el) { selector += ':nth-child(' + idx + ')'; break; }
-        if (sib[i].nodeType === Node.ELEMENT_NODE && sib[i].tagName === el.tagName) idx++;
-      }
-      path.unshift(selector);
-      el = el.parentNode;
-    }
-    return path.join(' > ');
-  }
-
-  function attachEditorListeners() {
-    document.querySelectorAll('[data-rb-editable]').forEach(function(el) {
-      el.addEventListener('click', function(e) {
-        e.stopPropagation();
-        window.parent.postMessage({ type: 'ELEMENT_CLICK', selector: getUniqueSelector(this) }, '*');
-      });
-      el.addEventListener('mouseenter', function() {
-        window.parent.postMessage({ type: 'ELEMENT_HOVER', selector: getUniqueSelector(this) }, '*');
-      });
-      el.addEventListener('mouseleave', function() {
-        window.parent.postMessage({ type: 'ELEMENT_HOVER', selector: null }, '*');
-      });
-    });
-    document.addEventListener('click', function(e) {
-      if (e.target === document.body || e.target === document.documentElement) {
-        window.parent.postMessage({ type: 'CANVAS_CLICK' }, '*');
-      }
-    });
-  }
-
-  function renderDropZones() {
-    document.querySelectorAll('.rb-drop-zone').forEach(function(el) { el.remove(); });
-    document.querySelectorAll('[data-rb-has-slots]').forEach(function(parent) {
-      var slotCount = parseInt(parent.getAttribute('data-rb-slot-count') || '1');
-      var isForm = parent.tagName === 'FORM';
-      var existingChildren = parent.querySelectorAll(':scope > [data-rb-editable]');
-      var renderedSlots = 0;
-      for (var i = 0; i < slotCount; i++) {
-        var child = existingChildren[i];
-        if (!child || (isForm && renderedSlots > 0)) {
-          var zone = document.createElement('div');
-          zone.className = 'rb-drop-zone';
-          zone.dataset.rbSlotIndex = String(i);
-          zone.dataset.rbParentSelector = getUniqueSelector(parent);
-          zone.addEventListener('dragover', function(e) { e.preventDefault(); this.classList.add('rb-drop-zone-active'); });
-          zone.addEventListener('dragleave', function() { this.classList.remove('rb-drop-zone-active'); });
-          zone.addEventListener('drop', function(e) {
-            e.preventDefault();
-            this.classList.remove('rb-drop-zone-active');
-            window.parent.postMessage({
-              type: 'ELEMENT_DROP_IN_SLOT',
-              parentSelector: this.dataset.rbParentSelector,
-              slotIndex: parseInt(this.dataset.rbSlotIndex || '0'),
-            }, '*');
-          });
-          parent.appendChild(zone);
-        }
-        if (child) renderedSlots++;
-      }
-    });
-  }
-
-  window.parent.postMessage({ type: 'READY' }, '*');
-  attachEditorListeners();
-  renderDropZones();
-})();
-`;
-
-export function generateEditorPage(html: string, css: string, js: string): string {
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <style id="rb-styles">${css}</style>
-  <style>
-    [data-rb-editable] { outline: 1px solid transparent; transition: outline 0.1s; cursor: pointer; min-height: 4px; min-width: 4px; }
-    [data-rb-editable]:hover { outline: 1px solid #6366f1; }
-    [data-rb-selected] { outline: 2px solid #6366f1 !important; }
-    .rb-drop-zone { outline: 2px dashed #94a3b8; min-height: 20px; min-width: 100%; transition: all 0.15s; }
-    .rb-drop-zone-active { outline: 2px dashed #6366f1; background: rgba(99,102,241,0.05); }
-  </style>
-</head>
-<body>
-  ${extractBodyContent(html)}
-  <script id="rb-script">${js}</script>
-  <script>${SANDBOX_SCRIPT}</script>
-</body>
-</html>`;
-}
-
-function extractBodyContent(fullHtml: string): string {
-  const match = fullHtml.match(/<body[^>]*>([\s\S]*)<\/body>/i);
-  return match ? match[1] : fullHtml;
-}

client/src/hooks/useWebSocket.ts

@@ -16,9 +16,6 @@ export function useWebSocket(projectId: string | undefined) {
     updateCursor,
     updateBlockSelection,
     updateElementHover,
-    updatePointerPosition,
-    updateDraggingBlock,
-    updateTextFieldCursor,
     setConnected,
   } = useCollaborationStore();
   const socketRef = useRef<Socket | null>(null);
@@ -75,43 +72,12 @@ export function useWebSocket(projectId: string | undefined) {
       updateElementHover(userId, elementId);
     });
 
-    // NEW: pointer move tracking
-    socket.on('pointer_move', ({ userId, x, y }: { userId: string; x: number; y: number }) => {
-      updatePointerPosition(userId, x, y);
-    });
-
-    // NEW: block drag tracking
-    socket.on('block_drag_start', ({ userId, blockId, x, y }: { userId: string; blockId: string; x: number; y: number }) => {
-      updateDraggingBlock(userId, { blockId, x, y });
-    });
-
-    socket.on('block_drag_move', ({ userId, blockId, x, y }: { userId: string; blockId: string; x: number; y: number }) => {
-      updateDraggingBlock(userId, { blockId, x, y });
-    });
-
-    socket.on('block_drag_end', ({ userId }: { userId: string }) => {
-      updateDraggingBlock(userId, null);
-    });
-
-    // NEW: text field cursor tracking
-    socket.on('text_field_focus', ({ userId, fieldId }: { userId: string; fieldId: string }) => {
-      updateTextFieldCursor(userId, { fieldId, position: 0 });
-    });
-
-    socket.on('text_field_cursor', ({ userId, fieldId, position }: { userId: string; fieldId: string; position: number }) => {
-      updateTextFieldCursor(userId, { fieldId, position });
-    });
-
-    socket.on('text_field_blur', ({ userId }: { userId: string }) => {
-      updateTextFieldCursor(userId, null);
-    });
-
-    // File updates
     socket.on('file_updated', ({ fileId, content }: { fileId: string; content: string }) => {
       const { updateFile } = useCollaborationStore.getState();
       updateFile(fileId, content);
     });
 
+    // Remote file CRUD
     socket.on('file_added', ({ file, parentId }: { file: any; parentId?: string }) => {
       const { addFile } = useEditorStore.getState();
       addFile(file, parentId);
@@ -127,7 +93,7 @@ export function useWebSocket(projectId: string | undefined) {
       removeFile(fileId);
     });
 
-    // Visual element CRUD
+    // Remote visual element CRUD
     socket.on('visual_element_added', ({ element, parentId }: { element: any; parentId?: string }) => {
       const { addVisualElement } = useEditorStore.getState();
       addVisualElement(element, parentId);
@@ -148,7 +114,6 @@ export function useWebSocket(projectId: string | undefined) {
       setVisualElements(elements);
     });
 
-    // Project save notification
     socket.on('project_saved', ({ updatedAt, savedBy }: { updatedAt: number; savedBy: string }) => {
       const { setLastSaved, setSavedBy } = useCollaborationStore.getState();
       setLastSaved(updatedAt);
@@ -161,9 +126,8 @@ export function useWebSocket(projectId: string | undefined) {
       if (globalSocket === socket) globalSocket = null;
       setConnected(false);
     };
-  }, [token, projectId, setCollaborators, addCollaborator, removeCollaborator, updateActiveFile, updateCursor, updateBlockSelection, updateElementHover, updatePointerPosition, updateDraggingBlock, updateTextFieldCursor, setConnected]);
+  }, [token, projectId, setCollaborators, addCollaborator, removeCollaborator, updateActiveFile, updateCursor, updateBlockSelection, updateElementHover, setConnected]);
 
-  // ---- EMIT HELPERS ----
   const emitFileChanged = useCallback((fileId: string, content: string) => {
     if (socketRef.current?.connected && projectId) {
       socketRef.current.emit('file_changed', { projectId, fileId, content });
@@ -194,52 +158,6 @@ export function useWebSocket(projectId: string | undefined) {
     }
   }, [projectId]);
 
-  // NEW: pointer move
-  const emitPointerMove = useCallback((x: number, y: number) => {
-    if (socketRef.current?.connected && projectId) {
-      socketRef.current.emit('pointer_move', { projectId, x, y });
-    }
-  }, [projectId]);
-
-  // NEW: block drag
-  const emitBlockDragStart = useCallback((blockId: string, x: number, y: number) => {
-    if (socketRef.current?.connected && projectId) {
-      socketRef.current.emit('block_drag_start', { projectId, blockId, x, y });
-    }
-  }, [projectId]);
-
-  const emitBlockDragMove = useCallback((blockId: string, x: number, y: number) => {
-    if (socketRef.current?.connected && projectId) {
-      socketRef.current.emit('block_drag_move', { projectId, blockId, x, y });
-    }
-  }, [projectId]);
-
-  const emitBlockDragEnd = useCallback(() => {
-    if (socketRef.current?.connected && projectId) {
-      socketRef.current.emit('block_drag_end', { projectId });
-    }
-  }, [projectId]);
-
-  // NEW: text field
-  const emitTextFieldFocus = useCallback((fieldId: string) => {
-    if (socketRef.current?.connected && projectId) {
-      socketRef.current.emit('text_field_focus', { projectId, fieldId });
-    }
-  }, [projectId]);
-
-  const emitTextFieldCursor = useCallback((fieldId: string, position: number) => {
-    if (socketRef.current?.connected && projectId) {
-      socketRef.current.emit('text_field_cursor', { projectId, fieldId, position });
-    }
-  }, [projectId]);
-
-  const emitTextFieldBlur = useCallback(() => {
-    if (socketRef.current?.connected && projectId) {
-      socketRef.current.emit('text_field_blur', { projectId });
-    }
-  }, [projectId]);
-
-  // File CRUD
   const emitFileAdded = useCallback((file: any, parentId?: string) => {
     if (socketRef.current?.connected && projectId) {
       socketRef.current.emit('file_added', { projectId, file, parentId });
@@ -258,7 +176,6 @@ export function useWebSocket(projectId: string | undefined) {
     }
   }, [projectId]);
 
-  // Visual element CRUD
   const emitVisualElementAdded = useCallback((element: any, parentId?: string) => {
     if (socketRef.current?.connected && projectId) {
       socketRef.current.emit('visual_element_added', { projectId, element, parentId });
@@ -283,7 +200,6 @@ export function useWebSocket(projectId: string | undefined) {
     }
   }, [projectId]);
 
-  // Save via WS
   const emitSave = useCallback((data: any): Promise<any> => {
     return new Promise((resolve, reject) => {
       if (!socketRef.current?.connected || !projectId) {
@@ -297,72 +213,6 @@ export function useWebSocket(projectId: string | undefined) {
     });
   }, [projectId]);
 
-  // NEW: Project CRUD via WS
-  const emitProjectList = useCallback((): Promise<any> => {
-    return new Promise((resolve, reject) => {
-      if (!socketRef.current?.connected) {
-        reject(new Error('Not connected'));
-        return;
-      }
-      socketRef.current.emit('project_list', {}, (response: any) => {
-        if (response?.error) reject(new Error(response.error));
-        else resolve(response);
-      });
-    });
-  }, []);
-
-  const emitProjectCreate = useCallback((name: string, framework: string, description?: string): Promise<any> => {
-    return new Promise((resolve, reject) => {
-      if (!socketRef.current?.connected) {
-        reject(new Error('Not connected'));
-        return;
-      }
-      socketRef.current.emit('project_create', { name, framework, description }, (response: any) => {
-        if (response?.error) reject(new Error(response.error));
-        else resolve(response);
-      });
-    });
-  }, []);
-
-  const emitProjectGet = useCallback((pid: string): Promise<any> => {
-    return new Promise((resolve, reject) => {
-      if (!socketRef.current?.connected) {
-        reject(new Error('Not connected'));
-        return;
-      }
-      socketRef.current.emit('project_get', { projectId: pid }, (response: any) => {
-        if (response?.error) reject(new Error(response.error));
-        else resolve(response);
-      });
-    });
-  }, []);
-
-  const emitProjectUpdate = useCallback((pid: string, updates: any): Promise<any> => {
-    return new Promise((resolve, reject) => {
-      if (!socketRef.current?.connected) {
-        reject(new Error('Not connected'));
-        return;
-      }
-      socketRef.current.emit('project_update', { projectId: pid, ...updates }, (response: any) => {
-        if (response?.error) reject(new Error(response.error));
-        else resolve(response);
-      });
-    });
-  }, []);
-
-  const emitProjectDelete = useCallback((pid: string): Promise<any> => {
-    return new Promise((resolve, reject) => {
-      if (!socketRef.current?.connected) {
-        reject(new Error('Not connected'));
-        return;
-      }
-      socketRef.current.emit('project_delete', { projectId: pid }, (response: any) => {
-        if (response?.error) reject(new Error(response.error));
-        else resolve(response);
-      });
-    });
-  }, []);
-
   return {
     socket: socketRef.current,
     emitFileChanged,
@@ -370,13 +220,6 @@ export function useWebSocket(projectId: string | undefined) {
     emitCursorMove,
     emitBlockSelection,
     emitElementHover,
-    emitPointerMove,
-    emitBlockDragStart,
-    emitBlockDragMove,
-    emitBlockDragEnd,
-    emitTextFieldFocus,
-    emitTextFieldCursor,
-    emitTextFieldBlur,
     emitFileAdded,
     emitFileRenamed,
     emitFileDeleted,
@@ -385,11 +228,6 @@ export function useWebSocket(projectId: string | undefined) {
     emitVisualElementRemoved,
     emitVisualElementsReordered,
     emitSave,
-    emitProjectList,
-    emitProjectCreate,
-    emitProjectGet,
-    emitProjectUpdate,
-    emitProjectDelete,
   };
 }
 

client/src/store/collaborationStore.ts

@@ -10,10 +10,6 @@ export interface Collaborator {
   cursor: { line: number; ch: number } | null;
   selectedBlockId: string | null;
   selectedElementId: string | null;
-  pointerPosition: { x: number; y: number } | null;
-  draggingBlock: { blockId: string; x: number; y: number } | null;
-  textFieldCursor: { fieldId: string; position: number } | null;
-  typing: boolean;
   joinedAt: number;
 }
 
@@ -37,9 +33,6 @@ interface CollaborationStore {
   updateCursor: (userId: string, fileId: string, cursor: { line: number; ch: number } | null) => void;
   updateBlockSelection: (userId: string, blockId: string | null) => void;
   updateElementHover: (userId: string, elementId: string | null) => void;
-  updatePointerPosition: (userId: string, x: number, y: number) => void;
-  updateDraggingBlock: (userId: string, dragging: { blockId: string; x: number; y: number } | null) => void;
-  updateTextFieldCursor: (userId: string, cursor: { fieldId: string; position: number } | null) => void;
   updateFile: (fileId: string, content: string) => void;
   setLastSaved: (timestamp: number) => void;
   setSavedBy: (username: string) => void;
@@ -102,27 +95,6 @@ export const useCollaborationStore = create<CollaborationStore>((set, get) => ({
       ),
     })),
 
-  updatePointerPosition: (userId, x, y) =>
-    set((state) => ({
-      collaborators: state.collaborators.map((c) =>
-        c.userId === userId ? { ...c, pointerPosition: { x, y } } : c
-      ),
-    })),
-
-  updateDraggingBlock: (userId, dragging) =>
-    set((state) => ({
-      collaborators: state.collaborators.map((c) =>
-        c.userId === userId ? { ...c, draggingBlock: dragging } : c
-      ),
-    })),
-
-  updateTextFieldCursor: (userId, cursor) =>
-    set((state) => ({
-      collaborators: state.collaborators.map((c) =>
-        c.userId === userId ? { ...c, textFieldCursor: cursor } : c
-      ),
-    })),
-
   updateFile: (fileId, content) => {
     const state = useEditorStore.getState();
     if (state.activeFileId === fileId) {

client/src/store/editorStore.ts

@@ -1,18 +1,9 @@
 import { create } from 'zustand';
-import { ProjectFile, VisualElement, OutlineSlot } from '../types/blocks';
+import { ProjectFile, VisualElement } from '../types/blocks';
 
 type EditorMode = 'blocks' | 'visual' | 'code' | 'files' | 'preview';
 type ViewMode = 'design' | 'preview' | 'split';
 
-export interface ElementRef {
-  id: string;
-  tagName: string;
-  classes: string[];
-  attributes: Record<string, string>;
-  fileId: string;
-  linkedFiles: string[];
-}
-
 interface EditorStore {
   activeFileId: string | null;
   activeFileContent: string;
@@ -27,10 +18,6 @@ interface EditorStore {
   fileTree: ProjectFile[];
   blocksXml: Record<string, string>;
   blockCode: Record<string, string>;
-  elementCounters: Record<string, number>;
-  elementRegistry: ElementRef[];
-  slotCounts: Record<string, number>;
-  customIds: Set<string>;
 
   setActiveFile: (fileId: string | null) => void;
   setActiveFileContent: (content: string) => void;
@@ -42,7 +29,7 @@ interface EditorStore {
   toggleSnapToGrid: () => void;
   toggleMiniMap: () => void;
   setVisualElements: (elements: VisualElement[]) => void;
-  addVisualElement: (element: VisualElement, parentId?: string, insertIndex?: number) => void;
+  addVisualElement: (element: VisualElement, parentId?: string) => void;
   updateVisualElement: (id: string, updates: Partial<VisualElement>) => void;
   removeVisualElement: (id: string) => void;
   setFileTree: (files: ProjectFile[]) => void;
@@ -54,39 +41,6 @@ interface EditorStore {
   setBlockCode: (fileId: string, code: string) => void;
   getBlockCode: (fileId: string) => string;
   saveGeneratedCodeToFile: (fileId: string, code: string) => void;
-  incrementCounter: (tag: string) => string;
-  resetCounter: (tag: string) => void;
-  recomputeRegistry: () => void;
-  recalculateSlots: (elementId: string) => void;
-  setSlotCount: (elementId: string, count: number) => void;
-  setCustomId: (elementId: string, isCustom: boolean) => void;
-}
-
-function getChildCount(elements: VisualElement[], id: string): number {
-  for (const el of elements) {
-    if (el.id === id) return (el.children || []).length;
-    if (el.children) {
-      const found = getChildCount(el.children, id);
-      if (found !== -1) return found;
-    }
-  }
-  return -1;
-}
-
-function getLinkedFiles(fileId: string, fileTree: ProjectFile[]): string[] {
-  const file = findFileById(fileTree, fileId);
-  return file?.linkedFiles || [];
-}
-
-function findFileById(files: ProjectFile[], id: string): ProjectFile | null {
-  for (const f of files) {
-    if (f.id === id) return f;
-    if (f.children) {
-      const found = findFileById(f.children, id);
-      if (found) return found;
-    }
-  }
-  return null;
 }
 
 export const useEditorStore = create<EditorStore>((set, get) => ({
@@ -103,10 +57,6 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
   fileTree: [],
   blocksXml: {},
   blockCode: {},
-  elementCounters: {},
-  elementRegistry: [],
-  slotCounts: {},
-  customIds: new Set<string>(),
 
   setActiveFile: (fileId) => {
     const state = get();
@@ -129,89 +79,57 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
   setZoom: (zoom) => set({ zoom: Math.max(0.25, Math.min(2, zoom)) }),
   toggleSnapToGrid: () => set((s) => ({ snapToGrid: !s.snapToGrid })),
   toggleMiniMap: () => set((s) => ({ showMiniMap: !s.showMiniMap })),
-
   setVisualElements: (elements) => set({ visualElements: elements || [] }),
-
-  addVisualElement: (element, parentId, insertIndex) =>
+  addVisualElement: (element, parentId) =>
     set((state) => {
       const elements = state.visualElements || [];
-      let newElements: VisualElement[];
       if (!parentId) {
-        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) {
-              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) };
-            }
-            return el;
-          });
-        newElements = addToParent(elements);
+        return { visualElements: [...elements, element] };
       }
-      setTimeout(() => {
-        if (parentId) get().recalculateSlots(parentId);
-        get().recomputeRegistry();
-      }, 0);
-      return { visualElements: newElements };
+      const addToParent = (elements: VisualElement[]): VisualElement[] =>
+        (elements || []).map((el) => {
+          if (el.id === parentId) {
+            return { ...el, children: [...(el.children || []), element] };
+          }
+          if (el.children) {
+            return { ...el, children: addToParent(el.children) };
+          }
+          return el;
+        });
+      return { visualElements: addToParent(elements) };
     }),
-
   updateVisualElement: (id, updates) =>
     set((state) => {
       const elements = state.visualElements || [];
-      const updateRecursive = (els: VisualElement[]): VisualElement[] =>
-        (els || []).map((el) => {
+      const updateRecursive = (elements: VisualElement[]): VisualElement[] =>
+        (elements || []).map((el) => {
           if (el.id === id) return { ...el, ...updates };
           if (el.children) return { ...el, children: updateRecursive(el.children) };
           return el;
         });
       return { visualElements: updateRecursive(elements) };
     }),
-
   removeVisualElement: (id) =>
     set((state) => {
       const elements = state.visualElements || [];
-      let parentId: string | null = null;
-      const removeRecursive = (els: VisualElement[], parentElId?: string): VisualElement[] =>
-        (els || []).filter((el) => {
-          if (el.id === id) { parentId = parentElId || null; return false; }
-          if (el.children) el.children = removeRecursive(el.children || [], el.id);
+      const removeRecursive = (elements: VisualElement[]): VisualElement[] =>
+        (elements || []).filter((el) => {
+          if (el.id === id) return false;
+          if (el.children) el.children = removeRecursive(el.children || []);
           return true;
         });
-      const newElements = removeRecursive(elements);
-      // Recalculate slots for parent
-      setTimeout(() => {
-        if (parentId) get().recalculateSlots(parentId);
-        get().recomputeRegistry();
-      }, 0);
       return {
-        visualElements: newElements,
+        visualElements: removeRecursive(elements),
         selectedElementId: state.selectedElementId === id ? null : state.selectedElementId,
       };
     }),
-
   setFileTree: (files) => set({ fileTree: files || [] }),
-
   addFile: (file, parentId) =>
     set((state) => {
       const files = state.fileTree || [];
       if (!parentId) return { fileTree: [...files, file] };
-      const addToFolder = (entries: ProjectFile[]): ProjectFile[] =>
-        (entries || []).map((f) => {
+      const addToFolder = (files: ProjectFile[]): ProjectFile[] =>
+        (files || []).map((f) => {
           if (f.id === parentId && f.type === 'folder') {
             return { ...f, children: [...(f.children || []), file] };
           }
@@ -220,12 +138,11 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
         });
       return { fileTree: addToFolder(files) };
     }),
-
   removeFile: (id) =>
     set((state) => {
       const files = state.fileTree || [];
-      const removeRecursive = (entries: ProjectFile[]): ProjectFile[] =>
-        (entries || []).filter((f) => {
+      const removeRecursive = (files: ProjectFile[]): ProjectFile[] =>
+        (files || []).filter((f) => {
           if (f.id === id) return false;
           if (f.children) f.children = removeRecursive(f.children || []);
           return true;
@@ -235,17 +152,20 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
         activeFileId: state.activeFileId === id ? null : state.activeFileId,
       };
     }),
-
-  getBlocksXml: (fileId: string) => get().blocksXml[fileId] || '',
-
+  getBlocksXml: (fileId: string) => {
+    return get().blocksXml[fileId] || '';
+  },
   setBlocksXml: (fileId: string, xml: string) =>
-    set((state) => ({ blocksXml: { ...state.blocksXml, [fileId]: xml } })),
-
+    set((state) => ({
+      blocksXml: { ...state.blocksXml, [fileId]: xml },
+    })),
   setBlockCode: (fileId: string, code: string) =>
-    set((state) => ({ blockCode: { ...state.blockCode, [fileId]: code } })),
-
-  getBlockCode: (fileId: string) => get().blockCode[fileId] || '',
-
+    set((state) => ({
+      blockCode: { ...state.blockCode, [fileId]: code },
+    })),
+  getBlockCode: (fileId: string) => {
+    return get().blockCode[fileId] || '';
+  },
   saveGeneratedCodeToFile: (fileId: string, code: string) =>
     set((state) => {
       const files = state.fileTree || [];
@@ -260,105 +180,26 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
         activeFileContent: fileId === state.activeFileId ? code : state.activeFileContent,
       };
     }),
-
   updateFile: (id, updates) =>
     set((state) => {
       const files = state.fileTree || [];
-      const updateRecursive = (entries: ProjectFile[]): ProjectFile[] =>
-        (entries || []).map((f) => {
+      const updateRecursive = (files: ProjectFile[]): ProjectFile[] =>
+        (files || []).map((f) => {
           if (f.id === id) return { ...f, ...updates };
           if (f.children) return { ...f, children: updateRecursive(f.children) };
           return f;
         });
       return { fileTree: updateRecursive(files) };
     }),
+}));
 
-  incrementCounter: (tag) => {
-    const state = get();
-    const current = state.elementCounters[tag] || 0;
-    const next = current + 1;
-    set({ elementCounters: { ...state.elementCounters, [tag]: next } });
-    return `${tag}_${next}`;
-  },
-
-  resetCounter: (tag) =>
-    set((state) => {
-      const { [tag]: _, ...rest } = state.elementCounters;
-      return { elementCounters: rest };
-    }),
-
-  recomputeRegistry: () => {
-    const state = get();
-    const registry: ElementRef[] = [];
-
-    const walkElements = (els: VisualElement[], fileId: string) => {
-      (els || []).forEach((el) => {
-        registry.push({
-          id: el.props?.id || el.attributes?.id || el.id,
-          tagName: el.tagName,
-          classes: el.classes || [],
-          attributes: el.attributes || {},
-          fileId,
-          linkedFiles: getLinkedFiles(fileId, state.fileTree),
-        });
-        if (el.children) walkElements(el.children, fileId);
-      });
-    };
-
-    if (state.activeFileId) {
-      walkElements(state.visualElements, state.activeFileId);
+function findFileById(files: ProjectFile[], id: string): ProjectFile | null {
+  for (const f of files) {
+    if (f.id === id) return f;
+    if (f.children) {
+      const found = findFileById(f.children, id);
+      if (found) return found;
     }
-
-    set({ elementRegistry: registry });
-  },
-
-  recalculateSlots: (elementId) => {
-    const state = get();
-    const updateRecursive = (elements: VisualElement[]): VisualElement[] =>
-      (elements || []).map((el) => {
-        if (el.id === elementId) {
-          const childCount = (el.children || []).length;
-          const userSlotCount = state.slotCounts[elementId];
-          const targetSlotCount = Math.max(
-            userSlotCount !== undefined ? Math.max(userSlotCount, childCount) : childCount + 1,
-            1
-          );
-          const slots: OutlineSlot[] = [];
-          for (let i = 0; i < targetSlotCount; i++) {
-            const occupied = (el.children || [])[i];
-            slots.push({
-              id: `slot_${el.id}_${i}`,
-              parentId: elementId,
-              index: i,
-              occupiedBy: occupied?.id || null,
-            });
-          }
-          return { ...el, slots };
-        }
-        if (el.children) return { ...el, children: updateRecursive(el.children) };
-        return el;
-      });
-    set((state) => ({
-      visualElements: updateRecursive(state.visualElements),
-    }));
-  },
-
-  setSlotCount: (elementId, count) => {
-    const state = get();
-    const childCount = Math.max(0, getChildCount(state.visualElements, elementId));
-    const clampedCount = Math.max(count, childCount, 1);
-    set((s) => ({
-      slotCounts: { ...s.slotCounts, [elementId]: clampedCount },
-    }));
-    get().recalculateSlots(elementId);
-  },
-
-  setCustomId: (elementId, isCustom) => {
-    set((state) => {
-      const newSet = new Set(state.customIds);
-      if (isCustom) newSet.add(elementId);
-      else newSet.delete(elementId);
-      return { customIds: newSet };
-    });
-  },
-}));
+  }
+  return null;
+}

client/src/store/projectStore.ts

@@ -1,7 +1,6 @@
 import { create } from 'zustand';
 import { api } from '../api/client';
 import { Project, FrameworkType } from '../types';
-import { getSocket } from '../hooks/useWebSocket';
 
 interface ProjectStore {
   projects: Project[];
@@ -17,20 +16,6 @@ interface ProjectStore {
   syncProject: (id: string) => Promise<void>;
 }
 
-function wsCall<T>(event: string, data: any): Promise<T> {
-  return new Promise((resolve, reject) => {
-    const socket = getSocket();
-    if (socket?.connected) {
-      socket.emit(event, data, (response: any) => {
-        if (response?.error) reject(new Error(response.error));
-        else resolve(response);
-      });
-    } else {
-      reject(new Error('WebSocket not connected'));
-    }
-  });
-}
-
 export const useProjectStore = create<ProjectStore>((set, get) => ({
   projects: [],
   currentProject: null,
@@ -40,14 +25,8 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
   fetchProjects: async () => {
     set({ loading: true, error: null });
     try {
-      const socket = getSocket();
-      if (socket?.connected) {
-        const { projects } = await wsCall<any>('project_list', {});
-        set({ projects, loading: false });
-      } else {
-        const { projects } = await api.getProjects();
-        set({ projects, loading: false });
-      }
+      const { projects } = await api.getProjects();
+      set({ projects, loading: false });
     } catch (err: any) {
       set({ error: err.message, loading: false });
     }
@@ -56,14 +35,8 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
   loadProject: async (id: string) => {
     set({ loading: true, error: null });
     try {
-      const socket = getSocket();
-      if (socket?.connected) {
-        const { project } = await wsCall<any>('project_get', { projectId: id });
-        set({ currentProject: project, loading: false });
-      } else {
-        const { project } = await api.getProject(id);
-        set({ currentProject: project, loading: false });
-      }
+      const { project } = await api.getProject(id);
+      set({ currentProject: project, loading: false });
     } catch (err: any) {
       set({ error: err.message, loading: false });
     }
@@ -72,15 +45,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
   createProject: async (name: string, framework: FrameworkType, description?: string) => {
     set({ loading: true, error: null });
     try {
-      const socket = getSocket();
-      let project: Project;
-      if (socket?.connected) {
-        const result = await wsCall<any>('project_create', { name, framework, description });
-        project = result.project;
-      } else {
-        const result = await api.createProject(name, framework, description);
-        project = result.project;
-      }
+      const { project } = await api.createProject(name, framework, description);
       set((state) => ({ projects: [project, ...state.projects], loading: false }));
       return project;
     } catch (err: any) {
@@ -91,12 +56,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
 
   updateProject: async (id: string, updates: any) => {
     try {
-      const socket = getSocket();
-      if (socket?.connected) {
-        await wsCall<any>('project_update', { projectId: id, ...updates });
-      } else {
-        await api.updateProject(id, updates);
-      }
+      await api.updateProject(id, updates);
       set((state) => ({
         currentProject: state.currentProject?.id === id
           ? { ...state.currentProject, ...updates }
@@ -109,12 +69,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
 
   deleteProject: async (id: string) => {
     try {
-      const socket = getSocket();
-      if (socket?.connected) {
-        await wsCall<any>('project_delete', { projectId: id });
-      } else {
-        await api.deleteProject(id);
-      }
+      await api.deleteProject(id);
       set((state) => ({
         projects: state.projects.filter((p) => p.id !== id),
         currentProject: state.currentProject?.id === id ? null : state.currentProject,

client/src/types/blocks.ts

@@ -15,8 +15,6 @@ export interface BlockDefinition {
   config: BlockConfigField[];
   color: string;
   icon: string;
-  dangerous?: boolean;
-  blockVariables?: { name: string; type: string }[];
   compile: (config: Record<string, any>, inputs: Record<string, string>) => string;
 }
 
@@ -37,7 +35,6 @@ export interface BlockConfigField {
   placeholder?: string;
   min?: number;
   max?: number;
-  allowVariable?: boolean;
 }
 
 export interface BlockNode {
@@ -57,14 +54,6 @@ export interface VisualElement {
   styles: Record<string, string>;
   classes: string[];
   attributes: Record<string, string>;
-  slots?: OutlineSlot[];
-}
-
-export interface OutlineSlot {
-  id: string;
-  parentId: string;
-  index: number;
-  occupiedBy: string | null;
 }
 
 export type { ProjectFile, BlockCategory };

client/src/utils/formatCode.ts

@@ -1,42 +0,0 @@
-import prettier from 'prettier';
-
-export type CodeLanguage = 'html' | 'css' | 'javascript' | 'typescript' | 'json' | 'markdown';
-
-const parserMap: Record<CodeLanguage, string> = {
-  html: 'html',
-  css: 'css',
-  javascript: 'babel',
-  typescript: 'typescript',
-  json: 'json',
-  markdown: 'markdown',
-};
-
-export async function formatCode(code: string, language: CodeLanguage): Promise<string> {
-  try {
-    const parser = parserMap[language] || 'html';
-    const formatted = await prettier.format(code, {
-      parser,
-      htmlWhitespaceSensitivity: 'ignore',
-      singleQuote: true,
-      tabWidth: 2,
-      trailingComma: 'es5',
-      printWidth: 100,
-    });
-    return formatted;
-  } catch {
-    return code;
-  }
-}
-
-export function getFileLanguage(fileType: string): CodeLanguage {
-  switch (fileType) {
-    case 'html': return 'html';
-    case 'css': return 'css';
-    case 'js': return 'javascript';
-    case 'ts':
-    case 'typescript': return 'typescript';
-    case 'json': return 'json';
-    case 'md': return 'markdown';
-    default: return 'html';
-  }
-}

client/tsconfig.json

@@ -16,8 +16,7 @@
     "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
     "paths": {
-      "@/*": ["./src/*"],
-      "@shared/*": ["../shared/*"]
+      "@/*": ["./src/*"]
     },
     "baseUrl": "."
   },

client/vite.config.ts

@@ -7,7 +7,6 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),
-      '@shared': path.resolve(__dirname, '../shared'),
     },
   },
   server: {

server/src/services/realtime.ts

@@ -4,10 +4,6 @@ import jwt from 'jsonwebtoken';
 import { config } from '../config';
 import { getDatabase } from '../database';
 import { encryptCombined } from './encryption';
-import {
-  listProjects, getProject, createProject, updateProjectData,
-  updateProjectMeta, deleteProject, checkPermission
-} from './wsStore';
 
 interface AuthPayload {
   userId: string;
@@ -24,16 +20,12 @@ interface CollaborationSession {
   cursor: { line: number; ch: number } | null;
   selectedBlockId: string | null;
   selectedElementId: string | null;
-  pointerPosition: { x: number; y: number } | null;
-  draggingBlock: { blockId: string; x: number; y: number } | null;
-  textFieldCursor: { fieldId: string; position: number } | null;
-  typing: boolean;
   joinedAt: number;
   permission: 'view' | 'edit' | 'admin';
 }
 
-const sessions = new Map<string, CollaborationSession>();
-const projectRooms = new Map<string, Map<string, CollaborationSession[]>>();
+const sessions = new Map<string, CollaborationSession>(); // socketId -> session
+const projectRooms = new Map<string, Map<string, CollaborationSession[]>>(); // projectId -> { userId -> sessions[] }
 
 let io: Server;
 
@@ -46,12 +38,14 @@ export function initRealtime(httpServer: HttpServer): Server {
     },
     pingInterval: 25000,
     pingTimeout: 20000,
-    maxHttpBufferSize: 5e7, // 50MB for file uploads
   });
 
+  // Auth middleware for socket connections
   io.use((socket, next) => {
     const token = socket.handshake.auth?.token || socket.handshake.query?.token;
-    if (!token) return next(new Error('Authentication required'));
+    if (!token) {
+      return next(new Error('Authentication required'));
+    }
     try {
       const decoded = jwt.verify(token as string, config.jwtSecret) as { userId: string; email: string };
       const db = getDatabase();
@@ -70,6 +64,8 @@ export function initRealtime(httpServer: HttpServer): Server {
     // ---- PROJECT ROOM JOINING ----
     socket.on('join_project', ({ projectId }: { projectId: string }) => {
       if (!projectId) return;
+
+      // Check permission
       const db = getDatabase();
       const project = db.prepare('SELECT user_id FROM projects WHERE id = ?').get(projectId) as any;
       if (!project) return;
@@ -81,12 +77,13 @@ export function initRealtime(httpServer: HttpServer): Server {
         const collab = db.prepare(
           'SELECT permission FROM project_collaborators WHERE project_id = ? AND user_id = ?'
         ).get(projectId, user.userId) as any;
-        if (!collab) return;
+        if (!collab) return; // not a collaborator
         permission = collab.permission;
       }
 
       socket.join(`project:${projectId}`);
 
+      // Track session
       const session: CollaborationSession = {
         userId: user.userId,
         username: user.username,
@@ -96,10 +93,6 @@ export function initRealtime(httpServer: HttpServer): Server {
         cursor: null,
         selectedBlockId: null,
         selectedElementId: null,
-        pointerPosition: null,
-        draggingBlock: null,
-        textFieldCursor: null,
-        typing: false,
         joinedAt: Date.now(),
         permission,
       };
@@ -114,6 +107,7 @@ export function initRealtime(httpServer: HttpServer): Server {
       }
       room.get(user.userId)!.push(session);
 
+      // Notify others
       socket.to(`project:${projectId}`).emit('collaborator_joined', {
         userId: user.userId,
         username: user.username,
@@ -121,9 +115,10 @@ export function initRealtime(httpServer: HttpServer): Server {
         joinedAt: session.joinedAt,
       });
 
+      // Send current collaborators to the joining user
       const collaboratorList: any[] = [];
-      for (const [uid, sList] of room) {
-        for (const s of sList) {
+      for (const [uid, sessions] of room) {
+        for (const s of sessions) {
           collaboratorList.push({
             userId: uid,
             username: s.username,
@@ -132,10 +127,6 @@ export function initRealtime(httpServer: HttpServer): Server {
             cursor: s.cursor,
             selectedBlockId: s.selectedBlockId,
             selectedElementId: s.selectedElementId,
-            pointerPosition: s.pointerPosition,
-            draggingBlock: s.draggingBlock,
-            textFieldCursor: s.textFieldCursor,
-            typing: s.typing,
             joinedAt: s.joinedAt,
           });
         }
@@ -143,6 +134,7 @@ export function initRealtime(httpServer: HttpServer): Server {
       socket.emit('collaborator_list', { collaborators: collaboratorList });
     });
 
+    // ---- LEAVE PROJECT ----
     socket.on('leave_project', ({ projectId }: { projectId: string }) => {
       leaveProject(socket, projectId);
     });
@@ -159,9 +151,12 @@ export function initRealtime(httpServer: HttpServer): Server {
       });
     });
 
+    // ---- ACTIVE FILE CHANGE ----
     socket.on('active_file_changed', (data: { projectId: string; fileId: string | null }) => {
       const session = sessions.get(socket.id);
-      if (session) session.activeFileId = data.fileId;
+      if (session) {
+        session.activeFileId = data.fileId;
+      }
       socket.to(`project:${data.projectId}`).emit('collaborator_active_file', {
         userId: user.userId,
         username: user.username,
@@ -169,6 +164,7 @@ export function initRealtime(httpServer: HttpServer): Server {
       });
     });
 
+    // ---- CURSOR MOVE ----
     socket.on('cursor_move', (data: { projectId: string; fileId: string; cursor: { line: number; ch: number } }) => {
       const session = sessions.get(socket.id);
       if (session) {
@@ -183,9 +179,12 @@ export function initRealtime(httpServer: HttpServer): Server {
       });
     });
 
+    // ---- BLOCK SELECTION ----
     socket.on('block_selection_changed', (data: { projectId: string; blockId: string | null }) => {
       const session = sessions.get(socket.id);
-      if (session) session.selectedBlockId = data.blockId;
+      if (session) {
+        session.selectedBlockId = data.blockId;
+      }
       socket.to(`project:${data.projectId}`).emit('collaborator_block_selected', {
         userId: user.userId,
         username: user.username,
@@ -193,9 +192,12 @@ export function initRealtime(httpServer: HttpServer): Server {
       });
     });
 
+    // ---- VISUAL ELEMENT SELECTION / HOVER ----
     socket.on('visual_element_hover', (data: { projectId: string; elementId: string | null }) => {
       const session = sessions.get(socket.id);
-      if (session) session.selectedElementId = data.elementId;
+      if (session) {
+        session.selectedElementId = data.elementId;
+      }
       socket.to(`project:${data.projectId}`).emit('collaborator_element_hover', {
         userId: user.userId,
         username: user.username,
@@ -203,48 +205,59 @@ export function initRealtime(httpServer: HttpServer): Server {
       });
     });
 
-    // ---- FILE CRUD ----
+    // ---- FILE ADDED ----
     socket.on('file_added', (data: { projectId: string; file: any; parentId?: string }) => {
       const session = sessions.get(socket.id);
       if (!session || session.permission === 'view') return;
       socket.to(`project:${data.projectId}`).emit('file_added', {
-        file: data.file, parentId: data.parentId, addedBy: user.username,
+        file: data.file,
+        parentId: data.parentId,
+        addedBy: user.username,
       });
     });
 
+    // ---- FILE RENAMED ----
     socket.on('file_renamed', (data: { projectId: string; fileId: string; name: string }) => {
       const session = sessions.get(socket.id);
       if (!session || session.permission === 'view') return;
       socket.to(`project:${data.projectId}`).emit('file_renamed', {
-        fileId: data.fileId, name: data.name, renamedBy: user.username,
+        fileId: data.fileId,
+        name: data.name,
+        renamedBy: user.username,
       });
     });
 
+    // ---- FILE DELETED ----
     socket.on('file_deleted', (data: { projectId: string; fileId: string }) => {
       const session = sessions.get(socket.id);
       if (!session || session.permission === 'view') return;
       socket.to(`project:${data.projectId}`).emit('file_deleted', {
-        fileId: data.fileId, deletedBy: user.username,
+        fileId: data.fileId,
+        deletedBy: user.username,
       });
     });
 
-    // ---- VISUAL ELEMENT CRUD ----
+    // ---- VISUAL ELEMENT ADDED ----
     socket.on('visual_element_added', (data: { projectId: string; element: any; parentId?: string }) => {
       const session = sessions.get(socket.id);
       if (!session || session.permission === 'view') return;
       socket.to(`project:${data.projectId}`).emit('visual_element_added', {
-        element: data.element, parentId: data.parentId,
+        element: data.element,
+        parentId: data.parentId,
       });
     });
 
+    // ---- VISUAL ELEMENT UPDATED ----
     socket.on('visual_element_updated', (data: { projectId: string; elementId: string; updates: any }) => {
       const session = sessions.get(socket.id);
       if (!session || session.permission === 'view') return;
       socket.to(`project:${data.projectId}`).emit('visual_element_updated', {
-        elementId: data.elementId, updates: data.updates,
+        elementId: data.elementId,
+        updates: data.updates,
       });
     });
 
+    // ---- VISUAL ELEMENT REMOVED ----
     socket.on('visual_element_removed', (data: { projectId: string; elementId: string }) => {
       const session = sessions.get(socket.id);
       if (!session || session.permission === 'view') return;
@@ -253,6 +266,7 @@ export function initRealtime(httpServer: HttpServer): Server {
       });
     });
 
+    // ---- VISUAL ELEMENTS REORDERED ----
     socket.on('visual_elements_reordered', (data: { projectId: string; elements: any[] }) => {
       const session = sessions.get(socket.id);
       if (!session || session.permission === 'view') return;
@@ -261,124 +275,7 @@ export function initRealtime(httpServer: HttpServer): Server {
       });
     });
 
-    // ---- NEW: POINTER MOVE ----
-    socket.on('pointer_move', (data: { projectId: string; x: number; y: number }) => {
-      const session = sessions.get(socket.id);
-      if (session) session.pointerPosition = { x: data.x, y: data.y };
-      socket.to(`project:${data.projectId}`).emit('pointer_move', {
-        userId: user.userId, x: data.x, y: data.y,
-      });
-    });
-
-    // ---- NEW: BLOCK DRAG BROADCAST ----
-    socket.on('block_drag_start', (data: { projectId: string; blockId: string; x: number; y: number }) => {
-      const session = sessions.get(socket.id);
-      if (session) session.draggingBlock = { blockId: data.blockId, x: data.x, y: data.y };
-      socket.to(`project:${data.projectId}`).emit('block_drag_start', {
-        userId: user.userId, blockId: data.blockId, x: data.x, y: data.y,
-      });
-    });
-
-    socket.on('block_drag_move', (data: { projectId: string; blockId: string; x: number; y: number }) => {
-      const session = sessions.get(socket.id);
-      if (session) session.draggingBlock = { blockId: data.blockId, x: data.x, y: data.y };
-      socket.to(`project:${data.projectId}`).emit('block_drag_move', {
-        userId: user.userId, blockId: data.blockId, x: data.x, y: data.y,
-      });
-    });
-
-    socket.on('block_drag_end', (data: { projectId: string }) => {
-      const session = sessions.get(socket.id);
-      if (session) session.draggingBlock = null;
-      socket.to(`project:${data.projectId}`).emit('block_drag_end', {
-        userId: user.userId,
-      });
-    });
-
-    // ---- NEW: TEXT FIELD CURSOR TRACKING ----
-    socket.on('text_field_focus', (data: { projectId: string; fieldId: string }) => {
-      socket.to(`project:${data.projectId}`).emit('text_field_focus', {
-        userId: user.userId, fieldId: data.fieldId,
-      });
-    });
-
-    socket.on('text_field_cursor', (data: { projectId: string; fieldId: string; position: number }) => {
-      const session = sessions.get(socket.id);
-      if (session) session.textFieldCursor = { fieldId: data.fieldId, position: data.position };
-      socket.to(`project:${data.projectId}`).emit('text_field_cursor', {
-        userId: user.userId, fieldId: data.fieldId, position: data.position,
-      });
-    });
-
-    socket.on('text_field_blur', (data: { projectId: string }) => {
-      const session = sessions.get(socket.id);
-      if (session) session.textFieldCursor = null;
-      socket.to(`project:${data.projectId}`).emit('text_field_blur', {
-        userId: user.userId,
-      });
-    });
-
-    // ---- NEW: PROJECT CRUD VIA WS ----
-    socket.on('project_list', async (_data: any, callback?: (response: any) => void) => {
-      try {
-        const projects = listProjects(user.userId);
-        if (callback) callback({ projects });
-      } catch (err: any) {
-        if (callback) callback({ error: err.message });
-      }
-    });
-
-    socket.on('project_create', (data: { name: string; framework: string; description?: string }, callback?: (response: any) => void) => {
-      try {
-        const project = createProject(user.userId, data.name, data.framework, data.description);
-        if (callback) callback({ project });
-      } catch (err: any) {
-        if (callback) callback({ error: err.message });
-      }
-    });
-
-    socket.on('project_get', (data: { projectId: string }, callback?: (response: any) => void) => {
-      try {
-        const project = getProject(data.projectId, user.userId);
-        if (!project) {
-          if (callback) callback({ error: 'Project not found' });
-          return;
-        }
-        if (callback) callback({ project });
-      } catch (err: any) {
-        if (callback) callback({ error: err.message });
-      }
-    });
-
-    socket.on('project_update', (data: { projectId: string; name?: string; description?: string; data?: any }, callback?: (response: any) => void) => {
-      const permission = checkPermission(data.projectId, user.userId);
-      if (!permission || permission === 'view') {
-        if (callback) callback({ error: 'Permission denied' });
-        return;
-      }
-      try {
-        if (data.data) {
-          updateProjectData(data.projectId, data.data);
-        }
-        if (data.name !== undefined || data.description !== undefined) {
-          updateProjectMeta(data.projectId, { name: data.name, description: data.description });
-        }
-        const updatedAt = Date.now();
-        io.to(`project:${data.projectId}`).emit('project_saved', {
-          updatedAt, savedBy: user.username,
-        });
-        if (callback) callback({ success: true, updated_at: updatedAt });
-      } catch (err: any) {
-        if (callback) callback({ error: err.message });
-      }
-    });
-
-    socket.on('project_delete', (data: { projectId: string }, callback?: (response: any) => void) => {
-      const ok = deleteProject(data.projectId, user.userId);
-      if (callback) callback(ok ? { success: true } : { error: 'Permission denied or not found' });
-    });
-
-    // ---- SAVE PROJECT (legacy, kept for backward compat) ----
+    // ---- SAVE PROJECT (via WS instead of REST) ----
     socket.on('save_project', (data: { projectId: string; data: any }, callback?: (response: any) => void) => {
       const session = sessions.get(socket.id);
       if (!session || session.permission === 'view') {
@@ -388,57 +285,6 @@ export function initRealtime(httpServer: HttpServer): Server {
       saveProjectData(session, data.projectId, data.data, callback);
     });
 
-    // ---- NEW: VERSION STUBS ----
-    socket.on('version_save', (data: { projectId: string; message?: string }, callback?: (response: any) => void) => {
-      const permission = checkPermission(data.projectId, user.userId);
-      if (!permission || permission === 'view') {
-        if (callback) callback({ error: 'Permission denied' });
-        return;
-      }
-      if (callback) callback({ success: true, versionId: null, message: 'Version history not yet implemented' });
-    });
-
-    socket.on('version_list', (data: { projectId: string }, callback?: (response: any) => void) => {
-      if (callback) callback({ versions: [] });
-    });
-
-    // ---- NEW: CSS EVENT STUBS ----
-    socket.on('css_rule_added', (data: { projectId: string; rule: any }) => {
-      const session = sessions.get(socket.id);
-      if (!session || session.permission === 'view') return;
-      socket.to(`project:${data.projectId}`).emit('css_rule_added', { rule: data.rule });
-    });
-
-    socket.on('css_rule_updated', (data: { projectId: string; ruleId: string; updates: any }) => {
-      const session = sessions.get(socket.id);
-      if (!session || session.permission === 'view') return;
-      socket.to(`project:${data.projectId}`).emit('css_rule_updated', { ruleId: data.ruleId, updates: data.updates });
-    });
-
-    socket.on('css_rule_removed', (data: { projectId: string; ruleId: string }) => {
-      const session = sessions.get(socket.id);
-      if (!session || session.permission === 'view') return;
-      socket.to(`project:${data.projectId}`).emit('css_rule_removed', { ruleId: data.ruleId });
-    });
-
-    socket.on('css_property_added', (data: { projectId: string; ruleId: string; property: any }) => {
-      const session = sessions.get(socket.id);
-      if (!session || session.permission === 'view') return;
-      socket.to(`project:${data.projectId}`).emit('css_property_added', { ruleId: data.ruleId, property: data.property });
-    });
-
-    socket.on('css_property_updated', (data: { projectId: string; ruleId: string; propertyId: string; updates: any }) => {
-      const session = sessions.get(socket.id);
-      if (!session || session.permission === 'view') return;
-      socket.to(`project:${data.projectId}`).emit('css_property_updated', { ruleId: data.ruleId, propertyId: data.propertyId, updates: data.updates });
-    });
-
-    socket.on('css_property_removed', (data: { projectId: string; ruleId: string; propertyId: string }) => {
-      const session = sessions.get(socket.id);
-      if (!session || session.permission === 'view') return;
-      socket.to(`project:${data.projectId}`).emit('css_property_removed', { ruleId: data.ruleId, propertyId: data.propertyId });
-    });
-
     // ---- DISCONNECT ----
     socket.on('disconnect', () => {
       const session = sessions.get(socket.id);

server/src/services/wsStore.ts

@@ -1,195 +0,0 @@
-import { v4 as uuidv4 } from 'uuid';
-import { getDatabase } from '../database';
-import { encryptCombined, decryptCombined } from './encryption';
-
-export interface ProjectRecord {
-  id: string;
-  user_id: string;
-  name: string;
-  framework: string;
-  description: string;
-  encrypted_data: string;
-  encryption_iv: string;
-  created_at: number;
-  updated_at: number;
-}
-
-export function getDefaultProjectData(framework: string): any {
-  const base = {
-    files: [] as any[],
-    blocks: {} as Record<string, any>,
-    visual: {} as Record<string, any>,
-    blocksXml: {} as Record<string, string>,
-    blockCode: {} as Record<string, string>,
-  };
-
-  switch (framework) {
-    case 'web':
-      return {
-        ...base,
-        files: [
-          { id: 'index.html', name: 'index.html', type: 'html', content: '' },
-          { id: 'styles.css', name: 'styles.css', type: 'css', content: '' },
-          { id: 'app.js', name: 'app.js', type: 'js', content: '' },
-        ],
-      };
-    case 'electron':
-      return {
-        ...base,
-        files: [
-          { id: 'main.ts', name: 'main.ts', type: 'typescript', content: '' },
-          { id: 'preload.ts', name: 'preload.ts', type: 'typescript', content: '' },
-          { id: 'index.html', name: 'index.html', type: 'html', content: '' },
-          { id: 'styles.css', name: 'styles.css', type: 'css', content: '' },
-          { id: 'renderer.ts', name: 'renderer.ts', type: 'typescript', content: '' },
-          { id: 'package.json', name: 'package.json', type: 'json', content: '' },
-        ],
-      };
-    case 'maui':
-      return {
-        ...base,
-        files: [
-          { id: 'MainPage.xaml', name: 'MainPage.xaml', type: 'xaml', content: '' },
-          { id: 'MainPage.xaml.cs', name: 'MainPage.xaml.cs', type: 'csharp', content: '' },
-          { id: 'App.xaml', name: 'App.xaml', type: 'xaml', content: '' },
-          { id: 'App.xaml.cs', name: 'App.xaml.cs', type: 'csharp', content: '' },
-          { id: 'MauiProgram.cs', name: 'MauiProgram.cs', type: 'csharp', content: '' },
-          { id: 'Models', name: 'Models', type: 'folder', children: [] },
-          { id: 'ViewModels', name: 'ViewModels', type: 'folder', children: [] },
-          { id: 'Services', name: 'Services', type: 'folder', children: [] },
-        ],
-      };
-    case 'nodejs':
-      return {
-        ...base,
-        files: [
-          { id: 'server.js', name: 'server.js', type: 'js', content: '' },
-          { id: 'package.json', name: 'package.json', type: 'json', content: '' },
-          { id: '.env', name: '.env', type: 'env', content: '' },
-          { id: 'routes', name: 'routes', type: 'folder', children: [] },
-          { id: 'models', name: 'models', type: 'folder', children: [] },
-          { id: 'middleware', name: 'middleware', type: 'folder', children: [] },
-        ],
-      };
-    default:
-      return base;
-  }
-}
-
-export function listProjects(userId: string) {
-  const db = getDatabase();
-  const owned = db.prepare(
-    'SELECT id, name, framework, description, created_at, updated_at FROM projects WHERE user_id = ? ORDER BY updated_at DESC'
-  ).all(userId) as any[];
-
-  const collab = db.prepare(`
-    SELECT p.id, p.name, p.framework, p.description, p.created_at, p.updated_at
-    FROM projects p
-    JOIN project_collaborators c ON p.id = c.project_id
-    WHERE c.user_id = ?
-    ORDER BY p.updated_at DESC
-  `).all(userId) as any[];
-
-  const seen = new Set<string>();
-  return [...owned, ...collab].filter((p) => {
-    if (seen.has(p.id)) return false;
-    seen.add(p.id);
-    return true;
-  });
-}
-
-export function getProject(projectId: string, userId: string) {
-  const db = getDatabase();
-  const project = db.prepare('SELECT * FROM projects WHERE id = ?').get(projectId) as ProjectRecord | undefined;
-  if (!project) return null;
-
-  const isOwner = project.user_id === userId;
-  const isCollab = !isOwner && db.prepare(
-    'SELECT 1 FROM project_collaborators WHERE project_id = ? AND user_id = ?'
-  ).get(projectId, userId);
-
-  if (!isOwner && !isCollab) return null;
-
-  try {
-    const decrypted = decryptCombined(project.encrypted_data);
-    const data = JSON.parse(decrypted);
-    return {
-      id: project.id,
-      name: project.name,
-      framework: project.framework,
-      description: project.description,
-      data,
-      created_at: project.created_at,
-      updated_at: project.updated_at,
-    };
-  } catch {
-    return null;
-  }
-}
-
-export function createProject(userId: string, name: string, framework: string, description?: string) {
-  const db = getDatabase();
-  const defaultData = getDefaultProjectData(framework);
-  const id = uuidv4();
-  const now = Date.now();
-  const combined = encryptCombined(JSON.stringify(defaultData));
-
-  db.prepare(`
-    INSERT INTO projects (id, user_id, name, framework, description, encrypted_data, encryption_iv, created_at, updated_at)
-    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
-  `).run(id, userId, name, framework, description || '', combined, '', now, now);
-
-  return {
-    id,
-    name,
-    framework,
-    description: description || '',
-    data: defaultData,
-    created_at: now,
-    updated_at: now,
-  };
-}
-
-export function updateProjectData(projectId: string, data: any) {
-  const db = getDatabase();
-  const now = Date.now();
-  const encryptedData = encryptCombined(JSON.stringify(data));
-  db.prepare(
-    'UPDATE projects SET encrypted_data = ?, encryption_iv = ?, updated_at = ? WHERE id = ?'
-  ).run(encryptedData, '', now, projectId);
-  return now;
-}
-
-export function updateProjectMeta(projectId: string, updates: { name?: string; description?: string }) {
-  const db = getDatabase();
-  const now = Date.now();
-  const name = updates.name;
-  const description = updates.description;
-  db.prepare(`
-    UPDATE projects SET
-      name = COALESCE(?, name),
-      description = COALESCE(?, description),
-      updated_at = ?
-    WHERE id = ?
-  `).run(name || null, description !== undefined ? description : null, now, projectId);
-  return now;
-}
-
-export function deleteProject(projectId: string, userId: string) {
-  const db = getDatabase();
-  const project = db.prepare('SELECT user_id FROM projects WHERE id = ?').get(projectId) as any;
-  if (!project || project.user_id !== userId) return false;
-  db.prepare('DELETE FROM projects WHERE id = ?').run(projectId);
-  return true;
-}
-
-export function checkPermission(projectId: string, userId: string): 'owner' | 'admin' | 'edit' | 'view' | null {
-  const db = getDatabase();
-  const project = db.prepare('SELECT user_id FROM projects WHERE id = ?').get(projectId) as any;
-  if (!project) return null;
-  if (project.user_id === userId) return 'owner';
-  const collab = db.prepare(
-    'SELECT permission FROM project_collaborators WHERE project_id = ? AND user_id = ?'
-  ).get(projectId, userId) as any;
-  return collab ? collab.permission : null;
-}

shared/types.ts

@@ -1,255 +0,0 @@
-// ============================================================
-// ELEMENT SYSTEM
-// ============================================================
-
-export interface VisualElement {
-  id: string;
-  type: string;
-  tagName: string;
-  children: VisualElement[];
-  props: Record<string, any>;
-  styles: Record<string, string>;
-  classes: string[];
-  attributes: Record<string, string>;
-  slots?: OutlineSlot[];
-}
-
-export interface ElementRef {
-  id: string;
-  tagName: string;
-  classes: string[];
-  attributes: Record<string, string>;
-  fileId: string;
-  linkedFiles: string[];
-}
-
-export interface OutlineSlot {
-  id: string;
-  parentId: string;
-  index: number;
-  occupiedBy: string | null;
-}
-
-// ============================================================
-// BLOCK SYSTEM
-// ============================================================
-
-export type BlockShape = 'hat' | 'stack' | 'boolean' | 'reporter' | 'c-block' | 'cap';
-export type FrameworkType = 'web' | 'electron' | 'maui' | 'nodejs';
-
-export interface BlockPort {
-  id: string;
-  label: string;
-  type: 'any' | 'string' | 'number' | 'boolean' | 'object' | 'array' | 'event' | 'element' | 'code';
-  position: 'left' | 'right' | 'top' | 'bottom';
-  shape?: 'round' | 'square' | 'diamond';
-}
-
-export interface BlockConfigField {
-  id: string;
-  label: string;
-  type: 'text' | 'number' | 'select' | 'boolean' | 'color' | 'code' | 'slider' | 'textarea' | 'variable' | 'element';
-  default?: any;
-  options?: { label: string; value: any }[];
-  placeholder?: string;
-  min?: number;
-  max?: number;
-  allowVariable?: boolean;
-}
-
-export interface BlockDefinition {
-  id: string;
-  type: string;
-  label: string;
-  category: string;
-  description: string;
-  framework: FrameworkType | 'all';
-  shape: BlockShape;
-  inputs: BlockPort[];
-  outputs: BlockPort[];
-  config: BlockConfigField[];
-  color: string;
-  icon: string;
-  dangerous?: boolean;
-  blockVariables?: { name: string; type: string }[];
-  compile: (config: Record<string, any>, inputs: Record<string, string>) => string;
-}
-
-export interface BlockNode {
-  id: string;
-  blockId: string;
-  position: { x: number; y: number };
-  config: Record<string, any>;
-  connections: Record<string, string>;
-}
-
-// ============================================================
-// CSS SYSTEM
-// ============================================================
-
-export interface CssRule {
-  id: string;
-  selector: string;
-  type: 'id' | 'class' | 'element' | 'universal' | 'attribute' | 'pseudo-class' | 'pseudo-element';
-  properties: CssProperty[];
-  mediaQuery: string;
-  enabled: boolean;
-  order: number;
-}
-
-export interface CssProperty {
-  id: string;
-  name: string;
-  value: string;
-  important: boolean;
-  unit: 'px' | '%' | 'em' | 'rem' | 'vh' | 'vw' | 'auto' | 'none' | 'ms' | 's' | 'deg' | 'rad';
-  type: 'standard' | 'variable' | 'custom';
-}
-
-// ============================================================
-// VERSION SYSTEM
-// ============================================================
-
-export interface VersionDiff {
-  fileId: string;
-  type: 'content_change' | 'file_add' | 'file_remove' | 'file_rename' |
-        'css_rule_add' | 'css_rule_remove' | 'css_rule_update' |
-        'css_property_add' | 'css_property_remove' | 'css_property_update' |
-        'visual_element_add' | 'visual_element_remove' | 'visual_element_update' |
-        'element_registry_change' | 'blocks_xml_change' | 'block_code_change' |
-        'project_meta_change' | 'binary_file_add';
-  oldValue?: any;
-  newValue?: any;
-  timestamp: number;
-}
-
-export interface VersionEntry {
-  id: string;
-  projectId: string;
-  parentId: string | null;
-  userId: string;
-  username: string;
-  timestamp: number;
-  message: string;
-  type: 'auto' | 'restore' | 'manual_branch';
-  diffs: VersionDiff[];
-}
-
-// ============================================================
-// PROJECT SYSTEM
-// ============================================================
-
-export interface ProjectData {
-  files: ProjectFile[];
-  blocks: Record<string, BlockNode[]>;
-  visual: Record<string, VisualElement[]>;
-  blocksXml: Record<string, string>;
-  blockCode: Record<string, string>;
-  cssRules: CssRule[];
-  elementRegistry: ElementRef[];
-  elementCounters: Record<string, number>;
-}
-
-export interface ProjectFile {
-  id: string;
-  name: string;
-  type: string;
-  content?: string;
-  children?: ProjectFile[];
-  linkedFiles?: string[];
-  isBinary?: boolean;
-  binaryHash?: string;
-}
-
-// ============================================================
-// COLLABORATION SYSTEM
-// ============================================================
-
-export interface Collaborator {
-  userId: string;
-  username: string;
-  permission: 'view' | 'edit' | 'admin';
-  activeFileId: string | null;
-  cursor: { line: number; ch: number } | null;
-  selectedBlockId: string | null;
-  selectedElementId: string | null;
-  pointerPosition: { x: number; y: number } | null;
-  draggingBlock: { blockId: string; x: number; y: number } | null;
-  textFieldCursor: { fieldId: string; position: number } | null;
-  typing: boolean;
-  joinedAt: number;
-}
-
-// ============================================================
-// WS EVENT NAMES
-// ============================================================
-
-export const WS_EVENTS = {
-  JOIN_PROJECT: 'join_project',
-  LEAVE_PROJECT: 'leave_project',
-
-  FILE_CHANGED: 'file_changed',
-  FILE_ADDED: 'file_added',
-  FILE_RENAMED: 'file_renamed',
-  FILE_DELETED: 'file_deleted',
-  FILE_UPLOAD_START: 'file_upload_start',
-  FILE_UPLOAD_CHUNK: 'file_upload_chunk',
-  FILE_UPLOAD_END: 'file_upload_end',
-  FILE_UPLOAD_ERROR: 'file_upload_error',
-  FILE_UPLOAD_PROGRESS: 'file_upload_progress',
-
-  VISUAL_ELEMENT_ADDED: 'visual_element_added',
-  VISUAL_ELEMENT_UPDATED: 'visual_element_updated',
-  VISUAL_ELEMENT_REMOVED: 'visual_element_removed',
-  VISUAL_ELEMENTS_REORDERED: 'visual_elements_reordered',
-  ELEMENT_REGISTRY_UPDATED: 'element_registry_updated',
-  ELEMENT_ID_CHANGED: 'element_id_changed',
-
-  BLOCK_DRAG_START: 'block_drag_start',
-  BLOCK_DRAG_MOVE: 'block_drag_move',
-  BLOCK_DRAG_END: 'block_drag_end',
-  BLOCK_SELECTION_CHANGED: 'block_selection_changed',
-
-  CSS_RULE_ADDED: 'css_rule_added',
-  CSS_RULE_UPDATED: 'css_rule_updated',
-  CSS_RULE_REMOVED: 'css_rule_removed',
-  CSS_RULE_REORDERED: 'css_rule_reordered',
-  CSS_PROPERTY_ADDED: 'css_property_added',
-  CSS_PROPERTY_UPDATED: 'css_property_updated',
-  CSS_PROPERTY_REMOVED: 'css_property_removed',
-
-  POINTER_MOVE: 'pointer_move',
-  ACTIVE_FILE_CHANGED: 'active_file_changed',
-  CURSOR_MOVE: 'cursor_move',
-  TEXT_FIELD_FOCUS: 'text_field_focus',
-  TEXT_FIELD_CURSOR: 'text_field_cursor',
-  TEXT_FIELD_BLUR: 'text_field_blur',
-
-  PROJECT_SAVE: 'project_save',
-  PROJECT_CREATE: 'project_create',
-  PROJECT_LIST: 'project_list',
-  PROJECT_DELETE: 'project_delete',
-  PROJECT_SAVED: 'project_saved',
-  PROJECT_CREATED: 'project_created',
-  PROJECT_LIST_RESULT: 'project_list_result',
-  PROJECT_DELETED: 'project_deleted',
-
-  VERSION_SAVE: 'version_save',
-  VERSION_SAVED: 'version_saved',
-  VERSION_LIST: 'version_list',
-  VERSION_LIST_RESULT: 'version_list_result',
-  VERSION_SNAPSHOT: 'version_snapshot',
-  VERSION_SNAPSHOT_RESULT: 'version_snapshot_result',
-  VERSION_RESTORE: 'version_restore',
-  VERSION_RESTORED: 'version_restored',
-
-  COLLABORATOR_JOINED: 'collaborator_joined',
-  COLLABORATOR_LEFT: 'collaborator_left',
-  COLLABORATOR_LIST: 'collaborator_list',
-  COLLABORATOR_ACTIVE_FILE: 'collaborator_active_file',
-  COLLABORATOR_CURSOR: 'collaborator_cursor',
-  COLLABORATOR_BLOCK_SELECTED: 'collaborator_block_selected',
-  COLLABORATOR_ELEMENT_HOVER: 'collaborator_element_hover',
-
-  FILE_UPDATED: 'file_updated',
-} as const;