ts-prorm-orm 1.2.2 → 2.0.0

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

@@ -1,21 +1,17 @@
 /**
- * StateDiagram — generates a UML state-machine diagram as an SVG.
+ * StateDiagram - generates a UML state-machine diagram as an SVG.
  *
  * Renders:
- *  - normal states as rounded rectangles
- *  - an initial pseudo-state as a filled black circle
+ *  - normal states as square hairline boxes
+ *  - an initial pseudo-state as a filled circle
  *  - a final state as a ringed (double) circle
  *  - transitions as arrows between states, labeled with their trigger/event
  *  - self-transitions as loop arrows
  *
- * Great for showing a record lifecycle (e.g. draft → active → archived →
+ * Great for showing a record lifecycle (e.g. draft -> active -> archived ->
  * deleted). States are auto-placed left-to-right in a wrapping grid unless
  * explicit x/y hints are supplied per state. The SVG viewBox is auto-sized.
  *
- * Both `--theme light|dark` and `--color <name|hex>` genuinely change the
- * output: the accent drives state fills + arrowheads, the theme drives the
- * canvas background, text and borders.
- *
  * Usage:
  *   const diag = new StateDiagram({
  *     states: [
@@ -56,8 +52,12 @@ export interface StateDiagramOptions {
     states: StateNode[];
     transitions: StateTransition[];
     title?: string;
+    /**
+     * Accepted for backward compatibility and ignored: diagrams render in a
+     * single monochrome theme.
+     */
     theme?: 'light' | 'dark';
