sketchmark 0.2.0 → 0.2.2

package/dist/index.js

@@ -259,10 +259,6 @@ function propsToStyle(p) {
         s.color = p.color;
     if (p.opacity)
         s.opacity = parseFloat(p.opacity);
-    if (p.radius)
-        s.radius = parseFloat(p.radius);
-    if (p.shadow)
-        s.shadow = p.shadow === "true";
     if (p["font-size"])
         s.fontSize = parseFloat(p["font-size"]);
     if (p["font-weight"])
@@ -279,8 +275,9 @@ function propsToStyle(p) {
         s.letterSpacing = parseFloat(p["letter-spacing"]);
     if (p.font)
         s.font = p.font;
-    if (p["dash"]) {
-        const parts = p["dash"]
+    const dashVal = p["dash"] || p["stroke-dash"];
+    if (dashVal) {
+        const parts = dashVal
             .split(",")
             .map(Number)
             .filter((n) => !isNaN(n));
@@ -1487,13 +1484,22 @@ function sizeNode(n) {
             n.h = n.h || 50;
             break;
         case "text": {
-            // read fontSize from style if set, otherwise use default
             const fontSize = Number(n.style?.fontSize ?? 13);
             const charWidth = fontSize * 0.55;
-            const maxW = n.width ?? 400;
-            const approxLines = Math.ceil((n.label.length * charWidth) / (maxW - 16));
-            n.w = maxW;
-            n.h = n.height ?? Math.max(24, approxLines * fontSize * 1.5 + 8);
+            const pad = Number(n.style?.padding ?? 8) * 2;
+            if (n.width) {
+                // User set width → word-wrap within it
+                const approxLines = Math.ceil((n.label.length * charWidth) / (n.width - pad));
+                n.w = n.width;
+                n.h = n.height ?? Math.max(24, approxLines * fontSize * 1.5 + pad);
+            }
+            else {
+                // Auto-size to content
+                const lines = n.label.split("\\n");
+                const longest = lines.reduce((a, b) => (a.length > b.length ? a : b), "");
+                n.w = Math.max(MIN_W, Math.round(longest.length * charWidth + pad));
+                n.h = n.height ?? Math.max(24, lines.length * fontSize * 1.5 + pad);
+            }
             break;
         }
         default:
@@ -1710,17 +1716,16 @@ function place(g, nm, gm, tm, ntm, cm, mdm) {
     if (layout === "row") {
         const ws = kids.map((r) => iW(r, nm, gm, tm, ntm, cm, mdm));
         const hs = kids.map((r) => iH(r, nm, gm, tm, ntm, cm, mdm));
-        const maxH = Math.max(...hs);
         const { start, gaps } = distribute(ws, contentW, gap, justify);
         let x = contentX + start;
         for (let i = 0; i < kids.length; i++) {
             let y;
             switch (align) {
                 case "center":
-                    y = contentY + (maxH - hs[i]) / 2;
+                    y = contentY + (contentH - hs[i]) / 2;
                     break;
                 case "end":
-                    y = contentY + maxH - hs[i];
+                    y = contentY + contentH - hs[i];
                     break;
                 default:
                     y = contentY;
@@ -1741,17 +1746,16 @@ function place(g, nm, gm, tm, ntm, cm, mdm) {
         // column (default)
         const ws = kids.map((r) => iW(r, nm, gm, tm, ntm, cm, mdm));
         const hs = kids.map((r) => iH(r, nm, gm, tm, ntm, cm, mdm));
-        const maxW = Math.max(...ws);
         const { start, gaps } = distribute(hs, contentH, gap, justify);
         let y = contentY + start;
         for (let i = 0; i < kids.length; i++) {
             let x;
             switch (align) {
                 case "center":
-                    x = contentX + (maxW - ws[i]) / 2;
+                    x = contentX + (contentW - ws[i]) / 2;
                     break;
                 case "end":
-                    x = contentX + maxW - ws[i];
+                    x = contentX + contentW - ws[i];
                     break;
                 default:
                     x = contentX;
@@ -2175,13 +2179,13 @@ function mkG(id, cls) {
     g.setAttribute('class', cls);
     return g;
 }
-function mkT(txt, x, y, sz = 10, wt = 400, col = '#4a2e10', anchor = 'middle') {
+function mkT(txt, x, y, sz = 10, wt = 400, col = '#4a2e10', anchor = 'middle', font = 'system-ui, sans-serif') {
     const t = se$1('text');
     t.setAttribute('x', String(x));
     t.setAttribute('y', String(y));
     t.setAttribute('text-anchor', anchor);
     t.setAttribute('dominant-baseline', 'middle');
-    t.setAttribute('font-family', 'system-ui, sans-serif');
+    t.setAttribute('font-family', font);
     t.setAttribute('font-size', String(sz));
     t.setAttribute('font-weight', String(wt));
     t.setAttribute('fill', col);
@@ -2197,7 +2201,7 @@ function hashStr$4(s) {
 }
 const BASE = { roughness: 1.2, bowing: 0.7 };
 // ── Axes ───────────────────────────────────────────────────
-function drawAxes$1(rc, g, c, px, py, pw, ph, allY, labelCol) {
+function drawAxes$1(rc, g, c, px, py, pw, ph, allY, labelCol, font = 'system-ui, sans-serif') {
     // Y axis
     g.appendChild(rc.line(px, py, px, py + ph, {
         roughness: 0.4, seed: hashStr$4(c.id + 'ya'), stroke: labelCol, strokeWidth: 1,
@@ -2216,7 +2220,7 @@ function drawAxes$1(rc, g, c, px, py, pw, ph, allY, labelCol) {
         g.appendChild(rc.line(px - 3, ty, px, ty, {
             roughness: 0.2, seed: hashStr$4(c.id + 'yt' + tick), stroke: labelCol, strokeWidth: 0.7,
         }));
-        g.appendChild(mkT(fmtNum$1(tick), px - 5, ty, 9, 400, labelCol, 'end'));
+        g.appendChild(mkT(fmtNum$1(tick), px - 5, ty, 9, 400, labelCol, 'end', font));
     }
 }
 function fmtNum$1(v) {
@@ -2225,7 +2229,7 @@ function fmtNum$1(v) {
     return String(v);
 }
 // ── Legend row ─────────────────────────────────────────────
-function legend(g, labels, colors, x, y, labelCol) {
+function legend(g, labels, colors, x, y, labelCol, font = 'system-ui, sans-serif') {
     labels.forEach((lbl, i) => {
         const dot = se$1('rect');
         dot.setAttribute('x', String(x));
@@ -2235,7 +2239,7 @@ function legend(g, labels, colors, x, y, labelCol) {
         dot.setAttribute('fill', colors[i % colors.length]);
         dot.setAttribute('rx', '1');
         g.appendChild(dot);
-        g.appendChild(mkT(lbl, x + 12, y + i * 14 + 4, 9, 400, labelCol, 'start'));
+        g.appendChild(mkT(lbl, x + 12, y + i * 14 + 4, 9, 400, labelCol, 'start', font));
     });
 }
 // ── Public entry ───────────────────────────────────────────
@@ -2246,6 +2250,11 @@ function renderRoughChartSVG(rc, c, palette, isDark) {
     const bgFill = String(s.fill ?? palette.nodeFill);
     const bgStroke = String(s.stroke ?? (isDark ? '#5a4a30' : '#c8b898'));
     const lc = String(s.color ?? palette.titleText);
+    const cFont = String(s.font ? `${s.font}, system-ui, sans-serif` : 'system-ui, sans-serif');
+    const cFontSize = Number(s.fontSize ?? 12);
+    const cFontWeight = s.fontWeight ?? 600;
+    if (s.opacity != null)
+        cg.setAttribute('opacity', String(s.opacity));
     // Background box
     cg.appendChild(rc.rectangle(c.x, c.y, c.w, c.h, {
         ...BASE, seed: hashStr$4(c.id),
@@ -2255,7 +2264,7 @@ function renderRoughChartSVG(rc, c, palette, isDark) {
     }));
     // Title
     if (c.title) {
-        cg.appendChild(mkT(c.title, c.x + c.w / 2, c.y + 14, 12, 600, lc));
+        cg.appendChild(mkT(c.title, c.x + c.w / 2, c.y + 14, cFontSize, cFontWeight, lc, 'middle', cFont));
     }
     const { px, py, pw, ph, cx, cy } = chartLayout(c);
     // ── Pie / Donut ──────────────────────────────────────────
@@ -2281,7 +2290,7 @@ function renderRoughChartSVG(rc, c, palette, isDark) {
             angle += sweep;
         }
         // Mini legend on left
-        legend(cg, segments.map(s => `${s.label} ${Math.round(s.value / total * 100)}%`), segments.map(s => s.color), legendX, legendY, lc);
+        legend(cg, segments.map(s => `${s.label} ${Math.round(s.value / total * 100)}%`), segments.map(s => s.color), legendX, legendY, lc, cFont);
         return cg;
     }
     // ── Scatter ───────────────────────────────────────────────
@@ -2302,7 +2311,7 @@ function renderRoughChartSVG(rc, c, palette, isDark) {
                 strokeWidth: 1.2,
             }));
         });
-        legend(cg, pts.map(p => p.label), CHART_COLORS, c.x + 8, c.y + (c.title ? 28 : 12), lc);
+        legend(cg, pts.map(p => p.label), CHART_COLORS, c.x + 8, c.y + (c.title ? 28 : 12), lc, cFont);
         return cg;
     }
     // ── Bar / Line / Area ─────────────────────────────────────
@@ -2311,10 +2320,10 @@ function renderRoughChartSVG(rc, c, palette, isDark) {
     const toY = makeValueToY(allY, py, ph);
     const baseline = toY(0);
     const n = labels.length;
-    drawAxes$1(rc, cg, c, px, py, pw, ph, allY, lc);
+    drawAxes$1(rc, cg, c, px, py, pw, ph, allY, lc, cFont);
     // X labels
     labels.forEach((lbl, i) => {
-        cg.appendChild(mkT(lbl, px + (i + 0.5) * (pw / n), py + ph + 14, 9, 400, lc));
+        cg.appendChild(mkT(lbl, px + (i + 0.5) * (pw / n), py + ph + 14, 9, 400, lc, 'middle', cFont));
     });
     if (c.chartType === 'bar') {
         const groupW = pw / n;
@@ -2385,7 +2394,7 @@ function renderRoughChartSVG(rc, c, palette, isDark) {
     }
     // Multi-series legend
     if (series.length > 1) {
-        legend(cg, series.map(s => s.name), series.map(s => s.color), px, py - 2, lc);
+        legend(cg, series.map(s => s.name), series.map(s => s.color), px, py - 2, lc, cFont);
     }
     return cg;
 }
@@ -4851,6 +4860,14 @@ function hashStr$3(s) {
     return h;
 }
 const BASE_ROUGH = { roughness: 1.3, bowing: 0.7 };
+/** Darken a CSS hex colour by `amount` (0–1). Falls back to input for non-hex. */
+function darkenHex$1(hex, amount = 0.12) {
+    const m = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex);
+    if (!m)
+        return hex;
+    const d = (v) => Math.max(0, Math.round(parseInt(v, 16) * (1 - amount)));
+    return `#${d(m[1]).toString(16).padStart(2, "0")}${d(m[2]).toString(16).padStart(2, "0")}${d(m[3]).toString(16).padStart(2, "0")}`;
+}
 // ── Small helper: load + resolve font from style or fall back ─────────────
 function resolveStyleFont$1(style, fallback) {
     const raw = String(style["font"] ?? "");
@@ -5021,6 +5038,7 @@ function renderShape$1(rc, n, palette) {
         fillStyle: "solid",
         stroke,
         strokeWidth: Number(s.strokeWidth ?? 1.9),
+        ...(s.strokeDash ? { strokeLineDash: s.strokeDash } : {}),
     };
     const cx = n.x + n.w / 2, cy = n.y + n.h / 2;
     const hw = n.w / 2 - 2;
@@ -5203,6 +5221,8 @@ function renderToSVG(sg, container, options = {}) {
             continue;
         const gs = g.style ?? {};
         const gg = mkGroup(`group-${g.id}`, "gg");
+        if (gs.opacity != null)
+            gg.setAttribute("opacity", String(gs.opacity));
         gg.appendChild(rc.rectangle(g.x, g.y, g.w, g.h, {
             ...BASE_ROUGH,
             roughness: 1.7,
@@ -5215,14 +5235,26 @@ function renderToSVG(sg, container, options = {}) {
             strokeLineDash: gs.strokeDash ?? palette.groupDash,
         }));
         // ── Group label typography ──────────────────────────
-        // supports: font, font-size, letter-spacing
-        // always left-anchored (single line)
         const gLabelColor = gs.color ? String(gs.color) : palette.groupLabel;
         const gFontSize = Number(gs.fontSize ?? 12);
+        const gFontWeight = gs.fontWeight ?? 500;
         const gFont = resolveStyleFont$1(gs, diagramFont);
         const gLetterSpacing = gs.letterSpacing;
+        const gPad = Number(gs.padding ?? 14);
+        const gTextAlign = String(gs.textAlign ?? "left");
+        const gAnchorMap = {
+            left: "start",
+            center: "middle",
+            right: "end",
+        };
+        const gAnchor = gAnchorMap[gTextAlign] ?? "start";
+        const gTextX = gTextAlign === "right"
+            ? g.x + g.w - gPad
+            : gTextAlign === "center"
+                ? g.x + g.w / 2
+                : g.x + gPad;
         if (g.label) {
-            gg.appendChild(mkText(g.label, g.x + 14, g.y + 14, gFontSize, 500, gLabelColor, "start", gFont, gLetterSpacing));
+            gg.appendChild(mkText(g.label, gTextX, g.y + gPad, gFontSize, gFontWeight, gLabelColor, gAnchor, gFont, gLetterSpacing));
         }
         GL.appendChild(gg);
     }
@@ -5243,6 +5275,8 @@ function renderToSVG(sg, container, options = {}) {
         const [x1, y1] = getConnPoint$1(src, dstCX, dstCY);
         const [x2, y2] = getConnPoint$1(dst, srcCX, srcCY);
         const eg = mkGroup(`edge-${e.from}-${e.to}`, "eg");
+        if (e.style?.opacity != null)
+            eg.setAttribute("opacity", String(e.style.opacity));
         const len = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2) || 1;
         const nx = (x2 - x1) / len, ny = (y2 - y1) / len;
         const ecol = String(e.style?.stroke ?? palette.edgeStroke);
@@ -5283,7 +5317,9 @@ function renderToSVG(sg, container, options = {}) {
             const eFontSize = Number(e.style?.fontSize ?? 11);
             const eFont = resolveStyleFont$1(e.style ?? {}, diagramFont);
             const eLetterSpacing = e.style?.letterSpacing;
-            eg.appendChild(mkText(e.label, mx, my, eFontSize, 400, palette.edgeLabelText, "middle", eFont, eLetterSpacing));
+            const eFontWeight = e.style?.fontWeight ?? 400;
+            const eLabelColor = String(e.style?.color ?? palette.edgeLabelText);
+            eg.appendChild(mkText(e.label, mx, my, eFontSize, eFontWeight, eLabelColor, "middle", eFont, eLetterSpacing));
         }
         EL.appendChild(eg);
     }
@@ -5292,6 +5328,8 @@ function renderToSVG(sg, container, options = {}) {
     const NL = mkGroup("node-layer");
     for (const n of sg.nodes) {
         const ng = mkGroup(`node-${n.id}`, "ng");
+        if (n.style?.opacity != null)
+            ng.setAttribute("opacity", String(n.style.opacity));
         renderShape$1(rc, n, palette).forEach((s) => ng.appendChild(s));
         // ── Node / text typography ─────────────────────────
         // supports: font, font-size, letter-spacing, text-align, line-height
@@ -5310,18 +5348,19 @@ function renderToSVG(sg, container, options = {}) {
         // line-height is a multiplier (e.g. 1.4 = 140% of font-size)
         const lineHeight = Number(n.style?.lineHeight ?? 1.3) * fontSize;
         const letterSpacing = n.style?.letterSpacing;
+        const pad = Number(n.style?.padding ?? 8);
         // x shifts for left / right alignment
         const textX = textAlign === "left"
-            ? n.x + 8
+            ? n.x + pad
             : textAlign === "right"
-                ? n.x + n.w - 8
+                ? n.x + n.w - pad
                 : n.x + n.w / 2;
         const lines = n.shape === 'text' && !n.label.includes('\n')
-            ? wrapText$1(n.label, n.w - 16, fontSize)
+            ? wrapText$1(n.label, n.w - pad * 2, fontSize)
             : n.label.split('\n');
         const verticalAlign = String(n.style?.verticalAlign ?? "middle");
-        const nodeBodyTop = n.y + 6;
-        const nodeBodyBottom = n.y + n.h - 6;
+        const nodeBodyTop = n.y + pad;
+        const nodeBodyBottom = n.y + n.h - pad;
         const nodeBodyMid = n.y + n.h / 2;
         const blockH = (lines.length - 1) * lineHeight;
         const textCY = verticalAlign === "top"
@@ -5353,15 +5392,19 @@ function renderToSVG(sg, container, options = {}) {
         const fill = String(gs.fill ?? palette.tableFill);
         const strk = String(gs.stroke ?? palette.tableStroke);
         const textCol = String(gs.color ?? palette.tableText);
-        const hdrFill = palette.tableHeaderFill;
+        const hdrFill = gs.fill ? darkenHex$1(fill, 0.08) : palette.tableHeaderFill;
         const hdrText = String(gs.color ?? palette.tableHeaderText);
         const divCol = palette.tableDivider;
         const pad = t.labelH;
+        const tStrokeWidth = Number(gs.strokeWidth ?? 1.5);
+        const tFontWeight = gs.fontWeight ?? 500;
         // ── Table-level font (applies to label + all cells) ─
         // supports: font, font-size, letter-spacing
         const tFontSize = Number(gs.fontSize ?? 12);
         const tFont = resolveStyleFont$1(gs, diagramFont);
         const tLetterSpacing = gs.letterSpacing;
+        if (gs.opacity != null)
+            tg.setAttribute("opacity", String(gs.opacity));
         // outer border
         tg.appendChild(rc.rectangle(t.x, t.y, t.w, t.h, {
             ...BASE_ROUGH,
@@ -5369,7 +5412,8 @@ function renderToSVG(sg, container, options = {}) {
             fill,
             fillStyle: "solid",
             stroke: strk,
-            strokeWidth: 1.5,
+            strokeWidth: tStrokeWidth,
+            ...(gs.strokeDash ? { strokeLineDash: gs.strokeDash } : {}),
         }));
         // label strip separator
         tg.appendChild(rc.line(t.x, t.y + pad, t.x + t.w, t.y + pad, {
@@ -5378,8 +5422,8 @@ function renderToSVG(sg, container, options = {}) {
             stroke: strk,
             strokeWidth: 1,
         }));
-        // ── Table label: font, font-size, letter-spacing (always left) ──
-        tg.appendChild(mkText(t.label, t.x + 10, t.y + pad / 2, tFontSize, 500, textCol, "start", tFont, tLetterSpacing));
+        // ── Table label: font, font-size, font-weight, letter-spacing (always left) ──
+        tg.appendChild(mkText(t.label, t.x + 10, t.y + pad / 2, tFontSize, tFontWeight, textCol, "start", tFont, tLetterSpacing));
         // rows
         let rowY = t.y + pad;
         for (const row of t.rows) {
@@ -5408,7 +5452,7 @@ function renderToSVG(sg, container, options = {}) {
                 right: "end",
             };
             const cellAnchor = cellAnchorMap[cellAlignProp] ?? "middle";
-            const cellFw = row.kind === "header" ? 600 : 400;
+            const cellFw = row.kind === "header" ? 600 : (gs.fontWeight ?? 400);
             const cellColor = row.kind === "header" ? hdrText : textCol;
             let cx = t.x;
             row.cells.forEach((cell, i) => {
@@ -5447,27 +5491,31 @@ function renderToSVG(sg, container, options = {}) {
         const gs = n.style ?? {};
         const fill = String(gs.fill ?? palette.noteFill);
         const strk = String(gs.stroke ?? palette.noteStroke);
+        const nStrokeWidth = Number(gs.strokeWidth ?? 1.2);
         const fold = 14;
         const { x, y, w, h } = n;
+        if (gs.opacity != null)
+            ng.setAttribute("opacity", String(gs.opacity));
         // ── Note typography ─────────────────────────────────
-        // supports: font, font-size, letter-spacing, text-align, line-height
         const nFontSize = Number(gs.fontSize ?? 12);
+        const nFontWeight = gs.fontWeight ?? 400;
         const nFont = resolveStyleFont$1(gs, diagramFont);
         const nLetterSpacing = gs.letterSpacing;
         const nLineHeight = Number(gs.lineHeight ?? 1.4) * nFontSize;
         const nTextAlign = String(gs.textAlign ?? "left");
+        const nPad = Number(gs.padding ?? 12);
         const nAnchorMap = {
             left: "start",
             center: "middle",
             right: "end",
         };
         const nAnchor = nAnchorMap[nTextAlign] ?? "start";
-        // x position for the text block (pad from left, with alignment)
         const nTextX = nTextAlign === "right"
-            ? x + w - fold - 6
+            ? x + w - fold - nPad
             : nTextAlign === "center"
                 ? x + (w - fold) / 2
-                : x + 12;
+                : x + nPad;
+        const nFoldPad = fold + nPad; // text starts below fold + user padding
         ng.appendChild(rc.polygon([
             [x, y],
             [x + w - fold, y],
@@ -5480,7 +5528,8 @@ function renderToSVG(sg, container, options = {}) {
             fill,
             fillStyle: "solid",
             stroke: strk,
-            strokeWidth: 1.2,
+            strokeWidth: nStrokeWidth,
+            ...(gs.strokeDash ? { strokeLineDash: gs.strokeDash } : {}),
         }));
         ng.appendChild(rc.polygon([
             [x + w - fold, y],
@@ -5492,11 +5541,11 @@ function renderToSVG(sg, container, options = {}) {
             fill: palette.noteFold,
             fillStyle: "solid",
             stroke: strk,
-            strokeWidth: 0.8,
+            strokeWidth: Math.min(nStrokeWidth, 0.8),
         }));
         const nVerticalAlign = String(gs.verticalAlign ?? "top");
-        const bodyTop = y + fold + 8; // below the fold triangle
-        const bodyBottom = y + h - 8; // above bottom edge
+        const bodyTop = y + nFoldPad;
+        const bodyBottom = y + h - nPad;
         const bodyMid = (bodyTop + bodyBottom) / 2;
         const blockH = (n.lines.length - 1) * nLineHeight;
         const blockCY = nVerticalAlign === "bottom"
@@ -5504,13 +5553,11 @@ function renderToSVG(sg, container, options = {}) {
             : nVerticalAlign === "middle"
                 ? bodyMid
                 : bodyTop + blockH / 2;
-        // multiline: use mkMultilineText so line-height is respected
         if (n.lines.length > 1) {
-            // vertical centre of the text block inside the note
-            ng.appendChild(mkMultilineText(n.lines, nTextX, blockCY, nFontSize, 400, String(gs.color ?? palette.noteText), nAnchor, nLineHeight, nFont, nLetterSpacing));
+            ng.appendChild(mkMultilineText(n.lines, nTextX, blockCY, nFontSize, nFontWeight, String(gs.color ?? palette.noteText), nAnchor, nLineHeight, nFont, nLetterSpacing));
         }
         else {
-            ng.appendChild(mkText(n.lines[0] ?? "", nTextX, blockCY, nFontSize, 400, String(gs.color ?? palette.noteText), nAnchor, nFont, nLetterSpacing));
+            ng.appendChild(mkText(n.lines[0] ?? "", nTextX, blockCY, nFontSize, nFontWeight, String(gs.color ?? palette.noteText), nAnchor, nFont, nLetterSpacing));
         }
         NoteL.appendChild(ng);
     }
@@ -5519,13 +5566,27 @@ function renderToSVG(sg, container, options = {}) {
     const MDL = mkGroup('markdown-layer');
     for (const m of sg.markdowns) {
         const mg = mkGroup(`markdown-${m.id}`, 'mdg');
-        const mFont = resolveStyleFont$1(m.style, diagramFont);
-        const baseColor = String(m.style?.color ?? palette.nodeText);
-        const textAlign = String(m.style?.textAlign ?? 'left');
+        const gs = m.style ?? {};
+        const mFont = resolveStyleFont$1(gs, diagramFont);
+        const baseColor = String(gs.color ?? palette.nodeText);
+        const textAlign = String(gs.textAlign ?? 'left');
         const anchor = textAlign === 'right' ? 'end'
             : textAlign === 'center' ? 'middle'
                 : 'start';
-        const PAD = Number(m.style?.padding ?? 16);
+        const PAD = Number(gs.padding ?? 16);
+        const mLetterSpacing = gs.letterSpacing;
+        if (gs.opacity != null)
+            mg.setAttribute('opacity', String(gs.opacity));
+        // Background + border
+        if (gs.fill || gs.stroke) {
+            mg.appendChild(rc.rectangle(m.x, m.y, m.w, m.h, {
+                ...BASE_ROUGH, seed: hashStr$3(m.id),
+                fill: String(gs.fill ?? 'none'), fillStyle: 'solid',
+                stroke: String(gs.stroke ?? 'none'),
+                strokeWidth: Number(gs.strokeWidth ?? 1.2),
+                ...(gs.strokeDash ? { strokeLineDash: gs.strokeDash } : {}),
+            }));
+        }
         const textX = textAlign === 'right' ? m.x + m.w - PAD
             : textAlign === 'center' ? m.x + m.w / 2
                 : m.x + PAD;
@@ -5548,6 +5609,8 @@ function renderToSVG(sg, container, options = {}) {
             t.setAttribute('fill', baseColor);
             t.setAttribute('pointer-events', 'none');
             t.setAttribute('user-select', 'none');
+            if (mLetterSpacing != null)
+                t.setAttribute('letter-spacing', String(mLetterSpacing));
             for (const run of line.runs) {
                 const span = se('tspan');
                 span.textContent = run.text;
@@ -5637,7 +5700,7 @@ function drawPieArc(rc, ctx, cx, cy, r, ir, startAngle, endAngle, color, seed) {
     });
 }
 // ── Axes ───────────────────────────────────────────────────
-function drawAxes(rc, ctx, c, px, py, pw, ph, allY, labelCol, R) {
+function drawAxes(rc, ctx, c, px, py, pw, ph, allY, labelCol, R, font = 'system-ui, sans-serif') {
     const toY = makeValueToY(allY, py, ph);
     const baseline = toY(0);
     // Y axis
@@ -5651,7 +5714,7 @@ function drawAxes(rc, ctx, c, px, py, pw, ph, allY, labelCol, R) {
             continue;
         rc.line(px - 3, ty, px, ty, { roughness: 0.2, seed: hashStr$2(c.id + 'yt' + tick), stroke: labelCol, strokeWidth: 0.7 });
         ctx.save();
-        ctx.font = '400 9px system-ui, sans-serif';
+        ctx.font = `400 9px ${font}`;
         ctx.fillStyle = labelCol;
         ctx.textAlign = 'right';
         ctx.textBaseline = 'middle';
@@ -5660,9 +5723,9 @@ function drawAxes(rc, ctx, c, px, py, pw, ph, allY, labelCol, R) {
     }
 }
 // ── Legend ─────────────────────────────────────────────────
-function drawLegend(ctx, labels, colors, x, y, labelCol) {
+function drawLegend(ctx, labels, colors, x, y, labelCol, font = 'system-ui, sans-serif') {
     ctx.save();
-    ctx.font = '400 9px system-ui, sans-serif';
+    ctx.font = `400 9px ${font}`;
     ctx.textAlign = 'left';
     ctx.textBaseline = 'middle';
     labels.forEach((lbl, i) => {
@@ -5680,6 +5743,11 @@ function drawRoughChartCanvas(rc, ctx, c, pal, R) {
     const bgFill = String(s.fill ?? pal.nodeFill);
     const bgStroke = String(s.stroke ?? (pal.nodeStroke === 'none' ? '#c8b898' : pal.nodeStroke));
     const lc = String(s.color ?? pal.labelText);
+    const cFont = String(s.font ? `${s.font}, system-ui, sans-serif` : 'system-ui, sans-serif');
+    const cFontSize = Number(s.fontSize ?? 12);
+    const cFontWeight = s.fontWeight ?? 600;
+    if (s.opacity != null)
+        ctx.globalAlpha = Number(s.opacity);
     // Background
     rc.rectangle(c.x, c.y, c.w, c.h, {
         ...R, seed: hashStr$2(c.id),
@@ -5692,7 +5760,7 @@ function drawRoughChartCanvas(rc, ctx, c, pal, R) {
     // Title
     if (c.title) {
         ctx.save();
-        ctx.font = '600 12px system-ui, sans-serif';
+        ctx.font = `${cFontWeight} ${cFontSize}px ${cFont}`;
         ctx.fillStyle = lc;
         ctx.textAlign = 'center';
         ctx.textBaseline = 'middle';
@@ -5713,7 +5781,8 @@ function drawRoughChartCanvas(rc, ctx, c, pal, R) {
             drawPieArc(rc, ctx, cx, cy, r, ir, angle, angle + sweep, seg.color, hashStr$2(c.id + seg.label + i));
             angle += sweep;
         });
-        drawLegend(ctx, segments.map(s => `${s.label} ${Math.round(s.value / total * 100)}%`), segments.map(s => s.color), legendX, legendY, lc);
+        drawLegend(ctx, segments.map(s => `${s.label} ${Math.round(s.value / total * 100)}%`), segments.map(s => s.color), legendX, legendY, lc, cFont);
+        ctx.globalAlpha = 1;
         return;
     }
     // ── Scatter ───────────────────────────────────────────────
@@ -5733,7 +5802,8 @@ function drawRoughChartCanvas(rc, ctx, c, pal, R) {
                 strokeWidth: 1.2,
             });
         });
-        drawLegend(ctx, pts.map(p => p.label), CHART_COLORS, c.x + 8, c.y + (c.title ? 28 : 12), lc);
+        drawLegend(ctx, pts.map(p => p.label), CHART_COLORS, c.x + 8, c.y + (c.title ? 28 : 12), lc, cFont);
+        ctx.globalAlpha = 1;
         return;
     }
     // ── Bar / Line / Area ─────────────────────────────────────
@@ -5742,10 +5812,10 @@ function drawRoughChartCanvas(rc, ctx, c, pal, R) {
     const toY = makeValueToY(allY, py, ph);
     const baseline = toY(0);
     const n = labels.length;
-    drawAxes(rc, ctx, c, px, py, pw, ph, allY, lc, R);
+    drawAxes(rc, ctx, c, px, py, pw, ph, allY, lc, R, cFont);
     // X labels
     ctx.save();
-    ctx.font = '400 9px system-ui, sans-serif';
+    ctx.font = `400 9px ${cFont}`;
     ctx.fillStyle = lc;
     ctx.textAlign = 'center';
     ctx.textBaseline = 'top';
@@ -5822,8 +5892,9 @@ function drawRoughChartCanvas(rc, ctx, c, pal, R) {
     }
     // Multi-series legend
     if (series.length > 1) {
-        drawLegend(ctx, series.map(s => s.name), series.map(s => s.color), px, py - 2, lc);
+        drawLegend(ctx, series.map(s => s.name), series.map(s => s.color), px, py - 2, lc, cFont);
     }
+    ctx.globalAlpha = 1;
 }
 
 // ============================================================
@@ -5836,6 +5907,14 @@ function hashStr$1(s) {
         h = ((h * 33) ^ s.charCodeAt(i)) & 0xffff;
     return h;
 }
+/** Darken a CSS hex colour by `amount` (0–1). Falls back to input for non-hex. */
+function darkenHex(hex, amount = 0.12) {
+    const m = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex);
+    if (!m)
+        return hex;
+    const d = (v) => Math.max(0, Math.round(parseInt(v, 16) * (1 - amount)));
+    return `#${d(m[1]).toString(16).padStart(2, "0")}${d(m[2]).toString(16).padStart(2, "0")}${d(m[3]).toString(16).padStart(2, "0")}`;
+}
 // ── Small helper: load + resolve font from a style map ────────────────────
 function resolveStyleFont(style, fallback) {
     const raw = String(style['font'] ?? '');
@@ -5953,6 +6032,7 @@ function renderShape(rc, ctx, n, palette, R) {
         ...R, seed: hashStr$1(n.id),
         fill, fillStyle: 'solid',
         stroke, strokeWidth: Number(s.strokeWidth ?? 1.9),
+        ...(s.strokeDash ? { strokeLineDash: s.strokeDash } : {}),
     };
     const cx = n.x + n.w / 2, cy = n.y + n.h / 2;
     const hw = n.w / 2 - 2;
@@ -6088,6 +6168,8 @@ function renderToCanvas(sg, canvas, options = {}) {
         if (!g.w)
             continue;
         const gs = g.style ?? {};
+        if (gs.opacity != null)
+            ctx.globalAlpha = Number(gs.opacity);
         rc.rectangle(g.x, g.y, g.w, g.h, {
             ...R, roughness: 1.7, bowing: 0.4, seed: hashStr$1(g.id),
             fill: String(gs.fill ?? palette.groupFill),
@@ -6096,16 +6178,21 @@ function renderToCanvas(sg, canvas, options = {}) {
             strokeWidth: Number(gs.strokeWidth ?? 1.2),
             strokeLineDash: gs.strokeDash ?? palette.groupDash,
         });
-        // ── Group label ──────────────────────────────────────
-        // Only render when label has content — empty label = no reserved space
-        // supports: font, font-size, letter-spacing (always left-anchored)
         if (g.label) {
             const gFontSize = Number(gs.fontSize ?? 12);
+            const gFontWeight = gs.fontWeight ?? 500;
             const gFont = resolveStyleFont(gs, diagramFont);
             const gLetterSpacing = gs.letterSpacing;
             const gLabelColor = gs.color ? String(gs.color) : palette.groupLabel;
-            drawText(ctx, g.label, g.x + 14, g.y + 16, gFontSize, 500, gLabelColor, 'left', gFont, gLetterSpacing);
+            const gPad = Number(gs.padding ?? 14);
+            const gTextAlign = String(gs.textAlign ?? 'left');
+            const gTextX = gTextAlign === 'right' ? g.x + g.w - gPad
+                : gTextAlign === 'center' ? g.x + g.w / 2
+                    : g.x + gPad;
+            drawText(ctx, g.label, gTextX, g.y + gPad + 2, gFontSize, gFontWeight, gLabelColor, gTextAlign, gFont, gLetterSpacing);
         }
+        if (gs.opacity != null)
+            ctx.globalAlpha = 1;
     }
     // ── Edges ─────────────────────────────────────────────────
     for (const e of sg.edges) {
@@ -6117,6 +6204,8 @@ function renderToCanvas(sg, canvas, options = {}) {
         const srcCX = src.x + src.w / 2, srcCY = src.y + src.h / 2;
         const [x1, y1] = getConnPoint(src, dstCX, dstCY);
         const [x2, y2] = getConnPoint(dst, srcCX, srcCY);
+        if (e.style?.opacity != null)
+            ctx.globalAlpha = Number(e.style.opacity);
         const ecol = String(e.style?.stroke ?? palette.edgeStroke);
         const { arrowAt, dashed } = connMeta(e.connector);
         const len = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2) || 1;
@@ -6145,17 +6234,22 @@ function renderToCanvas(sg, canvas, options = {}) {
             const eFontSize = Number(e.style?.fontSize ?? 11);
             const eFont = resolveStyleFont(e.style ?? {}, diagramFont);
             const eLetterSpacing = e.style?.letterSpacing;
+            const eFontWeight = e.style?.fontWeight ?? 400;
+            const eLabelColor = String(e.style?.color ?? palette.edgeLabelText);
             ctx.save();
-            ctx.font = `400 ${eFontSize}px ${eFont}`;
+            ctx.font = `${eFontWeight} ${eFontSize}px ${eFont}`;
             const tw = ctx.measureText(e.label).width + 12;
             ctx.restore();
             ctx.fillStyle = palette.edgeLabelBg;
             ctx.fillRect(mx - tw / 2, my - 8, tw, 15);
-            drawText(ctx, e.label, mx, my + 3, eFontSize, 400, palette.edgeLabelText, 'center', eFont, eLetterSpacing);
+            drawText(ctx, e.label, mx, my + 3, eFontSize, eFontWeight, eLabelColor, 'center', eFont, eLetterSpacing);
         }
+        ctx.globalAlpha = 1;
     }
     // ── Nodes ─────────────────────────────────────────────────
     for (const n of sg.nodes) {
+        if (n.style?.opacity != null)
+            ctx.globalAlpha = Number(n.style.opacity);
         renderShape(rc, ctx, n, palette, R);
         // ── Node / text typography ─────────────────────────
         // supports: font, font-size, letter-spacing, text-align,
@@ -6169,18 +6263,19 @@ function renderToCanvas(sg, canvas, options = {}) {
         const lineHeight = Number(n.style?.lineHeight ?? 1.3) * fontSize;
         const letterSpacing = n.style?.letterSpacing;
         const vertAlign = String(n.style?.verticalAlign ?? 'middle');
+        const pad = Number(n.style?.padding ?? 8);
         // x shifts for left/right alignment
-        const textX = textAlign === 'left' ? n.x + 8
-            : textAlign === 'right' ? n.x + n.w - 8
+        const textX = textAlign === 'left' ? n.x + pad
+            : textAlign === 'right' ? n.x + n.w - pad
                 : n.x + n.w / 2;
         // word-wrap for text shape; explicit \n for all others
         const rawLines = n.label.split('\n');
         const lines = n.shape === 'text' && rawLines.length === 1
-            ? wrapText(n.label, n.w - 16, fontSize)
+            ? wrapText(n.label, n.w - pad * 2, fontSize)
             : rawLines;
         // vertical-align: compute textCY from top/middle/bottom
-        const nodeBodyTop = n.y + 6;
-        const nodeBodyBottom = n.y + n.h - 6;
+        const nodeBodyTop = n.y + pad;
+        const nodeBodyBottom = n.y + n.h - pad;
         const blockH = (lines.length - 1) * lineHeight;
         const textCY = vertAlign === 'top' ? nodeBodyTop + blockH / 2
             : vertAlign === 'bottom' ? nodeBodyBottom - blockH / 2
@@ -6191,6 +6286,8 @@ function renderToCanvas(sg, canvas, options = {}) {
         else {
             drawText(ctx, lines[0] ?? '', textX, textCY, fontSize, fontWeight, textColor, textAlign, nodeFont, letterSpacing);
         }
+        if (n.style?.opacity != null)
+            ctx.globalAlpha = 1;
     }
     // ── Tables ────────────────────────────────────────────────
     for (const t of sg.tables) {
@@ -6200,25 +6297,28 @@ function renderToCanvas(sg, canvas, options = {}) {
         const textCol = String(gs.color ?? palette.tableText);
         const pad = t.labelH;
         // ── Table-level font ────────────────────────────────
-        // supports: font, font-size, letter-spacing
-        // cells also support text-align
         const tFontSize = Number(gs.fontSize ?? 12);
         const tFont = resolveStyleFont(gs, diagramFont);
         const tLetterSpacing = gs.letterSpacing;
+        const tStrokeWidth = Number(gs.strokeWidth ?? 1.5);
+        const tFontWeight = gs.fontWeight ?? 500;
+        if (gs.opacity != null)
+            ctx.globalAlpha = Number(gs.opacity);
         rc.rectangle(t.x, t.y, t.w, t.h, {
             ...R, seed: hashStr$1(t.id),
-            fill, fillStyle: 'solid', stroke: strk, strokeWidth: 1.5,
+            fill, fillStyle: 'solid', stroke: strk, strokeWidth: tStrokeWidth,
+            ...(gs.strokeDash ? { strokeLineDash: gs.strokeDash } : {}),
         });
         rc.line(t.x, t.y + pad, t.x + t.w, t.y + pad, {
             roughness: 0.6, seed: hashStr$1(t.id + 'l'), stroke: strk, strokeWidth: 1,
         });
         // ── Table label: always left-anchored ───────────────
-        drawText(ctx, t.label, t.x + 10, t.y + pad / 2, tFontSize, 500, textCol, 'left', tFont, tLetterSpacing);
+        drawText(ctx, t.label, t.x + 10, t.y + pad / 2, tFontSize, tFontWeight, textCol, 'left', tFont, tLetterSpacing);
         let rowY = t.y + pad;
         for (const row of t.rows) {
             const rh = row.kind === 'header' ? t.headerH : t.rowH;
             if (row.kind === 'header') {
-                ctx.fillStyle = palette.tableHeaderFill;
+                ctx.fillStyle = gs.fill ? darkenHex(fill, 0.08) : palette.tableHeaderFill;
                 ctx.fillRect(t.x + 1, rowY + 1, t.w - 2, rh - 1);
             }
             rc.line(t.x, rowY + rh, t.x + t.w, rowY + rh, {
@@ -6231,7 +6331,7 @@ function renderToCanvas(sg, canvas, options = {}) {
             const cellAlignProp = (row.kind === 'header'
                 ? 'center'
                 : String(gs.textAlign ?? 'center'));
-            const cellFw = row.kind === 'header' ? 600 : 400;
+            const cellFw = row.kind === 'header' ? 600 : (gs.fontWeight ?? 400);
             const cellColor = row.kind === 'header'
                 ? String(gs.color ?? palette.tableHeaderText)
                 : textCol;
@@ -6252,63 +6352,87 @@ function renderToCanvas(sg, canvas, options = {}) {
             });
             rowY += rh;
         }
+        ctx.globalAlpha = 1;
     }
     // ── Notes ─────────────────────────────────────────────────
     for (const n of sg.notes) {
         const gs = n.style ?? {};
         const fill = String(gs.fill ?? palette.noteFill);
         const strk = String(gs.stroke ?? palette.noteStroke);
+        const nStrokeWidth = Number(gs.strokeWidth ?? 1.2);
         const fold = 14;
         const { x, y, w, h } = n;
+        if (gs.opacity != null)
+            ctx.globalAlpha = Number(gs.opacity);
         rc.polygon([
             [x, y],
             [x + w - fold, y],
             [x + w, y + fold],
             [x + w, y + h],
             [x, y + h],
-        ], { ...R, seed: hashStr$1(n.id), fill, fillStyle: 'solid', stroke: strk, strokeWidth: 1.2 });
+        ], { ...R, seed: hashStr$1(n.id), fill, fillStyle: 'solid', stroke: strk,
+            strokeWidth: nStrokeWidth,
+            ...(gs.strokeDash ? { strokeLineDash: gs.strokeDash } : {}),
+        });
         rc.polygon([
             [x + w - fold, y],
             [x + w, y + fold],
             [x + w - fold, y + fold],
         ], { roughness: 0.4, seed: hashStr$1(n.id + 'f'),
-            fill: palette.noteFold, fillStyle: 'solid', stroke: strk, strokeWidth: 0.8 });
-        // ── Note typography ─────────────────────────────────
-        // supports: font, font-size, letter-spacing, text-align,
-        //           vertical-align, line-height
+            fill: palette.noteFold, fillStyle: 'solid', stroke: strk,
+            strokeWidth: Math.min(nStrokeWidth, 0.8),
+        });
         const nFontSize = Number(gs.fontSize ?? 12);
+        const nFontWeight = gs.fontWeight ?? 400;
         const nFont = resolveStyleFont(gs, diagramFont);
         const nLetterSpacing = gs.letterSpacing;
         const nLineHeight = Number(gs.lineHeight ?? 1.4) * nFontSize;
         const nTextAlign = String(gs.textAlign ?? 'left');
         const nVertAlign = String(gs.verticalAlign ?? 'top');
         const nColor = String(gs.color ?? palette.noteText);
-        const nTextX = nTextAlign === 'right' ? x + w - fold - 6
+        const nPad = Number(gs.padding ?? 12);
+        const nTextX = nTextAlign === 'right' ? x + w - fold - nPad
             : nTextAlign === 'center' ? x + (w - fold) / 2
-                : x + 12;
-        // vertical-align inside note body (below fold)
-        const bodyTop = y + fold + 8;
-        const bodyBottom = y + h - 8;
+                : x + nPad;
+        const nFoldPad = fold + nPad;
+        const bodyTop = y + nFoldPad;
+        const bodyBottom = y + h - nPad;
         const blockH = (n.lines.length - 1) * nLineHeight;
         const blockCY = nVertAlign === 'bottom' ? bodyBottom - blockH / 2
             : nVertAlign === 'middle' ? (bodyTop + bodyBottom) / 2
-                : bodyTop + blockH / 2; // top (default)
+                : bodyTop + blockH / 2;
         if (n.lines.length > 1) {
-            drawMultilineText(ctx, n.lines, nTextX, blockCY, nFontSize, 400, nColor, nTextAlign, nLineHeight, nFont, nLetterSpacing);
+            drawMultilineText(ctx, n.lines, nTextX, blockCY, nFontSize, nFontWeight, nColor, nTextAlign, nLineHeight, nFont, nLetterSpacing);
         }
         else {
-            drawText(ctx, n.lines[0] ?? '', nTextX, blockCY, nFontSize, 400, nColor, nTextAlign, nFont, nLetterSpacing);
+            drawText(ctx, n.lines[0] ?? '', nTextX, blockCY, nFontSize, nFontWeight, nColor, nTextAlign, nFont, nLetterSpacing);
         }
+        if (gs.opacity != null)
+            ctx.globalAlpha = 1;
     }
     // ── Markdown blocks ────────────────────────────────────────
     // Renders prose with Markdown headings and bold/italic inline spans.
     // Canvas has no native bold-within-a-run, so each run is drawn
     // individually with its own ctx.font setting.
     for (const m of (sg.markdowns ?? [])) {
-        const mFont = resolveStyleFont(m.style, diagramFont);
-        const baseColor = String(m.style?.color ?? palette.nodeText);
-        const textAlign = String(m.style?.textAlign ?? 'left');
-        const PAD = Number(m.style?.padding ?? 16);
+        const gs = m.style ?? {};
+        const mFont = resolveStyleFont(gs, diagramFont);
+        const baseColor = String(gs.color ?? palette.nodeText);
+        const textAlign = String(gs.textAlign ?? 'left');
+        const PAD = Number(gs.padding ?? 16);
+        const mLetterSpacing = gs.letterSpacing;
+        if (gs.opacity != null)
+            ctx.globalAlpha = Number(gs.opacity);
+        // Background + border
+        if (gs.fill || gs.stroke) {
+            rc.rectangle(m.x, m.y, m.w, m.h, {
+                ...R, seed: hashStr$1(m.id),
+                fill: String(gs.fill ?? 'none'), fillStyle: 'solid',
+                stroke: String(gs.stroke ?? 'none'),
+                strokeWidth: Number(gs.strokeWidth ?? 1.2),
+                ...(gs.strokeDash ? { strokeLineDash: gs.strokeDash } : {}),
+            });
+        }
         const anchorX = textAlign === 'right' ? m.x + m.w - PAD
             : textAlign === 'center' ? m.x + m.w / 2
                 : m.x + PAD;
@@ -6326,14 +6450,29 @@ function renderToCanvas(sg, canvas, options = {}) {
             ctx.save();
             ctx.textBaseline = 'middle';
             ctx.fillStyle = baseColor;
+            const ls = mLetterSpacing ?? 0;
+            // measure run width including letter-spacing
+            const runW = (run) => {
+                return ctx.measureText(run.text).width + ls * run.text.length;
+            };
+            const drawRun = (run, rx) => {
+                if (ls) {
+                    for (const ch of run.text) {
+                        ctx.fillText(ch, rx, lineY);
+                        rx += ctx.measureText(ch).width + ls;
+                    }
+                }
+                else {
+                    ctx.fillText(run.text, rx, lineY);
+                }
+            };
             if (textAlign === 'center' || textAlign === 'right') {
-                // Measure full line width first
                 let totalW = 0;
                 for (const run of line.runs) {
                     const runStyle = run.italic ? 'italic ' : '';
                     const runWeight = run.bold ? 700 : fontWeight;
                     ctx.font = `${runStyle}${runWeight} ${fontSize}px ${mFont}`;
-                    totalW += ctx.measureText(run.text).width;
+                    totalW += runW(run);
                 }
                 let runX = textAlign === 'center' ? anchorX - totalW / 2 : anchorX - totalW;
                 ctx.textAlign = 'left';
@@ -6341,25 +6480,25 @@ function renderToCanvas(sg, canvas, options = {}) {
                     const runStyle = run.italic ? 'italic ' : '';
                     const runWeight = run.bold ? 700 : fontWeight;
                     ctx.font = `${runStyle}${runWeight} ${fontSize}px ${mFont}`;
-                    ctx.fillText(run.text, runX, lineY);
-                    runX += ctx.measureText(run.text).width;
+                    drawRun(run, runX);
+                    runX += runW(run);
                 }
             }
             else {
-                // left-aligned — draw runs left to right from anchorX
                 let runX = anchorX;
                 ctx.textAlign = 'left';
                 for (const run of line.runs) {
                     const runStyle = run.italic ? 'italic ' : '';
                     const runWeight = run.bold ? 700 : fontWeight;
                     ctx.font = `${runStyle}${runWeight} ${fontSize}px ${mFont}`;
-                    ctx.fillText(run.text, runX, lineY);
-                    runX += ctx.measureText(run.text).width;
+                    drawRun(run, runX);
+                    runX += runW(run);
                 }
             }
             ctx.restore();
             y += LINE_SPACING[line.kind];
         }
+        ctx.globalAlpha = 1;
     }
     // ── Charts ────────────────────────────────────────────────
     for (const c of sg.charts) {
@@ -6397,6 +6536,7 @@ const getEdgeEl = (svg, f, t) => getEl(svg, `edge-${f}-${t}`);
 const getTableEl = (svg, id) => getEl(svg, `table-${id}`);
 const getNoteEl = (svg, id) => getEl(svg, `note-${id}`);
 const getChartEl = (svg, id) => getEl(svg, `chart-${id}`);
+const getMarkdownEl = (svg, id) => getEl(svg, `markdown-${id}`);
 function resolveEl(svg, target) {
     // check edge first — target contains connector like "a-->b"
     const edge = parseEdgeTarget(target);
@@ -6408,6 +6548,7 @@ function resolveEl(svg, target) {
         getTableEl(svg, target) ??
         getNoteEl(svg, target) ??
         getChartEl(svg, target) ??
+        getMarkdownEl(svg, target) ??
         null);
 }
 function pathLength(p) {
@@ -6418,6 +6559,15 @@ function pathLength(p) {
         return 200;
     }
 }
+function clearDashOverridesAfter(el, delayMs) {
+    setTimeout(() => {
+        el.querySelectorAll('path').forEach(p => {
+            p.style.strokeDasharray = '';
+            p.style.strokeDashoffset = '';
+            p.style.transition = '';
+        });
+    }, delayMs);
+}
 // ── Arrow connector parser ────────────────────────────────
 const ARROW_CONNECTORS = ["<-->", "<->", "-->", "<--", "->", "<-", "---", "--"];
 function parseEdgeTarget(target) {
@@ -6525,32 +6675,39 @@ function clearEdgeDrawStyles(el) {
     });
 }
 function animateEdgeDraw(el, conn) {
-    const paths = Array.from(el.querySelectorAll("path"));
+    const paths = Array.from(el.querySelectorAll('path'));
     if (!paths.length)
         return;
     const linePath = paths[0];
     const headPaths = paths.slice(1);
     const STROKE_DUR = 360;
     const len = pathLength(linePath);
-    const reversed = conn.startsWith("<") && !conn.includes(">");
+    const reversed = conn.startsWith('<') && !conn.includes('>');
     linePath.style.strokeDasharray = `${len}`;
     linePath.style.strokeDashoffset = reversed ? `${-len}` : `${len}`;
-    linePath.style.transition = "none";
-    headPaths.forEach((p) => {
-        p.style.opacity = "0";
-        p.style.transition = "none";
+    linePath.style.transition = 'none';
+    headPaths.forEach(p => {
+        p.style.opacity = '0';
+        p.style.transition = 'none';
     });
-    el.classList.remove("draw-hidden");
-    el.classList.add("draw-reveal");
-    el.style.opacity = "1";
+    el.classList.remove('draw-hidden');
+    el.classList.add('draw-reveal');
+    el.style.opacity = '1';
     requestAnimationFrame(() => requestAnimationFrame(() => {
         linePath.style.transition = `stroke-dashoffset ${STROKE_DUR}ms cubic-bezier(.4,0,.2,1)`;
-        linePath.style.strokeDashoffset = "0";
+        linePath.style.strokeDashoffset = '0';
         setTimeout(() => {
-            headPaths.forEach((p) => {
-                p.style.transition = "opacity 120ms ease";
-                p.style.opacity = "1";
+            headPaths.forEach(p => {
+                p.style.transition = 'opacity 120ms ease';
+                p.style.opacity = '1';
             });
+            // ── ADD: clear inline dash overrides so SVG attribute
+            //    (stroke-dasharray="6,5" for dashed arrows) takes over again
+            setTimeout(() => {
+                linePath.style.strokeDasharray = '';
+                linePath.style.strokeDashoffset = '';
+                linePath.style.transition = '';
+            }, 160);
         }, STROKE_DUR - 40);
     }));
 }
@@ -6574,6 +6731,7 @@ class AnimationController {
         this.drawTargetTables = new Set();
         this.drawTargetNotes = new Set();
         this.drawTargetCharts = new Set();
+        this.drawTargetMarkdowns = new Set();
         for (const s of steps) {
             if (s.action !== "draw" || parseEdgeTarget(s.target))
                 continue;
@@ -6594,6 +6752,10 @@ class AnimationController {
                 this.drawTargetCharts.add(`chart-${s.target}`);
                 this.drawTargetNodes.delete(`node-${s.target}`);
             }
+            if (svg.querySelector(`#markdown-${s.target}`)) {
+                this.drawTargetMarkdowns.add(`markdown-${s.target}`);
+                this.drawTargetNodes.delete(`node-${s.target}`);
+            }
         }
         this._clearAll();
     }
@@ -6765,7 +6927,24 @@ class AnimationController {
                 });
             }
         });
-        this.svg.querySelectorAll(".tg, .ntg, .cg").forEach((el) => {
+        // Markdown
+        this.svg.querySelectorAll(".mdg").forEach((el) => {
+            clearDrawStyles(el);
+            el.style.transition = "none";
+            el.style.opacity = "";
+            if (this.drawTargetMarkdowns.has(el.id)) {
+                el.classList.add("gg-hidden");
+            }
+            else {
+                el.classList.remove("gg-hidden");
+                requestAnimationFrame(() => {
+                    el.style.transition = "";
+                });
+            }
+        });
+        this.svg
+            .querySelectorAll(".tg, .ntg, .cg, .mdg")
+            .forEach((el) => {
             el.style.transform = "";
             el.style.transition = "";
             el.style.opacity = "";
@@ -6943,6 +7122,9 @@ class AnimationController {
                 if (!firstPath?.style.strokeDasharray)
                     prepareForDraw(groupEl);
                 animateShapeDraw(groupEl, 550, 40);
+                const pathCount = groupEl.querySelectorAll('path').length;
+                const totalMs = pathCount * 40 + 550 + 120; // stagger + duration + buffer
+                clearDashOverridesAfter(groupEl, totalMs);
             }
             return;
         }
@@ -6963,6 +7145,8 @@ class AnimationController {
                 tableEl.classList.remove("gg-hidden");
                 prepareForDraw(tableEl);
                 animateShapeDraw(tableEl, 500, 40);
+                const tablePathCount = tableEl.querySelectorAll('path').length;
+                clearDashOverridesAfter(tableEl, tablePathCount * 40 + 500 + 120);
             }
             return;
         }
@@ -6983,6 +7167,8 @@ class AnimationController {
                 noteEl.classList.remove("gg-hidden");
                 prepareForDraw(noteEl);
                 animateShapeDraw(noteEl, 420, 55);
+                const notePathCount = noteEl.querySelectorAll('path').length;
+                clearDashOverridesAfter(noteEl, notePathCount * 55 + 420 + 120);
             }
             return;
         }
@@ -7010,6 +7196,28 @@ class AnimationController {
             }
             return;
         }
+        // ── Markdown ──────────────────────────────────────────
+        const markdownEl = getMarkdownEl(this.svg, target);
+        if (markdownEl) {
+            if (silent) {
+                markdownEl.style.transition = "none";
+                markdownEl.style.opacity = "";
+                markdownEl.classList.remove("gg-hidden");
+                markdownEl.style.opacity = "1";
+                requestAnimationFrame(() => requestAnimationFrame(() => {
+                    markdownEl.style.transition = "";
+                }));
+            }
+            else {
+                markdownEl.style.opacity = "0";
+                markdownEl.classList.remove("gg-hidden");
+                requestAnimationFrame(() => requestAnimationFrame(() => {
+                    markdownEl.style.transition = "opacity 500ms ease";
+                    markdownEl.style.opacity = "1";
+                }));
+            }
+            return;
+        }
         // ── Node draw ──────────────────────────────────────
         const nodeEl = getNodeEl(this.svg, target);
         if (!nodeEl)
@@ -7023,14 +7231,16 @@ class AnimationController {
             if (!firstPath?.style.strokeDasharray)
                 prepareForDraw(nodeEl);
             animateShapeDraw(nodeEl, 420, 55);
+            const nodePathCount = nodeEl.querySelectorAll('path').length;
+            clearDashOverridesAfter(nodeEl, nodePathCount * 55 + 420 + 120);
         }
     }
     // ── erase ─────────────────────────────────────────────────
     _doErase(target) {
         const el = resolveEl(this.svg, target); // handles edges too now
         if (el) {
-            el.style.transition = 'opacity 0.4s';
-            el.style.opacity = '0';
+            el.style.transition = "opacity 0.4s";
+            el.style.opacity = "0";
         }
     }
     // ── show / hide ───────────────────────────────────────────
@@ -7058,10 +7268,10 @@ class AnimationController {
             return;
         // edge — color stroke
         if (parseEdgeTarget(target)) {
-            el.querySelectorAll('path, line, polyline').forEach(p => {
+            el.querySelectorAll("path, line, polyline").forEach((p) => {
                 p.style.stroke = color;
             });
-            el.querySelectorAll('polygon').forEach(p => {
+            el.querySelectorAll("polygon").forEach((p) => {
                 p.style.fill = color;
                 p.style.stroke = color;
             });
@@ -7069,22 +7279,24 @@ class AnimationController {
         }
         // everything else — color fill
         let hit = false;
-        el.querySelectorAll('path, rect, ellipse, polygon').forEach(c => {
-            const attrFill = c.getAttribute('fill');
-            if (attrFill === 'none')
+        el.querySelectorAll("path, rect, ellipse, polygon").forEach((c) => {
+            const attrFill = c.getAttribute("fill");
+            if (attrFill === "none")
                 return;
-            if (attrFill === null && c.tagName === 'path')
+            if (attrFill === null && c.tagName === "path")
                 return;
             c.style.fill = color;
             hit = true;
         });
         if (!hit) {
-            el.querySelectorAll('text').forEach(t => { t.style.fill = color; });
+            el.querySelectorAll("text").forEach((t) => {
+                t.style.fill = color;
+            });
         }
     }
 }
 const ANIMATION_CSS = `
-.ng, .gg, .tg, .ntg, .cg, .eg {
+.ng, .gg, .tg, .ntg, .cg, .eg, .mdg {
   transform-box: fill-box;
   transform-origin: center;
   transition: filter 0.3s, opacity 0.35s;
@@ -7095,9 +7307,10 @@ const ANIMATION_CSS = `
 .tg.hl path, .tg.hl rect,
 .ntg.hl path, .ntg.hl polygon,
 .cg.hl path, .cg.hl rect,
+.mdg.hl text,
 .eg.hl path, .eg.hl line, .eg.hl polygon { stroke-width: 2.8 !important; }
 
-.ng.hl, .tg.hl, .ntg.hl, .cg.hl, .eg.hl {
+.ng.hl, .tg.hl, .ntg.hl, .cg.hl, .mdg.hl, .eg.hl {
   animation: ng-pulse 1.4s ease-in-out infinite;
 }
 @keyframes ng-pulse {
@@ -7106,7 +7319,8 @@ const ANIMATION_CSS = `
 }
 
 /* fade */
-.ng.faded, .gg.faded, .tg.faded, .ntg.faded, .cg.faded, .eg.faded { opacity: 0.22; }
+.ng.faded, .gg.faded, .tg.faded, .ntg.faded,
+.cg.faded, .eg.faded, .mdg.faded { opacity: 0.22; }
 
 .ng.hidden { opacity: 0; pointer-events: none; }
 .eg.draw-hidden { opacity: 0; }
@@ -7115,6 +7329,7 @@ const ANIMATION_CSS = `
 .tg.gg-hidden  { opacity: 0; }
 .ntg.gg-hidden { opacity: 0; }
 .cg.gg-hidden  { opacity: 0; }
+.mdg.gg-hidden { opacity: 0; }
 `;
 
 // ============================================================