@hugobatist/smartcode 0.1.0

package/dist/static/heatmap.js

@@ -0,0 +1,308 @@
+/**
+ * SmartCode Heatmap -- risk overlay coloring and execution frequency heatmap.
+ * Colors nodes by risk level (red/yellow/green) or frequency (cold blue to hot red).
+ * Supports mode toggle (risk/frequency), incremental merges, and empty state guidance.
+ * Dependencies: diagram-dom.js, event-bus.js, file-tree.js
+ */
+var SmartCodeHeatmap = (function() {
+    'use strict';
+
+    var RISK_COLORS = {
+        high:   { fill: '#ef4444', opacity: 0.75 },
+        medium: { fill: '#eab308', opacity: 0.60 },
+        low:    { fill: '#22c55e', opacity: 0.50 },
+    };
+
+    var state = {
+        active: false,
+        mode: 'risk', // 'risk' or 'frequency'
+        risks: new Map(),
+        visitCounts: {},
+        savedFills: new Map(),
+    };
+
+    function intensityToColor(t) {
+        var r = Math.round(66 + 189 * t);
+        var g = Math.round(133 - 53 * t);
+        var b = Math.round(244 - 244 * t);
+        return 'rgb(' + r + ',' + g + ',' + b + ')';
+    }
+
+    function findShape(nodeEl) {
+        if (!nodeEl) return null;
+        var shape = nodeEl.querySelector('rect, polygon, circle, path, ellipse');
+        if (!shape) {
+            var childG = nodeEl.querySelector('g');
+            if (childG) shape = childG.querySelector('rect, polygon, circle, path, ellipse');
+        }
+        return shape;
+    }
+
+    function getNodeId(nodeEl, idx) {
+        return nodeEl.getAttribute('data-node-id') || nodeEl.getAttribute('id') || String(idx);
+    }
+
+    function saveFills() {
+        state.savedFills.clear();
+        var nodes = DiagramDOM.getAllNodeElements();
+        for (var i = 0; i < nodes.length; i++) {
+            var shape = findShape(nodes[i]);
+            if (!shape) continue;
+            state.savedFills.set(getNodeId(nodes[i], i), {
+                fill: shape.getAttribute('fill') || '',
+                fillOpacity: shape.getAttribute('fill-opacity') || '',
+            });
+        }
+    }
+
+    function restoreFills() {
+        var nodes = DiagramDOM.getAllNodeElements();
+        for (var i = 0; i < nodes.length; i++) {
+            var shape = findShape(nodes[i]);
+            if (!shape) continue;
+            var saved = state.savedFills.get(getNodeId(nodes[i], i));
+            if (saved) {
+                if (saved.fill) shape.setAttribute('fill', saved.fill);
+                else shape.removeAttribute('fill');
+                if (saved.fillOpacity) shape.setAttribute('fill-opacity', saved.fillOpacity);
+                else shape.removeAttribute('fill-opacity');
+            }
+        }
+        state.savedFills.clear();
+    }
+
+    function applyRiskOverlay() {
+        if (state.risks.size === 0) return;
+        state.risks.forEach(function(risk, nodeId) {
+            var shape = findShape(DiagramDOM.findNodeElement(nodeId));
+            if (!shape) return;
+            var colors = RISK_COLORS[risk.level || risk];
+            if (!colors) return;
+            shape.setAttribute('fill', colors.fill);
+            shape.setAttribute('fill-opacity', String(colors.opacity));
+        });
+    }
+
+    function applyFrequencyHeatmap() {
+        var counts = state.visitCounts;
+        var keys = Object.keys(counts);
+        if (keys.length === 0) return;
+        var max = 0;
+        for (var k = 0; k < keys.length; k++) {
+            if (counts[keys[k]] > max) max = counts[keys[k]];
+        }
+        if (max === 0) return;
+        for (var j = 0; j < keys.length; j++) {
+            var shape = findShape(DiagramDOM.findNodeElement(keys[j]));
+            if (!shape) continue;
+            var intensity = counts[keys[j]] / max;
+            shape.setAttribute('fill', intensityToColor(intensity));
+            shape.setAttribute('fill-opacity', String(0.4 + intensity * 0.5));
+        }
+    }
+
+    /** Check if there is any data for the current mode */
+    function hasDataForMode(mode) {
+        if (mode === 'frequency') return Object.keys(state.visitCounts).length > 0;
+        if (mode === 'risk') return state.risks.size > 0;
+        return false;
+    }
+
+    /** Check if there is any data at all (either mode) */
+    function hasAnyData() {
+        return Object.keys(state.visitCounts).length > 0 || state.risks.size > 0;
+    }
+
+    function applyCurrent() {
+        if (state.mode === 'frequency' && Object.keys(state.visitCounts).length > 0) {
+            applyFrequencyHeatmap();
+        } else if (state.mode === 'risk') {
+            applyRiskOverlay();
+        }
+        updateLegend();
+    }
+
+    function createEl(tag, cls, text) {
+        var el = document.createElement(tag);
+        if (cls) el.className = cls;
+        if (text) el.textContent = text;
+        return el;
+    }
+
+    /** Create the mode toggle button */
+    function createModeToggle() {
+        var btn = createEl('button', 'heatmap-mode-toggle');
+        var otherMode = state.mode === 'risk' ? 'frequency' : 'risk';
+        btn.textContent = otherMode === 'frequency' ? 'Frequency' : 'Risk';
+        btn.title = 'Switch to ' + otherMode + ' mode';
+        btn.addEventListener('click', function() {
+            setMode(otherMode);
+        });
+        return btn;
+    }
+
+    /** Build the empty state message */
+    function buildEmptyState(legend) {
+        var msg = createEl('div', 'heatmap-empty-state');
+        if (state.mode === 'frequency') {
+            msg.textContent = 'No frequency data yet. Click on diagram nodes to build a frequency map.';
+        } else {
+            msg.textContent = 'No risk annotations. Use MCP set_risk_level to annotate node risk levels.';
+        }
+        legend.appendChild(msg);
+    }
+
+    function updateLegend() {
+        var existing = document.querySelector('.heatmap-legend');
+        if (existing) existing.remove();
+        if (!state.active) return;
+        var container = document.getElementById('preview-container');
+        if (!container) return;
+
+        var legend = createEl('div', 'heatmap-legend');
+
+        // Header with title and mode toggle
+        var header = createEl('div', 'heatmap-legend-header');
+        var title = createEl('div', 'heatmap-legend-title',
+            state.mode === 'frequency' ? 'Frequency' : 'Risk');
+        header.appendChild(title);
+
+        // Only show toggle if there is data in the other mode too
+        if (hasAnyData()) {
+            header.appendChild(createModeToggle());
+        }
+        legend.appendChild(header);
+
+        // Show empty state if no data for current mode
+        if (!hasDataForMode(state.mode)) {
+            buildEmptyState(legend);
+            container.appendChild(legend);
+            return;
+        }
+
+        // Frequency legend content
+        if (state.mode === 'frequency') {
+            legend.appendChild(createEl('div', 'heatmap-legend-gradient'));
+            var labels = createEl('div', 'heatmap-legend-labels');
+            labels.appendChild(createEl('span', null, 'Low'));
+            labels.appendChild(createEl('span', null, 'High'));
+            legend.appendChild(labels);
+        } else {
+            // Risk legend content
+            var levels = [['high','High'],['medium','Medium'],['low','Low']];
+            for (var i = 0; i < levels.length; i++) {
+                var item = createEl('div', 'heatmap-legend-item');
+                var dot = createEl('span', 'heatmap-legend-dot');
+                dot.style.background = RISK_COLORS[levels[i][0]].fill;
+                item.appendChild(dot);
+                item.appendChild(createEl('span', null, levels[i][1]));
+                legend.appendChild(item);
+            }
+        }
+        container.appendChild(legend);
+    }
+
+    function toggle() {
+        var btn = document.getElementById('btnHeatmap');
+        if (state.active) {
+            restoreFills();
+            state.active = false;
+            if (btn) btn.classList.remove('active');
+            updateLegend();
+        } else {
+            // Auto-select mode based on available data
+            if (Object.keys(state.visitCounts).length > 0) {
+                state.mode = 'frequency';
+            } else if (state.risks.size > 0) {
+                state.mode = 'risk';
+            }
+            // If no data in either mode, still activate to show empty state
+            saveFills();
+            state.active = true;
+            if (btn) btn.classList.add('active');
+            applyCurrent();
+        }
+    }
+
+    function updateRisks(risksMap) {
+        if (risksMap instanceof Map) {
+            state.risks = risksMap;
+        } else if (risksMap && typeof risksMap === 'object') {
+            state.risks = new Map();
+            var keys = Object.keys(risksMap);
+            for (var i = 0; i < keys.length; i++) state.risks.set(keys[i], risksMap[keys[i]]);
+        }
+        if (state.active && state.mode === 'risk') {
+            restoreFills(); saveFills(); applyRiskOverlay(); updateLegend();
+        }
+    }
+
+    /**
+     * Replace all visit counts (used for full refresh, e.g., file switch or initial load).
+     */
+    function updateVisitCounts(counts) {
+        state.visitCounts = counts || {};
+        if (state.active) {
+            if (Object.keys(state.visitCounts).length > 0) {
+                state.mode = 'frequency';
+            }
+            restoreFills(); saveFills(); applyCurrent();
+        }
+    }
+
+    /**
+     * Merge incremental visit counts (used for real-time WebSocket updates).
+     * Adds delta counts to existing counts rather than replacing.
+     */
+    function mergeVisitCounts(delta) {
+        if (!delta || typeof delta !== 'object') return;
+        var keys = Object.keys(delta);
+        for (var i = 0; i < keys.length; i++) {
+            var nodeId = keys[i];
+            var count = delta[nodeId];
+            if (typeof count !== 'number') continue;
+            state.visitCounts[nodeId] = (state.visitCounts[nodeId] || 0) + count;
+        }
+        if (state.active && state.mode === 'frequency') {
+            restoreFills(); saveFills(); applyFrequencyHeatmap(); updateLegend();
+        }
+    }
+
+    function setMode(newMode) {
+        if (newMode !== 'risk' && newMode !== 'frequency') return;
+        state.mode = newMode;
+        if (state.active) { restoreFills(); saveFills(); applyCurrent(); }
+    }
+
+    function onDiagramRendered() {
+        if (!state.active) return;
+        state.savedFills.clear();
+        saveFills();
+        applyCurrent();
+    }
+
+    function init() {
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.on('diagram:rendered', onDiagramRendered);
+        }
+        var file = window.SmartCodeFileTree ? SmartCodeFileTree.getCurrentFile() : '';
+        if (file) {
+            fetch((window.SmartCodeBaseUrl || '') + '/api/heatmap/' + encodeURIComponent(file))
+                .then(function(r) { return r.ok ? r.json() : null; })
+                .then(function(data) { if (data) updateVisitCounts(data); })
+                .catch(function() {});
+        }
+    }
+
+    return {
+        init: init,
+        toggle: toggle,
+        updateRisks: updateRisks,
+        updateVisitCounts: updateVisitCounts,
+        mergeVisitCounts: mergeVisitCounts,
+        setMode: setMode,
+        isActive: function() { return state.active; },
+        applyRiskOverlay: applyRiskOverlay,
+        getState: function() { return state; },
+    };
+})();

