@hugobatist/smartcode 0.1.0

package/dist/static/renderer.js

@@ -0,0 +1,280 @@
+/**
+ * SmartCode Renderer -- Mermaid rendering pipeline, error panel, status injection.
+ * Extracted from live.html (Phase 9 Plan 02).
+ *
+ * Dependencies: mermaid (CDN), event-bus.js (SmartCodeEventBus)
+ * Dependents: pan-zoom.js, export.js, annotations.js, collapse-ui.js
+ *
+ * Usage:
+ *   SmartCodeRenderer.render(code);      // async
+ *   SmartCodeRenderer.escapeHtml(text);
+ *   SmartCodeRenderer.injectStatusStyles(cleanCode);
+ *   SmartCodeRenderer.MERMAID_CONFIG;     // shared config for export.js
+ */
+(function() {
+    'use strict';
+
+    // ── Shared Mermaid Config ──
+    var MERMAID_CONFIG = {
+        startOnLoad: false,
+        theme: 'base',
+        themeVariables: {
+            darkMode: false,
+            background: '#ffffff',
+            fontFamily: 'Inter, sans-serif',
+            fontSize: '16px',
+            primaryColor: '#3b82f6',
+            primaryTextColor: '#18181b',
+            primaryBorderColor: '#2563eb',
+            secondaryColor: '#dbeafe',
+            tertiaryColor: '#f0fdf4',
+            lineColor: '#52525b',
+            mainBkg: '#eff6ff',
+            nodeBorder: '#2563eb',
+            clusterBkg: '#f4f4f5',
+            clusterBorder: '#a1a1aa',
+            titleColor: '#18181b',
+            edgeLabelBackground: '#ffffff',
+        },
+        flowchart: {
+            curve: 'basis',
+            padding: 48,
+            nodeSpacing: 100,
+            rankSpacing: 120,
+            htmlLabels: false,
+            useMaxWidth: false,
+        },
+        securityLevel: 'loose',
+    };
+
+    mermaid.initialize(MERMAID_CONFIG);
+
+    // ── Render State ──
+    var isInitialRender = true;
+
+    // ── HTML Escape Helper ──
+    function escapeHtml(text) {
+        var div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML;
+    }
+
+    // ── Status Style Injection ──
+    var STATUS_CLASS_MAP = {
+        'ok': 'ok',
+        'problem': 'problem',
+        'in-progress': 'inProgress',
+        'discarded': 'discarded',
+    };
+
+    function injectStatusStyles(cleanCode) {
+        if (!window.SmartCodeAnnotations) return cleanCode;
+        var statusMap = SmartCodeAnnotations.getStatusMap();
+        if (!statusMap || statusMap.size === 0) return cleanCode;
+
+        var classDefs = [
+            'classDef ok fill:#22c55e,stroke:#16a34a,color:#fff;',
+            'classDef problem fill:#ef4444,stroke:#dc2626,color:#fff;',
+            'classDef inProgress fill:#eab308,stroke:#ca8a04,color:#000;',
+            'classDef discarded fill:#71717a,stroke:#52525b,color:#fff;',
+        ];
+
+        var classAssignments = [];
+        for (var entry of statusMap) {
+            var nodeId = entry[0];
+            var statusValue = entry[1];
+            var className = STATUS_CLASS_MAP[statusValue];
+            if (className) {
+                classAssignments.push('class ' + nodeId + ' ' + className);
+            }
+        }
+
+        if (classAssignments.length === 0) return cleanCode;
+
+        return cleanCode.trimEnd() + '\n' + classDefs.join('\n') + '\n' + classAssignments.join('\n');
+    }
+
+    // ── Error Icon (SVG via DOM) ──
+    function createErrorIcon() {
+        var ns = 'http://www.w3.org/2000/svg';
+        var svg = document.createElementNS(ns, 'svg');
+        svg.setAttribute('width', '20');
+        svg.setAttribute('height', '20');
+        svg.setAttribute('viewBox', '0 0 20 20');
+        svg.setAttribute('fill', 'none');
+
+        var circle = document.createElementNS(ns, 'circle');
+        circle.setAttribute('cx', '10');
+        circle.setAttribute('cy', '10');
+        circle.setAttribute('r', '9');
+        circle.setAttribute('stroke', '#ef4444');
+        circle.setAttribute('stroke-width', '2');
+        svg.appendChild(circle);
+
+        var line = document.createElementNS(ns, 'path');
+        line.setAttribute('d', 'M10 6v5');
+        line.setAttribute('stroke', '#ef4444');
+        line.setAttribute('stroke-width', '2');
+        line.setAttribute('stroke-linecap', 'round');
+        svg.appendChild(line);
+
+        var dot = document.createElementNS(ns, 'circle');
+        dot.setAttribute('cx', '10');
+        dot.setAttribute('cy', '14');
+        dot.setAttribute('r', '1');
+        dot.setAttribute('fill', '#ef4444');
+        svg.appendChild(dot);
+
+        return svg;
+    }
+
+    // ── Error Panel Builder ──
+    function buildErrorPanel(error, sourceCode) {
+        var container = document.createElement('div');
+        container.style.cssText = 'padding:40px;max-width:700px;font-family:Inter,sans-serif;';
+
+        // Main panel
+        var panel = document.createElement('div');
+        panel.style.cssText = 'background:#fff;border:1px solid #fecaca;border-left:4px solid #ef4444;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.1);';
+
+        // Header
+        var header = document.createElement('div');
+        header.style.cssText = 'padding:16px 20px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #fef2f2;';
+
+        header.appendChild(createErrorIcon());
+
+        var title = document.createElement('span');
+        title.style.cssText = 'font-size:15px;font-weight:700;color:#991b1b;';
+        title.textContent = 'Mermaid Syntax Error';
+        header.appendChild(title);
+
+        // Parse line number from error message
+        var errorMsg = String(error.message || error);
+        var lineMatch = errorMsg.match(/line\s+(\d+)/i);
+        var errorLine = lineMatch ? parseInt(lineMatch[1], 10) : null;
+
+        if (errorLine !== null) {
+            var badge = document.createElement('span');
+            badge.style.cssText = 'background:#fef2f2;color:#ef4444;font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;border:1px solid #fecaca;';
+            badge.textContent = 'Line ' + errorLine;
+            header.appendChild(badge);
+        }
+
+        panel.appendChild(header);
+
+        // Error message
+        var msgBlock = document.createElement('div');
+        msgBlock.style.cssText = 'padding:16px 20px;';
+
+        var pre = document.createElement('pre');
+        pre.style.cssText = 'white-space:pre-wrap;word-break:break-word;color:#6b7280;font-size:13px;font-family:"JetBrains Mono",monospace;margin:0;line-height:1.6;background:#fef2f2;padding:12px;border-radius:8px;';
+        pre.textContent = errorMsg;
+        msgBlock.appendChild(pre);
+        panel.appendChild(msgBlock);
+
+        // Code snippet with context (if line number available)
+        if (errorLine !== null && sourceCode) {
+            var lines = sourceCode.split('\n');
+            var start = Math.max(0, errorLine - 4); // 3 lines before
+            var end = Math.min(lines.length, errorLine + 2); // 2 lines after
+
+            var snippetBlock = document.createElement('div');
+            snippetBlock.style.cssText = 'padding:0 20px 16px;';
+
+            var snippetLabel = document.createElement('div');
+            snippetLabel.style.cssText = 'font-size:11px;font-weight:600;color:#a1a1aa;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;';
+            snippetLabel.textContent = 'Codigo fonte';
+            snippetBlock.appendChild(snippetLabel);
+
+            var codeContainer = document.createElement('div');
+            codeContainer.style.cssText = 'background:#18181b;border-radius:8px;overflow:hidden;font-family:"JetBrains Mono",monospace;font-size:12px;line-height:1.7;';
+
+            for (var i = start; i < end; i++) {
+                var lineNum = i + 1;
+                var isError = lineNum === errorLine;
+                var lineDiv = document.createElement('div');
+                lineDiv.style.cssText = isError
+                    ? 'display:flex;background:rgba(239,68,68,0.2);'
+                    : 'display:flex;';
+
+                var numSpan = document.createElement('span');
+                numSpan.style.cssText = 'display:inline-block;width:40px;text-align:right;padding-right:12px;color:' + (isError ? '#ef4444' : '#6b7280') + ';user-select:none;flex-shrink:0;';
+                numSpan.textContent = String(lineNum);
+
+                var codeSpan = document.createElement('span');
+                codeSpan.style.cssText = 'color:' + (isError ? '#fca5a5' : '#e4e4e7') + ';padding-right:12px;';
+                codeSpan.textContent = lines[i] || '';
+
+                lineDiv.appendChild(numSpan);
+                lineDiv.appendChild(codeSpan);
+                codeContainer.appendChild(lineDiv);
+            }
+
+            snippetBlock.appendChild(codeContainer);
+            panel.appendChild(snippetBlock);
+        }
+
+        container.appendChild(panel);
+        return container;
+    }
+
+    // ── Render ──
+    async function render(code) {
+        if (!code || !code.trim()) return;
+        // Strip annotations before rendering (Mermaid doesn't understand %% @flag / @status)
+        var cleanCode = window.SmartCodeAnnotations
+            ? SmartCodeAnnotations.getCleanContent(code)
+            : code;
+        // Inject status classDef styles before rendering
+        var styledCode = injectStatusStyles(cleanCode);
+        var preview = document.getElementById('preview');
+        try {
+            var result = await mermaid.render('mermaid-' + Date.now(), styledCode.trim());
+            // Safe: SVG generated by mermaid.render(), not user input
+            preview.textContent = '';
+            preview.insertAdjacentHTML('afterbegin', result.svg);
+            // Apply transform (from pan-zoom module, loaded later but called after all scripts)
+            if (window.applyTransform) window.applyTransform();
+            // Apply flag indicators after SVG is in the DOM
+            if (window.SmartCodeAnnotations) SmartCodeAnnotations.applyFlagsToSVG();
+            // Apply collapse overlays if available
+            if (window.SmartCodeCollapseUI && SmartCodeCollapseUI.applyOverlays) SmartCodeCollapseUI.applyOverlays();
+            // Only auto-fit on initial render or file navigation; preserve zoom on live updates
+            if (isInitialRender) {
+                requestAnimationFrame(function() {
+                    if (window.zoomFit) window.zoomFit();
+                });
+                isInitialRender = false;
+            } else {
+                if (window.applyTransform) window.applyTransform();
+            }
+            // Emit rendered event
+            if (window.SmartCodeEventBus) {
+                SmartCodeEventBus.emit('diagram:rendered', { svg: result.svg });
+            }
+        } catch (e) {
+            // Show structured error panel with line numbers using cleanCode (user's source)
+            preview.textContent = '';
+            preview.appendChild(buildErrorPanel(e, cleanCode));
+            // Emit error event
+            if (window.SmartCodeEventBus) {
+                SmartCodeEventBus.emit('diagram:error', { error: e });
+            }
+        }
+    }
+
+    // ── Public API ──
+    window.SmartCodeRenderer = {
+        render: render,
+        escapeHtml: escapeHtml,
+        injectStatusStyles: injectStatusStyles,
+        MERMAID_CONFIG: MERMAID_CONFIG,
+        setInitialRender: function(v) { isInitialRender = v; },
+        getInitialRender: function() { return isInitialRender; },
+    };
+
+    // Backward compat -- other modules and inline code call these directly
+    window.render = render;
+    window.escapeHtml = escapeHtml;
+    window.injectStatusStyles = injectStatusStyles;
+})();

