ts-prorm-orm 1.2.2 → 2.0.0

package/dist/diagrams/migration-diagram.js

@@ -1,10 +1,10 @@
 "use strict";
 /**
- * MigrationDiagram — generates an SVG showing database schema changes.
+ * MigrationDiagram - generates an SVG showing database schema changes.
  *
  * Features:
  *  - Shows tables with their columns (before/after or just new state)
- *  - Color-coded change indicators: green (added), red (removed), yellow (modified)
+ *  - Change indicators per column: added, removed, modified
  *  - Migration metadata header with timestamp and description
  *  - Support for multiple migration steps
  *  - Compact field rows with type badges
@@ -57,46 +57,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MigrationDiagram = void 0;
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
-const palette_1 = require("./palette");
-// ─── Industry design system ────────────────────────────────────────────────
-// Barlow / JetBrains Mono typography, hairline borders and square "blueprint"
-// corners are fixed by the Industry spec; the banner accent + canvas colours
-// route through resolveAccent / resolveTheme so --color / --theme keep working.
-// Family names are single-quoted so they nest inside double-quoted SVG attrs.
-const IND_FONT_HEAD = "'Barlow Condensed', system-ui, sans-serif";
-const IND_FONT_BODY = "'Barlow', system-ui, sans-serif";
-const IND_FONT_MONO = "ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace";
-const IND_HAIRLINE = 'rgba(29,31,32,0.16)';
-const IND_FONT_IMPORT = "@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&family=JetBrains+Mono&display=swap');";
-// ─── Constants ─────────────────────────────────────────────────────────────
-const CHANGE_COLORS = {
-    add: { header: '#065F46', mid: '#059669', light: '#D1FAE5', text: '#065F46', icon: '#059669' },
-    remove: { header: '#7F1D1D', mid: '#DC2626', light: '#FEE2E2', text: '#7F1D1D', icon: '#DC2626' },
-    modify: { header: '#92400E', mid: '#D97706', light: '#FEF3C7', text: '#92400E', icon: '#D97706' },
+const svg_1 = require("./core/svg");
+const theme_1 = require("./core/theme");
+const layout_1 = require("./core/layout");
+/** Short ASCII label per change/action kind. No colour distinction. */
+const ACTION_LABEL = {
+    add: 'ADD',
+    remove: 'DEL',
+    modify: 'MOD',
 };
