From f42363e4d0f2a990af861b3924fd43f75d65a5e7 Mon Sep 17 00:00:00 2001
From: Niels Rademaker <nc.rademaker@gmail.com>
Date: Thu, 2 Apr 2026 20:26:54 +0200
Subject: [PATCH 1/4] rework of variable browser based on svg-canvas

---
 .../app/managers/ApplicationMenuManager.ts    |    3 +-
 gui-js/apps/minsky-web/src/index.html         |    2 +
 .../src/lib/svg-canvas/classes/connector.ts   |    4 +
 .../src/lib/svg-canvas/classes/datapoint.ts   |   22 +
 .../src/lib/svg-canvas/classes/dimensions.ts  |    8 +
 .../src/lib/svg-canvas/classes/elementtype.ts |   10 +
 .../components/d3line.component.css           |    0
 .../components/d3line.component.html          |    7 +
 .../svg-canvas/components/d3line.component.ts |  113 ++
 .../components/elementlabel.component.css     |   24 +
 .../components/elementlabel.component.html    |   14 +
 .../components/elementlabel.component.ts      |   22 +
 .../lib/svg-canvas/constants/svg-constants.ts |  177 ++
 .../dialogs/editvariabledialog.component.css  |  133 ++
 .../dialogs/editvariabledialog.component.html |   41 +
 .../dialogs/editvariabledialog.component.ts   |   45 +
 .../directives/connector.directive.ts         |   20 +
 .../directives/dragdrop.directive.ts          |   21 +
 .../svg-canvas/svg-canvas-demo.component.css  |    0
 .../svg-canvas/svg-canvas-demo.component.html |    1 +
 .../svg-canvas/svg-canvas-demo.component.ts   |   33 +
 .../lib/svg-canvas/svg-canvas.component.css   |   71 +
 .../lib/svg-canvas/svg-canvas.component.html  |   47 +
 .../lib/svg-canvas/svg-canvas.component.ts    |  668 +++++++
 .../variable-pane.component.html              |    3 +-
 .../variable-pane.component.scss              |   23 +-
 .../variable-pane/variable-pane.component.ts  |  198 +-
 .../lib/wiring/variable/variable.component.ts |    3 +-
 gui-js/nx.json                                |    5 +-
 gui-js/package-lock.json                      |  544 ++++-
 gui-js/package.json                           |   16 +-
 gui-js/tsconfig.base.json                     |    2 +-
 package-lock.json                             | 1767 ++++++++++++++++-
 package.json                                  |    1 +
 34 files changed, 3884 insertions(+), 164 deletions(-)
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/classes/connector.ts
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/classes/datapoint.ts
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/classes/dimensions.ts
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/classes/elementtype.ts
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/components/d3line.component.css
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/components/d3line.component.html
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/components/d3line.component.ts
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/components/elementlabel.component.css
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/components/elementlabel.component.html
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/components/elementlabel.component.ts
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/constants/svg-constants.ts
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/dialogs/editvariabledialog.component.css
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/dialogs/editvariabledialog.component.html
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/dialogs/editvariabledialog.component.ts
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/directives/connector.directive.ts
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/directives/dragdrop.directive.ts
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas-demo.component.css
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas-demo.component.html
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas-demo.component.ts
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas.component.css
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas.component.html
 create mode 100644 gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas.component.ts

