@hugobatist/smartcode 0.1.0

package/dist/static/svg-renderer.js

@@ -0,0 +1,313 @@
+/**
+ * SmartCode SVG Renderer -- assembles complete SVG DOM from a LayoutResult.
+ * Renders nodes (with shapes), edges (with arrows), and subgraphs.
+ *
+ * Dependencies: svg-shapes.js (SmartCodeSvgShapes)
+ * Dependents: (future) custom-renderer-bridge.js
+ *
+ * Usage:
+ *   var svgEl = SmartCodeSvgRenderer.createSVG(layout);
+ *   container.appendChild(svgEl);
+ */
+(function() {
+    'use strict';
+
+    var NS = 'http://www.w3.org/2000/svg';
+
+    // ── Theme constants (matching renderer.js MERMAID_CONFIG themeVariables) ──
+    var THEME = {
+        nodeFill: '#eff6ff',
+        nodeStroke: '#2563eb',
+        nodeStrokeWidth: '2',
+        nodeTextColor: '#18181b',
+        nodeFontSize: '15',
+        nodeFontWeight: '600',
+        nodeFontFamily: "'Inter', sans-serif",
+        edgeStroke: '#52525b',
+        edgeStrokeWidth: '1.5',
+        edgeLabelBg: '#ffffff',
+        edgeLabelColor: '#52525b',
+        edgeLabelFontSize: '13',
+        subgraphFill: '#f4f4f5',
+        subgraphStroke: '#a1a1aa',
+        subgraphStrokeWidth: '1',
+        subgraphLabelColor: '#18181b',
+        subgraphLabelFontSize: '14',
+        subgraphLabelFontWeight: '700'
+    };
+
+    function el(tag) { return document.createElementNS(NS, tag); }
+
+    function attrs(element, map) {
+        for (var key in map) {
+            if (map.hasOwnProperty(key)) element.setAttribute(key, String(map[key]));
+        }
+        return element;
+    }
+
+    // ── Arrow Markers ──
+    function createArrowMarkers(defs) {
+        var sizes = { 'arrow-normal': 8, 'arrow-thick': 10, 'arrow-dotted': 8 };
+        for (var id in sizes) {
+            if (!sizes.hasOwnProperty(id)) continue;
+            var marker = attrs(el('marker'), {
+                id: id, viewBox: '0 0 10 10', refX: 10, refY: 5,
+                markerWidth: sizes[id], markerHeight: sizes[id],
+                orient: 'auto-start-reverse'
+            });
+            var arrow = el('polygon');
+            arrow.setAttribute('points', '0 0, 10 5, 0 10');
+            arrow.setAttribute('fill', THEME.edgeStroke);
+            marker.appendChild(arrow);
+            defs.appendChild(marker);
+        }
+    }
+
+    // ── Edge path construction ──
+    function edgePointsToPath(points) {
+        if (!points || points.length === 0) return '';
+        // Filter out points with NaN coordinates (defensive against dagre bugs)
+        var valid = [];
+        for (var vi = 0; vi < points.length; vi++) {
+            if (isFinite(points[vi].x) && isFinite(points[vi].y)) {
+                valid.push(points[vi]);
+            }
+        }
+        if (valid.length === 0) return '';
+        var d = 'M ' + valid[0].x + ' ' + valid[0].y;
+        if (valid.length === 2) {
+            d += ' L ' + valid[1].x + ' ' + valid[1].y;
+        } else if (valid.length >= 3) {
+            var idx = 1;
+            while (idx + 2 < valid.length) {
+                d += ' C ' + valid[idx].x + ' ' + valid[idx].y
+                    + ', ' + valid[idx + 1].x + ' ' + valid[idx + 1].y
+                    + ', ' + valid[idx + 2].x + ' ' + valid[idx + 2].y;
+                idx += 3;
+            }
+            while (idx < valid.length) {
+                d += ' L ' + valid[idx].x + ' ' + valid[idx].y;
+                idx++;
+            }
+        }
+        return d;
+    }
+
+    // ── Helper: clamp endpoint to rectangle boundary ──
+    function clampToRect(from, cx, cy, hw, hh) {
+        var dx = cx - from.x;
+        var dy = cy - from.y;
+        if (dx === 0 && dy === 0) return { x: cx, y: cy - hh };
+        var absDx = Math.abs(dx);
+        var absDy = Math.abs(dy);
+        var t = (absDx * hh > absDy * hw) ? hw / absDx : hh / absDy;
+        return { x: cx - dx * t, y: cy - dy * t };
+    }
+
+    // ── Shorten path to node boundary ──
+    function shortenPathToNodeBoundary(points, targetNode) {
+        if (!points || points.length < 2 || !targetNode) return points;
+        var result = [];
+        for (var i = 0; i < points.length; i++) {
+            result.push({ x: points[i].x, y: points[i].y });
+        }
+        var prev = result[result.length - 2];
+        var dx = result[result.length - 1].x - prev.x;
+        var dy = result[result.length - 1].y - prev.y;
+        var dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist === 0) return result;
+
+        var nx = targetNode.x, ny = targetNode.y;
+        var nw = targetNode.width / 2, nh = targetNode.height / 2;
+        var shape = targetNode.shape || 'rect';
+
+        if (shape === 'circle') {
+            var r = Math.max(targetNode.width, targetNode.height) / 2;
+            result[result.length - 1] = { x: nx - (dx / dist) * r, y: ny - (dy / dist) * r };
+        } else if (shape === 'diamond') {
+            result[result.length - 1] = clampToRect(prev, nx, ny, nw * 0.7, nh * 0.7);
+        } else {
+            result[result.length - 1] = clampToRect(prev, nx, ny, nw, nh);
+        }
+        return result;
+    }
+
+    // ── Render a single node ──
+    function renderNode(node) {
+        var g = el('g');
+        g.setAttribute('data-node-id', node.id);
+        g.setAttribute('class', 'smartcode-node');
+        var nx = isFinite(node.x) ? node.x : 0;
+        var ny = isFinite(node.y) ? node.y : 0;
+        g.setAttribute('transform', 'translate(' + nx + ',' + ny + ')');
+
+        var shapeEl = window.SmartCodeSvgShapes.render(node.shape, node.width, node.height);
+        attrs(shapeEl, { fill: THEME.nodeFill, stroke: THEME.nodeStroke, 'stroke-width': THEME.nodeStrokeWidth });
+
+        // For subroutine <g>, apply styles to child elements individually
+        if (node.shape === 'subroutine' && shapeEl.tagName === 'g') {
+            var children = shapeEl.childNodes;
+            for (var c = 0; c < children.length; c++) {
+                if (children[c].nodeType === 1) {
+                    attrs(children[c], {
+                        fill: children[c].tagName === 'rect' ? THEME.nodeFill : 'none',
+                        stroke: THEME.nodeStroke, 'stroke-width': THEME.nodeStrokeWidth
+                    });
+                }
+            }
+        }
+        g.appendChild(shapeEl);
+
+        var text = el('text');
+        attrs(text, {
+            'text-anchor': 'middle',
+            fill: THEME.nodeTextColor, 'font-family': THEME.nodeFontFamily,
+            'font-size': THEME.nodeFontSize, 'font-weight': THEME.nodeFontWeight
+        });
+        // Handle multiline labels: split on \n and use <tspan> per line
+        var labelStr = (node.label || '').replace(/\\n/g, '\n');
+        var lines = labelStr.split('\n');
+        var lineHeight = parseFloat(THEME.nodeFontSize) * 1.3;
+        var totalHeight = lines.length * lineHeight;
+        var startY = -(totalHeight - lineHeight) / 2;
+        for (var li = 0; li < lines.length; li++) {
+            var tspan = el('tspan');
+            tspan.setAttribute('x', '0');
+            tspan.setAttribute('dy', li === 0 ? String(startY) : String(lineHeight));
+            tspan.setAttribute('dominant-baseline', 'central');
+            tspan.textContent = lines[li];
+            text.appendChild(tspan);
+        }
+        g.appendChild(text);
+        return g;
+    }
+
+    // ── Edge type styling ──
+    function applyEdgeStyle(path, type) {
+        var base = { stroke: THEME.edgeStroke, fill: 'none' };
+        if (type === 'thick') {
+            attrs(path, { stroke: base.stroke, 'stroke-width': '3', 'marker-end': 'url(#arrow-thick)', fill: 'none' });
+        } else if (type === 'dotted') {
+            attrs(path, { stroke: base.stroke, 'stroke-width': THEME.edgeStrokeWidth, 'stroke-dasharray': '5,5', 'marker-end': 'url(#arrow-normal)', fill: 'none' });
+        } else if (type === 'open') {
+            attrs(path, { stroke: base.stroke, 'stroke-width': THEME.edgeStrokeWidth, fill: 'none' });
+        } else if (type === 'invisible') {
+            attrs(path, { stroke: 'none', fill: 'none' });
+        } else {
+            // Default: arrow
+            attrs(path, { stroke: base.stroke, 'stroke-width': THEME.edgeStrokeWidth, 'marker-end': 'url(#arrow-normal)', fill: 'none' });
+        }
+    }
+
+    // ── Render a single edge ──
+    function renderEdge(edge, nodesMap) {
+        var g = el('g');
+        g.setAttribute('data-edge-id', edge.id);
+        g.setAttribute('class', 'smartcode-edge');
+
+        var targetNode = nodesMap[edge.to];
+        var points = targetNode ? shortenPathToNodeBoundary(edge.points, targetNode) : edge.points;
+
+        var path = el('path');
+        path.setAttribute('d', edgePointsToPath(points));
+        applyEdgeStyle(path, edge.type);
+        g.appendChild(path);
+
+        // Optional label at midpoint
+        if (edge.label) {
+            var midPt = points[Math.floor(points.length / 2)] || points[0];
+            var labelGroup = el('g');
+            labelGroup.setAttribute('transform', 'translate(' + midPt.x + ',' + midPt.y + ')');
+
+            var textLen = edge.label.length * 7 + 12;
+            labelGroup.appendChild(attrs(el('rect'), {
+                x: -textLen / 2, y: -10, width: textLen, height: 20,
+                rx: 4, fill: THEME.edgeLabelBg, stroke: 'none'
+            }));
+
+            var labelText = el('text');
+            attrs(labelText, {
+                'text-anchor': 'middle', 'dominant-baseline': 'central',
+                fill: THEME.edgeLabelColor, 'font-family': THEME.nodeFontFamily,
+                'font-size': THEME.edgeLabelFontSize
+            });
+            labelText.textContent = edge.label;
+            labelGroup.appendChild(labelText);
+            g.appendChild(labelGroup);
+        }
+        return g;
+    }
+
+    // ── Render a subgraph ──
+    function renderSubgraph(sg) {
+        var g = el('g');
+        g.setAttribute('data-subgraph-id', sg.id);
+        g.setAttribute('class', 'smartcode-subgraph');
+
+        // Guard against NaN/undefined positions from dagre compound layout
+        var sx = isFinite(sg.x) ? sg.x : 0;
+        var sy = isFinite(sg.y) ? sg.y : 0;
+        var sw = sg.width > 0 ? sg.width : 100;
+        var sh = sg.height > 0 ? sg.height : 60;
+
+        g.appendChild(attrs(el('rect'), {
+            x: sx - sw / 2, y: sy - sh / 2,
+            width: sw, height: sh, rx: 8,
+            fill: THEME.subgraphFill, stroke: THEME.subgraphStroke,
+            'stroke-width': THEME.subgraphStrokeWidth
+        }));
+
+        var text = el('text');
+        attrs(text, {
+            x: sx, y: sy - sh / 2 + 20,
+            'text-anchor': 'middle', 'dominant-baseline': 'central',
+            fill: THEME.subgraphLabelColor, 'font-family': THEME.nodeFontFamily,
+            'font-size': THEME.subgraphLabelFontSize, 'font-weight': THEME.subgraphLabelFontWeight
+        });
+        text.textContent = sg.label;
+        g.appendChild(text);
+        return g;
+    }
+
+    // ── Main: create complete SVG from LayoutResult ──
+    function createSVG(layout) {
+        var svg = attrs(el('svg'), {
+            xmlns: NS,
+            width: '100%',
+            height: '100%',
+            viewBox: '0 0 ' + layout.width + ' ' + layout.height
+        });
+
+        var defs = el('defs');
+        createArrowMarkers(defs);
+        svg.appendChild(defs);
+
+        var root = el('g');
+        root.setAttribute('class', 'smartcode-diagram');
+
+        // Build nodes map for edge boundary calculations
+        var nodesMap = {};
+        for (var n = 0; n < layout.nodes.length; n++) {
+            nodesMap[layout.nodes[n].id] = layout.nodes[n];
+        }
+
+        // 1. Subgraphs first (behind everything)
+        for (var s = 0; s < layout.subgraphs.length; s++) {
+            root.appendChild(renderSubgraph(layout.subgraphs[s]));
+        }
+        // 2. Edges next (middle layer)
+        for (var e = 0; e < layout.edges.length; e++) {
+            root.appendChild(renderEdge(layout.edges[e], nodesMap));
+        }
+        // 3. Nodes last (on top)
+        for (var i = 0; i < layout.nodes.length; i++) {
+            root.appendChild(renderNode(layout.nodes[i]));
+        }
+
+        svg.appendChild(root);
+        return svg;
+    }
+
+    // ── Public API ──
+    window.SmartCodeSvgRenderer = { createSVG: createSVG };
+})();

