@hugobatist/smartcode 0.1.0

package/dist/static/breakpoints.js

@@ -0,0 +1,197 @@
+/**
+ * SmartCode Breakpoints -- visual breakpoint indicators on SVG nodes,
+ * notification bar for breakpoint:hit events, REST toggle/continue/remove.
+ *
+ * Dependencies:
+ *   - diagram-dom.js (DiagramDOM)
+ *   - event-bus.js (SmartCodeEventBus)
+ *   - file-tree.js (SmartCodeFileTree) — for currentFile
+ *
+ * Usage:
+ *   SmartCodeBreakpoints.init();
+ *   SmartCodeBreakpoints.updateBreakpoints(breakpointSet);
+ *   SmartCodeBreakpoints.toggleBreakpoint(nodeId);
+ *   SmartCodeBreakpoints.showNotification(nodeId);
+ *   SmartCodeBreakpoints.hideNotification();
+ */
+(function() {
+    'use strict';
+
+    var SVG_NS = 'http://www.w3.org/2000/svg';
+
+    // ── Module State ──
+    var breakpoints = new Set();
+    var activeNotification = null;
+
+    // ── Helpers ──
+
+    function getCurrentFile() {
+        if (window.SmartCodeFileTree) return SmartCodeFileTree.getCurrentFile();
+        return window.currentFile || '';
+    }
+
+    // ── Breakpoint Indicators on SVG ──
+
+    function applyBreakpointIndicators() {
+        var svg = DiagramDOM.getSVG();
+        if (!svg) return;
+
+        // Remove existing indicators
+        svg.querySelectorAll('.breakpoint-indicator').forEach(function(el) { el.remove(); });
+
+        if (breakpoints.size === 0) return;
+
+        breakpoints.forEach(function(nodeId) {
+            var nodeEl = DiagramDOM.findNodeElement(nodeId);
+            if (!nodeEl) return;
+            var bbox = nodeEl.getBBox ? nodeEl.getBBox() : null;
+            if (!bbox) return;
+
+            // Account for transform="translate(x,y)" on custom renderer nodes
+            var tx = 0, ty = 0;
+            var transform = nodeEl.getAttribute('transform');
+            if (transform) {
+                var m = transform.match(/translate\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)/);
+                if (m) { tx = parseFloat(m[1]); ty = parseFloat(m[2]); }
+            }
+
+            var circle = document.createElementNS(SVG_NS, 'circle');
+            circle.setAttribute('cx', tx + bbox.x - 4);
+            circle.setAttribute('cy', ty + bbox.y + bbox.height / 2);
+            circle.setAttribute('r', '6');
+            circle.setAttribute('fill', '#ef4444');
+            circle.setAttribute('class', 'breakpoint-indicator');
+            svg.appendChild(circle);
+        });
+    }
+
+    // ── Update breakpoints from annotations ──
+
+    function updateBreakpoints(breakpointSet) {
+        breakpoints = breakpointSet instanceof Set ? breakpointSet : new Set(breakpointSet);
+        applyBreakpointIndicators();
+    }
+
+    // ── Notification Bar ──
+
+    function showNotification(nodeId) {
+        hideNotification();
+
+        var container = document.getElementById('preview-container');
+        if (!container) return;
+
+        var bar = document.createElement('div');
+        bar.className = 'breakpoint-notification';
+
+        var msgSpan = document.createElement('span');
+        msgSpan.textContent = 'Breakpoint hit on ';
+        var nameSpan = document.createElement('span');
+        nameSpan.className = 'bp-node-name';
+        nameSpan.textContent = nodeId;
+        msgSpan.appendChild(nameSpan);
+        bar.appendChild(msgSpan);
+
+        var spacer = document.createElement('span');
+        spacer.style.flex = '1';
+        bar.appendChild(spacer);
+
+        var btnContinue = document.createElement('button');
+        btnContinue.className = 'btn-breakpoint-action primary';
+        btnContinue.textContent = 'Continue';
+        btnContinue.addEventListener('click', function() { continueBreakpoint(nodeId); });
+        bar.appendChild(btnContinue);
+
+        var btnRemove = document.createElement('button');
+        btnRemove.className = 'btn-breakpoint-action';
+        btnRemove.textContent = 'Remove Breakpoint';
+        btnRemove.addEventListener('click', function() { removeBreakpoint(nodeId); });
+        bar.appendChild(btnRemove);
+
+        container.insertBefore(bar, container.firstChild);
+        activeNotification = bar;
+    }
+
+    function hideNotification() {
+        if (activeNotification && activeNotification.parentNode) {
+            activeNotification.parentNode.removeChild(activeNotification);
+        }
+        activeNotification = null;
+    }
+
+    // ── REST Integration ──
+
+    function toggleBreakpoint(nodeId) {
+        var file = getCurrentFile();
+        if (!file) return;
+        var action = breakpoints.has(nodeId) ? 'remove' : 'set';
+        fetch((window.SmartCodeBaseUrl || '') + '/api/breakpoints/' + encodeURIComponent(file), {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ nodeId: nodeId, action: action })
+        }).then(function(resp) {
+            if (!resp.ok) return;
+            if (action === 'set') {
+                breakpoints.add(nodeId);
+            } else {
+                breakpoints.delete(nodeId);
+            }
+            applyBreakpointIndicators();
+        }).catch(function(err) {
+            console.warn('Failed to toggle breakpoint:', err.message);
+        });
+    }
+
+    function continueBreakpoint(nodeId) {
+        var file = getCurrentFile();
+        if (!file) return;
+        fetch((window.SmartCodeBaseUrl || '') + '/api/breakpoints/' + encodeURIComponent(file) + '/continue', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ nodeId: nodeId })
+        }).catch(function(err) {
+            console.warn('Failed to continue breakpoint:', err.message);
+        });
+        hideNotification();
+    }
+
+    function removeBreakpoint(nodeId) {
+        var file = getCurrentFile();
+        if (!file) return;
+        fetch((window.SmartCodeBaseUrl || '') + '/api/breakpoints/' + encodeURIComponent(file), {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ nodeId: nodeId, action: 'remove' })
+        }).then(function(resp) {
+            if (!resp.ok) return;
+            breakpoints.delete(nodeId);
+            applyBreakpointIndicators();
+        }).catch(function(err) {
+            console.warn('Failed to remove breakpoint:', err.message);
+        });
+        hideNotification();
+    }
+
+    // ── Init ──
+
+    function init() {
+        // Re-apply indicators after each diagram render
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.on('diagram:rendered', applyBreakpointIndicators);
+        }
+        // Apply indicators if SVG already exists
+        applyBreakpointIndicators();
+    }
+
+    // ── Public API ──
+    window.SmartCodeBreakpoints = {
+        init: init,
+        updateBreakpoints: updateBreakpoints,
+        applyBreakpointIndicators: applyBreakpointIndicators,
+        toggleBreakpoint: toggleBreakpoint,
+        showNotification: showNotification,
+        hideNotification: hideNotification,
+        continueBreakpoint: continueBreakpoint,
+        removeBreakpoint: removeBreakpoint,
+        getBreakpoints: function() { return breakpoints; },
+    };
+})();

