ts-prorm-orm 1.1.0 → 1.2.1

package/dist/diagrams/model-diagram.js

@@ -1,13 +1,16 @@
 "use strict";
 /**
- * ModelDiagram — generates a fully-rendered SVG card for a single ORM model.
+ * ModelDiagram — generates a fully-rendered SVG card for a single ORM model,
+ * styled to the "Industry" blueprint design system.
  *
- * Features:
- *  - Color-coded data types (strings, numbers, dates, booleans, JSON, UUID, …)
- *  - Constraint badges: PK · FK · UQ · NN · AI · TS
- *  - Left-edge accent stripe per row (gold = PK, blue = FK)
- *  - Associations section (hasOne / hasMany / belongsTo / belongsToMany)
- *  - Dark footer with table name + metadata
+ * Look:
+ *  - Solid accent (#5980a6) header bar with the model name in Barlow Condensed
+ *  - White card body, 1px hairline dividers, SQUARE corners, no drop shadow
+ *  - L-shaped corner registration marks around the frame (blueprint)
+ *  - One row per column: name (Barlow) + type (mono, neutral-700) + constraint
+ *    badges — PK/UQ (accent tint), FK (accent-2 tint), NN/AI/TS (neutral tint)
+ *  - Associations listed at the bottom with cardinality marks
+ *  - Hairline footer strip with table name + metadata
  *  - Auto-sized SVG viewBox
  *
  * Usage:
@@ -55,30 +58,6 @@ const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
 const palette_1 = require("./palette");
 const svg_dom_1 = require("./svg-dom");
-const TYPE_COLORS = [
-    { pattern: /STRING|VARCHAR|CHAR|TEXT/i, text: '#059669', bg: '#D1FAE5' },
-    {
-        pattern: /INT|BIGINT|SMALLINT|TINYINT|FLOAT|DOUBLE|DECIMAL|NUMERIC|NUMBER/i,
-        text: '#7C3AED',
-        bg: '#EDE9FE',
-    },
-    { pattern: /DATE|TIME|TIMESTAMP/i, text: '#EA580C', bg: '#FFEDD5' },
-    { pattern: /BOOL/i, text: '#DB2777', bg: '#FCE7F3' },
-    { pattern: /UUID/i, text: '#0891B2', bg: '#CFFAFE' },
-    { pattern: /JSONB/i, text: '#4338CA', bg: '#E0E7FF' },
-    { pattern: /JSON/i, text: '#4F46E5', bg: '#E0E7FF' },
-    { pattern: /BLOB|BINARY|VARBINARY/i, text: '#92400E', bg: '#FEF3C7' },
-    { pattern: /ENUM/i, text: '#B45309', bg: '#FEF3C7' },
-    { pattern: /ARRAY/i, text: '#0369A1', bg: '#E0F2FE' },
-    { pattern: /GEOMETRY|GEOGRAPHY/i, text: '#166534', bg: '#DCFCE7' },
-];
-function typeColor(t) {
-    for (const c of TYPE_COLORS) {
-        if (c.pattern.test(t))
-            return { text: c.text, bg: c.bg };
-    }
-    return { text: '#475569', bg: '#F1F5F9' };
-}
 function resolveType(field) {
     const t = field.type;
     if (typeof t === 'string')
@@ -91,11 +70,12 @@ function resolveType(field) {
     }
     return 'UNKNOWN';
 }
+/** Cardinality marks per association type (mono, blueprint). */
 const ASSOC_META = {
-    hasOne: { icon: '1:1', color: '#0891B2', bg: '#CFFAFE', label: 'hasOne' },
-    hasMany: { icon: '1:N', color: '#7C3AED', bg: '#EDE9FE', label: 'hasMany' },
-    belongsTo: { icon: 'N:1', color: '#059669', bg: '#D1FAE5', label: 'belongsTo' },
-    belongsToMany: { icon: 'N:N', color: '#DC2626', bg: '#FEE2E2', label: 'belongsToMany' },
+    hasOne: { mark: '1:1', label: 'hasOne' },
+    hasMany: { mark: '1:N', label: 'hasMany' },
+    belongsTo: { mark: 'N:1', label: 'belongsTo' },
+    belongsToMany: { mark: 'N:N', label: 'belongsToMany' },
 };
 // ─── Main class ────────────────────────────────────────────────────────────
 class ModelDiagram {
@@ -120,41 +100,74 @@ class ModelDiagram {
     // ── Row badge helper ────────────────────────────────────────────────────
     badges(field, isTS) {
         const b = [];
+        const A = palette_1.BADGE_TINTS.accent;
+        const A2 = palette_1.BADGE_TINTS.accent2;
+        const N = palette_1.BADGE_TINTS.neutral;
         if (field.primaryKey)
-            b.push({ text: 'PK', bg: '#FEF3C7', fg: '#92400E' });
+            b.push({ text: 'PK', bg: A.bg, fg: A.fg });
         if (field.foreignKey || field.references)
-            b.push({ text: 'FK', bg: '#DBEAFE', fg: '#1E3A8A' });
+            b.push({ text: 'FK', bg: A2.bg, fg: A2.fg });
         if (field.autoIncrement)
-            b.push({ text: 'AI', bg: '#D1FAE5', fg: '#064E3B' });
+            b.push({ text: 'AI', bg: N.bg, fg: N.fg });
         if (field.unique && !field.primaryKey)
-            b.push({ text: 'UQ', bg: '#EDE9FE', fg: '#2E1065' });
+            b.push({ text: 'UQ', bg: A.bg, fg: A.fg });
         if (field.allowNull === false)
-            b.push({ text: 'NN', bg: '#FEE2E2', fg: '#7F1D1D' });
+            b.push({ text: 'NN', bg: N.bg, fg: N.fg });
         if (isTS)
-            b.push({ text: 'TS', bg: '#F1F5F9', fg: '#475569' });
+            b.push({ text: 'TS', bg: N.bg, fg: N.fg });
         return b;
     }
-    // ── SVG badge (drawn into a parent group) ────────────────────────────────
+    // ── SVG badge (drawn into a parent group) — square, hairline, mono ────────
     drawBadge(parent, b, x, y) {
-        const w = b.text.length * 7 + 12;
-        parent.child('rect', { x, y, width: w, height: 20, rx: 5, fill: b.bg });
+        const w = b.text.length * 8 + 12;
+        parent.child('rect', {
+            x,
+            y,
+            width: w,
+            height: 18,
+            rx: 0,
+            fill: b.bg,
+            stroke: palette_1.INDUSTRY.divider,
+            'stroke-width': 1,
+        });
         parent
             .child('text', {
             x: x + w / 2,
-            y: y + 14,
-            'font-family': "'SF Mono','Fira Code',monospace",
-            'font-size': 10,
-            'font-weight': 700,
+            y: y + 13,
+            'font-family': palette_1.FONTS.heading,
+            'font-size': 11,
+            'font-weight': 600,
+            'letter-spacing': 0.4,
             fill: b.fg,
             'text-anchor': 'middle',
         })
             .text(b.text);
         return w;
     }
+    // ── L-shaped corner registration marks around the frame ──────────────────
+    cornerMarks(svg, x, y, w, h) {
+        const len = 9;
+        const col = palette_1.INDUSTRY.neutral[500];
+        const sw = 1;
+        const seg = (x1, y1, x2, y2) => svg.child('line', { x1, y1, x2, y2, stroke: col, 'stroke-width': sw });
+        // top-left
+        seg(x, y, x + len, y);
+        seg(x, y, x, y + len);
+        // top-right
+        seg(x + w - len, y, x + w, y);
+        seg(x + w, y, x + w, y + len);
+        // bottom-left
+        seg(x, y + h, x + len, y + h);
+        seg(x, y + h - len, x, y + h);
+        // bottom-right
+        seg(x + w - len, y + h, x + w, y + h);
+        seg(x + w, y + h - len, x + w, y + h);
+    }
     // ── Generate full SVG string (built via a real DOM document) ──────────────
     generate() {
         const { name, tableName, fields, associations, timestamps, paranoid, comment, theme, color } = this.opts;
         const accent = (0, palette_1.resolveAccent)(color);
+        const a2 = (0, palette_1.accent2Of)(accent);
         const t = (0, palette_1.resolveTheme)(theme);
         const W = ModelDiagram.W;
         const HDR = ModelDiagram.HDR;
@@ -164,7 +177,6 @@ class ModelDiagram {
         const ASSOC_ROW = ModelDiagram.ASSOC_ROW;
         const FOOTER = ModelDiagram.FOOTER;
         const PAD = ModelDiagram.PAD;
-        const R = ModelDiagram.R;
         // ── Build field list (add timestamps if requested) ──────────────────
         const fieldEntries = Object.entries(fields);
         const tsFields = ['createdAt', 'updatedAt'];
@@ -178,115 +190,94 @@ class ModelDiagram {
             });
         }
         const hasAssoc = associations.length > 0;
-        const assocBlockH = hasAssoc ? ASSOC_HDR + associations.length * ASSOC_ROW + 8 : 0;
+        const assocBlockH = hasAssoc ? ASSOC_HDR + associations.length * ASSOC_ROW : 0;
         const cardH = HDR + COL_HDR + fieldEntries.length * ROW_H + assocBlockH + FOOTER;
         const svgW = W + 2 * PAD;
         const svgH = cardH + 2 * PAD;
         const cx = PAD;
         const cy = PAD;
-        const uid = name.replace(/\W/g, '');
         const doc = new svg_dom_1.SvgDocument(svgW, svgH);
         const svg = doc.root;
-        // ── Background ──────────────────────────────────────────────────────
+        // Web fonts for browser renderers.
+        doc.style(palette_1.FONT_IMPORT);
+        // ── Ground ──────────────────────────────────────────────────────────
         svg.child('rect', { width: svgW, height: svgH, fill: t.canvasBg });
-        // ── Defs: header gradient, drop shadow, card clip ───────────────────
-        doc.linearGradient(`hg${uid}`, [
-            [0, accent.from],
-            [55, accent.mid],
-            [100, accent.to],
-        ]);
-        const filter = doc
-            .defs()
-            .child('filter', { id: `sh${uid}`, x: '-6%', y: '-6%', width: '112%', height: '125%' });
-        filter.child('feDropShadow', { dx: 0, dy: 6, stdDeviation: 10, 'flood-color': '#00000025' });
-        doc
-            .defs()
-            .child('clipPath', { id: `cp${uid}` })
-            .child('rect', { x: cx, y: cy, width: W, height: cardH, rx: R });
-        // ── Card shell + surface ────────────────────────────────────────────
-        svg.child('rect', {
-            x: cx - 1,
-            y: cy - 1,
-            width: W + 2,
-            height: cardH + 2,
-            rx: R + 1,
-            fill: t.border,
-            filter: `url(#sh${uid})`,
-        });
+        // ── Card surface + hairline frame (square) ──────────────────────────
+        svg.child('rect', { x: cx, y: cy, width: W, height: cardH, fill: t.cardBg });
         svg.child('rect', {
             x: cx,
             y: cy,
             width: W,
             height: cardH,
-            rx: R,
-            fill: t.cardBg,
-            'clip-path': `url(#cp${uid})`,
+            fill: 'none',
+            stroke: t.border,
+            'stroke-width': 1,
         });
-        // ── Header ──────────────────────────────────────────────────────────
-        svg.child('rect', { x: cx, y: cy, width: W, height: HDR, fill: `url(#hg${uid})` });
-        const icon = svg.child('g', { transform: `translate(${cx + 16}, ${cy + 14})` });
-        icon.child('rect', { x: 0, y: 0, width: 40, height: 40, rx: 10, fill: 'rgba(255,255,255,0.18)' });
-        icon.child('rect', { x: 12, y: 8, width: 16, height: 20, rx: 2, fill: 'white', opacity: 0.9 });
-        icon.child('rect', { x: 15, y: 4, width: 10, height: 6, rx: 1, fill: 'white', opacity: 0.9 });
-        icon.child('rect', { x: 17, y: 13, width: 6, height: 2, rx: 1, fill: accent.mid });
-        icon.child('rect', { x: 17, y: 17, width: 6, height: 2, rx: 1, fill: accent.mid });
-        icon.child('rect', { x: 17, y: 21, width: 4, height: 2, rx: 1, fill: accent.mid });
+        // Corner registration marks.
+        this.cornerMarks(svg, cx, cy, W, cardH);
+        // ── Header (solid accent bar) ───────────────────────────────────────
+        svg.child('rect', { x: cx, y: cy, width: W, height: HDR, fill: accent.mid });
         svg
             .child('text', {
-            x: cx + 68,
-            y: cy + 34,
-            'font-family': 'system-ui,-apple-system,sans-serif',
-            'font-size': 22,
-            'font-weight': 800,
+            x: cx + 18,
+            y: cy + 30,
+            'font-family': palette_1.FONTS.heading,
+            'font-size': 24,
+            'font-weight': 600,
+            'letter-spacing': 0.2,
             fill: '#FFFFFF',
         })
             .text(name);
         if (comment) {
             svg
                 .child('text', {
-                x: cx + 68,
-                y: cy + 54,
-                'font-family': 'system-ui,sans-serif',
+                x: cx + 18,
+                y: cy + 47,
+                'font-family': palette_1.FONTS.body,
                 'font-size': 11,
-                fill: 'rgba(255,255,255,0.65)',
+                fill: 'rgba(255,255,255,0.82)',
             })
-                .text(comment);
+                .text(comment.length > 60 ? comment.slice(0, 59) + '…' : comment);
         }
-        svg.child('rect', {
-            x: cx + W - 96,
-            y: cy + 20,
-            width: 80,
-            height: 26,
-            rx: 13,
-            fill: 'rgba(255,255,255,0.18)',
-        });
+        // Right-aligned kicker label.
         svg
             .child('text', {
-            x: cx + W - 56,
-            y: cy + 38,
-            'font-family': "'SF Mono',monospace",
+            x: cx + W - 16,
+            y: cy + 22,
+            'font-family': palette_1.FONTS.heading,
             'font-size': 11,
-            'font-weight': 700,
-            fill: 'rgba(255,255,255,0.92)',
-            'text-anchor': 'middle',
+            'font-weight': 600,
+            'letter-spacing': 1.4,
+            fill: 'rgba(255,255,255,0.85)',
+            'text-anchor': 'end',
         })
             .text('ORM MODEL');
+        svg
+            .child('text', {
+            x: cx + W - 16,
+            y: cy + 40,
+            'font-family': palette_1.FONTS.mono,
+            'font-size': 11,
+            fill: 'rgba(255,255,255,0.72)',
+            'text-anchor': 'end',
+        })
+            .text(tableName.length > 26 ? tableName.slice(0, 25) + '…' : tableName);
         // ── Column header row ───────────────────────────────────────────────
         const colHdrY = cy + HDR;
         svg.child('rect', { x: cx, y: colHdrY, width: W, height: COL_HDR, fill: t.colHeaderBg });
         const colHdr = (x, label) => svg
             .child('text', {
             x,
-            y: colHdrY + 22,
-            'font-family': 'system-ui,sans-serif',
+            y: colHdrY + 20,
+            'font-family': palette_1.FONTS.heading,
             'font-size': 11,
-            'font-weight': 700,
+            'font-weight': 600,
             fill: t.textSecondary,
-            'letter-spacing': 0.5,
+            'letter-spacing': 1,
         })
             .text(label);
-        colHdr(cx + 36, 'COLUMN');
-        colHdr(cx + 225, 'TYPE');
+        colHdr(cx + 18, 'COLUMN');
+        colHdr(cx + 230, 'TYPE');
         colHdr(cx + 380, 'CONSTRAINTS');
         svg.child('line', {
             x1: cx,
@@ -300,116 +291,58 @@ class ModelDiagram {
         const fieldSectionY = colHdrY + COL_HDR;
         fieldEntries.forEach(([colName, field], i) => {
             const typeStr = resolveType(field);
-            const tc = typeColor(typeStr);
             const rowY = fieldSectionY + i * ROW_H;
             const midY = rowY + ROW_H / 2;
-            const textBase = midY + 5;
+            const textBase = midY + 4;
             const rowBg = i % 2 === 0 ? t.cardBg : t.rowAlt;
             const isTS = tsFields.includes(colName);
             const isPK = !!field.primaryKey;
             const isFK = !!(field.foreignKey || field.references);
             svg.child('rect', { x: cx, y: rowY, width: W, height: ROW_H, fill: rowBg });
+            // Left accent stripe: PK → accent, FK → accent-2.
             if (isPK)
-                svg.child('rect', { x: cx, y: rowY, width: 5, height: ROW_H, fill: '#F59E0B' });
+                svg.child('rect', { x: cx, y: rowY, width: 3, height: ROW_H, fill: accent.mid });
             else if (isFK)
-                svg.child('rect', { x: cx, y: rowY, width: 5, height: ROW_H, fill: '#3B82F6' });
-            // Row icon
-            const iconX = cx + 19;
-            if (isPK) {
-                svg
-                    .child('g', { transform: `translate(${iconX - 7}, ${textBase - 10})` })
-                    .child('path', {
-                    d: 'M12.65 10A6 6 0 0 1 6 4a6 6 0 0 1 6.65 6H12.65zM2.93 4.93l6.42 6.42a8 8 0 0 1 9.3 0l1.42-1.42a1 1 0 0 0 0-1.41l-1.42-1.42a1 1 0 0 0-1.41 0l-6.42 6.42a1 1 0 0 0 0 1.41l1.42 1.42a1 1 0 0 0 1.41 0l6.42-6.42a8 8 0 0 0 0-11.3L13.08 2.22a1 1 0 0 0-1.08-.28H12a1 1 0 0 0-.77.36L8.7 4.91 2.93 4.93z',
-                    fill: '#F59E0B',
-                });
-            }
-            else if (isFK) {
-                const g = svg.child('g', { transform: `translate(${iconX - 7}, ${textBase - 10})` });
-                g.child('path', {
-                    d: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71',
-                    stroke: '#3B82F6',
-                    'stroke-width': 2,
-                    fill: 'none',
-                    'stroke-linecap': 'round',
-                });
-                g.child('path', {
-                    d: 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71',
-                    stroke: '#3B82F6',
-                    'stroke-width': 2,
-                    fill: 'none',
-                    'stroke-linecap': 'round',
-                });
-            }
-            else if (isTS) {
-                const g = svg.child('g', { transform: `translate(${iconX - 7}, ${textBase - 10})` });
-                g.child('circle', { cx: 8, cy: 8, r: 7, stroke: '#64748B', 'stroke-width': 1.5, fill: 'none' });
-                g.child('path', {
-                    d: 'M8 4v4l3 2',
-                    stroke: '#64748B',
-                    'stroke-width': 1.5,
-                    fill: 'none',
-                    'stroke-linecap': 'round',
-                });
-            }
-            else {
-                svg.child('circle', { cx: iconX, cy: midY, r: 3.5, fill: '#CBD5E1' });
-            }
-            // Field name
-            const nameW = isPK ? 700 : isFK ? 600 : 500;
-            const nameC = isPK ? '#F59E0B' : isFK ? '#3B82F6' : t.textPrimary;
-            const dispName = colName.length > 22 ? colName.slice(0, 21) + '…' : colName;
+                svg.child('rect', { x: cx, y: rowY, width: 3, height: ROW_H, fill: a2.color });
+            // Field name (body font).
+            const nameW = isPK || isFK ? 600 : 400;
+            const nameC = isPK ? accent.text : isFK ? a2.text : t.textPrimary;
+            const dispName = colName.length > 24 ? colName.slice(0, 23) + '…' : colName;
             svg
                 .child('text', {
-                x: cx + 36,
+                x: cx + 18,
                 y: textBase,
-                'font-family': "'SF Mono','Fira Code',monospace",
+                'font-family': palette_1.FONTS.body,
                 'font-size': 13,
                 'font-weight': nameW,
                 fill: nameC,
             })
                 .text(dispName);
-            // Type badge
-            const typX = cx + 225;
-            const typTxt = typeStr.length > 18 ? typeStr.slice(0, 17) + '…' : typeStr;
-            svg.child('rect', { x: typX, y: rowY + 11, width: 140, height: 20, rx: 6, fill: tc.bg });
+            // Type (mono, neutral-700).
+            const typTxt = typeStr.length > 22 ? typeStr.slice(0, 21) + '…' : typeStr;
             svg
                 .child('text', {
-                x: typX + 70,
-                y: rowY + 25,
-                'font-family': "'SF Mono',monospace",
-                'font-size': 11,
-                'font-weight': 600,
-                fill: tc.text,
-                'text-anchor': 'middle',
+                x: cx + 230,
+                y: textBase,
+                'font-family': palette_1.FONTS.mono,
+                'font-size': 12,
+                fill: palette_1.INDUSTRY.neutral[700],
             })
                 .text(typTxt);
-            // Constraint badges
+            // Constraint badges.
             let bx = cx + 380;
             for (const b of this.badges(field, isTS)) {
-                bx += this.drawBadge(svg, b, bx, rowY + 11) + 4;
-            }
-            // Default value
-            if (field.defaultValue !== undefined && field.defaultValue !== null && !isTS) {
-                svg
-                    .child('text', {
-                    x: cx + W - 10,
-                    y: textBase,
-                    'font-family': 'monospace',
-                    'font-size': 10,
-                    fill: '#94A3B8',
-                    'text-anchor': 'end',
-                })
-                    .text(`default: ${String(field.defaultValue).slice(0, 10)}`);
+                bx += this.drawBadge(svg, b, bx, rowY + (ROW_H - 18) / 2) + 5;
             }
-            // FK reference label
+            // FK reference label (below the name).
             if (isFK && field.references) {
                 svg
                     .child('text', {
-                    x: cx + 36,
+                    x: cx + 18,
                     y: rowY + ROW_H - 6,
-                    'font-family': 'monospace',
+                    'font-family': palette_1.FONTS.mono,
                     'font-size': 9,
-                    fill: '#94A3B8',
+                    fill: t.textSecondary,
                 })
                     .text(`→ ${field.references.model}.${field.references.key}`);
             }
@@ -425,15 +358,16 @@ class ModelDiagram {
         // ── Associations ────────────────────────────────────────────────────
         const assocBaseY = fieldSectionY + fieldEntries.length * ROW_H;
         if (hasAssoc) {
-            svg.child('rect', { x: cx, y: assocBaseY, width: W, height: ASSOC_HDR, fill: '#F0F9FF' });
+            svg.child('rect', { x: cx, y: assocBaseY, width: W, height: ASSOC_HDR, fill: palette_1.INDUSTRY.accentLight });
+            svg.child('rect', { x: cx, y: assocBaseY, width: 3, height: ASSOC_HDR, fill: accent.mid });
             svg
                 .child('text', {
-                x: cx + 16,
-                y: assocBaseY + 24,
-                'font-family': 'system-ui,sans-serif',
+                x: cx + 18,
+                y: assocBaseY + 22,
+                'font-family': palette_1.FONTS.heading,
                 'font-size': 12,
-                'font-weight': 700,
-                fill: '#0369A1',
+                'font-weight': 600,
+                fill: accent.text,
                 'letter-spacing': 1,
             })
                 .text('ASSOCIATIONS');
@@ -442,86 +376,87 @@ class ModelDiagram {
                 y1: assocBaseY + ASSOC_HDR,
                 x2: cx + W,
                 y2: assocBaseY + ASSOC_HDR,
-                stroke: '#BAE6FD',
+                stroke: t.border,
                 'stroke-width': 1,
             });
             associations.forEach((assoc, i) => {
                 const aY = assocBaseY + ASSOC_HDR + i * ASSOC_ROW;
-                const meta = ASSOC_META[assoc.type] ?? {
-                    icon: '?',
-                    color: '#475569',
-                    bg: '#F1F5F9',
-                    label: assoc.type,
-                };
-                const rowBg = i % 2 === 0 ? '#F0F9FF' : '#E0F2FE';
-                const aTextY = aY + 20;
+                const meta = ASSOC_META[assoc.type] ?? { mark: '?', label: assoc.type };
+                const rowBg = i % 2 === 0 ? t.cardBg : t.rowAlt;
+                const aTextY = aY + 18;
                 svg.child('rect', { x: cx, y: aY, width: W, height: ASSOC_ROW, fill: rowBg });
-                const cbw = 34;
-                svg.child('rect', { x: cx + 10, y: aY + 6, width: cbw, height: 18, rx: 5, fill: meta.bg });
+                // Cardinality mark (mono, accent tint chip).
+                const cbw = 36;
+                svg.child('rect', {
+                    x: cx + 14,
+                    y: aY + 5,
+                    width: cbw,
+                    height: 18,
+                    fill: palette_1.INDUSTRY.accentLight,
+                    stroke: palette_1.INDUSTRY.divider,
+                    'stroke-width': 1,
+                });
                 svg
                     .child('text', {
-                    x: cx + 10 + cbw / 2,
-                    y: aY + 19,
-                    'font-family': 'monospace',
-                    'font-size': 10,
-                    'font-weight': 700,
-                    fill: meta.color,
+                    x: cx + 14 + cbw / 2,
+                    y: aY + 18,
+                    'font-family': palette_1.FONTS.mono,
+                    'font-size': 11,
+                    'font-weight': 600,
+                    fill: accent.text,
                     'text-anchor': 'middle',
                 })
-                    .text(meta.icon);
+                    .text(meta.mark);
                 svg
                     .child('text', {
-                    x: cx + 52,
+                    x: cx + 60,
                     y: aTextY,
-                    'font-family': 'system-ui,sans-serif',
+                    'font-family': palette_1.FONTS.body,
                     'font-size': 12,
-                    'font-weight': 600,
-                    fill: '#374151',
+                    'font-weight': 500,
+                    fill: t.textPrimary,
                 })
                     .text(meta.label);
-                svg
-                    .child('text', { x: cx + 148, y: aTextY, 'font-size': 14, fill: '#94A3B8' })
-                    .text('→');
                 svg
                     .child('text', {
-                    x: cx + 168,
+                    x: cx + 162,
                     y: aTextY,
-                    'font-family': "'SF Mono',monospace",
+                    'font-family': palette_1.FONTS.mono,
                     'font-size': 12,
-                    'font-weight': 700,
-                    fill: meta.color,
+                    'font-weight': 600,
+                    fill: accent.text,
                 })
                     .text(assoc.target);
                 if (assoc.foreignKey) {
                     svg
                         .child('text', {
-                        x: cx + 290,
+                        x: cx + 300,
                         y: aTextY,
-                        'font-family': 'monospace',
+                        'font-family': palette_1.FONTS.mono,
                         'font-size': 10,
-                        fill: '#64748B',
+                        fill: t.textSecondary,
                     })
                         .text(`(${assoc.foreignKey})`);
                 }
                 if (assoc.through) {
                     svg
                         .child('text', {
-                        x: cx + 370,
+                        x: cx + 400,
                         y: aTextY,
-                        'font-family': 'monospace',
+                        'font-family': palette_1.FONTS.mono,
                         'font-size': 10,
-                        fill: '#7C3AED',
+                        fill: a2.text,
                     })
                         .text(`via: ${assoc.through}`);
                 }
                 if (assoc.as) {
                     svg
                         .child('text', {
-                        x: cx + W - 10,
+                        x: cx + W - 14,
                         y: aTextY,
-                        'font-family': 'monospace',
+                        'font-family': palette_1.FONTS.mono,
                         'font-size': 10,
-                        fill: '#6366F1',
+                        fill: t.textSecondary,
                         'text-anchor': 'end',
                     })
                         .text(`as: ${assoc.as}`);
@@ -531,60 +466,64 @@ class ModelDiagram {
                     y1: aY + ASSOC_ROW,
                     x2: cx + W,
                     y2: aY + ASSOC_ROW,
-                    stroke: '#BAE6FD',
-                    'stroke-width': 0.5,
+                    stroke: t.border,
+                    'stroke-width': 1,
                 });
             });
         }
-        // ── Footer ──────────────────────────────────────────────────────────
+        // ── Footer (hairline strip) ─────────────────────────────────────────
         const footerY = assocBaseY + assocBlockH;
         svg.child('rect', { x: cx, y: footerY, width: W, height: FOOTER, fill: t.footerBg });
-        svg.child('rect', {
-            x: cx,
-            y: footerY + FOOTER - R,
-            width: W,
-            height: R,
-            rx: R,
-            fill: t.footerBg,
+        svg.child('line', {
+            x1: cx,
+            y1: footerY,
+            x2: cx + W,
+            y2: footerY,
+            stroke: t.border,
+            'stroke-width': 1,
         });
         const footTable = svg.child('text', {
-            x: cx + 16,
-            y: footerY + 28,
-            'font-family': 'system-ui,sans-serif',
+            x: cx + 18,
+            y: footerY + 25,
+            'font-family': palette_1.FONTS.heading,
             'font-size': 11,
-            fill: '#94A3B8',
+            'font-weight': 600,
+            'letter-spacing': 0.6,
+            fill: t.textSecondary,
         });
-        footTable.text('TABLE: ');
-        footTable.child('tspan', { 'font-family': "'SF Mono',monospace", fill: accent.to }).text(tableName);
+        footTable.text('TABLE ');
+        footTable
+            .child('tspan', { 'font-family': palette_1.FONTS.mono, 'font-weight': 400, fill: accent.text })
+            .text(tableName);
         if (timestamps) {
-            const ts = svg.child('text', {
-                x: cx + 230,
-                y: footerY + 28,
-                'font-family': 'system-ui,sans-serif',
+            svg
+                .child('text', {
+                x: cx + 250,
+                y: footerY + 25,
+                'font-family': palette_1.FONTS.body,
                 'font-size': 11,
-                fill: '#94A3B8',
-            });
-            ts.child('tspan', { fill: accent.to }).text('◷');
-            ts.text(' timestamps');
+                fill: t.textSecondary,
+            })
+                .text('timestamps');
         }
         if (paranoid) {
-            const pn = svg.child('text', {
-                x: cx + 340,
-                y: footerY + 28,
-                'font-family': 'system-ui,sans-serif',
+            svg
+                .child('text', {
+                x: cx + 350,
+                y: footerY + 25,
+                'font-family': palette_1.FONTS.body,
                 'font-size': 11,
-                fill: '#94A3B8',
-            });
-            pn.child('tspan', { fill: '#F87171' }).text('⌫');
-            pn.text(' paranoid');
+                fill: t.textSecondary,
+            })
+                .text('paranoid');
         }
         svg
             .child('text', {
-            x: cx + W - 10,
-            y: footerY + 28,
-            'font-family': 'system-ui,sans-serif',
+            x: cx + W - 14,
+            y: footerY + 25,
+            'font-family': palette_1.FONTS.body,
             'font-size': 11,
-            fill: '#475569',
+            fill: t.textSecondary,
             'text-anchor': 'end',
         })
             .text(`${fieldEntries.length} column${fieldEntries.length !== 1 ? 's' : ''}`);
@@ -606,11 +545,10 @@ class ModelDiagram {
 exports.ModelDiagram = ModelDiagram;
 // Layout constants (px)
 ModelDiagram.W = 600;
-ModelDiagram.HDR = 68;
-ModelDiagram.COL_HDR = 32;
-ModelDiagram.ROW_H = 40;
-ModelDiagram.ASSOC_HDR = 36;
-ModelDiagram.ASSOC_ROW = 30;
-ModelDiagram.FOOTER = 42;
-ModelDiagram.PAD = 24;
-ModelDiagram.R = 14; // border-radius
+ModelDiagram.HDR = 56;
+ModelDiagram.COL_HDR = 30;
+ModelDiagram.ROW_H = 38;
+ModelDiagram.ASSOC_HDR = 34;
+ModelDiagram.ASSOC_ROW = 28;
+ModelDiagram.FOOTER = 40;
+ModelDiagram.PAD = 28;