@windrun-huaiin/third-ui 7.6.1 → 10.1.0

package/dist/node_modules/.pnpm/{mermaid@11.9.0/node_modules/mermaid/dist/chunks/mermaid.core/architectureDiagram-SUXI7LT5.mjs → mermaid@11.12.1/node_modules/mermaid/dist/chunks/mermaid.core/architectureDiagram-VXUJARFQ.mjs}

@@ -1,10 +1,10 @@
-import { createText, getIconSVG, registerIconPacks, unknownIcon } from './chunk-QESNASVV.mjs';
-import { populateCommonDb } from './chunk-353BL4L5.mjs';
-import { ImperativeState } from './chunk-AACKK3MU.mjs';
-import { cleanAndMerge } from './chunk-55PJQP7W.mjs';
-import { selectSvgElement } from './chunk-P3VETL53.mjs';
-import { __name, getAccDescription, setAccDescription, getAccTitle, setAccTitle, getDiagramTitle, setDiagramTitle, setupGraphViewbox, getConfig, defaultConfig_default, clear, log, getConfig2 } from './chunk-3XYRH5AP.mjs';
-import { parse } from '../../../../../../@mermaid-js_parser@0.6.2/node_modules/@mermaid-js/parser/dist/mermaid-parser.core.mjs';
+import { selectSvgElement } from './chunk-EXTU4WIE.mjs';
+import { createText, getIconSVG, registerIconPacks, unknownIcon } from './chunk-JA3XYJ7Z.mjs';
+import { populateCommonDb } from './chunk-4BX2VUAB.mjs';
+import { cleanAndMerge, getEdgeId } from './chunk-S3R3BYOJ.mjs';
+import { setupGraphViewbox, setAccTitle, getAccTitle, setDiagramTitle, getDiagramTitle, getAccDescription, setAccDescription, clear, getConfig, defaultConfig_default, getConfig2, sanitizeText } from './chunk-ABZYJK2D.mjs';
+import { __name, log } from './chunk-AGHRB4JF.mjs';
+import { parse } from '../../../../../../@mermaid-js_parser@0.6.3/node_modules/@mermaid-js/parser/dist/mermaid-parser.core.mjs';
 import cytoscape from '../../../../../../cytoscape@3.33.1/node_modules/cytoscape/dist/cytoscape.esm.mjs';
 import fcose from '../../../../../../../../_virtual/cytoscape-fcose.mjs';
 import '../../../../../../d3-transition@3.0.1_d3-selection@3.0.0/node_modules/d3-transition/src/selection/index.mjs';