package/dist/static/clipboard.js

@@ -0,0 +1,94 @@
+/**
+ * SmartCode -- Clipboard (Copy/Paste/Duplicate)
+ * Internal clipboard buffer for node copy/paste/duplicate operations.
+ * Uses internal JS buffer (NOT browser Clipboard API -- localhost is not HTTPS).
+ *
+ * Dependencies:
+ *   - selection.js (SmartCodeSelection)
+ *   - diagram-editor.js (MmdEditor)
+ *
+ * Usage:
+ *   SmartCodeClipboard.copy();       // copies selected node to buffer
+ *   SmartCodeClipboard.paste();      // pastes node from buffer with new ID
+ *   SmartCodeClipboard.duplicate();  // duplicates selected node in place
+ *   SmartCodeClipboard.hasContent(); // true if buffer has content
+ *   SmartCodeClipboard.clear();      // clears the buffer
+ */
+(function () {
+    'use strict';
+
+    var buffer = null; // { nodeId: string, label: string } | null
+
+    /**
+     * Copy the currently selected node to the internal buffer.
+     * @returns {boolean} true if a node was copied, false otherwise
+     */
+    function copy() {
+        if (!window.SmartCodeSelection) return false;
+        var sel = SmartCodeSelection.getSelected();
+        if (!sel || sel.type !== 'node') return false;
+
+        if (!window.MmdEditor) return false;
+        var editor = document.getElementById('editor');
+        if (!editor) return false;
+
+        var label = MmdEditor.getNodeText(editor.value, sel.id);
+        buffer = { nodeId: sel.id, label: label };
+        return true;
+    }
+
+    /**
+     * Paste the node from the buffer with a new ID and "(copy)" suffix.
+     * @returns {boolean} true if paste was performed, false otherwise
+     */
+    function paste() {
+        if (!buffer) return false;
+        if (!window.MmdEditor) return false;
+
+        var pasteLabel = buffer.label + ' (copy)';
+        MmdEditor.applyEdit(function (c) {
+            var newId = MmdEditor.generateNodeId(c);
+            return MmdEditor.addNode(c, newId, pasteLabel);
+        });
+        return true;
+    }
+
+    /**
+     * Duplicate the currently selected node in place (new ID, "(copy)" suffix).
+     * @returns {boolean} true if duplication was performed, false otherwise
+     */
+    function duplicate() {
+        if (!window.SmartCodeSelection) return false;
+        var sel = SmartCodeSelection.getSelected();
+        if (!sel || sel.type !== 'node') return false;
+
+        if (!window.MmdEditor) return false;
+        var nodeId = sel.id;
+        MmdEditor.applyEdit(function (c) {
+            return MmdEditor.duplicateNode(c, nodeId);
+        });
+        return true;
+    }
+
+    /**
+     * @returns {boolean} Whether the clipboard buffer has content
+     */
+    function hasContent() {
+        return buffer !== null;
+    }
+
+    /**
+     * Clear the clipboard buffer.
+     */
+    function clear() {
+        buffer = null;
+    }
+
+    window.SmartCodeClipboard = {
+        copy: copy,
+        paste: paste,
+        duplicate: duplicate,
+        hasContent: hasContent,
+        clear: clear,
+    };
+})();