package/dist/static/svg-shapes.js

@@ -0,0 +1,218 @@
+/**
+ * SmartCode SVG Shapes -- SVG element factories for all 13 Mermaid node shapes.
+ * Each shape function takes (w, h) and returns an SVG element centered at (0, 0).
+ *
+ * Dependencies: none (standalone)
+ * Dependents: svg-renderer.js (calls SmartCodeSvgShapes.render)
+ *
+ * Usage:
+ *   var el = SmartCodeSvgShapes.render('diamond', 120, 60);
+ *   // Returns an SVG element ready for translate(x,y) positioning
+ */
+(function() {
+    'use strict';
+
+    var NS = 'http://www.w3.org/2000/svg';
+
+    // ── Helper: create SVG element ──
+    function el(tag) {
+        return document.createElementNS(NS, tag);
+    }
+
+    // ── Helper: set multiple attributes ──
+    function attrs(element, map) {
+        for (var key in map) {
+            if (map.hasOwnProperty(key)) {
+                element.setAttribute(key, String(map[key]));
+            }
+        }
+        return element;
+    }
+
+    // ── Helper: polygon from points array ──
+    function polygon(points) {
+        var poly = el('polygon');
+        var str = '';
+        for (var i = 0; i < points.length; i++) {
+            if (i > 0) str += ' ';
+            str += points[i][0] + ',' + points[i][1];
+        }
+        poly.setAttribute('points', str);
+        return poly;
+    }
+
+    // ── Shape: rect ──
+    function rect(w, h) {
+        return attrs(el('rect'), {
+            x: -w / 2, y: -h / 2, width: w, height: h, rx: 0
+        });
+    }
+
+    // ── Shape: rounded ──
+    function rounded(w, h) {
+        return attrs(el('rect'), {
+            x: -w / 2, y: -h / 2, width: w, height: h, rx: 8
+        });
+    }
+
+    // ── Shape: stadium ──
+    function stadium(w, h) {
+        return attrs(el('rect'), {
+            x: -w / 2, y: -h / 2, width: w, height: h, rx: h / 2
+        });
+    }
+
+    // ── Shape: diamond ──
+    function diamond(w, h) {
+        return polygon([
+            [0, -h / 2],
+            [w / 2, 0],
+            [0, h / 2],
+            [-w / 2, 0]
+        ]);
+    }
+
+    // ── Shape: circle ──
+    function circle(w, h) {
+        var r = Math.max(w, h) / 2;
+        return attrs(el('circle'), { cx: 0, cy: 0, r: r });
+    }
+
+    // ── Shape: hexagon ──
+    function hexagon(w, h) {
+        var dx = h / 4;
+        return polygon([
+            [-w / 2 + dx, -h / 2],
+            [w / 2 - dx, -h / 2],
+            [w / 2, 0],
+            [w / 2 - dx, h / 2],
+            [-w / 2 + dx, h / 2],
+            [-w / 2, 0]
+        ]);
+    }
+
+    // ── Shape: subroutine ──
+    function subroutine(w, h) {
+        var g = el('g');
+        var mainRect = attrs(el('rect'), {
+            x: -w / 2, y: -h / 2, width: w, height: h, rx: 0
+        });
+        g.appendChild(mainRect);
+
+        // Left inner vertical line
+        var lineLeft = attrs(el('line'), {
+            x1: -w / 2 + 8, y1: -h / 2,
+            x2: -w / 2 + 8, y2: h / 2
+        });
+        g.appendChild(lineLeft);
+
+        // Right inner vertical line
+        var lineRight = attrs(el('line'), {
+            x1: w / 2 - 8, y1: -h / 2,
+            x2: w / 2 - 8, y2: h / 2
+        });
+        g.appendChild(lineRight);
+
+        return g;
+    }
+
+    // ── Shape: cylinder ──
+    function cylinder(w, h) {
+        var rx = w / 2;
+        var ry = 8; // ellipse vertical radius for cap
+        var bodyTop = -h / 2 + ry;
+        var bodyBottom = h / 2 - ry;
+
+        // Path: top ellipse, right side, bottom ellipse, left side, close with top back-arc
+        var d = 'M ' + (-rx) + ' ' + bodyTop
+            + ' A ' + rx + ' ' + ry + ' 0 0 1 ' + rx + ' ' + bodyTop
+            + ' L ' + rx + ' ' + bodyBottom
+            + ' A ' + rx + ' ' + ry + ' 0 0 1 ' + (-rx) + ' ' + bodyBottom
+            + ' L ' + (-rx) + ' ' + bodyTop
+            + ' A ' + rx + ' ' + ry + ' 0 0 0 ' + rx + ' ' + bodyTop;
+
+        return attrs(el('path'), { d: d });
+    }
+
+    // ── Shape: asymmetric (flag/pennant) ──
+    function asymmetric(w, h) {
+        var notch = h / 4;
+        return polygon([
+            [-w / 2, -h / 2],
+            [w / 2, -h / 2],
+            [w / 2 - notch, 0],
+            [w / 2, h / 2],
+            [-w / 2, h / 2]
+        ]);
+    }
+
+    // ── Shape: parallelogram (slanting right) ──
+    function parallelogram(w, h) {
+        var skew = h * 0.3;
+        return polygon([
+            [-w / 2 + skew, -h / 2],
+            [w / 2, -h / 2],
+            [w / 2 - skew, h / 2],
+            [-w / 2, h / 2]
+        ]);
+    }
+
+    // ── Shape: parallelogram-alt (slanting left, mirror) ──
+    function parallelogramAlt(w, h) {
+        var skew = h * 0.3;
+        return polygon([
+            [-w / 2, -h / 2],
+            [w / 2 - skew, -h / 2],
+            [w / 2, h / 2],
+            [-w / 2 + skew, h / 2]
+        ]);
+    }
+
+    // ── Shape: trapezoid (wider at bottom) ──
+    function trapezoid(w, h) {
+        var dx = w * 0.15;
+        return polygon([
+            [-w / 2 + dx, -h / 2],
+            [w / 2 - dx, -h / 2],
+            [w / 2, h / 2],
+            [-w / 2, h / 2]
+        ]);
+    }
+
+    // ── Shape: trapezoid-alt (wider at top) ──
+    function trapezoidAlt(w, h) {
+        var dx = w * 0.15;
+        return polygon([
+            [-w / 2, -h / 2],
+            [w / 2, -h / 2],
+            [w / 2 - dx, h / 2],
+            [-w / 2 + dx, h / 2]
+        ]);
+    }
+
+    // ── Shape Registry ──
+    var SHAPE_RENDERERS = {
+        'rect': rect,
+        'rounded': rounded,
+        'stadium': stadium,
+        'diamond': diamond,
+        'circle': circle,
+        'hexagon': hexagon,
+        'subroutine': subroutine,
+        'cylinder': cylinder,
+        'asymmetric': asymmetric,
+        'parallelogram': parallelogram,
+        'parallelogram-alt': parallelogramAlt,
+        'trapezoid': trapezoid,
+        'trapezoid-alt': trapezoidAlt
+    };
+
+    // ── Render function ──
+    function render(shape, w, h) {
+        var fn = SHAPE_RENDERERS[shape] || SHAPE_RENDERERS['rect'];
+        return fn(w, h);
+    }
+
+    // ── Public API ──
+    window.SmartCodeSvgShapes = { render: render };
+})();

