ts-prorm-orm 1.1.0 → 1.2.1

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

@@ -0,0 +1,70 @@
+/**
+ * FlowDiagram — generates a general flowchart / data-flow SVG.
+ *
+ * Renders a directed graph of typed nodes connected by labeled edges, using a
+ * simple top-to-bottom (or left-to-right) layered layout. Each node type gets a
+ * distinct SVG geometry:
+ *
+ *   - process        → rounded rectangle
+ *   - decision       → diamond (polygon)
+ *   - start / end    → stadium / pill (accent-filled)
+ *   - data / io      → parallelogram (polygon)
+ *   - database       → cylinder (rect + two ellipses)
+ *
+ * Edges are orthogonal-ish connectors with accent-colored arrowheads and
+ * optional labels (e.g. the "yes"/"no" branches of a decision node). Layout is
+ * driven by optional `row`/`col` hints on each node; when omitted, nodes are
+ * placed sequentially, one per layer, forming a clean vertical chain.
+ *
+ * Good for visualizing a query pipeline or a migration flow.
+ *
+ * Usage:
+ *   const diag = new FlowDiagram({ nodes, edges, title: 'Query pipeline' });
+ *   diag.save('./diagrams/pipeline.svg');
+ *   // or:
+ *   const svgString = diag.generate();
+ */
+export type FlowNodeType = 'process' | 'decision' | 'start' | 'end' | 'data' | 'database';
+export interface FlowNode {
+    id: string;
+    label: string;
+    type?: FlowNodeType;
+    /** Optional layer/row hint (0-based). Auto-assigned sequentially when absent. */
+    row?: number;
+    /** Optional within-layer position hint. Falls back to insertion order. */
+    col?: number;
+}
+export interface FlowEdge {
+    from: string;
+    to: string;
+    label?: string;
+}
+export interface FlowDiagramOptions {
+    nodes: FlowNode[];
+    edges: FlowEdge[];
+    title?: string;
+    theme?: 'light' | 'dark';
+    /** Accent color: a named palette entry or a hex string. */
+    color?: string;
+    direction?: 'vertical' | 'horizontal';
+}
+export declare class FlowDiagram {
+    private opts;
+    private static readonly NODE_W;
+    private static readonly NODE_H;
+    private static readonly HGAP;
+    private static readonly VGAP;
+    private static readonly PAD;
+    private static readonly CYL_RY;
+    private static readonly PARA_SLANT;
+    constructor(options: FlowDiagramOptions);
+    private layout;
+    private drawNode;
+    private drawEdge;
+    generate(): string;
+    /**
+     * Write the SVG to a file. Creates parent directories if needed.
+     */
+    save(outputPath: string): string;
+}
+export default FlowDiagram;

package/dist/diagrams/flow-diagram.js

