ts-prorm-orm 1.1.0 → 1.2.0

package/dist/diagrams/er-diagram.js

@@ -1,17 +1,18 @@
 "use strict";
 /**
  * ERDiagram — generates a fully-rendered Entity-Relationship diagram SVG for
- * a collection of ORM models and their associations.
+ * a collection of ORM models and their associations, styled to the "Industry"
+ * blueprint design system.
  *
- * Features:
- *  - Auto-layout (configurable columns, auto-height per entity)
- *  - Color-coded entity headers (unique hue per model)
- *  - Compact field rows: name + type badge + PK/FK icons
- *  - Crow's-foot relationship lines with cardinality labels
- *  - Bezier curves that avoid box overlap
- *  - Relationship legend bottom-right
- *  - Title bar & metadata strip
- *  - Fully self-contained SVG (no external resources)
+ * 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
+ *  - 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)
  *
  * Usage:
  *   const er = new ERDiagram({
@@ -57,46 +58,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ERDiagram = void 0;
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
-// ─── Color palette for entity headers (cycles for > 12 models) ─────────────
-const ENTITY_COLORS = [
-    { header: '#1E3A8A', mid: '#2563EB', light: '#DBEAFE', text: '#1E3A8A' }, // blue
-    { header: '#5B21B6', mid: '#7C3AED', light: '#EDE9FE', text: '#5B21B6' }, // violet
-    { header: '#065F46', mid: '#059669', light: '#D1FAE5', text: '#065F46' }, // emerald
-    { header: '#92400E', mid: '#D97706', light: '#FEF3C7', text: '#92400E' }, // amber
-    { header: '#831843', mid: '#DB2777', light: '#FCE7F3', text: '#831843' }, // pink
-    { header: '#0C4A6E', mid: '#0284C7', light: '#E0F2FE', text: '#0C4A6E' }, // sky
-    { header: '#1E1B4B', mid: '#4338CA', light: '#E0E7FF', text: '#1E1B4B' }, // indigo
-    { header: '#4A1942', mid: '#9333EA', light: '#F3E8FF', text: '#4A1942' }, // purple
-    { header: '#7F1D1D', mid: '#DC2626', light: '#FEE2E2', text: '#7F1D1D' }, // red
-    { header: '#134E4A', mid: '#0D9488', light: '#CCFBF1', text: '#134E4A' }, // teal
-    { header: '#1C1917', mid: '#44403C', light: '#F5F5F4', text: '#1C1917' }, // stone
-    { header: '#14532D', mid: '#16A34A', light: '#DCFCE7', text: '#14532D' }, // green
-];
-// ─── Type-color helper (compact, same palette as model-diagram) ─────────────
-function typeCol(t) {
-    const s = t.toUpperCase();
-    if (/STRING|VARCHAR|CHAR|TEXT/.test(s))
-        return { text: '#059669', bg: '#D1FAE5' };
-    if (/INT|BIGINT|SMALLINT|FLOAT|DOUBLE|DECIMAL|NUMERIC/.test(s))
-        return { text: '#7C3AED', bg: '#EDE9FE' };
-    if (/DATE|TIME|TIMESTAMP/.test(s))
-        return { text: '#EA580C', bg: '#FFEDD5' };
-    if (/BOOL/.test(s))
-        return { text: '#DB2777', bg: '#FCE7F3' };
-    if (/UUID/.test(s))
-        return { text: '#0891B2', bg: '#CFFAFE' };
-    if (/JSONB/.test(s))
-        return { text: '#4338CA', bg: '#E0E7FF' };
-    if (/JSON/.test(s))
-        return { text: '#4F46E5', bg: '#E0E7FF' };
-    if (/BLOB|BINARY/.test(s))
-        return { text: '#92400E', bg: '#FEF3C7' };
-    if (/ENUM/.test(s))
-        return { text: '#B45309', bg: '#FEF3C7' };
-    if (/ARRAY/.test(s))
-        return { text: '#0369A1', bg: '#E0F2FE' };
-    return { text: '#475569', bg: '#F1F5F9' };
-}
+const palette_1 = require("./palette");
+// ─── Helpers ─────────────────────────────────────────────────────────────────
 function xmlEsc(s) {
     return String(s ?? '')
         .replace(/&/g, '&')
@@ -119,6 +82,13 @@ function resolveType(field) {
 // ─── 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,
@@ -129,6 +99,12 @@ 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 ──────────────────────────────────────
     boxHeight(model) {
         const fieldCount = Object.keys(model.fields ?? {}).length;
@@ -181,106 +157,73 @@ class ERDiagram {
         return layout;
     }
     // ── Draw a single entity box ─────────────────────────────────────────────
-    renderBox(box, colorIdx) {
+    renderBox(box, idx) {
         const { model, x, y, w, h } = box;
-        const colors = ENTITY_COLORS[colorIdx % ENTITY_COLORS.length];
-        const uid = model.name.replace(/\W/g, '') + colorIdx;
+        const style = this.entityStyle(idx);
         const HDR = ERDiagram.BOX_HDR;
         const ROW = ERDiagram.BOX_ROW;
         const FOOT = ERDiagram.BOX_FOOT;
-        const R = 10;
+        const div = palette_1.INDUSTRY.divider;
         const fieldEntries = Object.entries(model.fields ?? {});
         let out = `\n  <!-- ═ Entity: ${xmlEsc(model.name)} ═ -->`;
-        // ── Shadow & shell ──
-        out += `\n  <defs>
-    <linearGradient id="ehg${uid}" x1="0" y1="0" x2="1" y2="1" gradientUnits="objectBoundingBox">
-      <stop offset="0%" stop-color="${colors.header}"/>
-      <stop offset="100%" stop-color="${colors.mid}"/>
-    </linearGradient>
-    <filter id="esh${uid}" x="-8%" y="-8%" width="116%" height="130%">
-      <feDropShadow dx="0" dy="3" stdDeviation="6" flood-color="#00000020"/>
-    </filter>
-  </defs>`;
-        out += `\n  <rect x="${x - 1}" y="${y - 1}" width="${w + 2}" height="${h + 2}"
-        rx="${R + 1}" fill="#CBD5E1" filter="url(#esh${uid})"/>`;
-        out += `\n  <rect x="${x}" y="${y}" width="${w}" height="${h}"
-        rx="${R}" fill="#FFFFFF"/>`;
-        // ── Header ──
-        out += `\n  <rect x="${x}" y="${y}" width="${w}" height="${HDR}"
-        rx="${R}" fill="url(#ehg${uid})"/>`;
-        // flatten bottom of header
-        out += `\n  <rect x="${x}" y="${y + HDR - R}" width="${w}" height="${R}"
-        fill="url(#ehg${uid})"/>`;
-        // Entity name
-        out += `\n  <text x="${x + w / 2}" y="${y + 28}"
-        font-family="system-ui,-apple-system,sans-serif"
-        font-size="16" font-weight="800" fill="#FFFFFF"
-        text-anchor="middle">${xmlEsc(model.name)}</text>`;
-        // Table name sub-label
+        // ── 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>`;
         const tbl = model.tableName ?? model.name.toLowerCase() + 's';
-        out += `\n  <text x="${x + w / 2}" y="${y + 42}"
-        font-family="'SF Mono',monospace" font-size="10"
-        fill="rgba(255,255,255,0.65)" text-anchor="middle">${xmlEsc(tbl)}</text>`;
+        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 ──
         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 tc = typeCol(typeStr);
-            const rowBg = fi % 2 === 0 ? '#FFFFFF' : '#F9FAFB';
+            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
+            // Accent stripe: PK → accent, FK → accent-2.
             if (isPK)
-                out += `\n  <rect x="${x}" y="${fy}" width="4" height="${ROW}" fill="#F59E0B"/>`;
+                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="4" height="${ROW}" fill="#3B82F6"/>`;
-            // Icon (SVG instead of emoji)
-            const ixc = x + 14;
+                out += `\n  <rect x="${x}" y="${fy}" width="3" height="${ROW}" fill="${this.accent2Mid}"/>`;
             const ity = fy + ROW / 2 + 4;
-            if (isPK) {
-                out += `\n  <g transform="translate(${ixc - 5}, ${ity - 7})">
-          <path d="M9 1l3 3-3 3 2 2 3-3 3 3 2-2-3-3 3-3-2-2-3 3-3-3z" fill="#F59E0B"/>
-        </g>`;
-            }
-            else if (isFK) {
-                out += `\n  <g transform="translate(${ixc - 5}, ${ity - 7})">
-          <path d="M6 4l4 4-4 4M10 4l4 4" stroke="#3B82F6" stroke-width="1.5" fill="none"/>
-        </g>`;
+            // 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>`;
             }
             else {
-                out += `\n  <circle cx="${ixc}" cy="${fy + ROW / 2}" r="2.5" fill="#CBD5E1"/>`;
+                out += `\n  <circle cx="${x + 15}" cy="${fy + ROW / 2}" r="2" fill="${palette_1.INDUSTRY.neutral[400]}"/>`;
             }
-            // Column name
-            const nameC = isPK ? '#92400E' : isFK ? '#1E40AF' : '#1E293B';
-            const nameW = isPK ? '700' : isFK ? '600' : '400';
-            const dispN = colName.length > 18 ? colName.slice(0, 17) + '…' : colName;
-            out += `\n  <text x="${x + 24}" y="${ity}"
-          font-family="'SF Mono',monospace" font-size="11"
+            // 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 badge (right-aligned)
-            const typTxt = typeStr.length > 12 ? typeStr.slice(0, 11) + '…' : typeStr;
-            const tbW = typTxt.length * 6.5 + 10;
-            const tbX = x + w - tbW - 6;
-            out += `\n  <rect x="${tbX}" y="${fy + 6}" width="${tbW}" height="16" rx="4" fill="${tc.bg}"/>`;
-            out += `\n  <text x="${tbX + tbW / 2}" y="${fy + 18}"
-          font-family="'SF Mono',monospace" font-size="9"
-          font-weight="600" fill="${tc.text}" text-anchor="middle">${xmlEsc(typTxt)}</text>`;
-            // Row separator
+            // 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="#E2E8F0" stroke-width="0.5"/>`;
+          stroke="${div}" stroke-width="1"/>`;
         });
         // ── Footer ──
         const footY = y + HDR + fieldEntries.length * ROW;
-        out += `\n  <rect x="${x}" y="${footY}" width="${w}" height="${FOOT}" fill="${colors.light}"/>`;
-        // round bottom
-        out += `\n  <rect x="${x}" y="${footY + FOOT - R}" width="${w}" height="${R}"
-        rx="${R}" fill="${colors.light}"/>`;
+        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"/>`;
         const assocCount = (model.associations ?? []).length;
-        out += `\n  <text x="${x + 10}" y="${footY + 19}"
-        font-family="system-ui,sans-serif" font-size="10" fill="${colors.text}" font-weight="600">
-      ${Object.keys(model.fields ?? {}).length} fields${assocCount > 0 ? ` · ${assocCount} associations` : ''}
-    </text>`;
+        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;
     }
     // ── Draw relationship lines (crow's-foot) ──────────────────────────────
@@ -288,12 +231,14 @@ class ERDiagram {
         const byName = new Map();
         layout.forEach((b) => byName.set(b.model.name, b));
         let out = '\n  <!-- ═══ RELATIONSHIPS ═══ -->';
-        // Relationship line colors
-        const REL_COLORS = {
-            hasOne: '#0891B2',
-            hasMany: '#7C3AED',
-            belongsTo: '#059669',
-            belongsToMany: '#DC2626',
+        // Single-hue (accent) connectors — blueprint monochrome.
+        const color = this.accentMid;
+        // Cardinality marks per association type.
+        const REL_MARK = {
+            hasOne: '1:1',
+            hasMany: '1:N',
+            belongsTo: 'N:1',
+            belongsToMany: 'N:N',
         };
         // Track drawn pairs to avoid duplicates
         const drawn = new Set();
@@ -308,15 +253,13 @@ class ERDiagram {
                 if (drawn.has(pairKey))
                     return;
                 drawn.add(pairKey);
-                const color = REL_COLORS[assoc.type] ?? '#94A3B8';
-                const label = assoc.type;
+                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;
                 const tgtMidX = tgtBox.x + tgtBox.w / 2;
                 if (tgtMidX >= srcMidX) {
-                    // target is to the right
                     sx = srcBox.x + srcBox.w;
                     sy = srcBox.y + srcBox.h / 2;
                     tx = tgtBox.x;
@@ -325,7 +268,6 @@ class ERDiagram {
                     tgtSide = 'left';
                 }
                 else {
-                    // target is to the left
                     sx = srcBox.x;
                     sy = srcBox.y + srcBox.h / 2;
                     tx = tgtBox.x + tgtBox.w;
@@ -355,10 +297,9 @@ class ERDiagram {
                 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
+                // Main line (hairline).
                 out += `\n  <path d="M ${sx} ${sy} C ${cpsx} ${sy}, ${cptx} ${ty}, ${tx} ${ty}"
-      fill="none" stroke="${color}" stroke-width="1.8"
-      stroke-dasharray="0" opacity="0.85"/>`;
+      fill="none" stroke="${color}" stroke-width="1.4"/>`;
                 // ── Crow's foot at TARGET (many side for hasMany/belongsToMany) ──
                 const manyAtTarget = assoc.type === 'hasMany' || assoc.type === 'belongsToMany';
                 const manyAtSource = assoc.type === 'belongsTo' || assoc.type === 'belongsToMany';
@@ -374,19 +315,19 @@ class ERDiagram {
                 else {
                     out += this.singleBar(sx, sy, srcSide === 'right' ? 'left' : 'right', color);
                 }
-                // Relationship label at midpoint
+                // Cardinality label at midpoint (mono, hairline chip).
                 const mx = (sx + tx) / 2;
                 const my = (sy + ty) / 2;
-                const labelW = label.length * 7 + 16;
-                out += `\n  <rect x="${mx - labelW / 2}" y="${my - 11}" width="${labelW}" height="18"
-      rx="5" fill="white" stroke="${color}" stroke-width="1" opacity="0.95"/>`;
+                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="system-ui,sans-serif" font-size="10" font-weight="600"
-      fill="${color}" text-anchor="middle">${xmlEsc(label)}</text>`;
+      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)
                 if (assoc.as) {
-                    out += `\n  <text x="${mx}" y="${my + 18}"
-        font-family="'SF Mono',monospace" font-size="9" fill="#94A3B8"
+                    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>`;
                 }
             });
@@ -394,23 +335,20 @@ class ERDiagram {
         return out;
     }
     // ── Crow's foot symbol ──────────────────────────────────────────────────
-    // direction = which way the line is approaching the symbol
-    // (the symbol points AWAY from the entity)
     crowFoot(x, y, dir, color) {
-        // 'right' means line comes from the right → symbol points left into the entity
         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.8"/>
+        stroke="${color}" stroke-width="1.4"/>
   <line x1="${x}" y1="${y}" x2="${x + sign * reach}" y2="${y}"
-        stroke="${color}" stroke-width="1.8"/>
+        stroke="${color}" stroke-width="1.4"/>
   <line x1="${x}" y1="${y}" x2="${x + sign * reach}" y2="${y + spread}"
-        stroke="${color}" stroke-width="1.8"/>
+        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.5"/>`;
+        stroke="${color}" stroke-width="1.2"/>`;
     }
     // ── Single bar (one) symbol ─────────────────────────────────────────────
     singleBar(x, y, dir, color) {
@@ -421,9 +359,9 @@ class ERDiagram {
         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.8"/>
+        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.8"/>`;
+        stroke="${color}" stroke-width="1.6"/>`;
     }
     // ── Banner ──────────────────────────────────────────────────────────────
     renderBanner(totalW) {
@@ -432,91 +370,94 @@ class ERDiagram {
         const now = new Date().toISOString().slice(0, 10);
         return /* xml */ `
   <!-- ═══ BANNER ═══ -->
-  <defs>
-    <linearGradient id="erBanner" x1="0" y1="0" x2="1" y2="0"
-                    gradientUnits="objectBoundingBox">
-      <stop offset="0%"   stop-color="#0F172A"/>
-      <stop offset="60%"  stop-color="#1E3A8A"/>
-      <stop offset="100%" stop-color="#2563EB"/>
-    </linearGradient>
-  </defs>
-  <rect width="${totalW}" height="${H}" fill="url(#erBanner)"/>
-  <text x="24" y="36"
-        font-family="system-ui,-apple-system,sans-serif"
-        font-size="24" font-weight="800" fill="#FFFFFF">${xmlEsc(title)}</text>
-  <text x="24" y="54"
-        font-family="system-ui,sans-serif" font-size="12" fill="rgba(255,255,255,0.55)">
-    ${models.length} entities · generated ${now}
-  </text>
-  <!-- ER tag pill -->
-  <rect x="${totalW - 100}" y="18" width="80" height="28" rx="14"
-        fill="rgba(255,255,255,0.15)"/>
-  <text x="${totalW - 60}" y="37"
-        font-family="'SF Mono',monospace" font-size="12" font-weight="700"
-        fill="rgba(255,255,255,0.9)" text-anchor="middle">ER DIAGRAM</text>`;
+  <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>`;
     }
     // ── Legend ──────────────────────────────────────────────────────────────
     renderLegend(lx, ly) {
         const LW = ERDiagram.LEGEND_W;
         const LP = ERDiagram.LEGEND_PAD;
         const lineH = 28;
+        const div = palette_1.INDUSTRY.divider;
         const items = [
-            { type: 'hasOne', icon: '1:1', color: '#0891B2', label: 'Has One' },
-            { type: 'hasMany', icon: '1:N', color: '#7C3AED', label: 'Has Many' },
-            { type: 'belongsTo', icon: 'N:1', color: '#059669', label: 'Belongs To' },
-            { type: 'belongsToMany', icon: 'N:N', color: '#DC2626', label: 'Belongs To Many' },
+            { mark: '1:1', label: 'Has One' },
+            { mark: '1:N', label: 'Has Many' },
+            { mark: 'N:1', label: 'Belongs To' },
+            { mark: 'N:N', label: 'Belongs To Many' },
         ];
-        const legendH = LP * 2 + 24 + items.length * lineH;
+        const legendH = LP * 2 + 24 + items.length * lineH + 44;
         let out = `\n  <!-- ═══ LEGEND ═══ -->`;
         out += `\n  <rect x="${lx}" y="${ly}" width="${LW}" height="${legendH}"