package/dist/static/search.css

@@ -0,0 +1,103 @@
+/* ═══════════════════════════════════════════════
+   SmartCode — Node Search (Ctrl+F)
+   ═══════════════════════════════════════════════ */
+
+/* ── Search Bar ── */
+.search-bar {
+    position: absolute;
+    top: 12px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: var(--surface-2);
+    border: 1px solid var(--border-default);
+    border-radius: 12px;
+    padding: 6px 10px;
+    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
+}
+
+.search-bar input {
+    background: var(--surface-3);
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    padding: 6px 12px;
+    outline: none;
+    width: 220px;
+    transition: border-color 0.15s;
+}
+
+.search-bar input:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px var(--accent-muted);
+}
+
+.search-bar input::placeholder {
+    color: var(--text-tertiary);
+}
+
+/* ── Match Count ── */
+.search-bar .match-count {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    min-width: 50px;
+    text-align: center;
+    white-space: nowrap;
+    user-select: none;
+}
+
+.search-bar .match-count.no-match {
+    color: var(--status-problem);
+}
+
+/* ── Navigation Buttons ── */
+.search-bar .search-nav-btn,
+.search-bar .search-close-btn {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    border-radius: 6px;
+    font-size: 12px;
+    transition: background 0.15s, color 0.15s;
+}
+
+.search-bar .search-nav-btn:hover,
+.search-bar .search-close-btn:hover {
+    background: var(--surface-4);
+    color: var(--text-primary);
+}
+
+.search-bar .search-close-btn {
+    font-size: 14px;
+    margin-left: 2px;
+}
+
+/* ── Match Highlight (amber outline) ── */
+.search-match rect,
+.search-match circle,
+.search-match polygon {
+    stroke: var(--search-match) !important;
+    stroke-width: 3px !important;
+}
+
+/* ── Active Match (accent glow) ── */
+.search-match-active rect,
+.search-match-active circle,
+.search-match-active polygon {
+    stroke: var(--accent) !important;
+    stroke-width: 4px !important;
+    filter: drop-shadow(0 0 6px var(--accent-muted));
+}

