diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 4cd42bd24..269ee0f0e 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -86,14 +86,20 @@
 ---
 config:
   look: handDrawn
-  flowchart:
-    htmlLabels: false
+  layout: elk
+  elk:
+        nodePlacementStrategy: BRANDES_KOEPF
 ---
-flowchart
-      A[I am a long text, where do I go??? handdrawn - false]
+flowchart TB
+    %% A --> C
+    B -- sdf sdf --> C{"Evaluate"}
+    C --> n4["salkdfjh akljd lkasdjf lkashj lksjadf klasdh"]
+    C --> F
+
+
 </pre
       >
-      <pre id="diagram" class="mermaid">
+      <pre id="diagram" class="mermaid2">
 ---
 config:
   look: handdrawn
@@ -106,7 +112,7 @@ flowchart
       >
     </div>
     <div class="flex">
-      <pre id="diagram" class="mermaid">
+      <pre id="diagram" class="mermaid2">
 ---
 config:
   flowchart:
@@ -116,7 +122,7 @@ flowchart
       A[I am a long text, where do I go??? classic - false]
 </pre
       >
-      <pre id="diagram" class="mermaid">
+      <pre id="diagram" class="mermaid2">
 ---
 config:
   flowchart:
@@ -159,8 +165,8 @@ flowchart LR
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      // import layouts from './mermaid-layout-elk.esm.mjs';
-      // mermaid.registerLayoutLoaders(layouts);
+      import layouts from './mermaid-layout-elk.esm.mjs';
+      mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {
         console.error('Mermaid error: ', err);
       };
diff --git a/docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md b/docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md
index 498aee75d..441eb9209 100644
--- a/docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md
+++ b/docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md
@@ -16,7 +16,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/render.ts:11](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L11)
+[packages/mermaid/src/rendering-util/render.ts:25](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L25)
 
 ---
 
@@ -26,7 +26,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/render.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L10)
+[packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
 
 ---
 
@@ -36,4 +36,4 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/render.ts:9](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L9)
+[packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23)
diff --git a/docs/config/setup/interfaces/mermaid.Mermaid.md b/docs/config/setup/interfaces/mermaid.Mermaid.md
index c139125f9..09fab149c 100644
--- a/docs/config/setup/interfaces/mermaid.Mermaid.md
+++ b/docs/config/setup/interfaces/mermaid.Mermaid.md
@@ -28,7 +28,7 @@ page.
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
+[packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)
 
 ---
 
