@elixpo/lixsketch 5.5.10 → 5.5.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elixpo/lixsketch",
-  "version": "5.5.10",
+  "version": "5.5.12",
   "description": "Open-source SVG whiteboard engine + React canvas component with hand-drawn aesthetics — the core of LixSketch",
   "type": "module",
   "main": "src/index.js",

package/src/core/AIRenderer.js

@@ -43,6 +43,30 @@ export function parseMermaid(src) {
     const edges = [];
     const classDefs = new Map();   // classDef name -> { fill, stroke, strokeWidth }
     const classAssigns = [];        // { nodeIds: [...], className }
+    const nodeStyles = new Map();   // Mermaid `style A fill:...,stroke:...`
+    const palette = [
+        { fill: '#e8f3ec', stroke: '#5f836c' },
+        { fill: '#f6eadf', stroke: '#a97852' },
+        { fill: '#eee9f4', stroke: '#7e6b91' },
+        { fill: '#f5efcf', stroke: '#9a8745' },
+        { fill: '#e5f0f1', stroke: '#5d7f82' },
+        { fill: '#f4e5e3', stroke: '#9a6863' },
+    ];
+
+    function parseStyleProps(value) {
+        const props = {};
+        for (const part of value.split(',')) {
+            const separator = part.indexOf(':');
+            if (separator < 0) continue;
+            const key = part.slice(0, separator).trim().toLowerCase();
+            const val = part.slice(separator + 1).trim();
+            if (key === 'fill') props.fill = val;
+            else if (key === 'stroke') props.stroke = val;
+            else if (key === 'stroke-width') props.strokeWidth = parseFloat(val);
+            else if (key === 'color') props.labelColor = val;
+        }
+        return props;
+    }
 
     // Clean <br/> and <br> tags in labels → newline marker
     function cleanLabel(label) {
@@ -91,18 +115,24 @@ export function parseMermaid(src) {
         const classDefMatch = line.match(/^classDef\s+(\w+)\s+(.+)$/i);
         if (classDefMatch) {
             const name = classDefMatch[1];
-            const propsStr = classDefMatch[2].replace(/;$/, '');
-            const props = {};
-            for (const part of propsStr.split(',')) {
-                const [key, val] = part.split(':').map(s => s.trim());
-                if (key === 'fill') props.fill = val;
-                else if (key === 'stroke') props.stroke = val;
-                else if (key === 'stroke-width') props.strokeWidth = parseFloat(val);
-            }
-            classDefs.set(name, props);
+            classDefs.set(name, parseStyleProps(classDefMatch[2].replace(/;$/, '')));
+            continue;
+        }
+
+        // Direct node styling must be consumed before node/edge parsing.
+        // Previously these lines fell through to `parseNodeRef`, producing
+        // visible boxes containing the raw `style A fill:...` source.
+        const styleMatch = line.match(/^style\s+([\w,-]+)\s+(.+)$/i);
+        if (styleMatch) {
+            const props = parseStyleProps(styleMatch[2].replace(/;$/, ''));
+            styleMatch[1].split(',').map(id => id.trim()).filter(Boolean)
+                .forEach(id => nodeStyles.set(id, props));
             continue;
         }
 
+        // Presentation-only directives do not represent diagram nodes.
+        if (/^(linkStyle|click)\b/i.test(line)) continue;
+
         // class assignment: class sq,e green
         const classMatch = line.match(/^class\s+(.+?)\s+(\w+)$/i);
         if (classMatch) {
@@ -214,6 +244,12 @@ export function parseMermaid(src) {
         }
     }
 
+
+    for (const [nid, style] of nodeStyles) {
+        const node = nodesMap.get(nid);
+        if (node) Object.assign(node, style);
+    }
+
     // Topological BFS layering
     const nodeIds = Array.from(nodesMap.keys());
     const children = new Map();
@@ -247,6 +283,7 @@ export function parseMermaid(src) {
 
     // Compute dynamic node sizes based on label length
     const nodes = [];
+    let paletteIndex = 0;
     Array.from(layerGroups.keys()).sort((a, b) => a - b).forEach((layerIdx, li) => {
         const group = layerGroups.get(layerIdx);
         const startOffset = -(group.length * H_SPACING) / 2 + H_SPACING / 2;
@@ -262,8 +299,12 @@ export function parseMermaid(src) {
             nodes.push({
                 id: nd.id, type: nd.type, label: nd.label,
                 x, y, width: nw, height: nh,
-                fill: nd.fill, stroke: nd.stroke, strokeWidth: nd.strokeWidth,
+                fill: nd.fill || palette[paletteIndex % palette.length].fill,
+                stroke: nd.stroke || palette[paletteIndex % palette.length].stroke,
+                strokeWidth: nd.strokeWidth,
+                labelColor: nd.labelColor,
             });
+            paletteIndex += 1;
         });
     });
 
@@ -1327,6 +1368,9 @@ export function initAIRenderer() {
     let _fcPreview = null;
     let _fcCanvas = null;
 
+    // Lazy-load ER / chart renderer
+    let _structured = null;
+
     async function loadSequenceRenderer() {
         if (_seqParser) return;
         const mod = await import('./MermaidSequenceParser.js');
@@ -1343,9 +1387,25 @@ export function initAIRenderer() {
         _fcCanvas = mod.renderFlowchartOnCanvas;
     }
 
+    async function loadStructuredRenderer() {
+        if (_structured) return;
+        _structured = await import('./MermaidStructuredRenderer.js');
+    }
+
+    function mermaidHeader(src) {
+        return src.split('\n').map(line => line.trim()).find(line => line && !line.startsWith('%%'))?.toLowerCase() || '';
+    }
+
     // Detect if source is a sequence diagram
     function isSequenceDiagram(src) {
-        return src.trim().split('\n')[0].trim().toLowerCase() === 'sequencediagram';
+        return mermaidHeader(src) === 'sequencediagram';
+    }
+
+    function structuredType(src) {
+        const header = mermaidHeader(src);
+        if (header === 'erdiagram') return 'er';
+        if (/^pie(?:\s|$)/.test(header) || /^xychart(?:-beta)?(?:\s|$)/.test(header)) return 'chart';
+        return null;
     }
 
     window.__aiRenderer = renderAIDiagram;
@@ -1363,6 +1423,15 @@ export function initAIRenderer() {
                 return null;
             }
         }
+        if (structuredType(src)) {
+            if (!_structured) {
+                loadStructuredRenderer();
+                return { _pendingStructured: true, src };
+            }
+            return structuredType(src) === 'er'
+                ? _structured.parseERDiagram(src)
+                : _structured.parseChartDiagram(src);
+        }
         return parseMermaid(src);
     };
 
@@ -1374,6 +1443,13 @@ export function initAIRenderer() {
             if (!diagram) return '';
             return _seqPreview(diagram);
         }
+        const type = structuredType(src);
+        if (type) {
+            await loadStructuredRenderer();
+            const diagram = type === 'er' ? _structured.parseERDiagram(src) : _structured.parseChartDiagram(src);
+            if (!diagram) return '';
+            return type === 'er' ? _structured.renderERPreviewSVG(diagram) : _structured.renderChartPreviewSVG(diagram);
+        }
         // Flowchart: use unified flowchart renderer
         await loadFlowchartRenderer();
         const diagram = parseMermaid(src);
@@ -1389,6 +1465,13 @@ export function initAIRenderer() {
             if (!diagram) { console.error('[AIRenderer] Sequence parse failed'); return false; }
             return _seqCanvas(diagram);
         }
+        const type = structuredType(src);
+        if (type) {
+            await loadStructuredRenderer();
+            const diagram = type === 'er' ? _structured.parseERDiagram(src) : _structured.parseChartDiagram(src);
+            if (!diagram) { console.error('[AIRenderer] Structured Mermaid parse failed'); return false; }
+            return type === 'er' ? _structured.renderEROnCanvas(diagram) : _structured.renderChartOnCanvas(diagram);
+        }
         // Flowchart: use unified flowchart renderer (same SVG as preview)
         await loadFlowchartRenderer();
         const diagram = parseMermaid(src);
@@ -1399,4 +1482,5 @@ export function initAIRenderer() {
     // Pre-load renderers so they're ready
     loadSequenceRenderer();
     loadFlowchartRenderer();
+    loadStructuredRenderer();
 }

package/src/core/MermaidFlowchartRenderer.js

@@ -27,8 +27,7 @@ function isThemeDark() {
 function nodeStrokeColor() { return isThemeDark() ? '#fff' : '#1a1a2e'; }
 function edgeStrokeColor() { return isThemeDark() ? '#888' : '#444'; }
 
-// Theme colors (dark theme — used by the SVG-string preview path only)
-const THEME = {
+const DARK_THEME = {
     bg: '#1e1e28',
     nodeBg: 'transparent',
     nodeStroke: '#9090c0',
@@ -40,6 +39,20 @@ const THEME = {
     subgraphLabel: '#888',
 };
 
+const LIGHT_THEME = {
+    bg: '#fbfaf6',
+    nodeBg: '#f5f2ea',
+    nodeStroke: '#6e746c',
+    nodeText: '#343832',
+    edgeStroke: '#6e746c',
+    edgeText: '#4f554e',
+    subgraphBg: 'rgba(117, 135, 119, 0.06)',
+    subgraphBorder: '#aaa99f',
+    subgraphLabel: '#666b64',
+};
+
+function previewTheme() { return isThemeDark() ? DARK_THEME : LIGHT_THEME; }
+
 function escapeXml(str) {
     return String(str)
         .replace(/&/g, '&')
@@ -62,6 +75,8 @@ function measureText(text, fontSize) {
 export function renderFlowchartSVG(diagram, opts = {}) {
     if (!diagram || !diagram.nodes || diagram.nodes.length === 0) return '';
 
+    const THEME = previewTheme();
+
     const nodes = diagram.nodes;
     const edges = diagram.edges || [];
     const subgraphs = diagram.subgraphs || [];
@@ -455,7 +470,7 @@ export function renderFlowchartOnCanvas(diagram) {
             fillStyle: n.fill && n.fill !== 'transparent' ? 'solid' : 'none',
             roughness: 1,
             label: n.label || '',
-            labelColor: n.labelColor || nodeStrokeColor(),
+            labelColor: n.labelColor || (n.fill && n.fill !== 'transparent' ? getContrastColor(n.fill) : nodeStrokeColor()),
         };
 
         let shape = null;

package/src/core/MermaidSequenceRenderer.js

@@ -35,7 +35,7 @@ function themeColors() {
     const isDark = typeof document !== 'undefined'
         && document.body
         && document.body.classList.contains('theme-dark');
-    if (isDark) return THEME;
+    if (isDark) return DARK_THEME;
     return {
         bg: '#fbfaf6',
         participantBg: '#ffffff',
@@ -56,7 +56,7 @@ function themeColors() {
 }
 
 // Theme colors (dark theme — preview/SVG-string path).
-const THEME = {
+const DARK_THEME = {
     bg: '#1e1e28',
     participantBg: '#232329',
     participantBorder: '#555',
@@ -125,6 +125,8 @@ function wrapText(text, fontSize, maxWidth) {
 export function renderSequenceSVG(diagram, opts = {}) {
     if (!diagram || diagram.type !== 'sequenceDiagram') return '';
 
+    const THEME = themeColors();
+
     const participants = diagram.participants;
     const messages = diagram.messages;
     const notes = diagram.notes;
@@ -401,9 +403,9 @@ export function parseAndRenderSequence(src) {
  * Issue #34 bug #3 (follow-up to #24 per-actor split): drops the shared
  * `groupId` glue so clicking one shape selects only that shape.
  *
- * Notes and block-frames (alt/opt/loop) are skipped for now — they'd
- * either need their own shape types or a richer label model. Self-
- * messages are also skipped (would need a curved arrow).
+ * Notes and block frames are ordinary labelled rectangles. Self messages
+ * use three line segments plus an arrow, keeping every visible component
+ * editable with the same primitives users draw manually.
  */
 export function renderSequenceOnCanvas(diagram) {
     if (!diagram || diagram.type !== 'sequenceDiagram') return false;
@@ -414,6 +416,8 @@ export function renderSequenceOnCanvas(diagram) {
 
     const participants = diagram.participants || [];
     const messages = diagram.messages || [];
+    const notes = diagram.notes || [];
+    const blocks = diagram.blocks || [];
     if (participants.length === 0) return false;
 
     // Mirror the layout math from renderSequenceSVG so the canvas layout
@@ -425,12 +429,23 @@ export function renderSequenceOnCanvas(diagram) {
     const pCenters = participants.map((_, i) => startX + i * PARTICIPANT_GAP + PARTICIPANT_W / 2);
 
     const topBoxBottom = TOP_MARGIN + PARTICIPANT_H;
+    const noteAtMsg = new Map();
+    notes.forEach((note) => {
+        const lines = wrapText(note.text, 11, NOTE_MAX_W - NOTE_PAD * 2);
+        const height = lines.length * 15 + NOTE_PAD * 2;
+        if (!noteAtMsg.has(note.atMessage)) noteAtMsg.set(note.atMessage, []);
+        noteAtMsg.get(note.atMessage).push({ ...note, lines, height });
+    });
     const msgYPositions = [];
     let currentY = topBoxBottom + 30;
     for (let mi = 0; mi < messages.length; mi++) {
+        const before = noteAtMsg.get(mi);
+        if (before?.length) currentY += Math.max(...before.map(note => note.height)) + 10;
         msgYPositions.push(currentY);
         currentY += MSG_ROW_HEIGHT;
     }
+    const trailingNotes = noteAtMsg.get(messages.length);
+    if (trailingNotes?.length) currentY += Math.max(...trailingNotes.map(note => note.height)) + 10;
     const bottomBoxTop = currentY + 20;
     const totalHeight = bottomBoxTop + PARTICIPANT_H + BOTTOM_MARGIN;
 
@@ -532,13 +547,43 @@ export function renderSequenceOnCanvas(diagram) {
         }
     }
 
+    // ── Blocks: editable containers behind message rows ───────────────
+    for (const block of blocks) {
+        const startY = block.startMsg < msgYPositions.length ? msgYPositions[block.startMsg] - 22 : topBoxBottom + 15;
+        const endY = block.endMsg < msgYPositions.length ? msgYPositions[block.endMsg] - 8 : currentY;
+        try {
+            const blockShape = new window.Rectangle(
+                startX - 18 + ox,
+                startY + oy,
+                contentWidth + 36,
+                Math.max(36, endY - startY),
+                {
+                    stroke: TK.blockBorder,
+                    strokeWidth: 1,
+                    strokeDasharray: '5 3',
+                    fill: 'transparent',
+                    fillStyle: 'none',
+                    roughness: .5,
+                    label: [block.type, block.label].filter(Boolean).join(': '),
+                    labelColor: TK.blockLabel,
+                    labelFontSize: 10,
+                }
+            );
+            window.shapes.push(blockShape);
+            if (window.pushCreateAction) window.pushCreateAction(blockShape);
+            frame.addShapeToFrame(blockShape);
+            created.push(blockShape);
+        } catch (err) {
+            console.warn('[SequenceRenderer] Block creation failed:', block, err);
+        }
+    }
+
     // ── Messages: arrow (or line for --x style) per row ───────────────
     for (let mi = 0; mi < messages.length; mi++) {
         const m = messages[mi];
         const fromI = pIndex.get(m.from);
         const toI = pIndex.get(m.to);
         if (fromI == null || toI == null) continue;
-        if (fromI === toI) continue;  // skip self-messages (v1 limitation)
 
         const fromCx = pCenters[fromI] + ox;
         const toCx = pCenters[toI] + ox;
@@ -562,6 +607,26 @@ export function renderSequenceOnCanvas(diagram) {
         try {
             const sp = { x: fromCx, y };
             const ep = { x: toCx, y };
+            if (fromI === toI) {
+                const loopWidth = 46;
+                const loopHeight = 28;
+                const a = { x: fromCx, y };
+                const b = { x: fromCx + loopWidth, y };
+                const c = { x: fromCx + loopWidth, y: y + loopHeight };
+                const d = { x: fromCx + 5, y: y + loopHeight };
+                const segments = [
+                    new window.Line(a, b, opts),
+                    new window.Line(b, c, opts),
+                    new window.Arrow(c, d, opts),
+                ];
+                segments.forEach((segment) => {
+                    window.shapes.push(segment);
+                    if (window.pushCreateAction) window.pushCreateAction(segment);
+                    frame.addShapeToFrame(segment);
+                    created.push(segment);
+                });
+                continue;
+            }
             const connector = isCross
                 ? new window.Line(sp, ep, opts)
                 : new window.Arrow(sp, ep, opts);
@@ -574,6 +639,51 @@ export function renderSequenceOnCanvas(diagram) {
         }
     }
 
+
+    // ── Notes: one independently editable rectangle per note ─────────
+    for (const [messageIndex, noteGroup] of noteAtMsg.entries()) {
+        const baseY = messageIndex < msgYPositions.length
+            ? msgYPositions[messageIndex] - 15
+            : (messageIndex > 0 ? msgYPositions[messageIndex - 1] + MSG_ROW_HEIGHT - 15 : topBoxBottom + 30);
+        noteGroup.forEach((note, noteIndex) => {
+            const indexes = note.targets.map(target => pIndex.get(target)).filter(index => index !== undefined);
+            if (!indexes.length) return;
+            const noteWidth = NOTE_MAX_W;
+            let centerX = pCenters[indexes[0]];
+            if (note.position === 'over' && indexes.length > 1) {
+                centerX = (pCenters[Math.min(...indexes)] + pCenters[Math.max(...indexes)]) / 2;
+            } else if (note.position === 'left of') {
+                centerX -= PARTICIPANT_W / 2 + noteWidth / 2 + 8;
+            } else if (note.position === 'right of') {
+                centerX += PARTICIPANT_W / 2 + noteWidth / 2 + 8;
+            }
+            try {
+                const noteShape = new window.Rectangle(
+                    centerX - noteWidth / 2 + ox,
+                    baseY - note.height - noteIndex * (note.height + 6) + oy,
+                    noteWidth,
+                    note.height,
+                    {
+                        stroke: TK.noteBorder,
+                        strokeWidth: 1,
+                        fill: TK.noteBg,
+                        fillStyle: 'solid',
+                        roughness: .7,
+                        label: note.text,
+                        labelColor: TK.noteText,
+                        labelFontSize: 11,
+                    }
+                );
+                window.shapes.push(noteShape);
+                if (window.pushCreateAction) window.pushCreateAction(noteShape);
+                frame.addShapeToFrame(noteShape);
+                created.push(noteShape);
+            } catch (err) {
+                console.warn('[SequenceRenderer] Note creation failed:', note, err);
+            }
+        });
+    }
+
     // Auto-select the first node so the user has feedback that the
     // diagram landed. Selecting a child (not the frame) reinforces the
     // "independent shapes inside a frame" model from issue #34 bug #3.
@@ -586,4 +696,3 @@ export function renderSequenceOnCanvas(diagram) {
     console.log(`[SequenceRenderer] Done: ${pCount} participants, ${messages.length} messages`);
     return true;
 }
-