ts-prorm-orm 1.2.2 → 2.0.0

package/dist/diagrams/er-diagram.js

@@ -1,18 +1,15 @@
 "use strict";
 /**
- * ERDiagram — generates a fully-rendered Entity-Relationship diagram SVG for
- * a collection of ORM models and their associations, styled to the "Industry"
- * blueprint design system.
+ * ERDiagram - generates a fully-rendered Entity-Relationship diagram SVG for
+ * a collection of ORM models and their associations.
  *
  * Look:
- *  - #f2f2f3 ground with a faint hairline blueprint grid
- *  - Solid accent (#5980a6) banner, Barlow Condensed title
- *  - White entity cards on a grid: SQUARE corners, 1px hairline borders, a solid
- *    accent / accent-2 (two-tone) header bar — no vibrant gradients or shadows
- *  - Compact rows: name (mono) + type (mono, neutral) + PK/FK marks
+ *  - White entity cards on a grid: square corners, 1px hairline borders, a
+ *    solid header bar - no gradients or shadows
+ *  - Compact rows: name (mono) + type (mono, muted) + PK/FK marks
  *  - Hairline crow's-foot relationship connectors with mono cardinality marks
- *  - Legend bottom-right, Barlow labels
- *  - Fully self-contained SVG (fonts via an embedded @import + system fallbacks)
+ *  - Legend bottom-right
+ *  - Fully self-contained SVG (system font stack, no web-font import)
  *
  * Usage:
  *   const er = new ERDiagram({
@@ -58,15 +55,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ERDiagram = void 0;
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
-const palette_1 = require("./palette");
-// ─── Helpers ─────────────────────────────────────────────────────────────────
-function xmlEsc(s) {
-    return String(s ?? '')
-        .replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;');
-}
+const svg_1 = require("./core/svg");
+const theme_1 = require("./core/theme");
+const layout_1 = require("./core/layout");
 function resolveType(field) {
     const t = field.type;
     if (typeof t === 'string')
@@ -79,16 +70,8 @@ function resolveType(field) {
     }
     return 'UNKNOWN';
 }
-// ─── ERDiagram class ────────────────────────────────────────────────────────
 class ERDiagram {
     constructor(options) {
-        // Resolved Industry colors (populated per-generate()).
-        this.accentMid = palette_1.INDUSTRY.accent;
-        this.accentText = palette_1.INDUSTRY.accentText;
-        this.accentLight = palette_1.INDUSTRY.accentLight;
-        this.accent2Mid = palette_1.INDUSTRY.accent2;
-        this.accent2Text = palette_1.INDUSTRY.accent2Text;
-        this.accent2Light = palette_1.INDUSTRY.accent2Light;
         this.opts = {
             title: options.title ?? 'Entity-Relationship Diagram',
             columns: options.columns ?? 3,
@@ -99,19 +82,13 @@ class ERDiagram {
             color: options.color ?? '',
         };
     }
-    /** Two-tone entity styling — even entities accent, odd accent-2. */
-    entityStyle(idx) {
-        return idx % 2 === 0
-            ? { header: this.accentMid, light: this.accentLight, text: this.accentText }
-            : { header: this.accent2Mid, light: this.accent2Light, text: this.accent2Text };
-    }
-    // ── Compute box height for a model ──────────────────────────────────────
+    // -- Compute box height for a model -----------------------------------------
     boxHeight(model) {
         const fieldCount = Object.keys(model.fields ?? {}).length;
         const h = ERDiagram.BOX_HDR + fieldCount * ERDiagram.BOX_ROW + ERDiagram.BOX_FOOT;
         return Math.max(h, ERDiagram.MIN_H);
     }
