ts-prorm-orm 1.1.0 → 1.2.1

package/dist/diagrams/relational-diagram.js

@@ -123,42 +123,38 @@ class RelationalDiagram {
     }
     // ── Render a single entity box ───────────────────────────────────────────
     renderBox(doc, svg, box, idx) {
+        void doc;
         const { entity, x, y, w, h } = box;
         const t = (0, palette_1.resolveTheme)(this.opts.theme);
-        const palettes = (0, palette_1.rotatedPalettes)(this.opts.color);
-        const accent = palettes[idx % palettes.length];
+        const primary = (0, palette_1.resolveAccent)(this.opts.color);
+        const secondary = (0, palette_1.accent2Of)(primary);
+        // Two-tone blueprint: even entities accent, odd accent-2.
+        const header = idx % 2 === 0 ? primary.mid : secondary.color;
+        const accentText = primary.text;
+        const accent2Text = secondary.text;
         const HDR = RelationalDiagram.HDR_H;
         const ROW = RelationalDiagram.ROW_H;
-        const R = 8;
-        const uid = entity.name.replace(/\W/g, '') + idx;
-        // Header gradient (accent-driven → responds to `color`).
-        const gradId = doc.linearGradient(`relhg${uid}`, [
-            [0, accent.from],
-            [100, accent.mid],
-        ]);
-        // Shell / shadow.
+        // Surface + hairline frame (square).
+        svg.child('rect', { x, y, width: w, height: h, fill: t.cardBg });
         svg.child('rect', {
-            x: x - 1,
-            y: y - 1,
-            width: w + 2,
-            height: h + 2,
-            rx: R + 1,
-            fill: t.border,
+            x,
+            y,
+            width: w,
+            height: h,
+            fill: 'none',
+            stroke: t.border,
+            'stroke-width': 1,
         });
-        // Surface.
-        svg.child('rect', { x, y, width: w, height: h, rx: R, fill: t.cardBg });
-        // Header band (rounded top, flattened bottom).
-        svg.child('rect', { x, y, width: w, height: HDR, rx: R, fill: `url(#${gradId})` });
-        svg.child('rect', { x, y: y + HDR - R, width: w, height: R, fill: `url(#${gradId})` });
+        // Header (solid accent bar).
+        svg.child('rect', { x, y, width: w, height: HDR, fill: header });
         svg
             .child('text', {
-            x: x + w / 2,
-            y: y + 26,
-            'font-family': 'system-ui,-apple-system,sans-serif',
+            x: x + 12,
+            y: y + 25,
+            'font-family': palette_1.FONTS.heading,
             'font-size': 16,
-            'font-weight': 800,
+            'font-weight': 600,
             fill: '#FFFFFF',
-            'text-anchor': 'middle',
         })
             .text(entity.name);
         // Column rows.
@@ -173,46 +169,45 @@ class RelationalDiagram {
             // Key marker.
             const markX = x + 14;
             if (isPK) {
-                svg.child('circle', { cx: markX, cy: midY, r: 4, fill: '#F59E0B' });
+                svg.child('circle', { cx: markX, cy: midY, r: 3.5, fill: primary.mid });
             }
             else if (isFK) {
                 svg.child('circle', {
                     cx: markX,
                     cy: midY,
-                    r: 4,
+                    r: 3.5,
                     fill: 'none',
-                    stroke: '#3B82F6',
+                    stroke: secondary.color,
                     'stroke-width': 1.6,
                 });
             }
             else {
-                svg.child('circle', { cx: markX, cy: midY, r: 2.5, fill: t.textSecondary });
+                svg.child('circle', { cx: markX, cy: midY, r: 2, fill: palette_1.INDUSTRY.neutral[400] });
             }
             // Column name (PK underlined, PK/FK colored+bold).
-            const nameColor = isPK ? '#B45309' : isFK ? '#2563EB' : t.textPrimary;
-            const nameWeight = isPK ? 700 : isFK ? 600 : 400;
+            const nameColor = isPK ? accentText : isFK ? accent2Text : t.textPrimary;
+            const nameWeight = isPK ? 600 : isFK ? 600 : 400;
             const nameX = x + 28;
             svg
                 .child('text', {
                 x: nameX,
                 y: textY,
-                'font-family': "'SF Mono','Fira Code',monospace",
+                'font-family': palette_1.FONTS.mono,
                 'font-size': 11,
                 'font-weight': nameWeight,
                 'text-decoration': isPK ? 'underline' : undefined,
                 fill: nameColor,
             })
                 .text(colDef.name);
-            // Type (right-aligned).
+            // Type (right-aligned, mono neutral).
             if (colDef.type) {
                 svg
                     .child('text', {
                     x: x + w - 10,
                     y: textY,
-                    'font-family': "'SF Mono',monospace",
+                    'font-family': palette_1.FONTS.mono,
                     'font-size': 10,
-                    'font-weight': 500,
-                    fill: t.textSecondary,
+                    fill: palette_1.INDUSTRY.neutral[700],
                     'text-anchor': 'end',
                 })
                     .text(colDef.type);
@@ -223,21 +218,21 @@ class RelationalDiagram {
                     .child('text', {
                     x: nameX,
                     y: ry + ROW - 4,
-                    'font-family': 'monospace',
-                    'font-size': 7,
-                    'font-weight': 700,
-                    fill: isPK ? '#B45309' : '#2563EB',
+                    'font-family': palette_1.FONTS.heading,
+                    'font-size': 8,
+                    'font-weight': 600,
+                    fill: isPK ? accentText : accent2Text,
                 })
                     .text(isPK ? 'PK' : 'FK');
             }
-            // Row separator.
+            // Row separator (hairline).
             svg.child('line', {
                 x1: x,
                 y1: ry + ROW,
                 x2: x + w,
                 y2: ry + ROW,
                 stroke: t.border,
-                'stroke-width': 0.5,
+                'stroke-width': 1,
             });
         });
     }
