sketchmark 0.2.0 → 0.2.2

package/dist/sketchmark.iife.js

@@ -262,10 +262,6 @@ var AIDiagram = (function (exports) {
             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"])
@@ -282,8 +278,9 @@ var AIDiagram = (function (exports) {
             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));
@@ -1490,13 +1487,22 @@ var AIDiagram = (function (exports) {
                 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:
@@ -1713,17 +1719,16 @@ var AIDiagram = (function (exports) {
         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;
@@ -1744,17 +1749,16 @@ var AIDiagram = (function (exports) {
             // 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;
@@ -2178,13 +2182,13 @@ var AIDiagram = (function (exports) {
         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);
@@ -2200,7 +2204,7 @@ var AIDiagram = (function (exports) {
     }
     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,
@@ -2219,7 +2223,7 @@ var AIDiagram = (function (exports) {
             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) {
@@ -2228,7 +2232,7 @@ var AIDiagram = (function (exports) {
         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));
@@ -2238,7 +2242,7 @@ var AIDiagram = (function (exports) {
             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 ───────────────────────────────────────────
@@ -2249,6 +2253,11 @@ var AIDiagram = (function (exports) {
         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),
@@ -2258,7 +2267,7 @@ var AIDiagram = (function (exports) {
         }));
         // 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 ──────────────────────────────────────────
@@ -2284,7 +2293,7 @@ var AIDiagram = (function (exports) {
                 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 ───────────────────────────────────────────────
@@ -2305,7 +2314,7 @@ var AIDiagram = (function (exports) {
                     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 ─────────────────────────────────────
@@ -2314,10 +2323,10 @@ var AIDiagram = (function (exports) {
         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;
@@ -2388,7 +2397,7 @@ var AIDiagram = (function (exports) {
         }
         // 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;
     }
@@ -4854,6 +4863,14 @@ var AIDiagram = (function (exports) {
         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"] ?? "");
@@ -5024,6 +5041,7 @@ var AIDiagram = (function (exports) {
             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;
@@ -5206,6 +5224,8 @@ var AIDiagram = (function (exports) {
                 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,
@@ -5218,14 +5238,26 @@ var AIDiagram = (function (exports) {
                 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);
         }
@@ -5246,6 +5278,8 @@ var AIDiagram = (function (exports) {
             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);
@@ -5286,7 +5320,9 @@ var AIDiagram = (function (exports) {
                 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);
         }
@@ -5295,6 +5331,8 @@ var AIDiagram = (function (exports) {
         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
@@ -5313,18 +5351,19 @@ var AIDiagram = (function (exports) {
             // 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"
@@ -5356,15 +5395,19 @@ var AIDiagram = (function (exports) {
             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,
@@ -5372,7 +5415,8 @@ var AIDiagram = (function (exports) {
                 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, {
@@ -5381,8 +5425,8 @@ var AIDiagram = (function (exports) {
                 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) {
@@ -5411,7 +5455,7 @@ var AIDiagram = (function (exports) {
                     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) => {
@@ -5450,27 +5494,31 @@ var AIDiagram = (function (exports) {
             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],
@@ -5483,7 +5531,8 @@ var AIDiagram = (function (exports) {
                 fill,
                 fillStyle: "solid",
                 stroke: strk,
-                strokeWidth: 1.2,
+                strokeWidth: nStrokeWidth,
+                ...(gs.strokeDash ? { strokeLineDash: gs.strokeDash } : {}),
             }));
             ng.appendChild(rc.polygon([
                 [x + w - fold, y],
@@ -5495,11 +5544,11 @@ var AIDiagram = (function (exports) {
                 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"
@@ -5507,13 +5556,11 @@ var AIDiagram = (function (exports) {
                 : 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);
         }
@@ -5522,13 +5569,27 @@ var AIDiagram = (function (exports) {
         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;
@@ -5551,6 +5612,8 @@ var AIDiagram = (function (exports) {
                 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;
@@ -5640,7 +5703,7 @@ var AIDiagram = (function (exports) {
         });
     }
     // ── 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
@@ -5654,7 +5717,7 @@ var AIDiagram = (function (exports) {
                 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';
@@ -5663,9 +5726,9 @@ var AIDiagram = (function (exports) {
         }
     }
     // ── 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) => {
@@ -5683,6 +5746,11 @@ var AIDiagram = (function (exports) {
         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),
@@ -5695,7 +5763,7 @@ var AIDiagram = (function (exports) {
         // 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';
@@ -5716,7 +5784,8 @@ var AIDiagram = (function (exports) {
                 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 ───────────────────────────────────────────────
@@ -5736,7 +5805,8 @@ var AIDiagram = (function (exports) {
                     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 ─────────────────────────────────────
@@ -5745,10 +5815,10 @@ var AIDiagram = (function (exports) {
         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';
@@ -5825,8 +5895,9 @@ var AIDiagram = (function (exports) {
         }
         // 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;
     }
 
     // ============================================================
@@ -5839,6 +5910,14 @@ var AIDiagram = (function (exports) {
             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'] ?? '');
@@ -5956,6 +6035,7 @@ var AIDiagram = (function (exports) {
             ...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;
@@ -6091,6 +6171,8 @@ var AIDiagram = (function (exports) {
             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),
@@ -6099,16 +6181,21 @@ var AIDiagram = (function (exports) {
                 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) {
@@ -6120,6 +6207,8 @@ var AIDiagram = (function (exports) {
             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;
@@ -6148,17 +6237,22 @@ var AIDiagram = (function (exports) {
                 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,
@@ -6172,18 +6266,19 @@ var AIDiagram = (function (exports) {
             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
@@ -6194,6 +6289,8 @@ var AIDiagram = (function (exports) {
             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) {
@@ -6203,25 +6300,28 @@ var AIDiagram = (function (exports) {
             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, {
@@ -6234,7 +6334,7 @@ var AIDiagram = (function (exports) {
                 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;
@@ -6255,63 +6355,87 @@ var AIDiagram = (function (exports) {
                 });
                 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;
@@ -6329,14 +6453,29 @@ var AIDiagram = (function (exports) {
                 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';
@@ -6344,25 +6483,25 @@ var AIDiagram = (function (exports) {
                         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) {
@@ -6400,6 +6539,7 @@ var AIDiagram = (function (exports) {
     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);
@@ -6411,6 +6551,7 @@ var AIDiagram = (function (exports) {
             getTableEl(svg, target) ??
             getNoteEl(svg, target) ??
             getChartEl(svg, target) ??
+            getMarkdownEl(svg, target) ??
             null);
     }
     function pathLength(p) {
@@ -6421,6 +6562,15 @@ var AIDiagram = (function (exports) {
             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) {
@@ -6528,32 +6678,39 @@ var AIDiagram = (function (exports) {
         });
     }
     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);
         }));
     }
@@ -6577,6 +6734,7 @@ var AIDiagram = (function (exports) {
             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;
@@ -6597,6 +6755,10 @@ var AIDiagram = (function (exports) {
                     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();
         }
@@ -6768,7 +6930,24 @@ var AIDiagram = (function (exports) {
                     });
                 }
             });
-            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 = "";
@@ -6946,6 +7125,9 @@ var AIDiagram = (function (exports) {
                     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;
             }
@@ -6966,6 +7148,8 @@ var AIDiagram = (function (exports) {
                     tableEl.classList.remove("gg-hidden");
                     prepareForDraw(tableEl);
                     animateShapeDraw(tableEl, 500, 40);
+                    const tablePathCount = tableEl.querySelectorAll('path').length;
+                    clearDashOverridesAfter(tableEl, tablePathCount * 40 + 500 + 120);
                 }
                 return;
             }
@@ -6986,6 +7170,8 @@ var AIDiagram = (function (exports) {
                     noteEl.classList.remove("gg-hidden");
                     prepareForDraw(noteEl);
                     animateShapeDraw(noteEl, 420, 55);
+                    const notePathCount = noteEl.querySelectorAll('path').length;
+                    clearDashOverridesAfter(noteEl, notePathCount * 55 + 420 + 120);
                 }
                 return;
             }
@@ -7013,6 +7199,28 @@ var AIDiagram = (function (exports) {
                 }
                 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)
@@ -7026,14 +7234,16 @@ var AIDiagram = (function (exports) {
                 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 ───────────────────────────────────────────
@@ -7061,10 +7271,10 @@ var AIDiagram = (function (exports) {
                 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;
                 });
@@ -7072,22 +7282,24 @@ var AIDiagram = (function (exports) {
             }
             // 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;
@@ -7098,9 +7310,10 @@ var AIDiagram = (function (exports) {
 .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 {
@@ -7109,7 +7322,8 @@ var AIDiagram = (function (exports) {
 }
 
 /* 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; }
@@ -7118,6 +7332,7 @@ var AIDiagram = (function (exports) {
 .tg.gg-hidden  { opacity: 0; }
 .ntg.gg-hidden { opacity: 0; }
 .cg.gg-hidden  { opacity: 0; }
+.mdg.gg-hidden { opacity: 0; }
 `;
 
     // ============================================================