package/dist/static/collapse-ui.js

@@ -0,0 +1,325 @@
+/**
+ * SmartCode — Collapse UI
+ * Browser-side collapse/expand interaction handlers.
+ * Handles click events on collapsed nodes and subgraph headers.
+ * Exposed as window.SmartCodeCollapseUI
+ *
+ * Dependencies: diagram-dom.js (DiagramDOM), event-bus.js (SmartCodeEventBus)
+ */
+(function() {
+  'use strict';
+
+  // Private state -- not exposed on the public object
+  var _state = { collapsed: new Set() };
+
+  var SmartCodeCollapseUI = {
+    autoCollapsed: [],
+    breadcrumbs: [],
+    focusedSubgraph: null,
+    config: { maxVisibleNodes: 50 },
+    onToggle: null,
+    onFocusChange: null,
+
+    // ─── Initialization ──────────────────────────────────────────────────────
+
+    init: function(options) {
+      options = options || {};
+      this.onToggle = options.onToggle || (function() {});
+      this.attachClickHandlers();
+
+      // Subscribe to event bus: re-apply overlays after diagram render
+      if (window.SmartCodeEventBus) {
+        var self = this;
+        SmartCodeEventBus.on('diagram:rendered', function() {
+          if (typeof self.applyOverlays === 'function') {
+            self.applyOverlays();
+          }
+        });
+      }
+    },
+
+    initFocusMode: function(options) {
+      options = options || {};
+      this.onFocusChange = options.onFocusChange || (function() {});
+      this.attachFocusHandlers();
+    },
+
+    // ─── State Management ────────────────────────────────────────────────────
+
+    setCollapsed: function(ids) {
+      _state.collapsed = new Set(ids);
+    },
+
+    getCollapsed: function() {
+      return Array.from(_state.collapsed);
+    },
+
+    setAutoCollapsed: function(ids) {
+      this.autoCollapsed = ids || [];
+      this.renderAutoCollapseNotice();
+    },
+
+    setConfig: function(config) {
+      this.config = Object.assign({}, this.config, config);
+    },
+
+    setBreadcrumbs: function(crumbs, focusedSubgraph) {
+      this.breadcrumbs = crumbs || [];
+      this.focusedSubgraph = focusedSubgraph;
+      this.renderBreadcrumbs();
+    },
+
+    // ─── Click Handlers ──────────────────────────────────────────────────────
+
+    attachClickHandlers: function() {
+      var diagram = document.getElementById('preview');
+      if (!diagram) return;
+      var self = this;
+
+      diagram.addEventListener('click', function(e) {
+        // Respect FSM states — don't interfere with editing or context menu
+        if (window.SmartCodeInteraction) {
+          var st = SmartCodeInteraction.getState();
+          if (st === 'editing' || st === 'context-menu') return;
+        }
+        // Don't interfere with zoom controls
+        if (e.target.closest('.zoom-controls')) return;
+        if (e.target.closest('.flag-popover')) return;
+
+        var target = e.target.closest('.node') || e.target.closest('.smartcode-node');
+        if (target) {
+          var nodeId = self.extractNodeId(target);
+          if (nodeId && nodeId.startsWith('__collapsed__')) {
+            e.preventDefault();
+            e.stopPropagation();
+            var subgraphId = nodeId.replace('__collapsed__', '');
+            self.expand(subgraphId);
+            return;
+          }
+        }
+
+        // Click on cluster label to collapse (Mermaid .cluster or custom .smartcode-subgraph)
+        var clusterLabel = e.target.closest('.cluster-label');
+        if (clusterLabel) {
+          var cluster = clusterLabel.closest('.cluster') || clusterLabel.closest('.smartcode-subgraph');
+          if (cluster) {
+            var clusterId = self.extractClusterId(cluster);
+            if (clusterId) {
+              e.preventDefault();
+              e.stopPropagation();
+              self.collapse(clusterId);
+            }
+          }
+        }
+      });
+    },
+
+    attachFocusHandlers: function() {
+      var diagram = document.getElementById('preview');
+      if (!diagram) return;
+      var self = this;
+
+      // Double-click to enter focus mode
+      diagram.addEventListener('dblclick', function(e) {
+        // Respect FSM states — don't enter focus mode when editing or a node is selected
+        if (window.SmartCodeInteraction) {
+          var st = SmartCodeInteraction.getState();
+          if (st === 'editing' || st === 'selected') return;
+        }
+        var node = e.target.closest('.node') || e.target.closest('.smartcode-node');
+        if (!node) return;
+
+        var nodeId = self.extractNodeId(node);
+        if (!nodeId) return;
+
+        // Don't focus on collapsed summary nodes
+        if (nodeId.startsWith('__collapsed__')) return;
+
+        e.preventDefault();
+        self.enterFocusMode(nodeId);
+      });
+
+      // Escape to exit focus mode
+      document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && self.focusedSubgraph) {
+          self.exitFocusMode();
+        }
+      });
+    },
+
+    // Use DiagramDOM.extractNodeId for node identification
+    extractNodeId: function(nodeElement) {
+      var info = DiagramDOM.extractNodeId(nodeElement);
+      return info ? info.id : null;
+    },
+
+    // Use DiagramDOM for cluster/subgraph identification
+    extractClusterId: function(clusterElement) {
+      var info = DiagramDOM.extractNodeId(clusterElement);
+      if (info && info.type === 'subgraph') return info.id;
+      // Fallback: try the element's own ID for plain cluster IDs
+      var id = clusterElement.id || '';
+      if (id) return id.replace(/^subGraph\d*-?/, '') || null;
+      return null;
+    },
+
+    // ─── Collapse/Expand Operations ──────────────────────────────────────────
+
+    expand: function(subgraphId) {
+      _state.collapsed.delete(subgraphId);
+      // Remove from auto-collapsed if present
+      var idx = this.autoCollapsed.indexOf(subgraphId);
+      if (idx !== -1) this.autoCollapsed.splice(idx, 1);
+      this.renderAutoCollapseNotice();
+      this.onToggle(this.getCollapsed());
+    },
+
+    collapse: function(subgraphId) {
+      _state.collapsed.add(subgraphId);
+      this.onToggle(this.getCollapsed());
+    },
+
+    toggle: function(subgraphId) {
+      if (_state.collapsed.has(subgraphId)) {
+        this.expand(subgraphId);
+      } else {
+        this.collapse(subgraphId);
+      }
+    },
+
+    expandAll: function() {
+      for (var i = 0; i < this.autoCollapsed.length; i++) {
+        _state.collapsed.delete(this.autoCollapsed[i]);
+      }
+      this.autoCollapsed = [];
+      this.renderAutoCollapseNotice();
+      this.onToggle(this.getCollapsed());
+    },
+
+    // ─── Focus Mode ──────────────────────────────────────────────────────────
+
+    enterFocusMode: function(nodeId) {
+      if (this.onFocusChange) {
+        this.onFocusChange({ action: 'focus', nodeId: nodeId });
+      }
+    },
+
+    exitFocusMode: function() {
+      this.focusedSubgraph = null;
+      this.breadcrumbs = [];
+      this.renderBreadcrumbs();
+      if (this.onFocusChange) {
+        this.onFocusChange({ action: 'exit' });
+      }
+    },
+
+    navigateTo: function(breadcrumbId) {
+      if (this.onFocusChange) {
+        this.onFocusChange({ action: 'navigate', breadcrumbId: breadcrumbId });
+      }
+    },
+
+    // ─── UI Rendering ────────────────────────────────────────────────────────
+
+    renderAutoCollapseNotice: function() {
+      var existing = document.getElementById('auto-collapse-notice');
+      if (existing) existing.remove();
+
+      if (this.autoCollapsed.length === 0) return;
+
+      var notice = document.createElement('div');
+      notice.id = 'auto-collapse-notice';
+      notice.className = 'auto-collapse-notice';
+
+      var icon = document.createElement('span');
+      icon.className = 'notice-icon';
+      // Safe: SmartCodeIcons.chart is a static trusted SVG string
+      icon.innerHTML = SmartCodeIcons.chart;
+      notice.appendChild(icon);
+
+      var text = document.createElement('span');
+      text.className = 'notice-text';
+      var count = this.autoCollapsed.length;
+      var limit = this.config.maxVisibleNodes || 50;
+      text.textContent = count + ' subgraph' + (count > 1 ? 's' : '') + ' auto-collapsed to fit ' + limit + ' node limit';
+      notice.appendChild(text);
+
+      var self = this;
+      var expandBtn = document.createElement('button');
+      expandBtn.className = 'notice-expand-all';
+      expandBtn.title = 'Expand all';
+      expandBtn.textContent = 'Expand All';
+      expandBtn.addEventListener('click', function() {
+        self.expandAll();
+      });
+      notice.appendChild(expandBtn);
+
+      var dismissBtn = document.createElement('button');
+      dismissBtn.className = 'notice-dismiss';
+      dismissBtn.title = 'Dismiss';
+      // Safe: SmartCodeIcons.close is a static trusted SVG string
+      dismissBtn.innerHTML = SmartCodeIcons.close;
+      dismissBtn.addEventListener('click', function() {
+        notice.remove();
+      });
+      notice.appendChild(dismissBtn);
+
+      var container = document.getElementById('preview-container');
+      if (container) container.insertBefore(notice, container.firstChild);
+    },
+
+    renderBreadcrumbs: function() {
+      var existing = document.getElementById('breadcrumb-bar');
+      if (existing) existing.remove();
+
+      // Don't render if no breadcrumbs or only "Overview" without focus
+      if (this.breadcrumbs.length <= 1 && !this.focusedSubgraph) return;
+
+      var bar = document.createElement('div');
+      bar.id = 'breadcrumb-bar';
+      bar.className = 'breadcrumb-bar';
+
+      var self = this;
+      for (var i = 0; i < this.breadcrumbs.length; i++) {
+        var crumb = this.breadcrumbs[i];
+        var isLast = i === this.breadcrumbs.length - 1;
+
+        var item = document.createElement('span');
+        item.className = 'breadcrumb-item' + (isLast ? ' current' : '');
+        item.textContent = crumb.label;
+        item.dataset.id = crumb.id;
+
+        if (!isLast) {
+          item.addEventListener('click', (function(c) {
+            return function() { self.navigateTo(c.id); };
+          })(crumb));
+        }
+
+        bar.appendChild(item);
+
+        if (!isLast) {
+          var sep = document.createElement('span');
+          sep.className = 'breadcrumb-separator';
+          sep.textContent = ' \u203A ';
+          bar.appendChild(sep);
+        }
+      }
+
+      // Add exit button if in focus mode
+      if (this.focusedSubgraph) {
+        var exitBtn = document.createElement('button');
+        exitBtn.className = 'breadcrumb-exit';
+        // Safe: SmartCodeIcons.close is a static trusted SVG string
+        exitBtn.innerHTML = SmartCodeIcons.close + ' Exit Focus';
+        exitBtn.title = 'Exit focus mode (Esc)';
+        exitBtn.addEventListener('click', function() { self.exitFocusMode(); });
+        bar.appendChild(exitBtn);
+      }
+
+      var container = document.getElementById('preview-container');
+      if (container) container.insertBefore(bar, container.firstChild);
+    }
+  };
+
+  window.SmartCodeCollapseUI = SmartCodeCollapseUI;
+})();

