ts-prorm-orm 1.2.2 → 2.0.0

package/dist/diagrams/package-diagram.js

@@ -1,16 +1,14 @@
 "use strict";
 /**
- * PackageDiagram — a UML package / namespace grouping diagram.
+ * PackageDiagram - a UML package / namespace grouping diagram.
  *
  * Groups models/tables into packages (schemas, modules, bounded-contexts).
  * Each package is drawn as the classic UML "folder" shape: a small tab rect
  * on the top-left plus a body rect beneath it. Package members are laid out
  * as small labeled boxes in a grid inside the body. Dashed dependency arrows
- * (e.g. «import») connect packages.
+ * (e.g. <<import>>) connect packages.
  *
- * Each package receives a distinct accent from `rotatedPalettes`; the theme
- * drives the canvas/text colors. Both `color` and `theme` options genuinely
- * change fill/stroke values in the produced SVG, and the viewBox is auto-sized.
+ * The viewBox is auto-sized to the laid-out geometry.
  *
  * Usage:
  *   const diag = new PackageDiagram({ packages: [...], dependencies: [...] });
@@ -55,18 +53,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PackageDiagram = 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 PackageDiagram {
     constructor(options) {
         this.opts = {
@@ -90,12 +79,10 @@ class PackageDiagram {
         const h = P.HDR_H + innerH + 2 * P.BODY_PAD;
         return { w, h };
     }
-    generate() {
+    build() {
         const P = PackageDiagram;
-        const { packages, dependencies, title, theme, color, columns } = this.opts;
-        const t = (0, palette_1.resolveTheme)(theme);
-        const palettes = (0, palette_1.rotatedPalettes)(color);
-        // ── Grid layout of package folders ───────────────────────────────────
+        const { packages, dependencies, title, columns } = this.opts;
+        // Grid layout of package folders.
         const gridCols = columns > 0 ? columns : Math.ceil(Math.sqrt(Math.max(packages.length, 1)));
         // Measure every package first.
         const sizes = packages.map((p) => this.packageSize(p));
@@ -123,7 +110,7 @@ class PackageDiagram {
             rowY[r] = accY;
             accY += rowHeights[r] + P.GAP_Y;
         }
-        // Place packages, assigning each a rotated accent.
+        // Place packages.
         const placed = packages.map((pkg, i) => {
             const c = i % gridCols;
             const r = Math.floor(i / gridCols);
@@ -135,51 +122,32 @@ class PackageDiagram {
                 w,
                 h,
                 bodyY: rowY[r] + P.TAB_H,
-                accent: palettes[i % palettes.length],
             };
         });
         const byName = new Map();
         for (const pl of placed)
             byName.set(pl.pkg.name, pl);
-        // ── Canvas size ──────────────────────────────────────────────────────
+        // Canvas size.
         const totalW = colX[gridCols - 1] + colWidths[gridCols - 1] + P.PAD;
         const totalH = rowY[rowCount - 1] + rowHeights[rowCount - 1] + P.PAD;
-        const doc = new svg_dom_1.SvgDocument(totalW, totalH);
+        const doc = new svg_1.SvgDocument(totalW, totalH);
         const svg = doc.root;
-        // ── Background + embedded Industry web-fonts ──────────────────────────
-        svg.child('rect', { class: 'canvas', width: totalW, height: totalH, fill: t.canvasBg });
-        svg.child('style').text(IND_FONT_IMPORT);
-        // ── Arrow marker (in defs) ───────────────────────────────────────────
-        const marker = doc.defs().child('marker', {
-            id: 'pkgArrow',
-            markerWidth: 12,
-            markerHeight: 12,
-            refX: 9,
-            refY: 4,
-            orient: 'auto',
-            markerUnits: 'userSpaceOnUse',
-        });
-        marker.child('path', {
-            d: 'M0,0 L9,4 L0,8',
-            fill: 'none',
-            stroke: t.textSecondary,
-            'stroke-width': 1.4,
-        });
-        // ── Title ────────────────────────────────────────────────────────────
+        svg.child('rect', { class: 'canvas', width: totalW, height: totalH, fill: theme_1.INK.ground });
+        (0, layout_1.defineArrowhead)(doc.defs(), 'pkgArrow');
         if (title) {
             svg
                 .child('text', {
                 class: 'title',
                 x: P.PAD,
                 y: P.PAD + 26,
-                'font-family': IND_FONT_HEAD,
-                'font-size': 22,
-                'font-weight': 600,
-                fill: t.textPrimary,
+                'font-family': theme_1.FONT.family,
+                'font-size': theme_1.FONT.title + 9,
+                'font-weight': 'bold',
+                fill: theme_1.INK.line,
             })
                 .text(title);
         }
-        // ── Dependency arrows (drawn under packages) ─────────────────────────
+        // Dependency arrows, drawn under packages.
         for (const dep of dependencies) {
             const a = byName.get(dep.from);
             const b = byName.get(dep.to);
@@ -192,37 +160,39 @@ class PackageDiagram {
                 y1: start.y,
                 x2: end.x,
                 y2: end.y,
-                stroke: t.textSecondary,
-                'stroke-width': 1.6,
+                stroke: theme_1.INK.line,
+                'stroke-width': theme_1.STROKE.hair,
                 'stroke-dasharray': '7 5',
                 'marker-end': 'url(#pkgArrow)',
             });
             const mx = (start.x + end.x) / 2;
             const my = (start.y + end.y) / 2;
-            const label = dep.label ?? '«import»';
+            const label = dep.label ?? '<<import>>';
             svg
                 .child('text', {
                 class: 'dependency-label',
                 x: mx,
                 y: my - 6,
-                'font-family': IND_FONT_BODY,
-                'font-size': 11,
+                'font-family': theme_1.FONT.family,
+                'font-size': theme_1.FONT.small + 2,
                 'font-style': 'italic',
-                fill: t.textSecondary,
+                fill: theme_1.INK.muted,
                 'text-anchor': 'middle',
             })
                 .text(label);
         }
-        // ── Package folders ──────────────────────────────────────────────────
         for (const pl of placed) {
-            this.drawPackage(svg, pl, t);
+            this.drawPackage(svg, pl);
         }
-        return doc.toString('Generated by ts-prorm-orm PackageDiagram');
+        return doc;
+    }
+    generate() {
+        return this.build().toString('Generated by ts-prorm-orm PackageDiagram');
     }
     /** Compute connection points on the borders of two package boxes. */
     edgePoints(a, b) {
-        const ac = { x: a.x + a.w / 2, y: a.bodyY + (a.h) / 2 };
-        const bc = { x: b.x + b.w / 2, y: b.bodyY + (b.h) / 2 };
+        const ac = { x: a.x + a.w / 2, y: a.bodyY + a.h / 2 };
+        const bc = { x: b.x + b.w / 2, y: b.bodyY + b.h / 2 };
         const clamp = (c, box, toward) => {
             const dx = toward.x - c.x;
             const dy = toward.y - c.y;
@@ -238,59 +208,53 @@ class PackageDiagram {
         return [clamp(ac, a, bc), clamp(bc, b, ac)];
     }
     /** Draw one UML folder-shaped package with its member grid. */
-    drawPackage(svg, pl, t) {
+    drawPackage(svg, pl) {
         const P = PackageDiagram;
-        const { pkg, x, y, w, bodyY, accent } = pl;
+        const { pkg, x, y, w, bodyY } = pl;
         const bodyH = pl.h;
-        // Folder tab (top-left small rect — square, solid accent).
+        // Folder tab (top-left small rect).
         svg.child('rect', {
             class: 'package-tab',
             x,
             y,
             width: P.TAB_W,
             height: P.TAB_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,
         });
-        // Body rect (white interior, hairline border).
+        // Body rect.
         svg.child('rect', {
             class: 'package-body',
             x,
             y: bodyY,
             width: w,
             height: bodyH,
-            fill: t.cardBg,
-            stroke: IND_HAIRLINE,
-            'stroke-width': 1,
+            fill: theme_1.INK.ground,
+            stroke: theme_1.INK.line,
+            'stroke-width': theme_1.STROKE.hair,
         });
-        // Header strip inside body (solid accent — blueprint label bar).
+        // Header strip inside body.
         svg.child('rect', {
             class: 'package-header',
             x,
             y: bodyY,
             width: w,
             height: P.HDR_H,
-            fill: accent.mid,
-        });
-        svg.child('line', {
-            x1: x,
-            y1: bodyY + P.HDR_H,
-            x2: x + w,
-            y2: bodyY + P.HDR_H,
-            stroke: IND_HAIRLINE,
-            'stroke-width': 1,
+            fill: theme_1.INK.wash,
+            stroke: theme_1.INK.line,
+            'stroke-width': theme_1.STROKE.hair,
         });
-        // Package name (white on the accent header bar).
+        // Package name.
         svg
             .child('text', {
             class: 'package-name',
             x: x + P.BODY_PAD,
             y: bodyY + 26,
-            'font-family': IND_FONT_HEAD,
-            'font-size': 15,
-            'font-weight': 600,
-            fill: '#FFFFFF',
+            'font-family': theme_1.FONT.family,
+            'font-size': theme_1.FONT.body + 4,
+            'font-weight': 'bold',
+            fill: theme_1.INK.line,
         })
             .text(pkg.name);
         // Member boxes in a grid.
@@ -307,40 +271,39 @@ class PackageDiagram {
                 y: my,
                 width: P.MEMBER_W,
                 height: P.MEMBER_H,
-                fill: t.cardBg,
-                stroke: IND_HAIRLINE,
-                'stroke-width': 1,
+                fill: theme_1.INK.ground,
+                stroke: theme_1.INK.line,
+                'stroke-width': theme_1.STROKE.hair,
             });
-            // Left accent stripe.
+            // Left stripe.
             svg.child('rect', {
                 class: 'member-stripe',
                 x: mx,
                 y: my,
                 width: 4,
                 height: P.MEMBER_H,
-                fill: accent.mid,
+                fill: theme_1.INK.line,
             });
-            const nameDisp = m.name.length > 18 ? m.name.slice(0, 17) + '…' : m.name;
             svg
                 .child('text', {
                 class: 'member-name',
                 x: mx + 14,
                 y: m.kind ? my + 18 : my + 25,
-                'font-family': IND_FONT_MONO,
-                'font-size': 12,
-                'font-weight': 700,
-                fill: t.textPrimary,
+                'font-family': theme_1.FONT.mono,
+                'font-size': theme_1.FONT.body + 1,
+                'font-weight': 'bold',
+                fill: theme_1.INK.line,
             })
-                .text(nameDisp);
+                .text((0, layout_1.truncate)(m.name, P.MEMBER_W - 20, theme_1.FONT.body + 1, true));
             if (m.kind) {
                 svg
                     .child('text', {
                     class: 'member-kind',
                     x: mx + 14,
                     y: my + 32,
-                    'font-family': IND_FONT_BODY,
-                    'font-size': 9,
-                    fill: t.textSecondary,
+                    'font-family': theme_1.FONT.family,
+                    'font-size': theme_1.FONT.small - 1,
+                    fill: theme_1.INK.muted,
                 })
                     .text(m.kind);
             }

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

@@ -1,29 +1,25 @@
 /**
- * RelationalDiagram — renders a relational schema as entity boxes with their
+ * RelationalDiagram - renders a relational schema as entity boxes with their
  * columns and draws connectors between related tables using proper crow's-foot
  * cardinality notation.
  *
  * Each entity is a box listing its columns; primary-key columns are marked and
  * underlined, foreign-key columns are marked. Relationship connectors terminate
  * with crow's-foot endpoints:
- *   - "one"       → a small perpendicular tick (single bar)
- *   - "many"      → the three-pronged crow's foot
- *   - "optional"  → a small circle just outside the endpoint (zero cardinality)
+ *   - "one"       -> a small perpendicular tick (single bar)
+ *   - "many"      -> the three-pronged crow's foot
  *
  * Supported relationship types: one-to-one, one-to-many, many-to-one,
  * many-to-many. Entities are laid out on a grid and connectors are routed
  * between the nearest entity edges.
  *
- * Everything is built against a real DOM document via the shared `SvgDocument`
- * / `El` builder — never by concatenating markup strings — and the viewBox is
- * auto-sized to the content. Both `theme` and `color` change real fill/stroke
- * values in the output (via `resolveTheme` / `resolveAccent`).
+ * The viewBox is auto-sized to the content.
  *
  * Usage:
  *   const rel = new RelationalDiagram({
  *     title: 'Shop Schema',
- *     entities: [ …RelEntity ],
- *     relationships: [ …RelRelationship ],
+ *     entities: [ ...RelEntity ],
+ *     relationships: [ ...RelRelationship ],
  *   });
  *   rel.save('./diagrams/schema.svg');
  *   // or: const svg = rel.generate();
@@ -49,7 +45,12 @@ export interface RelationalDiagramOptions {
     entities: RelEntity[];
     relationships?: RelRelationship[];
     title?: string;
+    /**
+     * Accepted for backward compatibility and ignored: diagrams render in a
+     * single monochrome theme.
+     */
     theme?: 'light' | 'dark';
+    /** Accepted for backward compatibility and ignored. */
     color?: string;
     /** Number of entity columns in the layout grid. @default 3 */
     columns?: number;
@@ -73,6 +74,7 @@ export declare class RelationalDiagram {
     private crowFoot;
     private oneBar;
     private renderRelationship;
+    private build;
     generate(): string;
     /**
      * Write the SVG to a file, creating parent directories as needed.