sketchmark 0.1.1 → 0.1.3

package/dist/sketchmark.iife.js

@@ -25,6 +25,7 @@ var AIDiagram = (function (exports) {
         "step",
         "config",
         "theme",
+        "bare",
         "bar-chart",
         "line-chart",
         "pie-chart",
@@ -64,6 +65,7 @@ var AIDiagram = (function (exports) {
         "dag",
         "tree",
         "force",
+        "markdown",
     ]);
     const ARROW_PATTERNS = ["<-->", "<->", "-->", "<--", "->", "<-", "---", "--"];
     // Characters that can start an arrow pattern — used to decide whether a '-'
@@ -101,6 +103,23 @@ var AIDiagram = (function (exports) {
                 i++;
                 continue;
             }
+            if (ch === '"' && peek(1) === '"' && peek(2) === '"') {
+                i += 3; // skip opening """
+                let raw = "";
+                while (i < src.length) {
+                    if (src[i] === '"' && src[i + 1] === '"' && src[i + 2] === '"') {
+                        i += 3; // skip closing """
+                        break;
+                    }
+                    if (src[i] === "\n") {
+                        line++;
+                        lineStart = i + 1;
+                    }
+                    raw += src[i++];
+                }
+                add("STRING_BLOCK", raw);
+                continue;
+            }
             // Strings
             if (ch === '"' || ch === "'") {
                 const q = ch;
@@ -251,6 +270,18 @@ var AIDiagram = (function (exports) {
             s.fontSize = parseFloat(p["font-size"]);
         if (p["font-weight"])
             s.fontWeight = p["font-weight"];
+        if (p["text-align"])
+            s.textAlign = p["text-align"];
+        if (p.padding)
+            s.padding = parseFloat(p.padding);
+        if (p["vertical-align"])
+            s.verticalAlign = p["vertical-align"];
+        if (p["line-height"])
+            s.lineHeight = parseFloat(p["line-height"]);
+        if (p["letter-spacing"])
+            s.letterSpacing = parseFloat(p["letter-spacing"]);
+        if (p.font)
+            s.font = p.font;
         if (p["dash"]) {
             const parts = p["dash"]
                 .split(",")
@@ -288,6 +319,7 @@ var AIDiagram = (function (exports) {
             notes: [],
             charts: [],
             tables: [],
+            markdowns: [],
             styles: {},
             themes: {},
             config: {},
@@ -298,6 +330,7 @@ var AIDiagram = (function (exports) {
         const noteIds = new Set();
         const chartIds = new Set();
         const groupIds = new Set();
+        const markdownIds = new Set();
         let i = 0;
         const cur = () => flat[i] ?? flat[flat.length - 1];
         const peek1 = () => flat[i + 1] ?? flat[flat.length - 1];
@@ -477,6 +510,8 @@ var AIDiagram = (function (exports) {
                 label: rawLabel.replace(/\\n/g, "\n"),
                 theme: props.theme,
                 style: propsToStyle(props),
+                ...(props.width ? { width: parseFloat(props.width) } : {}),
+                ...(props.height ? { height: parseFloat(props.height) } : {}),
             };
         }
         // ── parseGroup ───────────────────────────────────────────
@@ -509,7 +544,7 @@ var AIDiagram = (function (exports) {
             const group = {
                 kind: "group",
                 id,
-                label: props.label ?? id,
+                label: props.label ?? "",
                 children: [],
                 layout: props.layout,
                 columns: props.columns !== undefined ? parseInt(props.columns, 10) : undefined,
@@ -535,8 +570,18 @@ var AIDiagram = (function (exports) {
                     break;
                 const v = cur().value;
                 // ── Nested group ──────────────────────────────────
-                if (v === "group") {
+                if (v === "group" || v === "bare") {
+                    const isBare = v === "bare";
                     const nested = parseGroup();
+                    if (isBare) {
+                        nested.label = "";
+                        nested.style = {
+                            ...nested.style,
+                            fill: nested.style?.fill ?? "none",
+                            stroke: nested.style?.stroke ?? "none",
+                            strokeWidth: nested.style?.strokeWidth ?? 0,
+                        };
+                    }
                     ast.groups.push(nested);
                     groupIds.add(nested.id);
                     group.children.push({ kind: "group", id: nested.id });
@@ -558,6 +603,21 @@ var AIDiagram = (function (exports) {
                     group.children.push({ kind: "note", id: note.id });
                     continue;
                 }
+                // ── Markdown ───────────────────────────────────────
+                if (v === "markdown") {
+                    const md = parseMarkdown(id);
+                    ast.markdowns.push(md);
+                    markdownIds.add(md.id);
+                    group.children.push({ kind: "markdown", id: md.id });
+                    continue;
+                }
+                if (v === "bare") {
+                    // treat exactly like 'group' but inject defaults
+                    const grp = parseGroup(); // reuse parseGroup
+                    grp.label = "";
+                    grp.style = { ...grp.style, stroke: "none", fill: "none" };
+                    // rest is identical to group handling
+                }
                 // ── Chart ──────────────────────────────────────────
                 if (CHART_TYPES.includes(v)) {
                     const chart = parseChart(v);
@@ -601,71 +661,71 @@ var AIDiagram = (function (exports) {
         function parseStep() {
             skip();
             const toks = lineTokens();
-            const action = (toks[0]?.value ?? 'highlight');
-            let target = toks[1]?.value ?? '';
-            if (toks[2]?.type === 'ARROW' && toks[3]) {
+            const action = (toks[0]?.value ?? "highlight");
+            let target = toks[1]?.value ?? "";
+            if (toks[2]?.type === "ARROW" && toks[3]) {
                 target = `${toks[1].value}${toks[2].value}${toks[3].value}`;
             }
-            const step = { kind: 'step', action, target };
+            const step = { kind: "step", action, target };
             for (let j = 2; j < toks.length; j++) {
                 const k = toks[j]?.value;
                 const eq = toks[j + 1];
                 const vt = toks[j + 2];
                 // key=value form
-                if (eq?.type === 'EQUALS' && vt) {
-                    if (k === 'dx') {
+                if (eq?.type === "EQUALS" && vt) {
+                    if (k === "dx") {
                         step.dx = parseFloat(vt.value);
                         j += 2;
                         continue;
                     }
-                    if (k === 'dy') {
+                    if (k === "dy") {
                         step.dy = parseFloat(vt.value);
                         j += 2;
                         continue;
                     }
-                    if (k === 'duration') {
+                    if (k === "duration") {
                         step.duration = parseFloat(vt.value);
                         j += 2;
                         continue;
                     }
-                    if (k === 'delay') {
+                    if (k === "delay") {
                         step.delay = parseFloat(vt.value);
                         j += 2;
                         continue;
                     }
-                    if (k === 'factor') {
+                    if (k === "factor") {
                         step.factor = parseFloat(vt.value);
                         j += 2;
                         continue;
                     }
-                    if (k === 'deg') {
+                    if (k === "deg") {
                         step.deg = parseFloat(vt.value);
                         j += 2;
                         continue;
                     }
-                    if (k === 'fill') {
+                    if (k === "fill") {
                         step.value = vt.value;
                         j += 2;
                         continue;
                     }
-                    if (k === 'color') {
+                    if (k === "color") {
                         step.value = vt.value;
                         j += 2;
                         continue;
                     }
                 }
                 // bare key value (legacy)
-                if (k === 'delay' && eq?.type === 'NUMBER') {
+                if (k === "delay" && eq?.type === "NUMBER") {
                     step.delay = parseFloat(eq.value);
                     j++;
                     continue;
                 }
-                if (k === 'duration' && eq?.type === 'NUMBER') {
+                if (k === "duration" && eq?.type === "NUMBER") {
                     step.duration = parseFloat(eq.value);
                     j++;
                     continue;
                 }
-                if (k === 'trigger') {
+                if (k === "trigger") {
                     step.trigger = eq?.value;
                     j++;
                     continue;
@@ -865,6 +925,40 @@ var AIDiagram = (function (exports) {
                 skip();
             return table;
         }
+        // ── parseMarkdown ─────────────────────────────────────────
+        function parseMarkdown(groupId) {
+            skip(); // 'markdown'
+            const toks = lineTokens();
+            let id = groupId ? groupId + "_" + uid("md") : uid("md");
+            if (toks[0])
+                id = toks[0].value;
+            const props = {};
+            let j = 1;
+            while (j < toks.length - 1) {
+                const k = toks[j], eq = toks[j + 1];
+                if (eq?.type === "EQUALS" && j + 2 < toks.length) {
+                    props[k.value] = toks[j + 2].value;
+                    j += 3;
+                }
+                else
+                    j++;
+            }
+            skipNL();
+            let content = "";
+            if (cur().type === "STRING_BLOCK") {
+                content = cur().value;
+                skip();
+            }
+            return {
+                kind: "markdown",
+                id,
+                content: content.trim(),
+                width: props.width ? parseFloat(props.width) : undefined,
+                height: props.height ? parseFloat(props.height) : undefined,
+                theme: props.theme,
+                style: propsToStyle(props),
+            };
+        }
         // ── Main parse loop ─────────────────────────────────────
         skipNL();
         if (cur().value === "diagram")
@@ -978,8 +1072,18 @@ var AIDiagram = (function (exports) {
                 continue;
             }
             // group
-            if (v === "group") {
+            if (v === "group" || v === "bare") {
+                const isBare = v === "bare";
                 const grp = parseGroup();
+                if (isBare) {
+                    grp.label = "";
+                    grp.style = {
+                        ...grp.style,
+                        fill: grp.style?.fill ?? "none",
+                        stroke: grp.style?.stroke ?? "none",
+                        strokeWidth: grp.style?.strokeWidth ?? 0,
+                    };
+                }
                 ast.groups.push(grp);
                 groupIds.add(grp.id);
                 ast.rootOrder.push({ kind: "group", id: grp.id });
@@ -1014,6 +1118,13 @@ var AIDiagram = (function (exports) {
                 ast.rootOrder.push({ kind: "chart", id: chart.id }); // ← ADD
                 continue;
             }
+            if (v === "markdown") {
+                const md = parseMarkdown();
+                ast.markdowns.push(md);
+                markdownIds.add(md.id);
+                ast.rootOrder.push({ kind: "markdown", id: md.id });
+                continue;
+            }
             // edge:  A -> B  (MUST come before shape check)
             if (t.type === "IDENT" || t.type === "STRING" || t.type === "KEYWORD") {
                 const nextTok = flat[i + 1];
@@ -1063,11 +1174,94 @@ var AIDiagram = (function (exports) {
                 node.style = { ...ast.styles[node.id], ...node.style };
             }
         }
-        console.log("[parse] charts:", ast.charts.map((c) => c.id));
-        console.log("[parse] rootOrder:", ast.rootOrder.map((r) => r.kind + ":" + r.id));
         return ast;
     }
 
+    // ============================================================
+    // sketchmark — Markdown inline parser
+    // Supports: # h1  ## h2  ### h3  **bold**  *italic*  blank lines
+    // ============================================================
+    // ── Font sizes per line kind ──────────────────────────────
+    const LINE_FONT_SIZE = {
+        h1: 40,
+        h2: 28,
+        h3: 20,
+        p: 15,
+        blank: 0,
+    };
+    const LINE_FONT_WEIGHT = {
+        h1: 700,
+        h2: 600,
+        h3: 600,
+        p: 400,
+        blank: 400,
+    };
+    // Spacing below each line kind (px)
+    const LINE_SPACING = {
+        h1: 52,
+        h2: 38,
+        h3: 28,
+        p: 22,
+        blank: 10,
+    };
+    // ── Parse a full markdown string into lines ───────────────
+    function parseMarkdownContent(content) {
+        const raw = content.split('\n');
+        const lines = [];
+        for (const line of raw) {
+            const t = line.trim();
+            if (!t) {
+                lines.push({ kind: 'blank', runs: [] });
+                continue;
+            }
+            if (t.startsWith('### ')) {
+                lines.push({ kind: 'h3', runs: parseInline(t.slice(4)) });
+            }
+            else if (t.startsWith('## ')) {
+                lines.push({ kind: 'h2', runs: parseInline(t.slice(3)) });
+            }
+            else if (t.startsWith('# ')) {
+                lines.push({ kind: 'h1', runs: parseInline(t.slice(2)) });
+            }
+            else {
+                lines.push({ kind: 'p', runs: parseInline(t) });
+            }
+        }
+        // strip leading/trailing blank lines
+        while (lines.length && lines[0].kind === 'blank')
+            lines.shift();
+        while (lines.length && lines[lines.length - 1].kind === 'blank')
+            lines.pop();
+        return lines;
+    }
+    // ── Parse inline bold/italic spans ───────────────────────
+    function parseInline(text) {
+        const runs = [];
+        // Order matters: check ** before *
+        const re = /(\*\*(.+?)\*\*|\*(.+?)\*|[^*]+)/g;
+        let m;
+        while ((m = re.exec(text)) !== null) {
+            if (m[0].startsWith('**')) {
+                runs.push({ text: m[2], bold: true });
+            }
+            else if (m[0].startsWith('*')) {
+                runs.push({ text: m[3], italic: true });
+            }
+            else {
+                if (m[0])
+                    runs.push({ text: m[0] });
+            }
+        }
+        return runs;
+    }
+    // ── Calculate natural height of a parsed block ────────────
+    function calcMarkdownHeight(lines, pad = 16) {
+        let h = pad * 2; // top + bottom
+        for (const line of lines)
+            h += LINE_SPACING[line.kind];
+        return h;
+    }
+
     // ============================================================
     // sketchmark — Scene Graph
     // ============================================================
@@ -1140,6 +1334,8 @@ var AIDiagram = (function (exports) {
                 y: 0,
                 w: 0,
                 h: 0,
+                width: n.width,
+                height: n.height,
             };
         });
         const charts = ast.charts.map((c) => {
@@ -1156,6 +1352,18 @@ var AIDiagram = (function (exports) {
                 h: c.height ?? 240,
             };
         });
+        const markdowns = (ast.markdowns ?? []).map(m => {
+            const themeStyle = m.theme ? (ast.themes[m.theme] ?? {}) : {};
+            return {
+                id: m.id,
+                content: m.content,
+                lines: parseMarkdownContent(m.content),
+                style: { ...themeStyle, ...m.style },
+                width: m.width,
+                height: m.height,
+                x: 0, y: 0, w: 0, h: 0,
+            };
+        });
         // Set parentId for nested groups
         for (const g of groups) {
             for (const child of g.children) {
@@ -1186,6 +1394,7 @@ var AIDiagram = (function (exports) {
             tables,
             notes,
             charts,
+            markdowns,
             animation: { steps: ast.steps, currentStep: -1 },
             styles: ast.styles,
             config: ast.config,
@@ -1210,6 +1419,9 @@ var AIDiagram = (function (exports) {
     function chartMap(sg) {
         return new Map(sg.charts.map((c) => [c.id, c]));
     }
+    function markdownMap(sg) {
+        return new Map((sg.markdowns ?? []).map(m => [m.id, m]));
+    }
 
     // ============================================================
     // sketchmark — Layout Engine  (Flexbox-style, recursive)
@@ -1250,30 +1462,40 @@ var AIDiagram = (function (exports) {
             n.h = n.height;
         const labelW = Math.round(n.label.length * FONT_PX_PER_CHAR + BASE_PAD);
         switch (n.shape) {
-            case 'circle':
+            case "circle":
                 n.w = n.w || Math.max(84, Math.min(MAX_W, labelW));
                 n.h = n.h || n.w;
                 break;
-            case 'diamond':
+            case "diamond":
                 n.w = n.w || Math.max(130, Math.min(MAX_W, labelW + 30));
                 n.h = n.h || Math.max(62, n.w * 0.46);
                 break;
-            case 'hexagon':
+            case "hexagon":
                 n.w = n.w || Math.max(126, Math.min(MAX_W, labelW + 20));
                 n.h = n.h || Math.max(54, n.w * 0.44);
                 break;
-            case 'triangle':
+            case "triangle":
                 n.w = n.w || Math.max(108, Math.min(MAX_W, labelW + 10));
-                n.h = n.h || Math.max(64, n.w * 0.60);
+                n.h = n.h || Math.max(64, n.w * 0.6);
                 break;
-            case 'cylinder':
+            case "cylinder":
                 n.w = n.w || Math.max(MIN_W, Math.min(MAX_W, labelW));
                 n.h = n.h || 66;
                 break;
-            case 'parallelogram':
+            case "parallelogram":
                 n.w = n.w || Math.max(MIN_W, Math.min(MAX_W, labelW + 28));
                 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);
+                break;
+            }
             default:
                 n.w = n.w || Math.max(MIN_W, Math.min(MAX_W, labelW));
                 n.h = n.h || 52;
@@ -1281,9 +1503,13 @@ var AIDiagram = (function (exports) {
         }
     }
     function sizeNote(n) {
-        const maxChars = Math.max(...n.lines.map(l => l.length));
+        const maxChars = Math.max(...n.lines.map((l) => l.length));
         n.w = Math.max(120, Math.ceil(maxChars * NOTE_FONT) + NOTE_PAD_X * 2);
         n.h = n.lines.length * NOTE_LINE_H + NOTE_PAD_Y * 2;
+        if (n.width && n.w < n.width)
+            n.w = n.width; // ← add
+        if (n.height && n.h < n.height)
+            n.h = n.height; // ← add
     }
     // ── Table auto-sizing ─────────────────────────────────────
     function sizeTable(t) {
@@ -1293,7 +1519,7 @@ var AIDiagram = (function (exports) {
             t.h = labelH + rowH;
             return;
         }
-        const numCols = Math.max(...rows.map(r => r.cells.length));
+        const numCols = Math.max(...rows.map((r) => r.cells.length));
         const colW = Array(numCols).fill(MIN_COL_W);
         for (const row of rows) {
             row.cells.forEach((cell, i) => {
@@ -1302,110 +1528,128 @@ var AIDiagram = (function (exports) {
         }
         t.colWidths = colW;
         t.w = colW.reduce((s, w) => s + w, 0);
-        const nHeader = rows.filter(r => r.kind === 'header').length;
-        const nData = rows.filter(r => r.kind === 'data').length;
+        const nHeader = rows.filter((r) => r.kind === "header").length;
+        const nData = rows.filter((r) => r.kind === "data").length;
         t.h = labelH + nHeader * headerH + nData * rowH;
     }
     function sizeChart(c) {
         c.w = c.w || 320;
         c.h = c.h || 240;
     }
+    function sizeMarkdown(m) {
+        const pad = Number(m.style?.padding ?? 16);
+        m.w = m.width ?? 400;
+        m.h = m.height ?? calcMarkdownHeight(m.lines, pad);
+    }
     // ── Item size helpers ─────────────────────────────────────
-    function iW(r, nm, gm, tm, ntm, cm) {
-        if (r.kind === 'node')
+    function iW(r, nm, gm, tm, ntm, cm, mdm) {
+        if (r.kind === "node")
             return nm.get(r.id).w;
-        if (r.kind === 'table')
+        if (r.kind === "table")
             return tm.get(r.id).w;
-        if (r.kind === 'note')
+        if (r.kind === "note")
             return ntm.get(r.id).w;
-        if (r.kind === 'chart')
+        if (r.kind === "chart")
             return cm.get(r.id).w;
+        if (r.kind === "markdown")
+            return mdm.get(r.id).w;
         return gm.get(r.id).w;
     }
-    function iH(r, nm, gm, tm, ntm, cm) {
-        if (r.kind === 'node')
+    function iH(r, nm, gm, tm, ntm, cm, mdm) {
+        if (r.kind === "node")
             return nm.get(r.id).h;
-        if (r.kind === 'table')
+        if (r.kind === "table")
             return tm.get(r.id).h;
-        if (r.kind === 'note')
+        if (r.kind === "note")
             return ntm.get(r.id).h;
-        if (r.kind === 'chart')
+        if (r.kind === "chart")
             return cm.get(r.id).h;
+        if (r.kind === "markdown")
+            return mdm.get(r.id).h;
         return gm.get(r.id).h;
     }
-    function setPos(r, x, y, nm, gm, tm, ntm, cm) {
-        if (r.kind === 'node') {
+    function setPos(r, x, y, nm, gm, tm, ntm, cm, mdm) {
+        if (r.kind === "node") {
             const n = nm.get(r.id);
             n.x = Math.round(x);
             n.y = Math.round(y);
             return;
         }
-        if (r.kind === 'table') {
+        if (r.kind === "table") {
             const t = tm.get(r.id);
             t.x = Math.round(x);
             t.y = Math.round(y);
             return;
         }
-        if (r.kind === 'note') {
+        if (r.kind === "note") {
             const nt = ntm.get(r.id);
             nt.x = Math.round(x);
             nt.y = Math.round(y);
             return;
         }
-        if (r.kind === 'chart') {
+        if (r.kind === "chart") {
             const c = cm.get(r.id);
             c.x = Math.round(x);
             c.y = Math.round(y);
             return;
         }
+        if (r.kind === "markdown") {
+            const md = mdm.get(r.id);
+            md.x = Math.round(x);
+            md.y = Math.round(y);
+            return;
+        }
         const g = gm.get(r.id);
         g.x = Math.round(x);
         g.y = Math.round(y);
     }
     // ── Pass 1: Measure (bottom-up) ───────────────────────────
     // Recursively computes w, h for a group from its children's sizes.
-    function measure(g, nm, gm, tm, ntm, cm) {
+    function measure(g, nm, gm, tm, ntm, cm, mdm) {
         // Recurse into nested groups first; size tables before reading their dims
         for (const r of g.children) {
-            if (r.kind === 'group')
-                measure(gm.get(r.id), nm, gm, tm, ntm, cm);
-            if (r.kind === 'table')
+            if (r.kind === "group")
+                measure(gm.get(r.id), nm, gm, tm, ntm, cm, mdm);
+            if (r.kind === "table")
                 sizeTable(tm.get(r.id));
-            if (r.kind === 'note')
+            if (r.kind === "note")
                 sizeNote(ntm.get(r.id));
-            if (r.kind === 'chart')
+            if (r.kind === "chart")
                 sizeChart(cm.get(r.id));
+            if (r.kind === "markdown")
+                sizeMarkdown(mdm.get(r.id));
         }
         const { padding: pad, gap, columns, layout } = g;
         const kids = g.children;
+        const labelH = g.label ? GROUP_LABEL_H : 0;
         if (!kids.length) {
             g.w = pad * 2;
-            g.h = pad * 2 + GROUP_LABEL_H;
+            g.h = pad * 2 + labelH;
             if (g.width && g.w < g.width)
                 g.w = g.width;
             if (g.height && g.h < g.height)
                 g.h = g.height;
             return;
         }
-        const ws = kids.map(r => iW(r, nm, gm, tm, ntm, cm));
-        const hs = kids.map(r => iH(r, nm, gm, tm, ntm, cm));
+        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 n = kids.length;
-        if (layout === 'row') {
+        if (layout === "row") {
             g.w = ws.reduce((s, w) => s + w, 0) + gap * (n - 1) + pad * 2;
-            g.h = Math.max(...hs) + pad * 2 + GROUP_LABEL_H;
+            g.h = Math.max(...hs) + pad * 2 + labelH;
         }
-        else if (layout === 'grid') {
+        else if (layout === "grid") {
             const cols = Math.max(1, columns);
             const rows = Math.ceil(n / cols);
             const cellW = Math.max(...ws);
             const cellH = Math.max(...hs);
             g.w = cols * cellW + (cols - 1) * gap + pad * 2;
-            g.h = rows * cellH + (rows - 1) * gap + pad * 2 + GROUP_LABEL_H;
+            g.h = rows * cellH + (rows - 1) * gap + pad * 2 + labelH;
         }
         else {
             // column (default)
             g.w = Math.max(...ws) + pad * 2;
-            g.h = hs.reduce((s, h) => s + h, 0) + gap * (n - 1) + pad * 2 + GROUP_LABEL_H;
+            g.h = hs.reduce((s, h) => s + h, 0) + gap * (n - 1) + pad * 2 + labelH;
         }
         // Clamp to minWidth / minHeight — this is what gives distribute() free
         // space to work with for justify=center/end/space-between/space-around
@@ -1420,21 +1664,32 @@ var AIDiagram = (function (exports) {
         const totalSize = sizes.reduce((s, v) => s + v, 0);
         const gapCount = n - 1;
         switch (justify) {
-            case 'center': {
+            case "center": {
                 const total = totalSize + gap * gapCount;
-                return { start: Math.max(0, (contentSize - total) / 2), gaps: Array(gapCount).fill(gap) };
+                return {
+                    start: Math.max(0, (contentSize - total) / 2),
+                    gaps: Array(gapCount).fill(gap),
+                };
             }
-            case 'end': {
+            case "end": {
                 const total = totalSize + gap * gapCount;
-                return { start: Math.max(0, contentSize - total), gaps: Array(gapCount).fill(gap) };
+                return {
+                    start: Math.max(0, contentSize - total),
+                    gaps: Array(gapCount).fill(gap),
+                };
             }
-            case 'space-between': {
-                const g2 = gapCount > 0 ? Math.max(gap, (contentSize - totalSize) / gapCount) : gap;
+            case "space-between": {
+                const g2 = gapCount > 0
+                    ? Math.max(gap, (contentSize - totalSize) / gapCount)
+                    : gap;
                 return { start: 0, gaps: Array(gapCount).fill(g2) };
             }
-            case 'space-around': {
+            case "space-around": {
                 const space = n > 0 ? (contentSize - totalSize) / n : gap;
-                return { start: Math.max(0, space / 2), gaps: Array(gapCount).fill(Math.max(gap, space)) };
+                return {
+                    start: Math.max(0, space / 2),
+                    gaps: Array(gapCount).fill(Math.max(gap, space)),
+                };
             }
             default: // start
                 return { start: 0, gaps: Array(gapCount).fill(gap) };
@@ -1442,70 +1697,73 @@ var AIDiagram = (function (exports) {
     }
     // ── Pass 2: Place (top-down) ──────────────────────────────
     // Assigns x, y to each child. Assumes g.x / g.y already set by parent.
-    function place(g, nm, gm, tm, ntm, cm) {
+    function place(g, nm, gm, tm, ntm, cm, mdm) {
         const { padding: pad, gap, columns, layout, align, justify } = g;
+        const labelH = g.label ? GROUP_LABEL_H : 0;
         const contentX = g.x + pad;
-        const contentY = g.y + GROUP_LABEL_H + pad;
+        const contentY = g.y + labelH + pad;
         const contentW = g.w - pad * 2;
-        const contentH = g.h - pad * 2 - GROUP_LABEL_H;
+        const contentH = g.h - pad * 2 - labelH;
         const kids = g.children;
         if (!kids.length)
             return;
-        if (layout === 'row') {
-            const ws = kids.map(r => iW(r, nm, gm, tm, ntm, cm));
-            const hs = kids.map(r => iH(r, nm, gm, tm, ntm, cm));
+        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':
+                    case "center":
                         y = contentY + (maxH - hs[i]) / 2;
                         break;
-                    case 'end':
+                    case "end":
                         y = contentY + maxH - hs[i];
                         break;
-                    default: y = contentY;
+                    default:
+                        y = contentY;
                 }
-                setPos(kids[i], x, y, nm, gm, tm, ntm, cm);
+                setPos(kids[i], x, y, nm, gm, tm, ntm, cm, mdm);
                 x += ws[i] + (i < gaps.length ? gaps[i] : 0);
             }
         }
-        else if (layout === 'grid') {
+        else if (layout === "grid") {
             const cols = Math.max(1, columns);
-            const cellW = Math.max(...kids.map(r => iW(r, nm, gm, tm, ntm, cm)));
-            const cellH = Math.max(...kids.map(r => iH(r, nm, gm, tm, ntm, cm)));
+            const cellW = Math.max(...kids.map((r) => iW(r, nm, gm, tm, ntm, cm, mdm)));
+            const cellH = Math.max(...kids.map((r) => iH(r, nm, gm, tm, ntm, cm, mdm)));
             kids.forEach((ref, i) => {
-                setPos(ref, contentX + (i % cols) * (cellW + gap), contentY + Math.floor(i / cols) * (cellH + gap), nm, gm, tm, ntm, cm);
+                setPos(ref, contentX + (i % cols) * (cellW + gap), contentY + Math.floor(i / cols) * (cellH + gap), nm, gm, tm, ntm, cm, mdm);
             });
         }
         else {
             // column (default)
-            const ws = kids.map(r => iW(r, nm, gm, tm, ntm, cm));
-            const hs = kids.map(r => iH(r, nm, gm, tm, ntm, cm));
+            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':
+                    case "center":
                         x = contentX + (maxW - ws[i]) / 2;
                         break;
-                    case 'end':
+                    case "end":
                         x = contentX + maxW - ws[i];
                         break;
-                    default: x = contentX;
+                    default:
+                        x = contentX;
                 }
-                setPos(kids[i], x, y, nm, gm, tm, ntm, cm);
+                setPos(kids[i], x, y, nm, gm, tm, ntm, cm, mdm);
                 y += hs[i] + (i < gaps.length ? gaps[i] : 0);
             }
         }
         // Recurse into nested groups
         for (const r of kids) {
-            if (r.kind === 'group')
-                place(gm.get(r.id), nm, gm, tm, ntm, cm);
+            if (r.kind === "group")
+                place(gm.get(r.id), nm, gm, tm, ntm, cm, mdm);
         }
     }
     // ── Edge routing ──────────────────────────────────────────
@@ -1515,9 +1773,9 @@ var AIDiagram = (function (exports) {
         const dx = ox - cx, dy = oy - cy;
         if (Math.abs(dx) < 0.01 && Math.abs(dy) < 0.01)
             return [cx, cy];
-        if (n.shape === 'circle') {
+        if (n.shape === "circle") {
             const r = n.w * 0.44, len = Math.sqrt(dx * dx + dy * dy);
-            return [cx + dx / len * r, cy + dy / len * r];
+            return [cx + (dx / len) * r, cy + (dy / len) * r];
         }
         const hw = n.w / 2 - 2, hh = n.h / 2 - 2;
         const tx = Math.abs(dx) > 0.01 ? hw / Math.abs(dx) : 1e9;
@@ -1562,9 +1820,12 @@ var AIDiagram = (function (exports) {
         }
         function connPt(src, dstCX, dstCY) {
             // SceneNode has a .shape field; use the existing connPoint for it
-            if ('shape' in src && src.shape) {
+            if ("shape" in src && src.shape) {
                 return connPoint(src, {
-                    x: dstCX - 1, y: dstCY - 1, w: 2, h: 2});
+                    x: dstCX - 1,
+                    y: dstCY - 1,
+                    w: 2,
+                    h: 2});
             }
             return rectConnPoint$2(src.x, src.y, src.w, src.h, dstCX, dstCY);
         }
@@ -1577,84 +1838,84 @@ var AIDiagram = (function (exports) {
             }
             const dstCX = dst.x + dst.w / 2, dstCY = dst.y + dst.h / 2;
             const srcCX = src.x + src.w / 2, srcCY = src.y + src.h / 2;
-            e.points = [
-                connPt(src, dstCX, dstCY),
-                connPt(dst, srcCX, srcCY),
-            ];
+            e.points = [connPt(src, dstCX, dstCY), connPt(dst, srcCX, srcCY)];
         }
     }
     function computeBounds(sg, margin) {
         const allX = [
-            ...sg.nodes.map(n => n.x + n.w),
-            ...sg.groups.filter(g => g.w).map(g => g.x + g.w),
-            ...sg.tables.map(t => t.x + t.w),
-            ...sg.notes.map(n => n.x + n.w),
-            ...sg.charts.map(c => c.x + c.w)
+            ...sg.nodes.map((n) => n.x + n.w),
+            ...sg.groups.filter((g) => g.w).map((g) => g.x + g.w),
+            ...sg.tables.map((t) => t.x + t.w),
+            ...sg.notes.map((n) => n.x + n.w),
+            ...sg.charts.map((c) => c.x + c.w),
+            ...sg.markdowns.map((m) => m.x + m.w),
         ];
         const allY = [
-            ...sg.nodes.map(n => n.y + n.h),
-            ...sg.groups.filter(g => g.h).map(g => g.y + g.h),
-            ...sg.tables.map(t => t.y + t.h),
-            ...sg.notes.map(n => n.y + n.h),
-            ...sg.charts.map(c => c.y + c.h)
+            ...sg.nodes.map((n) => n.y + n.h),
+            ...sg.groups.filter((g) => g.h).map((g) => g.y + g.h),
+            ...sg.tables.map((t) => t.y + t.h),
+            ...sg.notes.map((n) => n.y + n.h),
+            ...sg.charts.map((c) => c.y + c.h),
+            ...sg.markdowns.map((m) => m.y + m.h),
         ];
         sg.width = (allX.length ? Math.max(...allX) : 400) + margin;
         sg.height = (allY.length ? Math.max(...allY) : 300) + margin;
     }
     // ── Public entry point ────────────────────────────────────
     function layout(sg) {
-        const GAP_MAIN = Number(sg.config['gap'] ?? DEFAULT_GAP_MAIN);
-        const MARGIN = Number(sg.config['margin'] ?? DEFAULT_MARGIN);
+        const GAP_MAIN = Number(sg.config["gap"] ?? DEFAULT_GAP_MAIN);
+        const MARGIN = Number(sg.config["margin"] ?? DEFAULT_MARGIN);
         const nm = nodeMap(sg);
         const gm = groupMap(sg);
         const tm = tableMap(sg);
         const ntm = noteMap(sg);
         const cm = chartMap(sg);
-        console.log('[layout] sg.charts:', sg.charts.map(c => c.id));
-        console.log('[layout] sg.rootOrder:', sg.rootOrder.map(r => r.kind + ':' + r.id));
+        const mdm = markdownMap(sg);
         // 1. Size all nodes and tables
         sg.nodes.forEach(sizeNode);
         sg.tables.forEach(sizeTable);
         sg.notes.forEach(sizeNote);
         sg.charts.forEach(sizeChart);
+        sg.markdowns.forEach(sizeMarkdown);
         // src/layout/index.ts — after sg.charts.forEach(sizeChart);
         // 2. Identify root vs nested items
-        const nestedGroupIds = new Set(sg.groups.flatMap(g => g.children.filter(c => c.kind === 'group').map(c => c.id)));
-        const groupedNodeIds = new Set(sg.groups.flatMap(g => g.children.filter(c => c.kind === 'node').map(c => c.id)));
-        const groupedTableIds = new Set(sg.groups.flatMap(g => g.children.filter(c => c.kind === 'table').map(c => c.id)));
-        const groupedNoteIds = new Set(sg.groups.flatMap(g => g.children.filter(c => c.kind === 'note').map(c => c.id)));
-        const groupedChartIds = new Set(sg.groups.flatMap(g => g.children.filter(c => c.kind === 'chart').map(c => c.id)));
-        const rootGroups = sg.groups.filter(g => !nestedGroupIds.has(g.id));
-        const rootNodes = sg.nodes.filter(n => !groupedNodeIds.has(n.id));
-        const rootTables = sg.tables.filter(t => !groupedTableIds.has(t.id));
-        const rootNotes = sg.notes.filter(n => !groupedNoteIds.has(n.id));
-        const rootCharts = sg.charts.filter(c => !groupedChartIds.has(c.id));
+        const nestedGroupIds = new Set(sg.groups.flatMap((g) => g.children.filter((c) => c.kind === "group").map((c) => c.id)));
+        const groupedNodeIds = new Set(sg.groups.flatMap((g) => g.children.filter((c) => c.kind === "node").map((c) => c.id)));
+        const groupedTableIds = new Set(sg.groups.flatMap((g) => g.children.filter((c) => c.kind === "table").map((c) => c.id)));
+        const groupedNoteIds = new Set(sg.groups.flatMap((g) => g.children.filter((c) => c.kind === "note").map((c) => c.id)));
+        const groupedChartIds = new Set(sg.groups.flatMap((g) => g.children.filter((c) => c.kind === "chart").map((c) => c.id)));
+        const groupedMarkdownIds = new Set(sg.groups.flatMap((g) => g.children.filter((c) => c.kind === "markdown").map((c) => c.id)));
+        const rootGroups = sg.groups.filter((g) => !nestedGroupIds.has(g.id));
+        const rootNodes = sg.nodes.filter((n) => !groupedNodeIds.has(n.id));
+        const rootTables = sg.tables.filter((t) => !groupedTableIds.has(t.id));
+        const rootNotes = sg.notes.filter((n) => !groupedNoteIds.has(n.id));
+        const rootCharts = sg.charts.filter((c) => !groupedChartIds.has(c.id));
+        const rootMarkdowns = sg.markdowns.filter((m) => !groupedMarkdownIds.has(m.id));
         // 3. Measure root groups bottom-up
         for (const g of rootGroups)
-            measure(g, nm, gm, tm, ntm, cm);
+            measure(g, nm, gm, tm, ntm, cm, mdm);
         // 4. Build root order
         //    sg.rootOrder preserves DSL declaration order.
         //    Fall back: groups, then nodes, then tables.
         const rootOrder = sg.rootOrder?.length
             ? sg.rootOrder
             : [
-                ...rootGroups.map(g => ({ kind: 'group', id: g.id })),
-                ...rootNodes.map(n => ({ kind: 'node', id: n.id })),
-                ...rootTables.map(t => ({ kind: 'table', id: t.id })),
-                ...rootNotes.map(n => ({ kind: 'note', id: n.id })),
-                ...rootCharts.map(c => ({ kind: 'chart', id: c.id }))
+                ...rootGroups.map((g) => ({ kind: "group", id: g.id })),
+                ...rootNodes.map((n) => ({ kind: "node", id: n.id })),
+                ...rootTables.map((t) => ({ kind: "table", id: t.id })),
+                ...rootNotes.map((n) => ({ kind: "note", id: n.id })),
+                ...rootCharts.map((c) => ({ kind: "chart", id: c.id })),
+                ...rootMarkdowns.map((m) => ({ kind: "markdown", id: m.id })),
             ];
         // 5. Root-level layout
         //    sg.layout:
         //      'row'    → items flow left to right  (default)
         //      'column' → items flow top to bottom
         //      'grid'   → config columns=N grid
-        const rootLayout = (sg.layout ?? 'row');
-        const rootCols = Number(sg.config['columns'] ?? 1);
-        const useGrid = rootLayout === 'grid' && rootCols > 0;
-        const useColumn = rootLayout === 'column';
-        console.log('[layout] sized charts:', sg.charts.map(c => `${c.id} w=${c.w} h=${c.h}`));
-        console.log('[layout] rootOrder chart refs:', rootOrder.filter(r => r.kind === 'chart'));
+        const rootLayout = (sg.layout ?? "row");
+        const rootCols = Number(sg.config["columns"] ?? 1);
+        const useGrid = rootLayout === "grid" && rootCols > 0;
+        const useColumn = rootLayout === "column";
         if (useGrid) {
             // ── Grid: per-row heights, per-column widths (no wasted space) ──
             const cols = rootCols;
@@ -1665,22 +1926,26 @@ var AIDiagram = (function (exports) {
                 const col = idx % cols;
                 const row = Math.floor(idx / cols);
                 let w = 0, h = 0;
-                if (ref.kind === 'group') {
+                if (ref.kind === "group") {
                     w = gm.get(ref.id).w;
                     h = gm.get(ref.id).h;
                 }
-                else if (ref.kind === 'table') {
+                else if (ref.kind === "table") {
                     w = tm.get(ref.id).w;
                     h = tm.get(ref.id).h;
                 }
-                else if (ref.kind === 'note') {
+                else if (ref.kind === "note") {
                     w = ntm.get(ref.id).w;
                     h = ntm.get(ref.id).h;
                 }
-                else if (ref.kind === 'chart') {
+                else if (ref.kind === "chart") {
                     w = cm.get(ref.id).w;
                     h = cm.get(ref.id).h;
                 }
+                else if (ref.kind === "markdown") {
+                    w = mdm.get(ref.id).w;
+                    h = mdm.get(ref.id).h;
+                }
                 else {
                     w = nm.get(ref.id).w;
                     h = nm.get(ref.id).h;
@@ -1703,22 +1968,26 @@ var AIDiagram = (function (exports) {
             rootOrder.forEach((ref, idx) => {
                 const x = colX[idx % cols];
                 const y = rowY[Math.floor(idx / cols)];
-                if (ref.kind === 'group') {
+                if (ref.kind === "group") {
                     gm.get(ref.id).x = x;
                     gm.get(ref.id).y = y;
                 }
-                else if (ref.kind === 'table') {
+                else if (ref.kind === "table") {
                     tm.get(ref.id).x = x;
                     tm.get(ref.id).y = y;
                 }
-                else if (ref.kind === 'note') {
+                else if (ref.kind === "note") {
                     ntm.get(ref.id).x = x;
                     ntm.get(ref.id).y = y;
                 }
-                else if (ref.kind === 'chart') {
+                else if (ref.kind === "chart") {
                     cm.get(ref.id).x = x;
                     cm.get(ref.id).y = y;
                 }
+                else if (ref.kind === "markdown") {
+                    mdm.get(ref.id).x = x;
+                    mdm.get(ref.id).y = y;
+                }
                 else {
                     nm.get(ref.id).x = x;
                     nm.get(ref.id).y = y;
@@ -1730,44 +1999,52 @@ var AIDiagram = (function (exports) {
             let pos = MARGIN;
             for (const ref of rootOrder) {
                 let w = 0, h = 0;
-                if (ref.kind === 'group') {
+                if (ref.kind === "group") {
                     w = gm.get(ref.id).w;
                     h = gm.get(ref.id).h;
                 }
-                else if (ref.kind === 'table') {
+                else if (ref.kind === "table") {
                     w = tm.get(ref.id).w;
                     h = tm.get(ref.id).h;
                 }
-                else if (ref.kind === 'note') {
+                else if (ref.kind === "note") {
                     w = ntm.get(ref.id).w;
                     h = ntm.get(ref.id).h;
                 }
-                else if (ref.kind === 'chart') {
+                else if (ref.kind === "chart") {
                     w = cm.get(ref.id).w;
                     h = cm.get(ref.id).h;
                 }
+                else if (ref.kind === "markdown") {
+                    w = mdm.get(ref.id).w;
+                    h = mdm.get(ref.id).h;
+                }
                 else {
                     w = nm.get(ref.id).w;
                     h = nm.get(ref.id).h;
                 }
                 const x = useColumn ? MARGIN : pos;
                 const y = useColumn ? pos : MARGIN;
-                if (ref.kind === 'group') {
+                if (ref.kind === "group") {
                     gm.get(ref.id).x = x;
                     gm.get(ref.id).y = y;
                 }
-                else if (ref.kind === 'table') {
+                else if (ref.kind === "table") {
                     tm.get(ref.id).x = x;
                     tm.get(ref.id).y = y;
                 }
-                else if (ref.kind === 'note') {
+                else if (ref.kind === "note") {
                     ntm.get(ref.id).x = x;
                     ntm.get(ref.id).y = y;
                 }
-                else if (ref.kind === 'chart') {
+                else if (ref.kind === "chart") {
                     cm.get(ref.id).x = x;
                     cm.get(ref.id).y = y;
                 }
+                else if (ref.kind === "markdown") {
+                    mdm.get(ref.id).x = x;
+                    mdm.get(ref.id).y = y;
+                }
                 else {
                     nm.get(ref.id).x = x;
                     nm.get(ref.id).y = y;
@@ -1777,10 +2054,9 @@ var AIDiagram = (function (exports) {
         }
         // 6. Place children within each root group (top-down, recursive)
         for (const g of rootGroups)
-            place(g, nm, gm, tm, ntm, cm);
+            place(g, nm, gm, tm, ntm, cm, mdm);
         // 7. Route edges and compute canvas size
         routeEdges(sg);
-        console.log('[layout] chart positions:', sg.charts.map(c => `${c.id} x=${c.x} y=${c.y}`));
         computeBounds(sg, MARGIN);
         return sg;
     }
@@ -2412,6 +2688,83 @@ var AIDiagram = (function (exports) {
     }
     const THEME_NAMES = Object.keys(PALETTES);
 
+    // ============================================================
+    // sketchmark — Font Registry
+    // ============================================================
+    // built-in named fonts — user can reference these by short name
+    const BUILTIN_FONTS = {
+        // hand-drawn
+        caveat: {
+            family: "'Caveat', cursive",
+            url: 'https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&display=swap',
+        },
+        handlee: {
+            family: "'Handlee', cursive",
+            url: 'https://fonts.googleapis.com/css2?family=Handlee&display=swap',
+        },
+        'indie-flower': {
+            family: "'Indie Flower', cursive",
+            url: 'https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap',
+        },
+        'patrick-hand': {
+            family: "'Patrick Hand', cursive",
+            url: 'https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap',
+        },
+        // clean / readable
+        'dm-mono': {
+            family: "'DM Mono', monospace",
+            url: 'https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap',
+        },
+        'jetbrains': {
+            family: "'JetBrains Mono', monospace",
+            url: 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap',
+        },
+        'instrument': {
+            family: "'Instrument Serif', serif",
+            url: 'https://fonts.googleapis.com/css2?family=Instrument+Serif&display=swap',
+        },
+        'playfair': {
+            family: "'Playfair Display', serif",
+            url: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&display=swap',
+        },
+        // system fallbacks (no URL needed)
+        system: { family: 'system-ui, sans-serif' },
+        mono: { family: "'Courier New', monospace" },
+        serif: { family: 'Georgia, serif' },
+    };
+    // default — what renders when no font is specified
+    const DEFAULT_FONT = 'system-ui, sans-serif';
+    // resolve a short name or pass-through a quoted CSS family
+    function resolveFont(nameOrFamily) {
+        const key = nameOrFamily.toLowerCase().trim();
+        if (BUILTIN_FONTS[key])
+            return BUILTIN_FONTS[key].family;
+        return nameOrFamily; // treat as raw CSS font-family
+    }
+    // inject a <link> into <head> for a built-in font (browser only)
+    function loadFont(name) {
+        if (typeof document === 'undefined')
+            return;
+        const key = name.toLowerCase().trim();
+        const def = BUILTIN_FONTS[key];
+        if (!def?.url || def.loaded)
+            return;
+        if (document.querySelector(`link[data-sketchmark-font="${key}"]`))
+            return;
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = def.url;
+        link.setAttribute('data-sketchmark-font', key);
+        document.head.appendChild(link);
+        def.loaded = true;
+    }
+    // user registers their own font (already loaded via CSS/link)
+    function registerFont(name, family, url) {
+        BUILTIN_FONTS[name.toLowerCase()] = { family, url };
+        if (url)
+            loadFont(name);
+    }
+
     // ============================================================
     // sketchmark — SVG Renderer  (rough.js hand-drawn)
     // ============================================================
@@ -2424,17 +2777,93 @@ var AIDiagram = (function (exports) {
         return h;
     }
     const BASE_ROUGH = { roughness: 1.3, bowing: 0.7 };
-    // ── SVG helpers ───────────────────────────────────────────
-    function mkMultilineText(lines, x, cy, // vertical center of the whole block
-    sz = 14, wt = 500, col = "#1a1208", anchor = "middle", lineH = 18) {
+    // ── Small helper: load + resolve font from style or fall back ─────────────
+    function resolveStyleFont$1(style, fallback) {
+        const raw = String(style["font"] ?? "");
+        if (!raw)
+            return fallback;
+        loadFont(raw);
+        return resolveFont(raw);
+    }
+    function wrapText$1(text, maxWidth, fontSize) {
+        const words = text.split(' ');
+        const charsPerPx = fontSize * 0.55; // approximate
+        const maxChars = Math.floor(maxWidth / charsPerPx);
+        const lines = [];
+        let current = '';
+        for (const word of words) {
+            const test = current ? `${current} ${word}` : word;
+            if (test.length > maxChars && current) {
+                lines.push(current);
+                current = word;
+            }
+            else {
+                current = test;
+            }
+        }
+        if (current)
+            lines.push(current);
+        return lines;
+    }
+    // ── SVG text helpers ──────────────────────────────────────────────────────
+    /**
+     * Single-line SVG text element.
+     *
+     * | param         | maps to SVG attr         |
+     * |---------------|--------------------------|
+     * txt             | textContent              |
+     * x, y            | x, y                     |
+     * sz              | font-size                |
+     * wt              | font-weight              |
+     * col             | fill                     |
+     * anchor          | text-anchor              |
+     * font            | font-family              |
+     * letterSpacing   | letter-spacing           |
+     */
+    function mkText(txt, x, y, sz = 14, wt = 500, col = "#1a1208", anchor = "middle", font, letterSpacing) {
+        const t = se("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", font ?? "var(--font-sans, system-ui, sans-serif)");
+        t.setAttribute("font-size", String(sz));
+        t.setAttribute("font-weight", String(wt));
+        t.setAttribute("fill", col);
+        t.setAttribute("pointer-events", "none");
+        t.setAttribute("user-select", "none");
+        if (letterSpacing != null)
+            t.setAttribute("letter-spacing", String(letterSpacing));
+        t.textContent = txt;
+        return t;
+    }
+    /**
+     * Multi-line SVG text element using <tspan> per line.
+     *
+     * | param         | maps to SVG attr         |
+     * |---------------|--------------------------|
+     * lines           | one <tspan> each         |
+     * x               | tspan x                  |
+     * cy              | vertical centre of block |
+     * sz              | font-size                |
+     * wt              | font-weight              |
+     * col             | fill                     |
+     * anchor          | text-anchor              |
+     * lineH           | dy between tspans (px)   |
+     * font            | font-family              |
+     * letterSpacing   | letter-spacing           |
+     */
+    function mkMultilineText(lines, x, cy, sz = 14, wt = 500, col = "#1a1208", anchor = "middle", lineH = 18, font, letterSpacing) {
         const t = se("text");
         t.setAttribute("text-anchor", anchor);
-        t.setAttribute("font-family", "var(--font-sans, system-ui, sans-serif)");
+        t.setAttribute("font-family", font ?? "var(--font-sans, system-ui, sans-serif)");
         t.setAttribute("font-size", String(sz));
         t.setAttribute("font-weight", String(wt));
         t.setAttribute("fill", col);
         t.setAttribute("pointer-events", "none");
         t.setAttribute("user-select", "none");
+        if (letterSpacing != null)
+            t.setAttribute("letter-spacing", String(letterSpacing));
         // vertically centre the whole block
         const totalH = (lines.length - 1) * lineH;
         const startY = cy - totalH / 2;
@@ -2448,21 +2877,6 @@ var AIDiagram = (function (exports) {
         });
         return t;
     }
-    function mkText(txt, x, y, sz = 14, wt = 500, col = "#1a1208", anchor = "middle") {
-        const t = se("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", "var(--font-sans, system-ui, sans-serif)");
-        t.setAttribute("font-size", String(sz));
-        t.setAttribute("font-weight", String(wt));
-        t.setAttribute("fill", col);
-        t.setAttribute("pointer-events", "none");
-        t.setAttribute("user-select", "none");
-        t.textContent = txt;
-        return t;
-    }
     function mkGroup(id, cls) {
         const g = se("g");
         if (id)
@@ -2471,7 +2885,7 @@ var AIDiagram = (function (exports) {
             g.setAttribute("class", cls);
         return g;
     }
-    // ── Arrow direction from connector ────────────────────────
+    // ── Arrow direction from connector ────────────────────────────────────────
     function connMeta$1(connector) {
         if (connector === "--")
             return { arrowAt: "none", dashed: false };
@@ -2486,7 +2900,7 @@ var AIDiagram = (function (exports) {
             return { arrowAt: "start", dashed };
         return { arrowAt: "end", dashed };
     }
-    // ── Generic rect connection point ─────────────────────────
+    // ── Generic rect connection point ─────────────────────────────────────────
     function rectConnPoint$1(rx, ry, rw, rh, ox, oy) {
         const cx = rx + rw / 2, cy = ry + rh / 2;
         const dx = ox - cx, dy = oy - cy;
@@ -2511,7 +2925,7 @@ var AIDiagram = (function (exports) {
         }
         return rectConnPoint$1(src.x, src.y, src.w, src.h, dstCX, dstCY);
     }
-    // ── Group depth (for paint order) ─────────────────────────
+    // ── Group depth (for paint order) ─────────────────────────────────────────
     function groupDepth$1(g, gm) {
         let d = 0;
         let cur = g;
@@ -2521,7 +2935,7 @@ var AIDiagram = (function (exports) {
         }
         return d;
     }
-    // ── Node shapes ───────────────────────────────────────────
+    // ── Node shapes ───────────────────────────────────────────────────────────
     function renderShape$1(rc, n, palette) {
         const s = n.style ?? {};
         const fill = String(s.fill ?? palette.nodeFill);
@@ -2594,19 +3008,18 @@ var AIDiagram = (function (exports) {
                 return [];
             case "image": {
                 if (n.imageUrl) {
-                    const img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+                    const img = document.createElementNS(NS, "image");
                     img.setAttribute("href", n.imageUrl);
                     img.setAttribute("x", String(n.x + 1));
                     img.setAttribute("y", String(n.y + 1));
                     img.setAttribute("width", String(n.w - 2));
                     img.setAttribute("height", String(n.h - 2));
                     img.setAttribute("preserveAspectRatio", "xMidYMid meet");
-                    // optional: clip to rounded rect
                     const clipId = `clip-${n.id}`;
-                    const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-                    const clip = document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
+                    const defs = document.createElementNS(NS, "defs");
+                    const clip = document.createElementNS(NS, "clipPath");
                     clip.setAttribute("id", clipId);
-                    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                    const rect = document.createElementNS(NS, "rect");
                     rect.setAttribute("x", String(n.x + 1));
                     rect.setAttribute("y", String(n.y + 1));
                     rect.setAttribute("width", String(n.w - 2));
@@ -2615,15 +3028,12 @@ var AIDiagram = (function (exports) {
                     clip.appendChild(rect);
                     defs.appendChild(clip);
                     img.setAttribute("clip-path", `url(#${clipId})`);
-                    // border box drawn on top
                     const border = rc.rectangle(n.x + 1, n.y + 1, n.w - 2, n.h - 2, {
                         ...opts,
                         fill: "none",
-                        fillStyle: "solid",
                     });
                     return [defs, img, border];
                 }
-                // fallback: no URL → grey placeholder box
                 return [
                     rc.rectangle(n.x + 1, n.y + 1, n.w - 2, n.h - 2, {
                         ...opts,
@@ -2636,7 +3046,7 @@ var AIDiagram = (function (exports) {
                 return [rc.rectangle(n.x + 1, n.y + 1, n.w - 2, n.h - 2, opts)];
         }
     }
-    // ── Arrowhead ─────────────────────────────────────────────
+    // ── Arrowhead ─────────────────────────────────────────────────────────────
     function arrowHead(rc, x, y, angle, col, seed) {
         const as = 12;
         return rc.polygon([
@@ -2660,14 +3070,22 @@ var AIDiagram = (function (exports) {
     }
     function renderToSVG(sg, container, options = {}) {
         if (typeof rough === "undefined") {
-            throw new Error('rough.js is not loaded. Add <script src="https://unpkg.com/roughjs/bundled/rough.js"></script>');
+            throw new Error("rough.js is not loaded.");
         }
         const isDark = options.theme === "dark" ||
             (options.theme === "auto" &&
                 window.matchMedia?.("(prefers-color-scheme:dark)").matches);
-        // Resolve palette: DSL config takes priority, then options.theme, then light
         const themeName = String(sg.config[THEME_CONFIG_KEY] ?? (isDark ? "dark" : "light"));
         const palette = resolvePalette(themeName);
+        // ── Diagram-level font ──────────────────────────────────
+        const diagramFont = (() => {
+            const raw = String(sg.config["font"] ?? "");
+            if (raw) {
+                loadFont(raw);
+                return resolveFont(raw);
+            }
+            return DEFAULT_FONT;
+        })();
         BASE_ROUGH.roughness = options.roughness ?? 1.3;
         BASE_ROUGH.bowing = options.bowing ?? 0.7;
         let svg;
@@ -2684,14 +3102,7 @@ var AIDiagram = (function (exports) {
         svg.setAttribute("height", String(sg.height));
         svg.setAttribute("viewBox", `0 0 ${sg.width} ${sg.height}`);
         svg.style.fontFamily = "var(--font-sans, system-ui, sans-serif)";
-        // Background rect so exported SVGs have correct bg
-        // const bgRect = se("rect") as SVGRectElement;
-        // bgRect.setAttribute("x", "0");
-        // bgRect.setAttribute("y", "0");
-        // bgRect.setAttribute("width", String(sg.width));
-        // bgRect.setAttribute("height", String(sg.height));
-        // bgRect.setAttribute("fill", palette.background);
-        // svg.appendChild(bgRect);
+        // ── Background ─────────────────────────────────────────
         if (!options.transparent) {
             const bgRect = se("rect");
             bgRect.setAttribute("x", "0");
@@ -2707,9 +3118,9 @@ var AIDiagram = (function (exports) {
             const titleColor = String(sg.config["title-color"] ?? palette.titleText);
             const titleSize = Number(sg.config["title-size"] ?? 18);
             const titleWeight = Number(sg.config["title-weight"] ?? 600);
-            svg.appendChild(mkText(sg.title, sg.width / 2, 26, titleSize, titleWeight, titleColor));
+            svg.appendChild(mkText(sg.title, sg.width / 2, 26, titleSize, titleWeight, titleColor, "middle", diagramFont));
         }
-        // ── Groups (depth-sorted: outermost first) ────────────────
+        // ── Groups ───────────────────────────────────────────────
         const gmMap = new Map(sg.groups.map((g) => [g.id, g]));
         const sortedGroups = [...sg.groups].sort((a, b) => groupDepth$1(a, gmMap) - groupDepth$1(b, gmMap));
         const GL = mkGroup("grp-layer");
@@ -2729,8 +3140,16 @@ var AIDiagram = (function (exports) {
                 strokeWidth: Number(gs.strokeWidth ?? 1.2),
                 strokeLineDash: gs.strokeDash ?? palette.groupDash,
             }));
-            const labelColor = gs.color ? String(gs.color) : palette.groupLabel;
-            gg.appendChild(mkText(g.label, g.x + 14, g.y + 14, 12, 500, labelColor, "start"));
+            // ── 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 gFont = resolveStyleFont$1(gs, diagramFont);
+            const gLetterSpacing = gs.letterSpacing;
+            if (g.label) {
+                gg.appendChild(mkText(g.label, g.x + 14, g.y + 14, gFontSize, 500, gLabelColor, "start", gFont, gLetterSpacing));
+            }
             GL.appendChild(gg);
         }
         svg.appendChild(GL);
@@ -2784,7 +3203,13 @@ var AIDiagram = (function (exports) {
                 bg.setAttribute("rx", "3");
                 bg.setAttribute("opacity", "0.9");
                 eg.appendChild(bg);
-                eg.appendChild(mkText(e.label, mx, my, 11, 400, palette.edgeLabelText));
+                // ── Edge label typography ───────────────────────
+                // supports: font, font-size, letter-spacing
+                // always center-anchored (single line floating on edge)
+                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));
             }
             EL.appendChild(eg);
         }
@@ -2794,14 +3219,45 @@ var AIDiagram = (function (exports) {
         for (const n of sg.nodes) {
             const ng = mkGroup(`node-${n.id}`, "ng");
             renderShape$1(rc, n, palette).forEach((s) => ng.appendChild(s));
+            // ── Node / text typography ─────────────────────────
+            // supports: font, font-size, letter-spacing, text-align, line-height
             const fontSize = Number(n.style?.fontSize ?? (n.shape === "text" ? 13 : 14));
             const fontWeight = n.style?.fontWeight ?? (n.shape === "text" ? 400 : 500);
-            const lines = n.label.split("\n");
+            const textColor = String(n.style?.color ??
+                (n.shape === "text" ? palette.edgeLabelText : palette.nodeText));
+            const nodeFont = resolveStyleFont$1(n.style ?? {}, diagramFont);
+            const textAlign = String(n.style?.textAlign ?? "center");
+            const anchorMap = {
+                left: "start",
+                center: "middle",
+                right: "end",
+            };
+            const textAnchor = anchorMap[textAlign] ?? "middle";
+            // 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;
+            // x shifts for left / right alignment
+            const textX = textAlign === "left"
+                ? n.x + 8
+                : textAlign === "right"
+                    ? n.x + n.w - 8
+                    : n.x + n.w / 2;
+            const lines = n.shape === 'text' && !n.label.includes('\n')
+                ? wrapText$1(n.label, n.w - 16, 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 nodeBodyMid = n.y + n.h / 2;
+            const blockH = (lines.length - 1) * lineHeight;
+            const textCY = verticalAlign === "top"
+                ? nodeBodyTop + blockH / 2
+                : verticalAlign === "bottom"
+                    ? nodeBodyBottom - blockH / 2
+                    : nodeBodyMid;
             ng.appendChild(lines.length > 1
-                ? mkMultilineText(lines, n.x + n.w / 2, n.y + n.h / 2, fontSize, fontWeight, String(n.style?.color ??
-                    (n.shape === "text" ? palette.edgeLabelText : palette.nodeText)))
-                : mkText(n.label, n.x + n.w / 2, n.y + n.h / 2, fontSize, fontWeight, String(n.style?.color ??
-                    (n.shape === "text" ? palette.edgeLabelText : palette.nodeText))));
+                ? mkMultilineText(lines, textX, textCY, fontSize, fontWeight, textColor, textAnchor, lineHeight, nodeFont, letterSpacing)
+                : mkText(n.label, textX, textCY, fontSize, fontWeight, textColor, textAnchor, nodeFont, letterSpacing));
             if (options.interactive) {
                 ng.style.cursor = "pointer";
                 ng.addEventListener("click", () => options.onNodeClick?.(n.id));
@@ -2827,7 +3283,12 @@ var AIDiagram = (function (exports) {
             const hdrText = String(gs.color ?? palette.tableHeaderText);
             const divCol = palette.tableDivider;
             const pad = t.labelH;
-            // Outer border
+            // ── 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;
+            // outer border
             tg.appendChild(rc.rectangle(t.x, t.y, t.w, t.h, {
                 ...BASE_ROUGH,
                 seed: hashStr$3(t.id),
@@ -2836,20 +3297,19 @@ var AIDiagram = (function (exports) {
                 stroke: strk,
                 strokeWidth: 1.5,
             }));
-            // Label strip separator
+            // label strip separator
             tg.appendChild(rc.line(t.x, t.y + pad, t.x + t.w, t.y + pad, {
                 roughness: 0.6,
                 seed: hashStr$3(t.id + "l"),
                 stroke: strk,
                 strokeWidth: 1,
             }));
-            // Label text
-            tg.appendChild(mkText(t.label, t.x + 10, t.y + pad / 2, 12, 500, textCol, "start"));
-            // Rows
+            // ── 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));
+            // rows
             let rowY = t.y + pad;
             for (const row of t.rows) {
                 const rh = row.kind === "header" ? t.headerH : t.rowH;
-                // Header background fill
                 if (row.kind === "header") {
                     const hdrBg = se("rect");
                     hdrBg.setAttribute("x", String(t.x + 1));
@@ -2859,19 +3319,34 @@ var AIDiagram = (function (exports) {
                     hdrBg.setAttribute("fill", hdrFill);
                     tg.appendChild(hdrBg);
                 }
-                // Row separator
                 tg.appendChild(rc.line(t.x, rowY + rh, t.x + t.w, rowY + rh, {
                     roughness: 0.4,
                     seed: hashStr$3(t.id + rowY),
                     stroke: row.kind === "header" ? strk : divCol,
                     strokeWidth: row.kind === "header" ? 1.2 : 0.6,
                 }));
-                // Cell text + col separators
+                // ── Cell text: font, font-size, letter-spacing, text-align ──
+                // text-align applies to data rows; header is always centered
+                const cellAlignProp = row.kind === "header" ? "center" : String(gs.textAlign ?? "center");
+                const cellAnchorMap = {
+                    left: "start",
+                    center: "middle",
+                    right: "end",
+                };
+                const cellAnchor = cellAnchorMap[cellAlignProp] ?? "middle";
+                const cellFw = row.kind === "header" ? 600 : 400;
+                const cellColor = row.kind === "header" ? hdrText : textCol;
                 let cx = t.x;
                 row.cells.forEach((cell, i) => {
                     const cw = t.colWidths[i] ?? 60;
-                    const fw = row.kind === "header" ? 600 : 400;
-                    tg.appendChild(mkText(cell, cx + cw / 2, rowY + rh / 2, 12, fw, row.kind === "header" ? hdrText : textCol));
+                    // x position shifts with alignment
+                    const cellX = cellAnchor === "start"
+                        ? cx + 6
+                        : cellAnchor === "end"
+                            ? cx + cw - 6
+                            : cx + cw / 2;
+                    // ← was missing tg.appendChild — cells were invisible before
+                    tg.appendChild(mkText(cell, cellX, rowY + rh / 2, tFontSize, cellFw, cellColor, cellAnchor, tFont, tLetterSpacing));
                     if (i < row.cells.length - 1) {
                         tg.appendChild(rc.line(cx + cw, t.y + pad, cx + cw, t.y + t.h, {
                             roughness: 0.3,
@@ -2900,6 +3375,25 @@ var AIDiagram = (function (exports) {
             const strk = String(gs.stroke ?? palette.noteStroke);
             const fold = 14;
             const { x, y, w, h } = n;
+            // ── Note typography ─────────────────────────────────
+            // supports: font, font-size, letter-spacing, text-align, line-height
+            const nFontSize = Number(gs.fontSize ?? 12);
+            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 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
+                : nTextAlign === "center"
+                    ? x + (w - fold) / 2
+                    : x + 12;
             ng.appendChild(rc.polygon([
                 [x, y],
                 [x + w - fold, y],
@@ -2926,12 +3420,75 @@ var AIDiagram = (function (exports) {
                 stroke: strk,
                 strokeWidth: 0.8,
             }));
-            n.lines.forEach((line, i) => {
-                ng.appendChild(mkText(line, x + 12, y + 12 + i * 20 + 10, 12, 400, String(gs.color ?? palette.noteText), "start"));
-            });
+            const nVerticalAlign = String(gs.verticalAlign ?? "top");
+            const bodyTop = y + fold + 8; // below the fold triangle
+            const bodyBottom = y + h - 8; // above bottom edge
+            const bodyMid = (bodyTop + bodyBottom) / 2;
+            const blockH = (n.lines.length - 1) * nLineHeight;
+            const blockCY = nVerticalAlign === "bottom"
+                ? bodyBottom - blockH / 2
+                : 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));
+            }
+            else {
+                ng.appendChild(mkText(n.lines[0] ?? "", nTextX, blockCY, nFontSize, 400, String(gs.color ?? palette.noteText), nAnchor, nFont, nLetterSpacing));
+            }
             NoteL.appendChild(ng);
         }
         svg.appendChild(NoteL);
+        markdownMap(sg);
+        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 anchor = textAlign === 'right' ? 'end'
+                : textAlign === 'center' ? 'middle'
+                    : 'start';
+            const PAD = Number(m.style?.padding ?? 16);
+            const textX = textAlign === 'right' ? m.x + m.w - PAD
+                : textAlign === 'center' ? m.x + m.w / 2
+                    : m.x + PAD;
+            let y = m.y + PAD;
+            for (const line of m.lines) {
+                if (line.kind === 'blank') {
+                    y += LINE_SPACING.blank;
+                    continue;
+                }
+                const fontSize = LINE_FONT_SIZE[line.kind];
+                const fontWeight = LINE_FONT_WEIGHT[line.kind];
+                const t = se('text');
+                t.setAttribute('x', String(textX));
+                t.setAttribute('y', String(y + fontSize / 2));
+                t.setAttribute('text-anchor', anchor);
+                t.setAttribute('dominant-baseline', 'middle');
+                t.setAttribute('font-family', mFont);
+                t.setAttribute('font-size', String(fontSize));
+                t.setAttribute('font-weight', String(fontWeight));
+                t.setAttribute('fill', baseColor);
+                t.setAttribute('pointer-events', 'none');
+                t.setAttribute('user-select', 'none');
+                for (const run of line.runs) {
+                    const span = se('tspan');
+                    span.textContent = run.text;
+                    if (run.bold)
+                        span.setAttribute('font-weight', '700');
+                    if (run.italic)
+                        span.setAttribute('font-style', 'italic');
+                    t.appendChild(span);
+                }
+                mg.appendChild(t);
+                y += LINE_SPACING[line.kind];
+            }
+            MDL.appendChild(mg);
+        }
+        svg.appendChild(MDL);
         // ── Charts ────────────────────────────────────────────────
         const CL = mkGroup("chart-layer");
         for (const c of sg.charts) {
@@ -3205,22 +3762,83 @@ var AIDiagram = (function (exports) {
             h = ((h * 33) ^ s.charCodeAt(i)) & 0xffff;
         return h;
     }
-    // ── Arrow direction from connector (mirrors svg/index.ts) ─
+    // ── Small helper: load + resolve font from a style map ────────────────────
+    function resolveStyleFont(style, fallback) {
+        const raw = String(style['font'] ?? '');
+        if (!raw)
+            return fallback;
+        loadFont(raw);
+        return resolveFont(raw);
+    }
+    // ── Canvas text helpers ────────────────────────────────────────────────────
+    function drawText(ctx, txt, x, y, sz = 14, wt = 500, col = '#1a1208', align = 'center', font = 'system-ui, sans-serif', letterSpacing) {
+        ctx.save();
+        ctx.font = `${wt} ${sz}px ${font}`;
+        ctx.fillStyle = col;
+        ctx.textAlign = align;
+        ctx.textBaseline = 'middle';
+        if (letterSpacing) {
+            // Canvas has no native letter-spacing — draw char by char
+            const chars = txt.split('');
+            const totalW = ctx.measureText(txt).width + letterSpacing * (chars.length - 1);
+            let startX = align === 'center' ? x - totalW / 2
+                : align === 'right' ? x - totalW
+                    : x;
+            ctx.textAlign = 'left';
+            for (const ch of chars) {
+                ctx.fillText(ch, startX, y);
+                startX += ctx.measureText(ch).width + letterSpacing;
+            }
+        }
+        else {
+            ctx.fillText(txt, x, y);
+        }
+        ctx.restore();
+    }
+    function drawMultilineText(ctx, lines, x, cy, sz = 14, wt = 500, col = '#1a1208', align = 'center', lineH = 18, font = 'system-ui, sans-serif', letterSpacing) {
+        const totalH = (lines.length - 1) * lineH;
+        const startY = cy - totalH / 2;
+        lines.forEach((line, i) => {
+            drawText(ctx, line, x, startY + i * lineH, sz, wt, col, align, font, letterSpacing);
+        });
+    }
+    // Soft word-wrap for `text` shape nodes
+    function wrapText(text, maxWidth, fontSize) {
+        const charWidth = fontSize * 0.55;
+        const maxChars = Math.floor(maxWidth / charWidth);
+        const words = text.split(' ');
+        const lines = [];
+        let current = '';
+        for (const word of words) {
+            const test = current ? `${current} ${word}` : word;
+            if (test.length > maxChars && current) {
+                lines.push(current);
+                current = word;
+            }
+            else {
+                current = test;
+            }
+        }
+        if (current)
+            lines.push(current);
+        return lines.length ? lines : [text];
+    }
+    // ── Arrow direction ────────────────────────────────────────────────────────
     function connMeta(connector) {
-        if (connector === "--")
-            return { arrowAt: "none", dashed: false };
-        if (connector === "---")
-            return { arrowAt: "none", dashed: true };
-        const bidir = connector.includes("<") && connector.includes(">");
+        if (connector === '--')
+            return { arrowAt: 'none', dashed: false };
+        if (connector === '---')
+            return { arrowAt: 'none', dashed: true };
+        const bidir = connector.includes('<') && connector.includes('>');
         if (bidir)
-            return { arrowAt: "both", dashed: connector.includes("--") };
-        const back = connector.startsWith("<");
-        const dashed = connector.includes("--");
+            return { arrowAt: 'both', dashed: connector.includes('--') };
+        const back = connector.startsWith('<');
+        const dashed = connector.includes('--');
         if (back)
-            return { arrowAt: "start", dashed };
-        return { arrowAt: "end", dashed };
+            return { arrowAt: 'start', dashed };
+        return { arrowAt: 'end', dashed };
     }
-    // ── Generic rect connection point ─────────────────────────
+    // ── Rect connection point ──────────────────────────────────────────────────
     function rectConnPoint(rx, ry, rw, rh, ox, oy) {
         const cx = rx + rw / 2, cy = ry + rh / 2;
         const dx = ox - cx, dy = oy - cy;
@@ -3233,19 +3851,16 @@ var AIDiagram = (function (exports) {
         return [cx + t * dx, cy + t * dy];
     }
     function resolveEndpoint(id, nm, tm, gm, cm, ntm) {
-        return (nm.get(id) ?? tm.get(id) ?? gm.get(id) ?? cm.get(id) ?? ntm.get(id) ?? null);
+        return nm.get(id) ?? tm.get(id) ?? gm.get(id) ?? cm.get(id) ?? ntm.get(id) ?? null;
     }
     function getConnPoint(src, dstCX, dstCY) {
-        if ("shape" in src && src.shape) {
+        if ('shape' in src && src.shape) {
             return connPoint(src, {
-                x: dstCX - 1,
-                y: dstCY - 1,
-                w: 2,
-                h: 2});
+                x: dstCX - 1, y: dstCY - 1, w: 2, h: 2});
         }
         return rectConnPoint(src.x, src.y, src.w, src.h, dstCX, dstCY);
     }
-    // ── Group depth (for paint order, outermost first) ────────
+    // ── Group depth ────────────────────────────────────────────────────────────
     function groupDepth(g, gm) {
         let d = 0;
         let cur = g;
@@ -3255,80 +3870,57 @@ var AIDiagram = (function (exports) {
         }
         return d;
     }
-    // ── Node shapes ───────────────────────────────────────────
+    // ── Node shapes ────────────────────────────────────────────────────────────
     function renderShape(rc, ctx, n, palette, R) {
         const s = n.style ?? {};
         const fill = String(s.fill ?? palette.nodeFill);
         const stroke = String(s.stroke ?? palette.nodeStroke);
         const opts = {
-            ...R,
-            seed: hashStr$1(n.id),
-            fill,
-            fillStyle: "solid",
-            stroke,
-            strokeWidth: Number(s.strokeWidth ?? 1.9),
+            ...R, seed: hashStr$1(n.id),
+            fill, fillStyle: 'solid',
+            stroke, strokeWidth: Number(s.strokeWidth ?? 1.9),
         };
         const cx = n.x + n.w / 2, cy = n.y + n.h / 2;
         const hw = n.w / 2 - 2;
         switch (n.shape) {
-            case "circle":
+            case 'circle':
                 rc.ellipse(cx, cy, n.w * 0.88, n.h * 0.88, opts);
                 break;
-            case "diamond":
-                rc.polygon([
-                    [cx, n.y + 2],
-                    [cx + hw, cy],
-                    [cx, n.y + n.h - 2],
-                    [cx - hw, cy],
-                ], opts);
+            case 'diamond':
+                rc.polygon([[cx, n.y + 2], [cx + hw, cy], [cx, n.y + n.h - 2], [cx - hw, cy]], opts);
                 break;
-            case "hexagon": {
+            case 'hexagon': {
                 const hw2 = hw * 0.56;
                 rc.polygon([
-                    [cx - hw2, n.y + 3],
-                    [cx + hw2, n.y + 3],
-                    [cx + hw, cy],
-                    [cx + hw2, n.y + n.h - 3],
-                    [cx - hw2, n.y + n.h - 3],
-                    [cx - hw, cy],
+                    [cx - hw2, n.y + 3], [cx + hw2, n.y + 3], [cx + hw, cy],
+                    [cx + hw2, n.y + n.h - 3], [cx - hw2, n.y + n.h - 3], [cx - hw, cy],
                 ], opts);
                 break;
             }
-            case "triangle":
-                rc.polygon([
-                    [cx, n.y + 3],
-                    [n.x + n.w - 3, n.y + n.h - 3],
-                    [n.x + 3, n.y + n.h - 3],
-                ], opts);
+            case 'triangle':
+                rc.polygon([[cx, n.y + 3], [n.x + n.w - 3, n.y + n.h - 3], [n.x + 3, n.y + n.h - 3]], opts);
                 break;
-            case "cylinder": {
+            case 'cylinder': {
                 const eH = 18;
                 rc.rectangle(n.x + 3, n.y + eH / 2, n.w - 6, n.h - eH, opts);
                 rc.ellipse(cx, n.y + eH / 2, n.w - 8, eH, { ...opts, roughness: 0.6 });
-                rc.ellipse(cx, n.y + n.h - eH / 2, n.w - 8, eH, {
-                    ...opts,
-                    roughness: 0.6,
-                    fill: "none",
-                });
+                rc.ellipse(cx, n.y + n.h - eH / 2, n.w - 8, eH, { ...opts, roughness: 0.6, fill: 'none' });
                 break;
             }
-            case "parallelogram":
+            case 'parallelogram':
                 rc.polygon([
-                    [n.x + 18, n.y + 1],
-                    [n.x + n.w - 1, n.y + 1],
-                    [n.x + n.w - 18, n.y + n.h - 1],
-                    [n.x + 1, n.y + n.h - 1],
+                    [n.x + 18, n.y + 1], [n.x + n.w - 1, n.y + 1],
+                    [n.x + n.w - 18, n.y + n.h - 1], [n.x + 1, n.y + n.h - 1],
                 ], opts);
                 break;
-            case "text":
-                break; // text nodes: no background shape
-            case "image": {
+            case 'text':
+                break; // no shape drawn
+            case 'image': {
                 if (n.imageUrl) {
                     const img = new Image();
-                    img.crossOrigin = "anonymous";
+                    img.crossOrigin = 'anonymous';
                     img.onload = () => {
                         ctx.save();
-                        // rounded clip
                         ctx.beginPath();
                         const r = 6;
                         ctx.moveTo(n.x + r, n.y);
@@ -3344,21 +3936,12 @@ var AIDiagram = (function (exports) {
                         ctx.clip();
                         ctx.drawImage(img, n.x + 1, n.y + 1, n.w - 2, n.h - 2);
                         ctx.restore();
-                        // border on top
-                        rc.rectangle(n.x + 1, n.y + 1, n.w - 2, n.h - 2, {
-                            ...opts,
-                            fill: "none",
-                        });
+                        rc.rectangle(n.x + 1, n.y + 1, n.w - 2, n.h - 2, { ...opts, fill: 'none' });
                     };
                     img.src = n.imageUrl;
                 }
                 else {
-                    // placeholder
-                    rc.rectangle(n.x + 1, n.y + 1, n.w - 2, n.h - 2, {
-                        ...opts,
-                        fill: "#e0e0e0",
-                        stroke: "#999999",
-                    });
+                    rc.rectangle(n.x + 1, n.y + 1, n.w - 2, n.h - 2, { ...opts, fill: '#e0e0e0', stroke: '#999999' });
                 }
                 return;
             }
@@ -3367,57 +3950,52 @@ var AIDiagram = (function (exports) {
                 break;
         }
     }
-    // ── Arrowhead ─────────────────────────────────────────────
+    // ── Arrowhead ─────────────────────────────────────────────────────────────
     function drawArrowHead(rc, x, y, angle, col, seed, R) {
         const as = 12;
         rc.polygon([
             [x, y],
-            [
-                x - as * Math.cos(angle - Math.PI / 6.5),
-                y - as * Math.sin(angle - Math.PI / 6.5),
-            ],
-            [
-                x - as * Math.cos(angle + Math.PI / 6.5),
-                y - as * Math.sin(angle + Math.PI / 6.5),
-            ],
-        ], {
-            roughness: 0.3,
-            seed,
-            fill: col,
-            fillStyle: "solid",
-            stroke: col,
-            strokeWidth: 0.8,
-        });
+            [x - as * Math.cos(angle - Math.PI / 6.5), y - as * Math.sin(angle - Math.PI / 6.5)],
+            [x - as * Math.cos(angle + Math.PI / 6.5), y - as * Math.sin(angle + Math.PI / 6.5)],
+        ], { roughness: 0.3, seed, fill: col, fillStyle: 'solid', stroke: col, strokeWidth: 0.8 });
     }
+    // ── Public API ─────────────────────────────────────────────────────────────
     function renderToCanvas(sg, canvas, options = {}) {
-        if (typeof rough === "undefined")
-            throw new Error("rough.js not loaded");
+        if (typeof rough === 'undefined')
+            throw new Error('rough.js not loaded');
         const scale = options.scale ?? window.devicePixelRatio ?? 1;
         canvas.width = sg.width * scale;
         canvas.height = sg.height * scale;
-        canvas.style.width = sg.width + "px";
-        canvas.style.height = sg.height + "px";
-        const ctx = canvas.getContext("2d");
+        canvas.style.width = sg.width + 'px';
+        canvas.style.height = sg.height + 'px';
+        const ctx = canvas.getContext('2d');
         ctx.scale(scale, scale);
-        if (options.transparent) {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-        }
-        // ── Resolve palette (mirrors SVG renderer) ───────────────
-        const isDark = options.theme === "dark" ||
-            (options.theme === "auto" &&
-                window.matchMedia?.("(prefers-color-scheme:dark)").matches);
-        const themeName = String(sg.config[THEME_CONFIG_KEY] ?? (isDark ? "dark" : "light"));
+        // ── Palette ──────────────────────────────────────────────
+        const isDark = options.theme === 'dark' ||
+            (options.theme === 'auto' &&
+                typeof window !== 'undefined' &&
+                window.matchMedia?.('(prefers-color-scheme:dark)').matches);
+        const themeName = String(sg.config[THEME_CONFIG_KEY] ?? (isDark ? 'dark' : 'light'));
         const palette = resolvePalette(themeName);
+        // ── Diagram-level font ───────────────────────────────────
+        const diagramFont = (() => {
+            const raw = String(sg.config['font'] ?? '');
+            if (raw) {
+                loadFont(raw);
+                return resolveFont(raw);
+            }
+            return DEFAULT_FONT;
+        })();
+        // ── Background ───────────────────────────────────────────
         if (!options.transparent) {
             ctx.fillStyle = options.background ?? palette.background;
             ctx.fillRect(0, 0, sg.width, sg.height);
         }
+        else {
+            ctx.clearRect(0, 0, sg.width, sg.height);
+        }
         const rc = rough.canvas(canvas);
-        const R = {
-            roughness: options.roughness ?? 1.3,
-            bowing: options.bowing ?? 0.7,
-        };
-        // ── Lookup maps ──────────────────────────────────────────
+        const R = { roughness: options.roughness ?? 1.3, bowing: options.bowing ?? 0.7 };
         const nm = nodeMap(sg);
         const tm = tableMap(sg);
         const gm = groupMap(sg);
@@ -3425,36 +4003,35 @@ var AIDiagram = (function (exports) {
         const ntm = noteMap(sg);
         // ── Title ────────────────────────────────────────────────
         if (sg.title) {
-            ctx.save();
-            ctx.font = "600 18px system-ui, sans-serif";
-            ctx.fillStyle = palette.titleText;
-            ctx.textAlign = "center";
-            ctx.fillText(sg.title, sg.width / 2, 28);
-            ctx.restore();
+            const titleSize = Number(sg.config['title-size'] ?? 18);
+            const titleWeight = Number(sg.config['title-weight'] ?? 600);
+            const titleColor = String(sg.config['title-color'] ?? palette.titleText);
+            drawText(ctx, sg.title, sg.width / 2, 28, titleSize, titleWeight, titleColor, 'center', diagramFont);
         }
-        // ── Groups (depth-sorted: outermost first) ────────────────
+        // ── Groups (outermost first) ─────────────────────────────
         const sortedGroups = [...sg.groups].sort((a, b) => groupDepth(a, gm) - groupDepth(b, gm));
         for (const g of sortedGroups) {
             if (!g.w)
                 continue;
             const gs = g.style ?? {};
             rc.rectangle(g.x, g.y, g.w, g.h, {
-                ...R,
-                roughness: 1.7,
-                bowing: 0.4,
-                seed: hashStr$1(g.id),
+                ...R, roughness: 1.7, bowing: 0.4, seed: hashStr$1(g.id),
                 fill: String(gs.fill ?? palette.groupFill),
-                fillStyle: "solid",
+                fillStyle: 'solid',
                 stroke: String(gs.stroke ?? palette.groupStroke),
                 strokeWidth: Number(gs.strokeWidth ?? 1.2),
                 strokeLineDash: gs.strokeDash ?? palette.groupDash,
             });
-            ctx.save();
-            ctx.font = "500 12px system-ui, sans-serif";
-            ctx.fillStyle = gs.color ? String(gs.color) : palette.groupLabel;
-            ctx.textAlign = "left";
-            ctx.fillText(g.label, g.x + 14, g.y + 16);
-            ctx.restore();
+            // ── 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 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);
+            }
         }
         // ── Edges ─────────────────────────────────────────────────
         for (const e of sg.edges) {
@@ -3471,62 +4048,75 @@ var AIDiagram = (function (exports) {
             const len = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2) || 1;
             const nx = (x2 - x1) / len, ny = (y2 - y1) / len;
             const HEAD = 13;
-            const sx1 = arrowAt === "start" || arrowAt === "both" ? x1 + nx * HEAD : x1;
-            const sy1 = arrowAt === "start" || arrowAt === "both" ? y1 + ny * HEAD : y1;
-            const sx2 = arrowAt === "end" || arrowAt === "both" ? x2 - nx * HEAD : x2;
-            const sy2 = arrowAt === "end" || arrowAt === "both" ? y2 - ny * HEAD : y2;
+            const sx1 = arrowAt === 'start' || arrowAt === 'both' ? x1 + nx * HEAD : x1;
+            const sy1 = arrowAt === 'start' || arrowAt === 'both' ? y1 + ny * HEAD : y1;
+            const sx2 = arrowAt === 'end' || arrowAt === 'both' ? x2 - nx * HEAD : x2;
+            const sy2 = arrowAt === 'end' || arrowAt === 'both' ? y2 - ny * HEAD : y2;
             rc.line(sx1, sy1, sx2, sy2, {
-                ...R,
-                roughness: 0.9,
-                seed: hashStr$1(e.from + e.to),
+                ...R, roughness: 0.9, seed: hashStr$1(e.from + e.to),
                 stroke: ecol,
                 strokeWidth: Number(e.style?.strokeWidth ?? 1.6),
                 ...(dashed ? { strokeLineDash: [6, 5] } : {}),
             });
             const ang = Math.atan2(y2 - y1, x2 - x1);
-            if (arrowAt === "end" || arrowAt === "both")
+            if (arrowAt === 'end' || arrowAt === 'both')
                 drawArrowHead(rc, x2, y2, ang, ecol, hashStr$1(e.to));
-            if (arrowAt === "start" || arrowAt === "both")
-                drawArrowHead(rc, x1, y1, Math.atan2(y1 - y2, x1 - x2), ecol, hashStr$1(e.from + "back"));
+            if (arrowAt === 'start' || arrowAt === 'both')
+                drawArrowHead(rc, x1, y1, Math.atan2(y1 - y2, x1 - x2), ecol, hashStr$1(e.from + 'back'));
             if (e.label) {
                 const mx = (x1 + x2) / 2 - ny * 14;
                 const my = (y1 + y2) / 2 + nx * 14;
+                // ── Edge label: font, font-size, letter-spacing ──
+                // always center-anchored (single line)
+                const eFontSize = Number(e.style?.fontSize ?? 11);
+                const eFont = resolveStyleFont(e.style ?? {}, diagramFont);
+                const eLetterSpacing = e.style?.letterSpacing;
                 ctx.save();
-                ctx.font = "400 11px system-ui, sans-serif";
-                ctx.textAlign = "center";
+                ctx.font = `400 ${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);
-                ctx.fillStyle = palette.edgeLabelText;
-                ctx.fillText(e.label, mx, my + 3);
-                ctx.restore();
+                drawText(ctx, e.label, mx, my + 3, eFontSize, 400, palette.edgeLabelText, 'center', eFont, eLetterSpacing);
             }
         }
         // ── Nodes ─────────────────────────────────────────────────
         for (const n of sg.nodes) {
             renderShape(rc, ctx, n, palette, R);
-            const s = n.style ?? {};
-            const fontSize = Number(s.fontSize ?? (n.shape === "text" ? 13 : 14));
-            const fontWeight = s.fontWeight ?? (n.shape === "text" ? 400 : 500);
-            const textColor = String(s.color ??
-                (n.shape === "text" ? palette.edgeLabelText : palette.nodeText));
-            ctx.save();
-            ctx.font = `${fontWeight} ${fontSize}px system-ui, sans-serif`;
-            ctx.fillStyle = textColor;
-            ctx.textAlign = "center";
-            ctx.textBaseline = "middle";
-            const lines = n.label.split("\n");
-            if (lines.length === 1) {
-                ctx.fillText(n.label, n.x + n.w / 2, n.y + n.h / 2);
+            // ── Node / text typography ─────────────────────────
+            // supports: font, font-size, letter-spacing, text-align,
+            //           vertical-align, line-height, word-wrap (text shape)
+            const fontSize = Number(n.style?.fontSize ?? (n.shape === 'text' ? 13 : 14));
+            const fontWeight = n.style?.fontWeight ?? (n.shape === 'text' ? 400 : 500);
+            const textColor = String(n.style?.color ??
+                (n.shape === 'text' ? palette.edgeLabelText : palette.nodeText));
+            const nodeFont = resolveStyleFont(n.style ?? {}, diagramFont);
+            const textAlign = String(n.style?.textAlign ?? 'center');
+            const lineHeight = Number(n.style?.lineHeight ?? 1.3) * fontSize;
+            const letterSpacing = n.style?.letterSpacing;
+            const vertAlign = String(n.style?.verticalAlign ?? 'middle');
+            // x shifts for left/right alignment
+            const textX = textAlign === 'left' ? n.x + 8
+                : textAlign === 'right' ? n.x + n.w - 8
+                    : 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)
+                : rawLines;
+            // vertical-align: compute textCY from top/middle/bottom
+            const nodeBodyTop = n.y + 6;
+            const nodeBodyBottom = n.y + n.h - 6;
+            const blockH = (lines.length - 1) * lineHeight;
+            const textCY = vertAlign === 'top' ? nodeBodyTop + blockH / 2
+                : vertAlign === 'bottom' ? nodeBodyBottom - blockH / 2
+                    : n.y + n.h / 2; // middle (default)
+            if (lines.length > 1) {
+                drawMultilineText(ctx, lines, textX, textCY, fontSize, fontWeight, textColor, textAlign, lineHeight, nodeFont, letterSpacing);
             }
             else {
-                const lineH = fontSize * 1.35;
-                const startY = n.y + n.h / 2 - ((lines.length - 1) * lineH) / 2;
-                lines.forEach((line, i) => {
-                    ctx.fillText(line, n.x + n.w / 2, startY + i * lineH);
-                });
+                drawText(ctx, lines[0] ?? '', textX, textCY, fontSize, fontWeight, textColor, textAlign, nodeFont, letterSpacing);
             }
-            ctx.restore();
         }
         // ── Tables ────────────────────────────────────────────────
         for (const t of sg.tables) {
@@ -3535,65 +4125,53 @@ var AIDiagram = (function (exports) {
             const strk = String(gs.stroke ?? palette.tableStroke);
             const textCol = String(gs.color ?? palette.tableText);
             const pad = t.labelH;
-            // Outer border
+            // ── 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;
             rc.rectangle(t.x, t.y, t.w, t.h, {
-                ...R,
-                seed: hashStr$1(t.id),
-                fill,
-                fillStyle: "solid",
-                stroke: strk,
-                strokeWidth: 1.5,
+                ...R, seed: hashStr$1(t.id),
+                fill, fillStyle: 'solid', stroke: strk, strokeWidth: 1.5,
             });
-            // Label strip separator
             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,
+                roughness: 0.6, seed: hashStr$1(t.id + 'l'), stroke: strk, strokeWidth: 1,
             });
-            // Label text
-            ctx.save();
-            ctx.font = "500 12px system-ui, sans-serif";
-            ctx.fillStyle = textCol;
-            ctx.textAlign = "left";
-            ctx.textBaseline = "middle";
-            ctx.fillText(t.label, t.x + 10, t.y + pad / 2);
-            ctx.restore();
-            // Rows
+            // ── Table label: always left-anchored ───────────────
+            drawText(ctx, t.label, t.x + 10, t.y + pad / 2, tFontSize, 500, textCol, 'left', tFont, tLetterSpacing);
             let rowY = t.y + pad;
             for (const row of t.rows) {
-                const rh = row.kind === "header" ? t.headerH : t.rowH;
-                // Header background
-                if (row.kind === "header") {
+                const rh = row.kind === 'header' ? t.headerH : t.rowH;
+                if (row.kind === 'header') {
                     ctx.fillStyle = palette.tableHeaderFill;
                     ctx.fillRect(t.x + 1, rowY + 1, t.w - 2, rh - 1);
                 }
-                // Row separator
                 rc.line(t.x, rowY + rh, t.x + t.w, rowY + rh, {
-                    roughness: 0.4,
-                    seed: hashStr$1(t.id + rowY),
-                    stroke: row.kind === "header" ? strk : palette.tableDivider,
-                    strokeWidth: row.kind === "header" ? 1.2 : 0.6,
+                    roughness: 0.4, seed: hashStr$1(t.id + rowY),
+                    stroke: row.kind === 'header' ? strk : palette.tableDivider,
+                    strokeWidth: row.kind === 'header' ? 1.2 : 0.6,
                 });
-                // Cell text + column separators
+                // ── Cell text ───────────────────────────────────
+                // header always centered; data rows respect gs.textAlign
+                const cellAlignProp = (row.kind === 'header'
+                    ? 'center'
+                    : String(gs.textAlign ?? 'center'));
+                const cellFw = row.kind === 'header' ? 600 : 400;
+                const cellColor = row.kind === 'header'
+                    ? String(gs.color ?? palette.tableHeaderText)
+                    : textCol;
                 let cx = t.x;
                 row.cells.forEach((cell, i) => {
                     const cw = t.colWidths[i] ?? 60;
-                    const fw = row.kind === "header" ? 600 : 400;
-                    ctx.save();
-                    ctx.font = `${fw} 12px system-ui, sans-serif`;
-                    ctx.fillStyle =
-                        row.kind === "header" ? palette.tableHeaderText : textCol;
-                    ctx.textAlign = "center";
-                    ctx.textBaseline = "middle";
-                    ctx.fillText(cell, cx + cw / 2, rowY + rh / 2);
-                    ctx.restore();
+                    const cellX = cellAlignProp === 'left' ? cx + 6
+                        : cellAlignProp === 'right' ? cx + cw - 6
+                            : cx + cw / 2;
+                    drawText(ctx, cell, cellX, rowY + rh / 2, tFontSize, cellFw, cellColor, cellAlignProp, tFont, tLetterSpacing);
                     if (i < row.cells.length - 1) {
                         rc.line(cx + cw, t.y + pad, cx + cw, t.y + t.h, {
-                            roughness: 0.3,
-                            seed: hashStr$1(t.id + "c" + i),
-                            stroke: palette.tableDivider,
-                            strokeWidth: 0.5,
+                            roughness: 0.3, seed: hashStr$1(t.id + 'c' + i),
+                            stroke: palette.tableDivider, strokeWidth: 0.5,
                         });
                     }
                     cx += cw;
@@ -3608,44 +4186,106 @@ var AIDiagram = (function (exports) {
             const strk = String(gs.stroke ?? palette.noteStroke);
             const fold = 14;
             const { x, y, w, h } = n;
-            // Note body (folded corner polygon)
             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,
-            });
-            // Folded corner triangle
+            ], { ...R, seed: hashStr$1(n.id), fill, fillStyle: 'solid', stroke: strk, strokeWidth: 1.2 });
             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,
-            });
-            // Text lines
-            ctx.save();
-            ctx.font = "400 12px system-ui, sans-serif";
-            ctx.fillStyle = String(gs.color ?? palette.noteText);
-            ctx.textAlign = "left";
-            ctx.textBaseline = "middle";
-            n.lines.forEach((line, i) => {
-                ctx.fillText(line, x + 12, y + 12 + i * 20 + 10);
-            });
-            ctx.restore();
+            ], { 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
+            const nFontSize = Number(gs.fontSize ?? 12);
+            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
+                : 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;
+            const blockH = (n.lines.length - 1) * nLineHeight;
+            const blockCY = nVertAlign === 'bottom' ? bodyBottom - blockH / 2
+                : nVertAlign === 'middle' ? (bodyTop + bodyBottom) / 2
+                    : bodyTop + blockH / 2; // top (default)
+            if (n.lines.length > 1) {
+                drawMultilineText(ctx, n.lines, nTextX, blockCY, nFontSize, 400, nColor, nTextAlign, nLineHeight, nFont, nLetterSpacing);
+            }
+            else {
+                drawText(ctx, n.lines[0] ?? '', nTextX, blockCY, nFontSize, 400, nColor, nTextAlign, nFont, nLetterSpacing);
+            }
+        }
+        // ── 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 anchorX = textAlign === 'right' ? m.x + m.w - PAD
+                : textAlign === 'center' ? m.x + m.w / 2
+                    : m.x + PAD;
+            let y = m.y + PAD;
+            for (const line of m.lines) {
+                if (line.kind === 'blank') {
+                    y += LINE_SPACING.blank;
+                    continue;
+                }
+                const fontSize = LINE_FONT_SIZE[line.kind];
+                const fontWeight = LINE_FONT_WEIGHT[line.kind];
+                const lineY = y + fontSize / 2;
+                // Measure total run width for left-offset when runs mix bold/italic
+                // Simple: draw each run consecutively from a computed start x
+                ctx.save();
+                ctx.textBaseline = 'middle';
+                ctx.fillStyle = baseColor;
+                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;
+                    }
+                    let runX = textAlign === 'center' ? anchorX - totalW / 2 : anchorX - totalW;
+                    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;
+                    }
+                }
+                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;
+                    }
+                }
+                ctx.restore();
+                y += LINE_SPACING[line.kind];
+            }
         }
         // ── Charts ────────────────────────────────────────────────
         for (const c of sg.charts) {
@@ -3657,19 +4297,19 @@ var AIDiagram = (function (exports) {
             }, R);
         }
     }
-    // ── Export canvas to PNG blob ─────────────────────────────
+    // ── Export helpers ─────────────────────────────────────────────────────────
     function canvasToPNGBlob(canvas) {
         return new Promise((resolve, reject) => {
-            canvas.toBlob((blob) => {
+            canvas.toBlob(blob => {
                 if (blob)
                     resolve(blob);
                 else
-                    reject(new Error("Canvas toBlob failed"));
-            }, "image/png");
+                    reject(new Error('Canvas toBlob failed'));
+            }, 'image/png');
         });
     }
     function canvasToPNGDataURL(canvas) {
-        return canvas.toDataURL("image/png");
+        return canvas.toDataURL('image/png');
     }
 
     // ============================================================
@@ -4604,6 +5244,89 @@ var AIDiagram = (function (exports) {
         }
     }
 
+    // ============================================================
+    // sketchmark — Encrypted sharing
+    // Diagram DSL is encrypted in the browser.
+    // The server stores an opaque blob it cannot read.
+    // The decryption key lives only in the URL fragment (#key=...).
+    // ============================================================
+    const WORKER_URL = 'https://sketchmark.anmism7.workers.dev/';
+    // ── Crypto helpers ────────────────────────────────────────
+    async function generateKey() {
+        return crypto.subtle.generateKey({ name: 'AES-GCM', length: 256 }, true, // extractable so we can export to URL
+        ['encrypt', 'decrypt']);
+    }
+    async function keyToBase64(key) {
+        const raw = await crypto.subtle.exportKey('raw', key);
+        return btoa(String.fromCharCode(...new Uint8Array(raw)));
+    }
+    async function base64ToKey(b64) {
+        const raw = Uint8Array.from(atob(b64), c => c.charCodeAt(0));
+        return crypto.subtle.importKey('raw', raw, { name: 'AES-GCM' }, false, // not extractable on the receiving end
+        ['decrypt']);
+    }
+    // ── Encrypt ───────────────────────────────────────────────
+    async function encryptDSL(dsl, key) {
+        const iv = crypto.getRandomValues(new Uint8Array(12));
+        const encoded = new TextEncoder().encode(dsl);
+        const encrypted = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, encoded);
+        // prepend iv to the blob: [ iv (12 bytes) | ciphertext ]
+        const result = new Uint8Array(12 + encrypted.byteLength);
+        result.set(iv, 0);
+        result.set(new Uint8Array(encrypted), 12);
+        return result;
+    }
+    // ── Decrypt ───────────────────────────────────────────────
+    async function decryptBlob(blob, key) {
+        const iv = blob.slice(0, 12);
+        const ciphertext = blob.slice(12);
+        const decrypted = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, ciphertext);
+        return new TextDecoder().decode(decrypted);
+    }
+    // ── Public API ────────────────────────────────────────────
+    /**
+     * Encrypt DSL, upload to worker, return shareable URL.
+     * The URL fragment (#key=...) never reaches the server.
+     */
+    async function shareDiagram(dsl) {
+        const key = await generateKey();
+        const blob = await encryptDSL(dsl, key);
+        const keyB64 = await keyToBase64(key);
+        const res = await fetch(`${WORKER_URL}/api/blob`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/octet-stream' },
+            body: blob.buffer,
+        });
+        if (!res.ok)
+            throw new Error(`Upload failed: ${res.status}`);
+        const { id } = await res.json();
+        // key goes into the fragment — browser never sends this to any server
+        return `${window.location.origin}/playground.html?s=${id}#key=${keyB64}`;
+    }
+    /**
+     * Read ?s= and #key= from the current URL, fetch + decrypt the diagram.
+     * Returns null if no share params found.
+     */
+    async function loadSharedDiagram() {
+        const params = new URLSearchParams(window.location.search);
+        const id = params.get('s');
+        if (!id)
+            return null;
+        // key is in the fragment — parse manually, not via URLSearchParams
+        // (URLSearchParams on hash strips the #)
+        const fragment = window.location.hash.slice(1);
+        const keyMatch = fragment.match(/key=([^&]+)/);
+        if (!keyMatch)
+            return null;
+        const keyB64 = keyMatch[1];
+        const res = await fetch(`${WORKER_URL}/api/blob/${id}`);
+        if (!res.ok)
+            throw new Error('Diagram not found or expired');
+        const blob = await res.arrayBuffer();
+        const key = await base64ToKey(keyB64);
+        return decryptBlob(blob, key);
+    }
+
     // ============================================================
     // sketchmark — Public API
     // ============================================================
@@ -4670,6 +5393,7 @@ var AIDiagram = (function (exports) {
 
     exports.ANIMATION_CSS = ANIMATION_CSS;
     exports.AnimationController = AnimationController;
+    exports.BUILTIN_FONTS = BUILTIN_FONTS;
     exports.EventEmitter = EventEmitter;
     exports.PALETTES = PALETTES;
     exports.ParseError = ParseError;
@@ -4693,13 +5417,19 @@ var AIDiagram = (function (exports) {
     exports.layout = layout;
     exports.lerp = lerp;
     exports.listThemes = listThemes;
+    exports.loadFont = loadFont;
+    exports.loadSharedDiagram = loadSharedDiagram;
+    exports.markdownMap = markdownMap;
     exports.nodeMap = nodeMap;
     exports.parse = parse;
     exports.parseHex = parseHex;
+    exports.registerFont = registerFont;
     exports.render = render;
     exports.renderToCanvas = renderToCanvas;
     exports.renderToSVG = renderToSVG;
+    exports.resolveFont = resolveFont;
     exports.resolvePalette = resolvePalette;
+    exports.shareDiagram = shareDiagram;
     exports.sleep = sleep;
     exports.svgToPNGDataURL = svgToPNGDataURL;
     exports.svgToString = svgToString;