package/dist/static/tokens.css

@@ -0,0 +1,76 @@
+/* SmartCode — Carbon Design Tokens */
+/* Single source of truth for all colors, spacing, and radius */
+
+:root {
+    /* Surface colors (dark chrome) */
+    --surface-0: #111113;
+    --surface-1: #18181b;
+    --surface-2: #1f1f23;
+    --surface-3: #27272b;
+    --surface-4: #303036;
+
+    /* Preview canvas (light, for Mermaid readability) */
+    --preview-bg: #fafafa;
+
+    /* Borders */
+    --border-subtle: #27272b;
+    --border-default: #303036;
+    --border-focus: #3b82f6;
+
+    /* Text */
+    --text-primary: #e4e4e7;
+    --text-secondary: #a1a1aa;
+    --text-tertiary: #71717a;
+    --text-on-accent: #ffffff;
+
+    /* Accent (blue) */
+    --accent: #3b82f6;
+    --accent-hover: #2563eb;
+    --accent-muted: rgba(59, 130, 246, 0.15);
+
+    /* Status — semantically identical colors */
+    --status-ok: #22c55e;
+    --status-ok-stroke: #16a34a;
+    --status-problem: #ef4444;
+    --status-problem-stroke: #dc2626;
+    --status-warning: #eab308;
+    --status-warning-stroke: #ca8a04;
+    --status-neutral: #71717a;
+    --status-neutral-stroke: #52525b;
+
+    /* Utility */
+    --ghost-path: #8b5cf6;
+    --search-match: #f59e0b;
+    --breakpoint: #ef4444;
+    --diff-added: #22c55e;
+    --diff-removed: #ef4444;
+    --diff-modified: #eab308;
+
+    /* Mermaid theme (light canvas) */
+    --mermaid-primary: #3b82f6;
+    --mermaid-primary-text: #18181b;
+    --mermaid-primary-border: #2563eb;
+    --mermaid-secondary: #dbeafe;
+    --mermaid-tertiary: #f0fdf4;
+    --mermaid-line: #52525b;
+    --mermaid-main-bg: #eff6ff;
+    --mermaid-node-border: #2563eb;
+    --mermaid-cluster-bg: #f4f4f5;
+    --mermaid-cluster-border: #a1a1aa;
+    --mermaid-title: #18181b;
+    --mermaid-edge-label-bg: #ffffff;
+
+    /* Spacing scale */
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-6: 24px;
+    --space-8: 32px;
+
+    /* Radius scale */
+    --radius-sm: 2px;
+    --radius-md: 4px;
+    --radius-lg: 6px;
+    --radius-xl: 8px;
+}

