@hugobatist/smartcode 0.1.0

package/dist/static/diagram-editor.js

@@ -0,0 +1,368 @@
+/**
+ * SmartCode -- Visual Diagram Editor
+ * Manipulates .mmd content: add/remove/edit nodes and edges.
+ * Dependencies: diagram-dom.js (DiagramDOM), event-bus.js (SmartCodeEventBus),
+ *   command-history.js (SmartCodeCommandHistory), editor-popovers.js (SmartCodeEditorPopovers)
+ */
+(function () {
+    'use strict';
+
+    /** Find insertion point: before first `style` line, or before annotations, or at end */
+    function findInsertionLine(lines) {
+        for (var i = 0; i < lines.length; i++) {
+            var t = lines[i].trim();
+            if (t.startsWith('style ') || t.startsWith('%% ---')) return i;
+        }
+        return lines.length;
+    }
+
+    /** Add a node definition to .mmd content */
+    function addNode(content, nodeId, label) {
+        var lines = content.split('\n');
+        var idx = findInsertionLine(lines);
+        var newLine = '    ' + nodeId + '["' + label + '"]';
+        lines.splice(idx, 0, '', newLine);
+        return lines.join('\n');
+    }
+
+    /** Add an edge between two nodes */
+    function addEdge(content, fromId, toId, label) {
+        var lines = content.split('\n');
+        var idx = findInsertionLine(lines);
+        var edgeLine = label
+            ? '    ' + fromId + ' -->|"' + label + '"| ' + toId
+            : '    ' + fromId + ' --> ' + toId;
+        lines.splice(idx, 0, edgeLine);
+        return lines.join('\n');
+    }
+
+    /** Remove a node and all its edges/styles from .mmd content */
+    function removeNode(content, nodeId) {
+        var lines = content.split('\n');
+        var escaped = nodeId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        // Match: node definitions, edges referencing it, style directives
+        var nodeDefRe = new RegExp('^\\s*' + escaped + '[\\s\\[\\(\\{\\>"]');
+        var edgeFromRe = new RegExp('\\b' + escaped + '\\s*(-->|---|-.->|==>)');
+        var edgeToRe = new RegExp('(-->|---|-.->|==>)\\s*(\\|[^|]*\\|\\s*)?' + escaped + '\\b');
+        var styleRe = new RegExp('^\\s*style\\s+' + escaped + '\\b');
+
+        var result = lines.filter(function(line) {
+            var t = line.trim();
+            if (!t) return true;
+            if (nodeDefRe.test(t)) return false;
+            if (edgeFromRe.test(t)) return false;
+            if (edgeToRe.test(t)) return false;
+            if (styleRe.test(t)) return false;
+            return true;
+        });
+        return result.join('\n');
+    }
+
+    /** Remove a specific edge line (from --> to) */
+    function removeEdge(content, fromId, toId) {
+        var lines = content.split('\n');
+        var escFrom = fromId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        var escTo = toId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        var re = new RegExp('\\b' + escFrom + '\\s*(-->|---|-.->|==>)(\\s*\\|[^|]*\\|)?\\s*' + escTo + '\\b');
+        var result = lines.filter(function(line) { return !re.test(line.trim()); });
+        return result.join('\n');
+    }
+
+    /** Edit a node's label text */
+    function editNodeText(content, nodeId, newText) {
+        var lines = content.split('\n');
+        var escaped = nodeId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        // Match patterns: ID["text"], ID[text], ID("text"), ID(text), ID{"text"}, etc
+        var re = new RegExp('(' + escaped + '\\s*[\\[\\(\\{\\>]+\\"?)([^"\\]\\)\\}]*?)(\\"?[\\]\\)\\}]+)');
+        for (var i = 0; i < lines.length; i++) {
+            if (re.test(lines[i])) {
+                lines[i] = lines[i].replace(re, '$1' + newText + '$3');
+                break;
+            }
+        }
+        return lines.join('\n');
+    }
+
+    /** Extract current label text for a node */
+    function getNodeText(content, nodeId) {
+        var escaped = nodeId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        var re = new RegExp(escaped + '\\s*[\\[\\(\\{\\>]+"?([^"\\]\\)\\}]*)"?[\\]\\)\\}]+');
+        var m = content.match(re);
+        return m ? m[1] : nodeId;
+    }
+
+    /** Duplicate a node with a new ID and "(copy)" appended to label */
+    function duplicateNode(content, nodeId) {
+        var newId = generateNodeId(content);
+        var label = getNodeText(content, nodeId);
+        return addNode(content, newId, label + ' (copy)');
+    }
+
+    /**
+     * Find edge source and target from content.
+     * If edgeId contains "-->", "---", "-.->", or "==>", it encodes from/to.
+     * Otherwise returns all edges found in content (for iteration).
+     */
+    function findEdgeEndpoints(edgeId, content) {
+        var lines = content.split('\n');
+        var edgePatterns = [];
+        for (var i = 0; i < lines.length; i++) {
+            var m = lines[i].trim().match(/^(\S+)\s*(-->|---|-.->|==>)(\s*\|[^|]*\|)?\s*(\S+)/);
+            if (m) {
+                var from = m[1].replace(/[\["'\(\{].*$/, '');
+                var to = m[4].replace(/[\["'\(\{].*$/, '');
+                edgePatterns.push({ from: from, to: to, line: lines[i].trim() });
+            }
+        }
+        // Filter by edgeId if it encodes a specific from-to pair (e.g., "A-B" or "L-A-B")
+        if (edgeId) {
+            var cleanId = edgeId.replace(/^L-/, '');
+            var filtered = edgePatterns.filter(function(ep) {
+                return cleanId === ep.from + '-' + ep.to || cleanId === ep.to + '-' + ep.from;
+            });
+            if (filtered.length > 0) return filtered;
+        }
+        return edgePatterns;
+    }
+
+    /** Get all node IDs from content */
+    function getAllNodeIds(content) {
+        var ids = new Set();
+        var lines = content.split('\n');
+        var reserved = ['subgraph', 'style', 'class', 'click', 'flowchart', 'graph', 'end'];
+        for (var i = 0; i < lines.length; i++) {
+            var t = lines[i].trim();
+            // Node definitions: ID["text"] or ID[text] etc
+            var defMatch = t.match(/^\s*([A-Za-z_]\w*)\s*[\[\(\{>]/);
+            if (defMatch && reserved.indexOf(defMatch[1]) === -1) {
+                ids.add(defMatch[1]);
+            }
+            // Nodes in edges
+            var edgeMatch = t.match(/^\s*([A-Za-z_]\w*)\s*(-->|---|-.->|==>)/);
+            if (edgeMatch) ids.add(edgeMatch[1]);
+            var edgeTo = t.match(/(-->|---|-.->|==>)\s*(?:\|[^|]*\|\s*)?([A-Za-z_]\w*)/);
+            if (edgeTo) ids.add(edgeTo[2]);
+        }
+        return Array.from(ids);
+    }
+
+    /** Generate a unique node ID */
+    function generateNodeId(content) {
+        var existing = getAllNodeIds(content);
+        var i = 1;
+        while (existing.indexOf('N' + i) !== -1) i++;
+        return 'N' + i;
+    }
+
+    var editorState = {
+        mode: null,         // null | 'addNode' | 'addEdge'
+        edgeSource: null,   // node ID when in addEdge and source is selected
+        pendingAction: null, // { type: 'connectFrom'|'connectTo', nodeId }
+    };
+
+    var editorHooks = {
+        getEditor: function() { return document.getElementById('editor'); },
+        getLastContent: function() { return window.lastContent || ''; },
+        setLastContent: function(v) { window.lastContent = v; },
+        saveFile: null,
+        renderDiagram: null,
+    };
+
+    function setMode(mode) {
+        editorState.mode = mode;
+        editorState.edgeSource = null;
+        document.body.classList.remove('mode-addNode', 'mode-addEdge');
+        if (mode) document.body.classList.add('mode-' + mode);
+
+        // Update button states
+        var btnNode = document.getElementById('btnAddNode');
+        var btnEdge = document.getElementById('btnAddEdge');
+        if (btnNode) btnNode.classList.toggle('active', mode === 'addNode');
+        if (btnEdge) btnEdge.classList.toggle('active', mode === 'addEdge');
+
+        // Disable flag mode if entering edit mode
+        if (mode && window.SmartCodeAnnotations) {
+            var s = SmartCodeAnnotations.getState();
+            if (s.flagMode) SmartCodeAnnotations.toggleFlagMode();
+        }
+
+        if (window.toast) {
+            var msgs = {
+                addNode: 'Node Mode -- click on empty space in the diagram',
+                addEdge: 'Edge Mode -- click on the SOURCE node',
+            };
+            window.toast(msgs[mode] || 'Edit mode disabled');
+        }
+    }
+
+    function toggleAddNode() { setMode(editorState.mode === 'addNode' ? null : 'addNode'); }
+    function toggleAddEdge() { setMode(editorState.mode === 'addEdge' ? null : 'addEdge'); }
+
+    function handleClick(e) {
+        if (!editorState.mode) return;
+        if (e.target.closest('.zoom-controls') || e.target.closest('.flag-popover') || e.target.closest('.editor-popover')) return;
+
+        // Use DiagramDOM.extractNodeId instead of SmartCodeAnnotations.extractNodeId
+        var nodeInfo = DiagramDOM.extractNodeId(e.target);
+
+        if (editorState.mode === 'addNode') {
+            if (nodeInfo) return; // Clicked an existing node, ignore
+            e.preventDefault();
+            e.stopPropagation();
+            if (window.SmartCodeEditorPopovers) {
+                SmartCodeEditorPopovers.showAddNodePopover(e.clientX, e.clientY);
+            }
+        }
+
+        if (editorState.mode === 'addEdge') {
+            if (!nodeInfo || nodeInfo.type === 'edge') return;
+            e.preventDefault();
+            e.stopPropagation();
+            if (!editorState.edgeSource) {
+                editorState.edgeSource = nodeInfo.id;
+                DiagramDOM.highlightNode(nodeInfo.id, true);
+                if (window.toast) window.toast('Source: ' + nodeInfo.id + ' -- now click the TARGET');
+            } else {
+                var from = editorState.edgeSource;
+                var to = nodeInfo.id;
+                if (from === to) return;
+                if (window.SmartCodeEditorPopovers) {
+                    SmartCodeEditorPopovers.showAddEdgePopover(e.clientX, e.clientY, from, to);
+                }
+            }
+        }
+    }
+
+    function doRemoveNode(nodeId) {
+        applyEdit(function(c) { return removeNode(c, nodeId); });
+        if (window.SmartCodeAnnotations) {
+            SmartCodeAnnotations.getState().flags.delete(nodeId);
+            SmartCodeAnnotations.renderPanel();
+            SmartCodeAnnotations.updateBadge();
+        }
+    }
+
+    function doRemoveEdge(fromId, toId) {
+        applyEdit(function(c) { return removeEdge(c, fromId, toId); });
+    }
+
+    function doEditNodeText(nodeId) {
+        var editor = editorHooks.getEditor();
+        var currentText = getNodeText(editor.value, nodeId);
+        SmartCodeModal.prompt({
+            title: 'Edit Node: ' + nodeId,
+            placeholder: 'Node text',
+            defaultValue: currentText,
+            onConfirm: function(newText) {
+                if (newText === currentText) return;
+                applyEdit(function(c) { return editNodeText(c, nodeId, newText); });
+            },
+        });
+    }
+
+    function startConnectFrom(nodeId) {
+        if (window.SmartCodeAnnotations) SmartCodeAnnotations.closePopover();
+        setMode('addEdge');
+        editorState.edgeSource = nodeId;
+        DiagramDOM.highlightNode(nodeId, true);
+        if (window.toast) window.toast('Source: ' + nodeId + ' -- click the TARGET');
+    }
+
+    /** Undo the last edit via SmartCodeCommandHistory */
+    async function undo() {
+        if (!window.SmartCodeCommandHistory || !SmartCodeCommandHistory.canUndo()) {
+            if (window.toast) window.toast('Nothing to undo');
+            return;
+        }
+        var content = SmartCodeCommandHistory.undo();
+        var editor = editorHooks.getEditor();
+        if (!editor || content === null) return;
+        editor.value = content;
+        editorHooks.setLastContent(content);
+        if (editorHooks.saveFile) await editorHooks.saveFile();
+        if (editorHooks.renderDiagram) await editorHooks.renderDiagram(content);
+        if (window.toast) window.toast('Undone (' + SmartCodeCommandHistory.getUndoCount() + ' remaining)');
+    }
+
+    /** Redo the last undone edit via SmartCodeCommandHistory */
+    async function redo() {
+        if (!window.SmartCodeCommandHistory || !SmartCodeCommandHistory.canRedo()) {
+            if (window.toast) window.toast('Nothing to redo');
+            return;
+        }
+        var content = SmartCodeCommandHistory.redo();
+        var editor = editorHooks.getEditor();
+        if (!editor || content === null) return;
+        editor.value = content;
+        editorHooks.setLastContent(content);
+        if (editorHooks.saveFile) await editorHooks.saveFile();
+        if (editorHooks.renderDiagram) await editorHooks.renderDiagram(content);
+        if (window.toast) window.toast('Redone (' + SmartCodeCommandHistory.getRedoCount() + ' remaining)');
+    }
+
+    async function applyEdit(editFn) {
+        var editor = editorHooks.getEditor();
+        if (!editor) return;
+
+        // Capture BEFORE state for command history
+        var beforeContent = editor.value;
+
+        // Strip annotations, apply edit, re-inject annotations
+        var annotations = window.SmartCodeAnnotations;
+        var content = editor.value;
+        var flags = new Map();
+        if (annotations) {
+            flags = annotations.getState().flags;
+            content = annotations.stripAnnotations(content);
+        }
+        content = editFn(content);
+        if (annotations) content = annotations.injectAnnotations(content, flags);
+        editor.value = content;
+        editorHooks.setLastContent(content);
+
+        // Push command to history AFTER edit is applied
+        if (window.SmartCodeCommandHistory) {
+            SmartCodeCommandHistory.execute({
+                before: beforeContent,
+                after: content,
+                description: 'edit',
+            });
+        }
+
+        if (editorHooks.saveFile) await editorHooks.saveFile();
+        if (editorHooks.renderDiagram) await editorHooks.renderDiagram(content);
+
+        // Emit diagram:edited event via event bus
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.emit('diagram:edited', { source: 'diagram-editor' });
+        }
+    }
+
+    function init(options) {
+        if (options) Object.assign(editorHooks, options);
+        var container = document.getElementById('preview-container');
+        if (container) container.addEventListener('click', handleClick);
+
+        // Subscribe to event bus: re-init after diagram render if needed
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.on('diagram:rendered', function() {
+                // Clear edge source highlight after re-render (SVG is replaced)
+                editorState.edgeSource = null;
+            });
+        }
+    }
+
+    window.MmdEditor = {
+        init: init, setMode: setMode, undo: undo, redo: redo,
+        toggleAddNode: toggleAddNode, toggleAddEdge: toggleAddEdge,
+        addNode: addNode, addEdge: addEdge, removeNode: removeNode,
+        removeEdge: removeEdge, editNodeText: editNodeText, getNodeText: getNodeText,
+        getAllNodeIds: getAllNodeIds, generateNodeId: generateNodeId,
+        findEdgeEndpoints: findEdgeEndpoints, duplicateNode: duplicateNode,
+        doRemoveNode: doRemoveNode, doRemoveEdge: doRemoveEdge,
+        doEditNodeText: doEditNodeText, startConnectFrom: startConnectFrom,
+        applyEdit: applyEdit,
+        getState: function() { return editorState; },
+        closeEditorPopover: function() { if (window.SmartCodeEditorPopovers) SmartCodeEditorPopovers.closePopover(); },
+    };
+})();

package/dist/static/editor-panel.js

@@ -0,0 +1,107 @@
+/**
+ * SmartCode Editor Panel -- editor textarea events, panel toggles, resize handle.
+ * Extracted from live.html (Phase 9 Plan 03).
+ *
+ * Dependencies: renderer.js (render), pan-zoom.js (zoomFit)
+ * Dependents: app-init.js
+ *
+ * Usage:
+ *   SmartCodeEditorPanel.isAutoSync();
+ *   SmartCodeEditorPanel.setAutoSync(v);
+ *   SmartCodeEditorPanel.toggleEditor();
+ *   SmartCodeEditorPanel.toggleSidebar();
+ */
+(function() {
+    'use strict';
+
+    // ── State ──
+    var autoSync = true;
+    var debounceTimer = null;
+
+    // Keep window.autoSync in sync for cross-module access
+    window.autoSync = autoSync;
+
+    // ── Editor textarea events ──
+    var editor = document.getElementById('editor');
+
+    editor.addEventListener('input', function() {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(function() { render(editor.value); }, 500);
+    });
+
+    editor.addEventListener('keydown', function(e) {
+        if (e.key === 'Tab') {
+            e.preventDefault();
+            var start = editor.selectionStart;
+            editor.value = editor.value.substring(0, start) + '    ' + editor.value.substring(editor.selectionEnd);
+            editor.selectionStart = editor.selectionEnd = start + 4;
+        }
+        if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            render(editor.value);
+        }
+    });
+
+    // ── Auto-sync toggle ──
+    var syncBtn = document.getElementById('toggleAutoSync');
+
+    function updateSyncUI() {
+        syncBtn.classList.toggle('active', autoSync);
+        syncBtn.textContent = autoSync ? 'Auto-Sync ON' : 'Auto-Sync OFF';
+    }
+
+    syncBtn.addEventListener('click', function() {
+        autoSync = !autoSync;
+        window.autoSync = autoSync;
+        updateSyncUI();
+    });
+    updateSyncUI();
+
+    // ── Toggle panels ──
+    function toggleEditor() {
+        var panel = document.getElementById('editorPanel');
+        var handle = document.getElementById('resizeHandle');
+        panel.classList.toggle('hidden');
+        handle.style.display = panel.classList.contains('hidden') ? 'none' : '';
+        setTimeout(zoomFit, 100);
+    }
+
+    function toggleSidebar() {
+        document.getElementById('sidebar').classList.toggle('hidden');
+        setTimeout(zoomFit, 100);
+    }
+
+    document.getElementById('toggleEditor').addEventListener('click', toggleEditor);
+    document.getElementById('toggleSidebar').addEventListener('click', toggleSidebar);
+
+    // ── Resize handle ──
+    var resizeHandle = document.getElementById('resizeHandle');
+    var isResizing = false;
+
+    resizeHandle.addEventListener('mousedown', function(e) {
+        isResizing = true;
+        resizeHandle.classList.add('active');
+        document.addEventListener('mousemove', onResize);
+        document.addEventListener('mouseup', function() {
+            isResizing = false;
+            resizeHandle.classList.remove('active');
+            document.removeEventListener('mousemove', onResize);
+        }, { once: true });
+    });
+
+    function onResize(e) {
+        if (!isResizing) return;
+        var sidebar = document.getElementById('sidebar');
+        var sidebarWidth = sidebar.classList.contains('hidden') ? 0 : sidebar.offsetWidth;
+        var newWidth = e.clientX - sidebarWidth;
+        document.getElementById('editorPanel').style.width = Math.max(200, Math.min(newWidth, window.innerWidth * 0.7)) + 'px';
+    }
+
+    // ── Public API ──
+    window.SmartCodeEditorPanel = {
+        isAutoSync: function() { return autoSync; },
+        setAutoSync: function(v) { autoSync = v; window.autoSync = v; updateSyncUI(); },
+        toggleEditor: toggleEditor,
+        toggleSidebar: toggleSidebar,
+    };
+})();

package/dist/static/editor-popovers.js

@@ -0,0 +1,187 @@
+/**
+ * SmartCode -- Editor Popovers
+ * Add-node and add-edge popover UI, extracted from diagram-editor.js.
+ * Dependencies: diagram-editor.js (MmdEditor), diagram-dom.js (DiagramDOM)
+ */
+(function () {
+    'use strict';
+
+    var _outsideHandler = null;
+
+    function closeEditorPopover() {
+        if (_outsideHandler) {
+            document.removeEventListener('mousedown', _outsideHandler);
+            _outsideHandler = null;
+        }
+        var existing = document.querySelector('.editor-popover');
+        if (existing) existing.remove();
+    }
+
+    function createPopover(x, y) {
+        closeEditorPopover();
+        var pop = document.createElement('div');
+        pop.className = 'flag-popover editor-popover';
+        pop.style.left = Math.min(x + 12, window.innerWidth - 360) + 'px';
+        pop.style.top = Math.min(y - 20, window.innerHeight - 280) + 'px';
+        document.body.appendChild(pop);
+
+        setTimeout(function () {
+            function outside(e) {
+                if (pop.contains(e.target)) return;
+                closeEditorPopover();
+            }
+            _outsideHandler = outside;
+            document.addEventListener('mousedown', outside);
+        }, 50);
+
+        return pop;
+    }
+
+    function showAddNodePopover(clientX, clientY) {
+        var editor = document.getElementById('editor');
+        if (!editor) return;
+        var suggestedId = MmdEditor.generateNodeId(editor.value);
+        var pop = createPopover(clientX, clientY);
+
+        // Build popover content using DOM methods
+        var titleDiv = document.createElement('div');
+        titleDiv.className = 'flag-popover-title';
+        var titleSpan = document.createElement('span');
+        titleSpan.textContent = 'New Node';
+        titleDiv.appendChild(titleSpan);
+        pop.appendChild(titleDiv);
+
+        var idLabel = document.createElement('label');
+        idLabel.style.cssText = 'font-size:11px;color:var(--text-secondary);margin-bottom:2px;display:block';
+        idLabel.textContent = 'ID (no spaces)';
+        pop.appendChild(idLabel);
+
+        var idInput = document.createElement('input');
+        idInput.className = 'ep-input';
+        idInput.type = 'text';
+        idInput.value = suggestedId;
+        idInput.style.marginBottom = '8px';
+        pop.appendChild(idInput);
+
+        var labelLabel = document.createElement('label');
+        labelLabel.style.cssText = 'font-size:11px;color:var(--text-secondary);margin-bottom:2px;display:block';
+        labelLabel.textContent = 'Label';
+        pop.appendChild(labelLabel);
+
+        var labelInput = document.createElement('input');
+        labelInput.className = 'ep-input ep-label';
+        labelInput.type = 'text';
+        labelInput.placeholder = 'Node label...';
+        pop.appendChild(labelInput);
+
+        var actionsDiv = document.createElement('div');
+        actionsDiv.className = 'flag-popover-actions';
+        actionsDiv.style.marginTop = '10px';
+
+        var btnCancel = document.createElement('button');
+        btnCancel.className = 'btn-flag secondary';
+        btnCancel.textContent = 'Cancel';
+        btnCancel.addEventListener('click', closeEditorPopover);
+        actionsDiv.appendChild(btnCancel);
+
+        var btnCreate = document.createElement('button');
+        btnCreate.className = 'btn-flag primary';
+        btnCreate.style.background = 'var(--accent)';
+        btnCreate.textContent = 'Create Node';
+        actionsDiv.appendChild(btnCreate);
+        pop.appendChild(actionsDiv);
+
+        labelInput.focus();
+
+        function doCreate() {
+            var id = idInput.value.trim().replace(/\s+/g, '_');
+            var label = labelInput.value.trim();
+            if (!id || !label) return;
+            MmdEditor.applyEdit(function (c) { return MmdEditor.addNode(c, id, label); });
+            closeEditorPopover();
+        }
+
+        labelInput.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter') doCreate();
+            if (e.key === 'Escape') closeEditorPopover();
+        });
+        btnCreate.addEventListener('click', doCreate);
+    }
+
+    function showAddEdgePopover(clientX, clientY, fromId, toId) {
+        var pop = createPopover(clientX, clientY);
+
+        // Build popover content using DOM methods
+        var titleDiv = document.createElement('div');
+        titleDiv.className = 'flag-popover-title';
+        var titleSpan = document.createElement('span');
+        titleSpan.textContent = 'New Edge';
+        titleDiv.appendChild(titleSpan);
+        var edgeIdSpan = document.createElement('span');
+        edgeIdSpan.className = 'node-id';
+        edgeIdSpan.textContent = fromId + ' \u2192 ' + toId;
+        titleDiv.appendChild(edgeIdSpan);
+        pop.appendChild(titleDiv);
+
+        var labelLabel = document.createElement('label');
+        labelLabel.style.cssText = 'font-size:11px;color:var(--text-secondary);margin-bottom:2px;display:block';
+        labelLabel.textContent = 'Label (optional)';
+        pop.appendChild(labelLabel);
+
+        var labelInput = document.createElement('input');
+        labelInput.className = 'ep-input ep-label';
+        labelInput.type = 'text';
+        labelInput.placeholder = 'Edge label...';
+        pop.appendChild(labelInput);
+
+        var actionsDiv = document.createElement('div');
+        actionsDiv.className = 'flag-popover-actions';
+        actionsDiv.style.marginTop = '10px';
+
+        var btnCancel = document.createElement('button');
+        btnCancel.className = 'btn-flag secondary';
+        btnCancel.textContent = 'Cancel';
+        btnCancel.addEventListener('click', function () {
+            closeEditorPopover();
+            DiagramDOM.highlightNode(fromId, false);
+            var state = MmdEditor.getState();
+            state.edgeSource = null;
+        });
+        actionsDiv.appendChild(btnCancel);
+
+        var btnCreate = document.createElement('button');
+        btnCreate.className = 'btn-flag primary';
+        btnCreate.style.background = 'var(--accent)';
+        btnCreate.textContent = 'Create Edge';
+        actionsDiv.appendChild(btnCreate);
+        pop.appendChild(actionsDiv);
+
+        labelInput.focus();
+
+        function doCreate() {
+            var label = labelInput.value.trim();
+            MmdEditor.applyEdit(function (c) { return MmdEditor.addEdge(c, fromId, toId, label || null); });
+            closeEditorPopover();
+            DiagramDOM.highlightNode(fromId, false);
+            var state = MmdEditor.getState();
+            state.edgeSource = null;
+        }
+
+        labelInput.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter') doCreate();
+            if (e.key === 'Escape') {
+                closeEditorPopover();
+                DiagramDOM.highlightNode(fromId, false);
+                var state = MmdEditor.getState();
+                state.edgeSource = null;
+            }
+        });
+        btnCreate.addEventListener('click', doCreate);
+    }
+
+    window.SmartCodeEditorPopovers = {
+        showAddNodePopover: showAddNodePopover,
+        showAddEdgePopover: showAddEdgePopover,
+        closePopover: closeEditorPopover,
+    };
+})();