ts-prorm-orm 1.2.2 → 2.0.0

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

@@ -1,20 +1,20 @@
 /**
- * FlowDiagram — generates a general flowchart / data-flow SVG.
+ * 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)
+ *   - process        -> square hairline box
+ *   - decision       -> diamond (polygon)
+ *   - start / end    -> filled square (wash fill)
+ *   - 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.
+ * Edges are orthogonal-ish connectors with an arrowhead 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.
  *
@@ -43,8 +43,12 @@ export interface FlowDiagramOptions {
     nodes: FlowNode[];
     edges: FlowEdge[];
     title?: string;
+    /**
+     * Accepted for backward compatibility and ignored: diagrams render in a
+     * single monochrome theme.
+     */
     theme?: 'light' | 'dark';
-    /** Accent color: a named palette entry or a hex string. */
+    /** Accepted for backward compatibility and ignored. */
     color?: string;
     direction?: 'vertical' | 'horizontal';
 }
@@ -61,6 +65,7 @@ export declare class FlowDiagram {
     private layout;
     private drawNode;
     private drawEdge;
+    private build;
     generate(): string;
     /**
      * Write the SVG to a file. Creates parent directories if needed.

package/dist/diagrams/flow-diagram.js

@@ -1,21 +1,21 @@
 "use strict";
 /**
- * FlowDiagram — generates a general flowchart / data-flow SVG.
+ * 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)
+ *   - process        -> square hairline box
+ *   - decision       -> diamond (polygon)
+ *   - start / end    -> filled square (wash fill)
+ *   - 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.
+ * Edges are orthogonal-ish connectors with an arrowhead 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.
  *
@@ -62,18 +62,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlowDiagram = 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 FlowDiagram {
     constructor(options) {
         this.opts = {
@@ -85,7 +76,7 @@ class FlowDiagram {
             direction: options.direction ?? 'vertical',
         };
     }
-    // ── Assign nodes to layers, honoring row/col hints ────────────────────────
+    // -- Assign nodes to layers, honoring row/col hints -------------------------
     layout() {
         const { nodes, direction } = this.opts;
         const NODE_W = FlowDiagram.NODE_W;
@@ -150,29 +141,27 @@ class FlowDiagram {
         });
         return { placed, contentW, contentH, titleH };
     }
-    // ── Draw a single typed node into the SVG ─────────────────────────────────
-    drawNode(svg, p, accent, t) {
+    // -- Draw a single typed node into the SVG -----------------------------------
+    drawNode(svg, p) {
         const W = FlowDiagram.NODE_W;
         const H = FlowDiagram.NODE_H;
         const { cx, cy, type } = p;
         const left = cx - W / 2;
         const top = cy - H / 2;
         const isTerminal = type === 'start' || type === 'end';
-        const fill = isTerminal ? accent.mid : t.cardBg;
-        const stroke = isTerminal ? accent.from : accent.mid;
-        const textFill = isTerminal ? '#FFFFFF' : t.textPrimary;
+        const fill = isTerminal ? theme_1.INK.wash : theme_1.INK.ground;
+        const strokeWidth = isTerminal ? theme_1.STROKE.heavy : theme_1.STROKE.hair;
         switch (type) {
             case 'start':
             case 'end': {
-                // Terminal: solid accent square (blueprint — no radius).
                 svg.child('rect', {
                     x: left,
                     y: top,
                     width: W,
                     height: H,
                     fill,
-                    stroke,
-                    'stroke-width': 1,
+                    stroke: theme_1.INK.line,
+                    'stroke-width': strokeWidth,
                 });
                 break;
             }
@@ -184,7 +173,7 @@ class FlowDiagram {
                     `${cx},${top + H}`,
                     `${left},${cy}`,
                 ].join(' ');
-                svg.child('polygon', { points: pts, fill, stroke, 'stroke-width': 1 });
+                svg.child('polygon', { points: pts, fill, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
                 break;
             }
             case 'data': {
@@ -196,14 +185,13 @@ class FlowDiagram {
                     `${left + W - s},${top + H}`,
                     `${left},${top + H}`,
                 ].join(' ');
-                svg.child('polygon', { points: pts, fill, stroke, 'stroke-width': 1 });
+                svg.child('polygon', { points: pts, fill, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
                 break;
             }
             case 'database': {
                 // Cylinder: body rect + top & bottom ellipses.
                 const ry = FlowDiagram.CYL_RY;
                 const rx = W / 2;
-                // Body (between the two ellipse centers).
                 svg.child('rect', {
                     x: left,
                     y: top + ry,
@@ -211,13 +199,40 @@ class FlowDiagram {
                     height: H - 2 * ry,
                     fill,
                 });
-                // Side walls.
-                svg.child('line', { x1: left, y1: top + ry, x2: left, y2: top + H - ry, stroke, 'stroke-width': 2 });
-                svg.child('line', { x1: left + W, y1: top + ry, x2: left + W, y2: top + H - ry, stroke, 'stroke-width': 2 });
-                // Bottom (front) ellipse.
-                svg.child('ellipse', { cx, cy: top + H - ry, rx, ry, fill, stroke, 'stroke-width': 2 });
-                // Top ellipse (drawn last so its rim sits on top).
-                svg.child('ellipse', { cx, cy: top + ry, rx, ry, fill, stroke, 'stroke-width': 2 });
+                svg.child('line', {
+                    x1: left,
+                    y1: top + ry,
+                    x2: left,
+                    y2: top + H - ry,
+                    stroke: theme_1.INK.line,
+                    'stroke-width': theme_1.STROKE.hair,
+                });
+                svg.child('line', {
+                    x1: left + W,
+                    y1: top + ry,
+                    x2: left + W,
+                    y2: top + H - ry,
+                    stroke: theme_1.INK.line,
+                    'stroke-width': theme_1.STROKE.hair,
+                });
+                svg.child('ellipse', {
+                    cx,
+                    cy: top + H - ry,
+                    rx,
+                    ry,
+                    fill,
+                    stroke: theme_1.INK.line,
+                    'stroke-width': theme_1.STROKE.hair,
+                });
+                svg.child('ellipse', {
+                    cx,
+                    cy: top + ry,
+                    rx,
+                    ry,
+                    fill,
+                    stroke: theme_1.INK.line,
+                    'stroke-width': theme_1.STROKE.hair,
+                });
                 break;
             }
             case 'process':
@@ -228,36 +243,35 @@ class FlowDiagram {
                     width: W,
                     height: H,
                     fill,
-                    stroke,
-                    'stroke-width': 1,
+                    stroke: theme_1.INK.line,
+                    'stroke-width': strokeWidth,
                 });
                 break;
             }
         }
         // Node label (centered). Truncate very long labels.
         const label = p.node.label ?? p.node.id;
-        const disp = label.length > 24 ? label.slice(0, 23) + '…' : label;
         svg
             .child('text', {
             x: cx,
             y: cy + 5,
-            'font-family': IND_FONT_HEAD,
-            'font-size': 13,
-            'font-weight': isTerminal ? 700 : 600,
-            fill: textFill,
+            'font-family': theme_1.FONT.family,
+            'font-size': theme_1.FONT.body + 2,
+            'font-weight': 'bold',
+            fill: theme_1.INK.line,
             'text-anchor': 'middle',
         })
-            .text(disp);
+            .text((0, layout_1.truncate)(label, W - 16, theme_1.FONT.body + 2));
     }
-    // ── Draw one edge (orthogonal-ish connector) with optional label ──────────
-    drawEdge(svg, from, to, edge, markerId, accent, t) {
+    // -- Draw one edge (orthogonal-ish connector) with optional label ------------
+    drawEdge(svg, from, to, edge, markerId) {
         const W = FlowDiagram.NODE_W;
         const H = FlowDiagram.NODE_H;
         const vertical = this.opts.direction !== 'horizontal';
         let d;
         let labelX;
         let labelY;
-        const forward = vertical ? to.layer > from.layer : to.layer > from.layer;
+        const forward = to.layer > from.layer;
         if (forward) {
             if (vertical) {
                 const sx = from.cx;
@@ -294,86 +308,77 @@ class FlowDiagram {
         svg.child('path', {
             d,
             fill: 'none',
-            stroke: t.textSecondary,
-            'stroke-width': 1,
+            stroke: theme_1.INK.line,
+            'stroke-width': theme_1.STROKE.hair,
             'marker-end': `url(#${markerId})`,
         });
         if (edge.label) {
-            // Label chip (accent light tint, square) so text stays legible.
+            // Label chip so text stays legible against crossing lines.
             const chipW = edge.label.length * 6.5 + 12;
             svg.child('rect', {
                 x: labelX - 2,
                 y: labelY - 12,
                 width: chipW,
                 height: 16,
-                fill: accent.light,
+                fill: theme_1.INK.ground,
+                stroke: theme_1.INK.line,
+                'stroke-width': theme_1.STROKE.hair,
             });
             svg
                 .child('text', {
                 x: labelX + chipW / 2 - 2,
                 y: labelY,
-                'font-family': IND_FONT_MONO,
-                'font-size': 10,
-                'font-weight': 700,
-                fill: accent.text,
+                'font-family': theme_1.FONT.mono,
+                'font-size': theme_1.FONT.small,
+                'font-weight': 'bold',
+                fill: theme_1.INK.line,
                 'text-anchor': 'middle',
             })
                 .text(edge.label);
         }
     }
-    // ── Generate full SVG string ──────────────────────────────────────────────
-    generate() {
-        const { title, theme, color } = this.opts;
-        const accent = (0, palette_1.resolveAccent)(color);
-        const t = (0, palette_1.resolveTheme)(theme);
+    // -- Build the SVG document --------------------------------------------------
+    build() {
+        const { title } = this.opts;
         const PAD = FlowDiagram.PAD;
         const { placed, contentW, contentH, titleH } = this.layout();
         const svgW = contentW + 2 * PAD;
         const svgH = contentH + titleH + 2 * PAD;
-        const doc = new svg_dom_1.SvgDocument(Math.max(svgW, 320), Math.max(svgH, 160));
+        const W = Math.max(svgW, 320);
+        const H = Math.max(svgH, 160);
+        const doc = new svg_1.SvgDocument(W, H);
         const svg = doc.root;
-        // ── 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) ──────────────────────────────────
+        svg.child('rect', { width: W, height: H, fill: theme_1.INK.ground });
         const markerId = 'flowArrow';
-        const marker = doc.defs().child('marker', {
-            id: markerId,
-            viewBox: '0 0 10 10',
-            refX: 9,
-            refY: 5,
-            markerWidth: 7,
-            markerHeight: 7,
-            orient: 'auto-start-reverse',
-        });
-        marker.child('path', { d: 'M 0 0 L 10 5 L 0 10 z', fill: accent.mid });
-        // ── Title ──────────────────────────────────────────────────────────────
+        (0, layout_1.defineArrowhead)(doc.defs(), markerId);
         if (title) {
             svg
                 .child('text', {
                 x: PAD,
                 y: 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);
-            svg.child('rect', { x: PAD, y: PAD + 36, width: 56, height: 4, fill: accent.mid });
+            svg.child('rect', { x: PAD, y: PAD + 36, width: 56, height: 4, fill: theme_1.INK.line });
         }
-        // ── Edges first (so nodes render on top) ───────────────────────────────
+        // Edges first, so nodes render on top.
         for (const edge of this.opts.edges) {
             const from = placed.get(edge.from);
             const to = placed.get(edge.to);
             if (!from || !to)
                 continue;
-            this.drawEdge(svg, from, to, edge, markerId, accent, t);
+            this.drawEdge(svg, from, to, edge, markerId);
         }
-        // ── Nodes ──────────────────────────────────────────────────────────────
         for (const p of placed.values()) {
-            this.drawNode(svg, p, accent, t);
+            this.drawNode(svg, p);
         }
-        return doc.toString('Generated by ts-prorm-orm FlowDiagram');
+        return doc;
+    }
+    generate() {
+        return this.build().toString('Generated by ts-prorm-orm FlowDiagram');
     }
     /**
      * Write the SVG to a file. Creates parent directories if needed.

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

@@ -1,18 +1,18 @@
 /**
- * GanttDiagram — generates a horizontal timeline / Gantt chart SVG.
+ * 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
+ *  - Tasks grouped into sections
  *  - 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
+ *  - Auto-sized SVG viewBox
  *
  * 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 —
+ * all tasks; dates are mapped linearly to x. Everything is deterministic -
  * no Date.now()/new Date()-with-no-args/Math.random() is used.
  *
  * Usage:
@@ -38,8 +38,12 @@ export interface GanttTask {
 export interface GanttDiagramOptions {
     tasks: GanttTask[];
     title?: string;
+    /**
+     * Accepted for backward compatibility and ignored: diagrams render in a
+     * single monochrome theme.
+     */
     theme?: 'light' | 'dark';
-    /** Custom accent color name or hex string */
+    /** Accepted for backward compatibility and ignored. */
     color?: string;
     /** Gridline granularity along the time axis */
     axis?: 'days' | 'weeks' | 'months';
@@ -58,6 +62,7 @@ export declare class GanttDiagram {
     constructor(options: GanttDiagramOptions);
     /** Group tasks into sections preserving first-seen order. */
     private buildSections;
+    private build;
     generate(): string;
     /**
      * Write the SVG to a file. Creates parent directories if needed.