-const TABLE_COLORS = [
-    { header: '#1E3A8A', mid: '#2563EB', light: '#DBEAFE', text: '#1E3A8A' },
-    { header: '#5B21B6', mid: '#7C3AED', light: '#EDE9FE', text: '#5B21B6' },
-    { header: '#065F46', mid: '#059669', light: '#D1FAE5', text: '#065F46' },
-    { header: '#92400E', mid: '#D97706', light: '#FEF3C7', text: '#92400E' },
-    { header: '#831843', mid: '#DB2777', light: '#FCE7F3', text: '#831843' },
-    { header: '#0C4A6E', mid: '#0284C7', light: '#E0F2FE', text: '#0C4A6E' },
-];
-// ─── Helpers ─────────────────────────────────────────────────────────────
-function xmlEsc(s) {
-    return String(s ?? '')
-        .replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;');
-}
-function typeBadgeColor(type) {
-    // Industry blueprint: type badges share one muted accent tint so the box
-    // stays restrained; the type text itself carries the meaning.
-    void type;
-    return { text: '#2c455d', bg: '#eef6ff' };
-}
-// ─── Main class ────────────────────────────────────────────────────────────
 class MigrationDiagram {
     constructor(options) {
         this.opts = {
@@ -108,177 +77,236 @@ class MigrationDiagram {
             color: options.color ?? '',
         };
     }
-    // ── Compute layout positions ─────────────────────────────────────────
+    // -- Compute layout positions -----------------------------------------
     computeLayout() {
         const layout = [];
         let y = this.opts.changes.length > 0 ? MigrationDiagram.BANNER_H + MigrationDiagram.MARGIN : 0;
-        let maxW = 0;
-        this.opts.changes.forEach((change, idx) => {
+        this.opts.changes.forEach((change) => {
             const rowCount = Math.max((change.changes ?? []).length, 1);
             const h = MigrationDiagram.BOX_HDR + rowCount * MigrationDiagram.BOX_ROW + MigrationDiagram.FOOT_H;
             const x = MigrationDiagram.MARGIN;
-            layout.push({
-                change,
-                x,
-                y,
-                w: MigrationDiagram.BOX_W,
-                h,
-                colorIdx: idx % TABLE_COLORS.length,
-            });
-            maxW = Math.max(maxW, MigrationDiagram.BOX_W);
+            layout.push({ change, x, y, w: MigrationDiagram.BOX_W, h });
             y += h + MigrationDiagram.V_GAP;
         });
         return layout;
     }
-    // ── Render banner ────────────────────────────────────────────────────
-    renderBanner(totalW) {
+    // -- Render banner -------------------------------------------------------
+    renderBanner(svg, totalW) {
         const H = MigrationDiagram.BANNER_H;
         const { title, description, timestamp } = this.opts;
-        // Solid accent banner (blueprint label bar) — no gradient, no drop shadow.
-        const accent = (0, palette_1.resolveAccent)(this.opts.color);
-        return `
-  <!-- ═══ BANNER ═══ -->
-  <rect width="${totalW}" height="${H}" fill="${accent.mid}"/>
-
-  <!-- Database icon (SVG) -->
-  <g transform="translate(30, 24)">
-    <ellipse cx="14" cy="8" rx="12" ry="4" fill="white" opacity="0.3"/>
-    <path d="M2 12v12c0 2.2 5.4 4 12 4s12-1.8 12-4V12" fill="white" opacity="0.9"/>
-    <path d="M2 16c0 2.2 5.4 4 12 4s12-1.8 12-4" fill="none" stroke="white" stroke-width="1.5" opacity="0.5"/>
-    <path d="M2 20c0 2.2 5.4 4 12 4s12-1.8 12-4" fill="none" stroke="white" stroke-width="1.5" opacity="0.3"/>
-  </g>
-
-  <text x="58" y="36" font-family="${IND_FONT_HEAD}" font-size="22" font-weight="600" fill="white">${xmlEsc(title)}</text>
-  <text x="58" y="54" font-family="${IND_FONT_BODY}" font-size="12" fill="rgba(255,255,255,0.78)">${xmlEsc(description)}</text>
-  <text x="${totalW - 30}" y="54" font-family="${IND_FONT_MONO}" font-size="11" fill="rgba(255,255,255,0.7)" text-anchor="end">${timestamp}</text>
-
-  <!-- Migration tag (square blueprint chip) -->
-  <rect x="${totalW - 130}" y="20" width="100" height="26" fill="rgba(255,255,255,0.15)"/>
-  <text x="${totalW - 80}" y="38" font-family="${IND_FONT_MONO}" font-size="11" font-weight="700" fill="white" text-anchor="middle">MIGRATION</text>`;
+        svg.child('rect', { width: totalW, height: H, fill: theme_1.INK.wash, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+        // Database icon, drawn with plain hairline strokes.
+        const g = svg.child('g', { transform: 'translate(30, 24)' });
+        g.child('ellipse', { cx: 14, cy: 8, rx: 12, ry: 4, fill: 'none', stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+        g.child('path', {
+            d: 'M2 12v12c0 2.2 5.4 4 12 4s12-1.8 12-4V12',
+            fill: 'none',
+            stroke: theme_1.INK.line,
+            'stroke-width': theme_1.STROKE.hair,
+        });
+        g.child('path', {
+            d: 'M2 16c0 2.2 5.4 4 12 4s12-1.8 12-4',
+            fill: 'none',
+            stroke: theme_1.INK.line,
+            'stroke-width': theme_1.STROKE.hair,
+        });
+        svg
+            .child('text', { x: 58, y: 36, 'font-family': theme_1.FONT.family, 'font-size': theme_1.FONT.title + 9, 'font-weight': 'bold', fill: theme_1.INK.line })
+            .text(title);
+        svg
+            .child('text', { x: 58, y: 54, 'font-family': theme_1.FONT.family, 'font-size': theme_1.FONT.small + 3, fill: theme_1.INK.muted })
+            .text(description);
+        svg
+            .child('text', {
+            x: totalW - 30,
+            y: 54,
+            'font-family': theme_1.FONT.mono,
+            'font-size': theme_1.FONT.small + 2,
+            fill: theme_1.INK.muted,
+            'text-anchor': 'end',
+        })
+            .text(timestamp);
+        // Migration tag.
+        svg.child('rect', { x: totalW - 130, y: 20, width: 100, height: 26, fill: theme_1.INK.ground, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+        svg
+            .child('text', {
+            x: totalW - 80,
+            y: 38,
+            'font-family': theme_1.FONT.mono,
+            'font-size': theme_1.FONT.small + 2,
+            'font-weight': 'bold',
+            fill: theme_1.INK.line,
+            'text-anchor': 'middle',
+        })
+            .text('MIGRATION');
     }
-    // ── Render a table change box ─────────────────────────────────────────
-    renderChangeBox(item) {
-        const { change, x, y, w, h, colorIdx } = item;
-        // Fallback color for unknown/undefined change types so `colors.header` etc.
-        // never throw.
-        const colors = CHANGE_COLORS[change.type] ?? {
-            header: '#334155',
-            mid: '#475569',
-            light: '#E2E8F0',
-            text: '#334155',
-            icon: '#475569',
-        };
-        // Sanitize the table name for use in an SVG element id (must be a valid,
-        // unique NCName) and escape it wherever it lands in markup/comments.
-        const safeId = String(change.table ?? 'table').replace(/\W/g, '') + colorIdx;
+    // -- Render a table change box --------------------------------------------
+    renderChangeBox(svg, item) {
+        const { change, x, y, w } = item;
         const changes = change.changes ?? [];
-        let out = `\n  <!-- Change: ${xmlEsc(change.table)} (${xmlEsc(change.type)}) -->`;
-        // Box background (white interior, hairline border, square — blueprint).
-        out += `\n  <rect x="${x}" y="${y}" width="${w}" height="${h}" fill="white" stroke="${IND_HAIRLINE}" stroke-width="1"/>`;
-        // Header with change type indicator (solid, no radius)
-        out += `\n  <rect x="${x}" y="${y}" width="${w}" height="${MigrationDiagram.BOX_HDR}" fill="${colors.header}"/>`;
-        // Change type badge
-        out += `\n  <rect x="${x + 12}" y="${y + 10}" width="56" height="22" fill="${colors.light}"/>`;
-        out += `\n  <text x="${x + 40}" y="${y + 25}" font-family="${IND_FONT_MONO}" font-size="10" font-weight="700" fill="${colors.text}" text-anchor="middle">${xmlEsc(String(change.type ?? '').toUpperCase())}</text>`;
-        // Table name
-        out += `\n  <text x="${x + 80}" y="${y + 27}" font-family="${IND_FONT_HEAD}" font-size="15" font-weight="700" fill="white">${xmlEsc(change.table)}</text>`;
-        // Column changes
+        const label = ACTION_LABEL[change.type] ?? change.type.toString().toUpperCase().slice(0, 3);
+        // Box background.
+        svg.child('rect', { x, y, width: w, height: item.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: MigrationDiagram.BOX_HDR, fill: theme_1.INK.wash, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+        // Change type badge.
+        svg.child('rect', { x: x + 12, y: y + 10, width: 56, height: 22, fill: theme_1.INK.ground, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+        svg
+            .child('text', {
+            x: x + 40,
+            y: y + 25,
+            'font-family': theme_1.FONT.mono,
+            'font-size': theme_1.FONT.small,
+            'font-weight': 'bold',
+            fill: theme_1.INK.line,
+            'text-anchor': 'middle',
+        })
+            .text(label);
+        // Table name.
+        svg
+            .child('text', {
+            x: x + 80,
+            y: y + 27,
+            'font-family': theme_1.FONT.family,
+            'font-size': theme_1.FONT.body + 3,
+            'font-weight': 'bold',
+            fill: theme_1.INK.line,
+        })
+            .text(change.table);
+        // Column changes.
         changes.forEach((col, i) => {
             const fy = y + MigrationDiagram.BOX_HDR + i * MigrationDiagram.BOX_ROW;
-            const rowBg = i % 2 === 0 ? '#FFFFFF' : '#F9FAFB';
-            const tc = typeBadgeColor(col.type);
-            out += `\n  <rect x="${x}" y="${fy}" width="${w}" height="${MigrationDiagram.BOX_ROW}" fill="${rowBg}"/>`;
-            // Change indicator stripe
-            const stripeColor = col.action === 'add' ? '#059669' : col.action === 'remove' ? '#DC2626' : '#D97706';
-            out += `\n  <rect x="${x}" y="${fy}" width="4" height="${MigrationDiagram.BOX_ROW}" fill="${stripeColor}"/>`;
-            // Action icon (SVG)
+            const rowBg = i % 2 === 0 ? theme_1.INK.ground : theme_1.INK.wash;
+            svg.child('rect', { x, y: fy, width: w, height: MigrationDiagram.BOX_ROW, fill: rowBg });
+            // Change indicator stripe.
+            svg.child('rect', { x, y: fy, width: 4, height: MigrationDiagram.BOX_ROW, fill: theme_1.INK.line });
+            // Action marker (plain circle + ASCII glyph via strokes).
             const ix = x + 16;
             const iy = fy + MigrationDiagram.BOX_ROW / 2;
+            svg.child('circle', { cx: ix, cy: iy, r: 6, fill: theme_1.INK.ground, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
             if (col.action === 'add') {
-                out += `\n  <circle cx="${ix}" cy="${iy}" r="6" fill="${stripeColor}"/>
-  <path d="M${ix - 3} ${iy}v6M${ix} ${iy - 3}h6" stroke="white" stroke-width="2" fill="none"/>`;
+                svg.child('path', { d: `M${ix - 3} ${iy}h6M${ix} ${iy - 3}v6`, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair, fill: 'none' });
             }
             else if (col.action === 'remove') {
-                out += `\n  <circle cx="${ix}" cy="${iy}" r="6" fill="${stripeColor}"/>
-  <path d="M${ix - 3} ${iy}h6" stroke="white" stroke-width="2" fill="none"/>`;
+                svg.child('path', { d: `M${ix - 3} ${iy}h6`, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair, fill: 'none' });
             }
             else {
-                out += `\n  <circle cx="${ix}" cy="${iy}" r="6" fill="${stripeColor}"/>
-  <path d="M${ix - 3} ${iy}h6" stroke="white" stroke-width="2" fill="none"/>
-  <path d="M${ix} ${iy - 3}v6" stroke="white" stroke-width="2" fill="none"/>`;
+                svg.child('path', { d: `M${ix - 3} ${iy}h6`, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair, fill: 'none' });
+                svg.child('path', { d: `M${ix} ${iy - 3}v6`, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair, fill: 'none' });
             }
-            // Column name
+            // Column name.
             const nameX = x + 36;
-            const nameW = col.action === 'modify' && col.oldType ? '600' : '500';
-            out += `\n  <text x="${nameX}" y="${iy + 4}" font-family="${IND_FONT_MONO}" font-size="12" font-weight="${nameW}" fill="#1d1f20">${xmlEsc(col.name)}</text>`;
-            // Type badge
+            svg
+                .child('text', {
+                x: nameX,
+                y: iy + 4,
+                'font-family': theme_1.FONT.mono,
+                'font-size': theme_1.FONT.body + 1,
+                'font-weight': 'bold',
+                fill: theme_1.INK.line,
+            })
+                .text((0, layout_1.truncate)(col.name, x + w - 12 - nameX, theme_1.FONT.body + 1, true));
+            // Type badge.
             if (col.action === 'modify' && col.oldType) {
-                // Show old → new type
-                out += `\n  <text x="${x + w - 10}" y="${iy + 4}" font-family="${IND_FONT_MONO}" font-size="9" fill="#7a7a7d" text-anchor="end">${xmlEsc(col.oldType)} → ${xmlEsc(col.type)}</text>`;
+                svg
+                    .child('text', {
+                    x: x + w - 10,
+                    y: iy + 4,
+                    'font-family': theme_1.FONT.mono,
+                    'font-size': theme_1.FONT.small - 1,
+                    fill: theme_1.INK.muted,
+                    'text-anchor': 'end',
+                })
+                    .text(`${col.oldType} -> ${col.type}`);
             }
             else {
-                const tbW = col.type.length * 6 + 12;
-                out += `\n  <rect x="${x + w - tbW - 8}" y="${fy + 6}" width="${tbW}" height="16" fill="${tc.bg}"/>`;
-                out += `\n  <text x="${x + w - tbW / 2 - 8}" y="${fy + 18}" font-family="${IND_FONT_MONO}" font-size="9" font-weight="600" fill="${tc.text}" text-anchor="middle">${xmlEsc(col.type.slice(0, 12))}</text>`;
+                const label12 = col.type.slice(0, 12);
+                const tbW = label12.length * 6 + 12;
+                svg.child('rect', { x: x + w - tbW - 8, y: fy + 6, width: tbW, height: 16, fill: theme_1.INK.wash, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+                svg
+                    .child('text', {
+                    x: x + w - tbW / 2 - 8,
+                    y: fy + 18,
+                    '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(label12);
             }
-            // Row separator (hairline)
-            out += `\n  <line x1="${x}" y1="${fy + MigrationDiagram.BOX_ROW}" x2="${x + w}" y2="${fy + MigrationDiagram.BOX_ROW}" stroke="${IND_HAIRLINE}"/>`;
+            // Row separator.
+            svg.child('line', {
+                x1: x,
+                y1: fy + MigrationDiagram.BOX_ROW,
+                x2: x + w,
+                y2: fy + MigrationDiagram.BOX_ROW,
+                stroke: theme_1.INK.line,
+                'stroke-width': theme_1.STROKE.hair,
+            });
         });
-        // Footer
+        // Footer.
         const footY = y + MigrationDiagram.BOX_HDR + changes.length * MigrationDiagram.BOX_ROW;
-        out += `\n  <rect x="${x}" y="${footY}" width="${w}" height="${MigrationDiagram.FOOT_H}" fill="${colors.light}"/>`;
-        out += `\n  <text x="${x + 12}" y="${footY + 18}" font-family="${IND_FONT_HEAD}" font-size="10" fill="${colors.text}" font-weight="600">${changes.length} change${changes.length !== 1 ? 's' : ''}</text>`;
-        return out;
+        svg.child('rect', { x, y: footY, width: w, height: MigrationDiagram.FOOT_H, fill: theme_1.INK.wash });
+        svg
+            .child('text', {
+            x: x + 12,
+            y: footY + 18,
+            'font-family': theme_1.FONT.family,
+            'font-size': theme_1.FONT.small,
+            'font-weight': 'bold',
+            fill: theme_1.INK.line,
+        })
+            .text(`${changes.length} change${changes.length !== 1 ? 's' : ''}`);
     }
-    // ── Render legend ────────────────────────────────────────────────────
-    renderLegend(x, y) {
+    // -- Render legend ---------------------------------------------------------
+    renderLegend(svg, x, y) {
         const items = [
-            { label: 'Added', color: '#059669', bg: '#D1FAE5' },
-            { label: 'Removed', color: '#DC2626', bg: '#FEE2E2' },
-            { label: 'Modified', color: '#D97706', bg: '#FEF3C7' },
+            { label: 'Added' },
+            { label: 'Removed' },
+            { label: 'Modified' },
         ];
-        let out = `\n  <!-- LEGEND -->`;
         items.forEach((item, i) => {
             const ix = x + i * 110;
-            out += `\n  <rect x="${ix}" y="${y}" width="90" height="28" fill="${item.bg}"/>`;
-            out += `\n  <circle cx="${ix + 16}" cy="${y + 14}" r="6" fill="${item.color}"/>`;
-            out += `\n  <text x="${ix + 30}" y="${y + 18}" font-family="${IND_FONT_HEAD}" font-size="11" font-weight="600" fill="${item.color}">${item.label}</text>`;
+            svg.child('rect', { x: ix, y, width: 90, height: 28, fill: theme_1.INK.wash, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+            svg.child('circle', { cx: ix + 16, cy: y + 14, r: 6, fill: theme_1.INK.ground, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+            svg
+                .child('text', {
+                x: ix + 30,
+                y: y + 18,
+                'font-family': theme_1.FONT.family,
+                'font-size': theme_1.FONT.small + 2,
+                'font-weight': 'bold',
+                fill: theme_1.INK.line,
+            })
+                .text(item.label);
         });
-        return out;
     }
-    // ── Generate full SVG ────────────────────────────────────────────────
-    generate() {
-        const { changes } = this.opts;
+    // -- Generate full SVG -----------------------------------------------------
+    build() {
         const MARGIN = MigrationDiagram.MARGIN;
         const BANNER = MigrationDiagram.BANNER_H;
         const layout = this.computeLayout();
-        // Calculate dimensions
         let totalW = MigrationDiagram.BOX_W + 2 * MARGIN + 100;
         let totalH = BANNER + MARGIN;
         if (layout.length > 0) {
             const lastItem = layout[layout.length - 1];
             totalH = lastItem.y + lastItem.h + MARGIN + 50;
         }
-        const theme = (0, palette_1.resolveTheme)(this.opts.theme);
-        const svg = [
-            `<?xml version="1.0" encoding="UTF-8"?>`,
-            `<!-- Generated by ts-prorm-orm MigrationDiagram -->`,
-            `<svg xmlns="http://www.w3.org/2000/svg" width="${totalW}" height="${totalH}" viewBox="0 0 ${totalW} ${totalH}">`,
-            `  <style>${IND_FONT_IMPORT}</style>`,
-            `  <rect width="${totalW}" height="${totalH}" fill="${theme.canvasBg}"/>`,
-        ];
-        // Banner
-        svg.push(this.renderBanner(totalW));
-        // Change boxes
+        const doc = new svg_1.SvgDocument(totalW, totalH);
+        const svg = doc.root;
+        svg.child('rect', { width: totalW, height: totalH, fill: theme_1.INK.ground });
+        this.renderBanner(svg, totalW);
         layout.forEach((item) => {
-            svg.push(this.renderChangeBox(item));
+            this.renderChangeBox(svg, item);
         });
-        // Legend
         if (layout.length > 0) {
-            svg.push(this.renderLegend(MARGIN, totalH - 50));
+            this.renderLegend(svg, MARGIN, totalH - 50);
         }
-        svg.push(`</svg>`);
-        return svg.join('\n');
+        return doc;
+    }
+    generate() {
+        return this.build().toString('Generated by ts-prorm-orm MigrationDiagram');
     }
     /**
      * Write the SVG to a file.

package/dist/diagrams/model-diagram.d.ts

@@ -1,23 +1,11 @@
 /**
- * ModelDiagram — generates a fully-rendered SVG card for a single ORM model,
- * styled to the "Industry" blueprint design system.
+ * ModelDiagram - a single model as one panel.
  *
- * 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:
- *   const diag = new ModelDiagram({ name: 'User', fields: { … }, associations: […] });
- *   diag.save('./diagrams/User.svg');
- *   // or:
- *   const svgString = diag.generate();
+ * Header carries the model name and its table name; rows are the columns, with
+ * a key marker on the left and the SQL type on the right; associations follow
+ * below a rule. Nothing else is drawn.
  */
+import { line, measureText, text } from './core/layout';
 export interface FieldDefinition {
     name?: string;
     type: string | {
@@ -52,34 +40,46 @@ export interface ModelDiagramOptions {
     name: string;
     /** Override database table name */
     tableName?: string;
-    /** Map of column-name → field definition */
+    /** Map of column-name to field definition */
     fields: Record<string, FieldDefinition>;
     associations?: AssociationDefinition[];
     timestamps?: boolean;
     paranoid?: boolean;
     underscored?: boolean;
     comment?: string;
+    /**
+     * Accepted for backward compatibility and ignored: diagrams render in a
+     * single monochrome theme.
+     */
     theme?: 'light' | 'dark';
-    /** Named palette (e.g. "industry") or hex color for the accent header */
+    /** Accepted for backward compatibility and ignored. */
     color?: string;
 }
+/** Render a field's type as a plain SQL-ish string. */
+export declare function resolveType(field: FieldDefinition): string;
+/**
+ * Key marker for a column: PK, FK, U for unique, or blank.
+ *
+ * A single short token rather than a coloured badge - it survives greyscale
+ * printing and costs one column of width.
+ */
+declare function marker(field: FieldDefinition): string | undefined;
+/** Trailing annotations for a column, e.g. "not null", "default 0". */
+declare function annotations(field: FieldDefinition): string;
+/** Describe one association in a single line. */
+declare function describeAssociation(a: AssociationDefinition): string;
 export declare class ModelDiagram {
-    private opts;
-    private static readonly W;
-    private static readonly HDR;
-    private static readonly COL_HDR;
-    private static readonly ROW_H;
-    private static readonly ASSOC_HDR;
-    private static readonly ASSOC_ROW;
-    private static readonly FOOTER;
-    private static readonly PAD;
+    private readonly opts;
     constructor(options: ModelDiagramOptions);
-    private badges;
-    private drawBadge;
-    private cornerMarks;
+    /** Column rows, including the implicit timestamp columns when enabled. */
+    private fieldRows;
+    private associationRows;
+    /** Build the SVG document. */
+    private build;
+    /** Generate the SVG source. */
     generate(): string;
-    /**
-     * Write the SVG to a file. Creates parent directories if needed.
-     */
+    /** Write the SVG to `outputPath`, creating parent directories. */
     save(outputPath: string): string;
 }
+export { marker as fieldMarker, annotations as fieldAnnotations, describeAssociation };
+export { measureText, line, text };