package/dist/static/vendor/dagre-bundle.js

@@ -0,0 +1,43 @@
+/**
+ * dagre-bundle.js — loads graphlib then dagre for browser use.
+ *
+ * @dagrejs/dagre@2 internally calls require("@dagrejs/graphlib") which
+ * breaks in the browser.  We load graphlib first (it self-registers as
+ * window.graphlib) and then monkey-patch the bundler's require so dagre
+ * can find it.
+ */
+(function () {
+  'use strict';
+
+  /* ── 1. Inject graphlib ──────────────────────────────────────────── */
+  var s1 = document.createElement('script');
+  s1.src = 'vendor/graphlib.min.js';
+  s1.async = false;                       // keep execution order
+  document.head.appendChild(s1);
+
+  /* ── 2. Once graphlib is ready, patch require and inject dagre ──── */
+  s1.onload = function () {
+    // The dagre CJS bundle calls __require("@dagrejs/graphlib").
+    // We intercept that by shimming a global require that resolves it.
+    var _origRequire = window.require;     // may be undefined — that's fine
+    window.require = function (id) {
+      if (id === '@dagrejs/graphlib') return window.graphlib;
+      if (typeof _origRequire === 'function') return _origRequire(id);
+      throw new Error('Cannot find module "' + id + '"');
+    };
+
+    var s2 = document.createElement('script');
+    s2.src = 'vendor/dagre.min.js';
+    s2.async = false;
+    document.head.appendChild(s2);
+
+    s2.onload = function () {
+      // Restore original require (or remove shim)
+      if (_origRequire) {
+        window.require = _origRequire;
+      } else {
+        delete window.require;
+      }
+    };
+  };
+})();