package/dist/static/search.js

@@ -0,0 +1,304 @@
+/**
+ * SmartCode — Node Search (Ctrl+F)
+ * Find and highlight matching nodes in the current SVG diagram.
+ * Exposed as window.SmartCodeSearch
+ *
+ * Dependencies: diagram-dom.js (DiagramDOM), event-bus.js (SmartCodeEventBus)
+ */
+(function () {
+    'use strict';
+
+    var state = {
+        isOpen: false,
+        query: '',
+        matches: [],
+        currentIndex: -1,
+    };
+
+    var hooks = {
+        getEditor: function () { return document.getElementById('editor'); },
+        getPan: function () { return { panX: 0, panY: 0, zoom: 1 }; },
+        setPan: function () {},
+    };
+
+    var barEl = null;
+    var inputEl = null;
+    var countEl = null;
+    var debounceId = null;
+
+    // ── DOM-safe Search Bar Builder ──
+
+    function buildSearchBar() {
+        var bar = document.createElement('div');
+        bar.className = 'search-bar';
+
+        var input = document.createElement('input');
+        input.type = 'text';
+        input.placeholder = 'Search node...';
+        input.setAttribute('autocomplete', 'off');
+        input.setAttribute('spellcheck', 'false');
+
+        var count = document.createElement('span');
+        count.className = 'match-count';
+        count.textContent = '';
+
+        var btnPrev = document.createElement('button');
+        btnPrev.className = 'search-nav-btn';
+        btnPrev.innerHTML = SmartCodeIcons.arrowUp; /* safe: static SVG */
+        btnPrev.title = 'Previous (Shift+Enter)';
+        btnPrev.addEventListener('click', function () { navigatePrev(); });
+
+        var btnNext = document.createElement('button');
+        btnNext.className = 'search-nav-btn';
+        btnNext.innerHTML = SmartCodeIcons.arrowDown; /* safe: static SVG */
+        btnNext.title = 'Next (Enter)';
+        btnNext.addEventListener('click', function () { navigateNext(); });
+
+        var btnClose = document.createElement('button');
+        btnClose.className = 'search-close-btn';
+        btnClose.innerHTML = SmartCodeIcons.close; /* safe: static SVG */
+        btnClose.title = 'Close (Esc)';
+        btnClose.addEventListener('click', function () { close(); });
+
+        bar.appendChild(input);
+        bar.appendChild(count);
+        bar.appendChild(btnPrev);
+        bar.appendChild(btnNext);
+        bar.appendChild(btnClose);
+
+        input.addEventListener('input', function () {
+            clearTimeout(debounceId);
+            var val = input.value;
+            debounceId = setTimeout(function () { search(val); }, 150);
+        });
+
+        input.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter' && e.shiftKey) {
+                e.preventDefault();
+                navigatePrev();
+            } else if (e.key === 'Enter') {
+                e.preventDefault();
+                navigateNext();
+            } else if (e.key === 'Escape') {
+                e.preventDefault();
+                close();
+            }
+        });
+
+        barEl = bar;
+        inputEl = input;
+        countEl = count;
+
+        return bar;
+    }
+
+    // ── Open / Close ──
+
+    function open() {
+        if (state.isOpen) {
+            // Already open — just refocus
+            if (inputEl) { inputEl.focus(); inputEl.select(); }
+            return;
+        }
+        state.isOpen = true;
+
+        var container = document.getElementById('preview-container');
+        if (!container) return;
+
+        if (!barEl) buildSearchBar();
+        container.appendChild(barEl);
+        inputEl.value = state.query || '';
+        inputEl.focus();
+        if (state.query) inputEl.select();
+    }
+
+    function close() {
+        if (!state.isOpen) return;
+        state.isOpen = false;
+        state.query = '';
+        state.matches = [];
+        state.currentIndex = -1;
+
+        clearHighlights();
+        if (barEl && barEl.parentNode) barEl.parentNode.removeChild(barEl);
+    }
+
+    // ── Search Logic (uses DiagramDOM) ──
+
+    function search(query) {
+        state.query = query;
+        state.matches = [];
+        state.currentIndex = -1;
+        clearHighlights();
+
+        if (!query || !query.trim()) {
+            updateCount();
+            return;
+        }
+
+        var lowerQuery = query.toLowerCase();
+
+        // Use DiagramDOM.getAllNodeLabels() instead of direct SVG query
+        var labels = DiagramDOM.getAllNodeLabels();
+        if (labels.length === 0) { updateCount(); return; }
+
+        var seen = new Set();
+
+        for (var i = 0; i < labels.length; i++) {
+            var label = labels[i];
+            var text = (label.textContent || '').toLowerCase();
+            if (text.indexOf(lowerQuery) === -1) continue;
+
+            // Use DiagramDOM.findMatchParent() instead of inline walk-up loop
+            var parent = DiagramDOM.findMatchParent(label);
+            if (!parent) continue;
+
+            // Deduplicate by element reference
+            var parentId = parent.getAttribute('id') || ('__match_' + i);
+            if (seen.has(parentId)) continue;
+            seen.add(parentId);
+
+            state.matches.push(parent);
+        }
+
+        highlightMatches();
+        updateCount();
+
+        // Auto-navigate to first match
+        if (state.matches.length > 0) {
+            state.currentIndex = 0;
+            setActiveMatch(0);
+            scrollToMatch(0);
+        }
+
+        // Emit search event via event bus
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.emit('search:results', { query: query, matchCount: state.matches.length });
+        }
+    }
+
+    // ── Highlighting ──
+
+    function highlightMatches() {
+        for (var i = 0; i < state.matches.length; i++) {
+            state.matches[i].classList.add('search-match');
+        }
+    }
+
+    function clearHighlights() {
+        var svg = DiagramDOM.getSVG();
+        if (!svg) return;
+        var matched = svg.querySelectorAll('.search-match, .search-match-active');
+        for (var i = 0; i < matched.length; i++) {
+            matched[i].classList.remove('search-match', 'search-match-active');
+        }
+    }
+
+    function setActiveMatch(index) {
+        // Clear previous active
+        var svg = DiagramDOM.getSVG();
+        if (!svg) return;
+        var prev = svg.querySelectorAll('.search-match-active');
+        for (var i = 0; i < prev.length; i++) {
+            prev[i].classList.remove('search-match-active');
+        }
+        // Set new active
+        if (index >= 0 && index < state.matches.length) {
+            state.matches[index].classList.add('search-match-active');
+        }
+    }
+
+    // ── Navigation ──
+
+    function navigateNext() {
+        if (state.matches.length === 0) return;
+        state.currentIndex = (state.currentIndex + 1) % state.matches.length;
+        setActiveMatch(state.currentIndex);
+        scrollToMatch(state.currentIndex);
+        updateCount();
+        // Emit match navigation event
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.emit('search:match-selected', { index: state.currentIndex });
+        }
+    }
+
+    function navigatePrev() {
+        if (state.matches.length === 0) return;
+        state.currentIndex = (state.currentIndex - 1 + state.matches.length) % state.matches.length;
+        setActiveMatch(state.currentIndex);
+        scrollToMatch(state.currentIndex);
+        updateCount();
+        // Emit match navigation event
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.emit('search:match-selected', { index: state.currentIndex });
+        }
+    }
+
+    // ── Pan to Match ──
+
+    function scrollToMatch(index) {
+        if (index < 0 || index >= state.matches.length) return;
+        var matchEl = state.matches[index];
+        if (!matchEl) return;
+
+        var container = document.getElementById('preview-container');
+        if (!container) return;
+
+        var panState = hooks.getPan();
+        var matchRect = matchEl.getBoundingClientRect();
+        var containerRect = container.getBoundingClientRect();
+
+        // Calculate the center of the match element relative to the container
+        var matchCenterX = matchRect.left + matchRect.width / 2 - containerRect.left;
+        var matchCenterY = matchRect.top + matchRect.height / 2 - containerRect.top;
+
+        // Calculate new pan to center the match in the container
+        var containerCenterX = containerRect.width / 2;
+        var containerCenterY = containerRect.height / 2;
+
+        var newPanX = panState.panX + (containerCenterX - matchCenterX);
+        var newPanY = panState.panY + (containerCenterY - matchCenterY);
+
+        hooks.setPan(newPanX, newPanY);
+    }
+
+    // ── Count Display ──
+
+    function updateCount() {
+        if (!countEl) return;
+        if (state.matches.length === 0) {
+            countEl.textContent = state.query ? 'No matches' : '';
+            countEl.classList.toggle('no-match', !!state.query);
+        } else {
+            countEl.textContent = (state.currentIndex + 1) + ' of ' + state.matches.length;
+            countEl.classList.remove('no-match');
+        }
+    }
+
+    // ── Init ──
+
+    function init(options) {
+        if (options) {
+            if (options.getPan) hooks.getPan = options.getPan;
+            if (options.setPan) hooks.setPan = options.setPan;
+        }
+
+        // Subscribe to event bus: refresh search results after diagram re-render
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.on('diagram:rendered', function() {
+                if (state.isOpen && state.query) {
+                    search(state.query);
+                }
+            });
+        }
+    }
+
+    // ── Public API ──
+
+    window.SmartCodeSearch = {
+        init: init,
+        open: open,
+        close: close,
+        getState: function () { return state; },
+    };
+})();