-    // ── Compute grid layout ─────────────────────────────────────────────────
+    // -- Compute grid layout -----------------------------------------------------
     computeLayout() {
         const { models, columns, hGap, vGap } = this.opts;
         const W = ERDiagram.BOX_W;
@@ -120,7 +97,7 @@ class ERDiagram {
         const layout = [];
         let col = 0;
         let row = 0;
-        // Track row max-heights for vertical positioning
+        // Track row max-heights for vertical positioning.
         const rowHeights = [];
         let curRowMaxH = 0;
         models.forEach((m, i) => {
@@ -134,10 +111,10 @@ class ERDiagram {
         col = 0;
         row = 0;
         let rowStart = BANNER + MARGIN;
-        models.forEach((m, i) => {
+        models.forEach((m) => {
             const bh = this.boxHeight(m);
             const x = MARGIN + col * (W + hGap);
-            const y = rowStart + (rowHeights[row] - bh) / 2; // vertically center in row
+            const y = rowStart + (rowHeights[row] - bh) / 2;
             layout.push({
                 model: m,
                 x,
@@ -156,83 +133,70 @@ class ERDiagram {
         });
         return layout;
     }
-    // ── Draw a single entity box ─────────────────────────────────────────────
-    renderBox(box, idx) {
+    // -- Draw a single entity box -------------------------------------------------
+    renderBox(svg, box) {
         const { model, x, y, w, h } = box;
-        const style = this.entityStyle(idx);
         const HDR = ERDiagram.BOX_HDR;
         const ROW = ERDiagram.BOX_ROW;
         const FOOT = ERDiagram.BOX_FOOT;
-        const div = palette_1.INDUSTRY.divider;
         const fieldEntries = Object.entries(model.fields ?? {});
-        let out = `\n  <!-- ═ Entity: ${xmlEsc(model.name)} ═ -->`;
-        // ── Surface + hairline frame (square) ──
-        out += `\n  <rect x="${x}" y="${y}" width="${w}" height="${h}" fill="${palette_1.INDUSTRY.card}"/>`;
-        out += `\n  <rect x="${x}" y="${y}" width="${w}" height="${h}" fill="none" stroke="${div}" stroke-width="1"/>`;
-        // ── Header (solid accent bar) ──
-        out += `\n  <rect x="${x}" y="${y}" width="${w}" height="${HDR}" fill="${style.header}"/>`;
-        out += `\n  <text x="${x + 12}" y="${y + 20}"
-        font-family='${palette_1.FONTS.heading}'
-        font-size="17" font-weight="600" fill="#FFFFFF">${xmlEsc(model.name)}</text>`;
+        // Surface + hairline frame.
+        svg.child('rect', { x, y, width: w, height: h, fill: theme_1.INK.ground, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+        // Header.
+        svg.child('rect', { x, y, width: w, height: HDR, fill: theme_1.INK.wash, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+        svg
+            .child('text', { x: x + 12, y: y + 20, 'font-family': theme_1.FONT.family, 'font-size': theme_1.FONT.body + 6, 'font-weight': 'bold', fill: theme_1.INK.line })
+            .text(model.name);
         const tbl = model.tableName ?? model.name.toLowerCase() + 's';
-        out += `\n  <text x="${x + 12}" y="${y + 35}"
-        font-family='${palette_1.FONTS.mono}' font-size="10"
-        fill="rgba(255,255,255,0.78)">${xmlEsc(tbl)}</text>`;
-        // ── Field rows ──
+        svg
+            .child('text', { x: x + 12, y: y + 35, 'font-family': theme_1.FONT.mono, 'font-size': theme_1.FONT.small - 1, fill: theme_1.INK.muted })
+            .text(tbl);
+        // Field rows.
         fieldEntries.forEach(([colName, field], fi) => {
             const fy = y + HDR + fi * ROW;
             const isPK = !!field.primaryKey;
             const isFK = !!(field.foreignKey || field.references);
             const typeStr = resolveType(field);
-            const rowBg = fi % 2 === 0 ? palette_1.INDUSTRY.card : palette_1.INDUSTRY.neutral[100];
-            out += `\n  <rect x="${x}" y="${fy}" width="${w}" height="${ROW}" fill="${rowBg}"/>`;
-            // Accent stripe: PK → accent, FK → accent-2.
-            if (isPK)
-                out += `\n  <rect x="${x}" y="${fy}" width="3" height="${ROW}" fill="${this.accentMid}"/>`;
-            else if (isFK)
-                out += `\n  <rect x="${x}" y="${fy}" width="3" height="${ROW}" fill="${this.accent2Mid}"/>`;
+            const rowBg = fi % 2 === 0 ? theme_1.INK.ground : theme_1.INK.wash;
+            svg.child('rect', { x, y: fy, width: w, height: ROW, fill: rowBg });
+            // Marker stripe: PK/FK get a heavier stripe than plain columns.
+            if (isPK || isFK) {
+                svg.child('rect', { x, y: fy, width: 3, height: ROW, fill: theme_1.INK.line });
+            }
             const ity = fy + ROW / 2 + 4;
-            // PK/FK mark chip.
             if (isPK || isFK) {
-                out += `\n  <text x="${x + 12}" y="${ity}"
-          font-family='${palette_1.FONTS.heading}' font-size="9" font-weight="600"
-          fill="${isPK ? this.accentText : this.accent2Text}">${isPK ? 'PK' : 'FK'}</text>`;
+                svg
+                    .child('text', { x: x + 12, y: ity, 'font-family': theme_1.FONT.family, 'font-size': theme_1.FONT.small - 1, 'font-weight': 'bold', fill: theme_1.INK.line })
+                    .text(isPK ? 'PK' : 'FK');
             }
             else {
-                out += `\n  <circle cx="${x + 15}" cy="${fy + ROW / 2}" r="2" fill="${palette_1.INDUSTRY.neutral[400]}"/>`;
+                svg.child('circle', { cx: x + 15, cy: fy + ROW / 2, r: 2, fill: theme_1.INK.muted });
             }
             // Column name.
-            const nameC = isPK ? this.accentText : isFK ? this.accent2Text : palette_1.INDUSTRY.text;
-            const nameW = isPK || isFK ? '600' : '400';
-            const dispN = colName.length > 16 ? colName.slice(0, 15) + '…' : colName;
-            out += `\n  <text x="${x + 30}" y="${ity}"
-          font-family='${palette_1.FONTS.mono}' font-size="11"
-          font-weight="${nameW}" fill="${nameC}">${xmlEsc(dispN)}</text>`;
-            // Type (right-aligned, mono neutral).
-            const typTxt = typeStr.length > 14 ? typeStr.slice(0, 13) + '…' : typeStr;
-            out += `\n  <text x="${x + w - 8}" y="${ity}"
-          font-family='${palette_1.FONTS.mono}' font-size="10"
-          fill="${palette_1.INDUSTRY.neutral[700]}" text-anchor="end">${xmlEsc(typTxt)}</text>`;
-            // Row separator (hairline).
-            out += `\n  <line x1="${x}" y1="${fy + ROW}" x2="${x + w}" y2="${fy + ROW}"
-          stroke="${div}" stroke-width="1"/>`;
+            const nameWeight = isPK || isFK ? 'bold' : 'normal';
+            svg
+                .child('text', { x: x + 30, y: ity, 'font-family': theme_1.FONT.mono, 'font-size': theme_1.FONT.small + 2, 'font-weight': nameWeight, fill: theme_1.INK.line })
+                .text((0, layout_1.truncate)(colName, x + w - 8 - 30 - 70, theme_1.FONT.small + 2, true));
+            // Type (right-aligned, mono muted).
+            svg
+                .child('text', { x: x + w - 8, y: ity, 'font-family': theme_1.FONT.mono, 'font-size': theme_1.FONT.small - 1, fill: theme_1.INK.muted, 'text-anchor': 'end' })
+                .text((0, layout_1.truncate)(typeStr, 60, theme_1.FONT.small - 1, true));
+            // Row separator.
+            svg.child('line', { x1: x, y1: fy + ROW, x2: x + w, y2: fy + ROW, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
         });
-        // ── Footer ──
+        // Footer.
         const footY = y + HDR + fieldEntries.length * ROW;
-        out += `\n  <rect x="${x}" y="${footY}" width="${w}" height="${FOOT}" fill="${style.light}"/>`;
-        out += `\n  <line x1="${x}" y1="${footY}" x2="${x + w}" y2="${footY}" stroke="${div}" stroke-width="1"/>`;
+        svg.child('rect', { x, y: footY, width: w, height: FOOT, fill: theme_1.INK.wash });
+        svg.child('line', { x1: x, y1: footY, x2: x + w, y2: footY, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
         const assocCount = (model.associations ?? []).length;
-        out += `\n  <text x="${x + 12}" y="${footY + 17}"
-        font-family='${palette_1.FONTS.body}' font-size="10" fill="${palette_1.INDUSTRY.neutral[700]}">${Object.keys(model.fields ?? {}).length} fields${assocCount > 0 ? ` · ${assocCount} associations` : ''}</text>`;
-        return out;
+        svg
+            .child('text', { x: x + 12, y: footY + 17, 'font-family': theme_1.FONT.family, 'font-size': theme_1.FONT.small - 1, fill: theme_1.INK.muted })
+            .text(`${Object.keys(model.fields ?? {}).length} fields${assocCount > 0 ? `, ${assocCount} associations` : ''}`);
     }
-    // ── Draw relationship lines (crow's-foot) ──────────────────────────────
-    renderRelationships(layout) {
+    // -- Draw relationship lines (crow's-foot) -------------------------------------
+    renderRelationships(svg, layout) {
         const byName = new Map();
         layout.forEach((b) => byName.set(b.model.name, b));
-        let out = '\n  <!-- ═══ RELATIONSHIPS ═══ -->';
-        // Single-hue (accent) connectors — blueprint monochrome.
-        const color = this.accentMid;
         // Cardinality marks per association type.
         const REL_MARK = {
             hasOne: '1:1',
@@ -240,7 +204,6 @@ class ERDiagram {
             belongsTo: 'N:1',
             belongsToMany: 'N:N',
         };
-        // Track drawn pairs to avoid duplicates
         const drawn = new Set();
         layout.forEach((srcBox) => {
             const assocs = srcBox.model.associations ?? [];
@@ -248,13 +211,11 @@ class ERDiagram {
                 const tgtBox = byName.get(assoc.target);
                 if (!tgtBox)
                     return;
-                // De-duplicate: only draw once per pair+type
                 const pairKey = [srcBox.model.name, assoc.target, assoc.type].sort().join('::');
                 if (drawn.has(pairKey))
                     return;
                 drawn.add(pairKey);
                 const label = REL_MARK[assoc.type] ?? assoc.type;
-                // Choose connection points (pick nearest horizontal sides)
                 let sx, sy, tx, ty;
                 let srcSide, tgtSide;
                 const srcMidX = srcBox.x + srcBox.w / 2;
@@ -275,7 +236,7 @@ class ERDiagram {
                     srcSide = 'left';
                     tgtSide = 'right';
                 }
-                // If stacked vertically (same column), use top/bottom exits
+                // If stacked vertically (same column), use top/bottom exits.
                 if (Math.abs(srcMidX - tgtMidX) < 40) {
                     if (tgtBox.y > srcBox.y) {
                         sx = srcBox.x + srcBox.w / 2;
@@ -289,103 +250,100 @@ class ERDiagram {
                         tx = tgtBox.x + tgtBox.w / 2;
                         ty = tgtBox.y + tgtBox.h;
                     }
-                    srcSide = 'right'; // repurpose to mean 'bottom'
-                    tgtSide = 'left'; // repurpose to mean 'top'
+                    srcSide = 'right'; // repurposed to mean 'bottom'
+                    tgtSide = 'left'; // repurposed to mean 'top'
                 }
-                // Bezier control points
                 const dx = Math.abs(tx - sx);
                 const cpOffset = Math.max(dx * 0.5, 60);
                 const cpsx = srcSide === 'right' ? sx + cpOffset : sx - cpOffset;
                 const cptx = tgtSide === 'left' ? tx - cpOffset : tx + cpOffset;
-                // Main line (hairline).
-                out += `\n  <path d="M ${sx} ${sy} C ${cpsx} ${sy}, ${cptx} ${ty}, ${tx} ${ty}"
-      fill="none" stroke="${color}" stroke-width="1.4"/>`;
-                // ── Crow's foot at TARGET (many side for hasMany/belongsToMany) ──
+                svg.child('path', {
+                    d: `M ${sx} ${sy} C ${cpsx} ${sy}, ${cptx} ${ty}, ${tx} ${ty}`,
+                    fill: 'none',
+                    stroke: theme_1.INK.line,
+                    'stroke-width': theme_1.STROKE.hair,
+                });
                 const manyAtTarget = assoc.type === 'hasMany' || assoc.type === 'belongsToMany';
                 const manyAtSource = assoc.type === 'belongsTo' || assoc.type === 'belongsToMany';
-                if (manyAtTarget) {
-                    out += this.crowFoot(tx, ty, tgtSide === 'left' ? 'right' : 'left', color);
-                }
-                else {
-                    out += this.singleBar(tx, ty, tgtSide === 'left' ? 'right' : 'left', color);
-                }
-                if (manyAtSource) {
-                    out += this.crowFoot(sx, sy, srcSide === 'right' ? 'left' : 'right', color);
-                }
-                else {
-                    out += this.singleBar(sx, sy, srcSide === 'right' ? 'left' : 'right', color);
-                }
+                if (manyAtTarget)
+                    this.crowFoot(svg, tx, ty, tgtSide === 'left' ? 'right' : 'left');
+                else
+                    this.singleBar(svg, tx, ty, tgtSide === 'left' ? 'right' : 'left');
+                if (manyAtSource)
+                    this.crowFoot(svg, sx, sy, srcSide === 'right' ? 'left' : 'right');
+                else
+                    this.singleBar(svg, sx, sy, srcSide === 'right' ? 'left' : 'right');
                 // Cardinality label at midpoint (mono, hairline chip).
                 const mx = (sx + tx) / 2;
                 const my = (sy + ty) / 2;
                 const labelW = label.length * 8 + 14;
-                out += `\n  <rect x="${mx - labelW / 2}" y="${my - 10}" width="${labelW}" height="18"
-      fill="${palette_1.INDUSTRY.card}" stroke="${color}" stroke-width="1"/>`;
-                out += `\n  <text x="${mx}" y="${my + 3}"
-      font-family='${palette_1.FONTS.mono}' font-size="11" font-weight="600"
-      fill="${this.accentText}" text-anchor="middle">${xmlEsc(label)}</text>`;
-                // Alias label (smaller, below)
+                svg.child('rect', {
+                    x: mx - labelW / 2,
+                    y: my - 10,
+                    width: labelW,
+                    height: 18,
+                    fill: theme_1.INK.ground,
+                    stroke: theme_1.INK.line,
+                    'stroke-width': theme_1.STROKE.hair,
+                });
+                svg
+                    .child('text', { x: mx, y: my + 3, 'font-family': theme_1.FONT.mono, 'font-size': theme_1.FONT.small + 1, 'font-weight': 'bold', fill: theme_1.INK.line, 'text-anchor': 'middle' })
+                    .text(label);
                 if (assoc.as) {
-                    out += `\n  <text x="${mx}" y="${my + 20}"
-        font-family='${palette_1.FONTS.mono}' font-size="9" fill="${palette_1.INDUSTRY.neutral[600]}"
-        text-anchor="middle">as: ${xmlEsc(assoc.as)}</text>`;
+                    svg
+                        .child('text', { x: mx, y: my + 20, 'font-family': theme_1.FONT.mono, 'font-size': theme_1.FONT.small - 1, fill: theme_1.INK.muted, 'text-anchor': 'middle' })
+                        .text(`as: ${assoc.as}`);
                 }
             });
         });
-        return out;
     }
-    // ── Crow's foot symbol ──────────────────────────────────────────────────
-    crowFoot(x, y, dir, color) {
+    // -- Crow's foot symbol ---------------------------------------------------------
+    crowFoot(svg, x, y, dir) {
         const sign = dir === 'right' ? -1 : 1;
         const reach = 12;
         const spread = 7;
-        return `
-  <!-- crow foot at (${x},${y}) dir=${dir} -->
-  <line x1="${x}" y1="${y}" x2="${x + sign * reach}" y2="${y - spread}"
-        stroke="${color}" stroke-width="1.4"/>
-  <line x1="${x}" y1="${y}" x2="${x + sign * reach}" y2="${y}"
-        stroke="${color}" stroke-width="1.4"/>
-  <line x1="${x}" y1="${y}" x2="${x + sign * reach}" y2="${y + spread}"
-        stroke="${color}" stroke-width="1.4"/>
-  <line x1="${x + sign * reach}" y1="${y - spread}" x2="${x + sign * reach}" y2="${y + spread}"
-        stroke="${color}" stroke-width="1.2"/>`;
+        svg.child('line', { x1: x, y1: y, x2: x + sign * reach, y2: y - spread, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+        svg.child('line', { x1: x, y1: y, x2: x + sign * reach, y2: y, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+        svg.child('line', { x1: x, y1: y, x2: x + sign * reach, y2: y + spread, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+        svg.child('line', {
+            x1: x + sign * reach,
+            y1: y - spread,
+            x2: x + sign * reach,
+            y2: y + spread,
+            stroke: theme_1.INK.line,
+            'stroke-width': theme_1.STROKE.hair,
+        });
     }
-    // ── Single bar (one) symbol ─────────────────────────────────────────────
-    singleBar(x, y, dir, color) {
+    // -- Single bar (one) symbol -----------------------------------------------------
+    singleBar(svg, x, y, dir) {
         const sign = dir === 'right' ? -1 : 1;
         const gap = 6;
         const reach = 12;
         const ht = 7;
-        return `
-  <!-- single bar at (${x},${y}) dir=${dir} -->
-  <line x1="${x + sign * gap}" y1="${y - ht}" x2="${x + sign * gap}" y2="${y + ht}"
-        stroke="${color}" stroke-width="1.6"/>
-  <line x1="${x + sign * reach}" y1="${y - ht}" x2="${x + sign * reach}" y2="${y + ht}"
-        stroke="${color}" stroke-width="1.6"/>`;
+        svg.child('line', { x1: x + sign * gap, y1: y - ht, x2: x + sign * gap, y2: y + ht, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.heavy });
+        svg.child('line', { x1: x + sign * reach, y1: y - ht, x2: x + sign * reach, y2: y + ht, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.heavy });
     }
-    // ── Banner ──────────────────────────────────────────────────────────────
-    renderBanner(totalW) {
+    // -- Banner ------------------------------------------------------------------------
+    renderBanner(svg, totalW) {
         const H = ERDiagram.BANNER_H;
         const { title, models } = this.opts;
         const now = new Date().toISOString().slice(0, 10);
-        return /* xml */ `
-  <!-- ═══ BANNER ═══ -->
-  <rect width="${totalW}" height="${H}" fill="${this.accentMid}"/>
-  <text x="24" y="30"
-        font-family='${palette_1.FONTS.heading}'
-        font-size="24" font-weight="600" fill="#FFFFFF">${xmlEsc(title)}</text>
-  <text x="24" y="48"
-        font-family='${palette_1.FONTS.body}' font-size="12" fill="rgba(255,255,255,0.82)">${models.length} entities · generated ${now}</text>
-  <text x="${totalW - 20}" y="30"
-        font-family='${palette_1.FONTS.heading}' font-size="12" font-weight="600"
-        letter-spacing="1.4" fill="rgba(255,255,255,0.85)" text-anchor="end">ER DIAGRAM</text>`;
+        svg.child('rect', { width: totalW, height: H, fill: theme_1.INK.wash, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+        svg
+            .child('text', { x: 24, y: 30, 'font-family': theme_1.FONT.family, 'font-size': theme_1.FONT.title + 13, 'font-weight': 'bold', fill: theme_1.INK.line })
+            .text(title);
+        svg
+            .child('text', { x: 24, y: 48, 'font-family': theme_1.FONT.family, 'font-size': theme_1.FONT.small + 3, fill: theme_1.INK.muted })
+            .text(`${models.length} entities, generated ${now}`);
+        svg
+            .child('text', { x: totalW - 20, y: 30, 'font-family': theme_1.FONT.family, 'font-size': theme_1.FONT.small + 3, 'font-weight': 'bold', 'letter-spacing': 1.4, fill: theme_1.INK.muted, 'text-anchor': 'end' })
+            .text('ER DIAGRAM');
     }
-    // ── Legend ──────────────────────────────────────────────────────────────
-    renderLegend(lx, ly) {
+    // -- Legend ----------------------------------------------------------------------
+    renderLegend(svg, lx, ly) {
         const LW = ERDiagram.LEGEND_W;
         const LP = ERDiagram.LEGEND_PAD;
         const lineH = 28;
-        const div = palette_1.INDUSTRY.divider;
         const items = [
             { mark: '1:1', label: 'Has One' },
             { mark: '1:N', label: 'Has Many' },
@@ -393,71 +351,52 @@ class ERDiagram {
             { mark: 'N:N', label: 'Belongs To Many' },
         ];
         const legendH = LP * 2 + 24 + items.length * lineH + 44;
-        let out = `\n  <!-- ═══ LEGEND ═══ -->`;
-        out += `\n  <rect x="${lx}" y="${ly}" width="${LW}" height="${legendH}"
-      fill="${palette_1.INDUSTRY.card}" stroke="${div}" stroke-width="1"/>`;
-        out += `\n  <rect x="${lx}" y="${ly}" width="${LW}" height="30" fill="${this.accentMid}"/>`;
-        out += `\n  <text x="${lx + LP}" y="${ly + 20}"
-      font-family='${palette_1.FONTS.heading}' font-size="13" font-weight="600"
-      letter-spacing="1" fill="#FFFFFF">LEGEND</text>`;
+        svg.child('rect', { x: lx, y: ly, width: LW, height: legendH, fill: theme_1.INK.ground, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+        svg.child('rect', { x: lx, y: ly, width: LW, height: 30, fill: theme_1.INK.wash, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+        svg
+            .child('text', { x: lx + LP, y: ly + 20, 'font-family': theme_1.FONT.family, 'font-size': theme_1.FONT.body + 2, 'font-weight': 'bold', 'letter-spacing': 1, fill: theme_1.INK.line })
+            .text('LEGEND');
         items.forEach((item, i) => {
             const iy = ly + 30 + LP + i * lineH;
             const badgeW = 34;
-            out += `\n  <rect x="${lx + LP}" y="${iy + 4}" width="${badgeW}" height="18"
-        fill="${this.accentLight}" stroke="${div}" stroke-width="1"/>`;
-            out += `\n  <text x="${lx + LP + badgeW / 2}" y="${iy + 17}"
-        font-family='${palette_1.FONTS.mono}' font-size="10" font-weight="600"
-        fill="${this.accentText}" text-anchor="middle">${item.mark}</text>`;
-            // Sample connector line.
-            out += `\n  <line x1="${lx + LP + badgeW + 8}" y1="${iy + 13}"
-        x2="${lx + LP + badgeW + 30}" y2="${iy + 13}"
-        stroke="${this.accentMid}" stroke-width="1.4"/>`;
-            out += `\n  <text x="${lx + LP + badgeW + 38}" y="${iy + 17}"
-        font-family='${palette_1.FONTS.body}' font-size="12"
-        fill="${palette_1.INDUSTRY.text}">${item.label}</text>`;
+            svg.child('rect', { x: lx + LP, y: iy + 4, width: badgeW, height: 18, fill: theme_1.INK.wash, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+            svg
+                .child('text', { x: lx + LP + badgeW / 2, y: iy + 17, 'font-family': theme_1.FONT.mono, 'font-size': theme_1.FONT.small - 1, 'font-weight': 'bold', fill: theme_1.INK.line, 'text-anchor': 'middle' })
+                .text(item.mark);
+            svg.child('line', {
+                x1: lx + LP + badgeW + 8,
+                y1: iy + 13,
+                x2: lx + LP + badgeW + 30,
+                y2: iy + 13,
+                stroke: theme_1.INK.line,
+                'stroke-width': theme_1.STROKE.hair,
+            });
+            svg
+                .child('text', { x: lx + LP + badgeW + 38, y: iy + 17, 'font-family': theme_1.FONT.family, 'font-size': theme_1.FONT.body + 1, fill: theme_1.INK.line })
+                .text(item.label);
         });
         // PK/FK key.
         const ky = ly + 30 + LP + items.length * lineH + 6;
-        out += `\n  <line x1="${lx + LP}" y1="${ky + 4}" x2="${lx + LP + 44}" y2="${ky + 4}" stroke="${div}" stroke-width="1"/>`;
-        out += `\n  <text x="${lx + LP}" y="${ky + 20}"
-        font-family='${palette_1.FONTS.heading}' font-size="9" font-weight="600"
-        fill="${this.accentText}">PK</text>`;
-        out += `\n  <text x="${lx + LP + 22}" y="${ky + 20}"
-        font-family='${palette_1.FONTS.body}' font-size="11" fill="${palette_1.INDUSTRY.neutral[700]}">Primary Key</text>`;
-        out += `\n  <text x="${lx + LP}" y="${ky + 36}"
-        font-family='${palette_1.FONTS.heading}' font-size="9" font-weight="600"
-        fill="${this.accent2Text}">FK</text>`;
-        out += `\n  <text x="${lx + LP + 22}" y="${ky + 36}"
-        font-family='${palette_1.FONTS.body}' font-size="11" fill="${palette_1.INDUSTRY.neutral[700]}">Foreign Key</text>`;
-        return out;
-    }
-    /**
-     * Embedded font @import so browsers resolve Barlow / JetBrains Mono. Wrapped
-     * in CDATA because the Google-Fonts URL contains raw `&` separators that
-     * would otherwise be invalid XML in this string-built document.
-     */
-    fontDefs() {
-        return `\n  <defs><style type="text/css"><![CDATA[${palette_1.FONT_IMPORT}]]></style></defs>`;
+        svg.child('line', { x1: lx + LP, y1: ky + 4, x2: lx + LP + 44, y2: ky + 4, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+        svg
+            .child('text', { x: lx + LP, y: ky + 20, 'font-family': theme_1.FONT.family, 'font-size': theme_1.FONT.small - 1, 'font-weight': 'bold', fill: theme_1.INK.line })
+            .text('PK');
+        svg
+            .child('text', { x: lx + LP + 22, y: ky + 20, 'font-family': theme_1.FONT.family, 'font-size': theme_1.FONT.small + 2, fill: theme_1.INK.muted })
+            .text('Primary Key');
+        svg
+            .child('text', { x: lx + LP, y: ky + 36, 'font-family': theme_1.FONT.family, 'font-size': theme_1.FONT.small - 1, 'font-weight': 'bold', fill: theme_1.INK.line })
+            .text('FK');
+        svg
+            .child('text', { x: lx + LP + 22, y: ky + 36, 'font-family': theme_1.FONT.family, 'font-size': theme_1.FONT.small + 2, fill: theme_1.INK.muted })
+            .text('Foreign Key');
     }
-    // ── Generate the full SVG ────────────────────────────────────────────────
-    generate() {
-        const { models, columns } = this.opts;
-        void columns;
+    // -- Build the full SVG document ---------------------------------------------------
+    build() {
         const MARGIN = ERDiagram.MARGIN;
         const BANNER = ERDiagram.BANNER_H;
         const LEGEND_W = ERDiagram.LEGEND_W;
         const BOX_W = ERDiagram.BOX_W;
-        // Resolve accent / accent-2 from --color (Industry defaults otherwise).
-        const accent = (0, palette_1.resolveAccent)(this.opts.color);
-        const a2 = (0, palette_1.accent2Of)(accent);
-        this.accentMid = accent.mid;
-        this.accentText = accent.text;
-        this.accentLight = accent.light;
-        this.accent2Mid = a2.color;
-        this.accent2Text = a2.text;
-        this.accent2Light = a2.light;
-        // Theme reserved for future dark-mode support of ER (kept API-compatible).
-        void (0, palette_1.resolveTheme)(this.opts.theme);
         const layout = this.computeLayout();
         // Guard: with no models there are no boxes, so `Math.max(...[])` would be
         // -Infinity and produce invalid width/height/viewBox. Emit a minimal, valid
@@ -465,61 +404,43 @@ class ERDiagram {
         if (layout.length === 0) {
             const emptyW = BOX_W + 2 * MARGIN;
             const emptyH = BANNER + MARGIN * 2;
-            return [
-                `<?xml version="1.0" encoding="UTF-8"?>`,
-                `<!-- Generated by ts-prorm-orm ERDiagram -->`,
-                `<svg xmlns="http://www.w3.org/2000/svg"`,
-                `     width="${emptyW}" height="${emptyH}"`,
-                `     viewBox="0 0 ${emptyW} ${emptyH}">`,
-                this.fontDefs(),
-                `  <rect width="${emptyW}" height="${emptyH}" fill="${palette_1.INDUSTRY.ground}"/>`,
-                this.renderBanner(emptyW),
-                `  <text x="${emptyW / 2}" y="${BANNER + MARGIN + 20}"`,
-                `        font-family='${palette_1.FONTS.body}' font-size="14" fill="${palette_1.INDUSTRY.neutral[600]}"`,
-                `        text-anchor="middle">No entities to display</text>`,
-                `</svg>`,
-            ].join('\n');
+            const doc = new svg_1.SvgDocument(emptyW, emptyH);
+            const svg = doc.root;
+            svg.child('rect', { width: emptyW, height: emptyH, fill: theme_1.INK.ground });
+            this.renderBanner(svg, emptyW);
+            svg
+                .child('text', { x: emptyW / 2, y: BANNER + MARGIN + 20, 'font-family': theme_1.FONT.family, 'font-size': theme_1.FONT.body + 3, fill: theme_1.INK.muted, 'text-anchor': 'middle' })
+                .text('No entities to display');
+            return doc;
         }
-        // Compute total canvas size
+        // Compute total canvas size.
         const maxX = Math.max(...layout.map((b) => b.x + b.w)) + MARGIN;
         const maxY = Math.max(...layout.map((b) => b.y + b.h)) + MARGIN;
-        // Add space for legend on right (only if fits neatly)
+        // Add space for legend on the right.
         const legendX = maxX + 20;
         const legendY = BANNER + MARGIN;
         const totalW = legendX + LEGEND_W + MARGIN;
         const totalH = Math.max(maxY, legendY + 250);
-        let svg = [
-            `<?xml version="1.0" encoding="UTF-8"?>`,
-            `<!-- Generated by ts-prorm-orm ERDiagram -->`,
-            `<svg xmlns="http://www.w3.org/2000/svg"`,
-            `     width="${totalW}" height="${totalH}"`,
-            `     viewBox="0 0 ${totalW} ${totalH}">`,
-        ].join('\n');
-        svg += this.fontDefs();
-        // Ground
-        svg += `\n  <rect width="${totalW}" height="${totalH}" fill="${palette_1.INDUSTRY.ground}"/>`;
-        // Faint hairline blueprint grid.
-        svg += `\n  <!-- blueprint grid -->`;
+        const doc = new svg_1.SvgDocument(totalW, totalH);
+        const svg = doc.root;
+        svg.child('rect', { width: totalW, height: totalH, fill: theme_1.INK.ground });
+        // Faint hairline grid.
+        const grid = svg.child('g', { opacity: 0.5 });
         for (let gx = 0; gx < totalW; gx += 40) {
-            svg += `\n  <line x1="${gx}" y1="${BANNER}" x2="${gx}" y2="${totalH}"
-      stroke="${palette_1.INDUSTRY.neutral[200]}" stroke-width="0.5" opacity="0.6"/>`;
+            grid.child('line', { x1: gx, y1: BANNER, x2: gx, y2: totalH, stroke: theme_1.INK.wash, 'stroke-width': theme_1.STROKE.hair });
         }
         for (let gy = BANNER; gy < totalH; gy += 40) {
-            svg += `\n  <line x1="0" y1="${gy}" x2="${totalW}" y2="${gy}"
-      stroke="${palette_1.INDUSTRY.neutral[200]}" stroke-width="0.5" opacity="0.6"/>`;
+            grid.child('line', { x1: 0, y1: gy, x2: totalW, y2: gy, stroke: theme_1.INK.wash, 'stroke-width': theme_1.STROKE.hair });
         }
-        // Banner
-        svg += this.renderBanner(totalW);
-        // Relationship lines (behind boxes)
-        svg += this.renderRelationships(layout);
-        // Entity boxes
-        layout.forEach((box, i) => {
-            svg += this.renderBox(box, i);
-        });
-        // Legend
-        svg += this.renderLegend(legendX, legendY);
-        svg += `\n</svg>`;
-        return svg;
+        this.renderBanner(svg, totalW);
+        // Relationship lines, behind the entity boxes.
+        this.renderRelationships(svg, layout);
+        layout.forEach((box) => this.renderBox(svg, box));
+        this.renderLegend(svg, legendX, legendY);
+        return doc;
+    }
+    generate() {
+        return this.build().toString('Generated by ts-prorm-orm ERDiagram');
     }
     /**
      * Write the SVG to a file. Creates parent directories if needed.