diff --git a/gui-js/apps/minsky-electron/src/app/managers/ApplicationMenuManager.ts b/gui-js/apps/minsky-electron/src/app/managers/ApplicationMenuManager.ts
index 36ac74a22..56f16636d 100644
--- a/gui-js/apps/minsky-electron/src/app/managers/ApplicationMenuManager.ts
+++ b/gui-js/apps/minsky-electron/src/app/managers/ApplicationMenuManager.ts
@@ -435,9 +435,10 @@ export class ApplicationMenuManager {
           click() {
             WindowManager.createPopupWindowWithRouting({
               title: 'Variables',
-              url: "#/headless/variable-pane",
+              url: '#/headless/variable-pane',
               width: 400,
               height: 450,
+              minWidth: 350,
               alwaysOnTop: true,
               modal: false,
             });
diff --git a/gui-js/apps/minsky-web/src/index.html b/gui-js/apps/minsky-web/src/index.html
index 1f63ca291..a814e5568 100644
--- a/gui-js/apps/minsky-web/src/index.html
+++ b/gui-js/apps/minsky-web/src/index.html
@@ -7,6 +7,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico" />
 
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">
+
     <style>
       .loader {
         border: 8px solid #f3f3f3;
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/classes/connector.ts b/gui-js/libs/ui-components/src/lib/svg-canvas/classes/connector.ts
new file mode 100644
index 000000000..4217bc925
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/classes/connector.ts
@@ -0,0 +1,4 @@
+export class Connector {
+    type: string;
+    position: (x: number, y: number, width: number, height: number) => [number,number];
+}
\ No newline at end of file
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/classes/datapoint.ts b/gui-js/libs/ui-components/src/lib/svg-canvas/classes/datapoint.ts
new file mode 100644
index 000000000..61ca86167
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/classes/datapoint.ts
@@ -0,0 +1,22 @@
+import { ElementType } from './elementtype';
+import { Connector } from './connector';
+import { Dimensions } from './dimensions';
+
+export class DataPoint {
+    label: string;
+    x?: number;
+    y?: number;
+    fx?: number;
+    fy?: number;
+    value: number;
+    exponent: number;
+    rotation: number;
+    anchorx?: number;
+    anchory?: number;
+    type: ElementType;
+    connectors: Connector[];
+    canvasPosition;
+    symbol;
+    dimensions: Dimensions;
+    hidden = false;
+}
\ No newline at end of file
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/classes/dimensions.ts b/gui-js/libs/ui-components/src/lib/svg-canvas/classes/dimensions.ts
new file mode 100644
index 000000000..30c830005
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/classes/dimensions.ts
@@ -0,0 +1,8 @@
+export class Dimensions {
+    length: number;
+    boundingbox: number[];
+    labelbox: number[];
+    valuebox: number[];
+    exponentbox: number[];
+    valueline?: number[][];
+}
\ No newline at end of file
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/classes/elementtype.ts b/gui-js/libs/ui-components/src/lib/svg-canvas/classes/elementtype.ts
new file mode 100644
index 000000000..3a6303050
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/classes/elementtype.ts
@@ -0,0 +1,10 @@
+import { Connector } from './connector';
+import { Dimensions } from './dimensions';
+
+export class ElementType {
+    name: string;
+    points: (x: number, y: number, width: number, height: number) => string;
+    size: number[];
+    connectors: Connector[];
+    getDimensions: (length: number) => Dimensions;
+}
\ No newline at end of file
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/components/d3line.component.css b/gui-js/libs/ui-components/src/lib/svg-canvas/components/d3line.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/components/d3line.component.html b/gui-js/libs/ui-components/src/lib/svg-canvas/components/d3line.component.html
new file mode 100644
index 000000000..40b956761
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/components/d3line.component.html
@@ -0,0 +1,7 @@
+<svg:path #linepath [style.display]="invisibleLine ? 'none' : 'inherit'"></svg:path>
+
+<svg:circle #startpoint [attr.cx]="start[0]" [attr.cy]="start[1]" r="0.00001"></svg:circle>
+<svg:circle #endpoint [attr.cx]="end[0]" [attr.cy]="end[1]" r="0.00001"></svg:circle>
+
+<svg:circle #midpoint dragdrop *ngFor="let p of dotPositions; let i = index"
+[dragfunctions]="dragfunctions(p, i)" [attr.cx]="p.x" [attr.cy]="p.y" r="7"></svg:circle>
\ No newline at end of file
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/components/d3line.component.ts b/gui-js/libs/ui-components/src/lib/svg-canvas/components/d3line.component.ts
new file mode 100644
index 000000000..504b5e959
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/components/d3line.component.ts
@@ -0,0 +1,113 @@
+import { CommonModule } from '@angular/common';
+import { ElementRef, Input, OnChanges, ViewChild, Component, SimpleChanges, Output, EventEmitter, ViewChildren } from '@angular/core';
+import * as d3 from 'd3';
+
+@Component({
+  selector: '[d3line]',
+  templateUrl: './d3line.component.html',
+    styleUrls: ['./d3line.component.css'],
+    imports: [CommonModule]
+})
+export class D3LineComponent implements OnChanges {
+    @ViewChild('linepath', {static: true})
+    linepath: ElementRef;
+
+    @ViewChild('startpoint', {static: true})
+    startpoint: ElementRef;
+
+    @ViewChild('endpoint', {static: true})
+    endpoint: ElementRef;
+
+    @ViewChildren('midpoint')
+    midpoints;
+
+    @Input()
+    start: [number,number,number];
+
+    @Input()
+    end: [number,number,number];
+
+    @Input()
+    dotsAt: number[];
+
+    dotPositions: any[] = [];
+
+    @Input()
+    invisibleLine = false;
+
+    @Input()
+    draggable = true;
+
+    @Output()
+    pointMoved = new EventEmitter<any>();
+
+    constructor() {
+    
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if(this.start && this.end && (changes.start || changes.end)) {
+            const points: any = [this.start];
+            
+            const pointDistance = Math.sqrt(Math.pow(this.end[0] - this.start[0], 2) + Math.pow(this.end[1] - this.start[1], 2)) / 4;
+            if(this.start[2] !== undefined) {
+                points.push([this.start[0] + Math.cos(this.start[2]) * pointDistance, this.start[1] + Math.sin(this.start[2]) * pointDistance]);
+            }
+            if(this.end[2] !== undefined) {
+                points.push([this.end[0] + Math.cos(this.end[2]) * pointDistance, this.end[1] + Math.sin(this.end[2]) * pointDistance]);
+            }
+            points.push(this.end);
+            
+            this.linepath.nativeElement.setAttribute('d', d3.line().curve(d3.curveBasis)(points));
+        }
+
+        if(changes.dotsAt) {
+            this.handleDotsChange();
+        }
+    }
+
+    handleDotsChange() {
+        const path = this.linepath.nativeElement;
+        const length = path.getTotalLength();
+        this.dotPositions = this.dotsAt.map(percentage => {
+            return path.getPointAtLength(percentage * length);
+        });
+    }
+
+    dragfunctions(p, i) {
+        const startBox = this.startpoint.nativeElement.getBBox();
+        const endBox = this.endpoint.nativeElement.getBBox();
+        const start = [startBox.x + startBox.width / 2, startBox.y + startBox.height / 2];
+        const end = [endBox.x + endBox.width / 2, endBox.y + endBox.height / 2];
+
+        return {
+          dragstarted: () => {
+          },
+          dragged: () => {
+            if(this.draggable) {
+                const x = d3.event.x;
+                const y = d3.event.y;
+                const point = [x,1000];
+
+                const a1 = Math.max(0, Math.PI / 2 - this.getAngle(end, start, point));
+                const a2 = Math.max(0, Math.PI / 2 - this.getAngle(start, end, point));
+
+                this.dotsAt[i] = a1 / (a1 + a2);
+                this.pointMoved.emit(this.dotsAt[i]);
+            }
+          },
+          dragended: () => {
+            
+          }
+        };
+    }
+
+    getAngle(x, y, z) {
+        const a = [z[0] - y[0], z[1] - y[1]];
+        const b = [x[0] - y[0], x[1] - y[1]];
+        const al = Math.sqrt(Math.pow(a[0],2)+Math.pow(a[1],2));
+        const bl = Math.sqrt(Math.pow(b[0],2)+Math.pow(b[1],2));
+        const dotproduct = a[0] * b[0] + a[1] * b[1];
+        return Math.acos(dotproduct / (al * bl));
+    }
+}
\ No newline at end of file
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/components/elementlabel.component.css b/gui-js/libs/ui-components/src/lib/svg-canvas/components/elementlabel.component.css
new file mode 100644
index 000000000..ea1fb6f17
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/components/elementlabel.component.css
@@ -0,0 +1,24 @@
+:host {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    overflow: visible;
+}
+
+.namelabel, .descriptionlabel, .valuelabel {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    text-align: center;
+}
+
+.descriptionlabel {
+    flex-grow: 6;
+}
\ No newline at end of file
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/components/elementlabel.component.html b/gui-js/libs/ui-components/src/lib/svg-canvas/components/elementlabel.component.html
new file mode 100644
index 000000000..d5da3e59b
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/components/elementlabel.component.html
@@ -0,0 +1,14 @@
+<div class="latex" latex [equation]="data.symbol" [style.fontSize]="fontSize">
+</div>
+
+<div *ngIf="lines > 1" class="valuelabel" [style.fontSize]="fontSize">
+    {{data.value.toFixed(4)}}
+</div>
+
+<div *ngIf="lines > 2" class="namelabel" [style.fontSize]="fontSize">
+    {{data.name}}
+</div>
+
+<div *ngIf="lines > 3" class="descriptionlabel" [style.fontSize]="fontSize">
+    {{data.description}}
+</div>
\ No newline at end of file
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/components/elementlabel.component.ts b/gui-js/libs/ui-components/src/lib/svg-canvas/components/elementlabel.component.ts
new file mode 100644
index 000000000..f6cda41c4
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/components/elementlabel.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { LatexDirective } from '../../directives/latex.directive';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'elementlabel',
+    templateUrl: './elementlabel.component.html',
+    styleUrls: ['./elementlabel.component.css'],
+    standalone: true,
+    imports: [LatexDirective, CommonModule]
+  })
+  export class ElementLabelComponent {
+    @Input()
+    data;
+
+    @Input()
+    lines: number;
+
+    get fontSize() {
+        return `${20 / this.lines}px`;
+    }
+  }
\ No newline at end of file
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/constants/svg-constants.ts b/gui-js/libs/ui-components/src/lib/svg-canvas/constants/svg-constants.ts
new file mode 100644
index 000000000..2a139f36a
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/constants/svg-constants.ts
@@ -0,0 +1,177 @@
+import { Dimensions } from '../classes/dimensions';
+
+export class SvgVariableTypes {
+    public static constant = {
+        name: 'constant',
+        points: (x: number, y: number, width: number, height: number) => {
+            return `${x-width},${y-height} ${x+width*0.75},${y-height} ${x+width},${y} ${x+width*0.75},${y+height} ${x-width},${y+height}`;
+        },
+        connectors: [
+            {
+            type: 'out',
+            position: (x: number, y: number, width: number, height: number) => [x+width,y,0]
+            }
+        ],
+        getDimensions(length: number) {
+            const lengthPart = length / 12;
+            return {
+                length: length,
+                boundingbox: [-4 * lengthPart,-25,8 * lengthPart,50],
+                labelbox: [-4 * lengthPart,-22.5,6 * lengthPart,45],
+                valuebox: [lengthPart * 1,-20,lengthPart * 6,25],
+                exponentbox: [lengthPart * 1,5,lengthPart * 6,25],
+                valueline: [[-4 * lengthPart,-25],[3 * lengthPart,-25]]
+            };
+        },
+        stroke: '#1c19d3',
+        class: {'constant': true}
+    };
+
+    public static flow = {
+        name: 'flow',
+        points: (x: number, y: number, width: number, height: number) => {
+            return `${x-width},${y-height} ${x+width*0.75},${y-height} ${x+width},${y} ${x+width*0.75},${y+height} ${x-width},${y+height} ${x-width*0.75},${y}`;
+        },
+        connectors: [
+            {
+            type: 'out',
+            position: (x: number, y: number, width: number, height: number) => [x+width,y,0]
+            },
+            {
+            type: 'in',
+            position: (x: number, y: number, width: number, height: number) => [x-width*0.75,y,Math.PI]
+            }
+        ],
+        getDimensions(length: number) {
+            const lengthPart = length / 12;
+            return {
+                length: length,
+                boundingbox: [-lengthPart * 4,-25,lengthPart * 8,50],
+                labelbox: [-lengthPart * 4,-22.5,lengthPart * 6,45],
+                valuebox: [lengthPart * 1,-20,lengthPart * 6,25],
+                exponentbox: [lengthPart * 1,5,lengthPart * 6,25],
+                valueline: [[-lengthPart * 4,-25],[lengthPart * 3,-25]]
+            };
+        },
+        stroke: '#d32519',
+        class: {'variable': true}
+        };
+    public static stock = {
+        name: 'stock',
+        points: (x: number, y: number, width: number, height: number) => {
+            return `${x-width},${y-height} ${x+width*0.75},${y-height} ${x+width},${y} ${x+width*0.75},${y+height} ${x-width},${y+height}`;
+        },
+        connectors: [
+            {
+            type: 'out',
+            position: (x: number, y: number, width: number, height: number) => [x+width,y,0]
+            },
+            {
+            type: 'in',
+            position: (x: number, y: number, width: number, height: number) => [x-width,y,Math.PI]
+            }
+        ],
+        getDimensions(length: number) {
+            const lengthPart = length / 12;
+            return {
+                length: length,
+                boundingbox: [-lengthPart * 4,-25,lengthPart * 8,50],
+                labelbox: [-lengthPart * 4,-22.5,lengthPart * 6,45],
+                valuebox: [lengthPart * 1,-20,lengthPart * 6,25],
+                exponentbox: [lengthPart * 1,5,lengthPart * 6,25],
+                valueline: [[-lengthPart * 4,-25],[lengthPart * 3,-25]]
+            };
+        },
+        stroke: '#d32519',
+        class: {'variable': true}
+        };
+        
+    public static parameter = {
+        name: 'parameter',
+        points: (x: number, y: number, width: number, height: number) => {
+            return `${x-width},${y-height} ${x+width*0.75},${y-height} ${x+width},${y} ${x+width*0.75},${y+height} ${x-width},${y+height}`;
+        },
+        connectors: [
+            {
+            type: 'out',
+            position: (x: number, y: number, width: number, height: number) => [x+width,y,0]
+            }
+        ],
+        getDimensions(length: number) {
+            const lengthPart = length / 12;
+            return {
+                length: length,
+                boundingbox: [-4 * lengthPart,-25,8 * lengthPart,50],
+                labelbox: [-4 * lengthPart,-22.5,6 * lengthPart,45],
+                valuebox: [lengthPart * 1,-20,lengthPart * 6,25],
+                exponentbox: [lengthPart * 1,5,lengthPart * 6,25],
+                valueline: [[-4 * lengthPart,-25],[3 * lengthPart,-25]]
+            };
+        },
+        stroke: '#1c19d3',
+        class: {'constant': true}
+    };
+
+    public static operator = {
+        name: 'operator',
+        points: (x: number, y: number, width: number, height: number) => {
+            return `${x-width},${y-height} ${x+width},${y} ${x-width},${y+height}`;
+        },
+        connectors: [
+            {
+            type: 'out',
+            position: (x: number, y: number, width: number, height: number) => [x+width,y,0]
+            },
+            {
+            type: 'in',
+            position: (x: number, y: number, width: number, height: number) => [x-width,y-height,Math.PI]
+            },
+            {
+            type: 'in',
+            position: (x: number, y: number, width: number, height: number) => [x-width,y+height,Math.PI]
+            }
+        ],
+        getDimensions(length: number) {
+            const lengthPart = length / 12;
+            return {
+                length: length,
+                boundingbox: [-lengthPart * 2,-25,lengthPart * 4,50],
+                labelbox: [-lengthPart * 2,-22.5,lengthPart * 2,45]
+            };
+        },
+        stroke: '#19d3a2',
+        class: {'greenthing': true}
+    };
+}
+
+export class SvgCanvasHelper {
+    static estimateVisibleLatex(latex) {
+        let clean = latex;
+
+        // 1. Remove spacing commands (e.g., \quad, \;, \,)
+        clean = clean.replace(/\\[,;!\s]|\\quad|\\qquad/g, '');
+
+        // 2. Remove formatting wrappers but keep their contents (e.g., \mathbf{x} -> x)
+        clean = clean.replace(/\\(text|mathrm|mathbf|mathit|mathsf)\s*{([^}]*)}/g, '$2');
+
+        // 3. Replace known single-character macros with a placeholder character (e.g., \alpha -> a)
+        // This matches a backslash followed by letters
+        clean = clean.replace(/\\[a-zA-Z]+/g, 'X');
+
+        // 4. Remove structural characters that aren't printed (curly braces, alignment tabs)
+        clean = clean.replace(/[{}_^&]/g, '');
+
+        // 5. Remove whitespace
+        clean = clean.replace(/\s+/g, '');
+
+        return clean.length;
+    }
+
+    static createData(template) {
+      const d = Object.assign({}, template);
+      d.connectors = d.type.connectors.map(c => Object.assign({},c,{data: d}));
+      d.actualLength = Math.max(100, SvgCanvasHelper.estimateVisibleLatex(template.symbol) * 15) + 120;
+      d.dimensions = d.type.getDimensions(d.actualLength);
+      return d;
+    }
+}
\ No newline at end of file
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/dialogs/editvariabledialog.component.css b/gui-js/libs/ui-components/src/lib/svg-canvas/dialogs/editvariabledialog.component.css
new file mode 100644
index 000000000..c1259abef
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/dialogs/editvariabledialog.component.css
@@ -0,0 +1,133 @@
+.modal-container {
+    width: 40vw;
+}
+
+h1[mat-dialog-title] {
+    padding-left: 57px;
+}
+
+.select-container {
+    display: grid;
+    grid-template-columns: 20% 70% 10%;
+    grid-template-areas: 
+    'symbollabel symbolinput'
+    'latexlabel latexdisplay'
+    'valuelabel valueinput'
+    'minimumlabel minimuminput'
+    'maximumlabel maximuminput'
+    'namelabel nameinput'
+    'descriptionlabel descriptioninput';
+}
+
+mat-select {
+    background-color: #eaf2ff;
+}
+
+.symbolinput {
+    grid-area: symbolinput;
+    height: 35px;
+    margin-top: 8px !important;
+    margin-right: -18px;
+    padding-left: 10px;
+}
+
+.symbollabel {
+    text-align: right;
+    grid-area: symbollabel;
+}
+
+.descriptioninput {
+    grid-area: descriptioninput;
+    height: 100px;
+    margin-top: 8px !important;
+    margin-right: -18px;
+    padding-left: 10px;
+}
+
+.descriptionlabel {
+    text-align: right;
+    grid-area: descriptionlabel;
+}
+
+.latexlabel {
+    text-align: right;
+    grid-area: latexlabel;
+}
+
+.latexdisplay {
+    grid-area: latexdisplay;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.valueinput {
+    grid-area: valueinput;
+    height: 35px;
+    margin-top: 8px !important;
+    margin-right: -18px;
+    padding-left: 10px;
+}
+
+.valuelabel {
+    text-align: right;
+    grid-area: valuelabel;
+}
+
+.minimuminput {
+    grid-area: minimuminput;
+    height: 35px;
+    margin-top: 8px !important;
+    margin-right: -18px;
+    padding-left: 10px;
+}
+
+.minimumlabel {
+    text-align: right;
+    grid-area: minimumlabel;
+}
+
+.maximuminput {
+    grid-area: maximuminput;
+    height: 35px;
+    margin-top: 8px !important;
+    margin-right: -18px;
+    padding-left: 10px;
+}
+
+.maximumlabel {
+    text-align: right;
+    grid-area: maximumlabel;
+}
+
+.nameinput {
+    grid-area: nameinput;
+    height: 35px;
+    margin-top: 8px !important;
+    margin-right: -18px;
+    padding-left: 10px;
+}
+
+.namelabel {
+    text-align: right;
+    grid-area: namelabel;
+}
+
+.dialog-actions {
+    flex-direction: row;
+    justify-content: end;
+    padding-right: 57px;
+}
+
+.dialog-actions-gap {
+    flex: 1;
+}
+
+.dialog-actions-button {
+    flex: 0 0 100px;
+}
+
+.select-container > .selectlabel {
+    margin: 10px;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/dialogs/editvariabledialog.component.html b/gui-js/libs/ui-components/src/lib/svg-canvas/dialogs/editvariabledialog.component.html
new file mode 100644
index 000000000..ccd49eb3f
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/dialogs/editvariabledialog.component.html
@@ -0,0 +1,41 @@
+<div class="modal-container">
+    <h1 mat-dialog-title>Edit variable...</h1>
+    <div mat-dialog-content>
+        <div class="select-container">
+            <div class="symbollabel selectlabel">Symbol:</div>
+
+            <input class="symbolinput" matInput placeholder="Symbol..." [(ngModel)]="result.symbol">
+
+            <div class="latexlabel selectlabel">LaTeX:</div>
+
+            <div class="latexdisplay" latex [equation]="result.symbol"></div>
+
+            <ng-container *ngIf="['constant', 'stock'].includes(result.type)">
+              <div class="valuelabel selectlabel">{{valueTag}}:</div>
+
+              <mat-form-field class="valueinput"><input type="number" matInput [(ngModel)]="result.value"></mat-form-field>
+
+              <div class="minimumlabel selectlabel">Minimum:</div>
+
+              <mat-form-field class="minimuminput"><input type="number" matInput [(ngModel)]="result.minimum"></mat-form-field>
+
+              <div class="maximumlabel selectlabel">Maximum:</div>
+
+              <mat-form-field class="maximuminput"><input type="number" matInput [(ngModel)]="result.maximum"></mat-form-field>
+</ng-container>
+
+            <div class="namelabel selectlabel">Name:</div>
+
+            <mat-form-field class="nameinput"><input matInput [(ngModel)]="result.name"></mat-form-field>
+
+            <div class="descriptionlabel selectlabel">Description:</div>
+
+            <mat-form-field class="descriptioninput"><textarea matInput [(ngModel)]="result.description"></textarea></mat-form-field>
+</div>
+    </div>
+    <div class="dialog-actions" mat-dialog-actions>
+        <div class="dialog-actions-gap"></div>
+        <button mat-button (click)="onCancelClick()">Cancel</button>
+        <button mat-button (click)="onOKClick()" cdkFocusInitial>Ok</button>
+    </div>
+</div>
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/dialogs/editvariabledialog.component.ts b/gui-js/libs/ui-components/src/lib/svg-canvas/dialogs/editvariabledialog.component.ts
new file mode 100644
index 000000000..6bd263a2a
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/dialogs/editvariabledialog.component.ts
@@ -0,0 +1,45 @@
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import { Inject, Component, ViewEncapsulation } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatFormField } from '@angular/material/form-field';
+import { LatexDirective } from '../../directives/latex.directive';
+
+export class EditVariableDialogData {
+  name: string;
+  symbol: string;
+  description: string;
+  type: string;
+  value?: number;
+  minimum?: number;
+  maximum?: number;
+}
+
+@Component({
+    selector: 'edit-variable-dialog',
+    templateUrl: './editvariabledialog.component.html',
+    styleUrls: ['./editvariabledialog.component.css'],
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+  imports: [FormsModule, MatFormField, LatexDirective]
+  })
+  export class EditVariableDialog {
+    result: EditVariableDialogData;
+
+    get valueTag() {
+      return this.result.type === 'constant' ? 'Value' : 'Initial value';
+    }
+
+    constructor(public dialog: MatDialog,
+      public dialogRef: MatDialogRef<EditVariableDialog>,
+      @Inject(MAT_DIALOG_DATA) public data: EditVariableDialogData) {
+        this.result = data;
+      }
+  
+    onCancelClick(): void {
+      this.dialogRef.close();
+    }
+
+    onOKClick(): void {
+      this.dialogRef.close(this.result);
+    }
+  }
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/directives/connector.directive.ts b/gui-js/libs/ui-components/src/lib/svg-canvas/directives/connector.directive.ts
new file mode 100644
index 000000000..1a5ddd619
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/directives/connector.directive.ts
@@ -0,0 +1,20 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[connector]'
+})
+export class ConnectorDirective {
+  @HostListener('mouseenter', ['$event'])
+  mouseenter(event: any) {
+    this.el.nativeElement.style.fillOpacity = '0.5';
+  }
+
+  @HostListener('mouseout', ['$event'])
+  mouseout(event: any) {
+    this.el.nativeElement.style.fillOpacity = '0';
+  }
+
+  constructor(private el: ElementRef<HTMLElement>) { 
+    el.nativeElement.style.fillOpacity = '0';
+  }
+}
\ No newline at end of file
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/directives/dragdrop.directive.ts b/gui-js/libs/ui-components/src/lib/svg-canvas/directives/dragdrop.directive.ts
new file mode 100644
index 000000000..b0a0b1752
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/directives/dragdrop.directive.ts
@@ -0,0 +1,21 @@
+import { Directive, ElementRef, Input } from '@angular/core';
+import * as d3 from 'd3';
+
+@Directive({
+  selector: '[dragdrop]'
+})
+export class DragdropDirective {
+    @Input()
+    set dragfunctions(df) {
+      let obj = d3.select(this.el.nativeElement);
+
+        obj.call(<any>d3.drag()
+            .on('start', (d, e) => df.dragstarted(d))
+            .on('drag', (d, e) => df.dragged(d))
+            .on('end', (d, e) => df.dragended(d)));
+    }
+
+    constructor(private el: ElementRef<HTMLElement>) { 
+    
+    }
+}
\ No newline at end of file
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas-demo.component.css b/gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas-demo.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas-demo.component.html b/gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas-demo.component.html
new file mode 100644
index 000000000..cd9251990
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas-demo.component.html
@@ -0,0 +1 @@
+<svg-canvas [parkedData]="parkedData" [unparkedData]="unparkedData"></svg-canvas>
\ No newline at end of file
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas-demo.component.ts b/gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas-demo.component.ts
new file mode 100644
index 000000000..92f4e4a6e
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas-demo.component.ts
@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { SvgCanvasComponent } from './svg-canvas.component';
+import { SvgCanvasHelper, SvgVariableTypes } from './constants/svg-constants';
+
+@Component({
+  selector: 'svg-canvas-demo',
+  templateUrl: './svg-canvas-demo.component.html',
+  styleUrls: ['./svg-canvas-demo.component.css'],
+  standalone: true,
+  imports: [SvgCanvasComponent]
+})
+export class SvgCanvasDemoComponent {
+    parkedData = [
+      { symbol: 'C_{const}', name: 'Constant', description: 'A constant has a fixed value that does not change over time, unless manipulated by the user.', type: SvgVariableTypes.constant },
+      { symbol: 'V_{stock}', name: 'Stock Variable', description: 'A stock variable has a value that can be approximated based on the slope defined by its input.', type: SvgVariableTypes.stock }, 
+      { symbol: 'V_{flow}', name: 'Flow Variable', description: 'A flow variable has a value that is derived directly from its input.', type: SvgVariableTypes.flow }, 
+      { symbol: '\\times', name: 'Times', type: SvgVariableTypes.operator }, 
+      { symbol: '+', name: 'Plus', type: SvgVariableTypes.operator },
+      { symbol: '-', name: 'Minus', type: SvgVariableTypes.operator },
+      { symbol: '\\:/', name: 'Divide', type: SvgVariableTypes.operator }
+    ].map((template: any, i: number) => {
+      const d = SvgCanvasHelper.createData(template);
+      d.x = 60 + 120 * i;
+      d.y = 40;
+      d.rotation = 0;
+      d.value = 1;
+      d.minimum = 0.5;
+      d.maximum = 2;
+      return d;
+    });
+
+    unparkedData: any[] = [];
+}
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas.component.css b/gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas.component.css
new file mode 100644
index 000000000..79d27b668
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas.component.css
@@ -0,0 +1,71 @@
+:host {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.mycanvas {
+    height: 100%;
+    flex: 1;
+}
+
+.toolbar {
+    fill: rgb(207, 224, 235);
+    fill-opacity: 0.75;
+}
+
+.greenthing {
+    fill: #19d3a2;
+    fill-opacity: 0.3;
+    stroke-width: 2;
+}
+
+.constant {
+    fill: #1c19d3;
+    fill-opacity: 0.3;
+    stroke-width: 2;
+}
+
+.variable {
+    fill: #d32519;
+    fill-opacity: 0.3;
+    stroke-width: 2;
+}
+
+.mainsvg {
+    z-index: 0;
+}
+
+.latex {
+    overflow: visible;
+}
+
+.connection {
+    stroke: black;
+    fill-opacity: 0;
+}
+
+.valueline {
+    opacity: 0.5;
+}
+
+.instructions {
+    position: absolute;
+    background-color: rgb(188, 211, 224);
+    top: 100px;
+    right: 10px;
+    padding: 10px;
+    opacity: 0.67;
+}
+
+.instructions > div {
+    margin: 5px 10px;
+}
+
+.questionmark {
+    background-color: rgb(188, 211, 224);
+    color: rgb(0, 110, 173);
+    padding: 5px;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas.component.html b/gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas.component.html
new file mode 100644
index 000000000..87533bcd6
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas.component.html
@@ -0,0 +1,47 @@
+<svg class="mainsvg" [attr.height]="height" [attr.width]="width">
+    <g d3line *ngIf="lineend" class="connection" [start]="scaleAdjust(getConnectorPos(clickedConnector))" [end]="lineend"></g>
+
+    <g *ngFor="let l of links">
+        <g d3line *ngIf="!l.in.data.hidden && !l.out.data.hidden" class="connection" [start]="scaleAdjust(getConnectorPos(l.in))" [end]="scaleAdjust(getConnectorPos(l.out))">
+        </g>
+    </g>
+    <ng-container *ngFor="let d of unparkedData">
+        <g *ngIf="!d.hidden" dragdrop [dragfunctions]="dragfunctions(d)" (click)="elementClicked($event, d)" (contextmenu)="elementRightClicked($event, d)"
+            [attr.transform]="'translate(' + xScale(d.x) + ' ' + yScale(d.y) + ') scale(' + xFactor + ' ' + yFactor + ')  rotate(' + toDegrees(d.rotation) + ')'">
+            <polygon [ngClass]="d.type.class" [attr.stroke]="d.type.stroke" [attr.points]="d.type.points(0, 0, d.dimensions.boundingbox[2] / 2, d.dimensions.boundingbox[3] / 2)"></polygon>
+
+            <g d3line *ngIf="showValuelines && d.dimensions.valueline" #valueLine class="valueline" [start]="d.dimensions.valueline[0]" [end]="d.dimensions.valueline[1]" [dotsAt]="[getRelativeValue(d)]"
+            [invisibleLine]="true" [draggable]="d.type.name !== 'flow'" [style.stroke]="d.type.stroke" [style.fill]="d.type.stroke" (pointMoved)="sliderMoved($event, d)"></g>
+
+            <foreignObject *ngIf="d.dimensions.labelbox" [attr.x]="d.dimensions.labelbox[0]" [attr.y]="d.dimensions.labelbox[1]" [attr.width]="d.dimensions.labelbox[2]" [attr.height]="d.dimensions.labelbox[3]"
+            [attr.transform]="(isUpsideDown(d) ? 'rotate(180)' : '')">
+                <elementlabel [data]="d" [lines]="d.type.name === 'operator' ? getLines(yFactor) : 0"></elementlabel>
+            </foreignObject>
+
+            <foreignObject *ngIf="d.dimensions.valuebox" [attr.x]="d.dimensions.valuebox[0]" [attr.y]="d.dimensions.valuebox[1]" [attr.width]="d.dimensions.valuebox[2]" [attr.height]="d.dimensions.valuebox[3]"
+            [attr.transform]="(isUpsideDown(d) ? 'rotate(180)' : '')">
+                <div class="latex" latex [equation]="roundValue(d.value)" [style.fontSize]="'12px'"></div>
+            </foreignObject>
+
+            <foreignObject *ngIf="d.dimensions.exponentbox && d.exponent != 0" [attr.x]="d.dimensions.exponentbox[0]" [attr.y]="d.dimensions.exponentbox[1]" [attr.width]="d.dimensions.exponentbox[2]" [attr.height]="d.dimensions.exponentbox[3]"
+            [attr.transform]="(isUpsideDown(d) ? 'rotate(180)' : '')">
+                <div class="latex" latex [equation]="exponentEquation(d.exponent)" [style.fontSize]="'12px'"></div>
+            </foreignObject>
+
+            <g *ngFor="let c of showConnectors ? d.connectors : []">
+                <circle (mousedown)="connectorClicked(c, $event)" (mouseup)="connectorClicked(c, $event)" connector r="7" 
+                [attr.cx]="c.position(0, 0, d.dimensions.boundingbox[2] / 2, d.dimensions.boundingbox[3] / 2)[0]" [attr.cy]="c.position(0, 0, d.dimensions.boundingbox[2] / 2, d.dimensions.boundingbox[3] / 2)[1]"
+                [style.fill]="c.type === 'out' ? 'green' : 'blue'"></circle>
+            </g>
+        </g>
+    </ng-container>
+
+    <rect *ngIf="parkedData.length > 0" class="toolbar" [attr.width]="width" height="80"></rect>
+
+    <g *ngFor="let d of parkedData" dragdrop [dragfunctions]="dragfunctions(d)">
+        <polygon [ngClass]="d.type.class" [attr.stroke]="d.type.stroke" [attr.points]="d.type.points(d.x, d.y, d.dimensions.boundingbox[2] / 2, d.dimensions.boundingbox[3] / 2)"></polygon>
+
+        <foreignObject class="latex" latex [equation]="d.symbol" [attr.x]="d.x - 22" [attr.y]="d.y - 9" width="60" height="20">
+        </foreignObject>
+    </g>
+</svg>
diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas.component.ts b/gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas.component.ts
new file mode 100644
index 000000000..6df5a778f
--- /dev/null
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/svg-canvas.component.ts
@@ -0,0 +1,668 @@
+import { Component, AfterViewInit, ElementRef, HostListener, Input } from '@angular/core';
+import * as d3 from 'd3';
+import { DataPoint } from './classes/datapoint';
+import { EditVariableDialog, EditVariableDialogData } from './dialogs/editvariabledialog.component';
+import { MatDialog } from '@angular/material/dialog';
+import flatMap from 'lodash/flatMap';
+import { AsyncPipe, CommonModule, formatNumber } from '@angular/common';
+import { MatFormField } from '@angular/material/input';
+import { LatexDirective } from '../directives/latex.directive';
+import { DragdropDirective } from './directives/dragdrop.directive';
+import { D3LineComponent } from './components/d3line.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ElementLabelComponent } from './components/elementlabel.component';
+import { NgxGraphModule } from '@swimlane/ngx-graph';
+import { SvgCanvasHelper } from './constants/svg-constants';
+
+@Component({
+  selector: 'svg-canvas',
+  templateUrl: './svg-canvas.component.html',
+  styleUrls: ['./svg-canvas.component.css'],
+  standalone: true,
+  imports: [AsyncPipe, CommonModule, MatFormField, LatexDirective, DragdropDirective, D3LineComponent, FormsModule, ReactiveFormsModule, ElementLabelComponent, NgxGraphModule]
+})
+export class SvgCanvasComponent implements AfterViewInit {
+  @HostListener('window:resize', ['$event'])
+	onResize(event) {
+    this.setDimensions();
+	}
+
+  nodes;
+
+  width: number;
+  height: number;
+  simulation;
+
+  @Input()
+  parkedData: any[] = [];
+
+  @Input()
+  unparkedData: any[] = [];
+
+  @Input()
+  enableScroll = true;
+
+  @Input()
+  showConnectors = true;
+
+  @Input()
+  showValuelines = true;
+
+  @Input()
+  zoom = 1;
+
+  rectCollideForce;
+
+  xScale;
+  yScale;
+  zScale;
+  storedXScale;
+  storedYScale;
+
+  draggedElement;
+
+  rotationMouseX;
+
+  screenmovestart: number[];
+
+  clickedConnector;
+  lineend: [number, number];
+
+  links = [];
+
+  mouseX: number;
+  mouseY: number;
+
+  controlDown = false;
+
+  layoutType = 'spread';
+
+  factorLevels = [1.5, 3];
+
+  getLines(yFactor: number) {
+    return Math.min(Math.ceil((yFactor + 0.75) / 1.5), 4);
+  }
+
+  roundValue(value: number) {
+    return formatNumber(value, 'en-US', '1.0-2');
+  }
+
+  exponentEquation(exponent: number) {
+    return `\\times10^{${exponent}}`;
+  }
+
+  isUpsideDown(d) {
+    if(d.type.name === 'operator') return false;
+    const quarterAdded = d.rotation + Math.PI * 0.5;
+    return this.posMod(quarterAdded, Math.PI * 2) > Math.PI;
+  }
+
+  posMod(radians, div) {
+    let mod = radians % div;
+    while(mod < 0) mod += div;
+    return mod;
+  }
+
+  get xFactor() {
+    const range = this.xScale.range();
+    return (range[1] - range[0]) / this.width;
+  }
+
+  get yFactor() {
+    const range = this.yScale.range();
+    return (range[1] - range[0]) / this.height;
+  }
+
+  getRelativeValue(d, bounded = true) {
+    const relValue = (d.value - d.minimum) / (d.maximum - d.minimum);
+    if(!bounded) return relValue;
+    return Math.max(0, Math.min(1, relValue));
+  }
+
+  setRelativeValue(d, relativeValue: number) {
+    d.value = d.minimum + (d.maximum - d.minimum) * relativeValue;
+  }
+
+  types: any[];
+
+  constructor(private el: ElementRef<HTMLElement>, public dialog: MatDialog) {
+    
+  }
+
+  setDimensions(width?: number) {
+    this.width = width || this.el.nativeElement.clientWidth;
+    this.height = this.el.nativeElement.clientHeight;
+
+    this.xScale = d3.scaleLinear()
+    .domain([0, this.width])
+    .range([0, this.width * this.zoom]);
+
+    this.yScale = d3.scaleLinear()
+    .domain([0, this.height])
+    .range([0, this.height * this.zoom]);
+
+    this.zScale = d3.scaleLinear()
+    .domain([0, 0])
+    .range([0, 0]);
+  }
+
+  ngAfterViewInit() {
+    this.setDimensions();
+
+    /*this.rectCollideForce = this.rectCollide();
+    this.rectCollideForce.strength(3);
+
+    this.simulation = d3.forceSimulation()
+    .force('rectcollide', this.rectCollideForce)
+    .nodes(this.unparkedData);*/
+  }
+
+  setForces() {
+    this.simulation
+    ?.force('anchorx', d3.forceX().x((d: DataPoint) => d.anchorx || d.x).strength((d: DataPoint) => d.anchorx ? 15 : 0))
+    .force('anchory', d3.forceY().y((d: DataPoint) => d.anchory || d.y).strength((d: DataPoint) => d.anchory ? 15 : 0))
+  }
+
+  dragfunctions(d) {
+    return {
+      dragstarted: () => {
+        if(this.clickedConnector) return;
+
+        if(this.layoutType === 'flat') {
+          this.spreadLayout();
+          this.flattenLayout(d, 2);
+          return;
+        }
+
+        this.draggedElement = d;
+        if(this.rotationMouseX) this.rotationMouseX = this.mouseX;
+
+        if (!d3.event.active) this.simulation?.alphaTarget(.03).restart();
+        if(this.parkedData.includes(d)) {
+          const clone = SvgCanvasHelper.createData(d);
+          this.parkedData.push(clone);
+        }
+        this.setAnchor(d);
+
+        this.rectCollideForce.sizeModifier(1.1);
+      },
+      dragged: () => {
+        if(this.clickedConnector || this.layoutType !== 'spread') return;
+
+        const parked = this.parkedData.includes(d);
+        
+        if(parked) {
+          d.fx = d3.event.x;
+          d.fy = d3.event.y;
+
+          d.x = d.fx;
+          d.y = d.fy;
+        } else {
+          if(this.rotationMouseX) {
+            if(d.startRotation === undefined) d.startRotation = d.rotation;
+            d.rotation = this.posMod(d.startRotation + (d3.event.x - this.rotationMouseX) / 100, Math.PI * 2);
+            const divider = Math.PI / 4;
+            const treshold = Math.PI / 32;
+            const diff = this.posMod(d.rotation, divider);
+            if(diff < treshold) d.rotation -= diff;
+            else if(diff > (divider - treshold)) d.rotation += divider - diff;
+          } else {
+            d.fx = this.xScale.invert(d3.event.x);
+            d.fy = this.yScale.invert(d3.event.y);
+          }
+        }
+        
+        if(parked && d.y > 80 + d.dimensions.boundingbox[1] + d.dimensions.boundingbox[3]) {
+          this.unparkedData.push(d);
+          d.fx = this.xScale.invert(d3.event.x);
+          d.fy = this.yScale.invert(d3.event.y);
+          this.parkedData = this.parkedData.filter(pd => pd !== d);
+          this.simulation?.nodes(this.unparkedData);
+        }
+      },
+      dragended: () => {
+        if(this.clickedConnector || this.layoutType !== 'spread') return;
+
+        d.startRotation = undefined;
+
+        this.draggedElement = null;
+
+        if (!d3.event.active) this.simulation?.alphaTarget(.03);
+
+        // remove if dragged onto the toolbar
+        this.parkedData = this.parkedData.filter(pd => pd !== d);
+
+        this.setAnchor(d);
+
+        setTimeout(() => {
+          this.setAnchor(d);
+
+          this.rectCollideForce.sizeModifier(1);
+        }, 100);
+      }
+    };
+  }
+
+  showParked(d){
+    console.info(d);
+    return '';
+  }
+
+  setAnchor(d) {
+    this.unparkedData.forEach(n => {
+      n.anchorx = n.x;
+      n.anchory = n.y;
+    });
+    d.fx = null;
+    d.fy = null;
+    this.setForces();
+  }
+
+  rectCollide() {
+    var nodes;
+    var strength = 1
+    var iterations = 1
+    var sizeModifier = 1;
+
+    const adjustSize = (boundingbox, rotation) => {
+      const hp = [boundingbox[2] / 2, boundingbox[3] / 2];
+      const rotated1 = this.rotatePoint(hp, rotation);
+      const rotated2 = this.rotatePoint([hp[0],-hp[1]], rotation);
+      const output = [Math.max(Math.abs(rotated1[0]) + Math.abs(rotated2[0])) * sizeModifier, Math.max(Math.abs(rotated1[1]) + Math.abs(rotated2[1])) * sizeModifier];
+      return output;
+    };
+
+    function force() {
+        var node, size, xi, yi
+        var i = -1
+        while (++i < iterations) { iterate() }
+
+        
+
+        function iterate() {
+            var j = -1
+            var tree = d3.quadtree(nodes, xCenter, yCenter).visitAfter(prepare)
+
+            while (++j < nodes.length) {
+                node = nodes[j]
+                size = adjustSize(node.type.boundingbox, node.rotation)
+                xi = xCenter(node)
+                yi = yCenter(node)
+
+                tree.visit(apply)
+            }
+        }
+
+        function apply(quad, x0, y0, x1, y1) {
+            var data = quad.data
+            var xSize = (size[0] + quad.size[0]) / 2
+            var ySize = (size[1] + quad.size[1]) / 2
+            if (data) {
+                if (data.index <= node.index) { return }
+
+                var x = xi - xCenter(data)
+                var y = yi - yCenter(data)
+                var xd = Math.abs(x) - xSize
+                var yd = Math.abs(y) - ySize
+
+                if (xd < 0 && yd < 0) {
+                    var l = Math.sqrt(x * x + y * y)
+                    var mass = data.type.boundingbox[2] * data.type.boundingbox[3]
+                    var m = mass / (mass + mass)
+
+                    if (Math.abs(xd) < Math.abs(yd)) {
+                        node.vx -= (x *= xd / l * strength) * m
+                        data.vx += x * (1 - m)
+                    } else {
+                        node.vy -= (y *= yd / l * strength) * m
+                        data.vy += y * (1 - m)
+                    }
+                }
+            }
+
+            return x0 > xi + xSize || y0 > yi + ySize ||
+                   x1 < xi - xSize || y1 < yi - ySize
+        }
+
+        function prepare(quad) {
+            if (quad.data) {
+                quad.size = adjustSize(quad.data.type.boundingbox, quad.data.rotation)
+            } else {
+                quad.size = [0, 0]
+                var i = -1
+                while (++i < 4) {
+                    if (quad[i] && quad[i].size) {
+                        quad.size[0] = Math.max(quad.size[0], quad[i].size[0])
+                        quad.size[1] = Math.max(quad.size[1], quad[i].size[1])
+                    }
+                }
+            }
+        }
+    }
+
+    function xCenter(d) { return d.x + d.vx }
+    function yCenter(d) { return d.y + d.vy }
+
+    force.initialize = function (_) {
+        nodes = _
+    }
+
+    force.sizeModifier = function (_) {
+        sizeModifier = _;
+    }
+
+    force.strength = function (_) {
+        return (arguments.length ? (strength = +_, force) : strength)
+    }
+
+    force.iterations = function (_) {
+        return (arguments.length ? (iterations = +_, force) : iterations)
+    }
+
+    return force
+  }
+
+  constant(_) {
+    return () => _;
+  }
+
+  @HostListener('mousewheel', ['$event'])
+  scroll(event: any) {
+    if(!this.enableScroll || this.layoutType === 'flat') return;
+
+    const wheelDelta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
+    const change = wheelDelta > 0 ? 1.1 : (1/1.1);
+    const xRange = this.xScale.range();
+    const oldXSize = xRange[1] - xRange[0];
+    const xSize = oldXSize * change;
+    const yRange = this.yScale.range();
+    const oldYSize = yRange[1] - yRange[0];
+    const ySize = oldYSize * change;
+    const newCenterX = oldXSize / 2 + xRange[0];
+    const newCenterY = oldYSize / 2 + yRange[0];
+
+    this.xScale.range([newCenterX - xSize / 2, newCenterX + xSize / 2]);
+    this.yScale.range([newCenterY - ySize / 2, newCenterY + ySize / 2]);
+  }
+
+  @HostListener('mousedown', ['$event'])
+  mousedown(event: any) {
+    this.mouseX = this.getMouseX(event);
+    this.mouseY = this.getMouseY(event);
+    if(event.button === 1) {
+      this.screenmovestart = [this.xScale(this.mouseX), this.yScale(this.mouseY)];
+    }
+    if(event.button === 2) {
+      if(this.layoutType === 'flat') {
+        this.spreadLayout();
+        return;
+      }
+      this.lineend = null;
+      this.clickedConnector = null;
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+  @HostListener('mousemove', ['$event'])
+  mousemove(event: any) {
+    this.mouseX = this.getMouseX(event);
+    this.mouseY = this.getMouseY(event);
+    if(this.screenmovestart) {
+      const newPos = [this.xScale(this.mouseX), this.yScale(this.mouseY)];
+      const xDiff = newPos[0] - this.screenmovestart[0];
+      const yDiff = newPos[1] - this.screenmovestart[1];
+      const xRange = this.xScale.range();
+      const yRange = this.yScale.range();
+      this.xScale.range([xRange[0] + xDiff, xRange[1] + xDiff]);
+      this.yScale.range([yRange[0] + yDiff, yRange[1] + yDiff]);
+      this.screenmovestart = [this.xScale(this.mouseX), this.yScale(this.mouseY)];
+    }
+    if(this.clickedConnector) {
+      this.lineend = [this.mouseX, this.mouseY];
+    }
+  }
+  @HostListener('mouseup', ['$event'])
+  mouseup(event: any) {
+    if(event.button === 1) {
+      this.screenmovestart = null;
+    }
+  }
+
+  @HostListener('document:keydown', ['$event'])
+  keydown(event: any) {
+    if(event.code.startsWith('Shift')) {
+      this.rotationMouseX = this.mouseX;
+    }
+    if(event.code.startsWith('Control')) {
+      this.controlDown = true;
+    }
+  }
+
+  @HostListener('document:keyup', ['$event'])
+  keyup(event: any) {
+    if(event.code.startsWith('Shift')) {
+      this.rotationMouseX = null;
+    }
+    if(event.code.startsWith('Control')) {
+      this.controlDown = false;
+    }
+  }
+
+  sliderMoved(event, d) {
+    this.setRelativeValue(d, event);
+  }
+
+  elementClicked(event, d) {
+    if(this.controlDown && this.layoutType === 'spread') {
+      this.flattenLayout(d, 2);
+    }
+    if(this.layoutType === 'flat') {
+      this.spreadLayout();
+      this.flattenLayout(d, 2);
+    }
+  }
+
+  elementRightClicked(event, d) {
+    if(d.type.name !== 'operator') {
+      const dialogRef = this.dialog.open(EditVariableDialog, {
+        data: <EditVariableDialogData>{
+          symbol: d.symbol,
+          name: d.name,
+          description: d.description,
+          type: d.type.name,
+          value: d.value,
+          minimum: d.minimum,
+          maximum: d.maximum
+        }
+      });
+
+      dialogRef.afterClosed().subscribe((result: EditVariableDialogData) => {
+        if(result) {
+          d.symbol = result.symbol;
+          d.name = result.name;
+          d.description = result.description;
+          if(['constant', 'stock'].includes(d.type.name)) {
+            d.value = result.value;
+            d.minimum = result.minimum;
+            d.maximum = result.maximum;
+          }
+        }
+      });
+    }
+  }
+
+  getConnectorPos(c) {
+    const points = c.position(0,0,(c.data.type.boundingbox[2] / 2), (c.data.type.boundingbox[3] / 2));
+    const rotated = this.rotatePoint(points, c.data.rotation);
+    return [rotated[0] + c.data.x, rotated[1] + c.data.y, points[2] + c.data.rotation];
+  }
+
+  rotatePoint(point, degrees) {
+    const x = point[0] * Math.cos(degrees) - point[1] * Math.sin(degrees);
+    const y = point[1] * Math.cos(degrees) + point[0] * Math.sin(degrees);
+    return [x, y];
+  }
+
+  connectorClicked(c, event) {
+    event.stopPropagation();
+
+    if(this.links.find(l => l.in === c || l.out === c)) return;
+
+    if(!this.clickedConnector) {
+      this.clickedConnector = c;
+    } else {
+      if(c.data === this.clickedConnector.data) return;
+      
+      if(this.clickedConnector.type === 'out' && c.type === 'in') {
+        this.links.push({
+          in: c,
+          out: this.clickedConnector
+        });
+      } else if(this.clickedConnector.type === 'in' && c.type === 'out') {
+        this.links.push({
+          in: this.clickedConnector,
+          out: c
+        });
+      } else {
+        return;
+      }
+      this.lineend = null;
+      this.clickedConnector = null;
+    }
+  }
+
+  scaleAdjust(points: number[]) {
+    const adjusted = points.slice();
+    adjusted[0] = this.xScale(points[0]);
+    adjusted[1] = this.yScale(points[1]);
+    adjusted[2] = this.zScale(points[2]);
+    return adjusted;
+  }
+
+  @HostListener('contextmenu', ['$event'])
+  onRightClick(event) {
+    event.preventDefault();
+  }
+
+  getMouseX(event) {
+    return event.x - this.el.nativeElement.offsetLeft;
+  }
+
+  getMouseY(event) {
+    return event.y - this.el.nativeElement.offsetTop;
+  }
+
+  toDegrees(radians: number) {
+    return (radians / (2 * Math.PI)) * 360;
+  }
+
+  flattenLayout(centerElement: DataPoint, depth: number) {
+    this.storedXScale = this.xScale;
+    this.storedYScale = this.yScale;
+
+    this.xScale = d3.scaleLinear()
+    .domain([0, this.width])
+    .range([0, this.width]);
+
+    this.yScale = d3.scaleLinear()
+    .domain([0, this.height])
+    .range([0, this.height]);
+
+    for(const d of this.unparkedData) {
+      d.canvasPosition = {};
+      d.canvasPosition.rotation = d.rotation;
+      this.setPosition(d.canvasPosition, d.x, d.y);
+      d.rotation = 0;
+      d.hidden = true;
+    }
+    
+    const root = this.createFlatNode(centerElement, depth + 1);
+
+    this.setPosition(centerElement, this.width / 2, this.height / 2);
+    centerElement.hidden = false;
+
+    let outNodes = [root];
+    for(let currentLevel = 1; currentLevel <= depth + 1; currentLevel++) {
+      outNodes = flatMap(outNodes, n => n.out);
+      let currentX = centerElement.x + (0.9 * centerElement.x * (currentLevel / depth));
+      for(let i = 0; i < outNodes.length; i++) {
+        this.setPosition(outNodes[i].element, currentX, (i + 1) * this.height / (outNodes.length + 1));
+        outNodes[i].element.hidden = false;
+      }
+    }
+
+    let inNodes = [root];
+    for(let currentLevel = 1; currentLevel <= depth + 1; currentLevel++) {
+      inNodes = flatMap(inNodes, n => n.in);
+      let currentX = centerElement.x - (0.9 * centerElement.x * (currentLevel / depth));
+      for(let i = 0; i < inNodes.length; i++) {
+        this.setPosition(inNodes[i].element, currentX, (i + 1) * this.height / (inNodes.length + 1));
+        inNodes[i].element.hidden = false;
+      }
+    }
+
+    this.setForces();
+
+    this.layoutType = 'flat';
+  }
+
+  setPosition(node, x: number, y: number) {
+    node.x = x;
+    node.y = y;
+    node.fx = x;
+    node.fy = y;
+    node.anchorx = x;
+    node.anchory = y;
+  }
+
+  createFlatNode(d: DataPoint, depth: number) {
+    const flatNode = {
+      element: d,
+      in: [],
+      out: []
+    };
+
+    if(depth === 0) return flatNode;
+
+    for(const c of d.connectors) {
+      const link = this.links.find(l => l[c.type] === c);
+      if(link) {
+        const connectedElement = link[this.oppositeType(c.type)].data;
+        const newNode = this.createFlatNode(connectedElement, depth - 1);
+        flatNode[c.type].push(newNode);
+      }
+    }
+
+    return flatNode;
+  }
+
+  spreadLayout() {
+    this.xScale = this.storedXScale;
+    this.yScale = this.storedYScale;
+
+    this.unparkedData.forEach(d => {
+      Object.assign(d, d.canvasPosition);
+      d.hidden = false;
+    });
+
+    this.setForces();
+
+    this.layoutType = 'spread';
+  }
+
+  oppositeType(type: string) {
+    return type === 'in' ? 'out' : 'in';
+  }
+
+  factorOffset(xFactor: number) {
+    if(xFactor >= this.factorLevels[1]) return -80;
+    if(xFactor >= this.factorLevels[0]) return -20;
+    return 0;
+  }
+
+  factorScale(xFactor: number) {
+    if(xFactor >= this.factorLevels[1]) return 'scale(0.25 0.25) ';
+    if(xFactor >= this.factorLevels[0]) return 'scale(0.5 0.5) ';
+    return '';
+  }
+}
diff --git a/gui-js/libs/ui-components/src/lib/variable-pane/variable-pane.component.html b/gui-js/libs/ui-components/src/lib/variable-pane/variable-pane.component.html
index 777f8b474..b8ed175d7 100644
--- a/gui-js/libs/ui-components/src/lib/variable-pane/variable-pane.component.html
+++ b/gui-js/libs/ui-components/src/lib/variable-pane/variable-pane.component.html
@@ -2,6 +2,7 @@
   id="variable-pane-wrapper"
   #variablePaneWrapper
   (window:resize)="windowResize()"
+  
   >
   <div class="selector-buttons">
     <form name="variablePane">
@@ -20,6 +21,6 @@
     </form>
   </div>
   <div id="variable-pane" class="variable-pane" #variablePane>
-    <p>&nbsp;</p>
+    <svg-canvas [style.width]="containerWidth$ | async" [unparkedData]="svgData$ | async" [enableScroll]="false" [showConnectors]="false" [showValuelines]="false" [zoom]="0.75"></svg-canvas>
   </div>
 </div>
diff --git a/gui-js/libs/ui-components/src/lib/variable-pane/variable-pane.component.scss b/gui-js/libs/ui-components/src/lib/variable-pane/variable-pane.component.scss
index 8f8b363c6..84a9b4fad 100644
--- a/gui-js/libs/ui-components/src/lib/variable-pane/variable-pane.component.scss
+++ b/gui-js/libs/ui-components/src/lib/variable-pane/variable-pane.component.scss
@@ -4,9 +4,30 @@
   height: 100vh;
   width: 100vw;
   border: 1px solid $toolbar-box;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: stretch;
 }
 
 .variable-pane {
   height: 400vh;
-  width: 400vw;
+  width: 100%;
+
+  flex: 1;
+
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  svg-canvas {
+    height: 400vh;
+  }
 }
+
+.selector-buttons {
+  flex: 0 0 30px;
+  form {
+    margin: 5px;
+  }
+}
\ No newline at end of file
diff --git a/gui-js/libs/ui-components/src/lib/variable-pane/variable-pane.component.ts b/gui-js/libs/ui-components/src/lib/variable-pane/variable-pane.component.ts
index 32aebe0a2..c5143078f 100644
--- a/gui-js/libs/ui-components/src/lib/variable-pane/variable-pane.component.ts
+++ b/gui-js/libs/ui-components/src/lib/variable-pane/variable-pane.component.ts
@@ -1,7 +1,10 @@
+import { CommonModule } from '@angular/common';
 import {
   AfterViewInit,
+  ChangeDetectionStrategy,
   Component,
   ElementRef,
+  HostListener,
   OnDestroy,
   ViewChild,
 } from '@angular/core';
@@ -10,24 +13,43 @@ import {
   ElectronService,
 } from '@minsky/core';
 import {
-  events,
   VariablePane,
+  VariableValue,
+  VariableValues,
+  minsky
 } from '@minsky/shared';
-import { fromEvent, Observable, Subject, takeUntil } from 'rxjs';
-import { sampleTime } from 'rxjs/operators';
+import { BehaviorSubject, Observable, Subject, takeUntil } from 'rxjs';
+import { SvgCanvasComponent } from '../svg-canvas/svg-canvas.component';
+import { SvgCanvasHelper, SvgVariableTypes } from '../svg-canvas/constants/svg-constants';
+import { DataPoint } from '../svg-canvas/classes/datapoint';
 
 @Component({
   selector: 'minsky-variable-pane',
   templateUrl: './variable-pane.component.html',
   styleUrls: ['./variable-pane.component.scss'],
-  standalone: true
+  standalone: true,
+  imports: [CommonModule, SvgCanvasComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush
+  
 })
 export class VariablePaneComponent implements OnDestroy, AfterViewInit {
   @ViewChild('variablePane') variablePaneWrapper: ElementRef;
 
+  @ViewChild(SvgCanvasComponent)
+  svgCanvas: SvgCanvasComponent;
+
+  @HostListener('window:resize', ['$event'])
+	onResize(event) {
+		this.setPositions();
+	}
+
   itemId: number;
   systemWindowId: BigInt;
 
+  allSvgData: DataPoint[];
+
+  svgData$ = new BehaviorSubject<DataPoint[]>(null);
+
   leftOffset = 0;
   topOffset: number;
   height: number;
@@ -35,12 +57,11 @@ export class VariablePaneComponent implements OnDestroy, AfterViewInit {
   variablePaneContainer: HTMLElement;
   mouseMove$: Observable<MouseEvent>;
   variablePane: VariablePane;
+
+  containerWidth$ = new BehaviorSubject<string>(null);
   
   destroy$ = new Subject<{}>();
 
-  mouseX = 0;
-  mouseY = 0;
-
   constructor(
     private electronService: ElectronService,
     private route: ActivatedRoute
@@ -53,108 +74,105 @@ export class VariablePaneComponent implements OnDestroy, AfterViewInit {
   }
 
   ngAfterViewInit() {
-    this.getWindowRectInfo();
-    this.renderFrame();
     this.initEvents();
   }
 
   windowResize() {
-    this.getWindowRectInfo();
-    this.renderFrame();
-  }
-  private getWindowRectInfo() {
     this.variablePaneContainer = this.variablePaneWrapper
       .nativeElement as HTMLElement;
-
-    const clientRect = this.variablePaneContainer.getBoundingClientRect();
-
-    this.leftOffset = Math.round(clientRect.left);
-    // 20 pixel offset to allow for selector buttons. Not needed on Windows for some reason.
-    this.topOffset = this.electronService.platform=='win32'? 0: 20; 
-    
-    this.height = Math.round(this.variablePaneContainer.clientHeight);
-    this.width = Math.round(this.variablePaneContainer.clientWidth-this.topOffset);
-  }
-  
-  renderFrame() {
-    if (
-      this.electronService.isElectron &&
-      this.systemWindowId &&
-      this.height &&
-      this.width
-    ) {
-      this.variablePane.updateWithHeight(this.height);
-      this.variablePane.renderFrame({
-        parentWindowId: this.systemWindowId.toString(),
-        offsetLeft: this.leftOffset,
-        offsetTop: this.topOffset,
-        childWidth: this.width,
-        childHeight: this.height,
-        scalingFactor: -1
-      });
-    }
   }
 
   async initEvents() {
+    this.variablePaneContainer = this.variablePaneWrapper
+      .nativeElement as HTMLElement;
 
-    this.mouseMove$ = fromEvent<MouseEvent>(
-      this.variablePaneContainer,
-      'mousemove'
-    ).pipe(sampleTime(1)); /// FPS=1000/sampleTime
-
-    // vertical offset to allow room for the filter buttons
-    const offset=-15;
-    this.mouseMove$.pipe(takeUntil(this.destroy$)).subscribe((event: MouseEvent) => {
-      const { clientX, clientY } = event;
-      this.mouseX = clientX;
-      this.mouseY = clientY;
-      this.variablePane.mouseMove(clientX,clientY+offset);
-      this.variablePane.requestRedraw();
-    });
-
-    this.variablePaneContainer.addEventListener('mousedown', (event) => {
-      const { clientX, clientY } = event;
-      this.variablePane.mouseDown(clientX,clientY+offset);
-      this.variablePane.requestRedraw();
-    });
-
-    this.variablePaneContainer.addEventListener('mouseup', (event) => {
-      const { clientX, clientY } = event;
-      this.variablePane.mouseUp(clientX,clientY+offset);
-      this.variablePane.requestRedraw();
-    });
-
-//    this.variablePaneContainer.onwheel = this.onMouseWheelZoom;
-    document.onkeydown = this.onKeyDown;
-    document.onkeyup = this.onKeyUp;
+    // Translate vertical wheel movement (deltaY) to horizontal scrolling
+    this.variablePaneContainer.addEventListener('wheel', (evt) => {
+      evt.preventDefault();
+      this.variablePaneContainer.scrollLeft += evt.deltaY;
+    }, { passive: false });
 
+    this.height = Math.round(this.variablePaneContainer.clientHeight);
+    this.variablePane.updateWithHeight(this.height);
     // set initial value of form elements from C++
     let selected=await this.variablePane.selection.properties();
     for (let i of ['flow','parameter','stock','integral'])
-      document.forms["variablePane"]["variablePane::"+i].checked=selected.includes(i);
+      document.forms['variablePane']['variablePane::'+i].checked=selected.includes(i);
+
+    this.allSvgData = [];
+    const varValues: VariableValues = await minsky.variableValues;
+    const varKeys = await varValues.keys();
+    for(let i = 0; i < varKeys.length; i++) {
+      const varValue: VariableValue = varValues.elem(varKeys[i]);
+      const typeName = await varValue.type();
+      let trimmedName;
+      if(typeName === 'constant') {
+        continue;
+      } else {
+        trimmedName = (await varValue.name());
+        const splitName = trimmedName.split(':');
+        if(splitName.length > 1) {
+          trimmedName = splitName[1];
+        }
+      }
+      const d = SvgCanvasHelper.createData({ symbol: trimmedName, name: trimmedName, description: await varValue.detailedText(), type: SvgVariableTypes[typeName] });
+      d.rotation = 0;
+      d.value = await varValue.value();
+      d.exponent = this.findExponent(d.value);
+      d.value = d.value / Math.pow(10, d.exponent);
+      d.minimum = await varValue.sliderMin();
+      d.maximum = await varValue.sliderMax();
+      this.allSvgData.push(d);
+    }
+    this.setPositions();
   }
 
-  onKeyDown =  (event: KeyboardEvent) => {
-    if (event.shiftKey) {
-      document.body.style.cursor='grab';
-      this.variablePane.shift(true);
-      this.variablePane.requestRedraw();
+  setPositions() {
+    const svgData = this.allSvgData.filter(d => {
+      return document.forms['variablePane']['variablePane::'+d.type.name].checked;
+    });
+    svgData.sort((a,b) => {
+      if(a.type.name > b.type.name) return 1;
+      if(a.type.name < b.type.name) return -1;
+      if(a.symbol > b.symbol) return 1;
+      if(a.symbol < b.symbol) return -1;
+      return 0;
+    });
+
+    const columnLength = Math.round(this.variablePaneContainer.clientHeight / 50);
+    const numberOfColumns = svgData.length / columnLength;
+    let currentXOffset = 10;
+    for(let i = 0; i < numberOfColumns; i++) {
+      let maxX = 0;
+      for(let j = 0; j < columnLength; j++) {
+        const d = svgData[i * columnLength + j];
+        if(!d) break;
+        maxX = Math.max(maxX, d.dimensions.boundingbox[2]);
+      }
+      for(let j = 0; j < columnLength; j++) {
+        const d = svgData[i * columnLength + j];
+        if(!d) break;
+        d.x = currentXOffset - d.dimensions.boundingbox[0];
+        d.y = 40 + 60 * j;
+      }
+      currentXOffset += maxX + 20;
     }
-    if (event.code==='F1')
-      this.electronService.send(events.HELP_FOR, {classType:'VariableBrowser'});
-  };
-  onKeyUp = (event: KeyboardEvent) => {
-    document.body.style.cursor='default';
-    this.variablePane.shift(false);
-    this.variablePane.requestRedraw();
-  };
+    this.containerWidth$.next(`${currentXOffset}px`);
+    this.svgData$.next(svgData);
+    this.svgCanvas.setDimensions(currentXOffset);
+  }
 
   select(id) {
-    if (document.forms["variablePane"]["variablePane::"+id].checked)
-      this.variablePane.select(id);
-    else
-      this.variablePane.deselect(id);
-    this.variablePane.updateWithHeight(this.height);
+    if (document.forms["variablePane"]["variablePane::"+id].checked) this.variablePane.select(id);
+    else this.variablePane.deselect(id);
+    this.setPositions();
+  }
+
+  findExponent(num: number) {
+    if (num === 0) return 0;
+    const absNum = Math.abs(num);
+    const rawExponent = Math.floor(Math.log10(absNum));
+    return Math.floor(rawExponent / 3) * 3;
   }
     
   ngOnDestroy() {
diff --git a/gui-js/libs/ui-components/src/lib/wiring/variable/variable.component.ts b/gui-js/libs/ui-components/src/lib/wiring/variable/variable.component.ts
index 0c8acd8b9..b88fe068c 100644
--- a/gui-js/libs/ui-components/src/lib/wiring/variable/variable.component.ts
+++ b/gui-js/libs/ui-components/src/lib/wiring/variable/variable.component.ts
@@ -45,9 +45,10 @@ export class VariableComponent {
   openVariablePane() {
     this.electronService.send(events.CREATE_MENU_POPUP, {
       title: 'Variables',
-      url: "#/headless/variable-pane",
+      url: '#/headless/variable-pane',
       width: 400,
       height: 450,
+      minWidth: 350,
       alwaysOnTop: true,
       modal: false,
       raiseIfPresent: true,
diff --git a/gui-js/nx.json b/gui-js/nx.json
index 075ef4805..e6b8ae520 100644
--- a/gui-js/nx.json
+++ b/gui-js/nx.json
@@ -76,5 +76,6 @@
     "@nx/angular:component": {
       "style": "scss"
     }
-  }
-}
+  },
+  "analytics": false
+}
\ No newline at end of file
diff --git a/gui-js/package-lock.json b/gui-js/package-lock.json
index 36c42e727..cda613ea6 100644
--- a/gui-js/package-lock.json
+++ b/gui-js/package-lock.json
@@ -18,8 +18,10 @@
         "@angular/forms": "^20.3.17",
         "@angular/platform-browser-dynamic": "^20.3.17",
         "@angular/router": "^20.3.17",
+        "@swimlane/ngx-graph": "^11.0.0",
         "bindings": "^1.5.0",
         "call-bind-apply-helpers": "^1.0.2",
+        "d3": "^5.16.0",
         "decompress": "^4.2.1",
         "electron-log": "^5.4.1",
         "electron-progressbar": "^2.2.1",
@@ -393,7 +395,6 @@
       "version": "20.2.14",
       "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-20.2.14.tgz",
       "integrity": "sha512-7bZxc01URbiPiIBWThQ69XwOxVduqEKN4PhpbF2AAyfMc/W8Hcr4VoIJOwL0O1Nkq5beS8pCAqoOeIgFyXd/kg==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -7742,6 +7743,163 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@swimlane/ngx-graph": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@swimlane/ngx-graph/-/ngx-graph-11.0.0.tgz",
+      "integrity": "sha512-QmJxh97KlC70eDWGCZcyl5vzNGaRo7rGcNeLAB2o0RKSnMPm/kdMzRKFeu40zvmpyWVw2oTEjhwdVQ/08GqIyQ==",
+      "license": "MIT",
+      "dependencies": {
+        "d3-dispatch": "^3.0.1",
+        "d3-ease": "^3.0.1",
+        "d3-force": "^3.0.0",
+        "d3-scale": "^4.0.2",
+        "d3-selection": "^3.0.0",
+        "d3-shape": "^3.2.0",
+        "d3-timer": "^3.0.1",
+        "d3-transition": "^3.0.1",
+        "dagre": "^0.8.5",
+        "transformation-matrix": "^2.16.1",
+        "tslib": "^2.3.1",
+        "webcola": "^3.4.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "18.x || 19.x || 20.x",
+        "@angular/cdk": "18.x || 19.x || 20.x",
+        "@angular/common": "18.x || 19.x || 20.x",
+        "@angular/core": "18.x || 19.x || 20.x",
+        "rxjs": "7.x"
+      }
+    },
+    "node_modules/@swimlane/ngx-graph/node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@swimlane/ngx-graph/node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@swimlane/ngx-graph/node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@swimlane/ngx-graph/node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@swimlane/ngx-graph/node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@swimlane/ngx-graph/node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@swimlane/ngx-graph/node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@swimlane/ngx-graph/node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@swimlane/ngx-graph/node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@swimlane/ngx-graph/node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@swimlane/ngx-graph/node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
     "node_modules/@szmarczak/http-timer": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
@@ -12010,6 +12168,341 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/d3": {
+      "version": "5.16.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-5.16.0.tgz",
+      "integrity": "sha512-4PL5hHaHwX4m7Zr1UapXW23apo6pexCgdetdJ5kTmADpG/7T9Gkxw0M0tf/pjoB63ezCCm0u5UaFYy2aMt0Mcw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1",
+        "d3-axis": "1",
+        "d3-brush": "1",
+        "d3-chord": "1",
+        "d3-collection": "1",
+        "d3-color": "1",
+        "d3-contour": "1",
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-dsv": "1",
+        "d3-ease": "1",
+        "d3-fetch": "1",
+        "d3-force": "1",
+        "d3-format": "1",
+        "d3-geo": "1",
+        "d3-hierarchy": "1",
+        "d3-interpolate": "1",
+        "d3-path": "1",
+        "d3-polygon": "1",
+        "d3-quadtree": "1",
+        "d3-random": "1",
+        "d3-scale": "2",
+        "d3-scale-chromatic": "1",
+        "d3-selection": "1",
+        "d3-shape": "1",
+        "d3-time": "1",
+        "d3-time-format": "2",
+        "d3-timer": "1",
+        "d3-transition": "1",
+        "d3-voronoi": "1",
+        "d3-zoom": "1"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-axis": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.12.tgz",
+      "integrity": "sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-brush": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.6.tgz",
+      "integrity": "sha512-7RW+w7HfMCPyZLifTz/UnJmI5kdkXtpCbombUSs8xniAyo0vIbrDzDwUJB6eJOgl9u5DQOt2TQlYumxzD1SvYA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "1",
+        "d3-transition": "1"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.6.tgz",
+      "integrity": "sha512-JXA2Dro1Fxw9rJe33Uv+Ckr5IrAa74TlfDEhE/jfLOaXegMQFQTAgAw9WnZL8+HxVBRXaRGCkrNU7pJeylRIuA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1",
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-collection": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
+      "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-color": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-contour": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-1.3.2.tgz",
+      "integrity": "sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "^1.1.1"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-drag": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
+      "integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dispatch": "1",
+        "d3-selection": "1"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.2.0.tgz",
+      "integrity": "sha512-9yVlqvZcSOMhCYzniHE7EVUws7Fa1zgw+/EAV2BxJoG3ME19V6BQFBwI855XQDsxyOuG7NibqRMTtiF/Qup46g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "commander": "2",
+        "iconv-lite": "0.4",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json",
+        "csv2tsv": "bin/dsv2dsv",
+        "dsv2dsv": "bin/dsv2dsv",
+        "dsv2json": "bin/dsv2json",
+        "json2csv": "bin/json2dsv",
+        "json2dsv": "bin/json2dsv",
+        "json2tsv": "bin/json2dsv",
+        "tsv2csv": "bin/dsv2dsv",
+        "tsv2json": "bin/dsv2json"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "license": "MIT"
+    },
+    "node_modules/d3-dsv/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz",
+      "integrity": "sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-fetch": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.2.0.tgz",
+      "integrity": "sha512-yC78NBVcd2zFAyR/HnUiBS7Lf6inSCoWcSxFfw8FYL7ydiqe80SazNwoffcqOfs95XaLo7yebsmQqDKSsXUtvA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dsv": "1"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.2.1.tgz",
+      "integrity": "sha512-HHvehyaiUlVo5CxBJ0yF/xny4xoaxFxDnBXNvNcfW9adORGZfyNF1dj6DGLKyk4Yh3brP/1h3rnDzdIAwL08zg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-collection": "1",
+        "d3-dispatch": "1",
+        "d3-quadtree": "1",
+        "d3-timer": "1"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+      "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-geo": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.1.tgz",
+      "integrity": "sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
+      "integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-interpolate": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-polygon": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.6.tgz",
+      "integrity": "sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-quadtree": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
+      "integrity": "sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-random": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.2.tgz",
+      "integrity": "sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-scale": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
+      "integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "^1.2.0",
+        "d3-collection": "1",
+        "d3-format": "1",
+        "d3-interpolate": "1",
+        "d3-time": "1",
+        "d3-time-format": "2"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz",
+      "integrity": "sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1",
+        "d3-interpolate": "1"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
+      "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
+      "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-time-format": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.3.0.tgz",
+      "integrity": "sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-time": "1"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-transition": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
+      "integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1",
+        "d3-dispatch": "1",
+        "d3-ease": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "1"
+      }
+    },
+    "node_modules/d3-voronoi": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
+      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-zoom": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz",
+      "integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "1",
+        "d3-transition": "1"
+      }
+    },
+    "node_modules/dagre": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
+      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "license": "MIT",
+      "dependencies": {
+        "graphlib": "^2.1.8",
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/data-urls": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
@@ -15009,6 +15502,15 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "license": "ISC"
     },
+    "node_modules/graphlib": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
+      "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -15636,6 +16138,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/ip-address": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
@@ -21386,7 +21897,6 @@
       "version": "4.17.23",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
       "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/lodash.debounce": {
@@ -23675,7 +24185,6 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
       "integrity": "sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "entities": "^6.0.0"
@@ -23729,7 +24238,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
       "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -25386,6 +25894,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/rxjs": {
       "version": "7.8.2",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
@@ -25484,7 +25998,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/sanitize-filename": {
@@ -27147,6 +27660,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/transformation-matrix": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/transformation-matrix/-/transformation-matrix-2.16.1.tgz",
+      "integrity": "sha512-tdtC3wxVEuzU7X/ydL131Q3JU5cPMEn37oqVLITjRDSDsnSHVFzW2JiCLfZLIQEgWzZHdSy3J6bZzvKEN24jGA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/chrvadala"
+      }
+    },
     "node_modules/tree-dump": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.1.0.tgz",
@@ -27978,6 +28500,18 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/webcola": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/webcola/-/webcola-3.4.0.tgz",
+      "integrity": "sha512-4BiLXjXw3SJHo3Xd+rF+7fyClT6n7I+AR6TkBqyQ4kTsePSAMDLRCXY1f3B/kXJeP9tYn4G1TblxTO+jAt0gaw==",
+      "license": "MIT",
+      "dependencies": {
+        "d3-dispatch": "^1.0.3",
+        "d3-drag": "^1.0.4",
+        "d3-shape": "^1.3.5",
+        "d3-timer": "^1.0.5"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
diff --git a/gui-js/package.json b/gui-js/package.json
index aba645417..6a2f32dbd 100644
--- a/gui-js/package.json
+++ b/gui-js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ravel",
-  "version":"3.25.1",
+  "version": "3.25.1",
   "author": "High Performance Coders",
   "description": "Graphical dynamical systems simulator oriented towards economics",
   "repository": {
@@ -23,10 +23,14 @@
     },
     "win": {
       "icon": "apps/minsky-electron/src/assets/RavelLogo.ico",
-      "target": [{
-        "target": "nsis",
-        "arch": ["x64"]
-      }],
+      "target": [
+        {
+          "target": "nsis",
+          "arch": [
+            "x64"
+          ]
+        }
+      ],
       "verifyUpdateCodeSignature": false
     },
     "nsis": {
@@ -186,8 +190,10 @@
     "@angular/forms": "^20.3.17",
     "@angular/platform-browser-dynamic": "^20.3.17",
     "@angular/router": "^20.3.17",
+    "@swimlane/ngx-graph": "^11.0.0",
     "bindings": "^1.5.0",
     "call-bind-apply-helpers": "^1.0.2",
+    "d3": "^5.16.0",
     "decompress": "^4.2.1",
     "electron-log": "^5.4.1",
     "electron-progressbar": "^2.2.1",
diff --git a/gui-js/tsconfig.base.json b/gui-js/tsconfig.base.json
index b760bcf65..dab844656 100644
--- a/gui-js/tsconfig.base.json
+++ b/gui-js/tsconfig.base.json
@@ -29,6 +29,6 @@
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true
+    "strictTemplates": false
   }
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index a3ea4db8a..244507b61 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "bindings": "^1.5.0",
+        "nx": "^22.6.3",
         "typescript": "^5.8.3"
       },
       "devDependencies": {
@@ -30,6 +31,64 @@
         "node": ">=12"
       }
     },
+    "node_modules/@emnapi/core": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.1.tgz",
+      "integrity": "sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.1.tgz",
+      "integrity": "sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.0.tgz",
+      "integrity": "sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@jest/diff-sequences": {
+      "version": "30.3.0",
+      "resolved": "https://registry.npmjs.org/@jest/diff-sequences/-/diff-sequences-30.3.0.tgz",
+      "integrity": "sha512-cG51MVnLq1ecVUaQ3fr6YuuAOitHK1S4WUJHnsPFE/quQr33ADUx1FfrTCpMCRxvy0Yr9BThKpDjSlcTi91tMA==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/get-type": {
+      "version": "30.1.0",
+      "resolved": "https://registry.npmjs.org/@jest/get-type/-/get-type-30.1.0.tgz",
+      "integrity": "sha512-eMbZE2hUnx1WV0pmURZY9XoXPkUYjpc55mb0CrhtdWLtzMQPFvu/rZkTLZFTsdaVQa+Tr4eWAteqcUzoawq/uA==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/schemas": {
+      "version": "30.0.5",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-30.0.5.tgz",
+      "integrity": "sha512-DmdYgtezMkh3cpU8/1uyXakv3tJRcmcXxBOcO0tbaozPwpmh4YMsnWrQm9ZmZMfa5ocbxzbFk6O4bDPEc/iAnA==",
+      "license": "MIT",
+      "dependencies": {
+        "@sinclair/typebox": "^0.34.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -58,6 +117,159 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@ltd/j-toml": {
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/@ltd/j-toml/-/j-toml-1.38.0.tgz",
+      "integrity": "sha512-lYtBcmvHustHQtg4X7TXUu1Xa/tbLC3p2wLvgQI+fWVySguVZJF60Snxijw5EiohumxZbR10kWYFFebh1zotiw==",
+      "license": "LGPL-3.0"
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.4.tgz",
+      "integrity": "sha512-9zESzOO5aDByvhIAsOy9TbpZ0Ur2AJbUI7UT73kcUTS2mxAMHOBaa1st/jAymNoCtvrit99kkzT1FZuXVcgfIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@emnapi/core": "^1.1.0",
+        "@emnapi/runtime": "^1.1.0",
+        "@tybys/wasm-util": "^0.9.0"
+      }
+    },
+    "node_modules/@nx/nx-darwin-arm64": {
+      "version": "22.6.3",
+      "resolved": "https://registry.npmjs.org/@nx/nx-darwin-arm64/-/nx-darwin-arm64-22.6.3.tgz",
+      "integrity": "sha512-m8hEp2WufqUJzrl2uI5OItkPqIo8+0lbOBEKI7yZN9uoL6FKzP5LF6WlMFPJ8FlajtjBzQqaoDwp04+bkuXeaw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@nx/nx-darwin-x64": {
+      "version": "22.6.3",
+      "resolved": "https://registry.npmjs.org/@nx/nx-darwin-x64/-/nx-darwin-x64-22.6.3.tgz",
+      "integrity": "sha512-biPybnU2qlNuP7ytBYmRuusrU5TWXqVKMHr7Kxrqlin87iJR5MosXSZ+Pjr8H+0zFrB4rGf/9yro3s/dYG40Yw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@nx/nx-freebsd-x64": {
+      "version": "22.6.3",
+      "resolved": "https://registry.npmjs.org/@nx/nx-freebsd-x64/-/nx-freebsd-x64-22.6.3.tgz",
+      "integrity": "sha512-8C6hhvVuqPwnvjHMPAA77DeEZ/WSY6AxuuIiyRje9uKF2B5F26sV89lRjBoEiWnV1dmLdy5YY5HJZEjwqjifAQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@nx/nx-linux-arm-gnueabihf": {
+      "version": "22.6.3",
+      "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm-gnueabihf/-/nx-linux-arm-gnueabihf-22.6.3.tgz",
+      "integrity": "sha512-8gWDhe4lY3pegmKx5/z7z/h4adlmL+3wuPXMUlBtMkhJ5TX1z94PkVtHRprEsHuQHO7PsSFaOJdsIZbr/sx7SQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@nx/nx-linux-arm64-gnu": {
+      "version": "22.6.3",
+      "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-gnu/-/nx-linux-arm64-gnu-22.6.3.tgz",
+      "integrity": "sha512-ZRP5qf4lsk0HFuvhhSJc+t3a0NKc+WXElKPXTEK9DGOluY327lUogeZrSSJfxGf+dBTtpuRIO8rOIrnZOf5Xww==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@nx/nx-linux-arm64-musl": {
+      "version": "22.6.3",
+      "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-musl/-/nx-linux-arm64-musl-22.6.3.tgz",
+      "integrity": "sha512-AcOf/5UJD7Fyc2ujHYajxLw+ajJ8C1IhHoCQyLwBpd/15lu3pii9Z9G4cNBm0ejKnnzofzRmhv2xka9qqCtpXQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@nx/nx-linux-x64-gnu": {
+      "version": "22.6.3",
+      "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-gnu/-/nx-linux-x64-gnu-22.6.3.tgz",
+      "integrity": "sha512-KxSdUCGOt2GGXzgggp9sSLJacWj7AAI410UPOEGw5F6GS5148e+kiy3piULF/0NE5/q40IK7gyS43HY99qgAqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@nx/nx-linux-x64-musl": {
+      "version": "22.6.3",
+      "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-musl/-/nx-linux-x64-musl-22.6.3.tgz",
+      "integrity": "sha512-Tvlw6XvTj+5IQRkprV3AdCKnlQFYh2OJYn0wgHrvQWeV1Eks/RaCoRChfHXdAyE4S64YrBA6NAOxfXANh3yLTg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@nx/nx-win32-arm64-msvc": {
+      "version": "22.6.3",
+      "resolved": "https://registry.npmjs.org/@nx/nx-win32-arm64-msvc/-/nx-win32-arm64-msvc-22.6.3.tgz",
+      "integrity": "sha512-9yRRuoVeQdV52GJtHo+vH6+es2PNF8skWlUa74jyWRsoZM9Ew8JmRZruRfhkUmhjJTrguqJLj9koa/NXgS0yeg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@nx/nx-win32-x64-msvc": {
+      "version": "22.6.3",
+      "resolved": "https://registry.npmjs.org/@nx/nx-win32-x64-msvc/-/nx-win32-x64-msvc-22.6.3.tgz",
+      "integrity": "sha512-21wjiUSV5hMa1oj8UfpfMTxpROksWrr/minAv8ejmGFwUSoztSzAkNf5i4PESPsbYNytjKooDzzAiQMLo6b0kg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@sinclair/typebox": {
+      "version": "0.34.49",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.49.tgz",
+      "integrity": "sha512-brySQQs7Jtn0joV8Xh9ZV/hZb9Ozb0pmazDIASBkYKCjXrXU3mpcFahmK/z4YDhGkQvP9mWJbVyahdtU5wQA+A==",
+      "license": "MIT"
+    },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
@@ -86,17 +298,56 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.9.0.tgz",
+      "integrity": "sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@types/node": {
       "version": "24.0.10",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.10.tgz",
       "integrity": "sha512-ENHwaH+JIRTDIEEbDK6QSQntAYGtbvdDXnMXnZaZ6k13Du1dPMmprkEHIL7ok2Wl2aZevetwTAb5S+7yIF+enA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.8.0"
       }
     },
+    "node_modules/@yarnpkg/lockfile": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
+      "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/@yarnpkg/parsers": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/parsers/-/parsers-3.0.2.tgz",
+      "integrity": "sha512-/HcYgtUSiJiot/XWGLOlGxPYUG65+/31V8oqk17vZLW1xlCoR4PampyePljOxY2n8/3jz9+tIFzICsyGujJZoA==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "js-yaml": "^3.10.0",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@zkochan/js-yaml": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/@zkochan/js-yaml/-/js-yaml-0.0.7.tgz",
+      "integrity": "sha512-nrUSn7hzt7J6JWgWGz78ZYI8wj+gdIJdk0Ynjpp8l+trkn58Uqsf6RYrYkEK+3X18EX+TNdtJI0WxAtc+L84SQ==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -123,6 +374,39 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/ansi-colors": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
+      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/arg": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
@@ -130,6 +414,64 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "license": "MIT"
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.14.0.tgz",
+      "integrity": "sha512-3Y8yrqLSwjuzpXuZ0oIYZ/XGgLwUIBU3uLvbcpb0pidD9ctpShJd43KSlEEkVQg6DS0G9NKyzOvBfUtDKEyHvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.11",
+        "form-data": "^4.0.5",
+        "proxy-from-env": "^2.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/bindings": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
@@ -139,6 +481,159 @@
         "file-uri-to-path": "1.0.0"
       }
     },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
+      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "license": "MIT",
+      "dependencies": {
+        "restore-cursor": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cli-spinners": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.1.tgz",
+      "integrity": "sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -146,6 +641,36 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/defaults": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
+      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "clone": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/diff": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
@@ -156,79 +681,1118 @@
         "node": ">=0.3.1"
       }
     },
-    "node_modules/file-uri-to-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
-      "license": "MIT"
+    "node_modules/dotenv": {
+      "version": "16.4.7",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
+      "integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
     },
-    "node_modules/make-error": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
-      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true,
-      "license": "ISC"
+    "node_modules/dotenv-expand": {
+      "version": "11.0.7",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-11.0.7.tgz",
+      "integrity": "sha512-zIHwmZPRshsCdpMDyVsqGmgyP0yT8GAgXUnkdAoJisxvf33k7yO6OuoKmcTGuXPWSsm8Oh88nZicRLA9Y0rUeA==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dotenv": "^16.4.5"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
     },
-    "node_modules/node-addon-api": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-8.4.0.tgz",
-      "integrity": "sha512-D9DI/gXHvVmjHS08SVch0Em8G5S1P+QWtU31appcKT/8wFSPRcdHadIFSAntdMMVM5zz+/DL+bL/gz3UDppqtg==",
-      "dev": true,
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
       "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
       "engines": {
-        "node": "^18 || ^20 || >= 21"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/ts-node": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
-      "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
-      "dev": true,
-      "license": "MIT",
+    "node_modules/ejs": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@cspotcode/source-map-support": "^0.8.0",
-        "@tsconfig/node10": "^1.0.7",
-        "@tsconfig/node12": "^1.0.7",
-        "@tsconfig/node14": "^1.0.0",
-        "@tsconfig/node16": "^1.0.2",
-        "acorn": "^8.4.1",
-        "acorn-walk": "^8.1.1",
-        "arg": "^4.1.0",
-        "create-require": "^1.1.0",
-        "diff": "^4.0.1",
-        "make-error": "^1.1.1",
-        "v8-compile-cache-lib": "^3.0.1",
-        "yn": "3.1.1"
+        "jake": "^10.8.5"
       },
       "bin": {
-        "ts-node": "dist/bin.js",
-        "ts-node-cwd": "dist/bin-cwd.js",
-        "ts-node-esm": "dist/bin-esm.js",
-        "ts-node-script": "dist/bin-script.js",
-        "ts-node-transpile-only": "dist/bin-transpile.js",
-        "ts-script": "dist/bin-script-deprecated.js"
-      },
-      "peerDependencies": {
-        "@swc/core": ">=1.2.50",
-        "@swc/wasm": ">=1.2.50",
-        "@types/node": "*",
-        "typescript": ">=2.7"
+        "ejs": "bin/cli.js"
       },
-      "peerDependenciesMeta": {
-        "@swc/core": {
-          "optional": true
-        },
-        "@swc/wasm": {
-          "optional": true
-        }
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
+    "node_modules/enquirer": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
+      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-colors": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/figures": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "license": "MIT"
+    },
+    "node_modules/filelist": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.6.tgz",
+      "integrity": "sha512-5giy2PkLYY1cP39p17Ech+2xlpTRL9HLspOfEgm0L6CwBXBTgsK5ou0JtzYuepxkaQ/tvhCFIJ5uXo0OrM2DxA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "license": "MIT"
+    },
+    "node_modules/filelist/node_modules/brace-expansion": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.3.tgz",
+      "integrity": "sha512-MCV/fYJEbqx68aE58kv2cA/kiky1G8vux3OR6/jbS+jIMe/6fJWa0DTzJU7dqijOWYwHi1t29FlfYI9uytqlpA==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.9.tgz",
+      "integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/flat": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+      "license": "BSD-3-Clause",
+      "bin": {
+        "flat": "cli.js"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/front-matter": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-4.0.2.tgz",
+      "integrity": "sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==",
+      "license": "MIT",
+      "dependencies": {
+        "js-yaml": "^3.13.1"
+      }
+    },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "license": "MIT"
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "license": "MIT",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-interactive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
+      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jake": {
+      "version": "10.9.4",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.4.tgz",
+      "integrity": "sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "async": "^3.2.6",
+        "filelist": "^1.0.4",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jest-diff": {
+      "version": "30.3.0",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-30.3.0.tgz",
+      "integrity": "sha512-n3q4PDQjS4LrKxfWB3Z5KNk1XjXtZTBwQp71OP0Jo03Z6V60x++K5L8k6ZrW8MY8pOFylZvHM0zsjS1RqlHJZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/diff-sequences": "30.3.0",
+        "@jest/get-type": "30.1.0",
+        "chalk": "^4.1.2",
+        "pretty-format": "30.3.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/js-yaml": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz",
+      "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/js-yaml/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "license": "MIT",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonc-parser": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
+      "license": "MIT"
+    },
+    "node_modules/lines-and-columns": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-2.0.3.tgz",
+      "integrity": "sha512-cNOjgCnLB+FnvWWtyRTzmB3POJ+cXxTA81LoW7u8JdmhfXzriropYwpjShnz1QLLWsQwY7nIxoDmcPTwphDK9w==",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
+    "node_modules/log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "10.2.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
+      "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-8.4.0.tgz",
+      "integrity": "sha512-D9DI/gXHvVmjHS08SVch0Em8G5S1P+QWtU31appcKT/8wFSPRcdHadIFSAntdMMVM5zz+/DL+bL/gz3UDppqtg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18 || ^20 || >= 21"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nx": {
+      "version": "22.6.3",
+      "resolved": "https://registry.npmjs.org/nx/-/nx-22.6.3.tgz",
+      "integrity": "sha512-8eIkEAlvkTvR2zY+yjhuTxMD6z4AtM1SumSBbwMmUMEXMtXE88fH0RL59T5V6MLjaov1exUM3lhUqPE3IyuBPg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ltd/j-toml": "^1.38.0",
+        "@napi-rs/wasm-runtime": "0.2.4",
+        "@yarnpkg/lockfile": "^1.1.0",
+        "@yarnpkg/parsers": "3.0.2",
+        "@zkochan/js-yaml": "0.0.7",
+        "axios": "^1.12.0",
+        "cli-cursor": "3.1.0",
+        "cli-spinners": "2.6.1",
+        "cliui": "^8.0.1",
+        "dotenv": "~16.4.5",
+        "dotenv-expand": "~11.0.6",
+        "ejs": "^3.1.7",
+        "enquirer": "~2.3.6",
+        "figures": "3.2.0",
+        "flat": "^5.0.2",
+        "front-matter": "^4.0.2",
+        "ignore": "^7.0.5",
+        "jest-diff": "^30.0.2",
+        "jsonc-parser": "3.2.0",
+        "lines-and-columns": "2.0.3",
+        "minimatch": "10.2.4",
+        "npm-run-path": "^4.0.1",
+        "open": "^8.4.0",
+        "ora": "5.3.0",
+        "picocolors": "^1.1.0",
+        "resolve.exports": "2.0.3",
+        "semver": "^7.6.3",
+        "string-width": "^4.2.3",
+        "tar-stream": "~2.2.0",
+        "tmp": "~0.2.1",
+        "tree-kill": "^1.2.2",
+        "tsconfig-paths": "^4.1.2",
+        "tslib": "^2.3.0",
+        "yaml": "^2.6.0",
+        "yargs": "^17.6.2",
+        "yargs-parser": "21.1.1"
+      },
+      "bin": {
+        "nx": "bin/nx.js",
+        "nx-cloud": "bin/nx-cloud.js"
+      },
+      "optionalDependencies": {
+        "@nx/nx-darwin-arm64": "22.6.3",
+        "@nx/nx-darwin-x64": "22.6.3",
+        "@nx/nx-freebsd-x64": "22.6.3",
+        "@nx/nx-linux-arm-gnueabihf": "22.6.3",
+        "@nx/nx-linux-arm64-gnu": "22.6.3",
+        "@nx/nx-linux-arm64-musl": "22.6.3",
+        "@nx/nx-linux-x64-gnu": "22.6.3",
+        "@nx/nx-linux-x64-musl": "22.6.3",
+        "@nx/nx-win32-arm64-msvc": "22.6.3",
+        "@nx/nx-win32-x64-msvc": "22.6.3"
+      },
+      "peerDependencies": {
+        "@swc-node/register": "^1.11.1",
+        "@swc/core": "^1.15.8"
+      },
+      "peerDependenciesMeta": {
+        "@swc-node/register": {
+          "optional": true
+        },
+        "@swc/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ora": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-5.3.0.tgz",
+      "integrity": "sha512-zAKMgGXUim0Jyd6CXK9lraBnD3H5yPGBPPOkC23a2BG6hsm4Zu6OQSjQuEtV0BHDf4aKHcUFvJiGRrFuW3MG8g==",
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^4.0.3",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "log-symbols": "^4.0.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/pretty-format": {
+      "version": "30.3.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.3.0.tgz",
+      "integrity": "sha512-oG4T3wCbfeuvljnyAzhBvpN45E8iOTXCU/TD3zXW80HA3dQ4ahdqMkWGiPWZvjpQwlbyHrPTWUAqUzGzv4l1JQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/schemas": "30.0.5",
+        "ansi-styles": "^5.2.0",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve.exports": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.3.tgz",
+      "integrity": "sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "license": "MIT",
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "license": "ISC"
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tmp": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz",
+      "integrity": "sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
+    "node_modules/ts-node": {
+      "version": "10.9.2",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
+      "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cspotcode/source-map-support": "^0.8.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.1",
+        "yn": "3.1.1"
+      },
+      "bin": {
+        "ts-node": "dist/bin.js",
+        "ts-node-cwd": "dist/bin-cwd.js",
+        "ts-node-esm": "dist/bin-esm.js",
+        "ts-node-script": "dist/bin-script.js",
+        "ts-node-transpile-only": "dist/bin-transpile.js",
+        "ts-script": "dist/bin-script-deprecated.js"
+      },
+      "peerDependencies": {
+        "@swc/core": ">=1.2.50",
+        "@swc/wasm": ">=1.2.50",
+        "@types/node": "*",
+        "typescript": ">=2.7"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "@swc/wasm": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
+      "integrity": "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==",
+      "license": "MIT",
+      "dependencies": {
+        "json5": "^2.2.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/typescript": {
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -244,6 +1808,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
     "node_modules/v8-compile-cache-lib": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
@@ -251,6 +1821,89 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "defaults": "^1.0.3"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yaml": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.3.tgz",
+      "integrity": "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/yn": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
diff --git a/package.json b/package.json
index ddedff22d..14cb51998 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "bindings": "^1.5.0",
+    "nx": "^22.6.3",
     "typescript": "^5.8.3"
   },
   "devDependencies": {

From 0216610a97abec2e7c79c3ebebeed079cedb7a13 Mon Sep 17 00:00:00 2001
From: Niels Rademaker <nc.rademaker@gmail.com>
Date: Sun, 5 Apr 2026 16:26:47 +0200
Subject: [PATCH 2/4] package lock

---
 gui-js/package-lock.json | 623 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 605 insertions(+), 18 deletions(-)

diff --git a/gui-js/package-lock.json b/gui-js/package-lock.json
index 069679fe8..1acb5e2dc 100644
--- a/gui-js/package-lock.json
+++ b/gui-js/package-lock.json
@@ -18,6 +18,7 @@
         "@angular/forms": "^20.3.18",
         "@angular/platform-browser-dynamic": "^20.3.18",
         "@angular/router": "^20.3.18",
+        "@swimlane/ngx-graph": "^11.0.0",
         "bindings": "^1.5.0",
         "call-bind-apply-helpers": "^1.0.2",
         "d3": "^5.16.0",
@@ -1069,7 +1070,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
       "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "peer": true,
       "engines": {
@@ -1083,7 +1083,6 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
       "integrity": "sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -8415,6 +8414,33 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
+    "node_modules/@swimlane/ngx-graph": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@swimlane/ngx-graph/-/ngx-graph-11.0.0.tgz",
+      "integrity": "sha512-QmJxh97KlC70eDWGCZcyl5vzNGaRo7rGcNeLAB2o0RKSnMPm/kdMzRKFeu40zvmpyWVw2oTEjhwdVQ/08GqIyQ==",
+      "license": "MIT",
+      "dependencies": {
+        "d3-dispatch": "^3.0.1",
+        "d3-ease": "^3.0.1",
+        "d3-force": "^3.0.0",
+        "d3-scale": "^4.0.2",
+        "d3-selection": "^3.0.0",
+        "d3-shape": "^3.2.0",
+        "d3-timer": "^3.0.1",
+        "d3-transition": "^3.0.1",
+        "dagre": "^0.8.5",
+        "transformation-matrix": "^2.16.1",
+        "tslib": "^2.3.1",
+        "webcola": "^3.4.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "18.x || 19.x || 20.x",
+        "@angular/cdk": "18.x || 19.x || 20.x",
+        "@angular/common": "18.x || 19.x || 20.x",
+        "@angular/core": "18.x || 19.x || 20.x",
+        "rxjs": "7.x"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -8863,9 +8889,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/node": {
-      "dev": true
-    },
     "node_modules/@types/node-forge": {
       "version": "1.3.14",
       "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.14.tgz",
@@ -13696,6 +13719,541 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/d3": {
+      "version": "5.16.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-5.16.0.tgz",
+      "integrity": "sha512-4PL5hHaHwX4m7Zr1UapXW23apo6pexCgdetdJ5kTmADpG/7T9Gkxw0M0tf/pjoB63ezCCm0u5UaFYy2aMt0Mcw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1",
+        "d3-axis": "1",
+        "d3-brush": "1",
+        "d3-chord": "1",
+        "d3-collection": "1",
+        "d3-color": "1",
+        "d3-contour": "1",
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-dsv": "1",
+        "d3-ease": "1",
+        "d3-fetch": "1",
+        "d3-force": "1",
+        "d3-format": "1",
+        "d3-geo": "1",
+        "d3-hierarchy": "1",
+        "d3-interpolate": "1",
+        "d3-path": "1",
+        "d3-polygon": "1",
+        "d3-quadtree": "1",
+        "d3-random": "1",
+        "d3-scale": "2",
+        "d3-scale-chromatic": "1",
+        "d3-selection": "1",
+        "d3-shape": "1",
+        "d3-time": "1",
+        "d3-time-format": "2",
+        "d3-timer": "1",
+        "d3-transition": "1",
+        "d3-voronoi": "1",
+        "d3-zoom": "1"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-axis": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.12.tgz",
+      "integrity": "sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-brush": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.6.tgz",
+      "integrity": "sha512-7RW+w7HfMCPyZLifTz/UnJmI5kdkXtpCbombUSs8xniAyo0vIbrDzDwUJB6eJOgl9u5DQOt2TQlYumxzD1SvYA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "1",
+        "d3-transition": "1"
+      }
+    },
+    "node_modules/d3-brush/node_modules/d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-brush/node_modules/d3-ease": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz",
+      "integrity": "sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-brush/node_modules/d3-selection": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
+      "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-brush/node_modules/d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-brush/node_modules/d3-transition": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
+      "integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1",
+        "d3-dispatch": "1",
+        "d3-ease": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "1"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.6.tgz",
+      "integrity": "sha512-JXA2Dro1Fxw9rJe33Uv+Ckr5IrAa74TlfDEhE/jfLOaXegMQFQTAgAw9WnZL8+HxVBRXaRGCkrNU7pJeylRIuA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1",
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-collection": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
+      "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-color": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-contour": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-1.3.2.tgz",
+      "integrity": "sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "^1.1.1"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
+      "integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dispatch": "1",
+        "d3-selection": "1"
+      }
+    },
+    "node_modules/d3-drag/node_modules/d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-drag/node_modules/d3-selection": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
+      "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-dsv": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.2.0.tgz",
+      "integrity": "sha512-9yVlqvZcSOMhCYzniHE7EVUws7Fa1zgw+/EAV2BxJoG3ME19V6BQFBwI855XQDsxyOuG7NibqRMTtiF/Qup46g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "commander": "2",
+        "iconv-lite": "0.4",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json",
+        "csv2tsv": "bin/dsv2dsv",
+        "dsv2dsv": "bin/dsv2dsv",
+        "dsv2json": "bin/dsv2json",
+        "json2csv": "bin/json2dsv",
+        "json2dsv": "bin/json2dsv",
+        "json2tsv": "bin/json2dsv",
+        "tsv2csv": "bin/dsv2dsv",
+        "tsv2json": "bin/dsv2json"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.2.0.tgz",
+      "integrity": "sha512-yC78NBVcd2zFAyR/HnUiBS7Lf6inSCoWcSxFfw8FYL7ydiqe80SazNwoffcqOfs95XaLo7yebsmQqDKSsXUtvA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dsv": "1"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+      "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-geo": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.1.tgz",
+      "integrity": "sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
+      "integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-interpolate": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-polygon": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.6.tgz",
+      "integrity": "sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-quadtree": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
+      "integrity": "sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-random": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.2.tgz",
+      "integrity": "sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz",
+      "integrity": "sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1",
+        "d3-interpolate": "1"
+      }
+    },
+    "node_modules/d3-scale/node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale/node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape/node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
+      "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-time-format": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.3.0.tgz",
+      "integrity": "sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-time": "1"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-voronoi": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
+      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-zoom": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz",
+      "integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "1",
+        "d3-transition": "1"
+      }
+    },
+    "node_modules/d3-zoom/node_modules/d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-zoom/node_modules/d3-ease": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz",
+      "integrity": "sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-zoom/node_modules/d3-selection": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
+      "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-zoom/node_modules/d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-zoom/node_modules/d3-transition": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
+      "integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1",
+        "d3-dispatch": "1",
+        "d3-ease": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "1"
+      }
+    },
+    "node_modules/d3/node_modules/d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3/node_modules/d3-ease": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz",
+      "integrity": "sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3/node_modules/d3-force": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.2.1.tgz",
+      "integrity": "sha512-HHvehyaiUlVo5CxBJ0yF/xny4xoaxFxDnBXNvNcfW9adORGZfyNF1dj6DGLKyk4Yh3brP/1h3rnDzdIAwL08zg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-collection": "1",
+        "d3-dispatch": "1",
+        "d3-quadtree": "1",
+        "d3-timer": "1"
+      }
+    },
+    "node_modules/d3/node_modules/d3-scale": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
+      "integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "^1.2.0",
+        "d3-collection": "1",
+        "d3-format": "1",
+        "d3-interpolate": "1",
+        "d3-time": "1",
+        "d3-time-format": "2"
+      }
+    },
+    "node_modules/d3/node_modules/d3-selection": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
+      "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3/node_modules/d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3/node_modules/d3-transition": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
+      "integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1",
+        "d3-dispatch": "1",
+        "d3-ease": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "1"
+      }
+    },
+    "node_modules/dagre": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
+      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "license": "MIT",
+      "dependencies": {
+        "graphlib": "^2.1.8",
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/data-urls": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
@@ -17544,6 +18102,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/icss-utils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
@@ -17757,6 +18327,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.3.0.tgz",
@@ -28683,6 +29262,27 @@
         "d3-timer": "^1.0.5"
       }
     },