@@ -64,6 +64,15 @@ 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 ──────────────────────────────────────────────────────────────
 class FlowDiagram {
     constructor(options) {
@@ -155,17 +164,15 @@ class FlowDiagram {
         switch (type) {
             case 'start':
             case 'end': {
-                // Stadium / pill: rounded rect with rx = half height.
+                // Terminal: solid accent square (blueprint — no radius).
                 svg.child('rect', {
                     x: left,
                     y: top,
                     width: W,
                     height: H,
-                    rx: H / 2,
-                    ry: H / 2,
                     fill,
                     stroke,
-                    'stroke-width': 2,
+                    'stroke-width': 1,
                 });
                 break;
             }
@@ -177,7 +184,7 @@ class FlowDiagram {
                     `${cx},${top + H}`,
                     `${left},${cy}`,
                 ].join(' ');
-                svg.child('polygon', { points: pts, fill, stroke, 'stroke-width': 2 });
+                svg.child('polygon', { points: pts, fill, stroke, 'stroke-width': 1 });
                 break;
             }
             case 'data': {
@@ -189,7 +196,7 @@ class FlowDiagram {
                     `${left + W - s},${top + H}`,
                     `${left},${top + H}`,
                 ].join(' ');
-                svg.child('polygon', { points: pts, fill, stroke, 'stroke-width': 2 });
+                svg.child('polygon', { points: pts, fill, stroke, 'stroke-width': 1 });
                 break;
             }
             case 'database': {
@@ -220,11 +227,9 @@ class FlowDiagram {
                     y: top,
                     width: W,
                     height: H,
-                    rx: 12,
-                    ry: 12,
                     fill,
                     stroke,
-                    'stroke-width': 2,
+                    'stroke-width': 1,
                 });
                 break;
             }
@@ -236,7 +241,7 @@ class FlowDiagram {
             .child('text', {
             x: cx,
             y: cy + 5,
-            'font-family': 'system-ui,-apple-system,sans-serif',
+            'font-family': IND_FONT_HEAD,
             'font-size': 13,
             'font-weight': isTerminal ? 700 : 600,
             fill: textFill,
@@ -290,25 +295,24 @@ class FlowDiagram {
             d,
             fill: 'none',
             stroke: t.textSecondary,
-            'stroke-width': 1.75,
+            'stroke-width': 1,
             'marker-end': `url(#${markerId})`,
         });
         if (edge.label) {
-            // Label chip so text stays legible over the canvas.
+            // Label chip (accent light tint, square) so text stays legible.
             const chipW = edge.label.length * 6.5 + 12;
             svg.child('rect', {
                 x: labelX - 2,
                 y: labelY - 12,
                 width: chipW,
                 height: 16,
-                rx: 4,
                 fill: accent.light,
             });
             svg
                 .child('text', {
                 x: labelX + chipW / 2 - 2,
                 y: labelY,
-                'font-family': "'SF Mono','Fira Code',monospace",
+                'font-family': IND_FONT_MONO,
                 'font-size': 10,
                 'font-weight': 700,
                 fill: accent.text,
@@ -328,8 +332,9 @@ class FlowDiagram {
         const svgH = contentH + titleH + 2 * PAD;
         const doc = new svg_dom_1.SvgDocument(Math.max(svgW, 320), Math.max(svgH, 160));
         const svg = doc.root;
-        // ── Canvas background (theme-driven) ───────────────────────────────────
+        // ── Canvas background + embedded Industry web-fonts ────────────────────
         svg.child('rect', { width: Math.max(svgW, 320), height: Math.max(svgH, 160), fill: t.canvasBg });
+        svg.child('style').text(IND_FONT_IMPORT);
         // ── Arrowhead marker (accent-colored) ──────────────────────────────────
         const markerId = 'flowArrow';
         const marker = doc.defs().child('marker', {
@@ -348,13 +353,13 @@ class FlowDiagram {
                 .child('text', {
                 x: PAD,
                 y: PAD + 26,
-                'font-family': 'system-ui,-apple-system,sans-serif',
+                'font-family': IND_FONT_HEAD,
                 'font-size': 22,
-                'font-weight': 800,
+                'font-weight': 600,
                 fill: t.textPrimary,
             })
                 .text(title);
-            svg.child('rect', { x: PAD, y: PAD + 36, width: 56, height: 4, rx: 2, fill: accent.mid });
+            svg.child('rect', { x: PAD, y: PAD + 36, width: 56, height: 4, fill: accent.mid });
         }
         // ── Edges first (so nodes render on top) ───────────────────────────────
         for (const edge of this.opts.edges) {

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

@@ -0,0 +1,67 @@
+/**
+ * GanttDiagram — generates a horizontal timeline / Gantt chart SVG.
+ *
+ * Features:
+ *  - Left label column listing task/row names
+ *  - Right time-axis area with vertical gridlines (days / weeks / months)
+ *  - One horizontal bar per task, positioned/sized by its start & end dates
+ *  - Tasks grouped into sections, each colored from a rotated accent palette
+ *  - Optional % complete overlay drawn on top of each bar
+ *  - Milestones rendered as diamonds
+ *  - Dependency arrows drawn between a task and the task it depends on
+ *  - Auto-sized SVG viewBox, light/dark theme aware
+ *
+ * The time scale is computed from the minimum start to the maximum end across
+ * all tasks; dates are mapped linearly to x. Everything is deterministic —
+ * no Date.now()/new Date()-with-no-args/Math.random() is used.
+ *
+ * Usage:
+ *   const g = new GanttDiagram({ tasks: [...], title: 'Migration' });
+ *   g.save('./diagrams/migration.svg');
+ *   const svg = g.generate();
+ */
+export interface GanttTask {
+    name: string;
+    /** ISO date string, e.g. '2026-01-01' */
+    start: string;
+    /** ISO date string, e.g. '2026-03-01' */
+    end: string;
+    /** 0..100 completion overlay */
+    percent?: number;
+    /** Section/group heading; tasks with the same section are grouped */
+    section?: string;
+    /** Render this task as a milestone diamond rather than a bar */
+    milestone?: boolean;
+    /** Name of another task this task depends on (draws an arrow) */
+    dependsOn?: string;
+}
+export interface GanttDiagramOptions {
+    tasks: GanttTask[];
+    title?: string;
+    theme?: 'light' | 'dark';
+    /** Custom accent color name or hex string */
+    color?: string;
+    /** Gridline granularity along the time axis */
+    axis?: 'days' | 'weeks' | 'months';
+}
+export declare class GanttDiagram {
+    private opts;
+    private static readonly LABEL_W;
+    private static readonly AXIS_W;
+    private static readonly HDR;
+    private static readonly AXIS_HDR;
+    private static readonly ROW_H;
+    private static readonly SECTION_H;
+    private static readonly BAR_PAD;
+    private static readonly PAD;
+    private static readonly FOOTER;
+    constructor(options: GanttDiagramOptions);
+    /** Group tasks into sections preserving first-seen order. */
+    private buildSections;
+    generate(): string;
+    /**
+     * Write the SVG to a file. Creates parent directories if needed.
+     */
+    save(outputPath: string): string;
+}
+export default GanttDiagram;

package/dist/diagrams/gantt-diagram.js

@@ -60,6 +60,15 @@ 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');";
 // ─── Internal helpers ──────────────────────────────────────────────────────
 const DAY_MS = 24 * 60 * 60 * 1000;
 function parseDate(s) {
@@ -145,14 +154,10 @@ class GanttDiagram {
         // ── Map a date (ms) → x within the axis area ─────────────────────────
         const xForMs = (ms) => axisLeft + ((ms - minStart) / span) * AXIS_W;
         const xForDate = (s) => xForMs(parseDate(s));
-        // ── Background ──────────────────────────────────────────────────────
+        // ── Background + embedded Industry web-fonts ────────────────────────
         svg.child('rect', { class: 'canvas', width: svgW, height: svgH, fill: t.canvasBg });
-        // ── Defs: header gradient + arrow marker ────────────────────────────
-        doc.linearGradient(`hg${uid}`, [
-            [0, accent.from],
-            [55, accent.mid],
-            [100, accent.to],
-        ]);
+        svg.child('style').text(IND_FONT_IMPORT);
+        // ── Defs: arrow marker (solid accent header — no gradient) ──────────
         const marker = doc
             .defs()
             .child('marker', {
@@ -172,16 +177,15 @@ class GanttDiagram {
             y: PAD,
             width: LABEL_W + AXIS_W,
             height: HDR,
-            rx: 10,
-            fill: `url(#hg${uid})`,
+            fill: accent.mid,
         });
         svg
             .child('text', {
             x: chartLeft + 18,
             y: PAD + 40,
-            'font-family': 'system-ui,-apple-system,sans-serif',
+            'font-family': IND_FONT_HEAD,
             'font-size': 22,
-            'font-weight': 800,
+            'font-weight': 600,
             fill: '#FFFFFF',
         })
             .text(title);
@@ -208,7 +212,7 @@ class GanttDiagram {
                 class: 'axis-tick',
                 x: x + 3,
                 y: axisTop + AXIS_HDR - 8,
-                'font-family': "'SF Mono',monospace",
+                'font-family': IND_FONT_MONO,
                 'font-size': 9,
                 fill: t.textSecondary,
             })
@@ -261,7 +265,7 @@ class GanttDiagram {
                     class: 'section-label',
                     x: chartLeft + 16,
                     y: y + SECTION_H / 2 + 4,
-                    'font-family': 'system-ui,sans-serif',
+                    'font-family': IND_FONT_BODY,
                     'font-size': 12,
                     'font-weight': 700,
                     fill: sec.accent.text,
@@ -280,7 +284,7 @@ class GanttDiagram {
                     class: 'task-label',
                     x: chartLeft + 14,
                     y: midY + 4,
-                    'font-family': 'system-ui,sans-serif',
+                    'font-family': IND_FONT_BODY,
                     'font-size': 12,
                     'font-weight': 600,
                     fill: t.textPrimary,
@@ -313,7 +317,6 @@ class GanttDiagram {
                         y: barY,
                         width: barW,
                         height: barH,
-                        rx: 4,
                         fill: sec.accent.mid,
                         opacity: 0.85,
                     });
@@ -326,7 +329,6 @@ class GanttDiagram {
                             y: barY,
                             width: Math.max(1, (barW * pct) / 100),
                             height: barH,
-                            rx: 4,
                             fill: sec.accent.from,
                         });
                         svg
@@ -334,7 +336,7 @@ class GanttDiagram {
                             class: 'bar-pct',
                             x: sx + barW + 6,
                             y: midY + 4,
-                            'font-family': "'SF Mono',monospace",
+                            'font-family': IND_FONT_MONO,
                             'font-size': 10,
                             'font-weight': 700,
                             fill: t.textSecondary,
@@ -376,7 +378,7 @@ class GanttDiagram {
             class: 'footer',
             x: chartLeft + 2,
             y: footerY + 22,
-            'font-family': 'system-ui,sans-serif',
+            'font-family': IND_FONT_BODY,
             'font-size': 11,
             fill: t.textSecondary,
         })

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

@@ -0,0 +1,61 @@
+/**
+ * IndexDiagram — an INDEX & CONSTRAINT MAP for a single table.
+ *
+ * A table's columns are laid out as a horizontal strip of "column chips".
+ * Below the strip, every index/constraint is drawn as a labeled "bracket" that
+ * spans the column chips it covers — so composite indexes visibly span multiple
+ * columns and overlapping coverage is obvious at a glance.
+ *
+ * Index kinds (PRIMARY / UNIQUE / INDEX / FULLTEXT / FOREIGN KEY / CHECK) are
+ * distinguished by color + a short badge; each row also shows the index name,
+ * its access method (btree/hash/gin…) and whether it is unique.
+ *
+ * `--theme light|dark` drives the canvas/text colors and `--color <name|hex>`
+ * drives the accent used for the header and the PRIMARY index — both genuinely
+ * change fill/stroke values in the generated SVG.
+ *
+ * Usage:
+ *   const diag = new IndexDiagram({ table: 'users', columns: [...], indexes: [...] });
+ *   diag.save('./diagrams/users-indexes.svg');
+ *   // or:
+ *   const svg = diag.generate();
+ */
+export interface IdxColumn {
+    name: string;
+    type?: string;
+}
+export type IdxKind = 'PRIMARY' | 'UNIQUE' | 'INDEX' | 'FULLTEXT' | 'FOREIGN KEY' | 'CHECK';
+export interface IdxIndex {
+    name: string;
+    columns: string[];
+    kind?: IdxKind;
+    method?: string;
+    unique?: boolean;
+}
+export interface IndexDiagramOptions {
+    table: string;
+    columns: IdxColumn[];
+    indexes: IdxIndex[];
+    title?: string;
+    theme?: 'light' | 'dark';
+    /** Custom accent color (named palette or hex) for header + PRIMARY index */
+    color?: string;
+}
+export declare class IndexDiagram {
+    private opts;
+    private static readonly PAD;
+    private static readonly HDR;
+    private static readonly CHIP_H;
+    private static readonly CHIP_GAP;
+    private static readonly STRIP_LABEL;
+    private static readonly GAP_AFTER_STRIP;
+    private static readonly ROW_H;
+    private static readonly LABEL_W;
+    private static readonly MIN_CHIP_W;
+    private static readonly R;
+    constructor(options: IndexDiagramOptions);
+    private chipWidth;
+    generate(): string;
+    /** Write the SVG to a file. Creates parent directories if needed. */
+    save(outputPath: string): string;
+}

package/dist/diagrams/index-diagram.js

@@ -60,13 +60,25 @@ 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');";
+// Industry blueprint: badges share the accent light tint (#eef6ff / #2c455d)
+// with the badge letters carrying the distinction; a couple of kinds drop to
+// the neutral tint so the map still reads categorically without vibrant hues.
 const KIND_STYLES = {
-    PRIMARY: { badge: 'PK', color: '#92400E', bg: '#FEF3C7' },
-    UNIQUE: { badge: 'UQ', color: '#5B21B6', bg: '#EDE9FE' },
-    INDEX: { badge: 'IX', color: '#0369A1', bg: '#E0F2FE' },
-    FULLTEXT: { badge: 'FT', color: '#065F46', bg: '#D1FAE5' },
-    'FOREIGN KEY': { badge: 'FK', color: '#1E3A8A', bg: '#DBEAFE' },
-    CHECK: { badge: 'CK', color: '#9F1239', bg: '#FFE4E6' },
+    PRIMARY: { badge: 'PK', color: '#2c455d', bg: '#eef6ff' },
+    UNIQUE: { badge: 'UQ', color: '#2c455d', bg: '#eef6ff' },
+    INDEX: { badge: 'IX', color: '#5d5d60', bg: '#f5f5f8' },
+    FULLTEXT: { badge: 'FT', color: '#5d5d60', bg: '#f5f5f8' },
+    'FOREIGN KEY': { badge: 'FK', color: '#2c455d', bg: '#eef6ff' },
+    CHECK: { badge: 'CK', color: '#5d5d60', bg: '#f5f5f8' },
 };
 function kindStyle(kind) {
     return KIND_STYLES[kind ?? 'INDEX'] ?? KIND_STYLES.INDEX;
@@ -119,23 +131,18 @@ class IndexDiagram {
         const uid = table.replace(/\W/g, '') || 'tbl';
         const doc = new svg_dom_1.SvgDocument(svgW, svgH);
         const svg = doc.root;
-        // ── Background ──────────────────────────────────────────────────────────
+        // ── Background + embedded Industry web-fonts ────────────────────────────
         svg.child('rect', { width: svgW, height: svgH, fill: t.canvasBg });
-        // ── Defs: header gradient ───────────────────────────────────────────────
-        doc.linearGradient(`hg${uid}`, [
-            [0, accent.from],
-            [55, accent.mid],
-            [100, accent.to],
-        ]);
-        // ── Header bar ──────────────────────────────────────────────────────────
-        svg.child('rect', { x: PAD, y: PAD, width: contentW - PAD, height: HDR, rx: R, fill: `url(#hg${uid})` });
+        svg.child('style').text(IND_FONT_IMPORT);
+        // ── Header bar (solid accent — blueprint label bar, no gradient) ────────
+        svg.child('rect', { x: PAD, y: PAD, width: contentW - PAD, height: HDR, fill: accent.mid });
         svg
             .child('text', {
             x: PAD + 18,
             y: PAD + 27,
-            'font-family': 'system-ui,-apple-system,sans-serif',
+            'font-family': IND_FONT_HEAD,
             'font-size': 20,
-            'font-weight': 800,
+            'font-weight': 600,
             fill: '#FFFFFF',
         })
             .text(title || `Index Map · ${table}`);
@@ -143,7 +150,7 @@ class IndexDiagram {
             .child('text', {
             x: PAD + 18,
             y: PAD + 47,
-            'font-family': "'SF Mono','Fira Code',monospace",
+            'font-family': IND_FONT_MONO,
             'font-size': 11,
             fill: 'rgba(255,255,255,0.8)',
         })
@@ -153,7 +160,7 @@ class IndexDiagram {
             .child('text', {
             x: contentW - 16,
             y: PAD + 33,
-            'font-family': "'SF Mono',monospace",
+            'font-family': IND_FONT_MONO,
             'font-size': 12,
             'font-weight': 700,
             fill: 'rgba(255,255,255,0.92)',
@@ -165,7 +172,7 @@ class IndexDiagram {
             .child('text', {
             x: stripX,
             y: stripY - 8,
-            'font-family': 'system-ui,sans-serif',
+            'font-family': IND_FONT_BODY,
             'font-size': 11,
             'font-weight': 700,
             'letter-spacing': 1,
@@ -180,16 +187,15 @@ class IndexDiagram {
                 y: stripY,
                 width: chipW,
                 height: CHIP_H,
-                rx: 9,
                 fill: t.cardBg,
                 stroke: t.border,
-                'stroke-width': 1.5,
+                'stroke-width': 1,
             });
             svg
                 .child('text', {
                 x: x + chipW / 2,
                 y: stripY + 20,
-                'font-family': "'SF Mono','Fira Code',monospace",
+                'font-family': IND_FONT_MONO,
                 'font-size': 13,
                 'font-weight': 700,
                 fill: t.textPrimary,
@@ -201,7 +207,7 @@ class IndexDiagram {
                     .child('text', {
                     x: x + chipW / 2,
                     y: stripY + 37,
-                    'font-family': "'SF Mono',monospace",
+                    'font-family': IND_FONT_MONO,
                     'font-size': 10,
                     fill: t.textSecondary,
                     'text-anchor': 'middle',
@@ -227,7 +233,6 @@ class IndexDiagram {
                     y: rowY,
                     width: contentW - PAD,
                     height: ROW_H,
-                    rx: 8,
                     fill: t.rowAlt,
                 });
             }
@@ -235,14 +240,14 @@ class IndexDiagram {
             // Badge chip.
             const badgeBg = isPrimary ? accent.light : style.bg;
             const badgeFg = isPrimary ? accent.text : style.color;
-            svg.child('rect', { x: PAD + 8, y: rowMid - 12, width: 30, height: 24, rx: 6, fill: badgeBg });
+            svg.child('rect', { x: PAD + 8, y: rowMid - 12, width: 30, height: 24, fill: badgeBg });
             svg
                 .child('text', {
                 x: PAD + 8 + 15,
                 y: rowMid + 5,
-                'font-family': "'SF Mono',monospace",
+                'font-family': IND_FONT_MONO,
                 'font-size': 11,
-                'font-weight': 800,
+                'font-weight': 600,
                 fill: badgeFg,
                 'text-anchor': 'middle',
             })
@@ -252,7 +257,7 @@ class IndexDiagram {
                 .child('text', {
                 x: PAD + 48,
                 y: rowMid - 2,
-                'font-family': "'SF Mono','Fira Code',monospace",
+                'font-family': IND_FONT_MONO,
                 'font-size': 12,
                 'font-weight': 700,
                 fill: t.textPrimary,
@@ -269,7 +274,7 @@ class IndexDiagram {
                 .child('text', {
                 x: PAD + 48,
                 y: rowMid + 13,
-                'font-family': "'SF Mono',monospace",
+                'font-family': IND_FONT_MONO,
                 'font-size': 10,
                 fill: t.textSecondary,
             })
@@ -317,7 +322,7 @@ class IndexDiagram {
                             .child('text', {
                             x: cxp + 8,
                             y: bracketY - 8,
-                            'font-family': "'SF Mono',monospace",
+                            'font-family': IND_FONT_MONO,
                             'font-size': 9,
                             'font-weight': 700,
                             fill: lineColor,