-      rx="10" fill="white" stroke="#E2E8F0" stroke-width="1.5"/>`;
-        out += `\n  <rect x="${lx}" y="${ly}" width="${LW}" height="34"
-      rx="10" fill="#0F172A"/>`;
-        out += `\n  <rect x="${lx}" y="${ly + 20}" width="${LW}" height="14" fill="#0F172A"/>`;
-        out += `\n  <text x="${lx + LW / 2}" y="${ly + 23}"
-      font-family="system-ui,sans-serif" font-size="12" font-weight="700"
-      fill="#FFFFFF" text-anchor="middle">LEGEND</text>`;
+      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>`;
         items.forEach((item, i) => {
-            const iy = ly + 34 + LP + i * lineH;
-            const badgeW = 32;
-            out += `\n  <rect x="${lx + LP}" y="${iy + 5}" width="${badgeW}" height="18"
-        rx="5" fill="${item.color}22"/>`;
-            out += `\n  <text x="${lx + LP + badgeW / 2}" y="${iy + 18}"
-        font-family="monospace" font-size="10" font-weight="700"
-        fill="${item.color}" text-anchor="middle">${item.icon}</text>`;
-            // Sample line
-            out += `\n  <line x1="${lx + LP + badgeW + 6}" y1="${iy + 14}"
-        x2="${lx + LP + badgeW + 28}" y2="${iy + 14}"
-        stroke="${item.color}" stroke-width="2"/>`;
-            out += `\n  <text x="${lx + LP + badgeW + 34}" y="${iy + 18}"
-        font-family="system-ui,sans-serif" font-size="12"
-        fill="#374151">${item.label}</text>`;
-            // Key icon legend (SVG instead of emoji)
-            if (i === items.length - 1) {
-                const ky = iy + lineH + 4;
-                // Key icon
-                out += `\n  <g transform="translate(${lx + LP}, ${ky + 2})">
-          <path d="M8 0l2 2-2 2 1.5 1.5 2-2 2 2 1.5-1.5-2-2 2-2-1.5-1.5-2 2-2-2z" fill="#F59E0B"/>
-        </g>`;
-                out += `\n  <text x="${lx + LP + 22}" y="${ky + 14}"
-          font-family="system-ui,sans-serif" font-size="11" fill="#64748B">Primary Key</text>`;
-                // Link icon
-                out += `\n  <g transform="translate(${lx + LP}, ${ky + 18})">
-          <path d="M4 2l4 4-4 4M8 2l4 4" stroke="#3B82F6" stroke-width="1.5" fill="none"/>
-        </g>`;
-                out += `\n  <text x="${lx + LP + 22}" y="${ky + 30}"
-          font-family="system-ui,sans-serif" font-size="11" fill="#64748B">Foreign Key</text>`;
-            }
+            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>`;
         });
+        // 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>`;
+    }
     // ── Generate the full SVG ────────────────────────────────────────────────
     generate() {
-        const { models, hGap, vGap, columns } = this.opts;
+        const { models, columns } = this.opts;
+        void columns;
         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
@@ -530,10 +471,11 @@ class ERDiagram {
                 `<svg xmlns="http://www.w3.org/2000/svg"`,
                 `     width="${emptyW}" height="${emptyH}"`,
                 `     viewBox="0 0 ${emptyW} ${emptyH}">`,
-                `  <rect width="${emptyW}" height="${emptyH}" fill="#F0F4F8"/>`,
+                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="system-ui,sans-serif" font-size="14" fill="#64748B"`,
+                `        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');
@@ -553,17 +495,18 @@ class ERDiagram {
             `     width="${totalW}" height="${totalH}"`,
             `     viewBox="0 0 ${totalW} ${totalH}">`,
         ].join('\n');
-        // Background
-        svg += `\n  <rect width="${totalW}" height="${totalH}" fill="#F0F4F8"/>`;
-        // Grid guide lines (subtle)
-        svg += `\n  <!-- background grid -->`;
+        svg += this.fontDefs();
+        // Ground
+        svg += `\n  <rect width="${totalW}" height="${totalH}" fill="${palette_1.INDUSTRY.ground}"/>`;
+        // Faint hairline blueprint grid.
+        svg += `\n  <!-- blueprint grid -->`;
         for (let gx = 0; gx < totalW; gx += 40) {
             svg += `\n  <line x1="${gx}" y1="${BANNER}" x2="${gx}" y2="${totalH}"
-      stroke="#E2E8F0" stroke-width="0.4" opacity="0.6"/>`;
+      stroke="${palette_1.INDUSTRY.neutral[200]}" stroke-width="0.5" opacity="0.6"/>`;
         }
         for (let gy = BANNER; gy < totalH; gy += 40) {
             svg += `\n  <line x1="0" y1="${gy}" x2="${totalW}" y2="${gy}"
-      stroke="#E2E8F0" stroke-width="0.4" opacity="0.6"/>`;
+      stroke="${palette_1.INDUSTRY.neutral[200]}" stroke-width="0.5" opacity="0.6"/>`;
         }
         // Banner
         svg += this.renderBanner(totalW);
@@ -594,12 +537,12 @@ class ERDiagram {
 exports.ERDiagram = ERDiagram;
 // Entity box constants (px)
 ERDiagram.BOX_W = 270;
-ERDiagram.BOX_HDR = 44;
+ERDiagram.BOX_HDR = 42;
 ERDiagram.BOX_ROW = 26;
-ERDiagram.BOX_FOOT = 28;
+ERDiagram.BOX_FOOT = 26;
 ERDiagram.MIN_H = 100;
 // Diagram chrome constants
-ERDiagram.BANNER_H = 64;
-ERDiagram.LEGEND_W = 200;
+ERDiagram.BANNER_H = 60;
+ERDiagram.LEGEND_W = 210;
 ERDiagram.LEGEND_PAD = 16;
 ERDiagram.MARGIN = 48;