@@ -121,282 +121,299 @@ var nodeData = /* @__PURE__ */ __name((node) => {
 
 // src/diagrams/architecture/architectureDb.ts
 var DEFAULT_ARCHITECTURE_CONFIG = defaultConfig_default.architecture;
-var state = new ImperativeState(() => ({
-  nodes: {},
-  groups: {},
-  edges: [],
-  registeredIds: {},
-  config: DEFAULT_ARCHITECTURE_CONFIG,
-  dataStructures: void 0,
-  elements: {}
-}));
-var clear2 = /* @__PURE__ */ __name(() => {
-  state.reset();
-  clear();
-}, "clear");
-var addService = /* @__PURE__ */ __name(function({
-  id,
-  icon,
-  in: parent,
-  title,
-  iconText
-}) {
-  if (state.records.registeredIds[id] !== void 0) {
-    throw new Error(
-      `The service id [${id}] is already in use by another ${state.records.registeredIds[id]}`
-    );
+var ArchitectureDB = class {
+  constructor() {
+    this.nodes = {};
+    this.groups = {};
+    this.edges = [];
+    this.registeredIds = {};
+    this.elements = {};
+    this.setAccTitle = setAccTitle;
+    this.getAccTitle = getAccTitle;
+    this.setDiagramTitle = setDiagramTitle;
+    this.getDiagramTitle = getDiagramTitle;
+    this.getAccDescription = getAccDescription;
+    this.setAccDescription = setAccDescription;
+    this.clear();
   }
-  if (parent !== void 0) {
-    if (id === parent) {
-      throw new Error(`The service [${id}] cannot be placed within itself`);
-    }
-    if (state.records.registeredIds[parent] === void 0) {
-      throw new Error(
-        `The service [${id}]'s parent does not exist. Please make sure the parent is created before this service`
-      );
-    }
-    if (state.records.registeredIds[parent] === "node") {
-      throw new Error(`The service [${id}]'s parent is not a group`);
-    }
+  static {
+    __name(this, "ArchitectureDB");
   }
-  state.records.registeredIds[id] = "node";
-  state.records.nodes[id] = {
+  clear() {
+    this.nodes = {};
+    this.groups = {};
+    this.edges = [];
+    this.registeredIds = {};
+    this.dataStructures = void 0;
+    this.elements = {};
+    clear();
+  }
+  addService({
     id,
-    type: "service",
     icon,
-    iconText,
+    in: parent,
     title,
-    edges: [],
-    in: parent
-  };
-}, "addService");
-var getServices = /* @__PURE__ */ __name(() => Object.values(state.records.nodes).filter(isArchitectureService), "getServices");
-var addJunction = /* @__PURE__ */ __name(function({ id, in: parent }) {
-  state.records.registeredIds[id] = "node";
-  state.records.nodes[id] = {
-    id,
-    type: "junction",
-    edges: [],
-    in: parent
-  };
-}, "addJunction");
-var getJunctions = /* @__PURE__ */ __name(() => Object.values(state.records.nodes).filter(isArchitectureJunction), "getJunctions");
-var getNodes = /* @__PURE__ */ __name(() => Object.values(state.records.nodes), "getNodes");
-var getNode = /* @__PURE__ */ __name((id) => state.records.nodes[id], "getNode");
-var addGroup = /* @__PURE__ */ __name(function({ id, icon, in: parent, title }) {
-  if (state.records.registeredIds[id] !== void 0) {
-    throw new Error(
-      `The group id [${id}] is already in use by another ${state.records.registeredIds[id]}`
-    );
-  }
-  if (parent !== void 0) {
-    if (id === parent) {
-      throw new Error(`The group [${id}] cannot be placed within itself`);
-    }
-    if (state.records.registeredIds[parent] === void 0) {
+    iconText
+  }) {
+    if (this.registeredIds[id] !== void 0) {
       throw new Error(
-        `The group [${id}]'s parent does not exist. Please make sure the parent is created before this group`
+        `The service id [${id}] is already in use by another ${this.registeredIds[id]}`
       );
     }
-    if (state.records.registeredIds[parent] === "node") {
-      throw new Error(`The group [${id}]'s parent is not a group`);
+    if (parent !== void 0) {
+      if (id === parent) {
+        throw new Error(`The service [${id}] cannot be placed within itself`);
+      }
+      if (this.registeredIds[parent] === void 0) {
+        throw new Error(
+          `The service [${id}]'s parent does not exist. Please make sure the parent is created before this service`
+        );
+      }
+      if (this.registeredIds[parent] === "node") {
+        throw new Error(`The service [${id}]'s parent is not a group`);
+      }
     }
+    this.registeredIds[id] = "node";
+    this.nodes[id] = {
+      id,
+      type: "service",
+      icon,
+      iconText,
+      title,
+      edges: [],
+      in: parent
+    };
   }
-  state.records.registeredIds[id] = "group";
-  state.records.groups[id] = {
-    id,
-    icon,
-    title,
-    in: parent
-  };
-}, "addGroup");
-var getGroups = /* @__PURE__ */ __name(() => {
-  return Object.values(state.records.groups);
-}, "getGroups");
-var addEdge = /* @__PURE__ */ __name(function({
-  lhsId,
-  rhsId,
-  lhsDir,
-  rhsDir,
-  lhsInto,
-  rhsInto,
-  lhsGroup,
-  rhsGroup,
-  title
-}) {
-  if (!isArchitectureDirection(lhsDir)) {
-    throw new Error(
-      `Invalid direction given for left hand side of edge ${lhsId}--${rhsId}. Expected (L,R,T,B) got ${lhsDir}`
-    );
+  getServices() {
+    return Object.values(this.nodes).filter(isArchitectureService);
   }
-  if (!isArchitectureDirection(rhsDir)) {
-    throw new Error(
-      `Invalid direction given for right hand side of edge ${lhsId}--${rhsId}. Expected (L,R,T,B) got ${rhsDir}`
-    );
+  addJunction({ id, in: parent }) {
+    this.registeredIds[id] = "node";
+    this.nodes[id] = {
+      id,
+      type: "junction",
+      edges: [],
+      in: parent
+    };
   }
-  if (state.records.nodes[lhsId] === void 0 && state.records.groups[lhsId] === void 0) {
-    throw new Error(
-      `The left-hand id [${lhsId}] does not yet exist. Please create the service/group before declaring an edge to it.`
-    );
+  getJunctions() {
+    return Object.values(this.nodes).filter(isArchitectureJunction);
   }
-  if (state.records.nodes[rhsId] === void 0 && state.records.groups[lhsId] === void 0) {
-    throw new Error(
-      `The right-hand id [${rhsId}] does not yet exist. Please create the service/group before declaring an edge to it.`
-    );
+  getNodes() {
+    return Object.values(this.nodes);
   }
-  const lhsGroupId = state.records.nodes[lhsId].in;
-  const rhsGroupId = state.records.nodes[rhsId].in;
-  if (lhsGroup && lhsGroupId && rhsGroupId && lhsGroupId == rhsGroupId) {
-    throw new Error(
-      `The left-hand id [${lhsId}] is modified to traverse the group boundary, but the edge does not pass through two groups.`
-    );
+  getNode(id) {
+    return this.nodes[id] ?? null;
   }
-  if (rhsGroup && lhsGroupId && rhsGroupId && lhsGroupId == rhsGroupId) {
-    throw new Error(
-      `The right-hand id [${rhsId}] is modified to traverse the group boundary, but the edge does not pass through two groups.`
-    );
+  addGroup({ id, icon, in: parent, title }) {
+    if (this.registeredIds?.[id] !== void 0) {
+      throw new Error(
+        `The group id [${id}] is already in use by another ${this.registeredIds[id]}`
+      );
+    }
+    if (parent !== void 0) {
+      if (id === parent) {
+        throw new Error(`The group [${id}] cannot be placed within itself`);
+      }
+      if (this.registeredIds?.[parent] === void 0) {
+        throw new Error(
+          `The group [${id}]'s parent does not exist. Please make sure the parent is created before this group`
+        );
+      }
+      if (this.registeredIds?.[parent] === "node") {
+        throw new Error(`The group [${id}]'s parent is not a group`);
+      }
+    }
+    this.registeredIds[id] = "group";
+    this.groups[id] = {
+      id,
+      icon,
+      title,
+      in: parent
+    };
+  }
+  getGroups() {
+    return Object.values(this.groups);
   }
-  const edge = {
+  addEdge({
     lhsId,
-    lhsDir,
-    lhsInto,
-    lhsGroup,
     rhsId,
+    lhsDir,
     rhsDir,
+    lhsInto,
     rhsInto,
+    lhsGroup,
     rhsGroup,
     title
-  };
-  state.records.edges.push(edge);
-  if (state.records.nodes[lhsId] && state.records.nodes[rhsId]) {
-    state.records.nodes[lhsId].edges.push(state.records.edges[state.records.edges.length - 1]);
-    state.records.nodes[rhsId].edges.push(state.records.edges[state.records.edges.length - 1]);
+  }) {
+    if (!isArchitectureDirection(lhsDir)) {
+      throw new Error(
+        `Invalid direction given for left hand side of edge ${lhsId}--${rhsId}. Expected (L,R,T,B) got ${String(lhsDir)}`
+      );
+    }
+    if (!isArchitectureDirection(rhsDir)) {
+      throw new Error(
+        `Invalid direction given for right hand side of edge ${lhsId}--${rhsId}. Expected (L,R,T,B) got ${String(rhsDir)}`
+      );
+    }
+    if (this.nodes[lhsId] === void 0 && this.groups[lhsId] === void 0) {
+      throw new Error(
+        `The left-hand id [${lhsId}] does not yet exist. Please create the service/group before declaring an edge to it.`
+      );
+    }
+    if (this.nodes[rhsId] === void 0 && this.groups[rhsId] === void 0) {
+      throw new Error(
+        `The right-hand id [${rhsId}] does not yet exist. Please create the service/group before declaring an edge to it.`
+      );
+    }
+    const lhsGroupId = this.nodes[lhsId].in;
+    const rhsGroupId = this.nodes[rhsId].in;
+    if (lhsGroup && lhsGroupId && rhsGroupId && lhsGroupId == rhsGroupId) {
+      throw new Error(
+        `The left-hand id [${lhsId}] is modified to traverse the group boundary, but the edge does not pass through two groups.`
+      );
+    }
+    if (rhsGroup && lhsGroupId && rhsGroupId && lhsGroupId == rhsGroupId) {
+      throw new Error(
+        `The right-hand id [${rhsId}] is modified to traverse the group boundary, but the edge does not pass through two groups.`
+      );
+    }
+    const edge = {
+      lhsId,
+      lhsDir,
+      lhsInto,
+      lhsGroup,
+      rhsId,
+      rhsDir,
+      rhsInto,
+      rhsGroup,
+      title
+    };
+    this.edges.push(edge);
+    if (this.nodes[lhsId] && this.nodes[rhsId]) {
+      this.nodes[lhsId].edges.push(this.edges[this.edges.length - 1]);
+      this.nodes[rhsId].edges.push(this.edges[this.edges.length - 1]);
+    }
   }
-}, "addEdge");
-var getEdges = /* @__PURE__ */ __name(() => state.records.edges, "getEdges");
-var getDataStructures = /* @__PURE__ */ __name(() => {
-  if (state.records.dataStructures === void 0) {
-    const groupAlignments = {};
-    const adjList = Object.entries(state.records.nodes).reduce((prevOuter, [id, service]) => {
-      prevOuter[id] = service.edges.reduce((prevInner, edge) => {
-        const lhsGroupId = getNode(edge.lhsId)?.in;
-        const rhsGroupId = getNode(edge.rhsId)?.in;
-        if (lhsGroupId && rhsGroupId && lhsGroupId !== rhsGroupId) {
-          const alignment = getArchitectureDirectionAlignment(edge.lhsDir, edge.rhsDir);
-          if (alignment !== "bend") {
-            groupAlignments[lhsGroupId] ??= {};
-            groupAlignments[lhsGroupId][rhsGroupId] = alignment;
-            groupAlignments[rhsGroupId] ??= {};
-            groupAlignments[rhsGroupId][lhsGroupId] = alignment;
-          }
-        }
-        if (edge.lhsId === id) {
-          const pair = getArchitectureDirectionPair(edge.lhsDir, edge.rhsDir);
-          if (pair) {
-            prevInner[pair] = edge.rhsId;
+  getEdges() {
+    return this.edges;
+  }
+  /**
+   * Returns the current diagram's adjacency list, spatial map, & group alignments.
+   * If they have not been created, run the algorithms to generate them.
+   * @returns
+   */
+  getDataStructures() {
+    if (this.dataStructures === void 0) {
+      const groupAlignments = {};
+      const adjList = Object.entries(this.nodes).reduce((prevOuter, [id, service]) => {
+        prevOuter[id] = service.edges.reduce((prevInner, edge) => {
+          const lhsGroupId = this.getNode(edge.lhsId)?.in;
+          const rhsGroupId = this.getNode(edge.rhsId)?.in;
+          if (lhsGroupId && rhsGroupId && lhsGroupId !== rhsGroupId) {
+            const alignment = getArchitectureDirectionAlignment(edge.lhsDir, edge.rhsDir);
+            if (alignment !== "bend") {
+              groupAlignments[lhsGroupId] ??= {};
+              groupAlignments[lhsGroupId][rhsGroupId] = alignment;
+              groupAlignments[rhsGroupId] ??= {};
+              groupAlignments[rhsGroupId][lhsGroupId] = alignment;
+            }
           }
-        } else {
-          const pair = getArchitectureDirectionPair(edge.rhsDir, edge.lhsDir);
-          if (pair) {
-            prevInner[pair] = edge.lhsId;
+          if (edge.lhsId === id) {
+            const pair = getArchitectureDirectionPair(edge.lhsDir, edge.rhsDir);
+            if (pair) {
+              prevInner[pair] = edge.rhsId;
+            }
+          } else {
+            const pair = getArchitectureDirectionPair(edge.rhsDir, edge.lhsDir);
+            if (pair) {
+              prevInner[pair] = edge.lhsId;
+            }
           }
-        }
-        return prevInner;
+          return prevInner;
+        }, {});
+        return prevOuter;
       }, {});
-      return prevOuter;
-    }, {});
-    const firstId = Object.keys(adjList)[0];
-    const visited = { [firstId]: 1 };
-    const notVisited = Object.keys(adjList).reduce(
-      (prev, id) => id === firstId ? prev : { ...prev, [id]: 1 },
-      {}
-    );
-    const BFS = /* @__PURE__ */ __name((startingId) => {
-      const spatialMap = { [startingId]: [0, 0] };
-      const queue = [startingId];
-      while (queue.length > 0) {
-        const id = queue.shift();
-        if (id) {
-          visited[id] = 1;
-          delete notVisited[id];
-          const adj = adjList[id];
-          const [posX, posY] = spatialMap[id];
-          Object.entries(adj).forEach(([dir, rhsId]) => {
-            if (!visited[rhsId]) {
-              spatialMap[rhsId] = shiftPositionByArchitectureDirectionPair(
-                [posX, posY],
-                dir
-              );
-              queue.push(rhsId);
-            }
-          });
+      const firstId = Object.keys(adjList)[0];
+      const visited = { [firstId]: 1 };
+      const notVisited = Object.keys(adjList).reduce(
+        (prev, id) => id === firstId ? prev : { ...prev, [id]: 1 },
+        {}
+      );
+      const BFS = /* @__PURE__ */ __name((startingId) => {
+        const spatialMap = { [startingId]: [0, 0] };
+        const queue = [startingId];
+        while (queue.length > 0) {
+          const id = queue.shift();
+          if (id) {
+            visited[id] = 1;
+            delete notVisited[id];
+            const adj = adjList[id];
+            const [posX, posY] = spatialMap[id];
+            Object.entries(adj).forEach(([dir, rhsId]) => {
+              if (!visited[rhsId]) {
+                spatialMap[rhsId] = shiftPositionByArchitectureDirectionPair(
+                  [posX, posY],
+                  dir
+                );
+                queue.push(rhsId);
+              }
+            });
+          }
         }
+        return spatialMap;
+      }, "BFS");
+      const spatialMaps = [BFS(firstId)];
+      while (Object.keys(notVisited).length > 0) {
+        spatialMaps.push(BFS(Object.keys(notVisited)[0]));
       }
-      return spatialMap;
-    }, "BFS");
-    const spatialMaps = [BFS(firstId)];
-    while (Object.keys(notVisited).length > 0) {
-      spatialMaps.push(BFS(Object.keys(notVisited)[0]));
+      this.dataStructures = {
+        adjList,
+        spatialMaps,
+        groupAlignments
+      };
     }
-    state.records.dataStructures = {
-      adjList,
-      spatialMaps,
-      groupAlignments
-    };
+    return this.dataStructures;
+  }
+  setElementForId(id, element) {
+    this.elements[id] = element;
+  }
+  getElementById(id) {
+    return this.elements[id];
+  }
+  getConfig() {
+    return cleanAndMerge({
+      ...DEFAULT_ARCHITECTURE_CONFIG,
+      ...getConfig().architecture
+    });
+  }
+  getConfigField(field) {
+    return this.getConfig()[field];
   }
-  return state.records.dataStructures;
-}, "getDataStructures");
-var setElementForId = /* @__PURE__ */ __name((id, element) => {
-  state.records.elements[id] = element;
-}, "setElementForId");
-var getElementById = /* @__PURE__ */ __name((id) => state.records.elements[id], "getElementById");
-var getConfig3 = /* @__PURE__ */ __name(() => {
-  const config = cleanAndMerge({
-    ...DEFAULT_ARCHITECTURE_CONFIG,
-    ...getConfig().architecture
-  });
-  return config;
-}, "getConfig");
-var db = {
-  clear: clear2,
-  setDiagramTitle,
-  getDiagramTitle,
-  setAccTitle,
-  getAccTitle,
-  setAccDescription,
-  getAccDescription,
-  getConfig: getConfig3,
-  addService,
-  getServices,
-  addJunction,
-  getJunctions,
-  getNodes,
-  getNode,
-  addGroup,
-  getGroups,
-  addEdge,
-  getEdges,
-  setElementForId,
-  getElementById,
-  getDataStructures
 };
-function getConfigField(field) {
-  return getConfig3()[field];
-}
-__name(getConfigField, "getConfigField");
 
 // src/diagrams/architecture/architectureParser.ts
-var populateDb = /* @__PURE__ */ __name((ast, db2) => {
-  populateCommonDb(ast, db2);
-  ast.groups.map(db2.addGroup);
-  ast.services.map((service) => db2.addService({ ...service, type: "service" }));
-  ast.junctions.map((service) => db2.addJunction({ ...service, type: "junction" }));
-  ast.edges.map(db2.addEdge);
+var populateDb = /* @__PURE__ */ __name((ast, db) => {
+  populateCommonDb(ast, db);
+  ast.groups.map((group) => db.addGroup(group));
+  ast.services.map((service) => db.addService({ ...service, type: "service" }));
+  ast.junctions.map((service) => db.addJunction({ ...service, type: "junction" }));
+  ast.edges.map((edge) => db.addEdge(edge));
 }, "populateDb");
 var parser = {
+  parser: {
+    // @ts-expect-error - ArchitectureDB is not assignable to DiagramDB
+    yy: void 0
+  },
   parse: /* @__PURE__ */ __name(async (input) => {
     const ast = await parse("architecture", input);
     log.debug(ast);
+    const db = parser.parser?.yy;
+    if (!(db instanceof ArchitectureDB)) {
+      throw new Error(
+        "parser.parser?.yy was not a ArchitectureDB. This is due to a bug within Mermaid, please report this issue at https://github.com/mermaid-js/mermaid/issues."
+      );
+    }
     populateDb(ast, db);
   }, "parse")
 };
@@ -478,9 +495,9 @@ var architectureIcons = {
 };
 
 // src/diagrams/architecture/svgDraw.ts
-var drawEdges = /* @__PURE__ */ __name(async function(edgesEl, cy) {
-  const padding = getConfigField("padding");
-  const iconSize = getConfigField("iconSize");
+var drawEdges = /* @__PURE__ */ __name(async function(edgesEl, cy, db) {
+  const padding = db.getConfigField("padding");
+  const iconSize = db.getConfigField("iconSize");
   const halfIconSize = iconSize / 2;
   const arrowSize = iconSize / 6;
   const halfArrowSize = arrowSize / 2;
@@ -531,7 +548,7 @@ var drawEdges = /* @__PURE__ */ __name(async function(edgesEl, cy) {
       }
       if (edge[0]._private.rscratch) {
         const g = edgesEl.insert("g");
-        g.insert("path").attr("d", `M ${startX},${startY} L ${midX},${midY} L${endX},${endY} `).attr("class", "edge");
+        g.insert("path").attr("d", `M ${startX},${startY} L ${midX},${midY} L${endX},${endY} `).attr("class", "edge").attr("id", getEdgeId(source, target, { prefix: "L" }));
         if (sourceArrow) {
           const xShift = isArchitectureDirectionX(sourceDir) ? ArchitectureDirectionArrowShift[sourceDir](startX, arrowSize) : startX - halfArrowSize;
           const yShift = isArchitectureDirectionY(sourceDir) ? ArchitectureDirectionArrowShift[sourceDir](startY, arrowSize) : startY - halfArrowSize;
@@ -590,18 +607,19 @@ var drawEdges = /* @__PURE__ */ __name(async function(edgesEl, cy) {
     })
   );
 }, "drawEdges");
-var drawGroups = /* @__PURE__ */ __name(async function(groupsEl, cy) {
-  const padding = getConfigField("padding");
+var drawGroups = /* @__PURE__ */ __name(async function(groupsEl, cy, db) {
+  const padding = db.getConfigField("padding");
   const groupIconSize = padding * 0.75;
-  const fontSize = getConfigField("fontSize");
-  const iconSize = getConfigField("iconSize");
+  const fontSize = db.getConfigField("fontSize");
+  const iconSize = db.getConfigField("iconSize");
   const halfIconSize = iconSize / 2;
   await Promise.all(
     cy.nodes().map(async (node) => {
       const data = nodeData(node);
       if (data.type === "group") {
         const { h, w, x1, y1 } = node.boundingBox();
-        groupsEl.append("rect").attr("x", x1 + halfIconSize).attr("y", y1 + halfIconSize).attr("width", w).attr("height", h).attr("class", "node-bkg");
+        const groupsNode = groupsEl.append("rect");
+        groupsNode.attr("id", `group-${data.id}`).attr("x", x1 + halfIconSize).attr("y", y1 + halfIconSize).attr("width", w).attr("height", h).attr("class", "node-bkg");
         const groupLabelContainer = groupsEl.append("g");
         let shiftedX1 = x1;
         let shiftedY1 = y1;
@@ -635,14 +653,16 @@ var drawGroups = /* @__PURE__ */ __name(async function(groupsEl, cy) {
             "translate(" + (shiftedX1 + halfIconSize + 4) + ", " + (shiftedY1 + halfIconSize + 2) + ")"
           );
         }
+        db.setElementForId(data.id, groupsNode);
       }
     })
   );
 }, "drawGroups");
-var drawServices = /* @__PURE__ */ __name(async function(db2, elem, services) {
+var drawServices = /* @__PURE__ */ __name(async function(db, elem, services) {
+  const config = getConfig2();
   for (const service of services) {
     const serviceElem = elem.append("g");
-    const iconSize = getConfigField("iconSize");
+    const iconSize = db.getConfigField("iconSize");
     if (service.title) {
       const textElem = serviceElem.append("g");
       await createText(
@@ -653,7 +673,7 @@ var drawServices = /* @__PURE__ */ __name(async function(db2, elem, services) {
           width: iconSize * 1.5,
           classes: "architecture-service-label"
         },
-        getConfig2()
+        config
       );
       textElem.attr("dy", "1em").attr("alignment-baseline", "middle").attr("dominant-baseline", "middle").attr("text-anchor", "middle");
       textElem.attr("transform", "translate(" + iconSize / 2 + ", " + iconSize + ")");
@@ -669,7 +689,7 @@ var drawServices = /* @__PURE__ */ __name(async function(db2, elem, services) {
       );
       const textElemContainer = bkgElem.append("g");
       const fo = textElemContainer.append("foreignObject").attr("width", iconSize).attr("height", iconSize);
-      const divElem = fo.append("div").attr("class", "node-icon-text").attr("style", `height: ${iconSize}px;`).append("div").html(service.iconText);
+      const divElem = fo.append("div").attr("class", "node-icon-text").attr("style", `height: ${iconSize}px;`).append("div").html(sanitizeText(service.iconText, config));
       const fontSize = parseInt(
         window.getComputedStyle(divElem.node(), null).getPropertyValue("font-size").replace(/\D/g, "")
       ) ?? 16;
@@ -680,25 +700,25 @@ var drawServices = /* @__PURE__ */ __name(async function(db2, elem, services) {
         `M0 ${iconSize} v${-iconSize} q0,-5 5,-5 h${iconSize} q5,0 5,5 v${iconSize} H0 Z`
       );
     }
-    serviceElem.attr("class", "architecture-service");
-    const { width, height } = serviceElem._groups[0][0].getBBox();
+    serviceElem.attr("id", `service-${service.id}`).attr("class", "architecture-service");
+    const { width, height } = serviceElem.node().getBBox();
     service.width = width;
     service.height = height;
-    db2.setElementForId(service.id, serviceElem);
+    db.setElementForId(service.id, serviceElem);
   }
   return 0;
 }, "drawServices");
-var drawJunctions = /* @__PURE__ */ __name(function(db2, elem, junctions) {
+var drawJunctions = /* @__PURE__ */ __name(function(db, elem, junctions) {
   junctions.forEach((junction) => {
     const junctionElem = elem.append("g");
-    const iconSize = getConfigField("iconSize");
+    const iconSize = db.getConfigField("iconSize");
     const bkgElem = junctionElem.append("g");
     bkgElem.append("rect").attr("id", "node-" + junction.id).attr("fill-opacity", "0").attr("width", iconSize).attr("height", iconSize);
     junctionElem.attr("class", "architecture-junction");
     const { width, height } = junctionElem._groups[0][0].getBBox();
     junctionElem.width = width;
     junctionElem.height = height;
-    db2.setElementForId(junction.id, junctionElem);
+    db.setElementForId(junction.id, junctionElem);
   });
 }, "drawJunctions");
 
@@ -710,7 +730,7 @@ registerIconPacks([
   }
 ]);
 cytoscape.use(fcose);
-function addServices(services, cy) {
+function addServices(services, cy, db) {
   services.forEach((service) => {
     cy.add({
       group: "nodes",
@@ -720,15 +740,15 @@ function addServices(services, cy) {
         icon: service.icon,
         label: service.title,
         parent: service.in,
-        width: getConfigField("iconSize"),
-        height: getConfigField("iconSize")
+        width: db.getConfigField("iconSize"),
+        height: db.getConfigField("iconSize")
       },
       classes: "node-service"
     });
   });
 }
 __name(addServices, "addServices");
-function addJunctions(junctions, cy) {
+function addJunctions(junctions, cy, db) {
   junctions.forEach((junction) => {
     cy.add({
       group: "nodes",
@@ -736,15 +756,15 @@ function addJunctions(junctions, cy) {
         type: "junction",
         id: junction.id,
         parent: junction.in,
-        width: getConfigField("iconSize"),
-        height: getConfigField("iconSize")
+        width: db.getConfigField("iconSize"),
+        height: db.getConfigField("iconSize")
       },
       classes: "node-junction"
     });
   });
 }
 __name(addJunctions, "addJunctions");
-function positionNodes(db2, cy) {
+function positionNodes(db, cy) {
   cy.nodes().map((node) => {
     const data = nodeData(node);
     if (data.type === "group") {
@@ -752,7 +772,7 @@ function positionNodes(db2, cy) {
     }
     data.x = node.position().x;
     data.y = node.position().y;
-    const nodeElem = db2.getElementById(data.id);
+    const nodeElem = db.getElementById(data.id);
     nodeElem.attr("transform", "translate(" + (data.x || 0) + "," + (data.y || 0) + ")");
   });
 }
@@ -799,7 +819,7 @@ function addEdges(edges, cy) {
   });
 }
 __name(addEdges, "addEdges");
-function getAlignments(db2, spatialMaps, groupAlignments) {
+function getAlignments(db, spatialMaps, groupAlignments) {
   const flattenAlignments = /* @__PURE__ */ __name((alignmentObj, alignmentDir) => {
     return Object.entries(alignmentObj).reduce(
       (prev, [dir, alignments2]) => {
@@ -837,7 +857,7 @@ function getAlignments(db2, spatialMaps, groupAlignments) {
     const horizontalAlignments = {};
     const verticalAlignments = {};
     Object.entries(spatialMap).forEach(([id, [x, y]]) => {
-      const nodeGroup = db2.getNode(id)?.in ?? "default";
+      const nodeGroup = db.getNode(id)?.in ?? "default";
       horizontalAlignments[y] ??= {};
       horizontalAlignments[y][nodeGroup] ??= [];
       horizontalAlignments[y][nodeGroup].push(id);
@@ -869,7 +889,7 @@ function getAlignments(db2, spatialMaps, groupAlignments) {
   };
 }
 __name(getAlignments, "getAlignments");
-function getRelativeConstraints(spatialMaps) {
+function getRelativeConstraints(spatialMaps, db) {
   const relativeConstraints = [];
   const posToStr = /* @__PURE__ */ __name((pos) => `${pos[0]},${pos[1]}`, "posToStr");
   const strToPos = /* @__PURE__ */ __name((pos) => pos.split(",").map((p) => parseInt(p)), "strToPos");
@@ -900,7 +920,7 @@ function getRelativeConstraints(spatialMaps) {
               relativeConstraints.push({
                 [ArchitectureDirectionName[dir]]: newId,
                 [ArchitectureDirectionName[getOppositeArchitectureDirection(dir)]]: currId,
-                gap: 1.5 * getConfigField("iconSize")
+                gap: 1.5 * db.getConfigField("iconSize")
               });
             }
           });
@@ -911,7 +931,7 @@ function getRelativeConstraints(spatialMaps) {
   return relativeConstraints;
 }
 __name(getRelativeConstraints, "getRelativeConstraints");
-function layoutArchitecture(services, junctions, groups, edges, db2, { spatialMaps, groupAlignments }) {
+function layoutArchitecture(services, junctions, groups, edges, db, { spatialMaps, groupAlignments }) {
   return new Promise((resolve) => {
     const renderEl = select("body").append("div").attr("id", "cy").attr("style", "display:none");
     const cy = cytoscape({
@@ -950,7 +970,7 @@ function layoutArchitecture(services, junctions, groups, edges, db2, { spatialMa
           style: {
             "text-valign": "bottom",
             "text-halign": "center",
-            "font-size": `${getConfigField("fontSize")}px`
+            "font-size": `${db.getConfigField("fontSize")}px`
           }
         },
         {
@@ -972,7 +992,7 @@ function layoutArchitecture(services, junctions, groups, edges, db2, { spatialMa
           selector: ".node-group",
           style: {
             // @ts-ignore Incorrect library types
-            padding: `${getConfigField("padding")}px`
+            padding: `${db.getConfigField("padding")}px`
           }
         }
       ],
@@ -988,11 +1008,11 @@ function layoutArchitecture(services, junctions, groups, edges, db2, { spatialMa
     });
     renderEl.remove();
     addGroups(groups, cy);
-    addServices(services, cy);
-    addJunctions(junctions, cy);
+    addServices(services, cy, db);
+    addJunctions(junctions, cy, db);
     addEdges(edges, cy);
-    const alignmentConstraint = getAlignments(db2, spatialMaps, groupAlignments);
-    const relativePlacementConstraint = getRelativeConstraints(spatialMaps);
+    const alignmentConstraint = getAlignments(db, spatialMaps, groupAlignments);
+    const relativePlacementConstraint = getRelativeConstraints(spatialMaps, db);
     const layout = cy.layout({
       name: "fcose",
       quality: "proof",
@@ -1005,7 +1025,7 @@ function layoutArchitecture(services, junctions, groups, edges, db2, { spatialMa
         const [nodeA, nodeB] = edge.connectedNodes();
         const { parent: parentA } = nodeData(nodeA);
         const { parent: parentB } = nodeData(nodeB);
-        const elasticity = parentA === parentB ? 1.5 * getConfigField("iconSize") : 0.5 * getConfigField("iconSize");
+        const elasticity = parentA === parentB ? 1.5 * db.getConfigField("iconSize") : 0.5 * db.getConfigField("iconSize");
         return elasticity;
       },
       edgeElasticity(edge) {
@@ -1081,12 +1101,12 @@ function layoutArchitecture(services, junctions, groups, edges, db2, { spatialMa
 }
 __name(layoutArchitecture, "layoutArchitecture");
 var draw = /* @__PURE__ */ __name(async (text, id, _version, diagObj) => {
-  const db2 = diagObj.db;
-  const services = db2.getServices();
-  const junctions = db2.getJunctions();
-  const groups = db2.getGroups();
-  const edges = db2.getEdges();
-  const ds = db2.getDataStructures();
+  const db = diagObj.db;
+  const services = db.getServices();
+  const junctions = db.getJunctions();
+  const groups = db.getGroups();
+  const edges = db.getEdges();
+  const ds = db.getDataStructures();
   const svg = selectSvgElement(id);
   const edgesElem = svg.append("g");
   edgesElem.attr("class", "architecture-edges");
@@ -1094,20 +1114,22 @@ var draw = /* @__PURE__ */ __name(async (text, id, _version, diagObj) => {
   servicesElem.attr("class", "architecture-services");
   const groupElem = svg.append("g");
   groupElem.attr("class", "architecture-groups");
-  await drawServices(db2, servicesElem, services);
-  drawJunctions(db2, servicesElem, junctions);
-  const cy = await layoutArchitecture(services, junctions, groups, edges, db2, ds);
-  await drawEdges(edgesElem, cy);
-  await drawGroups(groupElem, cy);
-  positionNodes(db2, cy);
-  setupGraphViewbox(void 0, svg, getConfigField("padding"), getConfigField("useMaxWidth"));
+  await drawServices(db, servicesElem, services);
+  drawJunctions(db, servicesElem, junctions);
+  const cy = await layoutArchitecture(services, junctions, groups, edges, db, ds);
+  await drawEdges(edgesElem, cy, db);
+  await drawGroups(groupElem, cy, db);
+  positionNodes(db, cy);
+  setupGraphViewbox(void 0, svg, db.getConfigField("padding"), db.getConfigField("useMaxWidth"));
 }, "draw");
 var renderer = { draw };
 
 // src/diagrams/architecture/architectureDiagram.ts
 var diagram = {
   parser,
-  db,
+  get db() {
+    return new ArchitectureDB();
+  },
   renderer,
   styles: architectureStyles_default
 };