ts-prorm-orm 1.2.3 → 2.1.0

package/dist/diagrams/schemadoc-diagram.js

@@ -1,20 +1,15 @@
 "use strict";
 /**
- * SchemaDocDiagram — generates a print-friendly "data dictionary" / schema
+ * SchemaDocDiagram - generates a print-friendly "data dictionary" / schema
  * documentation sheet as SVG.
  *
  * Where ERDiagram / ModelDiagram render the *visual* shape of a schema, this
  * generator renders the *reference* counterpart: for every table a titled
  * section followed by a tabular grid with one row per column, listing
- * Column · Type · Nullable · Key · Default · Description. Rows are
- * zebra-striped and each grid's header row is painted in the accent color.
+ * Column, Type, Nullable, Key, Default, Description. Rows are zebra-striped.
  * A document title banner and a summary line ("N tables, M columns") top the
  * sheet.
  *
- * All markup is built against a real DOM document (see ./svg-dom) — never by
- * concatenating strings — and both `--theme` and `--color` genuinely change
- * fill/stroke values in the output.
- *
  * Usage:
  *   const doc = new SchemaDocDiagram({ tables: [...], title: 'My Schema' });
  *   doc.save('./diagrams/schema.svg');
@@ -58,9 +53,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SchemaDocDiagram = void 0;
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
-const palette_1 = require("./palette");
-const svg_dom_1 = require("./svg-dom");
-// ─── Layout constants (px) ──────────────────────────────────────────────────
+const svg_1 = require("./core/svg");
+const theme_1 = require("./core/theme");
+const layout_1 = require("./core/layout");
+// -- Layout constants (px) ---------------------------------------------------
 const W = 820; // content width
 const PAD = 28; // outer canvas padding
 const BANNER_H = 78; // title banner height
@@ -69,7 +65,6 @@ const SECTION_TITLE_H = 40; // per-table section title bar
 const COL_HDR_H = 30; // grid header row
 const ROW_H = 28; // grid data row
 const SECTION_GAP = 22; // space between tables
-const R = 0; // border radius (blueprint = square corners)
 // Column layout: [label, x offset, width]
 const COLS = [
     { label: 'Column', x: 0, w: 170 },
@@ -79,20 +74,10 @@ const COLS = [
     { label: 'Default', x: 450, w: 130 },
     { label: 'Description', x: 580, w: 240 },
 ];
-const FONT_SANS = palette_1.FONTS.body;
-const FONT_HEAD = palette_1.FONTS.heading;
-const FONT_MONO = palette_1.FONTS.mono;
-// ─── Helpers ────────────────────────────────────────────────────────────────
 /** Truncate text to roughly fit `width` px at the given font size. */
 function truncate(text, width, fontSize) {
-    const maxChars = Math.max(1, Math.floor(width / (fontSize * 0.6)));
-    if (text.length <= maxChars)
-        return text;
-    if (maxChars <= 1)
-        return '…';
-    return text.slice(0, maxChars - 1) + '…';
+    return (0, layout_1.truncate)(text, width, fontSize);
 }