package/dist/static/icons.js

@@ -0,0 +1,66 @@
+/* SmartCode — SVG Icon System */
+/* Lucide-based icons (MIT), stroke=currentColor, 24x24 viewBox at 16x16 */
+
+(function () {
+    'use strict';
+
+    var SIZE = 16;
+    var ATTRS = 'xmlns="http://www.w3.org/2000/svg" width="' + SIZE + '" height="' + SIZE +
+        '" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
+
+    window.SmartCodeIcons = {
+        folder: '<svg ' + ATTRS + '><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>',
+
+        folderOpen: '<svg ' + ATTRS + '><path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/></svg>',
+
+        file: '<svg ' + ATTRS + '><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>',
+
+        save: '<svg ' + ATTRS + '><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/><path d="M7 3v4a1 1 0 0 0 1 1h7"/></svg>',
+
+        plus: '<svg ' + ATTRS + '><path d="M5 12h14"/><path d="M12 5v14"/></svg>',
+
+        chevronRight: '<svg ' + ATTRS + '><path d="m9 18 6-6-6-6"/></svg>',
+
+        chevronDown: '<svg ' + ATTRS + '><path d="m6 9 6 6 6-6"/></svg>',
+
+        edit: '<svg ' + ATTRS + '><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>',
+
+        trash: '<svg ' + ATTRS + '><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>',
+
+        close: '<svg ' + ATTRS + '><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
+
+        arrowUp: '<svg ' + ATTRS + '><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>',
+
+        arrowDown: '<svg ' + ATTRS + '><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>',
+
+        arrowRight: '<svg ' + ATTRS + '><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>',
+
+        chart: '<svg ' + ATTRS + '><line x1="18" x2="18" y1="20" y2="10"/><line x1="12" x2="12" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="14"/></svg>',
+
+        diamond: '<svg ' + ATTRS + '><path d="M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41l-7.59-7.59a2.41 2.41 0 0 0-3.41 0Z"/></svg>',
+
+        help: '<svg ' + ATTRS + '><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>',
+
+        flag: '<svg ' + ATTRS + '><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" x2="4" y1="22" y2="15"/></svg>',
+
+        sidebar: '<svg ' + ATTRS + '><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>',
+
+        editor: '<svg ' + ATTRS + '><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>',
+
+        eye: '<svg ' + ATTRS + '><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>',
+
+        download: '<svg ' + ATTRS + '><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>',
+
+        image: '<svg ' + ATTRS + '><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',
+
+        sync: '<svg ' + ATTRS + '><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg>',
+
+        ghost: '<svg ' + ATTRS + ' style="opacity:0.7"><path d="M9 10h.01"/><path d="M15 10h.01"/><path d="M12 2a8 8 0 0 0-8 8v12l3-3 2.5 2.5L12 19l2.5 2.5L17 19l3 3V10a8 8 0 0 0-8-8z"/></svg>',
+
+        heatmap: '<svg ' + ATTRS + '><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/><path d="M9 3v18"/><path d="M15 3v18"/></svg>',
+
+        play: '<svg ' + ATTRS + '><polygon points="6 3 20 12 6 21 6 3"/></svg>',
+
+        node: '<svg ' + ATTRS + '><rect width="16" height="10" x="4" y="7" rx="2"/><circle cx="12" cy="12" r="1"/></svg>',
+    };
+})();

