ts-prorm-orm 1.2.2 → 2.0.0

package/dist/diagrams/dependency-diagram.js

@@ -1,23 +1,20 @@
 "use strict";
 /**
- * DependencyDiagram — renders a directed dependency graph of models/tables.
+ * DependencyDiagram - renders a directed dependency graph of models/tables.
  *
- * Nodes are models/tables; a directed edge `from → to` means "from depends on
+ * Nodes are models/tables; a directed edge `from -> to` means "from depends on
  * to" (e.g. table `from` holds a foreign key into table `to`). The generator:
  *
  *  - Computes a layered / topological layout: each node's layer is the longest
  *    dependency path to a leaf. Nodes with no dependencies sit in layer 0;
  *    their dependents fan out into higher layers.
  *  - Detects cycles (back edges) with a DFS colouring pass and visually flags
- *    the cyclic edges in red. The layering pass carries its own visited guard
- *    so a cycle can never send it into an infinite loop.
- *  - Draws each node as a labelled rounded box sized to its label, with arrows
+ *    the cyclic edges with a heavier dashed stroke. The layering pass carries
+ *    its own visited guard so a cycle can never send it into an infinite loop.
+ *  - Draws each node as a labelled box sized to its label, with arrows
  *    between dependent boxes.
  *
- * Accent colour (`color`) drives the node fills / arrowheads; the theme
- * (`light` | `dark`) drives the canvas + text colours. Both genuinely change
- * real fill/stroke values in the emitted SVG. The viewBox auto-sizes to the
- * computed layout.
+ * The viewBox auto-sizes to the computed layout.
  *
  * Usage:
  *   const d = new DependencyDiagram({ nodes, edges, title: 'Schema deps' });
@@ -61,18 +58,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DependencyDiagram = void 0;
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
-const palette_1 = require("./palette");
-const svg_dom_1 = require("./svg-dom");
-// ─── Industry design system ────────────────────────────────────────────────
-// Barlow / JetBrains Mono typography, hairline borders and square "blueprint"
-// corners are fixed by the Industry spec; accent + surface colours still route
-// through resolveAccent / resolveTheme so --color / --theme keep working.
-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');";
-// ─── Main class ──────────────────────────────────────────────────────────────
+const svg_1 = require("./core/svg");
+const theme_1 = require("./core/theme");
+const layout_1 = require("./core/layout");
 class DependencyDiagram {
     constructor(options) {
         this.opts = {
@@ -84,8 +72,8 @@ class DependencyDiagram {
             edges: options.edges ?? [],
         };
     }
-    // ── Graph analysis ──────────────────────────────────────────────────────
-    /** Adjacency: node → the nodes it depends on (its outgoing edge targets). */
+    // -- Graph analysis --------------------------------------------------------
+    /** Adjacency: node -> the nodes it depends on (its outgoing edge targets). */
     buildAdjacency(names) {
         const adj = new Map();
         for (const n of names)
@@ -111,7 +99,7 @@ class DependencyDiagram {
             if (layer.has(node))
                 return layer.get(node);
             if (onStack.has(node))
-                return 0; // cycle guard — break the recursion
+                return 0; // cycle guard - break the recursion
             onStack.add(node);
             let best = 0;
             for (const dep of adj.get(node) ?? []) {
@@ -126,7 +114,7 @@ class DependencyDiagram {
         return layer;
     }
     /**
-     * Detect cyclic edges via DFS colouring. Returns a set of "from→to" keys that
+     * Detect cyclic edges via DFS colouring. Returns a set of "from-to" keys that
      * are back edges (participate in a cycle).
      */
     detectCyclicEdges(names, adj) {
@@ -142,7 +130,7 @@ class DependencyDiagram {
             for (const dep of adj.get(node) ?? []) {
                 const c = color.get(dep);
                 if (c === GRAY) {
-                    cyclic.add(`${node}${dep}`); // back edge → cycle
+                    cyclic.add(`${node}${dep}`); // back edge -> cycle
                 }
                 else if (c === WHITE) {
                     dfs(dep);
@@ -155,13 +143,13 @@ class DependencyDiagram {
                 dfs(n);
         return cyclic;
     }
-    // ── Geometry helpers ─────────────────────────────────────────────────────
+    // -- Geometry helpers -------------------------------------------------------
     nodeWidth(name) {
         return Math.max(DependencyDiagram.MIN_NODE_W, Math.round(name.length * DependencyDiagram.CHAR_W + DependencyDiagram.NODE_PAD_X * 2));
     }
     /**
      * Point on the boundary of a rectangle along the line from the rect centre
-     * toward an external point — used so arrowheads land on the box edge.
+     * toward an external point - used so arrowheads land on the box edge.
      */
     edgePoint(node, tx, ty) {
         const cx = node.x + node.w / 2;
@@ -177,19 +165,14 @@ class DependencyDiagram {
         const scale = Math.min(scaleX, scaleY);
         return { x: cx + dx * scale, y: cy + dy * scale };
     }
-    // ── Generate full SVG string ─────────────────────────────────────────────
-    generate() {
-        const { title, theme, color, direction } = this.opts;
-        const accent = (0, palette_1.resolveAccent)(color);
-        const palettes = (0, palette_1.rotatedPalettes)(color);
-        const t = (0, palette_1.resolveTheme)(theme);
+    build() {
+        const { title, direction } = this.opts;
         const horizontal = direction !== 'vertical';
         const PAD = DependencyDiagram.PAD;
         const TITLE_H = DependencyDiagram.TITLE_H;
         const NODE_H = DependencyDiagram.NODE_H;
         const LAYER_GAP = DependencyDiagram.LAYER_GAP;
         const NODE_GAP = DependencyDiagram.NODE_GAP;
-        const R = DependencyDiagram.R;
         // De-duplicate nodes by name, preserving first occurrence.
         const seen = new Set();
         const nodeDefs = [];
@@ -212,20 +195,10 @@ class DependencyDiagram {
         }
         for (let i = 0; i < layersArr.length; i++)
             layersArr[i] ?? (layersArr[i] = []);
-        // Assign a stable palette per group (for node fill tinting).
-        const groupPalette = new Map();
-        let gi = 0;
-        for (const n of nodeDefs) {
-            const g = n.group;
-            if (g && !groupPalette.has(g)) {
-                groupPalette.set(g, palettes[gi % palettes.length]);
-                gi++;
-            }
-        }
-        // ── Compute placements ──────────────────────────────────────────────
+        // Compute placements.
         const placed = new Map();
         if (horizontal) {
-            // Layers = columns (left→right). Nodes stacked vertically within a column.
+            // Layers = columns (left to right). Nodes stacked vertically within a column.
             const layerW = layersArr.map((layer) => layer.reduce((m, n) => Math.max(m, this.nodeWidth(n.name)), DependencyDiagram.MIN_NODE_W));
             const colX = [];
             let cursor = PAD;
@@ -239,12 +212,12 @@ class DependencyDiagram {
                     const w = this.nodeWidth(n.name);
                     const x = colX[l] + (layerW[l] - w) / 2;
                     const y = contentTop + slot * (NODE_H + NODE_GAP);
-                    this.place(placed, n, l, slot, x, y, w, NODE_H, accent, groupPalette, t);
+                    this.place(placed, n, l, slot, x, y, w, NODE_H);
                 });
             }
         }
         else {
-            // Layers = rows (top→bottom). Nodes spread horizontally within a row.
+            // Layers = rows (top to bottom). Nodes spread horizontally within a row.
             const colW = names.reduce((m, nm) => Math.max(m, this.nodeWidth(nm)), DependencyDiagram.MIN_NODE_W);
             const contentLeft = PAD;
             for (let l = 0; l < layersArr.length; l++) {
@@ -252,11 +225,11 @@ class DependencyDiagram {
                 layersArr[l].forEach((n, slot) => {
                     const w = this.nodeWidth(n.name);
                     const x = contentLeft + slot * (colW + NODE_GAP) + (colW - w) / 2;
-                    this.place(placed, n, l, slot, x, y, w, NODE_H, accent, groupPalette, t);
+                    this.place(placed, n, l, slot, x, y, w, NODE_H);
                 });
             }
         }
-        // ── Auto-size the canvas ────────────────────────────────────────────
+        // Auto-size the canvas.
         let maxX = 0;
         let maxY = 0;
         for (const p of placed.values()) {
@@ -265,37 +238,33 @@ class DependencyDiagram {
         }
         const svgW = Math.round(maxX + PAD);
         const svgH = Math.round(maxY + PAD);
-        // ── Build the document ──────────────────────────────────────────────
-        const doc = new svg_dom_1.SvgDocument(svgW, svgH);
+        const doc = new svg_1.SvgDocument(svgW, svgH);
         const svg = doc.root;
-        // Background + embedded Industry web-fonts.
-        svg.child('rect', { width: svgW, height: svgH, fill: t.canvasBg });
-        svg.child('style').text(IND_FONT_IMPORT);
-        // Arrowhead markers (accent + cyclic red).
-        const CYCLE_COLOR = '#DC2626';
-        this.defineArrow(doc, 'depArrow', accent.mid);
-        this.defineArrow(doc, 'depArrowCycle', CYCLE_COLOR);
-        // Title
+        svg.child('rect', { width: svgW, height: svgH, fill: theme_1.INK.ground });
+        // Arrowhead markers: a plain arrow, and a heavier one for cyclic edges.
+        this.defineArrow(doc, 'depArrow', theme_1.STROKE.hair);
+        this.defineArrow(doc, 'depArrowCycle', theme_1.STROKE.heavy);
+        // Title.
         svg
             .child('text', {
             x: PAD,
             y: PAD + 6,
-            'font-family': IND_FONT_HEAD,
-            'font-size': 22,
-            'font-weight': 600,
-            fill: t.textPrimary,
+            '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: PAD,
             y: PAD + 26,
-            'font-family': IND_FONT_BODY,
-            'font-size': 11,
-            fill: t.textSecondary,
+            'font-family': theme_1.FONT.family,
+            'font-size': theme_1.FONT.small + 2,
+            fill: theme_1.INK.muted,
         })
-            .text(`${placed.size} node${placed.size !== 1 ? 's' : ''} · ${this.opts.edges.length} edge${this.opts.edges.length !== 1 ? 's' : ''}${cyclicEdges.size ? ` · ${cyclicEdges.size} cyclic` : ''}`);
-        // ── Edges (drawn before nodes so boxes sit on top) ──────────────────
+            .text(`${placed.size} node${placed.size !== 1 ? 's' : ''}, ${this.opts.edges.length} edge${this.opts.edges.length !== 1 ? 's' : ''}${cyclicEdges.size ? `, ${cyclicEdges.size} cyclic` : ''}`);
+        // Edges, drawn before nodes so boxes sit on top.
         const edgeLayer = svg.child('g', { 'stroke-linecap': 'round' });
         for (const e of this.opts.edges) {
             const from = placed.get(e.from);
@@ -304,7 +273,7 @@ class DependencyDiagram {
                 continue;
             const isCyclic = cyclicEdges.has(`${e.from}${e.to}`);
             const isSelf = e.from === e.to;
-            const stroke = isCyclic ? CYCLE_COLOR : accent.mid;
+            const strokeWidth = isCyclic ? theme_1.STROKE.heavy : theme_1.STROKE.hair;
             const marker = isCyclic ? 'url(#depArrowCycle)' : 'url(#depArrow)';
             if (isSelf) {
                 // Self-dependency: small loop above the node.
@@ -313,8 +282,8 @@ class DependencyDiagram {
                 edgeLayer.child('path', {
                     d: `M ${lx - 10} ${ly} C ${lx - 26} ${ly - 34}, ${lx + 26} ${ly - 34}, ${lx + 10} ${ly}`,
                     fill: 'none',
-                    stroke,
-                    'stroke-width': isCyclic ? 2.4 : 1.8,
+                    stroke: theme_1.INK.line,
+                    'stroke-width': strokeWidth,
                     'stroke-dasharray': isCyclic ? '6 4' : undefined,
                     'marker-end': marker,
                 });
@@ -331,8 +300,8 @@ class DependencyDiagram {
                 y1: start.y,
                 x2: end.x,
                 y2: end.y,
-                stroke,
-                'stroke-width': isCyclic ? 2.4 : 1.7,
+                stroke: theme_1.INK.line,
+                'stroke-width': strokeWidth,
                 'stroke-dasharray': isCyclic ? '6 4' : undefined,
                 'marker-end': marker,
             });
@@ -341,15 +310,15 @@ class DependencyDiagram {
                     .child('text', {
                     x: (start.x + end.x) / 2,
                     y: (start.y + end.y) / 2 - 4,
-                    'font-family': IND_FONT_MONO,
-                    'font-size': 9,
-                    fill: isCyclic ? CYCLE_COLOR : t.textSecondary,
+                    'font-family': theme_1.FONT.mono,
+                    'font-size': theme_1.FONT.small - 1,
+                    fill: theme_1.INK.muted,
                     'text-anchor': 'middle',
                 })
                     .text(e.label);
             }
         }
-        // ── Nodes ───────────────────────────────────────────────────────────
+        // Nodes.
         for (const n of nodeDefs) {
             const p = placed.get(n.name);
             if (!p)
@@ -360,35 +329,36 @@ class DependencyDiagram {
                 y: p.y,
                 width: p.w,
                 height: p.h,
-                fill: p.fill,
-                stroke: p.stroke,
-                'stroke-width': 1,
+                fill: theme_1.INK.wash,
+                stroke: theme_1.INK.line,
+                'stroke-width': theme_1.STROKE.hair,
             });
             g.child('text', {
                 x: p.x + p.w / 2,
                 y: p.y + p.h / 2 + 5,
-                'font-family': IND_FONT_MONO,
-                'font-size': 14,
-                'font-weight': 700,
-                fill: p.text,
+                'font-family': theme_1.FONT.mono,
+                'font-size': theme_1.FONT.body + 3,
+                'font-weight': 'bold',
+                fill: theme_1.INK.line,
                 'text-anchor': 'middle',
-            }).text(n.name);
+            }).text((0, layout_1.truncate)(n.name, p.w - 8, theme_1.FONT.body + 3, true));
             // Layer badge on the box shoulder.
             g.child('text', {
                 x: p.x + 8,
                 y: p.y + 13,
-                'font-family': IND_FONT_BODY,
-                'font-size': 9,
-                'font-weight': 700,
-                fill: p.text,
-                opacity: 0.55,
+                'font-family': theme_1.FONT.family,
+                'font-size': theme_1.FONT.small - 1,
+                'font-weight': 'bold',
+                fill: theme_1.INK.muted,
             }).text(`L${p.layer}`);
         }
-        return doc.toString('Generated by ts-prorm-orm DependencyDiagram');
+        return doc;
+    }
+    generate() {
+        return this.build().toString('Generated by ts-prorm-orm DependencyDiagram');
     }
-    // ── place() records a node's geometry + resolved colours ─────────────────
-    place(placed, n, layer, slot, x, y, w, h, accent, groupPalette, t) {
-        const pal = (n.group && groupPalette.get(n.group)) || accent;
+    // -- place() records a node's geometry -------------------------------------
+    place(placed, n, layer, slot, x, y, w, h) {
         placed.set(n.name, {
             name: n.name,
             group: n.group,
@@ -398,23 +368,20 @@ class DependencyDiagram {
             y,
             w,
             h,
-            fill: pal.light,
-            stroke: pal.mid,
-            text: pal.text,
         });
     }
-    // ── Arrowhead marker in <defs> ───────────────────────────────────────────
-    defineArrow(doc, id, color) {
+    // -- Arrowhead marker in <defs> ---------------------------------------------
+    defineArrow(doc, id, strokeWidth) {
         const marker = doc.defs().child('marker', {
             id,
             viewBox: '0 0 10 10',
             refX: 9,
             refY: 5,
-            markerWidth: 7,
-            markerHeight: 7,
+            markerWidth: strokeWidth === theme_1.STROKE.heavy ? 8 : 7,
+            markerHeight: strokeWidth === theme_1.STROKE.heavy ? 8 : 7,
             orient: 'auto-start-reverse',
         });
-        marker.child('path', { d: 'M 0 0 L 10 5 L 0 10 z', fill: color });
+        marker.child('path', { d: 'M 0 0 L 10 5 L 0 10 z', fill: theme_1.INK.line });
     }
     /**
      * Write the SVG to a file, creating parent directories as needed.
@@ -438,4 +405,3 @@ DependencyDiagram.NODE_PAD_X = 22;
 DependencyDiagram.MIN_NODE_W = 72;
 DependencyDiagram.LAYER_GAP = 90; // gap between layer columns/rows
 DependencyDiagram.NODE_GAP = 26; // gap between nodes in a layer
-DependencyDiagram.R = 9;

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

@@ -1,17 +1,14 @@
 /**
- * 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({
@@ -35,9 +32,12 @@ export interface ERDiagramOptions {
     hGap?: number;
     /** Vertical gap between entity boxes (px) */
     vGap?: number;
-    /** Theme mode: light or dark */
+    /**
+     * 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 */
+    /** Accepted for backward compatibility and ignored. */
     color?: string;
 }
 export declare class ERDiagram {
@@ -51,15 +51,7 @@ export declare class ERDiagram {
     private static readonly LEGEND_W;
     private static readonly LEGEND_PAD;
     private static readonly MARGIN;
-    private accentMid;
-    private accentText;
-    private accentLight;
-    private accent2Mid;
-    private accent2Text;
-    private accent2Light;
     constructor(options: ERDiagramOptions);
-    /** Two-tone entity styling — even entities accent, odd accent-2. */
-    private entityStyle;
     private boxHeight;
     private computeLayout;
     private renderBox;
@@ -68,12 +60,7 @@ export declare class ERDiagram {
     private singleBar;
     private renderBanner;
     private renderLegend;
-    /**
-     * 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.
-     */
-    private fontDefs;
+    private build;
     generate(): string;
     /**
      * Write the SVG to a file. Creates parent directories if needed.