-// ─── Main class ────────────────────────────────────────────────────────────
 class SchemaDocDiagram {
     constructor(options) {
         this.opts = {
@@ -110,11 +95,9 @@ class SchemaDocDiagram {
     sectionHeight(table) {
         return SECTION_TITLE_H + COL_HDR_H + (table.columns?.length ?? 0) * ROW_H;
     }
-    generate() {
-        const { tables, title, theme, color } = this.opts;
-        const accent = (0, palette_1.resolveAccent)(color);
-        const t = (0, palette_1.resolveTheme)(theme);
-        // ── Compute total height (auto-size viewBox) ────────────────────────
+    build() {
+        const { tables, title } = this.opts;
+        // Compute total height (auto-size viewBox).
         let contentH = BANNER_H + SUMMARY_H + 16;
         tables.forEach((tbl, i) => {
             contentH += this.sectionHeight(tbl);
@@ -124,43 +107,41 @@ class SchemaDocDiagram {
         const svgW = W + 2 * PAD;
         const svgH = contentH + 2 * PAD;
         const cx = PAD;
-        const doc = new svg_dom_1.SvgDocument(svgW, svgH);
+        const doc = new svg_1.SvgDocument(svgW, svgH);
         const svg = doc.root;
-        // Web fonts for browser renderers.
-        doc.style(palette_1.FONT_IMPORT);
-        // ── Canvas ground (theme) ───────────────────────────────────────────
-        svg.child('rect', { width: svgW, height: svgH, fill: t.canvasBg });
-        // ── Title banner (solid accent bar) ─────────────────────────────────
+        svg.child('rect', { width: svgW, height: svgH, fill: theme_1.INK.ground });
+        // Title banner.
         svg.child('rect', {
             x: cx,
             y: PAD,
             width: W,
             height: BANNER_H,
-            rx: R,
-            fill: accent.mid,
+            fill: theme_1.INK.wash,
+            stroke: theme_1.INK.line,
+            'stroke-width': theme_1.STROKE.hair,
         });
         svg
             .child('text', {
             x: cx + 22,
             y: PAD + 36,
-            'font-family': FONT_HEAD,
-            'font-size': 26,
-            'font-weight': 600,
-            fill: '#FFFFFF',
+            'font-family': theme_1.FONT.family,
+            'font-size': theme_1.FONT.title + 11,
+            'font-weight': 'bold',
+            fill: theme_1.INK.line,
         })
             .text(truncate(title, W - 44, 24));
         svg
             .child('text', {
             x: cx + 22,
             y: PAD + 58,
-            'font-family': FONT_HEAD,
-            'font-size': 12,
-            'font-weight': 600,
-            fill: 'rgba(255,255,255,0.85)',
+            'font-family': theme_1.FONT.family,
+            'font-size': theme_1.FONT.small + 3,
+            'font-weight': 'bold',
+            fill: theme_1.INK.muted,
             'letter-spacing': 1.4,
         })
             .text('DATA DICTIONARY');
-        // ── Summary line ────────────────────────────────────────────────────
+        // Summary line.
         const summaryY = PAD + BANNER_H + 8;
         const tableCount = tables.length;
         const colCount = this.totalColumns();
@@ -168,51 +149,46 @@ class SchemaDocDiagram {
             .child('text', {
             x: cx + 4,
             y: summaryY + 22,
-            'font-family': FONT_SANS,
-            'font-size': 13,
-            'font-weight': 600,
-            fill: t.textSecondary,
+            'font-family': theme_1.FONT.family,
+            'font-size': theme_1.FONT.body + 2,
+            'font-weight': 'bold',
+            fill: theme_1.INK.muted,
         })
             .text(`${tableCount} table${tableCount !== 1 ? 's' : ''}, ${colCount} column${colCount !== 1 ? 's' : ''}`);
-        // ── Table sections ──────────────────────────────────────────────────
+        // Table sections.
         let y = summaryY + SUMMARY_H + 8;
         tables.forEach((table) => {
-            y = this.drawTable(doc, svg, table, cx, y, accent, t);
+            y = this.drawTable(svg, table, cx, y);
             y += SECTION_GAP;
         });
-        return doc.toString('Generated by ts-prorm-orm SchemaDocDiagram');
+        return doc;
+    }
+    generate() {
+        return this.build().toString('Generated by ts-prorm-orm SchemaDocDiagram');
     }
     /** Draw one table section starting at `y`; returns the y after the section. */
-    drawTable(doc, svg, table, cx, y, accent, t) {
+    drawTable(svg, table, cx, y) {
         const columns = table.columns ?? [];
-        // ── Section title bar ─────────────────────────────────────────────
+        // Section title bar.
         svg.child('rect', {
             x: cx,
             y,
             width: W,
             height: SECTION_TITLE_H,
-            rx: 0,
-            fill: t.colHeaderBg,
-        });
-        svg.child('rect', {
-            x: cx,
-            y,
-            width: W,
-            height: SECTION_TITLE_H,
-            fill: 'none',
-            stroke: t.border,
-            'stroke-width': 1,
+            fill: theme_1.INK.wash,
+            stroke: theme_1.INK.line,
+            'stroke-width': theme_1.STROKE.hair,
         });
-        svg.child('rect', { x: cx, y, width: 4, height: SECTION_TITLE_H, fill: accent.mid });
+        svg.child('rect', { x: cx, y, width: 4, height: SECTION_TITLE_H, fill: theme_1.INK.line });
         svg
             .child('text', {
             x: cx + 18,
             y: y + 27,
-            'font-family': FONT_HEAD,
-            'font-size': 18,
-            'font-weight': 600,
+            'font-family': theme_1.FONT.family,
+            'font-size': theme_1.FONT.title + 5,
+            'font-weight': 'bold',
             'letter-spacing': 0.3,
-            fill: t.textPrimary,
+            fill: theme_1.INK.line,
         })
             .text(truncate(table.name, 420, 16));
         if (table.comment) {
@@ -220,14 +196,14 @@ class SchemaDocDiagram {
                 .child('text', {
                 x: cx + W - 14,
                 y: y + 26,
-                'font-family': FONT_SANS,
-                '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-anchor': 'end',
             })
                 .text(truncate(table.comment, 340, 11));
         }
-        // ── Grid header row (accent) ──────────────────────────────────────
+        // Grid header row.
         const gridX = cx;
         let rowY = y + SECTION_TITLE_H;
         svg.child('rect', {
@@ -235,25 +211,27 @@ class SchemaDocDiagram {
             y: rowY,
             width: W,
             height: COL_HDR_H,
-            fill: accent.mid,
+            fill: theme_1.INK.wash,
+            stroke: theme_1.INK.line,
+            'stroke-width': theme_1.STROKE.hair,
         });
         COLS.forEach((c) => {
             svg
                 .child('text', {
                 x: gridX + c.x + 10,
                 y: rowY + 20,
-                'font-family': FONT_HEAD,
-                'font-size': 11,
-                'font-weight': 600,
-                fill: '#FFFFFF',
+                'font-family': theme_1.FONT.family,
+                'font-size': theme_1.FONT.small + 2,
+                'font-weight': 'bold',
+                fill: theme_1.INK.line,
                 'letter-spacing': 1,
             })
                 .text(c.label.toUpperCase());
         });
-        // ── Data rows (zebra) ─────────────────────────────────────────────
+        // Data rows (zebra).
         rowY += COL_HDR_H;
         columns.forEach((col, i) => {
-            const rowBg = i % 2 === 0 ? t.cardBg : t.rowAlt;
+            const rowBg = i % 2 === 0 ? theme_1.INK.ground : theme_1.INK.wash;
             svg.child('rect', { x: gridX, y: rowY, width: W, height: ROW_H, fill: rowBg });
             const baseY = rowY + 18;
             const cell = (idx, value, opts) => {
@@ -263,42 +241,42 @@ class SchemaDocDiagram {
                     .child('text', {
                     x: gridX + c.x + 10,
                     y: baseY,
-                    'font-family': opts?.mono ? FONT_MONO : FONT_SANS,
+                    'font-family': opts?.mono ? theme_1.FONT.mono : theme_1.FONT.family,
                     'font-size': fs,
-                    fill: opts?.fill ?? t.textPrimary,
+                    fill: opts?.fill ?? theme_1.INK.line,
                 })
                     .text(truncate(value, c.w - 16, fs));
             };
-            cell(0, col.name, { mono: true, fill: t.textPrimary });
-            cell(1, col.type, { mono: true, fill: t.textSecondary });
+            cell(0, col.name, { mono: true, fill: theme_1.INK.line });
+            cell(1, col.type, { mono: true, fill: theme_1.INK.muted });
             cell(2, col.nullable === false ? 'NO' : 'YES', {
-                fill: col.nullable === false ? accent.mid : t.textSecondary,
+                fill: col.nullable === false ? theme_1.INK.line : theme_1.INK.muted,
             });
-            cell(3, col.key ?? '', { mono: true, fill: accent.text });
+            cell(3, col.key ?? '', { mono: true, fill: theme_1.INK.line });
             cell(4, col.default != null ? String(col.default) : '', {
                 mono: true,
-                fill: t.textSecondary,
+                fill: theme_1.INK.muted,
             });
-            cell(5, col.description ?? '', { fill: t.textSecondary });
+            cell(5, col.description ?? '', { fill: theme_1.INK.muted });
             svg.child('line', {
                 x1: gridX,
                 y1: rowY + ROW_H,
                 x2: gridX + W,
                 y2: rowY + ROW_H,
-                stroke: t.border,
-                'stroke-width': 1,
+                stroke: theme_1.INK.line,
+                'stroke-width': theme_1.STROKE.hair,
             });
             rowY += ROW_H;
         });
-        // ── Grid outline ──────────────────────────────────────────────────
+        // Grid outline.
         svg.child('rect', {
             x: gridX,
             y: y + SECTION_TITLE_H,
             width: W,
             height: COL_HDR_H + columns.length * ROW_H,
             fill: 'none',
-            stroke: t.border,
-            'stroke-width': 1,
+            stroke: theme_1.INK.line,
+            'stroke-width': theme_1.STROKE.hair,
         });
         return y + this.sectionHeight(table);
     }

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

@@ -1,5 +1,5 @@
 /**
- * SequenceDiagram — generates a UML sequence diagram as an SVG.
+ * SequenceDiagram - generates a UML sequence diagram as an SVG.
  *
  * Renders participants (actors / objects / databases) as header boxes across
  * the top, each dropping a vertical dashed lifeline. Messages are drawn as
@@ -7,13 +7,8 @@
  * synchronous call, a dashed arrow is a return / async message. Activation
  * bars (thin rectangles) are drawn on a lifeline while it is active.
  *
- * The accent color (via resolveAccent) drives participant header boxes and
- * arrowheads; the theme (via resolveTheme) drives the canvas, lifelines and
- * text. Both `theme` and `color` genuinely change fill/stroke values in the
- * generated SVG. The viewBox is auto-sized to fit all content.
- *
  * Usage:
- *   const diag = new SequenceDiagram({ participants: […], messages: […] });
+ *   const diag = new SequenceDiagram({ participants: [...], messages: [...] });
  *   diag.save('./diagrams/flow.svg');
  *   // or:
  *   const svgString = diag.generate();
@@ -35,8 +30,12 @@ export interface SequenceDiagramOptions {
     participants: SeqParticipant[];
     messages: SeqMessage[];
     title?: string;
+    /**
+     * Accepted for backward compatibility and ignored: diagrams render in a
+     * single monochrome theme.
+     */
     theme?: 'light' | 'dark';
-    /** Custom accent color (named palette or hex) for headers / arrowheads. */
+    /** Accepted for backward compatibility and ignored. */
     color?: string;
 }
 export declare class SequenceDiagram {
@@ -51,8 +50,9 @@ export declare class SequenceDiagram {
     private static readonly BOT_GAP;
     private static readonly ACT_W;
     constructor(options: SequenceDiagramOptions);
-    /** Kind glyph drawn inside a participant header. */
-    private kindGlyph;
+    /** Short ASCII kind label drawn inside a participant header. */
+    private kindLabel;
+    private build;
     generate(): string;
     /**
      * Write the SVG to a file. Creates parent directories if needed.

package/dist/diagrams/sequence-diagram.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * SequenceDiagram — generates a UML sequence diagram as an SVG.
+ * SequenceDiagram - generates a UML sequence diagram as an SVG.
  *
  * Renders participants (actors / objects / databases) as header boxes across
  * the top, each dropping a vertical dashed lifeline. Messages are drawn as
@@ -8,13 +8,8 @@
  * synchronous call, a dashed arrow is a return / async message. Activation
  * bars (thin rectangles) are drawn on a lifeline while it is active.
  *
- * The accent color (via resolveAccent) drives participant header boxes and
- * arrowheads; the theme (via resolveTheme) drives the canvas, lifelines and
- * text. Both `theme` and `color` genuinely change fill/stroke values in the
- * generated SVG. The viewBox is auto-sized to fit all content.
- *
  * Usage:
- *   const diag = new SequenceDiagram({ participants: […], messages: […] });
+ *   const diag = new SequenceDiagram({ participants: [...], messages: [...] });
  *   diag.save('./diagrams/flow.svg');
  *   // or:
  *   const svgString = diag.generate();
@@ -56,18 +51,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SequenceDiagram = 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 SequenceDiagram {
     constructor(options) {
         this.opts = {
@@ -78,18 +64,16 @@ class SequenceDiagram {
             color: options.color ?? '',
         };
     }
-    /** Kind glyph drawn inside a participant header. */
-    kindGlyph(kind) {
+    /** Short ASCII kind label drawn inside a participant header. */
+    kindLabel(kind) {
         if (kind === 'actor')
-            return '☺';
+            return 'ACTOR';
         if (kind === 'database')
-            return '⛁';
-        return '▭';
+            return 'DB';
+        return 'OBJECT';
     }
-    generate() {
-        const { participants, messages, title, theme, color } = this.opts;
-        const accent = (0, palette_1.resolveAccent)(color);
-        const t = (0, palette_1.resolveTheme)(theme);
+    build() {
+        const { participants, messages, title } = this.opts;
         const PAD = SequenceDiagram.PAD;
         const LANE = SequenceDiagram.LANE;
         const HDR_W = SequenceDiagram.HDR_W;
@@ -114,38 +98,25 @@ class SequenceDiagram {
         const lifelineBottom = firstMsgY + m * MSG_GAP + BOT_GAP;
         const svgW = PAD * 2 + HDR_W + (n - 1) * LANE;
         const svgH = lifelineBottom + PAD;
-        const doc = new svg_dom_1.SvgDocument(svgW, svgH);
+        const doc = new svg_1.SvgDocument(svgW, svgH);
         const svg = doc.root;
-        // ── Canvas background + embedded Industry web-fonts ─────────────────
-        svg.child('rect', { width: svgW, height: svgH, fill: t.canvasBg });
-        svg.child('style').text(IND_FONT_IMPORT);
-        // ── Arrowhead marker (accent-colored) ───────────────────────────────
-        const headId = `seqhead${accent.name.replace(/\W/g, '')}`;
-        const marker = doc.defs().child('marker', {
-            id: headId,
-            markerWidth: 10,
-            markerHeight: 10,
-            refX: 8,
-            refY: 4,
-            orient: 'auto',
-            markerUnits: 'userSpaceOnUse',
-        });
-        marker.child('path', { d: 'M0,0 L8,4 L0,8 Z', fill: accent.mid });
-        // ── Title ───────────────────────────────────────────────────────────
+        svg.child('rect', { width: svgW, height: svgH, fill: theme_1.INK.ground });
+        // Arrowhead marker, shared by all message arrows.
+        (0, layout_1.defineArrowhead)(doc.defs(), 'seqhead');
         if (title) {
             svg
                 .child('text', {
                 x: svgW / 2,
                 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-anchor': 'middle',
             })
                 .text(title);
         }
-        // ── Lifelines (dashed, theme-colored) ───────────────────────────────
+        // Lifelines (dashed).
         participants.forEach((_p, i) => {
             const x = laneX(i);
             svg.child('line', {
@@ -153,32 +124,31 @@ class SequenceDiagram {
                 y1: headerBottom,
                 x2: x,
                 y2: lifelineBottom,
-                stroke: t.border,
-                'stroke-width': 1.5,
+                stroke: theme_1.INK.line,
+                'stroke-width': theme_1.STROKE.hair,
                 'stroke-dasharray': '6 5',
                 class: 'lifeline',
             });
         });
-        // ── Activation bars (drawn under arrows so arrows sit on top edge) ──
+        // Activation bars, drawn under the arrows so they sit on top of the edge.
         messages.forEach((msg, i) => {
             if (!msg.activate)
                 return;
             const y = firstMsgY + i * MSG_GAP;
             const x = laneX(indexOf(msg.to));
-            // Extend the bar to the next message (or to the lifeline end).
             const endY = i + 1 < m ? firstMsgY + (i + 1) * MSG_GAP : y + MSG_GAP;
             svg.child('rect', {
                 x: x - ACT_W / 2,
                 y,
                 width: ACT_W,
                 height: Math.max(endY - y, MSG_GAP / 2),
-                fill: accent.light,
-                stroke: accent.mid,
-                'stroke-width': 1,
+                fill: theme_1.INK.wash,
+                stroke: theme_1.INK.line,
+                'stroke-width': theme_1.STROKE.hair,
                 class: 'activation',
             });
         });
-        // ── Participant header boxes (accent-colored) ───────────────────────
+        // Participant header boxes.
         participants.forEach((p, i) => {
             const cxLine = laneX(i);
             const boxX = cxLine - HDR_W / 2;
@@ -187,34 +157,34 @@ class SequenceDiagram {
                 y: headerTop,
                 width: HDR_W,
                 height: HDR_H,
-                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,
                 class: 'participant',
             });
             svg
                 .child('text', {
                 x: cxLine,
-                y: headerTop + 20,
-                'font-family': IND_FONT_HEAD,
-                'font-size': 13,
-                fill: '#FFFFFF',
+                y: headerTop + 18,
+                'font-family': theme_1.FONT.mono,
+                'font-size': theme_1.FONT.small,
+                fill: theme_1.INK.muted,
                 'text-anchor': 'middle',
             })
-                .text(this.kindGlyph(p.kind));
+                .text(this.kindLabel(p.kind));
             svg
                 .child('text', {
                 x: cxLine,
-                y: headerTop + 38,
-                'font-family': IND_FONT_MONO,
-                'font-size': 13,
-                'font-weight': 700,
-                fill: '#FFFFFF',
+                y: headerTop + 36,
+                'font-family': theme_1.FONT.family,
+                'font-size': theme_1.FONT.body,
+                'font-weight': 'bold',
+                fill: theme_1.INK.line,
                 'text-anchor': 'middle',
             })
-                .text(p.name.length > 16 ? p.name.slice(0, 15) + '…' : p.name);
+                .text((0, layout_1.truncate)(p.name, HDR_W - 12, theme_1.FONT.body));
         });
-        // ── Messages (numbered arrows) ──────────────────────────────────────
+        // Messages (numbered arrows).
         messages.forEach((msg, i) => {
             const y = firstMsgY + i * MSG_GAP;
             const fromI = indexOf(msg.from);
@@ -235,10 +205,10 @@ class SequenceDiagram {
                 svg.child('path', {
                     d: `M${x1},${y} h${w} v${yb - y} h-${w}`,
                     fill: 'none',
-                    stroke: accent.mid,
-                    'stroke-width': 1.6,
+                    stroke: theme_1.INK.line,
+                    'stroke-width': theme_1.STROKE.hair,
                     'stroke-dasharray': isReturn ? '5 4' : undefined,
-                    'marker-end': `url(#${headId})`,
+                    'marker-end': 'url(#seqhead)',
                     class: isReturn ? 'message message-return' : 'message message-call',
                 });
             }
@@ -248,10 +218,10 @@ class SequenceDiagram {
                     y1: y,
                     x2,
                     y2: y,
-                    stroke: accent.mid,
-                    'stroke-width': 1.6,
+                    stroke: theme_1.INK.line,
+                    'stroke-width': theme_1.STROKE.hair,
                     'stroke-dasharray': isReturn ? '5 4' : undefined,
-                    'marker-end': `url(#${headId})`,
+                    'marker-end': 'url(#seqhead)',
                     class: isReturn ? 'message message-return' : 'message message-call',
                 });
             }
@@ -261,17 +231,19 @@ class SequenceDiagram {
                 cx: badgeX,
                 cy: y - 12,
                 r: 9,
-                fill: accent.mid,
+                fill: theme_1.INK.ground,
+                stroke: theme_1.INK.line,
+                'stroke-width': theme_1.STROKE.hair,
                 class: 'seq-num',
             });
             svg
                 .child('text', {
                 x: badgeX,
                 y: y - 8,
-                'font-family': IND_FONT_MONO,
-                'font-size': 10,
-                'font-weight': 700,
-                fill: '#FFFFFF',
+                'font-family': theme_1.FONT.mono,
+                'font-size': theme_1.FONT.small,
+                'font-weight': 'bold',
+                fill: theme_1.INK.line,
                 'text-anchor': 'middle',
             })
                 .text(i + 1);
@@ -281,15 +253,18 @@ class SequenceDiagram {
                 .child('text', {
                 x: fromI === toI ? x1 + 66 : midX,
                 y: y - 8,
-                'font-family': IND_FONT_HEAD,
-                'font-size': 12,
-                'font-weight': 600,
-                fill: t.textPrimary,
+                'font-family': theme_1.FONT.family,
+                'font-size': theme_1.FONT.small + 1,
+                'font-weight': 'bold',
+                fill: theme_1.INK.line,
                 'text-anchor': fromI === toI ? 'start' : 'middle',
             })
                 .text(msg.label);
         });
-        return doc.toString('Generated by ts-prorm-orm SequenceDiagram');
+        return doc;
+    }
+    generate() {
+        return this.build().toString('Generated by ts-prorm-orm SequenceDiagram');
     }
     /**
      * Write the SVG to a file. Creates parent directories if needed.