package/dist/static/command-history.js

@@ -0,0 +1,89 @@
+/**
+ * SmartCode -- Command History (Undo/Redo)
+ * Implements the Command pattern with capped undo/redo stacks.
+ * Each command is { before: string, after: string, description: string }.
+ * Dependencies: event-bus.js (SmartCodeEventBus, optional)
+ */
+(function () {
+    'use strict';
+
+    var undoStack = [];
+    var redoStack = [];
+    var MAX_HISTORY = 100;
+
+    function emitChanged() {
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.emit('history:changed', {
+                canUndo: undoStack.length > 0,
+                canRedo: redoStack.length > 0,
+                undoCount: undoStack.length,
+                redoCount: redoStack.length,
+            });
+        }
+    }
+
+    /**
+     * Push a new command to the undo stack. Clears redo stack (standard editor behavior).
+     * @param {{ before: string, after: string, description: string }} command
+     */
+    function execute(command) {
+        undoStack.push(command);
+        if (undoStack.length > MAX_HISTORY) undoStack.shift();
+        redoStack.length = 0;
+        emitChanged();
+    }
+
+    /**
+     * Pop the last command from the undo stack and push to redo stack.
+     * @returns {string|null} The before-state content, or null if nothing to undo.
+     */
+    function undo() {
+        if (undoStack.length === 0) return null;
+        var cmd = undoStack.pop();
+        redoStack.push(cmd);
+        emitChanged();
+        return cmd.before;
+    }
+
+    /**
+     * Pop the last command from the redo stack and push to undo stack.
+     * @returns {string|null} The after-state content, or null if nothing to redo.
+     */
+    function redo() {
+        if (redoStack.length === 0) return null;
+        var cmd = redoStack.pop();
+        undoStack.push(cmd);
+        emitChanged();
+        return cmd.after;
+    }
+
+    /** @returns {boolean} Whether there are commands to undo */
+    function canUndo() { return undoStack.length > 0; }
+
+    /** @returns {boolean} Whether there are commands to redo */
+    function canRedo() { return redoStack.length > 0; }
+
+    /** Clear both stacks. Called on file switch. */
+    function clear() {
+        undoStack.length = 0;
+        redoStack.length = 0;
+        emitChanged();
+    }
+
+    /** @returns {number} Number of commands in the undo stack */
+    function getUndoCount() { return undoStack.length; }
+
+    /** @returns {number} Number of commands in the redo stack */
+    function getRedoCount() { return redoStack.length; }
+
+    window.SmartCodeCommandHistory = {
+        execute: execute,
+        undo: undo,
+        redo: redo,
+        canUndo: canUndo,
+        canRedo: canRedo,
+        clear: clear,
+        getUndoCount: getUndoCount,
+        getRedoCount: getRedoCount,
+    };
+})();