-    /** Custom accent color (named palette entry or hex). */
+    /** Accepted for backward compatibility and ignored. */
     color?: string;
 }
 export declare class StateDiagram {
@@ -74,6 +74,7 @@ export declare class StateDiagram {
     constructor(options: StateDiagramOptions);
     private layout;
     private edgePoint;
+    private build;
     generate(): string;
     private drawTransition;
     private drawSelfLoop;

package/dist/diagrams/state-diagram.js

@@ -1,22 +1,18 @@
 "use strict";
 /**
- * StateDiagram — generates a UML state-machine diagram as an SVG.
+ * StateDiagram - generates a UML state-machine diagram as an SVG.
  *
  * Renders:
- *  - normal states as rounded rectangles
- *  - an initial pseudo-state as a filled black circle
+ *  - normal states as square hairline boxes
+ *  - an initial pseudo-state as a filled circle
  *  - a final state as a ringed (double) circle
  *  - transitions as arrows between states, labeled with their trigger/event
  *  - self-transitions as loop arrows
  *
- * Great for showing a record lifecycle (e.g. draft → active → archived →
+ * Great for showing a record lifecycle (e.g. draft -> active -> archived ->
  * deleted). States are auto-placed left-to-right in a wrapping grid unless
  * explicit x/y hints are supplied per state. The SVG viewBox is auto-sized.
  *
- * Both `--theme light|dark` and `--color <name|hex>` genuinely change the
- * output: the accent drives state fills + arrowheads, the theme drives the
- * canvas background, text and borders.
- *
  * Usage:
  *   const diag = new StateDiagram({
  *     states: [
@@ -73,18 +69,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StateDiagram = 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");
+// -- Main class ----------------------------------------------------------------
 class StateDiagram {
     constructor(options) {
         this.opts = {
@@ -95,7 +83,7 @@ class StateDiagram {
             color: options.color ?? '',
         };
     }
-    // ── Auto-place states in a wrapping row/grid (honoring x/y hints) ─────────
+    // -- Auto-place states in a wrapping row/grid (honoring x/y hints) ---------
     layout() {
         const { states } = this.opts;
         const PAD = StateDiagram.PAD;
@@ -131,7 +119,7 @@ class StateDiagram {
         const height = maxY + PAD;
         return { placed, width, height };
     }
-    // ── Compute a point on the box perimeter toward a target point ────────────
+    // -- Compute a point on the box perimeter toward a target point ------------
     edgePoint(p, tx, ty) {
         const dx = tx - p.cx;
         const dy = ty - p.cy;
@@ -142,109 +130,94 @@ class StateDiagram {
         const s = Math.min(scaleX, scaleY);
         return { x: p.cx + dx * s, y: p.cy + dy * s };
     }
-    // ── Generate full SVG string (built via a real DOM document) ──────────────
-    generate() {
-        const { title, theme, color } = this.opts;
-        const accent = (0, palette_1.resolveAccent)(color);
-        const t = (0, palette_1.resolveTheme)(theme);
+    // -- Build the SVG document -------------------------------------------------
+    build() {
+        const { title } = this.opts;
         const { placed, width, height } = this.layout();
         const PAD = StateDiagram.PAD;
-        const R = StateDiagram.R;
-        const doc = new svg_dom_1.SvgDocument(width, height);
+        const doc = new svg_1.SvgDocument(width, height);
         const svg = doc.root;
-        // ── Background + embedded Industry web-fonts ────────────────────────
-        svg.child('rect', { width, height, fill: t.canvasBg });
-        svg.child('style').text(IND_FONT_IMPORT);
-        // ── Defs: arrowhead marker (solid accent states — no gradient) ──────
-        const marker = doc.defs().child('marker', {
-            id: 'arrow',
-            markerWidth: 10,
-            markerHeight: 10,
-            refX: 8,
-            refY: 3,
-            orient: 'auto',
-            markerUnits: 'strokeWidth',
-        });
-        marker.child('path', { d: 'M0,0 L8,3 L0,6 Z', fill: accent.mid });
-        // ── Title ───────────────────────────────────────────────────────────
+        svg.child('rect', { width, height, fill: theme_1.INK.ground });
+        // Defs: the single shared arrowhead marker.
+        (0, layout_1.defineArrowhead)(doc.defs(), 'arrow');
         if (title) {
             svg
                 .child('text', {
                 x: PAD,
                 y: PAD + 8,
-                '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);
         }
-        // ── Transitions (drawn first so states sit on top) ──────────────────
+        // Transitions, drawn first so states sit on top.
         this.opts.transitions.forEach((tr) => {
             const from = placed.get(tr.from);
             const to = placed.get(tr.to);
             if (!from || !to)
                 return;
             if (tr.from === tr.to) {
-                this.drawSelfLoop(svg, from, tr.event, accent.mid, t.textSecondary);
+                this.drawSelfLoop(svg, from, tr.event);
             }
             else {
-                this.drawTransition(svg, from, to, tr.event, accent.mid, t.textSecondary);
+                this.drawTransition(svg, from, to, tr.event);
             }
         });
-        // ── States ──────────────────────────────────────────────────────────
+        // States.
         placed.forEach((p) => {
             const node = p.node;
             if (node.initial) {
-                // Filled black circle (initial pseudo-state).
+                // Filled circle (initial pseudo-state).
                 svg.child('circle', {
                     cx: p.cx,
                     cy: p.cy,
                     r: StateDiagram.PSEUDO_R,
-                    fill: '#1d1f20',
-                    stroke: t.border,
-                    'stroke-width': 1,
+                    fill: theme_1.INK.line,
+                    stroke: theme_1.INK.line,
+                    'stroke-width': theme_1.STROKE.hair,
                 });
             }
             else if (node.final) {
-                // Ringed circle (final state): outer ring + filled accent core.
+                // Ringed circle (final state): outer ring + filled core.
                 svg.child('circle', {
                     cx: p.cx,
                     cy: p.cy,
                     r: StateDiagram.PSEUDO_R,
                     fill: 'none',
-                    stroke: t.textPrimary,
-                    'stroke-width': 2,
+                    stroke: theme_1.INK.line,
+                    'stroke-width': theme_1.STROKE.heavy,
                 });
                 svg.child('circle', {
                     cx: p.cx,
                     cy: p.cy,
                     r: StateDiagram.PSEUDO_R - 6,
-                    fill: accent.mid,
+                    fill: theme_1.INK.line,
                 });
             }
             else {
-                // Normal state: square box with solid accent fill (blueprint).
+                // Normal state: square hairline box.
                 svg.child('rect', {
                     x: p.cx - p.hw,
                     y: p.cy - p.hh,
                     width: p.hw * 2,
                     height: p.hh * 2,
-                    fill: accent.mid,
-                    stroke: accent.from,
-                    'stroke-width': 1,
+                    fill: theme_1.INK.wash,
+                    stroke: theme_1.INK.line,
+                    'stroke-width': theme_1.STROKE.hair,
                 });
                 svg
                     .child('text', {
                     x: p.cx,
                     y: p.cy + 5,
-                    'font-family': IND_FONT_HEAD,
-                    'font-size': 15,
-                    'font-weight': 700,
-                    fill: '#FFFFFF',
+                    'font-family': theme_1.FONT.family,
+                    'font-size': theme_1.FONT.body + 2,
+                    'font-weight': 'bold',
+                    fill: theme_1.INK.line,
                     'text-anchor': 'middle',
                 })
-                    .text(node.name);
+                    .text((0, layout_1.truncate)(node.name, p.hw * 2 - 12, theme_1.FONT.body + 2));
             }
             // Label markers (initial/final) beneath the circle.
             if (node.initial || node.final) {
@@ -252,19 +225,22 @@ class StateDiagram {
                     .child('text', {
                     x: p.cx,
                     y: p.cy + StateDiagram.PSEUDO_R + 16,
-                    'font-family': IND_FONT_BODY,
-                    'font-size': 11,
-                    'font-weight': 600,
-                    fill: t.textSecondary,
+                    'font-family': theme_1.FONT.family,
+                    'font-size': theme_1.FONT.small + 2,
+                    'font-weight': 'bold',
+                    fill: theme_1.INK.muted,
                     'text-anchor': 'middle',
                 })
                     .text(node.name);
             }
         });
-        return doc.toString('Generated by ts-prorm-orm StateDiagram');
+        return doc;
+    }
+    generate() {
+        return this.build().toString('Generated by ts-prorm-orm StateDiagram');
     }
-    // ── Draw a straight transition arrow with an optional event label ─────────
-    drawTransition(svg, from, to, event, stroke, labelColor) {
+    // -- Draw a straight transition arrow with an optional event label ---------
+    drawTransition(svg, from, to, event) {
         const start = this.edgePoint(from, to.cx, to.cy);
         const end = this.edgePoint(to, from.cx, from.cy);
         svg.child('line', {
@@ -272,18 +248,18 @@ class StateDiagram {
             y1: start.y,
             x2: end.x,
             y2: end.y,
-            stroke,
-            'stroke-width': 2,
+            stroke: theme_1.INK.line,
+            'stroke-width': theme_1.STROKE.heavy,
             'marker-end': 'url(#arrow)',
         });
         if (event) {
             const mx = (start.x + end.x) / 2;
             const my = (start.y + end.y) / 2;
-            this.drawEventLabel(svg, mx, my - 6, event, labelColor);
+            this.drawEventLabel(svg, mx, my - 6, event);
         }
     }
-    // ── Draw a self-transition loop arrow above the state ─────────────────────
-    drawSelfLoop(svg, p, event, stroke, labelColor) {
+    // -- Draw a self-transition loop arrow above the state ---------------------
+    drawSelfLoop(svg, p, event) {
         const topY = p.cy - p.hh;
         const x1 = p.cx - p.hw * 0.4;
         const x2 = p.cx + p.hw * 0.4;
@@ -292,33 +268,34 @@ class StateDiagram {
         svg.child('path', {
             d,
             fill: 'none',
-            stroke,
-            'stroke-width': 2,
+            stroke: theme_1.INK.line,
+            'stroke-width': theme_1.STROKE.heavy,
             'marker-end': 'url(#arrow)',
         });
         if (event) {
-            this.drawEventLabel(svg, p.cx, topY - loopH - 4, event, labelColor);
+            this.drawEventLabel(svg, p.cx, topY - loopH - 4, event);
         }
     }
-    // ── Draw an event label with a subtle background pill for legibility ───────
-    drawEventLabel(svg, x, y, event, color) {
+    // -- Draw an event label with a background pill for legibility -------------
+    drawEventLabel(svg, x, y, event) {
         const w = event.length * 7 + 12;
         svg.child('rect', {
             x: x - w / 2,
             y: y - 13,
             width: w,
             height: 18,
-            fill: '#FFFFFF',
-            opacity: 0.85,
+            fill: theme_1.INK.ground,
+            stroke: theme_1.INK.line,
+            'stroke-width': theme_1.STROKE.hair,
         });
         svg
             .child('text', {
             x,
             y: y - 1,
-            'font-family': IND_FONT_MONO,
-            'font-size': 11,
-            'font-weight': 600,
-            fill: color,
+            '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(event);

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

@@ -1,18 +1,18 @@
 /**
- * TreeDiagram — renders a recursive hierarchical tree / mind-map as SVG.
+ * TreeDiagram - renders a recursive hierarchical tree / mind-map as SVG.
  *
  * A `TreeNode` tree of arbitrary depth is laid out with a classic "tidy tree"
  * algorithm: each node's cross-axis span equals the number of its leaf
  * descendants, so siblings never overlap. The main axis is driven by depth
  * (columns for `horizontal`, rows for `vertical`). Parents connect to children
- * with smooth cubic-Bezier <path> connectors. Nodes are rounded label boxes,
- * colored by depth from a rotated accent palette; the canvas/text use the
- * light/dark theme.
+ * with cubic-Bezier <path> connectors. Nodes are square hairline label boxes;
+ * the root is distinguished with a heavier stroke and a wash fill.
  *
  * Usage:
  *   const diag = new TreeDiagram({ root: { name: 'db', children: [...] } });
  *   diag.save('./diagrams/tree.svg');   // or: diag.generate()
  */
+import { measureText } from './core/layout';
 export interface TreeNode {
     name: string;
     children?: TreeNode[];
@@ -21,7 +21,12 @@ export interface TreeNode {
 export interface TreeDiagramOptions {
     root: TreeNode;
     title?: string;
+    /**
+     * Accepted for backward compatibility and ignored: diagrams render in a
+     * single monochrome theme.
+     */
     theme?: 'light' | 'dark';
+    /** Accepted for backward compatibility and ignored. */
     color?: string;
     direction?: 'horizontal' | 'vertical';
 }
@@ -29,7 +34,6 @@ export declare class TreeDiagram {
     private opts;
     private static readonly BOX_W;
     private static readonly BOX_H;
-    private static readonly R;
     private static readonly PAD;
     private static readonly TITLE_H;
     /** Distance between successive depth columns/rows (center-to-center). */
@@ -40,8 +44,10 @@ export declare class TreeDiagram {
     private layout;
     private flatten;
     private connectorPath;
+    private build;
     generate(): string;
     /** Write the SVG to a file, creating parent directories as needed. */
     save(outputPath: string): string;
 }
 export default TreeDiagram;
+export { measureText };

package/dist/diagrams/tree-diagram.js

@@ -1,14 +1,13 @@
 "use strict";
 /**
- * TreeDiagram — renders a recursive hierarchical tree / mind-map as SVG.
+ * TreeDiagram - renders a recursive hierarchical tree / mind-map as SVG.
  *
  * A `TreeNode` tree of arbitrary depth is laid out with a classic "tidy tree"
  * algorithm: each node's cross-axis span equals the number of its leaf
  * descendants, so siblings never overlap. The main axis is driven by depth
  * (columns for `horizontal`, rows for `vertical`). Parents connect to children
- * with smooth cubic-Bezier <path> connectors. Nodes are rounded label boxes,
- * colored by depth from a rotated accent palette; the canvas/text use the
- * light/dark theme.
+ * with cubic-Bezier <path> connectors. Nodes are square hairline label boxes;
+ * the root is distinguished with a heavier stroke and a wash fill.
  *
  * Usage:
  *   const diag = new TreeDiagram({ root: { name: 'db', children: [...] } });
@@ -48,20 +47,13 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TreeDiagram = void 0;
+exports.measureText = exports.TreeDiagram = 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');";
+const svg_1 = require("./core/svg");
+const theme_1 = require("./core/theme");
+const layout_1 = require("./core/layout");
+Object.defineProperty(exports, "measureText", { enumerable: true, get: function () { return layout_1.measureText; } });
 class TreeDiagram {
     constructor(options) {
         this.opts = {
@@ -72,8 +64,8 @@ class TreeDiagram {
             ...options,
         };
     }
-    // ── Recursive subtree-height layout ──────────────────────────────────────
-    // A node's cross span = the sum of its leaf descendants. `nextLeaf` tracks
+    // -- Recursive subtree-height layout --------------------------------------
+    // A node's cross span = the sum of its leaf descendants. `cursor` tracks
     // the running leaf-slot cursor so siblings tile without overlap.
     layout(node, depth, cursor) {
         const kids = node.children ?? [];
@@ -93,7 +85,7 @@ class TreeDiagram {
         for (const c of n.children)
             this.flatten(c, out);
     }
-    // ── Smooth cubic-Bezier connector between two centers ─────────────────────
+    // -- Cubic-Bezier connector between two centers ---------------------------
     connectorPath(parent, child, horizontal) {
         if (horizontal) {
             const x1 = parent.x + TreeDiagram.BOX_W / 2;
@@ -110,15 +102,11 @@ class TreeDiagram {
         const my = (y1 + y2) / 2;
         return `M ${x1} ${y1} C ${x1} ${my}, ${x2} ${my}, ${x2} ${y2}`;
     }
-    generate() {
-        const { root, title, theme, color, direction } = this.opts;
+    build() {
+        const { root, title, direction } = this.opts;
         const horizontal = direction !== 'vertical';
-        const accent = (0, palette_1.resolveAccent)(color);
-        const t = (0, palette_1.resolveTheme)(theme);
-        const palettes = (0, palette_1.rotatedPalettes)(color);
         const BOX_W = TreeDiagram.BOX_W;
         const BOX_H = TreeDiagram.BOX_H;
-        const R = TreeDiagram.R;
         const PAD = TreeDiagram.PAD;
         const DEPTH_GAP = TreeDiagram.DEPTH_GAP;
         const LEAF_GAP = TreeDiagram.LEAF_GAP;
@@ -129,7 +117,7 @@ class TreeDiagram {
         this.flatten(tree, nodes);
         const maxDepth = nodes.reduce((m, n) => Math.max(m, n.depth), 0);
         const totalLeaves = tree.leaves;
-        // 2. Map abstract coords → pixels.
+        // 2. Map abstract coords to pixels.
         const originX = PAD + BOX_W / 2;
         const originY = PAD + titleH + BOX_H / 2;
         for (const n of nodes) {
@@ -147,75 +135,62 @@ class TreeDiagram {
         // 3. Auto-size viewBox.
         const spanDepth = maxDepth * DEPTH_GAP;
         const spanCross = Math.max(0, totalLeaves - 1) * LEAF_GAP;
-        const svgW = horizontal
-            ? 2 * PAD + BOX_W + spanDepth
-            : 2 * PAD + BOX_W + spanCross;
+        const svgW = horizontal ? 2 * PAD + BOX_W + spanDepth : 2 * PAD + BOX_W + spanCross;
         const svgH = horizontal
             ? 2 * PAD + titleH + BOX_H + spanCross
             : 2 * PAD + titleH + BOX_H + spanDepth;
-        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);
-        // ── Title ────────────────────────────────────────────────────────────
+        svg.child('rect', { width: svgW, height: svgH, fill: theme_1.INK.ground });
         if (title) {
             svg
                 .child('text', {
                 x: PAD,
                 y: PAD + 24,
-                'font-family': IND_FONT_HEAD,
-                'font-size': 20,
-                'font-weight': 600,
-                fill: t.textPrimary,
+                'font-family': theme_1.FONT.family,
+                'font-size': theme_1.FONT.title + 3,
+                'font-weight': 'bold',
+                fill: theme_1.INK.line,
             })
                 .text(title);
         }
-        // ── Connectors (drawn first so boxes sit on top) ─────────────────────
+        // Connectors drawn first so boxes sit on top.
         const drawConnectors = (n) => {
-            const depthPalette = palettes[(n.depth + 1) % palettes.length];
             for (const c of n.children) {
                 svg.child('path', {
                     d: this.connectorPath(n, c, horizontal),
                     fill: 'none',
-                    stroke: depthPalette.mid,
-                    'stroke-width': 1,
-                    'stroke-opacity': 0.55,
-                    'stroke-linecap': 'round',
+                    stroke: theme_1.INK.line,
+                    'stroke-width': theme_1.STROKE.hair,
                 });
                 drawConnectors(c);
             }
         };
         drawConnectors(tree);
-        // ── Node boxes ───────────────────────────────────────────────────────
+        // Node boxes: square hairline frames; the root gets a heavier stroke and
+        // a wash fill to stand out without introducing colour.
         for (const n of nodes) {
-            const pal = palettes[n.depth % palettes.length];
             const x = n.x - BOX_W / 2;
             const y = n.y - BOX_H / 2;
-            // Root box uses the primary accent's gradient-ish solid; deeper nodes use
-            // their depth palette. `light`/`text` keep contrast readable per theme.
             const isRoot = n.depth === 0;
-            const boxFill = isRoot ? accent.mid : pal.light;
-            const boxStroke = isRoot ? accent.from : pal.mid;
-            const labelFill = isRoot ? '#FFFFFF' : pal.text;
             svg.child('rect', {
                 x,
                 y,
                 width: BOX_W,
                 height: BOX_H,
-                fill: boxFill,
-                stroke: boxStroke,
-                'stroke-width': 1,
+                fill: isRoot ? theme_1.INK.wash : theme_1.INK.ground,
+                stroke: theme_1.INK.line,
+                'stroke-width': isRoot ? theme_1.STROKE.heavy : theme_1.STROKE.hair,
             });
-            const label = n.node.name.length > 20 ? n.node.name.slice(0, 19) + '…' : n.node.name;
+            const label = (0, layout_1.truncate)(n.node.name, BOX_W - theme_1.SPACE.lg, theme_1.FONT.body);
             svg
                 .child('text', {
                 x: n.x,
                 y: n.y + (n.node.badge ? -1 : 5),
-                'font-family': IND_FONT_HEAD,
-                'font-size': 14,
-                'font-weight': 700,
-                fill: labelFill,
+                'font-family': theme_1.FONT.family,
+                'font-size': theme_1.FONT.body,
+                'font-weight': 'bold',
+                fill: theme_1.INK.line,
                 'text-anchor': 'middle',
             })
                 .text(label);
@@ -224,16 +199,18 @@ class TreeDiagram {
                     .child('text', {
                     x: n.x,
                     y: n.y + 15,
-                    'font-family': IND_FONT_MONO,
-                    'font-size': 10,
-                    'font-weight': 600,
-                    fill: isRoot ? 'rgba(255,255,255,0.8)' : pal.mid,
+                    'font-family': theme_1.FONT.mono,
+                    'font-size': theme_1.FONT.small,
+                    fill: theme_1.INK.muted,
                     'text-anchor': 'middle',
                 })
                     .text(n.node.badge);
             }
         }
-        return doc.toString('Generated by ts-prorm-orm TreeDiagram');
+        return doc;
+    }
+    generate() {
+        return this.build().toString('Generated by ts-prorm-orm TreeDiagram');
     }
     /** Write the SVG to a file, creating parent directories as needed. */
     save(outputPath) {
@@ -249,7 +226,6 @@ exports.TreeDiagram = TreeDiagram;
 // Layout constants (px)
 TreeDiagram.BOX_W = 168;
 TreeDiagram.BOX_H = 46;
-TreeDiagram.R = 12;
 TreeDiagram.PAD = 40;
 TreeDiagram.TITLE_H = 44;
 /** Distance between successive depth columns/rows (center-to-center). */