package/dist/static/inline-edit.js

@@ -0,0 +1,294 @@
+/**
+ * SmartCode Inline Edit -- double-click contenteditable overlay for label editing.
+ * Opens an HTML overlay positioned over the SVG text element for in-place editing.
+ *
+ * Dependencies:
+ *   - interaction-state.js (SmartCodeInteraction)
+ *   - diagram-dom.js (DiagramDOM)
+ *   - diagram-editor.js (MmdEditor)
+ *   - event-bus.js (SmartCodeEventBus)
+ *
+ * Usage:
+ *   SmartCodeInlineEdit.init();
+ *   SmartCodeInlineEdit.open('nodeId');
+ *   SmartCodeInlineEdit.confirm();
+ *   SmartCodeInlineEdit.cancel();
+ *   SmartCodeInlineEdit.isActive();
+ */
+(function() {
+    'use strict';
+
+    var activeOverlay = null;
+    var activeNodeId = null;
+    var originalLabel = null;
+    var hiddenTextEl = null;
+    var isCommitting = false; // guard against blur firing after confirm
+
+    // ── Open Inline Edit ──
+
+    function open(nodeId) {
+        // Close any existing edit first
+        if (activeOverlay) confirm();
+
+        // Find the node's text element
+        var nodeEl = DiagramDOM.findNodeElement(nodeId);
+        if (!nodeEl) return;
+
+        var textEl = nodeEl.querySelector('text');
+        // Mermaid uses .nodeLabel span instead of <text>
+        var mermaidLabel = nodeEl.querySelector('.nodeLabel');
+        var targetEl = textEl || mermaidLabel;
+        if (!targetEl) return;
+
+        // Get current label
+        var currentLabel = '';
+        if (window.MmdEditor) {
+            var editor = document.getElementById('editor');
+            if (editor) currentLabel = MmdEditor.getNodeText(editor.value, nodeId);
+        }
+        if (!currentLabel) {
+            currentLabel = DiagramDOM.getNodeLabel(nodeId) || nodeId;
+        }
+
+        // Get positions
+        var textRect = targetEl.getBoundingClientRect();
+        var container = document.getElementById('preview-container');
+        if (!container) return;
+        var containerRect = container.getBoundingClientRect();
+
+        // Create the overlay
+        var overlay = document.createElement('div');
+        overlay.className = 'inline-edit-overlay';
+        overlay.contentEditable = 'true';
+        overlay.spellcheck = false;
+        overlay.textContent = currentLabel;
+
+        // Position relative to preview-container
+        overlay.style.position = 'absolute';
+        overlay.style.left = (textRect.left - containerRect.left) + 'px';
+        overlay.style.top = (textRect.top - containerRect.top) + 'px';
+        overlay.style.minWidth = Math.max(textRect.width, 60) + 'px';
+        overlay.style.minHeight = textRect.height + 'px';
+
+        // Style to match SVG text appearance
+        var computed = window.getComputedStyle(targetEl);
+        overlay.style.fontFamily = computed.fontFamily || "'Inter', sans-serif";
+        overlay.style.fontSize = computed.fontSize || '14px';
+        overlay.style.fontWeight = computed.fontWeight || '400';
+        overlay.style.color = '#e4e4e7';
+        overlay.style.background = 'var(--surface-2)';
+        overlay.style.border = '2px solid #3b82f6';
+        overlay.style.borderRadius = '4px';
+        overlay.style.padding = '2px 6px';
+        overlay.style.outline = 'none';
+        overlay.style.zIndex = '10001';
+        overlay.style.whiteSpace = 'nowrap';
+        overlay.style.lineHeight = textRect.height + 'px';
+        overlay.style.boxSizing = 'border-box';
+
+        container.appendChild(overlay);
+
+        // Focus and select all text
+        overlay.focus();
+        var range = document.createRange();
+        range.selectNodeContents(overlay);
+        var sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+
+        // Store references
+        activeOverlay = overlay;
+        activeNodeId = nodeId;
+        originalLabel = currentLabel;
+
+        // Hide original SVG text element
+        hiddenTextEl = targetEl;
+        targetEl.style.visibility = 'hidden';
+
+        // Attach event handlers
+        overlay.addEventListener('keydown', handleOverlayKeydown);
+        overlay.addEventListener('blur', handleOverlayBlur);
+
+        // Emit event
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.emit('edit:started', { nodeId: nodeId });
+        }
+    }
+
+    // ── Confirm Edit ──
+
+    function confirm() {
+        if (!activeOverlay) return;
+        isCommitting = true;
+
+        var newText = activeOverlay.textContent.trim();
+        var nodeId = activeNodeId;
+        var oldLabel = originalLabel;
+
+        // Restore SVG text visibility before close
+        if (hiddenTextEl) {
+            hiddenTextEl.style.visibility = '';
+        }
+
+        // Save if changed and not empty
+        if (newText && newText !== originalLabel && window.MmdEditor && MmdEditor.applyEdit) {
+            MmdEditor.applyEdit(function(c) {
+                return MmdEditor.editNodeText(c, nodeId, newText);
+            });
+        }
+
+        // Close the overlay
+        closeOverlay();
+        isCommitting = false;
+
+        // Transition FSM
+        if (window.SmartCodeInteraction) {
+            SmartCodeInteraction.transition('confirm');
+        }
+
+        // Emit event
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.emit('edit:completed', {
+                nodeId: nodeId,
+                oldLabel: oldLabel,
+                newLabel: newText,
+            });
+        }
+    }
+
+    // ── Cancel Edit ──
+
+    function cancel() {
+        if (!activeOverlay) return;
+
+        var nodeId = activeNodeId;
+
+        // Restore SVG text visibility
+        if (hiddenTextEl) {
+            hiddenTextEl.style.visibility = '';
+        }
+
+        // Close the overlay
+        closeOverlay();
+
+        // Transition FSM
+        if (window.SmartCodeInteraction) {
+            SmartCodeInteraction.transition('cancel');
+        }
+
+        // Emit event
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.emit('edit:cancelled', { nodeId: nodeId });
+        }
+    }
+
+    // ── Close Overlay ──
+
+    function closeOverlay() {
+        if (activeOverlay) {
+            activeOverlay.removeEventListener('keydown', handleOverlayKeydown);
+            activeOverlay.removeEventListener('blur', handleOverlayBlur);
+            if (activeOverlay.parentNode) {
+                activeOverlay.parentNode.removeChild(activeOverlay);
+            }
+        }
+        activeOverlay = null;
+        activeNodeId = null;
+        originalLabel = null;
+        hiddenTextEl = null;
+    }
+
+    // ── Event Handlers ──
+
+    function handleOverlayKeydown(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            confirm();
+        } else if (e.key === 'Escape') {
+            cancel();
+        }
+    }
+
+    function handleOverlayBlur(e) {
+        // If focus moved to another interactive element (context menu, etc.), cancel
+        // Use a timeout to let the relatedTarget resolve
+        setTimeout(function() {
+            if (!activeOverlay) return;
+            // Guard: if confirm() already ran, don't cancel
+            if (isCommitting) return;
+            // Check if focus went to a valid target that should keep the edit open
+            var active = document.activeElement;
+            if (active && (active.closest('.context-menu') || active.closest('.flag-popover'))) return;
+            // Default: cancel on blur to prevent accidental data loss
+            cancel();
+        }, 150);
+    }
+
+    // ── Double-click Handler (delegated on #preview-container) ──
+
+    function handleDblClick(e) {
+        // Check FSM blocking states
+        if (window.SmartCodeInteraction && SmartCodeInteraction.isBlocking()) return;
+
+        // Don't handle in special modes
+        var fsmState = window.SmartCodeInteraction ? SmartCodeInteraction.getState() : 'idle';
+        if (fsmState === 'flagging' || fsmState === 'add-node' || fsmState === 'add-edge') return;
+
+        // Skip UI controls
+        if (e.target.closest('.zoom-controls') ||
+            e.target.closest('.flag-popover') ||
+            e.target.closest('.editor-popover') ||
+            e.target.closest('.context-menu') ||
+            e.target.closest('.inline-edit-overlay')) return;
+
+        // Detect what was double-clicked
+        var nodeInfo = DiagramDOM.extractNodeId(e.target);
+        if (!nodeInfo) return;
+
+        // Only handle nodes and subgraphs (not edges)
+        if (nodeInfo.type !== 'node' && nodeInfo.type !== 'subgraph') return;
+
+        // Don't open inline edit on collapsed nodes (let collapse-ui handle them)
+        if (nodeInfo.id.startsWith('__collapsed__')) return;
+
+        // Transition FSM to editing
+        if (window.SmartCodeInteraction) {
+            SmartCodeInteraction.transition('dbl_click', nodeInfo);
+        }
+
+        open(nodeInfo.id);
+    }
+
+    // ── EventBus Subscription: auto-commit on re-render ──
+
+    function handleDiagramRendered() {
+        // If inline edit is active, commit before SVG replacement
+        if (activeOverlay) {
+            confirm();
+        }
+    }
+
+    // ── Init ──
+
+    function init() {
+        var container = document.getElementById('preview-container');
+        if (container) {
+            container.addEventListener('dblclick', handleDblClick);
+        }
+
+        // Subscribe to diagram:rendered to auto-commit active edits
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.on('diagram:rendered', handleDiagramRendered);
+        }
+    }
+
+    // ── Public API ──
+    window.SmartCodeInlineEdit = {
+        init: init,
+        open: open,
+        close: closeOverlay,
+        confirm: confirm,
+        cancel: cancel,
+        isActive: function() { return !!activeOverlay; },
+    };
+})();