@@ -359,28 +354,27 @@ class RelationalDiagram {
             this.crowFoot(group, q.x, q.y, sideB, color);
         else
             this.oneBar(group, q.x, q.y, sideB, color);
-        // Midpoint label.
+        // Midpoint label (mono, hairline chip).
         const label = rel.label ?? rel.type;
         const mx = (p.x + q.x) / 2;
         const my = (p.y + q.y) / 2;
-        const lw = label.length * 6.5 + 14;
+        const lw = label.length * 7 + 14;
         group.child('rect', {
             x: mx - lw / 2,
             y: my - 10,
             width: lw,
             height: 18,
-            rx: 5,
+            rx: 0,
             fill: (0, palette_1.resolveTheme)(this.opts.theme).cardBg,
             stroke: color,
             'stroke-width': 1,
-            opacity: 0.95,
         });
         group
             .child('text', {
             x: mx,
             y: my + 3,
-            'font-family': 'system-ui,sans-serif',
-            'font-size': 9,
+            'font-family': palette_1.FONTS.mono,
+            'font-size': 10,
             'font-weight': 600,
             fill: color,
             'text-anchor': 'middle',
@@ -404,21 +398,19 @@ class RelationalDiagram {
         const totalH = maxY + MARGIN;
         const doc = new svg_dom_1.SvgDocument(totalW, totalH);
         const svg = doc.root;
-        // Canvas background (theme-driven → responds to `theme`).
+        // Web fonts for browser renderers.
+        doc.style(palette_1.FONT_IMPORT);
+        // Canvas ground (theme-driven → responds to `theme`).
         svg.child('rect', { width: totalW, height: totalH, fill: t.canvasBg });
-        // Banner (accent-driven fill so `color` shows here too).
-        const bannerGrad = doc.linearGradient('relBanner', [
-            [0, accent.from],
-            [100, accent.mid],
-        ], { x2: 1, y2: 0 });
-        svg.child('rect', { width: totalW, height: BANNER, fill: `url(#${bannerGrad})` });
+        // Banner (solid accent bar so `color` shows here too).
+        svg.child('rect', { width: totalW, height: BANNER, fill: accent.mid });
         svg
             .child('text', {
             x: 24,
             y: 38,
-            'font-family': 'system-ui,-apple-system,sans-serif',
-            'font-size': 22,
-            'font-weight': 800,
+            'font-family': palette_1.FONTS.heading,
+            'font-size': 24,
+            'font-weight': 600,
             fill: '#FFFFFF',
         })
             .text(title);

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

@@ -0,0 +1,57 @@
+/**
+ * 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.
+ * 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');
+ *   // or:
+ *   const svgString = doc.generate();
+ */
+export interface DocColumn {
+    name: string;
+    type: string;
+    nullable?: boolean;
+    key?: 'PK' | 'FK' | 'UQ' | '';
+    default?: string;
+    description?: string;
+}
+export interface DocTable {
+    name: string;
+    comment?: string;
+    columns: DocColumn[];
+}
+export interface SchemaDocDiagramOptions {
+    tables: DocTable[];
+    title?: string;
+    theme?: 'light' | 'dark';
+    /** Named palette (e.g. "emerald") or hex color for banner/header rows */
+    color?: string;
+}
+export declare class SchemaDocDiagram {
+    private opts;
+    constructor(options: SchemaDocDiagramOptions);
+    /** Total column count across all tables. */
+    private totalColumns;
+    /** Height of one table's rendered section. */
+    private sectionHeight;
+    generate(): string;
+    /** Draw one table section starting at `y`; returns the y after the section. */
+    private drawTable;
+    /**
+     * Write the SVG to a file. Creates parent directories if needed.
+     */
+    save(outputPath: string): string;
+}

package/dist/diagrams/schemadoc-diagram.js

@@ -69,7 +69,7 @@ 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 = 12; // border radius
+const R = 0; // border radius (blueprint = square corners)
 // Column layout: [label, x offset, width]
 const COLS = [
     { label: 'Column', x: 0, w: 170 },
@@ -79,8 +79,9 @@ const COLS = [
     { label: 'Default', x: 450, w: 130 },
     { label: 'Description', x: 580, w: 240 },
 ];
-const FONT_SANS = 'system-ui,-apple-system,sans-serif';
-const FONT_MONO = "'SF Mono','Fira Code',monospace";
+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) {
@@ -125,29 +126,26 @@ class SchemaDocDiagram {
         const cx = PAD;
         const doc = new svg_dom_1.SvgDocument(svgW, svgH);
         const svg = doc.root;
-        // ── Canvas background (theme) ───────────────────────────────────────
+        // 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 (accent) ───────────────────────────────────────────
-        const uid = 'sd';
-        doc.linearGradient(`bg${uid}`, [
-            [0, accent.from],
-            [100, accent.mid],
-        ]);
+        // ── Title banner (solid accent bar) ─────────────────────────────────
         svg.child('rect', {
             x: cx,
             y: PAD,
             width: W,
             height: BANNER_H,
             rx: R,
-            fill: `url(#bg${uid})`,
+            fill: accent.mid,
         });
         svg
             .child('text', {
             x: cx + 22,
-            y: PAD + 34,
-            'font-family': FONT_SANS,
-            'font-size': 24,
-            'font-weight': 800,
+            y: PAD + 36,
+            'font-family': FONT_HEAD,
+            'font-size': 26,
+            'font-weight': 600,
             fill: '#FFFFFF',
         })
             .text(truncate(title, W - 44, 24));
@@ -155,11 +153,11 @@ class SchemaDocDiagram {
             .child('text', {
             x: cx + 22,
             y: PAD + 58,
-            'font-family': FONT_SANS,
+            'font-family': FONT_HEAD,
             'font-size': 12,
             'font-weight': 600,
             fill: 'rgba(255,255,255,0.85)',
-            'letter-spacing': 1,
+            'letter-spacing': 1.4,
         })
             .text('DATA DICTIONARY');
         // ── Summary line ────────────────────────────────────────────────────
@@ -193,17 +191,27 @@ class SchemaDocDiagram {
             y,
             width: W,
             height: SECTION_TITLE_H,
-            rx: 8,
+            rx: 0,
             fill: t.colHeaderBg,
         });
-        svg.child('rect', { x: cx, y, width: 5, height: SECTION_TITLE_H, fill: accent.mid });
+        svg.child('rect', {
+            x: cx,
+            y,
+            width: W,
+            height: SECTION_TITLE_H,
+            fill: 'none',
+            stroke: t.border,
+            'stroke-width': 1,
+        });
+        svg.child('rect', { x: cx, y, width: 4, height: SECTION_TITLE_H, fill: accent.mid });
         svg
             .child('text', {
             x: cx + 18,
-            y: y + 26,
-            'font-family': FONT_MONO,
-            'font-size': 16,
-            'font-weight': 700,
+            y: y + 27,
+            'font-family': FONT_HEAD,
+            'font-size': 18,
+            'font-weight': 600,
+            'letter-spacing': 0.3,
             fill: t.textPrimary,
         })
             .text(truncate(table.name, 420, 16));
@@ -227,20 +235,20 @@ class SchemaDocDiagram {
             y: rowY,
             width: W,
             height: COL_HDR_H,
-            fill: accent.from,
+            fill: accent.mid,
         });
         COLS.forEach((c) => {
             svg
                 .child('text', {
                 x: gridX + c.x + 10,
                 y: rowY + 20,
-                'font-family': FONT_SANS,
+                'font-family': FONT_HEAD,
                 'font-size': 11,
-                'font-weight': 700,
+                'font-weight': 600,
                 fill: '#FFFFFF',
-                'letter-spacing': 0.4,
+                'letter-spacing': 1,
             })
-                .text(c.label);
+                .text(c.label.toUpperCase());
         });
         // ── Data rows (zebra) ─────────────────────────────────────────────
         rowY += COL_HDR_H;

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

@@ -0,0 +1,61 @@
+/**
+ * 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
+ * numbered horizontal arrows between lifelines in order: a solid arrow is a
+ * 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: […] });
+ *   diag.save('./diagrams/flow.svg');
+ *   // or:
+ *   const svgString = diag.generate();
+ */
+export interface SeqParticipant {
+    name: string;
+    kind?: 'actor' | 'object' | 'database';
+}
+export interface SeqMessage {
+    from: string;
+    to: string;
+    label: string;
+    /** Render as a dashed return / async arrow instead of a solid call. */
+    return?: boolean;
+    /** Draw an activation bar on the receiving lifeline for this message. */
+    activate?: boolean;
+}
+export interface SequenceDiagramOptions {
+    participants: SeqParticipant[];
+    messages: SeqMessage[];
+    title?: string;
+    theme?: 'light' | 'dark';
+    /** Custom accent color (named palette or hex) for headers / arrowheads. */
+    color?: string;
+}
+export declare class SequenceDiagram {
+    private opts;
+    private static readonly PAD;
+    private static readonly LANE;
+    private static readonly HDR_W;
+    private static readonly HDR_H;
+    private static readonly TITLE_H;
+    private static readonly MSG_GAP;
+    private static readonly TOP_GAP;
+    private static readonly BOT_GAP;
+    private static readonly ACT_W;
+    constructor(options: SequenceDiagramOptions);
+    /** Kind glyph drawn inside a participant header. */
+    private kindGlyph;
+    generate(): string;
+    /**
+     * Write the SVG to a file. Creates parent directories if needed.
+     */
+    save(outputPath: string): string;
+}

package/dist/diagrams/sequence-diagram.js

@@ -58,6 +58,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 SequenceDiagram {
     constructor(options) {
@@ -107,8 +116,9 @@ class SequenceDiagram {
         const svgH = lifelineBottom + PAD;
         const doc = new svg_dom_1.SvgDocument(svgW, svgH);
         const svg = doc.root;
-        // ── Canvas background (theme-driven) ────────────────────────────────
+        // ── 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', {
@@ -127,9 +137,9 @@ class SequenceDiagram {
                 .child('text', {
                 x: svgW / 2,
                 y: PAD + 24,
-                'font-family': 'system-ui,-apple-system,sans-serif',
+                'font-family': IND_FONT_HEAD,
                 'font-size': 20,
-                'font-weight': 800,
+                'font-weight': 600,
                 fill: t.textPrimary,
                 'text-anchor': 'middle',
             })
@@ -177,17 +187,16 @@ class SequenceDiagram {
                 y: headerTop,
                 width: HDR_W,
                 height: HDR_H,
-                rx: 8,
-                fill: accent.from,
-                stroke: accent.mid,
-                'stroke-width': 1.5,
+                fill: accent.mid,
+                stroke: accent.from,
+                'stroke-width': 1,
                 class: 'participant',
             });
             svg
                 .child('text', {
                 x: cxLine,
                 y: headerTop + 20,
-                'font-family': 'system-ui,-apple-system,sans-serif',
+                'font-family': IND_FONT_HEAD,
                 'font-size': 13,
                 fill: '#FFFFFF',
                 'text-anchor': 'middle',
@@ -197,7 +206,7 @@ class SequenceDiagram {
                 .child('text', {
                 x: cxLine,
                 y: headerTop + 38,
-                'font-family': "'SF Mono','Fira Code',monospace",
+                'font-family': IND_FONT_MONO,
                 'font-size': 13,
                 'font-weight': 700,
                 fill: '#FFFFFF',
@@ -259,7 +268,7 @@ class SequenceDiagram {
                 .child('text', {
                 x: badgeX,
                 y: y - 8,
-                'font-family': "'SF Mono',monospace",
+                'font-family': IND_FONT_MONO,
                 'font-size': 10,
                 'font-weight': 700,
                 fill: '#FFFFFF',
@@ -272,7 +281,7 @@ class SequenceDiagram {
                 .child('text', {
                 x: fromI === toI ? x1 + 66 : midX,
                 y: y - 8,
-                'font-family': 'system-ui,-apple-system,sans-serif',
+                'font-family': IND_FONT_HEAD,
                 'font-size': 12,
                 'font-weight': 600,
                 fill: t.textPrimary,

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

@@ -0,0 +1,85 @@
+/**
+ * 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
+ *  - 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 →
+ * 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: [
+ *       { name: 'start', initial: true },
+ *       { name: 'draft' },
+ *       { name: 'active' },
+ *       { name: 'archived', final: true },
+ *     ],
+ *     transitions: [
+ *       { from: 'start', to: 'draft' },
+ *       { from: 'draft', to: 'active', event: 'publish' },
+ *       { from: 'active', to: 'active', event: 'edit' },
+ *       { from: 'active', to: 'archived', event: 'archive' },
+ *     ],
+ *   });
+ *   diag.save('./diagrams/lifecycle.svg');
+ *   // or:
+ *   const svgString = diag.generate();
+ */
+export interface StateNode {
+    name: string;
+    /** Marks this as an initial pseudo-state (filled black circle). */
+    initial?: boolean;
+    /** Marks this as a final state (ringed circle). */
+    final?: boolean;
+    /** Optional explicit x position hint (top-left of the node box). */
+    x?: number;
+    /** Optional explicit y position hint (top-left of the node box). */
+    y?: number;
+}
+export interface StateTransition {
+    from: string;
+    to: string;
+    /** Trigger/event label drawn on the arrow. */
+    event?: string;
+}
+export interface StateDiagramOptions {
+    states: StateNode[];
+    transitions: StateTransition[];
+    title?: string;
+    theme?: 'light' | 'dark';
+    /** Custom accent color (named palette entry or hex). */
+    color?: string;
+}
+export declare class StateDiagram {
+    private opts;
+    private static readonly PAD;
+    private static readonly TITLE_H;
+    private static readonly BOX_W;
+    private static readonly BOX_H;
+    private static readonly PSEUDO_R;
+    private static readonly GAP_X;
+    private static readonly GAP_Y;
+    private static readonly PER_ROW;
+    private static readonly R;
+    constructor(options: StateDiagramOptions);
+    private layout;
+    private edgePoint;
+    generate(): string;
+    private drawTransition;
+    private drawSelfLoop;
+    private drawEventLabel;
+    /**
+     * Write the SVG to a file. Creates parent directories if needed.
+     */
+    save(outputPath: string): string;
+}