@@ -59,7 +59,7 @@ A graph definition key
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
+[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
 
 ---
 
@@ -89,7 +89,7 @@ Use [initialize](mermaid.Mermaid.md#initialize) and [run](mermaid.Mermaid.md#run
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
+[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)
 
 ---
 
@@ -116,50 +116,7 @@ This function should be called before the run function.
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
-
----
-
-### internalHelpers
-
-• **internalHelpers**: `Object`
-
-Internal helpers for mermaid
-
-**`Deprecated`**
-
-- This should not be used by external packages, as the definitions will change without notice.
-
-#### Type declaration
-
-| Name                         | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| :--------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `common`                     | { `evaluate`: (`val?`: `string` \| `boolean`) => `boolean` ; `getMax`: (...`values`: `number`\[]) => `number` ; `getMin`: (...`values`: `number`\[]) => `number` ; `getRows`: (`s?`: `string`) => `string`\[] ; `getUrl`: (`useAbsolute`: `boolean`) => `string` ; `hasBreaks`: (`text`: `string`) => `boolean` ; `lineBreakRegex`: `RegExp` ; `removeScript`: (`txt`: `string`) => `string` ; `sanitizeText`: (`text`: `string`, `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` ; `sanitizeTextOrArray`: (`a`: `string` \| `string`\[] \| `string`\[]\[], `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` \| `string`\[] ; `splitBreaks`: (`text`: `string`) => `string`\[] } |
-| `common.evaluate`            | (`val?`: `string` \| `boolean`) => `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| `common.getMax`              | (...`values`: `number`\[]) => `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `common.getMin`              | (...`values`: `number`\[]) => `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `common.getRows`             | (`s?`: `string`) => `string`\[]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `common.getUrl`              | (`useAbsolute`: `boolean`) => `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `common.hasBreaks`           | (`text`: `string`) => `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `common.lineBreakRegex`      | `RegExp`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| `common.removeScript`        | (`txt`: `string`) => `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| `common.sanitizeText`        | (`text`: `string`, `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `common.sanitizeTextOrArray` | (`a`: `string` \| `string`\[] \| `string`\[]\[], `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` \| `string`\[]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `common.splitBreaks`         | (`text`: `string`) => `string`\[]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `getConfig`                  | () => [`MermaidConfig`](mermaid.MermaidConfig.md)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `insertCluster`              | (`elem`: `any`, `node`: `any`) => `Promise`<`any`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `insertEdge`                 | (`elem`: `any`, `edge`: `any`, `clusterDb`: `any`, `diagramType`: `any`, `startNode`: `any`, `endNode`: `any`, `id`: `any`) => { `originalPath`: `any` ; `updatedPath`: `any` }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `insertEdgeLabel`            | (`elem`: `any`, `edge`: `any`) => `Promise`<`any`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `insertMarkers`              | (`elem`: `any`, `markerArray`: `any`, `type`: `any`, `id`: `any`) => `void`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `insertNode`                 | (`elem`: `any`, `node`: `any`, `dir`: `any`) => `Promise`<`any`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| `interpolateToCurve`         | (`interpolate`: `undefined` \| `string`, `defaultCurve`: `CurveFactory`) => `CurveFactory`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `labelHelper`                | (`parent`: `any`, `node`: `any`, `_classes`: `any`) => `Promise`<{ `bbox`: `any` ; `halfPadding`: `number` ; `label`: `any` = labelEl; `shapeSvg`: `any` }>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `log`                        | `Record`<`LogLevel`, (...`data`: `any`\[]) => `void`(`message?`: `any`, ...`optionalParams`: `any`\[]) => `void`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `positionEdgeLabel`          | (`edge`: `any`, `paths`: `any`) => `void`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439)
+[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
 
 ---
 
@@ -173,7 +130,7 @@ Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) in
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:421](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L421)
+[packages/mermaid/src/mermaid.ts:424](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L424)
 
 ---
 
@@ -223,7 +180,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:422](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L422)
+[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
 
 ---
 
@@ -233,7 +190,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:416](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L416)
+[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)
 
 ---
 
@@ -261,7 +218,7 @@ Used to register external diagram types.
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)
+[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
 
 ---
 
@@ -285,7 +242,7 @@ Used to register external diagram types.
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:429](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L429)
+[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
 
 ---
 
@@ -311,7 +268,7 @@ Used to register external diagram types.
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:423](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L423)
+[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
 
 ---
 
@@ -359,7 +316,7 @@ Renders the mermaid diagrams
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:428](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L428)
+[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
 
 ---
 
@@ -394,7 +351,7 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
+[packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
 
 ---
 
@@ -404,4 +361,4 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:415](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L415)
+[packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L418)
diff --git a/docs/config/setup/interfaces/mermaid.RenderOptions.md b/docs/config/setup/interfaces/mermaid.RenderOptions.md
new file mode 100644
index 000000000..9319cb3b1
--- /dev/null
+++ b/docs/config/setup/interfaces/mermaid.RenderOptions.md
@@ -0,0 +1,19 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderOptions.md).
+
+# Interface: RenderOptions
+
+[mermaid](../modules/mermaid.md).RenderOptions
+
+## Properties
+
+### algorithm
+
+• `Optional` **algorithm**: `string`
+
+#### Defined in
+
+[packages/mermaid/src/rendering-util/render.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L8)
diff --git a/docs/config/setup/interfaces/mermaid.RunOptions.md b/docs/config/setup/interfaces/mermaid.RunOptions.md
index 6fccdc454..aae004d6d 100644
--- a/docs/config/setup/interfaces/mermaid.RunOptions.md
+++ b/docs/config/setup/interfaces/mermaid.RunOptions.md
@@ -18,7 +18,7 @@ The nodes to render. If this is set, `querySelector` will be ignored.
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:45](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L45)
+[packages/mermaid/src/mermaid.ts:48](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L48)
 
 ---
 
@@ -44,7 +44,7 @@ A callback to call after each diagram is rendered.
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:49](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L49)
+[packages/mermaid/src/mermaid.ts:52](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L52)
 
 ---
 
@@ -56,7 +56,7 @@ The query selector to use when finding elements to render. Default: `".mermaid"`
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:41](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L41)
+[packages/mermaid/src/mermaid.ts:44](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L44)
 
 ---
 
@@ -68,4 +68,4 @@ If `true`, errors will be logged to the console, but not thrown. Default: `false
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:53](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L53)
+[packages/mermaid/src/mermaid.ts:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L56)
diff --git a/docs/config/setup/modules/mermaid.md b/docs/config/setup/modules/mermaid.md
index ac1bbece0..bdaeb05e1 100644
--- a/docs/config/setup/modules/mermaid.md
+++ b/docs/config/setup/modules/mermaid.md
@@ -20,11 +20,22 @@
 - [MermaidConfig](../interfaces/mermaid.MermaidConfig.md)
 - [ParseOptions](../interfaces/mermaid.ParseOptions.md)
 - [ParseResult](../interfaces/mermaid.ParseResult.md)
+- [RenderOptions](../interfaces/mermaid.RenderOptions.md)
 - [RenderResult](../interfaces/mermaid.RenderResult.md)
 - [RunOptions](../interfaces/mermaid.RunOptions.md)
 
 ## Type Aliases
 
+### InternalHelpers
+
+Ƭ **InternalHelpers**: typeof `internalHelpers`
+
+#### Defined in
+
+[packages/mermaid/src/internals.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/internals.ts#L33)
+
+---
+
 ### ParseErrorFunction
 
 Ƭ **ParseErrorFunction**: (`err`: `string` | [`DetailedError`](../interfaces/mermaid.DetailedError.md) | `unknown`, `hash?`: `any`) => `void`
@@ -48,6 +59,26 @@
 
 [packages/mermaid/src/Diagram.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/Diagram.ts#L10)
 
+---
+
+### SVG
+
+Ƭ **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
+
+#### Defined in
+
+[packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)
+
+---
+
+### SVGGroup
+
+Ƭ **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
+
+#### Defined in
+
+[packages/mermaid/src/diagram-api/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L132)
+
 ## Variables
 
 ### default
@@ -56,4 +87,4 @@
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
+[packages/mermaid/src/mermaid.ts:440](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L440)
diff --git a/packages/mermaid-layout-elk/package.json b/packages/mermaid-layout-elk/package.json
index 4f8054682..f833dba52 100644
--- a/packages/mermaid-layout-elk/package.json
+++ b/packages/mermaid-layout-elk/package.json
@@ -31,13 +31,16 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "elkjs": "^0.9.3",
-    "d3": "^7.9.0"
+    "d3": "^7.9.0",
+    "elkjs": "^0.9.3"
   },
   "peerDependencies": {
     "mermaid": "workspace:^"
   },
   "files": [
     "dist"
-  ]
+  ],
+  "devDependencies": {
+    "@types/d3": "^7.4.3"
+  }
 }
diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts
index 81453f47f..0fac3d867 100644
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
@@ -1,466 +1,750 @@
-// @ts-nocheck File not ready to check types
 import { curveLinear } from 'd3';
 import ELK from 'elkjs/lib/elk.bundled.js';
-import mermaid, { type LayoutData } from 'mermaid';
+import type { InternalHelpers, LayoutData, RenderOptions, SVG, SVGGroup } from 'mermaid';
 import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';
 
-const {
-  common,
-  getConfig,
-  insertCluster,
-  insertEdge,
-  insertEdgeLabel,
-  insertMarkers,
-  insertNode,
-  interpolateToCurve,
-  labelHelper,
-  log,
-  positionEdgeLabel,
-} = mermaid.internalHelpers;
-// import { insertEdge } from '../../mermaid/src/rendering-util/rendering-elements/edges.js';
-const nodeDb = {};
-const portPos = {};
-const clusterDb = {};
+export const render = async (
+  data4Layout: LayoutData,
+  svg: SVG,
+  element: any,
+  {
+    common,
+    getConfig,
+    insertCluster,
+    insertEdge,
+    insertEdgeLabel,
+    insertMarkers,
+    insertNode,
+    interpolateToCurve,
+    labelHelper,
+    log,
+    positionEdgeLabel,
+  }: InternalHelpers,
+  { algorithm }: RenderOptions
+) => {
+  const nodeDb: Record<string, any> = {};
+  const clusterDb: Record<string, any> = {};
 
-export const addVertex = async (nodeEl, graph, nodeArr, node) => {
-  const labelData = { width: 0, height: 0 };
-  // const ports = [
-  //   {
-  //     id: node.id + '-west',
-  //     layoutOptions: {
-  //       'port.side': 'WEST',
-  //     },
-  //   },
-  //   {
-  //     id: node.id + '-east',
-  //     layoutOptions: {
-  //       'port.side': 'EAST',
-  //     },
-  //   },
-  //   {
-  //     id: node.id + '-south',
-  //     layoutOptions: {
-  //       'port.side': 'SOUTH',
-  //     },
-  //   },
-  //   {
-  //     id: node.id + '-north',
-  //     layoutOptions: {
-  //       'port.side': 'NORTH',
-  //     },
-  //   },
-  // ];
+  const addVertex = async (nodeEl: any, graph: { children: any[] }, nodeArr: any, node: any) => {
+    const labelData: any = { width: 0, height: 0 };
 
-  let boundingBox;
-  const child = {
-    ...node,
-    // ports: node.shape === 'diamond' ? ports : [],
-  };
-  graph.children.push(child);
-  nodeDb[node.id] = child;
+    let boundingBox;
+    const child = {
+      ...node,
+    };
+    graph.children.push(child);
+    nodeDb[node.id] = child;
 
-  // Add the element to the DOM
-  if (!node.isGroup) {
-    const childNodeEl = await insertNode(nodeEl, node, node.dir);
-    boundingBox = childNodeEl.node().getBBox();
-    child.domId = childNodeEl;
-    child.width = boundingBox.width;
-    child.height = boundingBox.height;
-  } else {
-    // A subgraph
-    child.children = [];
-    await addVertices(nodeEl, nodeArr, child, node.id);
-
-    if (node.label) {
-      const { shapeSvg, bbox } = await labelHelper(nodeEl, node, undefined, true);
-      labelData.width = bbox.width;
-      labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
-      // Give some padding for elk
-      labelData.height = bbox.height - 2;
-      labelData.labelNode = shapeSvg.node();
-      // We need the label hight to be able to size the subgraph;
-      shapeSvg.remove();
+    // Add the element to the DOM
+    if (!node.isGroup) {
+      const childNodeEl = await insertNode(nodeEl, node, node.dir);
+      boundingBox = childNodeEl.node().getBBox();
+      child.domId = childNodeEl;
+      child.width = boundingBox.width;
+      child.height = boundingBox.height;
     } else {
-      // Subgraph without label
-      labelData.width = 0;
-      labelData.height = 0;
-    }
-    child.labelData = labelData;
-    child.domId = nodeEl;
-  }
-};
+      // A subgraph
+      child.children = [];
+      await addVertices(nodeEl, nodeArr, child, node.id);
 
-export const addVertices = async function (nodeEl, nodeArr, graph, parentId) {
-  const siblings = nodeArr.filter((node) => node.parentId === parentId);
-  log.info('addVertices APA12', siblings, parentId);
-  // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
-  await Promise.all(
-    siblings.map(async (node) => {
-      await addVertex(nodeEl, graph, nodeArr, node);
-    })
-  );
-  return graph;
-};
-
-const drawNodes = async (relX, relY, nodeArray, svg, subgraphsEl, depth) => {
-  await Promise.all(
-    nodeArray.map(async function (node) {
-      if (node) {
-        nodeDb[node.id] = node;
-        nodeDb[node.id].offset = {
-          posX: node.x + relX,
-          posY: node.y + relY,
-          x: relX,
-          y: relY,
-          depth,
-          width: Math.max(node.width, node.labels ? node.labels[0]?.width || 0 : 0),
-          height: node.height,
-        };
-        if (node.isGroup) {
-          log.debug('Id abc88 subgraph = ', node.id, node.x, node.y, node.labelData);
-          const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph');
-          // TODO use faster way of cloning
-          const clusterNode = JSON.parse(JSON.stringify(node));
-          clusterNode.x = node.offset.posX + node.width / 2;
-          clusterNode.y = node.offset.posY + node.height / 2;
-          await insertCluster(subgraphEl, clusterNode);
-
-          log.debug('Id (UIO)= ', node.id, node.width, node.shape, node.labels);
-        } else {
-          log.info(
-            'Id NODE = ',
-            node.id,
-            node.x,
-            node.y,
-            relX,
-            relY,
-            node.domId.node(),
-            `translate(${node.x + relX + node.width / 2}, ${node.y + relY + node.height / 2})`
-          );
-          node.domId.attr(
-            'transform',
-            `translate(${node.x + relX + node.width / 2}, ${node.y + relY + node.height / 2})`
-          );
-        }
+      if (node.label) {
+        // @ts-ignore TODO: fix this
+        const { shapeSvg, bbox } = await labelHelper(nodeEl, node, undefined, true);
+        labelData.width = bbox.width;
+        labelData.wrappingWidth = getConfig().flowchart!.wrappingWidth;
+        // Give some padding for elk
+        labelData.height = bbox.height - 2;
+        labelData.labelNode = shapeSvg.node();
+        // We need the label hight to be able to size the subgraph;
+        shapeSvg.remove();
+      } else {
+        // Subgraph without label
+        labelData.width = 0;
+        labelData.height = 0;
       }
-    })
-  );
-
-  await Promise.all(
-    nodeArray.map(async function (node) {
-      if (node?.isGroup) {
-        await drawNodes(relX + node.x, relY + node.y, node.children, svg, subgraphsEl, depth + 1);
-      }
-    })
-  );
-};
-
-const getNextPort = (node, edgeDirection, graphDirection) => {
-  log.info('getNextPort abc88', { node, edgeDirection, graphDirection });
-  if (!portPos[node]) {
-    switch (graphDirection) {
-      case 'TB':
-      case 'TD':
-        portPos[node] = {
-          inPosition: 'north',
-          outPosition: 'south',
-        };
-        break;
-      case 'BT':
-        portPos[node] = {
-          inPosition: 'south',
-          outPosition: 'north',
-        };
-        break;
-      case 'RL':
-        portPos[node] = {
-          inPosition: 'east',
-          outPosition: 'west',
-        };
-        break;
-      case 'LR':
-        portPos[node] = {
-          inPosition: 'west',
-          outPosition: 'east',
-        };
-        break;
+      child.labelData = labelData;
+      child.domId = nodeEl;
     }
-  }
-  const result = edgeDirection === 'in' ? portPos[node].inPosition : portPos[node].outPosition;
+  };
 
-  if (edgeDirection === 'in') {
-    portPos[node].inPosition = getNextPosition(
-      portPos[node].inPosition,
-      edgeDirection,
-      graphDirection
+  const addVertices = async function (
+    nodeEl: any,
+    nodeArr: any[],
+    graph: {
+      id: string;
+      layoutOptions: {
+        'elk.hierarchyHandling': string;
+        'elk.algorithm': any;
+        'nodePlacement.strategy': any;
+        'elk.layered.mergeEdges': any;
+        'elk.direction': string;
+        'spacing.baseValue': number;
+      };
+      children: never[];
+      edges: never[];
+    },
+    parentId?: undefined
+  ) {
+    const siblings = nodeArr.filter((node: { parentId: any }) => node.parentId === parentId);
+    log.info('addVertices APA12', siblings, parentId);
+    // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
+    await Promise.all(
+      siblings.map(async (node: any) => {
+        await addVertex(nodeEl, graph, nodeArr, node);
+      })
     );
-  } else {
-    portPos[node].outPosition = getNextPosition(
-      portPos[node].outPosition,
-      edgeDirection,
-      graphDirection
-    );
-  }
-  return result;
-};
+    return graph;
+  };
 
-const addSubGraphs = (nodeArr): TreeData => {
-  const parentLookupDb: TreeData = { parentById: {}, childrenById: {} };
-  const subgraphs = nodeArr.filter((node) => node.isGroup);
-  log.info('Subgraphs - ', subgraphs);
-  subgraphs.forEach((subgraph) => {
-    const children = nodeArr.filter((node) => node.parentId === subgraph.id);
-    children.forEach((node) => {
-      parentLookupDb.parentById[node.id] = subgraph.id;
-      if (parentLookupDb.childrenById[subgraph.id] === undefined) {
-        parentLookupDb.childrenById[subgraph.id] = [];
-      }
-      parentLookupDb.childrenById[subgraph.id].push(node);
-    });
-  });
+  const drawNodes = async (
+    relX: number,
+    relY: number,
+    nodeArray: any[],
+    svg: any,
+    subgraphsEl: SVGGroup,
+    depth: number
+  ) => {
+    await Promise.all(
+      nodeArray.map(async function (node: {
+        id: string | number;
+        x: any;
+        y: any;
+        width: number;
+        labels: { width: any }[];
+        height: number;
+        isGroup: any;
+        labelData: any;
+        offset: { posX: number; posY: number };
+        shape: any;
+        domId: { node: () => any; attr: (arg0: string, arg1: string) => void };
+      }) {
+        if (node) {
+          nodeDb[node.id] = node;
+          nodeDb[node.id].offset = {
+            posX: node.x + relX,
+            posY: node.y + relY,
+            x: relX,
+            y: relY,
+            depth,
+            width: Math.max(node.width, node.labels ? node.labels[0]?.width || 0 : 0),
+            height: node.height,
+          };
+          if (node.isGroup) {
+            log.debug('Id abc88 subgraph = ', node.id, node.x, node.y, node.labelData);
+            const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph');
+            // TODO use faster way of cloning
+            const clusterNode = JSON.parse(JSON.stringify(node));
+            clusterNode.x = node.offset.posX + node.width / 2;
+            clusterNode.y = node.offset.posY + node.height / 2;
+            await insertCluster(subgraphEl, clusterNode);
 
-  subgraphs.forEach(function (subgraph) {
-    const data = { id: subgraph.id };
-    if (parentLookupDb.parentById[subgraph.id] !== undefined) {
-      data.parent = parentLookupDb.parentById[subgraph.id];
-    }
-  });
-  return parentLookupDb;
-};
-
-const getEdgeStartEndPoint = (edge, dir) => {
-  let source = edge.start;
-  let target = edge.end;
-
-  // Save the original source and target
-  const sourceId = source;
-  const targetId = target;
-
-  const startNode = nodeDb[edge.start.id];
-  const endNode = nodeDb[edge.end.id];
-
-  if (!startNode || !endNode) {
-    return { source, target };
-  }
-
-  if (startNode.shape === 'diamond') {
-    source = `${source}-${getNextPort(source, 'out', dir)}`;
-  }
-
-  if (endNode.shape === 'diamond') {
-    target = `${target}-${getNextPort(target, 'in', dir)}`;
-  }
-
-  // Add the edge to the graph
-  return { source, target, sourceId, targetId };
-};
-
-const calcOffset = function (src: string, dest: string, parentLookupDb: TreeData) {
-  const ancestor = findCommonAncestor(src, dest, parentLookupDb);
-  if (ancestor === undefined || ancestor === 'root') {
-    return { x: 0, y: 0 };
-  }
-
-  const ancestorOffset = nodeDb[ancestor].offset;
-  return { x: ancestorOffset.posX, y: ancestorOffset.posY };
-};
-
-/**
- * Add edges to graph based on parsed graph definition
- */
-export const addEdges = async function (dataForLayout, graph, svg) {
-  log.info('abc78 DAGA edges = ', dataForLayout);
-  const edges = dataForLayout.edges;
-  const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
-  const linkIdCnt = {};
-  const dir = dataForLayout.direction || 'DOWN';
-  let defaultStyle;
-  let defaultLabelStyle;
-
-  await Promise.all(
-    edges.map(async function (edge) {
-      // Identify Link
-      const linkIdBase = edge.id; // 'L-' + edge.start + '-' + edge.end;
-      // count the links from+to the same node to give unique id
-      if (linkIdCnt[linkIdBase] === undefined) {
-        linkIdCnt[linkIdBase] = 0;
-        log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
-      } else {
-        linkIdCnt[linkIdBase]++;
-        log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
-      }
-      const linkId = linkIdBase + '_' + linkIdCnt[linkIdBase];
-      edge.id = linkId;
-      log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]);
-      const linkNameStart = 'LS_' + edge.start;
-      const linkNameEnd = 'LE_' + edge.end;
-
-      const edgeData = { style: '', labelStyle: '' };
-      edgeData.minlen = edge.length || 1;
-      edge.text = edge.label;
-      // Set link type for rendering
-      if (edge.type === 'arrow_open') {
-        edgeData.arrowhead = 'none';
-      } else {
-        edgeData.arrowhead = 'normal';
-      }
-
-      // Check of arrow types, placed here in order not to break old rendering
-      edgeData.arrowTypeStart = 'arrow_open';
-      edgeData.arrowTypeEnd = 'arrow_open';
-
-      /* eslint-disable no-fallthrough */
-      switch (edge.type) {
-        case 'double_arrow_cross':
-          edgeData.arrowTypeStart = 'arrow_cross';
-        case 'arrow_cross':
-          edgeData.arrowTypeEnd = 'arrow_cross';
-          break;
-        case 'double_arrow_point':
-          edgeData.arrowTypeStart = 'arrow_point';
-        case 'arrow_point':
-          edgeData.arrowTypeEnd = 'arrow_point';
-          break;
-        case 'double_arrow_circle':
-          edgeData.arrowTypeStart = 'arrow_circle';
-        case 'arrow_circle':
-          edgeData.arrowTypeEnd = 'arrow_circle';
-          break;
-      }
-
-      let style = '';
-      let labelStyle = '';
-
-      switch (edge.stroke) {
-        case 'normal':
-          style = 'fill:none;';
-          if (defaultStyle !== undefined) {
-            style = defaultStyle;
+            log.debug('Id (UIO)= ', node.id, node.width, node.shape, node.labels);
+          } else {
+            log.info(
+              'Id NODE = ',
+              node.id,
+              node.x,
+              node.y,
+              relX,
+              relY,
+              node.domId.node(),
+              `translate(${node.x + relX + node.width / 2}, ${node.y + relY + node.height / 2})`
+            );
+            node.domId.attr(
+              'transform',
+              `translate(${node.x + relX + node.width / 2}, ${node.y + relY + node.height / 2})`
+            );
           }
-          if (defaultLabelStyle !== undefined) {
-            labelStyle = defaultLabelStyle;
-          }
-          edgeData.thickness = 'normal';
-          edgeData.pattern = 'solid';
-          break;
-        case 'dotted':
-          edgeData.thickness = 'normal';
-          edgeData.pattern = 'dotted';
-          edgeData.style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
-          break;
-        case 'thick':
-          edgeData.thickness = 'thick';
-          edgeData.pattern = 'solid';
-          edgeData.style = 'stroke-width: 3.5px;fill:none;';
-          break;
-      }
-
-      edgeData.style = edgeData.style += style;
-      edgeData.labelStyle = edgeData.labelStyle += labelStyle;
-
-      const conf = getConfig();
-      if (edge.interpolate !== undefined) {
-        edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
-      } else if (edges.defaultInterpolate !== undefined) {
-        edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
-      } else {
-        edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
-      }
-
-      if (edge.text === undefined) {
-        if (edge.style !== undefined) {
-          edgeData.arrowheadStyle = 'fill: #333';
         }
-      } else {
-        edgeData.arrowheadStyle = 'fill: #333';
-        edgeData.labelpos = 'c';
-      }
+      })
+    );
 
-      edgeData.labelType = edge.labelType;
-      edgeData.label = (edge?.text || '').replace(common.lineBreakRegex, '\n');
+    await Promise.all(
+      nodeArray.map(async function (node: { isGroup: any; x: any; y: any; children: any }) {
+        if (node?.isGroup) {
+          await drawNodes(relX + node.x, relY + node.y, node.children, svg, subgraphsEl, depth + 1);
+        }
+      })
+    );
+  };
 
-      if (edge.style === undefined) {
-        edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;';
-      }
-
-      edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
-
-      edgeData.id = linkId;
-      edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;
-
-      const labelEl = await insertEdgeLabel(labelsEl, edgeData);
-
-      // calculate start and end points of the edge, note that the source and target
-      // can be modified for shapes that have ports
-      const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
-      log.debug('abc78 source and target', source, target);
-      // Add the edge to the graph
-      graph.edges.push({
-        id: 'e' + edge.start + edge.end,
-        ...edge,
-        sources: [source],
-        targets: [target],
-        sourceId,
-        targetId,
-        labelEl: labelEl,
-        labels: [
-          {
-            width: edgeData.width,
-            height: edgeData.height,
-            orgWidth: edgeData.width,
-            orgHeight: edgeData.height,
-            text: edgeData.label,
-            layoutOptions: {
-              'edgeLabels.inline': 'true',
-              'edgeLabels.placement': 'CENTER',
-            },
-          },
-        ],
-        edgeData,
+  const addSubGraphs = (nodeArr: any[]): TreeData => {
+    const parentLookupDb: TreeData = { parentById: {}, childrenById: {} };
+    const subgraphs = nodeArr.filter((node: { isGroup: any }) => node.isGroup);
+    log.info('Subgraphs - ', subgraphs);
+    subgraphs.forEach((subgraph: { id: string }) => {
+      const children = nodeArr.filter((node: { parentId: any }) => node.parentId === subgraph.id);
+      children.forEach((node: any) => {
+        parentLookupDb.parentById[node.id] = subgraph.id;
+        if (parentLookupDb.childrenById[subgraph.id] === undefined) {
+          parentLookupDb.childrenById[subgraph.id] = [];
+        }
+        parentLookupDb.childrenById[subgraph.id].push(node);
       });
-    })
-  );
-  return graph;
-};
+    });
 
-function dir2ElkDirection(dir) {
-  switch (dir) {
-    case 'LR':
-      return 'RIGHT';
-    case 'RL':
-      return 'LEFT';
-    case 'TB':
-      return 'DOWN';
-    case 'BT':
-      return 'UP';
-    default:
-      return 'DOWN';
-  }
-}
+    subgraphs.forEach(function (subgraph: { id: string | number }) {
+      const data: any = { id: subgraph.id };
+      if (parentLookupDb.parentById[subgraph.id] !== undefined) {
+        data.parent = parentLookupDb.parentById[subgraph.id];
+      }
+    });
+    return parentLookupDb;
+  };
 
-function setIncludeChildrenPolicy(nodeId: string, ancestorId: string) {
-  const node = nodeDb[nodeId];
+  const getEdgeStartEndPoint = (edge: any) => {
+    const source: any = edge.start;
+    const target: any = edge.end;
 
-  if (!node) {
-    return;
-  }
-  if (node?.layoutOptions === undefined) {
-    node.layoutOptions = {};
-  }
-  node.layoutOptions['elk.hierarchyHandling'] = 'INCLUDE_CHILDREN';
-  if (node.id !== ancestorId) {
-    setIncludeChildrenPolicy(node.parentId, ancestorId);
-  }
-}
+    // Save the original source and target
+    const sourceId = source;
+    const targetId = target;
 
-export const render = async (data4Layout: LayoutData, svg, element, algorithm) => {
+    const startNode = nodeDb[edge.start.id];
+    const endNode = nodeDb[edge.end.id];
+
+    if (!startNode || !endNode) {
+      return { source, target };
+    }
+
+    // Add the edge to the graph
+    return { source, target, sourceId, targetId };
+  };
+
+  const calcOffset = function (src: string, dest: string, parentLookupDb: TreeData) {
+    const ancestor = findCommonAncestor(src, dest, parentLookupDb);
+    if (ancestor === undefined || ancestor === 'root') {
+      return { x: 0, y: 0 };
+    }
+
+    const ancestorOffset = nodeDb[ancestor].offset;
+    return { x: ancestorOffset.posX, y: ancestorOffset.posY };
+  };
+
+  /**
+   * Add edges to graph based on parsed graph definition
+   */
+  const addEdges = async function (
+    dataForLayout: { edges: any; direction: string },
+    graph: {
+      id?: string;
+      layoutOptions?: {
+        'elk.hierarchyHandling': string;
+        'elk.algorithm': any;
+        'nodePlacement.strategy': any;
+        'elk.layered.mergeEdges': any;
+        'elk.direction': string;
+        'spacing.baseValue': number;
+      };
+      children?: never[];
+      edges: any;
+    },
+    svg: SVG
+  ) {
+    log.info('abc78 DAGA edges = ', dataForLayout);
+    const edges = dataForLayout.edges;
+    const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
+    const linkIdCnt: any = {};
+    const dir = dataForLayout.direction || 'DOWN';
+    let defaultStyle: string | undefined;
+    let defaultLabelStyle: string | undefined;
+
+    await Promise.all(
+      edges.map(async function (edge: {
+        id: string;
+        start: string;
+        end: string;
+        length: number;
+        text: undefined;
+        label: any;
+        type: string;
+        stroke: any;
+        interpolate: undefined;
+        style: undefined;
+        labelType: any;
+      }) {
+        // Identify Link
+        const linkIdBase = edge.id; // 'L-' + edge.start + '-' + edge.end;
+        // count the links from+to the same node to give unique id
+        if (linkIdCnt[linkIdBase] === undefined) {
+          linkIdCnt[linkIdBase] = 0;
+          log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
+        } else {
+          linkIdCnt[linkIdBase]++;
+          log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
+        }
+        const linkId = linkIdBase + '_' + linkIdCnt[linkIdBase];
+        edge.id = linkId;
+        log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]);
+        const linkNameStart = 'LS_' + edge.start;
+        const linkNameEnd = 'LE_' + edge.end;
+
+        const edgeData: any = { style: '', labelStyle: '' };
+        edgeData.minlen = edge.length || 1;
+        edge.text = edge.label;
+        // Set link type for rendering
+        if (edge.type === 'arrow_open') {
+          edgeData.arrowhead = 'none';
+        } else {
+          edgeData.arrowhead = 'normal';
+        }
+
+        // Check of arrow types, placed here in order not to break old rendering
+        edgeData.arrowTypeStart = 'arrow_open';
+        edgeData.arrowTypeEnd = 'arrow_open';
+
+        /* eslint-disable no-fallthrough */
+        switch (edge.type) {
+          case 'double_arrow_cross':
+            edgeData.arrowTypeStart = 'arrow_cross';
+          case 'arrow_cross':
+            edgeData.arrowTypeEnd = 'arrow_cross';
+            break;
+          case 'double_arrow_point':
+            edgeData.arrowTypeStart = 'arrow_point';
+          case 'arrow_point':
+            edgeData.arrowTypeEnd = 'arrow_point';
+            break;
+          case 'double_arrow_circle':
+            edgeData.arrowTypeStart = 'arrow_circle';
+          case 'arrow_circle':
+            edgeData.arrowTypeEnd = 'arrow_circle';
+            break;
+        }
+
+        let style = '';
+        let labelStyle = '';
+
+        switch (edge.stroke) {
+          case 'normal':
+            style = 'fill:none;';
+            if (defaultStyle !== undefined) {
+              style = defaultStyle;
+            }
+            if (defaultLabelStyle !== undefined) {
+              labelStyle = defaultLabelStyle;
+            }
+            edgeData.thickness = 'normal';
+            edgeData.pattern = 'solid';
+            break;
+          case 'dotted':
+            edgeData.thickness = 'normal';
+            edgeData.pattern = 'dotted';
+            edgeData.style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
+            break;
+          case 'thick':
+            edgeData.thickness = 'thick';
+            edgeData.pattern = 'solid';
+            edgeData.style = 'stroke-width: 3.5px;fill:none;';
+            break;
+        }
+
+        edgeData.style = edgeData.style += style;
+        edgeData.labelStyle = edgeData.labelStyle += labelStyle;
+
+        const conf = getConfig();
+        if (edge.interpolate !== undefined) {
+          edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
+        } else if (edges.defaultInterpolate !== undefined) {
+          edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
+        } else {
+          // @ts-ignore TODO: fix this
+          edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
+        }
+
+        if (edge.text === undefined) {
+          if (edge.style !== undefined) {
+            edgeData.arrowheadStyle = 'fill: #333';
+          }
+        } else {
+          edgeData.arrowheadStyle = 'fill: #333';
+          edgeData.labelpos = 'c';
+        }
+
+        edgeData.labelType = edge.labelType;
+        edgeData.label = (edge?.text || '').replace(common.lineBreakRegex, '\n');
+
+        if (edge.style === undefined) {
+          edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;';
+        }
+
+        edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
+
+        edgeData.id = linkId;
+        edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;
+
+        const labelEl = await insertEdgeLabel(labelsEl, edgeData);
+
+        // calculate start and end points of the edge, note that the source and target
+        // can be modified for shapes that have ports
+        const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
+        log.debug('abc78 source and target', source, target);
+        // Add the edge to the graph
+        graph.edges.push({
+          // @ts-ignore TODO: fix this
+          id: 'e' + edge.start + edge.end,
+          ...edge,
+          sources: [source],
+          targets: [target],
+          sourceId,
+          targetId,
+          labelEl: labelEl,
+          labels: [
+            {
+              width: edgeData.width,
+              height: edgeData.height,
+              orgWidth: edgeData.width,
+              orgHeight: edgeData.height,
+              text: edgeData.label,
+              layoutOptions: {
+                'edgeLabels.inline': 'true',
+                'edgeLabels.placement': 'CENTER',
+              },
+            },
+          ],
+          edgeData,
+        });
+      })
+    );
+    return graph;
+  };
+
+  function dir2ElkDirection(dir: any) {
+    switch (dir) {
+      case 'LR':
+        return 'RIGHT';
+      case 'RL':
+        return 'LEFT';
+      case 'TB':
+        return 'DOWN';
+      case 'BT':
+        return 'UP';
+      default:
+        return 'DOWN';
+    }
+  }
+
+  function setIncludeChildrenPolicy(nodeId: string, ancestorId: string) {
+    const node = nodeDb[nodeId];
+
+    if (!node) {
+      return;
+    }
+    if (node?.layoutOptions === undefined) {
+      node.layoutOptions = {};
+    }
+    node.layoutOptions['elk.hierarchyHandling'] = 'INCLUDE_CHILDREN';
+    if (node.id !== ancestorId) {
+      setIncludeChildrenPolicy(node.parentId, ancestorId);
+    }
+  }
+
+  function intersectLine(
+    p1: { y: number; x: number },
+    p2: { y: number; x: number },
+    q1: { x: any; y: any },
+    q2: { x: any; y: any }
+  ) {
+    log.debug('UIO intersectLine', p1, p2, q1, q2);
+    // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,
+    // p7 and p473.
+
+    // let a1, a2, b1, b2, c1, c2;
+    // let r1, r2, r3, r4;
+    // let denom, offset, num;
+    // let x, y;
+
+    // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +
+    // b1 y + c1 = 0.
+    const a1 = p2.y - p1.y;
+    const b1 = p1.x - p2.x;
+    const c1 = p2.x * p1.y - p1.x * p2.y;
+
+    // Compute r3 and r4.
+    const r3 = a1 * q1.x + b1 * q1.y + c1;
+    const r4 = a1 * q2.x + b1 * q2.y + c1;
+
+    // Check signs of r3 and r4. If both point 3 and point 4 lie on
+    // same side of line 1, the line segments do not intersect.
+    if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
+      return /*DON'T_INTERSECT*/;
+    }
+
+    // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0
+    const a2 = q2.y - q1.y;
+    const b2 = q1.x - q2.x;
+    const c2 = q2.x * q1.y - q1.x * q2.y;
+
+    // Compute r1 and r2
+    const r1 = a2 * p1.x + b2 * p1.y + c2;
+    const r2 = a2 * p2.x + b2 * p2.y + c2;
+
+    // Check signs of r1 and r2. If both point 1 and point 2 lie
+    // on same side of second line segment, the line segments do
+    // not intersect.
+    if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) {
+      return /*DON'T_INTERSECT*/;
+    }
+
+    // Line segments intersect: compute intersection point.
+    const denom = a1 * b2 - a2 * b1;
+    if (denom === 0) {
+      return /*COLLINEAR*/;
+    }
+
+    const offset = Math.abs(denom / 2);
+
+    // The denom/2 is to get rounding instead of truncating. It
+    // is added or subtracted to the numerator, depending upon the
+    // sign of the numerator.
+    let num = b1 * c2 - b2 * c1;
+    const x = num < 0 ? (num - offset) / denom : (num + offset) / denom;
+
+    num = a2 * c1 - a1 * c2;
+    const y = num < 0 ? (num - offset) / denom : (num + offset) / denom;
+
+    return { x: x, y: y };
+  }
+
+  function sameSign(r1: number, r2: number) {
+    return r1 * r2 > 0;
+  }
+  const diamondIntersection = (
+    bounds: { x: any; y: any; width: any; height: any },
+    outsidePoint: { x: number; y: number },
+    insidePoint: any
+  ) => {
+    const x1 = bounds.x;
+    const y1 = bounds.y;
+
+    const w = bounds.width; //+ bounds.padding;
+    const h = bounds.height; // + bounds.padding;
+
+    const polyPoints = [
+      { x: x1, y: y1 - h / 2 },
+      { x: x1 + w / 2, y: y1 },
+      { x: x1, y: y1 + h / 2 },
+      { x: x1 - w / 2, y: y1 },
+    ];
+    log.debug(
+      `UIO diamondIntersection calc abc89:
+  outsidePoint: ${JSON.stringify(outsidePoint)}
+  insidePoint : ${JSON.stringify(insidePoint)}
+  node        : x:${bounds.x} y:${bounds.y} w:${bounds.width} h:${bounds.height}`,
+      polyPoints
+    );
+
+    const intersections = [];
+
+    let minX = Number.POSITIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+
+    polyPoints.forEach(function (entry) {
+      minX = Math.min(minX, entry.x);
+      minY = Math.min(minY, entry.y);
+    });
+
+    // const left = x1 - w / 2;
+    // const top = y1 + h / 2;
+
+    for (let i = 0; i < polyPoints.length; i++) {
+      const p1 = polyPoints[i];
+      const p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];
+      const intersect = intersectLine(
+        bounds,
+        outsidePoint,
+        { x: p1.x, y: p1.y },
+        { x: p2.x, y: p2.y }
+      );
+
+      if (intersect) {
+        intersections.push(intersect);
+      }
+    }
+
+    if (!intersections.length) {
+      return bounds;
+    }
+
+    log.debug('UIO intersections', intersections);
+
+    if (intersections.length > 1) {
+      // More intersections, find the one nearest to edge end point
+      intersections.sort(function (p, q) {
+        const pdx = p.x - outsidePoint.x;
+        const pdy = p.y - outsidePoint.y;
+        const distp = Math.sqrt(pdx * pdx + pdy * pdy);
+
+        const qdx = q.x - outsidePoint.x;
+        const qdy = q.y - outsidePoint.y;
+        const distq = Math.sqrt(qdx * qdx + qdy * qdy);
+
+        return distp < distq ? -1 : distp === distq ? 0 : 1;
+      });
+    }
+
+    return intersections[0];
+  };
+
+  const intersection = (
+    node: { x: any; y: any; width: number; height: number },
+    outsidePoint: { x: number; y: number },
+    insidePoint: { x: number; y: number }
+  ) => {
+    log.debug(`intersection calc abc89:
+  outsidePoint: ${JSON.stringify(outsidePoint)}
+  insidePoint : ${JSON.stringify(insidePoint)}
+  node        : x:${node.x} y:${node.y} w:${node.width} h:${node.height}`);
+    const x = node.x;
+    const y = node.y;
+
+    const dx = Math.abs(x - insidePoint.x);
+    // const dy = Math.abs(y - insidePoint.y);
+    const w = node.width / 2;
+    let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx;
+    const h = node.height / 2;
+
+    const Q = Math.abs(outsidePoint.y - insidePoint.y);
+    const R = Math.abs(outsidePoint.x - insidePoint.x);
+
+    if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) {
+      // Intersection is top or bottom of rect.
+      const q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
+      r = (R * q) / Q;
+      const res = {
+        x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - R + r,
+        y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y - Q + q,
+      };
+
+      if (r === 0) {
+        res.x = outsidePoint.x;
+        res.y = outsidePoint.y;
+      }
+      if (R === 0) {
+        res.x = outsidePoint.x;
+      }
+      if (Q === 0) {
+        res.y = outsidePoint.y;
+      }
+
+      log.debug(`abc89 topp/bott calc, Q ${Q}, q ${q}, R ${R}, r ${r}`, res); // cspell: disable-line
+
+      return res;
+    } else {
+      // Intersection onn sides of rect
+      if (insidePoint.x < outsidePoint.x) {
+        r = outsidePoint.x - w - x;
+      } else {
+        // r = outsidePoint.x - w - x;
+        r = x - w - outsidePoint.x;
+      }
+      const q = (Q * r) / R;
+      //  OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x + dx - w;
+      // OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r;
+      let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x - R + r;
+      // let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r;
+      let _y = insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q;
+      log.debug(`sides calc abc89, Q ${Q}, q ${q}, R ${R}, r ${r}`, { _x, _y });
+      if (r === 0) {
+        _x = outsidePoint.x;
+        _y = outsidePoint.y;
+      }
+      if (R === 0) {
+        _x = outsidePoint.x;
+      }
+      if (Q === 0) {
+        _y = outsidePoint.y;
+      }
+
+      return { x: _x, y: _y };
+    }
+  };
+  const outsideNode = (
+    node: { x: any; y: any; width: number; height: number },
+    point: { x: number; y: number }
+  ) => {
+    const x = node.x;
+    const y = node.y;
+    const dx = Math.abs(point.x - x);
+    const dy = Math.abs(point.y - y);
+    const w = node.width / 2;
+    const h = node.height / 2;
+    if (dx >= w || dy >= h) {
+      return true;
+    }
+    return false;
+  };
+  /**
+   * This function will page a path and node where the last point(s) in the path is inside the node
+   * and return an update path ending by the border of the node.
+   */
+  const cutPathAtIntersect = (
+    _points: any[],
+    bounds: { x: any; y: any; width: any; height: any; padding: any },
+    isDiamond: boolean
+  ) => {
+    log.debug('UIO cutPathAtIntersect Points:', _points, 'node:', bounds, 'isDiamond', isDiamond);
+    const points: any[] = [];
+    let lastPointOutside = _points[0];
+    let isInside = false;
+    _points.forEach((point: any) => {
+      // const node = clusterDb[edge.toCluster].node;
+      log.debug(' checking point', point, bounds);
+
+      // check if point is inside the boundary rect
+      if (!outsideNode(bounds, point) && !isInside) {
+        // First point inside the rect found
+        // Calc the intersection coord between the point anf the last point outside the rect
+        let inter;
+
+        if (isDiamond) {
+          const inter2 = diamondIntersection(bounds, lastPointOutside, point);
+          const distance = Math.sqrt(
+            (lastPointOutside.x - inter2.x) ** 2 + (lastPointOutside.y - inter2.y) ** 2
+          );
+          if (distance > 1) {
+            inter = inter2;
+          }
+        }
+        if (!inter) {
+          inter = intersection(bounds, lastPointOutside, point);
+        }
+
+        // Check case where the intersection is the same as the last point
+        let pointPresent = false;
+        points.forEach((p) => {
+          pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y);
+        });
+        // if (!pointPresent) {
+        if (!points.some((e) => e.x === inter.x && e.y === inter.y)) {
+          points.push(inter);
+        } else {
+          log.debug('abc88 no intersect', inter, points);
+        }
+        // points.push(inter);
+        isInside = true;
+      } else {
+        // Outside
+        log.debug('abc88 outside', point, lastPointOutside, points);
+        lastPointOutside = point;
+        // points.push(point);
+        if (!isInside) {
+          points.push(point);
+        }
+      }
+    });
+    log.debug('returning points', points);
+    return points;
+  };
+
+  // @ts-ignore - ELK is not typed
   const elk = new ELK();
 
   // Add the arrowheads to the svg
   insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
 
   // Setup the graph with the layout options and the data for the layout
-  let elkGraph = {
+  let elkGraph: any = {
     id: 'root',
     layoutOptions: {
       'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
@@ -489,7 +773,7 @@ export const render = async (data4Layout: LayoutData, svg, element, algorithm) =
 
   // Create the lookup db for the subgraphs and their children to used when creating
   // the tree structured graph
-  const parentLookupDb = addSubGraphs(data4Layout.nodes);
+  const parentLookupDb: any = addSubGraphs(data4Layout.nodes);
 
   // Add elements in the svg to be used to hold the subgraphs container
   // elements and the nodes
@@ -510,7 +794,7 @@ export const render = async (data4Layout: LayoutData, svg, element, algorithm) =
 
   // Iterate through all nodes and add the top level nodes to the graph
   const nodes = data4Layout.nodes;
-  nodes.forEach((n) => {
+  nodes.forEach((n: { id: string | number }) => {
     const node = nodeDb[n.id];
 
     // Subgraph
@@ -544,7 +828,7 @@ export const render = async (data4Layout: LayoutData, svg, element, algorithm) =
       delete node.height;
     }
   });
-  elkGraph.edges.forEach((edge) => {
+  elkGraph.edges.forEach((edge: any) => {
     const source = edge.sources[0];
     const target = edge.targets[0];
 
@@ -560,438 +844,149 @@ export const render = async (data4Layout: LayoutData, svg, element, algorithm) =
 
   // debugger;
   await drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
-  g.edges?.map((edge) => {
-    // (elem, edge, clusterDb, diagramType, graph, id)
-    const startNode = nodeDb[edge.sources[0]];
-    const startCluster = parentLookupDb[edge.sources[0]];
-    const endNode = nodeDb[edge.targets[0]];
-    const sourceId = edge.start;
-    const targetId = edge.end;
+  g.edges?.map(
+    (edge: {
+      sources: (string | number)[];
+      targets: (string | number)[];
+      start: any;
+      end: any;
+      sections: { startPoint: any; endPoint: any; bendPoints: any }[];
+      points: any[];
+      x: any;
+      labels: { height: number; width: number; x: number; y: number }[];
+      y: any;
+    }) => {
+      // (elem, edge, clusterDb, diagramType, graph, id)
+      const startNode = nodeDb[edge.sources[0]];
+      const startCluster = parentLookupDb[edge.sources[0]];
+      const endNode = nodeDb[edge.targets[0]];
+      const sourceId = edge.start;
+      const targetId = edge.end;
 
-    const offset = calcOffset(sourceId, targetId, parentLookupDb);
-    log.debug(
-      'offset',
-      offset,
-      sourceId,
-      ' ==> ',
-      targetId,
-      'edge:',
-      edge,
-      'cluster:',
-      startCluster,
-      startNode
-    );
-    if (edge.sections) {
-      const src = edge.sections[0].startPoint;
-      const dest = edge.sections[0].endPoint;
-      const segments = edge.sections[0].bendPoints ? edge.sections[0].bendPoints : [];
-
-      const segPoints = segments.map((segment) => {
-        return { x: segment.x + offset.x, y: segment.y + offset.y };
-      });
-      edge.points = [
-        { x: src.x + offset.x, y: src.y + offset.y },
-        ...segPoints,
-        { x: dest.x + offset.x, y: dest.y + offset.y },
-      ];
-
-      let sw = startNode.width;
-      let ew = endNode.width;
-      if (startNode.isGroup) {
-        const bbox = startNode.domId.node().getBBox();
-        // sw = Math.max(bbox.width, startNode.width, startNode.labels[0].width);
-        sw = Math.max(startNode.width, startNode.labels[0].width + startNode.padding);
-        // sw = startNode.width;
-        log.debug(
-          'UIO width',
-          startNode.id,
-          startNode.with,
-          'bbox.width=',
-          bbox.width,
-          'lw=',
-          startNode.labels[0].width,
-          'node:',
-          startNode.width,
-          'SW = ',
-          sw
-          // 'HTML:',
-          // startNode.domId.node().innerHTML
-        );
-      }
-      if (endNode.isGroup) {
-        const bbox = endNode.domId.node().getBBox();
-        ew = Math.max(endNode.width, endNode.labels[0].width + endNode.padding);
-
-        log.debug(
-          'UIO width',
-          startNode.id,
-          startNode.with,
-          bbox.width,
-          'EW = ',
-          ew,
-          'HTML:',
-          startNode.innerHTML
-        );
-      }
-      if (startNode.shape === 'diamond') {
-        edge.points.unshift({
-          x: startNode.x + startNode.width / 2 + offset.x,
-          y: startNode.y + startNode.height / 2 + offset.y,
-        });
-      }
-      if (endNode.shape === 'diamond') {
-        edge.points.push({
-          x: endNode.x + endNode.width / 2 + offset.x,
-          y: endNode.y + endNode.height / 2 + offset.y,
-        });
-      }
-
-      edge.points = cutPathAtIntersect(
-        edge.points.reverse(),
-        {
-          x: startNode.x + startNode.width / 2 + offset.x,
-          y: startNode.y + startNode.height / 2 + offset.y,
-          width: sw,
-          height: startNode.height,
-          padding: startNode.padding,
-        },
-        startNode.shape === 'diamond'
-      ).reverse();
-
-      edge.points = cutPathAtIntersect(
-        edge.points,
-        {
-          x: endNode.x + ew / 2 + endNode.offset.x,
-          y: endNode.y + endNode.height / 2 + endNode.offset.y,
-          width: ew,
-          height: endNode.height,
-          padding: endNode.padding,
-        },
-        endNode.shape === 'diamond'
-      );
-
-      const paths = insertEdge(
-        edgesEl,
+      const offset = calcOffset(sourceId, targetId, parentLookupDb);
+      log.debug(
+        'offset',
+        offset,
+        sourceId,
+        ' ==> ',
+        targetId,
+        'edge:',
         edge,
-        clusterDb,
-        data4Layout.type,
-        startNode,
-        endNode,
-        data4Layout.diagramId
+        'cluster:',
+        startCluster,
+        startNode
       );
-      log.info('APA12 edge points after insert', JSON.stringify(edge.points));
+      if (edge.sections) {
+        const src = edge.sections[0].startPoint;
+        const dest = edge.sections[0].endPoint;
+        const segments = edge.sections[0].bendPoints ? edge.sections[0].bendPoints : [];
 
-      edge.x = edge.labels[0].x + offset.x + edge.labels[0].width / 2;
-      edge.y = edge.labels[0].y + offset.y + edge.labels[0].height / 2;
-      positionEdgeLabel(edge, paths);
-    }
-    // const src = edge.sections[0].startPoint;
-    // const dest = edge.sections[0].endPoint;
-    // const segments = edge.sections[0].bendPoints ? edge.sections[0].bendPoints : [];
+        const segPoints = segments.map((segment: { x: any; y: any }) => {
+          return { x: segment.x + offset.x, y: segment.y + offset.y };
+        });
+        edge.points = [
+          { x: src.x + offset.x, y: src.y + offset.y },
+          ...segPoints,
+          { x: dest.x + offset.x, y: dest.y + offset.y },
+        ];
 
-    // const segPoints = segments.map((segment) => {
-    //   return { x: segment.x + offset.x, y: segment.y + offset.y };
-    // });
-    // edge.points = [
-    //   { x: src.x + offset.x, y: src.y + offset.y },
-    //   ...segPoints,
-    //   { x: dest.x + offset.x, y: dest.y + offset.y },
-    // ];
-    // const paths = insertEdge(
-    //   edgesEl,
-    //   edge,
-    //   clusterDb,
-    //   data4Layout.type,
-    //   startNode,
-    //   endNode,
-    //   data4Layout.diagramId
-    // );
-    // log.info('APA12 edge points after insert', JSON.stringify(edge.points));
-
-    // edge.x = edge.labels[0].x + offset.x + edge.labels[0].width / 2;
-    // edge.y = edge.labels[0].y + offset.y + edge.labels[0].height / 2;
-    // positionEdgeLabel(edge, paths);
-  });
-};
-
-function intersectLine(p1, p2, q1, q2) {
-  log.debug('UIO intersectLine', p1, p2, q1, q2);
-  // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,
-  // p7 and p473.
-
-  // let a1, a2, b1, b2, c1, c2;
-  // let r1, r2, r3, r4;
-  // let denom, offset, num;
-  // let x, y;
-
-  // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +
-  // b1 y + c1 = 0.
-  const a1 = p2.y - p1.y;
-  const b1 = p1.x - p2.x;
-  const c1 = p2.x * p1.y - p1.x * p2.y;
-
-  // Compute r3 and r4.
-  const r3 = a1 * q1.x + b1 * q1.y + c1;
-  const r4 = a1 * q2.x + b1 * q2.y + c1;
-
-  // Check signs of r3 and r4. If both point 3 and point 4 lie on
-  // same side of line 1, the line segments do not intersect.
-  if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
-    return /*DON'T_INTERSECT*/;
-  }
-
-  // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0
-  const a2 = q2.y - q1.y;
-  const b2 = q1.x - q2.x;
-  const c2 = q2.x * q1.y - q1.x * q2.y;
-
-  // Compute r1 and r2
-  const r1 = a2 * p1.x + b2 * p1.y + c2;
-  const r2 = a2 * p2.x + b2 * p2.y + c2;
-
-  // Check signs of r1 and r2. If both point 1 and point 2 lie
-  // on same side of second line segment, the line segments do
-  // not intersect.
-  if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) {
-    return /*DON'T_INTERSECT*/;
-  }
-
-  // Line segments intersect: compute intersection point.
-  const denom = a1 * b2 - a2 * b1;
-  if (denom === 0) {
-    return /*COLLINEAR*/;
-  }
-
-  const offset = Math.abs(denom / 2);
-
-  // The denom/2 is to get rounding instead of truncating. It
-  // is added or subtracted to the numerator, depending upon the
-  // sign of the numerator.
-  let num = b1 * c2 - b2 * c1;
-  const x = num < 0 ? (num - offset) / denom : (num + offset) / denom;
-
-  num = a2 * c1 - a1 * c2;
-  const y = num < 0 ? (num - offset) / denom : (num + offset) / denom;
-
-  return { x: x, y: y };
-}
-
-function sameSign(r1, r2) {
-  return r1 * r2 > 0;
-}
-const diamondIntersection = (bounds, outsidePoint, insidePoint) => {
-  const x1 = bounds.x;
-  const y1 = bounds.y;
-
-  const w = bounds.width; //+ bounds.padding;
-  const h = bounds.height; // + bounds.padding;
-
-  const polyPoints = [
-    { x: x1, y: y1 - h / 2 },
-    { x: x1 + w / 2, y: y1 },
-    { x: x1, y: y1 + h / 2 },
-    { x: x1 - w / 2, y: y1 },
-  ];
-  log.debug(
-    `UIO diamondIntersection calc abc89:
-  outsidePoint: ${JSON.stringify(outsidePoint)}
-  insidePoint : ${JSON.stringify(insidePoint)}
-  node        : x:${bounds.x} y:${bounds.y} w:${bounds.width} h:${bounds.height}`,
-    polyPoints
-  );
-
-  const intersections = [];
-
-  let minX = Number.POSITIVE_INFINITY;
-  let minY = Number.POSITIVE_INFINITY;
-  if (typeof polyPoints.forEach === 'function') {
-    polyPoints.forEach(function (entry) {
-      minX = Math.min(minX, entry.x);
-      minY = Math.min(minY, entry.y);
-    });
-  } else {
-    minX = Math.min(minX, polyPoints.x);
-    minY = Math.min(minY, polyPoints.y);
-  }
-
-  // const left = x1 - w / 2;
-  // const top = y1 + h / 2;
-
-  for (let i = 0; i < polyPoints.length; i++) {
-    const p1 = polyPoints[i];
-    const p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];
-    const intersect = intersectLine(
-      bounds,
-      outsidePoint,
-      { x: p1.x, y: p1.y },
-      { x: p2.x, y: p2.y }
-    );
-
-    if (intersect) {
-      intersections.push(intersect);
-    }
-  }
-
-  if (!intersections.length) {
-    return bounds;
-  }
-
-  log.debug('UIO intersections', intersections);
-
-  if (intersections.length > 1) {
-    // More intersections, find the one nearest to edge end point
-    intersections.sort(function (p, q) {
-      const pdx = p.x - outsidePoint.x;
-      const pdy = p.y - outsidePoint.y;
-      const distp = Math.sqrt(pdx * pdx + pdy * pdy);
-
-      const qdx = q.x - outsidePoint.x;
-      const qdy = q.y - outsidePoint.y;
-      const distq = Math.sqrt(qdx * qdx + qdy * qdy);
-
-      return distp < distq ? -1 : distp === distq ? 0 : 1;
-    });
-  }
-
-  return intersections[0];
-};
-
-export const intersection = (node, outsidePoint, insidePoint) => {
-  log.debug(`intersection calc abc89:
-  outsidePoint: ${JSON.stringify(outsidePoint)}
-  insidePoint : ${JSON.stringify(insidePoint)}
-  node        : x:${node.x} y:${node.y} w:${node.width} h:${node.height}`);
-  const x = node.x;
-  const y = node.y;
-
-  const dx = Math.abs(x - insidePoint.x);
-  // const dy = Math.abs(y - insidePoint.y);
-  const w = node.width / 2;
-  let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx;
-  const h = node.height / 2;
-
-  const Q = Math.abs(outsidePoint.y - insidePoint.y);
-  const R = Math.abs(outsidePoint.x - insidePoint.x);
-
-  if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) {
-    // Intersection is top or bottom of rect.
-    const q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
-    r = (R * q) / Q;
-    const res = {
-      x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - R + r,
-      y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y - Q + q,
-    };
-
-    if (r === 0) {
-      res.x = outsidePoint.x;
-      res.y = outsidePoint.y;
-    }
-    if (R === 0) {
-      res.x = outsidePoint.x;
-    }
-    if (Q === 0) {
-      res.y = outsidePoint.y;
-    }
-
-    log.debug(`abc89 topp/bott calc, Q ${Q}, q ${q}, R ${R}, r ${r}`, res); // cspell: disable-line
-
-    return res;
-  } else {
-    // Intersection onn sides of rect
-    if (insidePoint.x < outsidePoint.x) {
-      r = outsidePoint.x - w - x;
-    } else {
-      // r = outsidePoint.x - w - x;
-      r = x - w - outsidePoint.x;
-    }
-    const q = (Q * r) / R;
-    //  OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x + dx - w;
-    // OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r;
-    let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x - R + r;
-    // let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r;
-    let _y = insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q;
-    log.debug(`sides calc abc89, Q ${Q}, q ${q}, R ${R}, r ${r}`, { _x, _y });
-    if (r === 0) {
-      _x = outsidePoint.x;
-      _y = outsidePoint.y;
-    }
-    if (R === 0) {
-      _x = outsidePoint.x;
-    }
-    if (Q === 0) {
-      _y = outsidePoint.y;
-    }
-
-    return { x: _x, y: _y };
-  }
-};
-const outsideNode = (node, point) => {
-  const x = node.x;
-  const y = node.y;
-  const dx = Math.abs(point.x - x);
-  const dy = Math.abs(point.y - y);
-  const w = node.width / 2;
-  const h = node.height / 2;
-  if (dx >= w || dy >= h) {
-    return true;
-  }
-  return false;
-};
-/**
- * This function will page a path and node where the last point(s) in the path is inside the node
- * and return an update path ending by the border of the node.
- */
-const cutPathAtIntersect = (_points, bounds, isDiamond: boolean) => {
-  log.debug('UIO cutPathAtIntersect Points:', _points, 'node:', bounds, 'isDiamond', isDiamond);
-  const points = [];
-  let lastPointOutside = _points[0];
-  let isInside = false;
-  _points.forEach((point) => {
-    // const node = clusterDb[edge.toCluster].node;
-    log.debug(' checking point', point, bounds);
-
-    // check if point is inside the boundary rect
-    if (!outsideNode(bounds, point) && !isInside) {
-      // First point inside the rect found
-      // Calc the intersection coord between the point anf the last point outside the rect
-      let inter;
-
-      if (isDiamond) {
-        const inter2 = diamondIntersection(bounds, lastPointOutside, point);
-        const distance = Math.sqrt(
-          (lastPointOutside.x - inter2.x) ** 2 + (lastPointOutside.y - inter2.y) ** 2
-        );
-        if (distance > 1) {
-          inter = inter2;
+        let sw = startNode.width;
+        let ew = endNode.width;
+        if (startNode.isGroup) {
+          const bbox = startNode.domId.node().getBBox();
+          // sw = Math.max(bbox.width, startNode.width, startNode.labels[0].width);
+          sw = Math.max(startNode.width, startNode.labels[0].width + startNode.padding);
+          // sw = startNode.width;
+          log.debug(
+            'UIO width',
+            startNode.id,
+            startNode.with,
+            'bbox.width=',
+            bbox.width,
+            'lw=',
+            startNode.labels[0].width,
+            'node:',
+            startNode.width,
+            'SW = ',
+            sw
+            // 'HTML:',
+            // startNode.domId.node().innerHTML
+          );
         }
-      }
-      if (!inter) {
-        inter = intersection(bounds, lastPointOutside, point);
-      }
+        if (endNode.isGroup) {
+          const bbox = endNode.domId.node().getBBox();
+          ew = Math.max(endNode.width, endNode.labels[0].width + endNode.padding);
 
-      // Check case where the intersection is the same as the last point
-      let pointPresent = false;
-      points.forEach((p) => {
-        pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y);
-      });
-      // if (!pointPresent) {
-      if (!points.some((e) => e.x === inter.x && e.y === inter.y)) {
-        points.push(inter);
-      } else {
-        log.debug('abc88 no intersect', inter, points);
-      }
-      // points.push(inter);
-      isInside = true;
-    } else {
-      // Outside
-      log.debug('abc88 outside', point, lastPointOutside, points);
-      lastPointOutside = point;
-      // points.push(point);
-      if (!isInside) {
-        points.push(point);
+          log.debug(
+            'UIO width',
+            startNode.id,
+            startNode.with,
+            bbox.width,
+            'EW = ',
+            ew,
+            'HTML:',
+            startNode.innerHTML
+          );
+        }
+        if (startNode.shape === 'diamond') {
+          edge.points.unshift({
+            x: startNode.x + startNode.width / 2 + offset.x,
+            y: startNode.y + startNode.height / 2 + offset.y,
+          });
+        }
+        if (endNode.shape === 'diamond') {
+          const x = endNode.x + endNode.width / 2 + offset.x;
+          // Add a point at the center of the diamond
+          if (
+            Math.abs(edge.points[edge.points.length - 1].y - endNode.y - offset.y) > 0.001 ||
+            Math.abs(edge.points[edge.points.length - 1].x - x) > 0.001
+          ) {
+            edge.points.push({
+              x: endNode.x + endNode.width / 2 + offset.x,
+              y: endNode.y + endNode.height / 2 + offset.y,
+            });
+          }
+        }
+
+        edge.points = cutPathAtIntersect(
+          edge.points.reverse(),
+          {
+            x: startNode.x + startNode.width / 2 + offset.x,
+            y: startNode.y + startNode.height / 2 + offset.y,
+            width: sw,
+            height: startNode.height,
+            padding: startNode.padding,
+          },
+          startNode.shape === 'diamond'
+        ).reverse();
+
+        edge.points = cutPathAtIntersect(
+          edge.points,
+          {
+            x: endNode.x + ew / 2 + endNode.offset.x,
+            y: endNode.y + endNode.height / 2 + endNode.offset.y,
+            width: ew,
+            height: endNode.height,
+            padding: endNode.padding,
+          },
+          endNode.shape === 'diamond'
+        );
+
+        const paths = insertEdge(
+          edgesEl,
+          edge,
+          clusterDb,
+          data4Layout.type,
+          startNode,
+          endNode,
+          data4Layout.diagramId
+        );
+        log.info('APA12 edge points after insert', JSON.stringify(edge.points));
+
+        edge.x = edge.labels[0].x + offset.x + edge.labels[0].width / 2;
+        edge.y = edge.labels[0].y + offset.y + edge.labels[0].height / 2;
+        positionEdgeLabel(edge, paths);
       }
     }
-  });
-  log.debug('returning points', points);
-  return points;
+  );
 };
diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 4556c1d6e..fdb175e52 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -129,6 +129,6 @@ export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element | null, unkn
 
 export type SVG = d3.Selection<SVGSVGElement, unknown, Element | null, unknown>;
 
-export type Group = d3.Selection<SVGGElement, unknown, Element | null, unknown>;
+export type SVGGroup = d3.Selection<SVGGElement, unknown, Element | null, unknown>;
 
 export type DiagramStylesProvider = (options?: any) => string;
diff --git a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
index 8d5ba3b7c..59c6d43cf 100644
--- a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
+++ b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
@@ -1,5 +1,6 @@
 import { sanitizeUrl } from '@braintree/sanitize-url';
-import type { Group, SVG } from '../../diagram-api/types.js';
+import type { SVG, SVGGroup } from '../../diagram-api/types.js';
+import { lineBreakRegex } from './common.js';
 import type {
   Bound,
   D3ImageElement,
@@ -11,9 +12,8 @@ import type {
   TextData,
   TextObject,
 } from './commonTypes.js';
-import { lineBreakRegex } from './common.js';
 
-export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElement => {
+export const drawRect = (element: SVG | SVGGroup, rectData: RectData): D3RectElement => {
   const rectElement: D3RectElement = element.append('rect');
   rectElement.attr('x', rectData.x);
   rectElement.attr('y', rectData.y);
@@ -50,7 +50,7 @@ export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElemen
  * @param element - Diagram (reference for bounds)
  * @param bounds - Shape of the rectangle
  */
-export const drawBackgroundRect = (element: SVG | Group, bounds: Bound): void => {
+export const drawBackgroundRect = (element: SVG | SVGGroup, bounds: Bound): void => {
   const rectData: RectData = {
     x: bounds.startx,
     y: bounds.starty,
@@ -64,7 +64,7 @@ export const drawBackgroundRect = (element: SVG | Group, bounds: Bound): void =>
   rectElement.lower();
 };
 
-export const drawText = (element: SVG | Group, textData: TextData): D3TextElement => {
+export const drawText = (element: SVG | SVGGroup, textData: TextData): D3TextElement => {
   const nText: string = textData.text.replace(lineBreakRegex, ' ');
 
   const textElem: D3TextElement = element.append('text');
@@ -84,7 +84,7 @@ export const drawText = (element: SVG | Group, textData: TextData): D3TextElemen
   return textElem;
 };
 
-export const drawImage = (elem: SVG | Group, x: number, y: number, link: string): void => {
+export const drawImage = (elem: SVG | SVGGroup, x: number, y: number, link: string): void => {
   const imageElement: D3ImageElement = elem.append('image');
   imageElement.attr('x', x);
   imageElement.attr('y', y);
@@ -93,7 +93,7 @@ export const drawImage = (elem: SVG | Group, x: number, y: number, link: string)
 };
 
 export const drawEmbeddedImage = (
-  element: SVG | Group,
+  element: SVG | SVGGroup,
   x: number,
   y: number,
   link: string
diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts
index 1b3622c6d..a5f10acef 100644
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -1,5 +1,5 @@
+import type { SVG, SVGGroup } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
-import type { Group, SVG } from '../../diagram-api/types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 
@@ -13,7 +13,7 @@ import { configureSvgSize } from '../../setupGraphViewbox.js';
 export const draw = (_text: string, id: string, version: string) => {
   log.debug('rendering svg for syntax error\n');
   const svg: SVG = selectSvgElement(id);
-  const g: Group = svg.append('g');
+  const g: SVGGroup = svg.append('g');
 
   svg.attr('viewBox', '0 0 2412 512');
   configureSvgSize(svg, 100, 512, true);
diff --git a/packages/mermaid/src/diagrams/info/infoRenderer.ts b/packages/mermaid/src/diagrams/info/infoRenderer.ts
index 25ae72fce..a8314eb72 100644
--- a/packages/mermaid/src/diagrams/info/infoRenderer.ts
+++ b/packages/mermaid/src/diagrams/info/infoRenderer.ts
@@ -1,7 +1,7 @@
+import type { DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
-import { configureSvgSize } from '../../setupGraphViewbox.js';
-import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
@@ -16,7 +16,7 @@ const draw: DrawDefinition = (text, id, version) => {
   const svg: SVG = selectSvgElement(id);
   configureSvgSize(svg, 100, 400, true);
 
-  const group: Group = svg.append('g');
+  const group: SVGGroup = svg.append('g');
   group
     .append('text')
     .attr('x', 100)
diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts
index c89e055cc..25445a228 100644
--- a/packages/mermaid/src/diagrams/packet/renderer.ts
+++ b/packages/mermaid/src/diagrams/packet/renderer.ts
@@ -1,6 +1,6 @@
 import type { Diagram } from '../../Diagram.js';
 import type { PacketDiagramConfig } from '../../config.type.js';
-import type { DiagramRenderer, DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
+import type { DiagramRenderer, DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import type { PacketDB, PacketWord } from './types.js';
@@ -39,7 +39,7 @@ const drawWord = (
   rowNumber: number,
   { rowHeight, paddingX, paddingY, bitWidth, bitsPerRow, showBits }: Required<PacketDiagramConfig>
 ) => {
-  const group: Group = svg.append('g');
+  const group: SVGGroup = svg.append('g');
   const wordY = rowNumber * (rowHeight + paddingY) + paddingY;
   for (const block of word) {
     const blockX = (block.start % bitsPerRow) * bitWidth + 1;
diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.ts b/packages/mermaid/src/diagrams/pie/pieRenderer.ts
index 8f3b9cc5b..a0cdce3df 100644
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.ts
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.ts
@@ -1,13 +1,13 @@
 import type d3 from 'd3';
-import { scaleOrdinal, pie as d3pie, arc } from 'd3';
-import { log } from '../../logger.js';
-import { configureSvgSize } from '../../setupGraphViewbox.js';
-import { getConfig } from '../../diagram-api/diagramAPI.js';
-import { cleanAndMerge, parseFontSize } from '../../utils.js';
-import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
-import type { D3Section, PieDB, Sections } from './pieTypes.js';
+import { arc, pie as d3pie, scaleOrdinal } from 'd3';
 import type { MermaidConfig, PieDiagramConfig } from '../../config.type.js';
+import { getConfig } from '../../diagram-api/diagramAPI.js';
+import type { DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
+import { log } from '../../logger.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { cleanAndMerge, parseFontSize } from '../../utils.js';
+import type { D3Section, PieDB, Sections } from './pieTypes.js';
 
 const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Section>[] => {
   // Compute the position of each group on the pie:
@@ -46,7 +46,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
   const height = 450;
   const pieWidth: number = height;
   const svg: SVG = selectSvgElement(id);
-  const group: Group = svg.append('g');
+  const group: SVGGroup = svg.append('g');
   group.attr('transform', 'translate(' + pieWidth / 2 + ',' + height / 2 + ')');
 
   const { themeVariables } = globalConfig;
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts
index cde0d6a93..a1ec492f6 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts
@@ -1,4 +1,4 @@
-import type { Group } from '../../../../../diagram-api/types.js';
+import type { SVGGroup } from '../../../../../diagram-api/types.js';
 import type {
   AxisDataType,
   ChartComponent,
@@ -25,7 +25,7 @@ export function getAxis(
   data: AxisDataType,
   axisConfig: XYChartAxisConfig,
   axisThemeConfig: XYChartAxisThemeConfig,
-  tmpSVGGroup: Group
+  tmpSVGGroup: SVGGroup
 ): Axis {
   const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup);
   if (isBandAxisData(data)) {
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts
index bbab56bdc..5512df988 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts
@@ -1,13 +1,13 @@
-import type { Group } from '../../../../diagram-api/types.js';
+import type { SVGGroup } from '../../../../diagram-api/types.js';
 import type {
   BoundingRect,
   ChartComponent,
   Dimension,
   DrawableElem,
   Point,
+  XYChartConfig,
   XYChartData,
   XYChartThemeConfig,
-  XYChartConfig,
 } from '../interfaces.js';
 import type { TextDimensionCalculator } from '../textDimensionCalculator.js';
 import { TextDimensionCalculatorWithFont } from '../textDimensionCalculator.js';
@@ -84,7 +84,7 @@ export function getChartTitleComponent(
   chartConfig: XYChartConfig,
   chartData: XYChartData,
   chartThemeConfig: XYChartThemeConfig,
-  tmpSVGGroup: Group
+  tmpSVGGroup: SVGGroup
 ): ChartComponent {
   const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup);
   return new ChartTitle(textDimensionCalculator, chartConfig, chartData, chartThemeConfig);
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts
index 192eb47f6..6a1b6ec3a 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts
@@ -1,4 +1,4 @@
-import type { Group } from '../../../diagram-api/types.js';
+import type { SVGGroup } from '../../../diagram-api/types.js';
 import type { DrawableElem, XYChartConfig, XYChartData, XYChartThemeConfig } from './interfaces.js';
 import { Orchestrator } from './orchestrator.js';
 
@@ -7,7 +7,7 @@ export class XYChartBuilder {
     config: XYChartConfig,
     chartData: XYChartData,
     chartThemeConfig: XYChartThemeConfig,
-    tmpSVGGroup: Group
+    tmpSVGGroup: SVGGroup
   ): DrawableElem[] {
     const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGroup);
     return orchestrator.getDrawableElement();
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts
index 8160d1500..8809efe26 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts
@@ -1,3 +1,9 @@
+import type { SVGGroup } from '../../../diagram-api/types.js';
+import type { Axis } from './components/axis/index.js';
+import { getAxis } from './components/axis/index.js';
+import { getChartTitleComponent } from './components/chartTitle.js';
+import type { Plot } from './components/plot/index.js';
+import { getPlotComponent } from './components/plot/index.js';
 import type {
   ChartComponent,
   DrawableElem,
@@ -6,12 +12,6 @@ import type {
   XYChartThemeConfig,
 } from './interfaces.js';
 import { isBarPlot } from './interfaces.js';
-import type { Axis } from './components/axis/index.js';
-import { getAxis } from './components/axis/index.js';
-import { getChartTitleComponent } from './components/chartTitle.js';
-import type { Plot } from './components/plot/index.js';
-import { getPlotComponent } from './components/plot/index.js';
-import type { Group } from '../../../diagram-api/types.js';
 
 export class Orchestrator {
   private componentStore: {
@@ -24,7 +24,7 @@ export class Orchestrator {
     private chartConfig: XYChartConfig,
     private chartData: XYChartData,
     chartThemeConfig: XYChartThemeConfig,
-    tmpSVGGroup: Group
+    tmpSVGGroup: SVGGroup
   ) {
     this.componentStore = {
       title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGroup),
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts
index 8049bf527..0f118fc92 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts
@@ -1,13 +1,13 @@
-import type { Dimension } from './interfaces.js';
+import type { SVGGroup } from '../../../diagram-api/types.js';
 import { computeDimensionOfText } from '../../../rendering-util/createText.js';
-import type { Group } from '../../../diagram-api/types.js';
+import type { Dimension } from './interfaces.js';
 
 export interface TextDimensionCalculator {
   getMaxDimension(texts: string[], fontSize: number): Dimension;
 }
 
 export class TextDimensionCalculatorWithFont implements TextDimensionCalculator {
-  constructor(private parentGroup: Group) {}
+  constructor(private parentGroup: SVGGroup) {}
   getMaxDimension(texts: string[], fontSize: number): Dimension {
     if (!this.parentGroup) {
       return {
diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts
index 23b90724c..fb2435df2 100644
--- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts
+++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts
@@ -1,3 +1,9 @@
+import * as configApi from '../../config.js';
+import defaultConfig from '../../defaultConfig.js';
+import type { SVGGroup } from '../../diagram-api/types.js';
+import { getThemeVariables } from '../../themes/theme-default.js';
+import { cleanAndMerge } from '../../utils.js';
+import { sanitizeText } from '../common/common.js';
 import {
   clear as commonClear,
   getAccDescription,
@@ -7,11 +13,6 @@ import {
   setAccTitle,
   setDiagramTitle,
 } from '../common/commonDb.js';
-import * as configApi from '../../config.js';
-import defaultConfig from '../../defaultConfig.js';
-import { getThemeVariables } from '../../themes/theme-default.js';
-import { cleanAndMerge } from '../../utils.js';
-import { sanitizeText } from '../common/common.js';
 import { XYChartBuilder } from './chartBuilder/index.js';
 import type {
   DrawableElem,
@@ -21,11 +22,10 @@ import type {
   XYChartThemeConfig,
 } from './chartBuilder/interfaces.js';
 import { isBandAxisData, isLinearAxisData } from './chartBuilder/interfaces.js';
-import type { Group } from '../../diagram-api/types.js';
 
 let plotIndex = 0;
 
-let tmpSVGGroup: Group;
+let tmpSVGGroup: SVGGroup;
 
 let xyChartConfig: XYChartConfig = getChartDefaultConfig();
 let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig();
@@ -75,7 +75,7 @@ function textSanitizer(text: string) {
   return sanitizeText(text.trim(), config);
 }
 
-function setTmpSVGG(SVGG: Group) {
+function setTmpSVGG(SVGG: SVGGroup) {
   tmpSVGGroup = SVGG;
 }
 function setOrientation(orientation: string) {
diff --git a/packages/mermaid/src/internals.ts b/packages/mermaid/src/internals.ts
index cebcd4ace..7cc058cb3 100644
--- a/packages/mermaid/src/internals.ts
+++ b/packages/mermaid/src/internals.ts
@@ -29,3 +29,5 @@ export const internalHelpers = {
   log,
   positionEdgeLabel,
 };
+
+export type InternalHelpers = typeof internalHelpers;
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index aa0737592..43fc5bd31 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -4,34 +4,37 @@
  */
 import { dedent } from 'ts-dedent';
 import type { MermaidConfig } from './config.type.js';
-import { log } from './logger.js';
-import utils from './utils.js';
-import type { ParseOptions, ParseResult, RenderResult } from './types.js';
-import { mermaidAPI } from './mermaidAPI.js';
-import { registerLazyLoadedDiagrams, detectType } from './diagram-api/detectType.js';
-import { loadRegisteredDiagrams } from './diagram-api/loadDiagram.js';
-import type { ParseErrorFunction } from './Diagram.js';
-import { isDetailedError } from './utils.js';
-import type { DetailedError } from './utils.js';
-import type { ExternalDiagramDefinition } from './diagram-api/types.js';
-import type { UnknownDiagramError } from './errors.js';
+import { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
+import { loadRegisteredDiagrams } from './diagram-api/loadDiagram.js';
+import type { ExternalDiagramDefinition, SVG, SVGGroup } from './diagram-api/types.js';
+import type { ParseErrorFunction } from './Diagram.js';
+import type { UnknownDiagramError } from './errors.js';
+import type { InternalHelpers } from './internals.js';
+import { log } from './logger.js';
+import { mermaidAPI } from './mermaidAPI.js';
+import type { LayoutLoaderDefinition, RenderOptions } from './rendering-util/render.js';
 import { registerLayoutLoaders } from './rendering-util/render.js';
-import type { LayoutLoaderDefinition } from './rendering-util/render.js';
-import { internalHelpers } from './internals.js';
 import type { LayoutData } from './rendering-util/types.js';
+import type { ParseOptions, ParseResult, RenderResult } from './types.js';
+import type { DetailedError } from './utils.js';
+import utils, { isDetailedError } from './utils.js';
 
 export type {
-  MermaidConfig,
   DetailedError,
   ExternalDiagramDefinition,
+  InternalHelpers,
+  LayoutData,
+  LayoutLoaderDefinition,
+  MermaidConfig,
   ParseErrorFunction,
-  RenderResult,
   ParseOptions,
   ParseResult,
+  RenderOptions,
+  RenderResult,
+  SVG,
+  SVGGroup,
   UnknownDiagramError,
-  LayoutLoaderDefinition,
-  LayoutData,
 };
 
 export interface RunOptions {
@@ -432,11 +435,6 @@ export interface Mermaid {
   contentLoaded: typeof contentLoaded;
   setParseErrorHandler: typeof setParseErrorHandler;
   detectType: typeof detectType;
-  /**
-   * Internal helpers for mermaid
-   * @deprecated - This should not be used by external packages, as the definitions will change without notice.
-   */
-  internalHelpers: typeof internalHelpers;
 }
 
 const mermaid: Mermaid = {
@@ -453,7 +451,6 @@ const mermaid: Mermaid = {
   contentLoaded,
   setParseErrorHandler,
   detectType,
-  internalHelpers,
 };
 
 export default mermaid;
diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts
index 12d81715f..c6ce204ba 100644
--- a/packages/mermaid/src/rendering-util/createText.ts
+++ b/packages/mermaid/src/rendering-util/createText.ts
@@ -1,16 +1,16 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // @ts-nocheck TODO: Fix types
-import type { MermaidConfig } from '../config.type.js';
-import type { Group } from '../diagram-api/types.js';
+import { getConfig } from '$root/diagram-api/diagramAPI.js';
+import common, { hasKatex, renderKatex } from '$root/diagrams/common/common.js';
 import { select } from 'd3';
+import type { MermaidConfig } from '../config.type.js';
+import type { SVGGroup } from '../diagram-api/types.js';
 import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js';
 import { log } from '../logger.js';
 import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js';
 import { decodeEntities } from '../utils.js';
 import { splitLineToFitWidth } from './splitText.js';
 import type { MarkdownLine, MarkdownWord } from './types.js';
-import common, { hasKatex, renderKatex } from '$root/diagrams/common/common.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 function applyStyle(dom, styleFn) {
   if (styleFn) {
@@ -82,7 +82,7 @@ function computeWidthOfText(parentNode: any, lineHeight: number, line: MarkdownL
 }
 
 export function computeDimensionOfText(
-  parentNode: Group,
+  parentNode: SVGGroup,
   lineHeight: number,
   text: string
 ): DOMRect | undefined {
diff --git a/packages/mermaid/src/rendering-util/render.ts b/packages/mermaid/src/rendering-util/render.ts
index 4c08b5d27..8b28fe82b 100644
--- a/packages/mermaid/src/rendering-util/render.ts
+++ b/packages/mermaid/src/rendering-util/render.ts
@@ -1,7 +1,21 @@
+import type { SVG } from '$root/diagram-api/types.js';
+import type { InternalHelpers } from '$root/internals.js';
+import { internalHelpers } from '$root/internals.js';
 import { log } from '$root/logger.js';
+import type { LayoutData } from './types.js';
+
+export interface RenderOptions {
+  algorithm?: string;
+}
 
 export interface LayoutAlgorithm {
-  render(data4Layout: any, svg: any, element: any, algorithm?: string): any;
+  render(
+    layoutData: LayoutData,
+    svg: SVG,
+    element: any,
+    helpers: InternalHelpers,
+    options?: RenderOptions
+  ): Promise<void>;
 }
 
 export type LayoutLoader = () => Promise<LayoutAlgorithm>;
@@ -31,14 +45,16 @@ const registerDefaultLayoutLoaders = () => {
 
 registerDefaultLayoutLoaders();
 
-export const render = async (data4Layout: any, svg: any, element: any) => {
+export const render = async (data4Layout: LayoutData, svg: SVG, element: any) => {
   if (!(data4Layout.layoutAlgorithm in layoutAlgorithms)) {
     throw new Error(`Unknown layout algorithm: ${data4Layout.layoutAlgorithm}`);
   }
 
   const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm];
   const layoutRenderer = await layoutDefinition.loader();
-  return layoutRenderer.render(data4Layout, svg, element, layoutDefinition.algorithm);
+  return layoutRenderer.render(data4Layout, svg, element, internalHelpers, {
+    algorithm: layoutDefinition.algorithm,
+  });
 };
 
 /**
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index 6d0c157dd..087fcf0be 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -538,6 +538,27 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
       .attr('style', edgeStyles ? edgeStyles.reduce((acc, style) => acc + ';' + style, '') : '');
   }
 
+  // DEBUG code, DO NOT REMOVE
+  // adds a red circle at each edge coordinate
+  // cornerPoints.forEach((point) => {
+  //   elem
+  //     .append('circle')
+  //     .style('stroke', 'blue')
+  //     .style('fill', 'blue')
+  //     .attr('r', 3)
+  //     .attr('cx', point.x)
+  //     .attr('cy', point.y);
+  // });
+  // lineData.forEach((point) => {
+  //   elem
+  //     .append('circle')
+  //     .style('stroke', 'blue')
+  //     .style('fill', 'blue')
+  //     .attr('r', 3)
+  //     .attr('cx', point.x)
+  //     .attr('cy', point.y);
+  // });
+
   let url = '';
   if (getConfig().flowchart.arrowMarkerAbsolute || getConfig().state.arrowMarkerAbsolute) {
     url =
diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
index 29192d85e..11c294ed9 100644
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -118,7 +118,7 @@ properties:
           - NETWORK_SIMPLEX
           - LINEAR_SEGMENTS
           - BRANDES_KOEPF
-        default: SIMPLE
+        default: BRANDES_KOEPF
   darkMode:
     type: boolean
     default: false
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2a6b02fd4..3d65d772a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,7 +10,7 @@ importers:
     devDependencies:
       '@applitools/eyes-cypress':
         specifier: ^3.44.4
-        version: 3.44.6(typescript@5.4.5)
+        version: 3.44.6(encoding@0.1.13)(typescript@5.4.5)
       '@argos-ci/cypress':
         specifier: ^2.1.0
         version: 2.1.1(cypress@13.13.2)
@@ -19,13 +19,13 @@ importers:
         version: 8.13.1(eslint@9.8.0)
       '@cypress/code-coverage':
         specifier: ^3.12.30
-        version: 3.12.44(@babel/core@7.25.2)(@babel/preset-env@7.25.3)(babel-loader@9.1.3)(cypress@13.13.2)(webpack@5.93.0)
+        version: 3.12.44(@babel/core@7.25.2)(@babel/preset-env@7.25.3(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(cypress@13.13.2)(webpack@5.93.0(esbuild@0.21.5))
       '@eslint/js':
         specifier: ^9.4.0
         version: 9.8.0
       '@rollup/plugin-typescript':
         specifier: ^11.1.6
-        version: 11.1.6(typescript@5.4.5)
+        version: 11.1.6(rollup@4.20.0)(tslib@2.6.3)(typescript@5.4.5)
       '@types/cors':
         specifier: ^2.8.17
         version: 2.8.17
@@ -52,7 +52,7 @@ importers:
         version: 4.2.4
       '@vitest/coverage-v8':
         specifier: ^1.4.0
-        version: 1.6.0(vitest@1.6.0)
+        version: 1.6.0(vitest@1.6.0(@types/node@20.14.14)(@vitest/ui@1.6.0)(jsdom@24.1.1)(terser@5.31.3))
       '@vitest/spy':
         specifier: ^1.4.0
         version: 1.6.0
@@ -82,7 +82,7 @@ importers:
         version: 13.13.2
       cypress-image-snapshot:
         specifier: ^4.0.1
-        version: 4.0.1(cypress@13.13.2)(jest@29.7.0)
+        version: 4.0.1(cypress@13.13.2)(jest@29.7.0(@types/node@20.14.14))
       esbuild:
         specifier: ^0.21.5
         version: 0.21.5
@@ -100,7 +100,7 @@ importers:
         version: 8.1.1
       eslint-plugin-jest:
         specifier: ^28.6.0
-        version: 28.7.0(eslint@9.8.0)(jest@29.7.0)(typescript@5.4.5)
+        version: 28.7.0(@typescript-eslint/eslint-plugin@8.0.0(@typescript-eslint/parser@8.0.0(eslint@9.8.0)(typescript@5.4.5))(eslint@9.8.0)(typescript@5.4.5))(eslint@9.8.0)(jest@29.7.0(@types/node@20.14.14))(typescript@5.4.5)
       eslint-plugin-jsdoc:
         specifier: ^48.2.9
         version: 48.11.0(eslint@9.8.0)
@@ -175,7 +175,7 @@ importers:
         version: 5.0.10
       rollup-plugin-visualizer:
         specifier: ^5.12.0
-        version: 5.12.0
+        version: 5.12.0(rollup@4.20.0)
       start-server-and-test:
         specifier: ^2.0.3
         version: 2.0.5
@@ -190,13 +190,13 @@ importers:
         version: 8.0.0(eslint@9.8.0)(typescript@5.4.5)
       vite:
         specifier: ^5.2.3
-        version: 5.3.5(@types/node@20.14.14)
+        version: 5.3.5(@types/node@20.14.14)(terser@5.31.3)
       vite-plugin-istanbul:
         specifier: ^6.0.0
-        version: 6.0.2(vite@5.3.5)
+        version: 6.0.2(vite@5.3.5(@types/node@20.14.14)(terser@5.31.3))
       vitest:
         specifier: ^1.4.0
-        version: 1.6.0(@types/node@20.14.14)(@vitest/ui@1.6.0)(jsdom@24.1.1)
+        version: 1.6.0(@types/node@20.14.14)(@vitest/ui@1.6.0)(jsdom@24.1.1)(terser@5.31.3)
 
   packages/mermaid:
     dependencies:
@@ -362,7 +362,7 @@ importers:
         version: 0.25.13(typescript@5.4.5)
       typedoc-plugin-markdown:
         specifier: ^3.17.1
-        version: 3.17.1(typedoc@0.25.13)
+        version: 3.17.1(typedoc@0.25.13(typescript@5.4.5))
       typescript:
         specifier: ~5.4.3
         version: 5.4.5
@@ -374,10 +374,10 @@ importers:
         version: 5.0.0
       vitepress:
         specifier: ^1.0.1
-        version: 1.1.4(@algolia/client-search@4.24.0)(@types/node@20.14.14)(postcss@8.4.40)(search-insights@2.15.0)(typescript@5.4.5)
+        version: 1.1.4(@algolia/client-search@4.24.0)(@types/node@20.14.14)(axios@1.7.3)(postcss@8.4.40)(search-insights@2.15.0)(terser@5.31.3)(typescript@5.4.5)
       vitepress-plugin-search:
         specifier: 1.0.4-alpha.22
-        version: 1.0.4-alpha.22(flexsearch@0.7.43)(vitepress@1.1.4)(vue@3.4.35)
+        version: 1.0.4-alpha.22(flexsearch@0.7.43)(vitepress@1.1.4(@algolia/client-search@4.24.0)(@types/node@20.14.14)(axios@1.7.3)(postcss@8.4.40)(search-insights@2.15.0)(terser@5.31.3)(typescript@5.4.5))(vue@3.4.35(typescript@5.4.5))
 
   packages/mermaid-example-diagram:
     dependencies:
@@ -401,31 +401,6 @@ importers:
         specifier: ^5.0.5
         version: 5.0.10
 
-  packages/mermaid-flowchart-elk:
-    dependencies:
-      d3:
-        specifier: ^7.9.0
-        version: 7.9.0
-      dagre-d3-es:
-        specifier: 7.0.10
-        version: 7.0.10
-      elkjs:
-        specifier: ^0.9.2
-        version: 0.9.3
-      khroma:
-        specifier: ^2.1.0
-        version: 2.1.0
-    devDependencies:
-      concurrently:
-        specifier: ^8.2.2
-        version: 8.2.2
-      mermaid:
-        specifier: workspace:^
-        version: link:../mermaid
-      rimraf:
-        specifier: ^5.0.5
-        version: 5.0.10
-
   packages/mermaid-layout-elk:
     dependencies:
       d3:
@@ -437,6 +412,10 @@ importers:
       mermaid:
         specifier: workspace:^
         version: link:../mermaid
+    devDependencies:
+      '@types/d3':
+        specifier: ^7.4.3
+        version: 7.4.3
 
   packages/mermaid-zenuml:
     dependencies:
@@ -455,7 +434,7 @@ importers:
         version: 7.4.47
       '@vueuse/core':
         specifier: ^10.9.0
-        version: 10.11.0(vue@3.4.35)
+        version: 10.11.0(vue@3.4.35(typescript@5.4.5))
       font-awesome:
         specifier: ^4.7.0
         version: 4.7.0
@@ -477,10 +456,10 @@ importers:
         version: 0.59.4
       '@vite-pwa/vitepress':
         specifier: ^0.4.0
-        version: 0.4.0(vite-plugin-pwa@0.19.8)
+        version: 0.4.0(vite-plugin-pwa@0.19.8(vite@5.3.5(@types/node@20.14.14)(terser@5.31.3))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0))
       '@vitejs/plugin-vue':
         specifier: ^5.0.0
-        version: 5.1.2(vite@5.3.5)(vue@3.4.35)
+        version: 5.1.2(vite@5.3.5(@types/node@20.14.14)(terser@5.31.3))(vue@3.4.35(typescript@5.4.5))
       fast-glob:
         specifier: ^3.3.2
         version: 3.3.2
@@ -492,19 +471,19 @@ importers:
         version: 1.1.2
       unocss:
         specifier: ^0.59.0
-        version: 0.59.4(postcss@8.4.40)(rollup@2.79.1)(vite@5.3.5)
+        version: 0.59.4(postcss@8.4.40)(rollup@2.79.1)(vite@5.3.5(@types/node@20.14.14)(terser@5.31.3))
       unplugin-vue-components:
         specifier: ^0.26.0
-        version: 0.26.0(rollup@2.79.1)(vue@3.4.35)
+        version: 0.26.0(@babel/parser@7.25.3)(rollup@2.79.1)(vue@3.4.35(typescript@5.4.5))
       vite:
         specifier: ^5.0.0
-        version: 5.3.5(@types/node@20.14.14)
+        version: 5.3.5(@types/node@20.14.14)(terser@5.31.3)
       vite-plugin-pwa:
         specifier: ^0.19.7
-        version: 0.19.8(vite@5.3.5)(workbox-build@7.1.1)(workbox-window@7.1.0)
+        version: 0.19.8(vite@5.3.5(@types/node@20.14.14)(terser@5.31.3))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0)
       vitepress:
         specifier: 1.1.4
-        version: 1.1.4(@algolia/client-search@4.24.0)(@types/node@20.14.14)(postcss@8.4.40)(search-insights@2.15.0)(typescript@5.4.5)
+        version: 1.1.4(@algolia/client-search@4.24.0)(@types/node@20.14.14)(axios@1.7.3)(postcss@8.4.40)(search-insights@2.15.0)(terser@5.31.3)(typescript@5.4.5)
       workbox-window:
         specifier: ^7.0.0
         version: 7.1.0
@@ -8728,7 +8707,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@applitools/core@4.18.0(typescript@5.4.5)':
+  '@applitools/core@4.18.0(encoding@0.1.13)(typescript@5.4.5)':
     dependencies:
       '@applitools/core-base': 1.16.0
       '@applitools/dom-capture': 11.3.0
@@ -8741,7 +8720,7 @@ snapshots:
       '@applitools/screenshoter': 3.8.35
       '@applitools/snippets': 2.4.27
       '@applitools/socket': 1.1.18
-      '@applitools/spec-driver-webdriver': 1.1.11(webdriver@7.31.1)
+      '@applitools/spec-driver-webdriver': 1.1.11(webdriver@7.31.1(typescript@5.4.5))
       '@applitools/ufg-client': 1.12.3
       '@applitools/utils': 1.7.4
       '@types/ws': 8.5.5
@@ -8794,7 +8773,7 @@ snapshots:
       '@applitools/logger': 2.0.18
       '@applitools/req': 1.7.2
       '@applitools/socket': 1.1.18
-      '@applitools/spec-driver-webdriver': 1.1.11(webdriver@7.31.1)
+      '@applitools/spec-driver-webdriver': 1.1.11(webdriver@7.31.1(typescript@5.4.5))
       '@applitools/tunnel-client': 1.5.7
       '@applitools/utils': 1.7.4
       abort-controller: 3.0.0
@@ -8830,10 +8809,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@applitools/eyes-cypress@3.44.6(typescript@5.4.5)':
+  '@applitools/eyes-cypress@3.44.6(encoding@0.1.13)(typescript@5.4.5)':
     dependencies:
-      '@applitools/core': 4.18.0(typescript@5.4.5)
-      '@applitools/eyes': 1.22.0(typescript@5.4.5)
+      '@applitools/core': 4.18.0(encoding@0.1.13)(typescript@5.4.5)
+      '@applitools/eyes': 1.22.0(encoding@0.1.13)(typescript@5.4.5)
       '@applitools/functional-commons': 1.6.0
       '@applitools/logger': 2.0.18
       '@applitools/utils': 1.7.4
@@ -8849,9 +8828,9 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@applitools/eyes@1.22.0(typescript@5.4.5)':
+  '@applitools/eyes@1.22.0(encoding@0.1.13)(typescript@5.4.5)':
     dependencies:
-      '@applitools/core': 4.18.0(typescript@5.4.5)
+      '@applitools/core': 4.18.0(encoding@0.1.13)(typescript@5.4.5)
       '@applitools/logger': 2.0.18
       '@applitools/utils': 1.7.4
     transitivePeerDependencies:
@@ -8923,7 +8902,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@applitools/spec-driver-webdriver@1.1.11(webdriver@7.31.1)':
+  '@applitools/spec-driver-webdriver@1.1.11(webdriver@7.31.1(typescript@5.4.5))':
     dependencies:
       '@applitools/driver': 1.18.0
       '@applitools/utils': 1.7.4
@@ -10010,12 +9989,12 @@ snapshots:
 
   '@cspell/url@8.13.1': {}
 
-  '@cypress/code-coverage@3.12.44(@babel/core@7.25.2)(@babel/preset-env@7.25.3)(babel-loader@9.1.3)(cypress@13.13.2)(webpack@5.93.0)':
+  '@cypress/code-coverage@3.12.44(@babel/core@7.25.2)(@babel/preset-env@7.25.3(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(cypress@13.13.2)(webpack@5.93.0(esbuild@0.21.5))':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/preset-env': 7.25.3(@babel/core@7.25.2)
-      '@cypress/webpack-preprocessor': 6.0.2(@babel/core@7.25.2)(@babel/preset-env@7.25.3)(babel-loader@9.1.3)(webpack@5.93.0)
-      babel-loader: 9.1.3(@babel/core@7.25.2)(webpack@5.93.0)
+      '@cypress/webpack-preprocessor': 6.0.2(@babel/core@7.25.2)(@babel/preset-env@7.25.3(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(webpack@5.93.0(esbuild@0.21.5))
+      babel-loader: 9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5))
       chalk: 4.1.2
       cypress: 13.13.2
       dayjs: 1.11.12
@@ -10025,7 +10004,7 @@ snapshots:
       istanbul-lib-coverage: 3.2.2
       js-yaml: 4.1.0
       nyc: 15.1.0
-      webpack: 5.93.0(esbuild@0.21.5)(webpack-cli@4.10.0)
+      webpack: 5.93.0(esbuild@0.21.5)
     transitivePeerDependencies:
       - supports-color
 
@@ -10050,15 +10029,15 @@ snapshots:
       tunnel-agent: 0.6.0
       uuid: 8.3.2
 
-  '@cypress/webpack-preprocessor@6.0.2(@babel/core@7.25.2)(@babel/preset-env@7.25.3)(babel-loader@9.1.3)(webpack@5.93.0)':
+  '@cypress/webpack-preprocessor@6.0.2(@babel/core@7.25.2)(@babel/preset-env@7.25.3(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(webpack@5.93.0(esbuild@0.21.5))':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/preset-env': 7.25.3(@babel/core@7.25.2)
-      babel-loader: 9.1.3(@babel/core@7.25.2)(webpack@5.93.0)
+      babel-loader: 9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5))
       bluebird: 3.7.1
       debug: 4.3.5
       lodash: 4.17.21
-      webpack: 5.93.0(esbuild@0.21.5)(webpack-cli@4.10.0)
+      webpack: 5.93.0(esbuild@0.21.5)
     transitivePeerDependencies:
       - supports-color
 
@@ -10090,6 +10069,7 @@ snapshots:
       '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.24.0)(algoliasearch@4.24.0)
       '@docsearch/css': 3.6.1
       algoliasearch: 4.24.0
+    optionalDependencies:
       search-insights: 2.15.0
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -10224,11 +10204,11 @@ snapshots:
 
   '@floating-ui/utils@0.2.5': {}
 
-  '@floating-ui/vue@1.1.2(vue@3.4.35)':
+  '@floating-ui/vue@1.1.2(vue@3.4.35(typescript@5.4.5))':
     dependencies:
       '@floating-ui/dom': 1.6.8
       '@floating-ui/utils': 0.2.5
-      vue-demi: 0.14.10(vue@3.4.35)
+      vue-demi: 0.14.10(vue@3.4.35(typescript@5.4.5))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -10239,12 +10219,12 @@ snapshots:
     dependencies:
       '@hapi/hoek': 9.3.0
 
-  '@headlessui-float/vue@0.14.0(@headlessui/vue@1.7.22)(vue@3.4.35)':
+  '@headlessui-float/vue@0.14.0(@headlessui/vue@1.7.22(vue@3.4.35(typescript@5.4.5)))(vue@3.4.35(typescript@5.4.5))':
     dependencies:
       '@floating-ui/core': 1.6.5
       '@floating-ui/dom': 1.6.8
-      '@floating-ui/vue': 1.1.2(vue@3.4.35)
-      '@headlessui/vue': 1.7.22(vue@3.4.35)
+      '@floating-ui/vue': 1.1.2(vue@3.4.35(typescript@5.4.5))
+      '@headlessui/vue': 1.7.22(vue@3.4.35(typescript@5.4.5))
       vue: 3.4.35(typescript@5.4.5)
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -10253,9 +10233,9 @@ snapshots:
     dependencies:
       tailwindcss: 3.4.7
 
-  '@headlessui/vue@1.7.22(vue@3.4.35)':
+  '@headlessui/vue@1.7.22(vue@3.4.35(typescript@5.4.5))':
     dependencies:
-      '@tanstack/vue-virtual': 3.8.5(vue@3.4.35)
+      '@tanstack/vue-virtual': 3.8.5(vue@3.4.35(typescript@5.4.5))
       vue: 3.4.35(typescript@5.4.5)
 
   '@humanwhocodes/module-importer@1.0.1': {}
@@ -10592,12 +10572,14 @@ snapshots:
 
   '@polka/url@1.0.0-next.25': {}
 
-  '@rollup/plugin-babel@5.3.1(@babel/core@7.25.2)(rollup@2.79.1)':
+  '@rollup/plugin-babel@5.3.1(@babel/core@7.25.2)(@types/babel__core@7.20.5)(rollup@2.79.1)':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/helper-module-imports': 7.24.7
       '@rollup/pluginutils': 3.1.0(rollup@2.79.1)
       rollup: 2.79.1
+    optionalDependencies:
+      '@types/babel__core': 7.20.5
     transitivePeerDependencies:
       - supports-color
 
@@ -10609,6 +10591,7 @@ snapshots:
       is-builtin-module: 3.2.1
       is-module: 1.0.0
       resolve: 1.22.8
+    optionalDependencies:
       rollup: 2.79.1
 
   '@rollup/plugin-replace@2.4.2(rollup@2.79.1)':
@@ -10619,16 +10602,20 @@ snapshots:
 
   '@rollup/plugin-terser@0.4.4(rollup@2.79.1)':
     dependencies:
-      rollup: 2.79.1
       serialize-javascript: 6.0.2
       smob: 1.5.0
       terser: 5.31.3
+    optionalDependencies:
+      rollup: 2.79.1
 
-  '@rollup/plugin-typescript@11.1.6(typescript@5.4.5)':
+  '@rollup/plugin-typescript@11.1.6(rollup@4.20.0)(tslib@2.6.3)(typescript@5.4.5)':
     dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
+      '@rollup/pluginutils': 5.1.0(rollup@4.20.0)
       resolve: 1.22.8
       typescript: 5.4.5
+    optionalDependencies:
+      rollup: 4.20.0
+      tslib: 2.6.3
 
   '@rollup/pluginutils@3.1.0(rollup@2.79.1)':
     dependencies:
@@ -10642,8 +10629,17 @@ snapshots:
       '@types/estree': 1.0.5
       estree-walker: 2.0.2
       picomatch: 2.3.1
+    optionalDependencies:
       rollup: 2.79.1
 
+  '@rollup/pluginutils@5.1.0(rollup@4.20.0)':
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    optionalDependencies:
+      rollup: 4.20.0
+
   '@rollup/rollup-android-arm-eabi@4.20.0':
     optional: true
 
@@ -10735,7 +10731,7 @@ snapshots:
 
   '@tanstack/virtual-core@3.8.4': {}
 
-  '@tanstack/vue-virtual@3.8.5(vue@3.4.35)':
+  '@tanstack/vue-virtual@3.8.5(vue@3.4.35(typescript@5.4.5))':
     dependencies:
       '@tanstack/virtual-core': 3.8.4
       vue: 3.4.35(typescript@5.4.5)
@@ -11153,7 +11149,7 @@ snapshots:
       '@types/node': 20.14.14
     optional: true
 
-  '@typescript-eslint/eslint-plugin@8.0.0(@typescript-eslint/parser@8.0.0)(eslint@9.8.0)(typescript@5.4.5)':
+  '@typescript-eslint/eslint-plugin@8.0.0(@typescript-eslint/parser@8.0.0(eslint@9.8.0)(typescript@5.4.5))(eslint@9.8.0)(typescript@5.4.5)':
     dependencies:
       '@eslint-community/regexpp': 4.11.0
       '@typescript-eslint/parser': 8.0.0(eslint@9.8.0)(typescript@5.4.5)
@@ -11166,6 +11162,7 @@ snapshots:
       ignore: 5.3.1
       natural-compare: 1.4.0
       ts-api-utils: 1.3.0(typescript@5.4.5)
+    optionalDependencies:
       typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
@@ -11178,6 +11175,7 @@ snapshots:
       '@typescript-eslint/visitor-keys': 8.0.0
       debug: 4.3.6(supports-color@8.1.1)
       eslint: 9.8.0
+    optionalDependencies:
       typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
@@ -11193,6 +11191,7 @@ snapshots:
       '@typescript-eslint/utils': 8.0.0(eslint@9.8.0)(typescript@5.4.5)
       debug: 4.3.6(supports-color@8.1.1)
       ts-api-utils: 1.3.0(typescript@5.4.5)
+    optionalDependencies:
       typescript: 5.4.5
     transitivePeerDependencies:
       - eslint
@@ -11210,6 +11209,7 @@ snapshots:
       minimatch: 9.0.5
       semver: 7.6.3
       ts-api-utils: 1.3.0(typescript@5.4.5)
+    optionalDependencies:
       typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
@@ -11230,12 +11230,13 @@ snapshots:
       '@typescript-eslint/types': 8.0.0
       eslint-visitor-keys: 3.4.3
 
-  '@unocss/astro@0.59.4(rollup@2.79.1)(vite@5.3.5)':
+  '@unocss/astro@0.59.4(rollup@2.79.1)(vite@5.3.5(@types/node@20.14.14)(terser@5.31.3))':
     dependencies:
       '@unocss/core': 0.59.4
       '@unocss/reset': 0.59.4
-      '@unocss/vite': 0.59.4(rollup@2.79.1)(vite@5.3.5)
-      vite: 5.3.5(@types/node@20.14.14)
+      '@unocss/vite': 0.59.4(rollup@2.79.1)(vite@5.3.5(@types/node@20.14.14)(terser@5.31.3))
+    optionalDependencies:
+      vite: 5.3.5(@types/node@20.14.14)(terser@5.31.3)
     transitivePeerDependencies:
       - rollup
 
@@ -11366,7 +11367,7 @@ snapshots:
     dependencies:
       '@unocss/core': 0.59.4
 
-  '@unocss/vite@0.59.4(rollup@2.79.1)(vite@5.3.5)':
+  '@unocss/vite@0.59.4(rollup@2.79.1)(vite@5.3.5(@types/node@20.14.14)(terser@5.31.3))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
@@ -11378,20 +11379,20 @@ snapshots:
       chokidar: 3.6.0
       fast-glob: 3.3.2
       magic-string: 0.30.11
-      vite: 5.3.5(@types/node@20.14.14)
+      vite: 5.3.5(@types/node@20.14.14)(terser@5.31.3)
     transitivePeerDependencies:
       - rollup
 
-  '@vite-pwa/vitepress@0.4.0(vite-plugin-pwa@0.19.8)':
+  '@vite-pwa/vitepress@0.4.0(vite-plugin-pwa@0.19.8(vite@5.3.5(@types/node@20.14.14)(terser@5.31.3))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0))':
     dependencies:
-      vite-plugin-pwa: 0.19.8(vite@5.3.5)(workbox-build@7.1.1)(workbox-window@7.1.0)
+      vite-plugin-pwa: 0.19.8(vite@5.3.5(@types/node@20.14.14)(terser@5.31.3))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0)
 
-  '@vitejs/plugin-vue@5.1.2(vite@5.3.5)(vue@3.4.35)':
+  '@vitejs/plugin-vue@5.1.2(vite@5.3.5(@types/node@20.14.14)(terser@5.31.3))(vue@3.4.35(typescript@5.4.5))':
     dependencies:
-      vite: 5.3.5(@types/node@20.14.14)
+      vite: 5.3.5(@types/node@20.14.14)(terser@5.31.3)
       vue: 3.4.35(typescript@5.4.5)
 
-  '@vitest/coverage-v8@1.6.0(vitest@1.6.0)':
+  '@vitest/coverage-v8@1.6.0(vitest@1.6.0(@types/node@20.14.14)(@vitest/ui@1.6.0)(jsdom@24.1.1)(terser@5.31.3))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@bcoe/v8-coverage': 0.2.3
@@ -11406,7 +11407,7 @@ snapshots:
       std-env: 3.7.0
       strip-literal: 2.1.0
       test-exclude: 6.0.0
-      vitest: 1.6.0(@types/node@20.14.14)(@vitest/ui@1.6.0)(jsdom@24.1.1)
+      vitest: 1.6.0(@types/node@20.14.14)(@vitest/ui@1.6.0)(jsdom@24.1.1)(terser@5.31.3)
     transitivePeerDependencies:
       - supports-color
 
@@ -11441,7 +11442,7 @@ snapshots:
       pathe: 1.1.2
       picocolors: 1.0.1
       sirv: 2.0.4
-      vitest: 1.6.0(@types/node@20.14.14)(@vitest/ui@1.6.0)(jsdom@24.1.1)
+      vitest: 1.6.0(@types/node@20.14.14)(@vitest/ui@1.6.0)(jsdom@24.1.1)(terser@5.31.3)
 
   '@vitest/utils@1.6.0':
     dependencies:
@@ -11450,7 +11451,7 @@ snapshots:
       loupe: 2.3.7
       pretty-format: 29.7.0
 
-  '@vue/compat@3.4.35(vue@3.4.35)':
+  '@vue/compat@3.4.35(vue@3.4.35(typescript@5.4.5))':
     dependencies:
       '@babel/parser': 7.25.3
       estree-walker: 2.0.2
@@ -11523,7 +11524,7 @@ snapshots:
       '@vue/shared': 3.4.35
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.4.35(vue@3.4.35)':
+  '@vue/server-renderer@3.4.35(vue@3.4.35(typescript@5.4.5))':
     dependencies:
       '@vue/compiler-ssr': 3.4.35
       '@vue/shared': 3.4.35
@@ -11531,31 +11532,33 @@ snapshots:
 
   '@vue/shared@3.4.35': {}
 
-  '@vueuse/core@10.11.0(vue@3.4.35)':
+  '@vueuse/core@10.11.0(vue@3.4.35(typescript@5.4.5))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.11.0
-      '@vueuse/shared': 10.11.0(vue@3.4.35)
-      vue-demi: 0.14.10(vue@3.4.35)
+      '@vueuse/shared': 10.11.0(vue@3.4.35(typescript@5.4.5))
+      vue-demi: 0.14.10(vue@3.4.35(typescript@5.4.5))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/integrations@10.11.0(focus-trap@7.5.4)(vue@3.4.35)':
+  '@vueuse/integrations@10.11.0(axios@1.7.3)(focus-trap@7.5.4)(vue@3.4.35(typescript@5.4.5))':
     dependencies:
-      '@vueuse/core': 10.11.0(vue@3.4.35)
-      '@vueuse/shared': 10.11.0(vue@3.4.35)
+      '@vueuse/core': 10.11.0(vue@3.4.35(typescript@5.4.5))
+      '@vueuse/shared': 10.11.0(vue@3.4.35(typescript@5.4.5))
+      vue-demi: 0.14.10(vue@3.4.35(typescript@5.4.5))
+    optionalDependencies:
+      axios: 1.7.3(debug@4.3.6)
       focus-trap: 7.5.4
-      vue-demi: 0.14.10(vue@3.4.35)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
   '@vueuse/metadata@10.11.0': {}
 
-  '@vueuse/shared@10.11.0(vue@3.4.35)':
+  '@vueuse/shared@10.11.0(vue@3.4.35(typescript@5.4.5))':
     dependencies:
-      vue-demi: 0.14.10(vue@3.4.35)
+      vue-demi: 0.14.10(vue@3.4.35(typescript@5.4.5))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -11584,6 +11587,7 @@ snapshots:
     dependencies:
       '@types/node': 18.19.43
       got: 11.8.6
+    optionalDependencies:
       typescript: 5.4.5
 
   '@wdio/utils@7.30.2(typescript@5.4.5)':
@@ -11670,19 +11674,20 @@ snapshots:
       '@webassemblyjs/ast': 1.12.1
       '@xtuc/long': 4.2.2
 
-  '@webpack-cli/configtest@1.2.0(webpack-cli@4.10.0)(webpack@5.93.0)':
+  '@webpack-cli/configtest@1.2.0(webpack-cli@4.10.0(webpack-dev-server@4.15.2)(webpack@5.93.0))(webpack@5.93.0(esbuild@0.21.5)(webpack-cli@4.10.0))':
     dependencies:
       webpack: 5.93.0(esbuild@0.21.5)(webpack-cli@4.10.0)
       webpack-cli: 4.10.0(webpack-dev-server@4.15.2)(webpack@5.93.0)
 
-  '@webpack-cli/info@1.5.0(webpack-cli@4.10.0)':
+  '@webpack-cli/info@1.5.0(webpack-cli@4.10.0(webpack-dev-server@4.15.2)(webpack@5.93.0))':
     dependencies:
       envinfo: 7.13.0
       webpack-cli: 4.10.0(webpack-dev-server@4.15.2)(webpack@5.93.0)
 
-  '@webpack-cli/serve@1.7.0(webpack-cli@4.10.0)(webpack-dev-server@4.15.2)':
+  '@webpack-cli/serve@1.7.0(webpack-cli@4.10.0(webpack-dev-server@4.15.2)(webpack@5.93.0))(webpack-dev-server@4.15.2(webpack-cli@4.10.0)(webpack@5.93.0))':
     dependencies:
       webpack-cli: 4.10.0(webpack-dev-server@4.15.2)(webpack@5.93.0)
+    optionalDependencies:
       webpack-dev-server: 4.15.2(webpack-cli@4.10.0)(webpack@5.93.0)
 
   '@xmldom/xmldom@0.8.10': {}
@@ -11693,12 +11698,12 @@ snapshots:
 
   '@zenuml/core@3.24.2(typescript@5.4.5)':
     dependencies:
-      '@headlessui-float/vue': 0.14.0(@headlessui/vue@1.7.22)(vue@3.4.35)
+      '@headlessui-float/vue': 0.14.0(@headlessui/vue@1.7.22(vue@3.4.35(typescript@5.4.5)))(vue@3.4.35(typescript@5.4.5))
       '@headlessui/tailwindcss': 0.2.1(tailwindcss@3.4.7)
-      '@headlessui/vue': 1.7.22(vue@3.4.35)
+      '@headlessui/vue': 1.7.22(vue@3.4.35(typescript@5.4.5))
       '@types/assert': 1.5.10
       '@types/ramda': 0.28.25
-      '@vue/compat': 3.4.35(vue@3.4.35)
+      '@vue/compat': 3.4.35(vue@3.4.35(typescript@5.4.5))
       antlr4: 4.11.0
       color-string: 1.9.1
       dom-to-image-more: 2.16.0
@@ -11713,7 +11718,7 @@ snapshots:
       ramda: 0.28.0
       tailwindcss: 3.4.7
       vue: 3.4.35(typescript@5.4.5)
-      vuex: 4.1.0(vue@3.4.35)
+      vuex: 4.1.0(vue@3.4.35(typescript@5.4.5))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - ts-node
@@ -11771,7 +11776,7 @@ snapshots:
       indent-string: 5.0.0
 
   ajv-formats@2.1.1(ajv@8.17.1):
-    dependencies:
+    optionalDependencies:
       ajv: 8.17.1
 
   ajv-keywords@3.5.2(ajv@6.12.6):
@@ -11976,12 +11981,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0):
+  babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)):
     dependencies:
       '@babel/core': 7.25.2
       find-cache-dir: 4.0.0
       schema-utils: 4.2.0
-      webpack: 5.93.0(esbuild@0.21.5)(webpack-cli@4.10.0)
+      webpack: 5.93.0(esbuild@0.21.5)
 
   babel-plugin-istanbul@6.1.1:
     dependencies:
@@ -12687,13 +12692,13 @@ snapshots:
 
   cuint@0.2.2: {}
 
-  cypress-image-snapshot@4.0.1(cypress@13.13.2)(jest@29.7.0):
+  cypress-image-snapshot@4.0.1(cypress@13.13.2)(jest@29.7.0(@types/node@20.14.14)):
     dependencies:
       chalk: 2.4.2
       cypress: 13.13.2
       fs-extra: 7.0.1
       glob: 7.2.3
-      jest-image-snapshot: 4.2.0(jest@29.7.0)
+      jest-image-snapshot: 4.2.0(jest@29.7.0(@types/node@20.14.14))
       pkg-dir: 3.0.0
       term-img: 4.1.0
     transitivePeerDependencies:
@@ -12972,6 +12977,7 @@ snapshots:
   debug@3.2.7(supports-color@8.1.1):
     dependencies:
       ms: 2.1.3
+    optionalDependencies:
       supports-color: 8.1.1
 
   debug@4.3.3:
@@ -12989,6 +12995,7 @@ snapshots:
   debug@4.3.6(supports-color@8.1.1):
     dependencies:
       ms: 2.1.2
+    optionalDependencies:
       supports-color: 8.1.1
 
   decamelize@1.2.0: {}
@@ -13327,10 +13334,12 @@ snapshots:
     dependencies:
       htmlparser2: 9.1.0
 
-  eslint-plugin-jest@28.7.0(eslint@9.8.0)(jest@29.7.0)(typescript@5.4.5):
+  eslint-plugin-jest@28.7.0(@typescript-eslint/eslint-plugin@8.0.0(@typescript-eslint/parser@8.0.0(eslint@9.8.0)(typescript@5.4.5))(eslint@9.8.0)(typescript@5.4.5))(eslint@9.8.0)(jest@29.7.0(@types/node@20.14.14))(typescript@5.4.5):
     dependencies:
       '@typescript-eslint/utils': 8.0.0(eslint@9.8.0)(typescript@5.4.5)
       eslint: 9.8.0
+    optionalDependencies:
+      '@typescript-eslint/eslint-plugin': 8.0.0(@typescript-eslint/parser@8.0.0(eslint@9.8.0)(typescript@5.4.5))(eslint@9.8.0)(typescript@5.4.5)
       jest: 29.7.0(@types/node@20.14.14)
     transitivePeerDependencies:
       - supports-color
@@ -13831,7 +13840,7 @@ snapshots:
       tabbable: 6.2.0
 
   follow-redirects@1.15.6(debug@4.3.6):
-    dependencies:
+    optionalDependencies:
       debug: 4.3.6(supports-color@8.1.1)
 
   font-awesome@4.7.0: {}
@@ -14213,12 +14222,13 @@ snapshots:
 
   http-proxy-middleware@2.0.6(@types/express@4.17.21):
     dependencies:
-      '@types/express': 4.17.21
       '@types/http-proxy': 1.17.14
       http-proxy: 1.18.1
       is-glob: 4.0.3
       is-plain-obj: 3.0.0
       micromatch: 4.0.7
+    optionalDependencies:
+      '@types/express': 4.17.21
     transitivePeerDependencies:
       - debug
 
@@ -14643,7 +14653,6 @@ snapshots:
       '@babel/core': 7.25.2
       '@jest/test-sequencer': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.14.14
       babel-jest: 29.7.0(@babel/core@7.25.2)
       chalk: 4.1.2
       ci-info: 3.9.0
@@ -14663,6 +14672,8 @@ snapshots:
       pretty-format: 29.7.0
       slash: 3.0.0
       strip-json-comments: 3.1.1
+    optionalDependencies:
+      '@types/node': 20.14.14
     transitivePeerDependencies:
       - babel-plugin-macros
       - supports-color
@@ -14713,7 +14724,7 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
-  jest-image-snapshot@4.2.0(jest@29.7.0):
+  jest-image-snapshot@4.2.0(jest@29.7.0(@types/node@20.14.14)):
     dependencies:
       chalk: 1.1.3
       get-stdin: 5.0.1
@@ -14757,7 +14768,7 @@ snapshots:
       jest-util: 29.7.0
 
   jest-pnp-resolver@1.2.3(jest-resolve@29.7.0):
-    dependencies:
+    optionalDependencies:
       jest-resolve: 29.7.0
 
   jest-regex-util@29.6.3: {}
@@ -15154,13 +15165,14 @@ snapshots:
     dependencies:
       cli-truncate: 2.1.0
       colorette: 2.0.20
-      enquirer: 2.4.1
       log-update: 4.0.0
       p-map: 4.0.0
       rfdc: 1.4.1
       rxjs: 7.8.1
       through: 2.3.8
       wrap-ansi: 7.0.0
+    optionalDependencies:
+      enquirer: 2.4.1
 
   listr2@8.2.4:
     dependencies:
@@ -15772,8 +15784,9 @@ snapshots:
 
   node-fetch@2.6.7(encoding@0.1.13):
     dependencies:
-      encoding: 0.1.13
       whatwg-url: 5.0.0
+    optionalDependencies:
+      encoding: 0.1.13
 
   node-fetch@3.3.1:
     dependencies:
@@ -16184,8 +16197,9 @@ snapshots:
   postcss-load-config@4.0.2(postcss@8.4.40):
     dependencies:
       lilconfig: 3.1.2
-      postcss: 8.4.40
       yaml: 2.5.0
+    optionalDependencies:
+      postcss: 8.4.40
 
   postcss-nested@6.2.0(postcss@8.4.40):
     dependencies:
@@ -16515,12 +16529,14 @@ snapshots:
 
   robust-predicates@3.0.2: {}
 
-  rollup-plugin-visualizer@5.12.0:
+  rollup-plugin-visualizer@5.12.0(rollup@4.20.0):
     dependencies:
       open: 8.4.2
       picomatch: 2.3.1
       source-map: 0.7.4
       yargs: 17.7.2
+    optionalDependencies:
+      rollup: 4.20.0
 
   rollup@2.79.1:
     optionalDependencies:
@@ -17160,15 +17176,27 @@ snapshots:
       ansi-escapes: 4.3.2
       iterm2-version: 4.2.0
 
-  terser-webpack-plugin@5.3.10(esbuild@0.21.5)(webpack@5.93.0):
+  terser-webpack-plugin@5.3.10(esbuild@0.21.5)(webpack@5.93.0(esbuild@0.21.5)(webpack-cli@4.10.0)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
-      esbuild: 0.21.5
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.2
       terser: 5.31.3
       webpack: 5.93.0(esbuild@0.21.5)(webpack-cli@4.10.0)
+    optionalDependencies:
+      esbuild: 0.21.5
+
+  terser-webpack-plugin@5.3.10(esbuild@0.21.5)(webpack@5.93.0(esbuild@0.21.5)):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.25
+      jest-worker: 27.5.1
+      schema-utils: 3.3.0
+      serialize-javascript: 6.0.2
+      terser: 5.31.3
+      webpack: 5.93.0(esbuild@0.21.5)
+    optionalDependencies:
+      esbuild: 0.21.5
 
   terser@5.31.3:
     dependencies:
@@ -17343,7 +17371,7 @@ snapshots:
     dependencies:
       is-typedarray: 1.0.0
 
-  typedoc-plugin-markdown@3.17.1(typedoc@0.25.13):
+  typedoc-plugin-markdown@3.17.1(typedoc@0.25.13(typescript@5.4.5)):
     dependencies:
       handlebars: 4.7.8
       typedoc: 0.25.13(typescript@5.4.5)
@@ -17358,9 +17386,10 @@ snapshots:
 
   typescript-eslint@8.0.0(eslint@9.8.0)(typescript@5.4.5):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.0.0(@typescript-eslint/parser@8.0.0)(eslint@9.8.0)(typescript@5.4.5)
+      '@typescript-eslint/eslint-plugin': 8.0.0(@typescript-eslint/parser@8.0.0(eslint@9.8.0)(typescript@5.4.5))(eslint@9.8.0)(typescript@5.4.5)
       '@typescript-eslint/parser': 8.0.0(eslint@9.8.0)(typescript@5.4.5)
       '@typescript-eslint/utils': 8.0.0(eslint@9.8.0)(typescript@5.4.5)
+    optionalDependencies:
       typescript: 5.4.5
     transitivePeerDependencies:
       - eslint
@@ -17463,9 +17492,9 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  unocss@0.59.4(postcss@8.4.40)(rollup@2.79.1)(vite@5.3.5):
+  unocss@0.59.4(postcss@8.4.40)(rollup@2.79.1)(vite@5.3.5(@types/node@20.14.14)(terser@5.31.3)):
     dependencies:
-      '@unocss/astro': 0.59.4(rollup@2.79.1)(vite@5.3.5)
+      '@unocss/astro': 0.59.4(rollup@2.79.1)(vite@5.3.5(@types/node@20.14.14)(terser@5.31.3))
       '@unocss/cli': 0.59.4(rollup@2.79.1)
       '@unocss/core': 0.59.4
       '@unocss/extractor-arbitrary-variants': 0.59.4
@@ -17484,8 +17513,9 @@ snapshots:
       '@unocss/transformer-compile-class': 0.59.4
       '@unocss/transformer-directives': 0.59.4
       '@unocss/transformer-variant-group': 0.59.4
-      '@unocss/vite': 0.59.4(rollup@2.79.1)(vite@5.3.5)
-      vite: 5.3.5(@types/node@20.14.14)
+      '@unocss/vite': 0.59.4(rollup@2.79.1)(vite@5.3.5(@types/node@20.14.14)(terser@5.31.3))
+    optionalDependencies:
+      vite: 5.3.5(@types/node@20.14.14)(terser@5.31.3)
     transitivePeerDependencies:
       - postcss
       - rollup
@@ -17493,7 +17523,7 @@ snapshots:
 
   unpipe@1.0.0: {}
 
-  unplugin-vue-components@0.26.0(rollup@2.79.1)(vue@3.4.35):
+  unplugin-vue-components@0.26.0(@babel/parser@7.25.3)(rollup@2.79.1)(vue@3.4.35(typescript@5.4.5)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
@@ -17506,6 +17536,8 @@ snapshots:
       resolve: 1.22.8
       unplugin: 1.12.0
       vue: 3.4.35(typescript@5.4.5)
+    optionalDependencies:
+      '@babel/parser': 7.25.3
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -17574,13 +17606,13 @@ snapshots:
       unist-util-stringify-position: 4.0.0
       vfile-message: 4.0.2
 
-  vite-node@1.6.0(@types/node@20.14.14):
+  vite-node@1.6.0(@types/node@20.14.14)(terser@5.31.3):
     dependencies:
       cac: 6.7.14
       debug: 4.3.6(supports-color@8.1.1)
       pathe: 1.1.2
       picocolors: 1.0.1
-      vite: 5.3.5(@types/node@20.14.14)
+      vite: 5.3.5(@types/node@20.14.14)(terser@5.31.3)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -17591,7 +17623,7 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-istanbul@6.0.2(vite@5.3.5):
+  vite-plugin-istanbul@6.0.2(vite@5.3.5(@types/node@20.14.14)(terser@5.31.3)):
     dependencies:
       '@istanbuljs/load-nyc-config': 1.1.0
       espree: 10.1.0
@@ -17599,58 +17631,60 @@ snapshots:
       picocolors: 1.0.1
       source-map: 0.7.4
       test-exclude: 6.0.0
-      vite: 5.3.5(@types/node@20.14.14)
+      vite: 5.3.5(@types/node@20.14.14)(terser@5.31.3)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-pwa@0.19.8(vite@5.3.5)(workbox-build@7.1.1)(workbox-window@7.1.0):
+  vite-plugin-pwa@0.19.8(vite@5.3.5(@types/node@20.14.14)(terser@5.31.3))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0):
     dependencies:
       debug: 4.3.6(supports-color@8.1.1)
       fast-glob: 3.3.2
       pretty-bytes: 6.1.1
-      vite: 5.3.5(@types/node@20.14.14)
-      workbox-build: 7.1.1
+      vite: 5.3.5(@types/node@20.14.14)(terser@5.31.3)
+      workbox-build: 7.1.1(@types/babel__core@7.20.5)
       workbox-window: 7.1.0
     transitivePeerDependencies:
       - supports-color
 
-  vite@5.3.5(@types/node@20.14.14):
+  vite@5.3.5(@types/node@20.14.14)(terser@5.31.3):
     dependencies:
-      '@types/node': 20.14.14
       esbuild: 0.21.5
       postcss: 8.4.40
       rollup: 4.20.0
     optionalDependencies:
+      '@types/node': 20.14.14
       fsevents: 2.3.3
+      terser: 5.31.3
 
-  vitepress-plugin-search@1.0.4-alpha.22(flexsearch@0.7.43)(vitepress@1.1.4)(vue@3.4.35):
+  vitepress-plugin-search@1.0.4-alpha.22(flexsearch@0.7.43)(vitepress@1.1.4(@algolia/client-search@4.24.0)(@types/node@20.14.14)(axios@1.7.3)(postcss@8.4.40)(search-insights@2.15.0)(terser@5.31.3)(typescript@5.4.5))(vue@3.4.35(typescript@5.4.5)):
     dependencies:
       '@types/flexsearch': 0.7.6
       '@types/markdown-it': 12.2.3
       flexsearch: 0.7.43
       glob-to-regexp: 0.4.1
       markdown-it: 13.0.2
-      vitepress: 1.1.4(@algolia/client-search@4.24.0)(@types/node@20.14.14)(postcss@8.4.40)(search-insights@2.15.0)(typescript@5.4.5)
+      vitepress: 1.1.4(@algolia/client-search@4.24.0)(@types/node@20.14.14)(axios@1.7.3)(postcss@8.4.40)(search-insights@2.15.0)(terser@5.31.3)(typescript@5.4.5)
       vue: 3.4.35(typescript@5.4.5)
 
-  vitepress@1.1.4(@algolia/client-search@4.24.0)(@types/node@20.14.14)(postcss@8.4.40)(search-insights@2.15.0)(typescript@5.4.5):
+  vitepress@1.1.4(@algolia/client-search@4.24.0)(@types/node@20.14.14)(axios@1.7.3)(postcss@8.4.40)(search-insights@2.15.0)(terser@5.31.3)(typescript@5.4.5):
     dependencies:
       '@docsearch/css': 3.6.1
       '@docsearch/js': 3.6.1(@algolia/client-search@4.24.0)(search-insights@2.15.0)
       '@shikijs/core': 1.12.1
       '@shikijs/transformers': 1.12.1
       '@types/markdown-it': 14.1.2
-      '@vitejs/plugin-vue': 5.1.2(vite@5.3.5)(vue@3.4.35)
+      '@vitejs/plugin-vue': 5.1.2(vite@5.3.5(@types/node@20.14.14)(terser@5.31.3))(vue@3.4.35(typescript@5.4.5))
       '@vue/devtools-api': 7.3.7
-      '@vueuse/core': 10.11.0(vue@3.4.35)
-      '@vueuse/integrations': 10.11.0(focus-trap@7.5.4)(vue@3.4.35)
+      '@vueuse/core': 10.11.0(vue@3.4.35(typescript@5.4.5))
+      '@vueuse/integrations': 10.11.0(axios@1.7.3)(focus-trap@7.5.4)(vue@3.4.35(typescript@5.4.5))
       focus-trap: 7.5.4
       mark.js: 8.11.1
       minisearch: 6.3.0
-      postcss: 8.4.40
       shiki: 1.12.1
-      vite: 5.3.5(@types/node@20.14.14)
+      vite: 5.3.5(@types/node@20.14.14)(terser@5.31.3)
       vue: 3.4.35(typescript@5.4.5)
+    optionalDependencies:
+      postcss: 8.4.40
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/node'
@@ -17678,20 +17712,17 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest@1.6.0(@types/node@20.14.14)(@vitest/ui@1.6.0)(jsdom@24.1.1):
+  vitest@1.6.0(@types/node@20.14.14)(@vitest/ui@1.6.0)(jsdom@24.1.1)(terser@5.31.3):
     dependencies:
-      '@types/node': 20.14.14
       '@vitest/expect': 1.6.0
       '@vitest/runner': 1.6.0
       '@vitest/snapshot': 1.6.0
       '@vitest/spy': 1.6.0
-      '@vitest/ui': 1.6.0(vitest@1.6.0)
       '@vitest/utils': 1.6.0
       acorn-walk: 8.3.3
       chai: 4.5.0
       debug: 4.3.6(supports-color@8.1.1)
       execa: 8.0.1
-      jsdom: 24.1.1
       local-pkg: 0.5.0
       magic-string: 0.30.11
       pathe: 1.1.2
@@ -17700,9 +17731,13 @@ snapshots:
       strip-literal: 2.1.0
       tinybench: 2.9.0
       tinypool: 0.8.4
-      vite: 5.3.5(@types/node@20.14.14)
-      vite-node: 1.6.0(@types/node@20.14.14)
+      vite: 5.3.5(@types/node@20.14.14)(terser@5.31.3)
+      vite-node: 1.6.0(@types/node@20.14.14)(terser@5.31.3)
       why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 20.14.14
+      '@vitest/ui': 1.6.0(vitest@1.6.0)
+      jsdom: 24.1.1
     transitivePeerDependencies:
       - less
       - lightningcss
@@ -17743,7 +17778,7 @@ snapshots:
 
   vscode-uri@3.0.8: {}
 
-  vue-demi@0.14.10(vue@3.4.35):
+  vue-demi@0.14.10(vue@3.4.35(typescript@5.4.5)):
     dependencies:
       vue: 3.4.35(typescript@5.4.5)
 
@@ -17752,11 +17787,12 @@ snapshots:
       '@vue/compiler-dom': 3.4.35
       '@vue/compiler-sfc': 3.4.35
       '@vue/runtime-dom': 3.4.35
-      '@vue/server-renderer': 3.4.35(vue@3.4.35)
+      '@vue/server-renderer': 3.4.35(vue@3.4.35(typescript@5.4.5))
       '@vue/shared': 3.4.35
+    optionalDependencies:
       typescript: 5.4.5
 
-  vuex@4.1.0(vue@3.4.35):
+  vuex@4.1.0(vue@3.4.35(typescript@5.4.5)):
     dependencies:
       '@vue/devtools-api': 6.6.3
       vue: 3.4.35(typescript@5.4.5)
@@ -17813,9 +17849,9 @@ snapshots:
   webpack-cli@4.10.0(webpack-dev-server@4.15.2)(webpack@5.93.0):
     dependencies:
       '@discoveryjs/json-ext': 0.5.7
-      '@webpack-cli/configtest': 1.2.0(webpack-cli@4.10.0)(webpack@5.93.0)
-      '@webpack-cli/info': 1.5.0(webpack-cli@4.10.0)
-      '@webpack-cli/serve': 1.7.0(webpack-cli@4.10.0)(webpack-dev-server@4.15.2)
+      '@webpack-cli/configtest': 1.2.0(webpack-cli@4.10.0(webpack-dev-server@4.15.2)(webpack@5.93.0))(webpack@5.93.0(esbuild@0.21.5)(webpack-cli@4.10.0))
+      '@webpack-cli/info': 1.5.0(webpack-cli@4.10.0(webpack-dev-server@4.15.2)(webpack@5.93.0))
+      '@webpack-cli/serve': 1.7.0(webpack-cli@4.10.0(webpack-dev-server@4.15.2)(webpack@5.93.0))(webpack-dev-server@4.15.2(webpack-cli@4.10.0)(webpack@5.93.0))
       colorette: 2.0.20
       commander: 7.2.0
       cross-spawn: 7.0.3
@@ -17824,10 +17860,11 @@ snapshots:
       interpret: 2.2.0
       rechoir: 0.7.1
       webpack: 5.93.0(esbuild@0.21.5)(webpack-cli@4.10.0)
-      webpack-dev-server: 4.15.2(webpack-cli@4.10.0)(webpack@5.93.0)
       webpack-merge: 5.10.0
+    optionalDependencies:
+      webpack-dev-server: 4.15.2(webpack-cli@4.10.0)(webpack@5.93.0)
 
-  webpack-dev-middleware@5.3.4(webpack@5.93.0):
+  webpack-dev-middleware@5.3.4(webpack@5.93.0(esbuild@0.21.5)(webpack-cli@4.10.0)):
     dependencies:
       colorette: 2.0.20
       memfs: 3.5.3
@@ -17866,10 +17903,11 @@ snapshots:
       serve-index: 1.9.1
       sockjs: 0.3.24
       spdy: 4.0.2
+      webpack-dev-middleware: 5.3.4(webpack@5.93.0(esbuild@0.21.5)(webpack-cli@4.10.0))
+      ws: 8.18.0
+    optionalDependencies:
       webpack: 5.93.0(esbuild@0.21.5)(webpack-cli@4.10.0)
       webpack-cli: 4.10.0(webpack-dev-server@4.15.2)(webpack@5.93.0)
-      webpack-dev-middleware: 5.3.4(webpack@5.93.0)
-      ws: 8.18.0
     transitivePeerDependencies:
       - bufferutil
       - debug
@@ -17886,6 +17924,37 @@ snapshots:
 
   webpack-virtual-modules@0.6.2: {}
 
+  webpack@5.93.0(esbuild@0.21.5):
+    dependencies:
+      '@types/eslint-scope': 3.7.7
+      '@types/estree': 1.0.5
+      '@webassemblyjs/ast': 1.12.1
+      '@webassemblyjs/wasm-edit': 1.12.1
+      '@webassemblyjs/wasm-parser': 1.12.1
+      acorn: 8.12.1
+      acorn-import-attributes: 1.9.5(acorn@8.12.1)
+      browserslist: 4.23.3
+      chrome-trace-event: 1.0.4
+      enhanced-resolve: 5.17.1
+      es-module-lexer: 1.5.4
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+      json-parse-even-better-errors: 2.3.1
+      loader-runner: 4.3.0
+      mime-types: 2.1.35
+      neo-async: 2.6.2
+      schema-utils: 3.3.0
+      tapable: 2.2.1
+      terser-webpack-plugin: 5.3.10(esbuild@0.21.5)(webpack@5.93.0(esbuild@0.21.5))
+      watchpack: 2.4.1
+      webpack-sources: 3.2.3
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+
   webpack@5.93.0(esbuild@0.21.5)(webpack-cli@4.10.0):
     dependencies:
       '@types/eslint-scope': 3.7.7
@@ -17909,10 +17978,11 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(esbuild@0.21.5)(webpack@5.93.0)
+      terser-webpack-plugin: 5.3.10(esbuild@0.21.5)(webpack@5.93.0(esbuild@0.21.5)(webpack-cli@4.10.0))
       watchpack: 2.4.1
-      webpack-cli: 4.10.0(webpack-dev-server@4.15.2)(webpack@5.93.0)
       webpack-sources: 3.2.3
+    optionalDependencies:
+      webpack-cli: 4.10.0(webpack-dev-server@4.15.2)(webpack@5.93.0)
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
@@ -17998,13 +18068,13 @@ snapshots:
     dependencies:
       workbox-core: 7.1.0
 
-  workbox-build@7.1.1:
+  workbox-build@7.1.1(@types/babel__core@7.20.5):
     dependencies:
       '@apideck/better-ajv-errors': 0.3.6(ajv@8.17.1)
       '@babel/core': 7.25.2
       '@babel/preset-env': 7.25.3(@babel/core@7.25.2)
       '@babel/runtime': 7.25.0
-      '@rollup/plugin-babel': 5.3.1(@babel/core@7.25.2)(rollup@2.79.1)
+      '@rollup/plugin-babel': 5.3.1(@babel/core@7.25.2)(@types/babel__core@7.20.5)(rollup@2.79.1)
       '@rollup/plugin-node-resolve': 15.2.3(rollup@2.79.1)
       '@rollup/plugin-replace': 2.4.2(rollup@2.79.1)
       '@rollup/plugin-terser': 0.4.4(rollup@2.79.1)