+    "node_modules/webcola/node_modules/d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/webcola/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/webcola/node_modules/d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -29750,19 +30350,6 @@
         }
       }
     },
-    "node_modules/webpack-dev-server/node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/webpack-dev-server/node_modules/isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",

From 35085309485f9478b51baa0483ef780c1880236f Mon Sep 17 00:00:00 2001
From: Niels Rademaker <nc.rademaker@gmail.com>
Date: Sun, 5 Apr 2026 17:25:25 +0200
Subject: [PATCH 3/4] constant for integrals

---
 .../lib/svg-canvas/constants/svg-constants.ts | 34 +++++++++++++++++--
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/gui-js/libs/ui-components/src/lib/svg-canvas/constants/svg-constants.ts b/gui-js/libs/ui-components/src/lib/svg-canvas/constants/svg-constants.ts
index 2a139f36a..b842bbe5c 100644
--- a/gui-js/libs/ui-components/src/lib/svg-canvas/constants/svg-constants.ts
+++ b/gui-js/libs/ui-components/src/lib/svg-canvas/constants/svg-constants.ts
@@ -55,7 +55,7 @@ export class SvgVariableTypes {
         },
         stroke: '#d32519',
         class: {'variable': true}
-        };
+    };
     public static stock = {
         name: 'stock',
         points: (x: number, y: number, width: number, height: number) => {
@@ -84,8 +84,36 @@ export class SvgVariableTypes {
         },
         stroke: '#d32519',
         class: {'variable': true}
-        };
-        
+    };
+    public static integral = {
+        name: 'integral',
+        points: (x: number, y: number, width: number, height: number) => {
+            return `${x-width},${y-height} ${x+width*0.75},${y-height} ${x+width},${y} ${x+width*0.75},${y+height} ${x-width},${y+height}`;
+        },
+        connectors: [
+            {
+            type: 'out',
+            position: (x: number, y: number, width: number, height: number) => [x+width,y,0]
+            },
+            {
+            type: 'in',
+            position: (x: number, y: number, width: number, height: number) => [x-width,y,Math.PI]
+            }
+        ],
+        getDimensions(length: number) {
+            const lengthPart = length / 12;
+            return {
+                length: length,
+                boundingbox: [-lengthPart * 4,-25,lengthPart * 8,50],
+                labelbox: [-lengthPart * 4,-22.5,lengthPart * 6,45],
+                valuebox: [lengthPart * 1,-20,lengthPart * 6,25],
+                exponentbox: [lengthPart * 1,5,lengthPart * 6,25],
+                valueline: [[-lengthPart * 4,-25],[lengthPart * 3,-25]]
+            };
+        },
+        stroke: '#d32519',
+        class: {'variable': true}
+    }; 
     public static parameter = {
         name: 'parameter',
         points: (x: number, y: number, width: number, height: number) => {

From 740842d9f66bf93a3d0d976666130ad75bd36d53 Mon Sep 17 00:00:00 2001
From: Niels Rademaker <nc.rademaker@gmail.com>
Date: Sun, 5 Apr 2026 17:30:35 +0200
Subject: [PATCH 4/4] supported types filter

filter out weird types like "tempFlow" until I know better what to do with them
---
 .../src/lib/variable-pane/variable-pane.component.ts          | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/gui-js/libs/ui-components/src/lib/variable-pane/variable-pane.component.ts b/gui-js/libs/ui-components/src/lib/variable-pane/variable-pane.component.ts
index c5143078f..385267538 100644
--- a/gui-js/libs/ui-components/src/lib/variable-pane/variable-pane.component.ts
+++ b/gui-js/libs/ui-components/src/lib/variable-pane/variable-pane.component.ts
@@ -96,7 +96,8 @@ export class VariablePaneComponent implements OnDestroy, AfterViewInit {
     this.variablePane.updateWithHeight(this.height);
     // set initial value of form elements from C++
     let selected=await this.variablePane.selection.properties();
-    for (let i of ['flow','parameter','stock','integral'])
+    const supportedTypes = ['flow','parameter','stock','integral'];
+    for (let i of supportedTypes)
       document.forms['variablePane']['variablePane::'+i].checked=selected.includes(i);
 
     this.allSvgData = [];
@@ -105,6 +106,7 @@ export class VariablePaneComponent implements OnDestroy, AfterViewInit {
     for(let i = 0; i < varKeys.length; i++) {
       const varValue: VariableValue = varValues.elem(varKeys[i]);
       const typeName = await varValue.type();
+      if(!supportedTypes.some(t => t === typeName)) continue;
       let trimmedName;
       if(typeName === 'constant') {
         continue;