dynim-core 1.0.4 → 1.0.6

package/dist/builder/builder.js

@@ -5,30 +5,26 @@
 import { createState } from './state';
 import { createWidget } from './widget';
 import { createEditorState } from './editor-state';
-import { createHistoryState } from './history-state';
-import { createDiffState } from './diff-state';
 import { createTreeState } from './tree-state';
 import { createFreezeOverlay } from './freeze-overlay';
 import { createOverlays } from './editor-overlays';
-import { createDragEngine } from './drag-engine';
+import { createInteractionEngine } from './interaction-engine';
 import { scanDOM } from './dom-scanner';
 import { createAIPromptPopover } from './ai-prompt-popover';
 import { createCodeClient } from './code-client';
 import { createBuilderClient } from './builder-client';
 import { buildElementIdentifier, getRelevantStyles } from './element-utils';
 export function createBuilder(config = {}) {
-    const { logo = 'Builder', onSave, onExit, onEnter, chatConfig = {}, contentRoot = document.body, pageId = window.location.pathname, apiBase = 'http://localhost:8080', sessionToken, refreshToken, getSession, codeClient: externalCodeClient } = config;
+    const { logo = 'Builder', onExit, onEnter, chatConfig = {}, contentRoot = document.body, pageId = window.location.pathname, apiBase = 'http://localhost:8080', sessionToken, refreshToken, getSession, codeClient: externalCodeClient } = config;
     let isActive = false;
     let chatWidget = null;
     let state = null;
     let client = null;
     let editorState = null;
-    let historyState = null;
-    let diffState = null;
     let treeState = null;
     let freezeOverlay = null;
     let overlays = null;
-    let dragEngine = null;
+    let interactionEngine = null;
     let aiPromptPopover = null;
     const root = document.createElement('div');
     root.className = 'builder';
@@ -42,20 +38,15 @@ export function createBuilder(config = {}) {
       </div>
       <div class="builder-bar__divider"></div>
       <div class="builder-bar__actions">
-        <button class="builder-bar__btn builder-bar__btn--undo" title="Undo (Cmd+Z)" style="display: none;">
-          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
-            <path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/>
-          </svg>
-        </button>
-        <button class="builder-bar__btn builder-bar__btn--preview" title="Preview">
+        <button class="builder-bar__btn builder-bar__btn--preview">
           <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
             <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
           </svg>
           Preview
         </button>
-        <button class="builder-bar__btn builder-bar__btn--save" title="Save changes" disabled style="background: rgba(100, 116, 139, 0.5); color: rgba(255, 255, 255, 0.4); cursor: not-allowed; pointer-events: none;">
+        <button class="builder-bar__btn builder-bar__btn--save">
           <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
-            <path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/>
+            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
           </svg>
           Save
         </button>
@@ -67,23 +58,7 @@ export function createBuilder(config = {}) {
         </button>
       </div>
     </div>
-
-    <div class="builder-modal" style="display: none;">
-      <div class="builder-modal__backdrop"></div>
-      <div class="builder-modal__dialog">
-        <div class="builder-modal__title">Unsaved Changes</div>
-        <div class="builder-modal__message">You have unsaved changes. What would you like to do?</div>
-        <div class="builder-modal__actions">
-          <button class="builder-modal__btn builder-modal__btn--cancel">Cancel</button>
-          <button class="builder-modal__btn builder-modal__btn--discard">Discard Changes</button>
-          <button class="builder-modal__btn builder-modal__btn--save">Save & Exit</button>
-        </div>
-      </div>
-    </div>
   `;
-    const saveBtn = root.querySelector('.builder-bar__btn--save');
-    const undoBtn = root.querySelector('.builder-bar__btn--undo');
-    const modal = root.querySelector('.builder-modal');
     let builderClient = null;
     // Track unsubscribe function for external client
     let unsubscribeFromClient = null;
@@ -162,35 +137,11 @@ export function createBuilder(config = {}) {
             }
         });
     }
-    function updateButtonStates() {
-        if (!historyState)
-            return;
-        // Show/hide undo button contextually
-        const canUndo = historyState.canUndo();
-        undoBtn.style.display = canUndo ? 'flex' : 'none';
-        const hasActualChanges = diffState ? diffState.getDiff().length > 0 : false;
-        saveBtn.disabled = !hasActualChanges;
-        if (hasActualChanges) {
-            saveBtn.style.background = '#3b82f6';
-            saveBtn.style.color = '#ffffff';
-            saveBtn.style.opacity = '1';
-            saveBtn.style.cursor = 'pointer';
-            saveBtn.style.pointerEvents = 'auto';
-        }
-        else {
-            saveBtn.style.background = 'rgba(100, 116, 139, 0.5)';
-            saveBtn.style.color = 'rgba(255, 255, 255, 0.4)';
-            saveBtn.style.opacity = '1';
-            saveBtn.style.cursor = 'not-allowed';
-            saveBtn.style.pointerEvents = 'none';
-        }
-    }
     function performScan() {
         const tree = scanDOM(contentRoot);
         if (tree) {
             treeState?.setTree(tree);
         }
-        updateButtonStates();
     }
     function enter() {
         if (isActive)
@@ -199,36 +150,28 @@ export function createBuilder(config = {}) {
         root.classList.add('builder--active');
         document.body.classList.add('builder-mode-active');
         editorState = createEditorState();
-        historyState = createHistoryState();
-        diffState = createDiffState();
         treeState = createTreeState();
-        diffState.snapshotInitialState(contentRoot);
-        historyState.subscribe(updateButtonStates);
         overlays = createOverlays();
         overlays.mount();
-        dragEngine = createDragEngine({
+        interactionEngine = createInteractionEngine({
             contentRoot,
             editorState,
-            historyState,
-            diffState,
-            treeState,
             overlays,
             freezeOverlay: null,
-            onRescan: performScan
         });
         freezeOverlay = createFreezeOverlay({
             contentRoot,
-            onMouseDown: (e, el) => dragEngine?.handleMouseDown(e, el),
-            onMouseMove: (e, el) => dragEngine?.handleMouseMove(e, el),
-            onMouseUp: (e, el) => dragEngine?.handleMouseUp(e, el),
-            onMouseLeave: (e) => dragEngine?.handleMouseLeave(e),
-            onClick: (e, el) => dragEngine?.handleClick(e, el),
-            onDoubleClick: (e, el) => dragEngine?.handleDoubleClick(e, el),
-            onWheel: (e) => dragEngine?.handleWheel(e)
+            onMouseDown: (e, el) => interactionEngine?.handleMouseDown(e, el),
+            onMouseMove: (e, el) => interactionEngine?.handleMouseMove(e, el),
+            onMouseUp: (e, el) => interactionEngine?.handleMouseUp(e, el),
+            onMouseLeave: (e) => interactionEngine?.handleMouseLeave(e),
+            onClick: (e, el) => interactionEngine?.handleClick(e, el),
+            onDoubleClick: (e, el) => interactionEngine?.handleDoubleClick(e, el),
+            onWheel: (e) => interactionEngine?.handleWheel(e)
         });
         freezeOverlay.mount();
-        dragEngine.setFreezeOverlay(freezeOverlay);
-        dragEngine.attach();
+        interactionEngine.setFreezeOverlay(freezeOverlay);
+        interactionEngine.attach();
         aiPromptPopover = createAIPromptPopover({
             onSubmit: (prompt) => {
                 const selectedEl = editorState?.getState().selectedElement;
@@ -272,35 +215,23 @@ export function createBuilder(config = {}) {
             }
         });
         aiPromptPopover.mount();
-        let chatWasOpenBeforeDrag = false;
         let chatWasOpenBeforeSelection = false;
         editorState.subscribe((newState, prevState) => {
             if (chatWidget) {
-                const dragStarted = newState.isDragging && !prevState?.isDragging;
-                const dragEnded = !newState.isDragging && prevState?.isDragging;
-                if (dragStarted) {
-                    chatWasOpenBeforeDrag = chatWidget.isOpen();
-                    if (chatWasOpenBeforeDrag) {
-                        chatWidget.close();
-                    }
-                }
-                else if (dragEnded && chatWasOpenBeforeDrag) {
-                    chatWidget.open();
-                }
                 const selectionStarted = newState.selectedElement && !prevState?.selectedElement;
                 const selectionEnded = !newState.selectedElement && prevState?.selectedElement;
-                if (selectionStarted && !newState.isDragging) {
+                if (selectionStarted) {
                     chatWasOpenBeforeSelection = chatWidget.isOpen();
                     if (chatWasOpenBeforeSelection) {
                         chatWidget.close();
                     }
                 }
-                else if (selectionEnded && chatWasOpenBeforeSelection && !newState.isDragging) {
+                else if (selectionEnded && chatWasOpenBeforeSelection) {
                     chatWidget.open();
                     chatWasOpenBeforeSelection = false;
                 }
             }
-            if (newState.selectedElement && newState.selectionRect && !newState.isDragging) {
+            if (newState.selectedElement && newState.selectionRect) {
                 aiPromptPopover?.show(newState.selectionRect);
             }
             else {
@@ -312,10 +243,10 @@ export function createBuilder(config = {}) {
             state = createState();
             state.addMessage({
                 role: 'assistant',
-                text: 'Hi! I\'m here to help you build. Select an element by clicking on it, or drag elements to rearrange them.'
+                text: 'Hi! I\'m here to help you build. Select an element by clicking on it to make changes.'
             });
             initCodeClient(state);
-            initBuilderClient(); // For visual builder operations (saveDiffs, preview, exit)
+            initBuilderClient();
             // Pre-warm the cache for faster chat responses (projectId comes from JWT)
             if (client) {
                 client.warmCache();
@@ -351,22 +282,18 @@ export function createBuilder(config = {}) {
         onEnter?.();
     }
     function cleanup() {
-        modal.style.display = 'none';
         root.classList.remove('builder--active');
         document.body.classList.remove('builder-mode-active');
-        dragEngine?.detach();
+        interactionEngine?.detach();
         aiPromptPopover?.unmount();
         overlays?.unmount();
         freezeOverlay?.unmount();
-        dragEngine = null;
+        interactionEngine = null;
         aiPromptPopover = null;
         overlays = null;
         freezeOverlay = null;
         editorState = null;
-        historyState = null;
-        diffState = null;
         treeState = null;
-        undoBtn.style.display = 'none';
         if (chatWidget) {
             chatWidget.close();
             chatWidget.root.style.display = 'none';
@@ -377,7 +304,7 @@ export function createBuilder(config = {}) {
         if (!isActive)
             return;
         isActive = false;
-        // Notify server of exit (discarding changes)
+        // Notify server of exit
         if (builderClient) {
             try {
                 await builderClient.exit(pageId, true);
@@ -387,115 +314,69 @@ export function createBuilder(config = {}) {
                 console.error('[Builder] Exit notification failed:', error);
             }
         }
-        while (historyState?.canUndo()) {
-            dragEngine?.executeUndo();
-        }
         cleanup();
     }
-    async function save() {
-        console.log('[Builder] Save called, isActive:', isActive);
-        if (!isActive)
+    async function handlePreview() {
+        if (!builderClient) {
+            console.error('[Builder] Builder client not initialized');
             return;
-        isActive = false;
-        const diffs = diffState?.getDiff() || [];
-        console.log('[Builder] Diffs count:', diffs.length);
-        console.log('[Builder] builderClient exists:', !!builderClient);
-        if (builderClient && diffs.length > 0) {
-            try {
-                console.log('[Builder] Saving diffs to backend:', { pageId, diffs });
-                const result = await builderClient.saveDiffs(pageId, diffs);
-                console.log('[Builder] Save result:', result);
-            }
-            catch (error) {
-                console.error('[Builder] Save failed:', error);
+        }
+        try {
+            console.log('[Builder] Requesting preview...');
+            const result = await builderClient.preview(pageId);
+            console.log('[Builder] Preview result:', result);
+            if (result.previewUrl) {
+                window.open(result.previewUrl, '_blank');
             }
         }
-        else {
-            console.log('[Builder] Skipping save - no client or no diffs');
+        catch (error) {
+            console.error('[Builder] Preview failed:', error);
         }
-        onSave?.(diffs);
-        cleanup();
     }
-    async function preview() {
-        if (!isActive)
+    async function handleSave() {
+        if (!client) {
+            console.error('[Builder] Code client not initialized');
             return;
-        const diffs = diffState?.getDiff() || [];
-        console.log('[Builder] Preview called, diffs:', diffs.length);
-        if (builderClient) {
-            try {
-                const result = await builderClient.preview(pageId, diffs);
-                console.log('[Builder] Preview result:', result);
-                // TODO: Handle preview result (e.g., open preview URL, toggle preview mode)
-                if (result.previewUrl) {
-                    window.open(result.previewUrl, '_blank');
-                }
-            }
-            catch (error) {
-                console.error('[Builder] Preview failed:', error);
-            }
         }
-    }
-    function showModal() {
-        modal.style.display = '';
-    }
-    function hideModal() {
-        modal.style.display = 'none';
-    }
-    function hasUnsavedChanges() {
-        const hasDiffs = diffState ? diffState.getDiff().length > 0 : false;
-        const hasHistory = historyState ? historyState.canUndo() : false;
-        return hasDiffs || hasHistory;
-    }
-    function handleExitClick() {
-        if (hasUnsavedChanges()) {
-            showModal();
+        try {
+            console.log('[Builder] Saving code edits...');
+            await client.saveCode();
+            console.log('[Builder] Save complete');
+            // Visual feedback - briefly show saved state
+            const saveBtn = root.querySelector('.builder-bar__btn--save');
+            if (saveBtn) {
+                saveBtn.classList.add('builder-bar__btn--saved');
+                saveBtn.textContent = 'Saved!';
+                setTimeout(() => {
+                    saveBtn.classList.remove('builder-bar__btn--saved');
+                    saveBtn.innerHTML = `
+            <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
+              <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+            </svg>
+            Save
+          `;
+                }, 2000);
+            }
         }
-        else {
-            exit();
+        catch (error) {
+            console.error('[Builder] Save failed:', error);
         }
     }
     root.addEventListener('click', (e) => {
         const target = e.target;
         if (target.closest('.builder-bar__btn--exit')) {
             e.stopPropagation();
-            handleExitClick();
-            return;
-        }
-        if (target.closest('.builder-bar__btn--save')) {
-            e.stopPropagation();
-            save();
-            return;
-        }
-        if (target.closest('.builder-bar__btn--preview')) {
-            e.stopPropagation();
-            preview();
-            return;
-        }
-        if (target.closest('.builder-bar__btn--undo')) {
-            e.stopPropagation();
-            dragEngine?.executeUndo();
-            return;
-        }
-        if (target.closest('.builder-modal__btn--cancel')) {
-            e.stopPropagation();
-            hideModal();
-            return;
-        }
-        if (target.closest('.builder-modal__btn--discard')) {
-            e.stopPropagation();
-            hideModal();
             exit();
             return;
         }
-        if (target.closest('.builder-modal__btn--save')) {
+        if (target.closest('.builder-bar__btn--preview')) {
             e.stopPropagation();
-            hideModal();
-            save();
+            handlePreview();
             return;
         }
-        if (target.closest('.builder-modal__backdrop')) {
+        if (target.closest('.builder-bar__btn--save')) {
             e.stopPropagation();
-            hideModal();
+            handleSave();
             return;
         }
     });
@@ -504,38 +385,14 @@ export function createBuilder(config = {}) {
         if (target.closest('.builder-bar__btn--exit')) {
             e.preventDefault();
             e.stopPropagation();
-            handleExitClick();
-        }
-        else if (target.closest('.builder-bar__btn--save') && !saveBtn.disabled) {
-            e.preventDefault();
-            e.stopPropagation();
-            save();
-        }
-        else if (target.closest('.builder-modal__btn--discard')) {
-            e.preventDefault();
-            e.stopPropagation();
-            hideModal();
             exit();
         }
-        else if (target.closest('.builder-modal__btn--save')) {
-            e.preventDefault();
-            e.stopPropagation();
-            hideModal();
-            save();
-        }
-        else if (target.closest('.builder-modal__btn--cancel')) {
-            e.preventDefault();
-            e.stopPropagation();
-            hideModal();
-        }
     }, true);
     document.body.appendChild(root);
     return {
         enter,
         exit,
-        save,
         isActive: () => isActive,
-        getChanges: () => diffState?.getDiff() || [],
         getEditorState: () => editorState?.getState(),
         getTreeState: () => treeState?.getState(),
         destroy: () => {

package/dist/builder/editor-overlays.d.ts

@@ -1,6 +1,6 @@
 /**
  * Visual overlays for the editor
- * Hover highlight, selection box, drag ghost, drop indicator
+ * Hover highlight, selection box, and tooltip
  * Uses CSS classes with !important to prevent Dark Reader interference
  */
 export interface OverlaysConfig {
@@ -14,15 +14,6 @@ export interface Overlays {
     hideHover: () => void;
     showSelection: (rect: DOMRect | null) => void;
     hideSelection: () => void;
-    showDragGhost: (sourceRect: DOMRect | null, cursorPos: {
-        x: number;
-        y: number;
-    } | null, grabOffsetX?: number | null, grabOffsetY?: number | null) => void;
-    hideDragGhost: () => void;
-    showDropIndicator: (targetRect: DOMRect | null, position: string | null, parentRect?: DOMRect | null) => void;
-    hideDropIndicator: () => void;
-    showNoDropIndicator: (rect: DOMRect | null) => void;
-    hideNoDropIndicator: () => void;
     showTooltip: (text: string | null, rect: DOMRect | null) => void;
     hideTooltip: () => void;
     hideAll: () => void;

package/dist/builder/editor-overlays.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor-overlays.d.ts","sourceRoot":"","sources":["../../src/builder/editor-overlays.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,QAAQ;IACvB,SAAS,EAAE,cAAc,CAAC;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,EAAE,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI,EAAE,SAAS,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1J,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,iBAAiB,EAAE,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,UAAU,CAAC,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9G,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IACjE,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AASD,wBAAgB,cAAc,CAAC,MAAM,GAAE,cAAmB,GAAG,QAAQ,CA4NpE"}
+{"version":3,"file":"editor-overlays.d.ts","sourceRoot":"","sources":["../../src/builder/editor-overlays.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,QAAQ;IACvB,SAAS,EAAE,cAAc,CAAC;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IACjE,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AASD,wBAAgB,cAAc,CAAC,MAAM,GAAE,cAAmB,GAAG,QAAQ,CAuGpE"}

package/dist/builder/editor-overlays.js

@@ -1,6 +1,6 @@
 /**
  * Visual overlays for the editor
- * Hover highlight, selection box, drag ghost, drop indicator
+ * Hover highlight, selection box, and tooltip
  * Uses CSS classes with !important to prevent Dark Reader interference
  */
 function createOverlayElement(className) {
@@ -21,20 +21,10 @@ export function createOverlays(config = {}) {
   `;
     const hoverOverlay = createOverlayElement('editor-hover-overlay');
     const selectionOverlay = createOverlayElement('editor-selection-overlay');
-    const dragGhost = createOverlayElement('editor-drag-ghost');
-    const dropLine = createOverlayElement('editor-drop-line');
-    const dropTarget = createOverlayElement('editor-drop-target');
-    const parentHighlight = createOverlayElement('editor-parent-highlight');
     const tooltip = createOverlayElement('editor-tooltip');
-    const noDropIndicator = createOverlayElement('editor-no-drop-indicator');
     container.appendChild(hoverOverlay);
     container.appendChild(selectionOverlay);
-    container.appendChild(dragGhost);
-    container.appendChild(dropTarget);
-    container.appendChild(parentHighlight);
-    container.appendChild(dropLine);
     container.appendChild(tooltip);
-    container.appendChild(noDropIndicator);
     function mount() {
         document.body.appendChild(container);
     }
@@ -73,89 +63,6 @@ export function createOverlays(config = {}) {
         selectionOverlay.classList.remove('active');
         selectionOverlay.style.display = 'none';
     }
-    function showDragGhost(sourceRect, cursorPos, grabOffsetX = null, grabOffsetY = null) {
-        if (!sourceRect || !cursorPos) {
-            hideDragGhost();
-            return;
-        }
-        const ghostX = grabOffsetX !== null ? cursorPos.x - grabOffsetX : cursorPos.x - sourceRect.width / 2;
-        const ghostY = grabOffsetY !== null ? cursorPos.y - grabOffsetY : cursorPos.y - sourceRect.height / 2;
-        dragGhost.style.left = `${ghostX}px`;
-        dragGhost.style.top = `${ghostY}px`;
-        dragGhost.style.width = `${sourceRect.width}px`;
-        dragGhost.style.height = `${sourceRect.height}px`;
-        dragGhost.style.display = 'block';
-        dragGhost.classList.add('active');
-    }
-    function hideDragGhost() {
-        dragGhost.classList.remove('active');
-        dragGhost.style.display = 'none';
-    }
-    function showDropIndicator(targetRect, position, _parentRect) {
-        if (!targetRect || !position) {
-            hideDropIndicator();
-            return;
-        }
-        dropTarget.style.left = `${targetRect.x}px`;
-        dropTarget.style.top = `${targetRect.y}px`;
-        dropTarget.style.width = `${targetRect.width}px`;
-        dropTarget.style.height = `${targetRect.height}px`;
-        dropTarget.style.display = 'block';
-        dropTarget.classList.add('active');
-        parentHighlight.classList.remove('active');
-        parentHighlight.style.display = 'none';
-        const lineThickness = 4;
-        if (position === 'top') {
-            dropLine.style.left = `${targetRect.x}px`;
-            dropLine.style.top = `${targetRect.y - lineThickness / 2}px`;
-            dropLine.style.width = `${targetRect.width}px`;
-            dropLine.style.height = `${lineThickness}px`;
-        }
-        else if (position === 'bottom') {
-            dropLine.style.left = `${targetRect.x}px`;
-            dropLine.style.top = `${targetRect.y + targetRect.height - lineThickness / 2}px`;
-            dropLine.style.width = `${targetRect.width}px`;
-            dropLine.style.height = `${lineThickness}px`;
-        }
-        else if (position === 'left') {
-            dropLine.style.left = `${targetRect.x - lineThickness / 2}px`;
-            dropLine.style.top = `${targetRect.y}px`;
-            dropLine.style.width = `${lineThickness}px`;
-            dropLine.style.height = `${targetRect.height}px`;
-        }
-        else if (position === 'right') {
-            dropLine.style.left = `${targetRect.x + targetRect.width - lineThickness / 2}px`;
-            dropLine.style.top = `${targetRect.y}px`;
-            dropLine.style.width = `${lineThickness}px`;
-            dropLine.style.height = `${targetRect.height}px`;
-        }
-        dropLine.style.display = 'block';
-        dropLine.classList.add('active');
-    }
-    function hideDropIndicator() {
-        dropTarget.classList.remove('active');
-        dropTarget.style.display = 'none';
-        dropLine.classList.remove('active');
-        dropLine.style.display = 'none';
-        parentHighlight.classList.remove('active');
-        parentHighlight.style.display = 'none';
-    }
-    function showNoDropIndicator(rect) {
-        if (!rect) {
-            hideNoDropIndicator();
-            return;
-        }
-        noDropIndicator.style.left = `${rect.x}px`;
-        noDropIndicator.style.top = `${rect.y}px`;
-        noDropIndicator.style.width = `${rect.width}px`;
-        noDropIndicator.style.height = `${rect.height}px`;
-        noDropIndicator.style.display = 'block';
-        noDropIndicator.classList.add('active');
-    }
-    function hideNoDropIndicator() {
-        noDropIndicator.classList.remove('active');
-        noDropIndicator.style.display = 'none';
-    }
     function showTooltip(text, rect) {
         if (!text || !rect) {
             hideTooltip();
@@ -176,9 +83,6 @@ export function createOverlays(config = {}) {
     function hideAll() {
         hideHover();
         hideSelection();
-        hideDragGhost();
-        hideDropIndicator();
-        hideNoDropIndicator();
         hideTooltip();
     }
     return {
@@ -189,12 +93,6 @@ export function createOverlays(config = {}) {
         hideHover,
         showSelection,
         hideSelection,
-        showDragGhost,
-        hideDragGhost,
-        showDropIndicator,
-        hideDropIndicator,
-        showNoDropIndicator,
-        hideNoDropIndicator,
         showTooltip,
         hideTooltip,
         hideAll

package/dist/builder/editor-state.d.ts

@@ -1,12 +1,7 @@
 /**
- * Editor state management - Selection, hover, and drag state
- * Uses event emitters for framework-agnostic reactivity (matching state.js pattern)
+ * Editor state management - Selection and hover state
+ * Uses event emitters for framework-agnostic reactivity
  */
-export interface DropIndicator {
-    rect: DOMRect;
-    position: string;
-    parentRect?: DOMRect | null;
-}
 export interface EditorStateData {
     selectedIds: string[];
     primarySelectedId: string | null;
@@ -17,14 +12,6 @@ export interface EditorStateData {
     hoveredElement: HTMLElement | null;
     drillDepth: number;
     isMultiSelectActive: boolean;
-    isDragging: boolean;
-    dragSourceElement: HTMLElement | null;
-    dragSourceRect: DOMRect | null;
-    dragGhostPos: {
-        x: number;
-        y: number;
-    } | null;
-    dropIndicator: DropIndicator | null;
 }
 export type EditorStateListener = (state: EditorStateData, prevState?: EditorStateData) => void;
 export interface EditorState {
@@ -39,12 +26,6 @@ export interface EditorState {
     clearHover: () => void;
     incrementDrillDepth: () => void;
     resetDrillDepth: () => void;
-    startDrag: (element: HTMLElement, rect: DOMRect) => void;
-    updateDrag: (ghostPos: {
-        x: number;
-        y: number;
-    } | null, dropIndicator: DropIndicator | null) => void;
-    endDrag: () => void;
 }
 export declare function createEditorState(initialState?: Partial<EditorStateData>): EditorState;
 //# sourceMappingURL=editor-state.d.ts.map

package/dist/builder/editor-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor-state.d.ts","sourceRoot":"","sources":["../../src/builder/editor-state.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7B;AAED,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,aAAa,EAAE,OAAO,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,cAAc,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,WAAW,GAAG,IAAI,CAAC;IACtC,cAAc,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,YAAY,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC9C,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;CACrC;AAED,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,eAAe,EAAE,SAAS,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;AAEhG,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,eAAe,CAAC;IAChC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACtD,SAAS,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,MAAM,IAAI,CAAC;IACzD,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1E,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IACzF,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,SAAS,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,UAAU,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,EAAE,aAAa,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAC;IACrG,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,YAAY,GAAE,OAAO,CAAC,eAAe,CAAM,GAAG,WAAW,CA+I1F"}
+{"version":3,"file":"editor-state.d.ts","sourceRoot":"","sources":["../../src/builder/editor-state.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,aAAa,EAAE,OAAO,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,cAAc,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,eAAe,EAAE,SAAS,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;AAEhG,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,eAAe,CAAC;IAChC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACtD,SAAS,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,MAAM,IAAI,CAAC;IACzD,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1E,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IACzF,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,wBAAgB,iBAAiB,CAAC,YAAY,GAAE,OAAO,CAAC,eAAe,CAAM,GAAG,WAAW,CA4G1F"}