ts-prorm-orm 1.1.0 → 1.2.0

package/dist/diagrams/state-diagram.js

@@ -75,6 +75,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 StateDiagram {
     constructor(options) {
@@ -143,13 +152,10 @@ class StateDiagram {
         const R = StateDiagram.R;
         const doc = new svg_dom_1.SvgDocument(width, height);
         const svg = doc.root;
-        // ── Background ──────────────────────────────────────────────────────
+        // ── Background + embedded Industry web-fonts ────────────────────────
         svg.child('rect', { width, height, fill: t.canvasBg });
-        // ── Defs: arrowhead marker + state fill gradient ────────────────────
-        doc.linearGradient('stateFill', [
-            [0, accent.mid],
-            [100, accent.from],
-        ]);
+        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,
@@ -166,9 +172,9 @@ class StateDiagram {
                 .child('text', {
                 x: PAD,
                 y: PAD + 8,
-                '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);
@@ -195,7 +201,7 @@ class StateDiagram {
                     cx: p.cx,
                     cy: p.cy,
                     r: StateDiagram.PSEUDO_R,
-                    fill: '#111111',
+                    fill: '#1d1f20',
                     stroke: t.border,
                     'stroke-width': 1,
                 });
@@ -218,22 +224,21 @@ class StateDiagram {
                 });
             }
             else {
-                // Normal state: rounded rectangle with accent fill.
+                // Normal state: square box with solid accent fill (blueprint).
                 svg.child('rect', {
                     x: p.cx - p.hw,
                     y: p.cy - p.hh,
                     width: p.hw * 2,
                     height: p.hh * 2,
-                    rx: R,
-                    fill: 'url(#stateFill)',
+                    fill: accent.mid,
                     stroke: accent.from,
-                    'stroke-width': 2,
+                    'stroke-width': 1,
                 });
                 svg
                     .child('text', {
                     x: p.cx,
                     y: p.cy + 5,
-                    'font-family': 'system-ui,-apple-system,sans-serif',
+                    'font-family': IND_FONT_HEAD,
                     'font-size': 15,
                     'font-weight': 700,
                     fill: '#FFFFFF',
@@ -247,7 +252,7 @@ class StateDiagram {
                     .child('text', {
                     x: p.cx,
                     y: p.cy + StateDiagram.PSEUDO_R + 16,
-                    'font-family': 'system-ui,sans-serif',
+                    'font-family': IND_FONT_BODY,
                     'font-size': 11,
                     'font-weight': 600,
                     fill: t.textSecondary,
@@ -303,7 +308,6 @@ class StateDiagram {
             y: y - 13,
             width: w,
             height: 18,
-            rx: 6,
             fill: '#FFFFFF',
             opacity: 0.85,
         });
@@ -311,7 +315,7 @@ class StateDiagram {
             .child('text', {
             x,
             y: y - 1,
-            'font-family': "'SF Mono','Fira Code',monospace",
+            'font-family': IND_FONT_MONO,
             'font-size': 11,
             'font-weight': 600,
             fill: color,

package/dist/diagrams/svg-dom.d.ts

@@ -0,0 +1,62 @@
+/**
+ * svg-dom — a small DOM-backed SVG builder shared by every diagram generator.
+ *
+ * Diagrams are constructed against a real DOM document (via `@xmldom/xmldom`)
+ * using `createElement`/`setAttribute`/`appendChild`, then serialized once with
+ * `XMLSerializer`. This replaces hand-concatenated markup strings: attribute
+ * values are escaped by the serializer, element nesting can't be malformed, and
+ * every generator shares one construction API.
+ *
+ * The `El` wrapper is a thin fluent facade over a DOM `Element` — `.attr()`,
+ * `.text()`, `.child()` — so generator code reads declaratively while the
+ * underlying nodes remain inspectable/testable as real DOM.
+ */
+export type AttrValue = string | number | undefined | null;
+export type Attrs = Record<string, AttrValue>;
+/** Fluent wrapper around a DOM Element. */
+export declare class El {
+    readonly node: any;
+    private readonly doc;
+    constructor(node: any, doc: any);
+    /** Set one attribute (skipped when value is null/undefined). */
+    attr(name: string, value: AttrValue): this;
+    /** Set many attributes at once. */
+    attrs(map: Attrs): this;
+    /** Append a text node (returns this for chaining). */
+    text(value: string | number): this;
+    /** Create + append a child element, returning the CHILD. */
+    child(tag: string, attrs?: Attrs): El;
+    /** Append an already-built El as a child; returns this (the parent). */
+    append(...children: El[]): this;
+}
+/** A DOM-backed SVG document builder. */
+export declare class SvgDocument {
+    private readonly doc;
+    readonly root: El;
+    /** The <defs> element (created lazily on first `defs()` call). */
+    private _defs?;
+    constructor(width: number, height: number, viewBox?: string);
+    /** Create a standalone element not yet attached to the tree. */
+    create(tag: string, attrs?: Attrs): El;
+    /**
+     * Embed a `<style>` block (inside <defs>) so browser renderers can resolve
+     * web fonts / CSS. Used by the Industry-styled generators to @import Barlow /
+     * Barlow Condensed / JetBrains Mono; non-browser renderers ignore it and fall
+     * back to the system fonts declared per family.
+     */
+    style(css: string): this;
+    /** Get (creating on first use) the shared <defs> block. */
+    defs(): El;
+    /**
+     * Convenience: add a linear gradient to <defs> and return its id.
+     * `stops` is a list of [offsetPercent, color] pairs.
+     */
+    linearGradient(id: string, stops: Array<[number, string]>, opts?: {
+        x1?: number;
+        y1?: number;
+        x2?: number;
+        y2?: number;
+    }): string;
+    /** Serialize the whole document to an XML/SVG string (with XML prolog). */
+    toString(comment?: string): string;
+}

package/dist/diagrams/svg-dom.js

@@ -74,6 +74,17 @@ class SvgDocument {
             el.attrs(attrs);
         return el;
     }
+    /**
+     * Embed a `<style>` block (inside <defs>) so browser renderers can resolve
+     * web fonts / CSS. Used by the Industry-styled generators to @import Barlow /
+     * Barlow Condensed / JetBrains Mono; non-browser renderers ignore it and fall
+     * back to the system fonts declared per family.
+     */
+    style(css) {
+        const s = this.defs().child('style', { type: 'text/css' });
+        s.node.appendChild(this.doc.createTextNode(css));
+        return this;
+    }
     /** Get (creating on first use) the shared <defs> block. */
     defs() {
         if (!this._defs) {

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

@@ -0,0 +1,47 @@
+/**
+ * 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.
+ *
+ * Usage:
+ *   const diag = new TreeDiagram({ root: { name: 'db', children: [...] } });
+ *   diag.save('./diagrams/tree.svg');   // or: diag.generate()
+ */
+export interface TreeNode {
+    name: string;
+    children?: TreeNode[];
+    badge?: string;
+}
+export interface TreeDiagramOptions {
+    root: TreeNode;
+    title?: string;
+    theme?: 'light' | 'dark';
+    color?: string;
+    direction?: 'horizontal' | 'vertical';
+}
+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). */
+    private static readonly DEPTH_GAP;
+    /** Distance between successive leaf slots (center-to-center). */
+    private static readonly LEAF_GAP;
+    constructor(options: TreeDiagramOptions);
+    private layout;
+    private flatten;
+    private connectorPath;
+    generate(): string;
+    /** Write the SVG to a file, creating parent directories as needed. */
+    save(outputPath: string): string;
+}
+export default TreeDiagram;

package/dist/diagrams/tree-diagram.js

@@ -53,6 +53,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');";
 class TreeDiagram {
     constructor(options) {
         this.opts = {
@@ -146,17 +155,18 @@ class TreeDiagram {
             : 2 * PAD + titleH + BOX_H + spanDepth;
         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 });
+        svg.child('style').text(IND_FONT_IMPORT);
         // ── Title ────────────────────────────────────────────────────────────
         if (title) {
             svg
                 .child('text', {
                 x: PAD,
                 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(title);
@@ -169,7 +179,7 @@ class TreeDiagram {
                     d: this.connectorPath(n, c, horizontal),
                     fill: 'none',
                     stroke: depthPalette.mid,
-                    'stroke-width': 2,
+                    'stroke-width': 1,
                     'stroke-opacity': 0.55,
                     'stroke-linecap': 'round',
                 });
@@ -185,25 +195,24 @@ class TreeDiagram {
             // 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.from : pal.light;
-            const boxStroke = isRoot ? accent.mid : pal.mid;
+            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,
-                rx: R,
                 fill: boxFill,
                 stroke: boxStroke,
-                'stroke-width': isRoot ? 2 : 1.5,
+                'stroke-width': 1,
             });
             const label = n.node.name.length > 20 ? n.node.name.slice(0, 19) + '…' : n.node.name;
             svg
                 .child('text', {
                 x: n.x,
                 y: n.y + (n.node.badge ? -1 : 5),
-                'font-family': 'system-ui,-apple-system,sans-serif',
+                'font-family': IND_FONT_HEAD,
                 'font-size': 14,
                 'font-weight': 700,
                 fill: labelFill,
@@ -215,7 +224,7 @@ class TreeDiagram {
                     .child('text', {
                     x: n.x,
                     y: n.y + 15,
-                    'font-family': "'SF Mono','Fira Code',monospace",
+                    'font-family': IND_FONT_MONO,
                     'font-size': 10,
                     'font-weight': 600,
                     fill: isRoot ? 'rgba(255,255,255,0.8)' : pal.mid,