ts-prorm-orm 1.2.2 → 2.0.0

package/dist/diagrams/gantt-diagram.js

@@ -1,19 +1,19 @@
 "use strict";
 /**
- * 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:
@@ -58,24 +58,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GanttDiagram = 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');";
-// ─── Internal helpers ──────────────────────────────────────────────────────
+const svg_1 = require("./core/svg");
+const theme_1 = require("./core/theme");
+const layout_1 = require("./core/layout");
 const DAY_MS = 24 * 60 * 60 * 1000;
 function parseDate(s) {
     const t = new Date(s).getTime();
     return Number.isNaN(t) ? 0 : t;
 }
-// ─── Main class ────────────────────────────────────────────────────────────
 class GanttDiagram {
     constructor(options) {
         this.opts = {
@@ -88,7 +78,6 @@ class GanttDiagram {
     }
     /** Group tasks into sections preserving first-seen order. */
     buildSections() {
-        const palettes = (0, palette_1.rotatedPalettes)(this.opts.color);
         const order = [];
         const map = new Map();
         this.opts.tasks.forEach((task, index) => {
@@ -99,16 +88,13 @@ class GanttDiagram {
             }
             map.get(key).push({ task, index });
         });
-        return order.map((name, i) => ({
+        return order.map((name) => ({
             name,
-            accent: palettes[i % palettes.length],
             tasks: map.get(name),
         }));
     }
-    generate() {
-        const { title, theme, color, axis, tasks } = this.opts;
-        const accent = (0, palette_1.resolveAccent)(color);
-        const t = (0, palette_1.resolveTheme)(theme);
+    build() {
+        const { title, axis, tasks } = this.opts;
         const LABEL_W = GanttDiagram.LABEL_W;
         const AXIS_W = GanttDiagram.AXIS_W;
         const HDR = GanttDiagram.HDR;
@@ -117,9 +103,8 @@ class GanttDiagram {
         const SECTION_H = GanttDiagram.SECTION_H;
         const BAR_PAD = GanttDiagram.BAR_PAD;
         const PAD = GanttDiagram.PAD;
-        const FOOTER = GanttDiagram.FOOTER;
         const sections = this.buildSections();
-        // ── Time scale: min start → max end across all tasks ────────────────
+        // Time scale: min start to max end across all tasks.
         let minStart = Infinity;
         let maxEnd = -Infinity;
         for (const task of tasks) {
@@ -135,7 +120,7 @@ class GanttDiagram {
         if (!Number.isFinite(maxEnd) || maxEnd <= minStart)
             maxEnd = minStart + DAY_MS;
         const span = maxEnd - minStart;
-        // ── Row layout: sections add a heading row each ─────────────────────
+        // Row layout: sections add a heading row each.
         const showSectionHeadings = sections.some((s) => s.name !== '');
         let bodyH = 0;
         for (const sec of sections) {
@@ -147,54 +132,40 @@ class GanttDiagram {
         const chartLeft = PAD;
         const axisLeft = chartLeft + LABEL_W;
         const svgW = LABEL_W + AXIS_W + 2 * PAD;
-        const svgH = chartTop + bodyH + FOOTER + PAD;
-        const doc = new svg_dom_1.SvgDocument(svgW, svgH);
+        const svgH = chartTop + bodyH + GanttDiagram.FOOTER + PAD;
+        const doc = new svg_1.SvgDocument(svgW, svgH);
         const svg = doc.root;
-        const uid = title.replace(/\W/g, '') || 'gantt';
-        // ── Map a date (ms) → x within the axis area ─────────────────────────
+        // Map a date (ms) to x within the axis area.
         const xForMs = (ms) => axisLeft + ((ms - minStart) / span) * AXIS_W;
         const xForDate = (s) => xForMs(parseDate(s));
-        // ── Background + embedded Industry web-fonts ────────────────────────
-        svg.child('rect', { class: 'canvas', width: svgW, height: svgH, fill: t.canvasBg });
-        svg.child('style').text(IND_FONT_IMPORT);
-        // ── Defs: arrow marker (solid accent header — no gradient) ──────────
-        const marker = doc
-            .defs()
-            .child('marker', {
-            id: `arrow${uid}`,
-            markerWidth: 8,
-            markerHeight: 8,
-            refX: 6,
-            refY: 3,
-            orient: 'auto',
-            markerUnits: 'userSpaceOnUse',
-        });
-        marker.child('path', { d: 'M0,0 L6,3 L0,6 Z', fill: t.textSecondary });
-        // ── Header bar ──────────────────────────────────────────────────────
+        svg.child('rect', { class: 'canvas', width: svgW, height: svgH, fill: theme_1.INK.ground });
+        (0, layout_1.defineArrowhead)(doc.defs(), 'ganttArrow');
+        // Header bar.
         svg.child('rect', {
             class: 'header',
             x: chartLeft,
             y: PAD,
             width: LABEL_W + AXIS_W,
             height: HDR,
-            fill: accent.mid,
+            fill: theme_1.INK.wash,
+            stroke: theme_1.INK.line,
+            'stroke-width': theme_1.STROKE.hair,
         });
         svg
             .child('text', {
             x: chartLeft + 18,
             y: PAD + 40,
-            'font-family': IND_FONT_HEAD,
-            'font-size': 22,
-            'font-weight': 600,
-            fill: '#FFFFFF',
+            'font-family': theme_1.FONT.family,
+            'font-size': theme_1.FONT.title + 9,
+            'font-weight': 'bold',
+            fill: theme_1.INK.line,
         })
             .text(title);
-        // ── Axis area geometry ──────────────────────────────────────────────
+        // Axis area geometry.
         const axisTop = PAD + HDR;
         const chartBottom = chartTop + bodyH;
-        // ── Gridlines + axis tick labels ────────────────────────────────────
+        // Gridlines + axis tick labels.
         const step = axis === 'days' ? DAY_MS : axis === 'months' ? 30 * DAY_MS : 7 * DAY_MS;
-        // Iterate from minStart to maxEnd inclusive, drawing a vertical line at each tick.
         for (let ms = minStart; ms <= maxEnd + 1; ms += step) {
             const x = xForMs(Math.min(ms, maxEnd));
             svg.child('line', {
@@ -203,8 +174,8 @@ class GanttDiagram {
                 y1: axisTop + AXIS_HDR,
                 x2: x,
                 y2: chartBottom,
-                stroke: t.border,
-                'stroke-width': 1,
+                stroke: theme_1.INK.line,
+                'stroke-width': theme_1.STROKE.hair,
             });
             const label = new Date(ms).toISOString().slice(0, 10);
             svg
@@ -212,9 +183,9 @@ class GanttDiagram {
                 class: 'axis-tick',
                 x: x + 3,
                 y: axisTop + AXIS_HDR - 8,
-                'font-family': IND_FONT_MONO,
-                'font-size': 9,
-                fill: t.textSecondary,
+                'font-family': theme_1.FONT.mono,
+                'font-size': theme_1.FONT.small - 1,
+                fill: theme_1.INK.muted,
             })
                 .text(label);
         }
@@ -225,8 +196,8 @@ class GanttDiagram {
             y1: axisTop + AXIS_HDR,
             x2: xForMs(maxEnd),
             y2: chartBottom,
-            stroke: t.border,
-            'stroke-width': 1,
+            stroke: theme_1.INK.line,
+            'stroke-width': theme_1.STROKE.hair,
         });
         // Separator between label column and axis.
         svg.child('line', {
@@ -235,11 +206,11 @@ class GanttDiagram {
             y1: axisTop,
             x2: axisLeft,
             y2: chartBottom,
-            stroke: t.border,
-            'stroke-width': 1.5,
+            stroke: theme_1.INK.line,
+            'stroke-width': theme_1.STROKE.heavy,
         });
-        // ── Rows: sections + tasks + bars ───────────────────────────────────
-        // Track each task's bar geometry by name for dependency arrows.
+        // Rows: sections + tasks + bars. Track each task's bar geometry by name
+        // for dependency arrows.
         const barGeom = new Map();
         let y = chartTop;
         for (const sec of sections) {
@@ -250,7 +221,7 @@ class GanttDiagram {
                     y,
                     width: LABEL_W + AXIS_W,
                     height: SECTION_H,
-                    fill: sec.accent.light,
+                    fill: theme_1.INK.wash,
                 });
                 svg.child('rect', {
                     class: 'section-accent',
@@ -258,17 +229,17 @@ class GanttDiagram {
                     y,
                     width: 5,
                     height: SECTION_H,
-                    fill: sec.accent.mid,
+                    fill: theme_1.INK.line,
                 });
                 svg
                     .child('text', {
                     class: 'section-label',
                     x: chartLeft + 16,
                     y: y + SECTION_H / 2 + 4,
-                    'font-family': IND_FONT_BODY,
-                    'font-size': 12,
-                    'font-weight': 700,
-                    fill: sec.accent.text,
+                    'font-family': theme_1.FONT.family,
+                    'font-size': theme_1.FONT.body + 1,
+                    'font-weight': 'bold',
+                    fill: theme_1.INK.line,
                     'letter-spacing': 0.5,
                 })
                     .text(sec.name);
@@ -277,19 +248,18 @@ class GanttDiagram {
             for (const { task } of sec.tasks) {
                 const rowY = y;
                 const midY = rowY + ROW_H / 2;
-                // Row label
-                const dispName = task.name.length > 26 ? task.name.slice(0, 25) + '…' : task.name;
+                // Row label.
                 svg
                     .child('text', {
                     class: 'task-label',
                     x: chartLeft + 14,
                     y: midY + 4,
-                    'font-family': IND_FONT_BODY,
-                    'font-size': 12,
-                    'font-weight': 600,
-                    fill: t.textPrimary,
+                    'font-family': theme_1.FONT.family,
+                    'font-size': theme_1.FONT.body + 1,
+                    'font-weight': 'bold',
+                    fill: theme_1.INK.line,
                 })
-                    .text(dispName);
+                    .text((0, layout_1.truncate)(task.name, LABEL_W - 24, theme_1.FONT.body + 1));
                 const sx = xForDate(task.start);
                 const ex = xForDate(task.end);
                 if (task.milestone) {
@@ -300,9 +270,9 @@ class GanttDiagram {
                     svg.child('path', {
                         class: 'milestone',
                         d: `M${cx},${cy - r} L${cx + r},${cy} L${cx},${cy + r} L${cx - r},${cy} Z`,
-                        fill: sec.accent.from,
-                        stroke: sec.accent.mid,
-                        'stroke-width': 1.5,
+                        fill: theme_1.INK.line,
+                        stroke: theme_1.INK.line,
+                        'stroke-width': theme_1.STROKE.hair,
                     });
                     barGeom.set(task.name, { x: cx - r, y: cy - r, w: 2 * r, h: 2 * r });
                 }
@@ -310,17 +280,18 @@ class GanttDiagram {
                     const barY = rowY + BAR_PAD;
                     const barH = ROW_H - 2 * BAR_PAD;
                     const barW = Math.max(2, ex - sx);
-                    // Full bar
+                    // Full bar.
                     svg.child('rect', {
                         class: 'bar',
                         x: sx,
                         y: barY,
                         width: barW,
                         height: barH,
-                        fill: sec.accent.mid,
-                        opacity: 0.85,
+                        fill: theme_1.INK.wash,
+                        stroke: theme_1.INK.line,
+                        'stroke-width': theme_1.STROKE.hair,
                     });
-                    // % complete overlay
+                    // % complete overlay.
                     if (typeof task.percent === 'number' && task.percent > 0) {
                         const pct = Math.max(0, Math.min(100, task.percent));
                         svg.child('rect', {
@@ -329,17 +300,17 @@ class GanttDiagram {
                             y: barY,
                             width: Math.max(1, (barW * pct) / 100),
                             height: barH,
-                            fill: sec.accent.from,
+                            fill: theme_1.INK.line,
                         });
                         svg
                             .child('text', {
                             class: 'bar-pct',
                             x: sx + barW + 6,
                             y: midY + 4,
-                            'font-family': IND_FONT_MONO,
-                            'font-size': 10,
-                            'font-weight': 700,
-                            fill: t.textSecondary,
+                            'font-family': theme_1.FONT.mono,
+                            'font-size': theme_1.FONT.small - 1,
+                            'font-weight': 'bold',
+                            fill: theme_1.INK.muted,
                         })
                             .text(`${pct}%`);
                     }
@@ -348,7 +319,7 @@ class GanttDiagram {
                 y += ROW_H;
             }
         }
-        // ── Dependency arrows ───────────────────────────────────────────────
+        // Dependency arrows.
         for (const task of tasks) {
             if (!task.dependsOn)
                 continue;
@@ -365,27 +336,30 @@ class GanttDiagram {
                 class: 'dependency',
                 d: `M${x1},${y1} C${midX},${y1} ${midX},${y2} ${x2},${y2}`,
                 fill: 'none',
-                stroke: t.textSecondary,
-                'stroke-width': 1.5,
+                stroke: theme_1.INK.line,
+                'stroke-width': theme_1.STROKE.hair,
                 'stroke-dasharray': '4 3',
-                'marker-end': `url(#arrow${uid})`,
+                'marker-end': 'url(#ganttArrow)',
             });
         }
-        // ── Footer ──────────────────────────────────────────────────────────
+        // Footer.
         const footerY = chartBottom + 10;
         svg
             .child('text', {
             class: 'footer',
             x: chartLeft + 2,
             y: footerY + 22,
-            'font-family': IND_FONT_BODY,
-            'font-size': 11,
-            fill: t.textSecondary,
+            'font-family': theme_1.FONT.family,
+            'font-size': theme_1.FONT.small + 2,
+            fill: theme_1.INK.muted,
         })
-            .text(`${tasks.length} task${tasks.length !== 1 ? 's' : ''} · ${new Date(minStart)
+            .text(`${tasks.length} task${tasks.length !== 1 ? 's' : ''}, ${new Date(minStart)
             .toISOString()
-            .slice(0, 10)} → ${new Date(maxEnd).toISOString().slice(0, 10)}`);
-        return doc.toString('Generated by ts-prorm-orm GanttDiagram');
+            .slice(0, 10)} - ${new Date(maxEnd).toISOString().slice(0, 10)}`);
+        return doc;
+    }
+    generate() {
+        return this.build().toString('Generated by ts-prorm-orm GanttDiagram');
     }
     /**
      * Write the SVG to a file. Creates parent directories if needed.

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

@@ -1,18 +1,14 @@
 /**
- * IndexDiagram — an INDEX & CONSTRAINT MAP for a single table.
+ * 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
+ * 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.
+ * distinguished by a short ASCII badge; each row also shows the index name,
+ * its access method (btree/hash/gin...) and whether it is unique.
  *
  * Usage:
  *   const diag = new IndexDiagram({ table: 'users', columns: [...], indexes: [...] });
@@ -37,8 +33,12 @@ export interface IndexDiagramOptions {
     columns: IdxColumn[];
     indexes: IdxIndex[];
     title?: string;
+    /**
+     * Accepted for backward compatibility and ignored: diagrams render in a
+     * single monochrome theme.
+     */
     theme?: 'light' | 'dark';
-    /** Custom accent color (named palette or hex) for header + PRIMARY index */
+    /** Accepted for backward compatibility and ignored. */
     color?: string;
 }
 export declare class IndexDiagram {
@@ -52,9 +52,9 @@ export declare class IndexDiagram {
     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;
+    private build;
     generate(): string;
     /** Write the SVG to a file. Creates parent directories if needed. */
     save(outputPath: string): string;