@diagrammo/dgmo 0.46.0 → 0.47.0

package/dist/chunk-QEBUY5NY.js

@@ -0,0 +1,1685 @@
+import {
+  LEGEND_CAPSULE_PAD,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_DOT_GAP,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_ENTRY_TRAIL,
+  LEGEND_HEIGHT,
+  LEGEND_PILL_FONT_SIZE,
+  LEGEND_PILL_PAD,
+  measureLegendText
+} from "./chunk-QOOUC2J5.js";
+import {
+  measureText,
+  wrapTextToWidth
+} from "./chunk-WCT3NYCV.js";
+import {
+  tagAttrKey
+} from "./chunk-QLCCJEJI.js";
+
+// src/c4/layout.ts
+import dagre from "@dagrejs/dagre";
+var gNode = (g, name) => g.node(name);
+var gEdge = (g, v, w) => g.edge(v, w);
+var MIN_NODE_WIDTH = 160;
+var MAX_NODE_WIDTH = 260;
+var TYPE_LABEL_HEIGHT = 18;
+var DIVIDER_GAP = 6;
+var NAME_HEIGHT = 20;
+var NAME_FONT_SIZE = 14;
+var DESC_LINE_HEIGHT = 16;
+var DESC_FONT_SIZE = 11;
+var CARD_V_PAD = 14;
+var CARD_H_PAD = 20;
+var META_LINE_HEIGHT = 16;
+var META_FONT_SIZE = 11;
+var MARGIN = 40;
+var BOUNDARY_PAD = 40;
+var GROUP_BOUNDARY_PAD = 24;
+var EDGE_NODE_COLLISION_WEIGHT = 5e3;
+function computeEdgePenalty(edgeList, nodePositions, degrees, nodeGeometry) {
+  let penalty = 0;
+  for (const edge of edgeList) {
+    const sx = nodePositions.get(edge.source);
+    const tx = nodePositions.get(edge.target);
+    if (sx == null || tx == null) continue;
+    const dist = Math.abs(sx - tx);
+    const weight = Math.min(
+      degrees.get(edge.source) ?? 1,
+      degrees.get(edge.target) ?? 1
+    );
+    penalty += dist * weight;
+  }
+  if (nodeGeometry) {
+    for (const edge of edgeList) {
+      const geomA = nodeGeometry.get(edge.source);
+      const geomB = nodeGeometry.get(edge.target);
+      if (!geomA || !geomB) continue;
+      const ax = nodePositions.get(edge.source) ?? 0;
+      const bx = nodePositions.get(edge.target) ?? 0;
+      const ay = geomA.y;
+      const by = geomB.y;
+      if (ay === by) continue;
+      const edgeMinX = Math.min(ax, bx);
+      const edgeMaxX = Math.max(ax, bx);
+      const edgeMinY = Math.min(ay, by);
+      const edgeMaxY = Math.max(ay, by);
+      for (const [name, geomC] of nodeGeometry) {
+        if (name === edge.source || name === edge.target) continue;
+        const cx = nodePositions.get(name) ?? 0;
+        const cy = geomC.y;
+        const hw = geomC.width / 2;
+        const hh = geomC.height / 2;
+        if (cx + hw > edgeMinX && cx - hw < edgeMaxX && cy + hh > edgeMinY && cy - hh < edgeMaxY) {
+          penalty += EDGE_NODE_COLLISION_WEIGHT;
+        }
+      }
+    }
+  }
+  return penalty;
+}
+function reduceCrossings(g, edgeList, nodeGroupMap) {
+  if (edgeList.length < 2) return;
+  const degrees = /* @__PURE__ */ new Map();
+  for (const edge of edgeList) {
+    degrees.set(edge.source, (degrees.get(edge.source) ?? 0) + 1);
+    degrees.set(edge.target, (degrees.get(edge.target) ?? 0) + 1);
+  }
+  const nodeGeometry = /* @__PURE__ */ new Map();
+  for (const name of g.nodes()) {
+    const pos = gNode(g, name);
+    if (pos)
+      nodeGeometry.set(name, {
+        y: pos.y,
+        width: pos.width,
+        height: pos.height
+      });
+  }
+  const rankMap = /* @__PURE__ */ new Map();
+  for (const name of g.nodes()) {
+    const pos = gNode(g, name);
+    if (!pos) continue;
+    const rankY = Math.round(pos.y);
+    if (!rankMap.has(rankY)) rankMap.set(rankY, []);
+    rankMap.get(rankY).push(name);
+  }
+  for (const [, rankNodes] of rankMap) {
+    rankNodes.sort((a, b) => gNode(g, a).x - gNode(g, b).x);
+  }
+  let anyMoved = false;
+  for (const [, rankNodes] of rankMap) {
+    if (rankNodes.length < 2) continue;
+    const partitions = [];
+    if (nodeGroupMap && nodeGroupMap.size > 0) {
+      const groupBuckets = /* @__PURE__ */ new Map();
+      const ungrouped = [];
+      for (const name of rankNodes) {
+        const grp = nodeGroupMap.get(name);
+        if (grp) {
+          if (!groupBuckets.has(grp)) groupBuckets.set(grp, []);
+          groupBuckets.get(grp).push(name);
+        } else {
+          ungrouped.push(name);
+        }
+      }
+      for (const bucket of groupBuckets.values()) {
+        if (bucket.length >= 2) partitions.push(bucket);
+      }
+      if (ungrouped.length >= 2) partitions.push(ungrouped);
+    } else {
+      partitions.push(rankNodes);
+    }
+    for (const partition of partitions) {
+      if (partition.length < 2) continue;
+      const xSlots = partition.map((name) => gNode(g, name).x).sort((a, b) => a - b);
+      const basePositions = /* @__PURE__ */ new Map();
+      for (const name of g.nodes()) {
+        const pos = gNode(g, name);
+        if (pos) basePositions.set(name, pos.x);
+      }
+      const currentPenalty = computeEdgePenalty(
+        edgeList,
+        basePositions,
+        degrees,
+        nodeGeometry
+      );
+      let bestPerm = [...partition];
+      let bestPenalty = currentPenalty;
+      if (partition.length <= 8) {
+        const perms = permutations(partition);
+        for (const perm of perms) {
+          const testPositions = new Map(basePositions);
+          for (let i = 0; i < perm.length; i++) {
+            testPositions.set(perm[i], xSlots[i]);
+          }
+          const penalty = computeEdgePenalty(
+            edgeList,
+            testPositions,
+            degrees,
+            nodeGeometry
+          );
+          if (penalty < bestPenalty) {
+            bestPenalty = penalty;
+            bestPerm = [...perm];
+          }
+        }
+      } else {
+        const workingOrder = [...partition];
+        let improved = true;
+        let passes = 0;
+        while (improved && passes < 10) {
+          improved = false;
+          passes++;
+          for (let i = 0; i < workingOrder.length - 1; i++) {
+            const testPositions = new Map(basePositions);
+            for (let k = 0; k < workingOrder.length; k++) {
+              testPositions.set(workingOrder[k], xSlots[k]);
+            }
+            const before = computeEdgePenalty(
+              edgeList,
+              testPositions,
+              degrees,
+              nodeGeometry
+            );
+            [workingOrder[i], workingOrder[i + 1]] = [
+              workingOrder[i + 1],
+              workingOrder[i]
+            ];
+            const testPositions2 = new Map(basePositions);
+            for (let k = 0; k < workingOrder.length; k++) {
+              testPositions2.set(workingOrder[k], xSlots[k]);
+            }
+            const after = computeEdgePenalty(
+              edgeList,
+              testPositions2,
+              degrees,
+              nodeGeometry
+            );
+            if (after < before) {
+              improved = true;
+              if (after < bestPenalty) {
+                bestPenalty = after;
+                bestPerm = [...workingOrder];
+              }
+            } else {
+              [workingOrder[i], workingOrder[i + 1]] = [
+                workingOrder[i + 1],
+                workingOrder[i]
+              ];
+            }
+          }
+        }
+      }
+      if (bestPerm.some((name, i) => name !== partition[i])) {
+        for (let i = 0; i < bestPerm.length; i++) {
+          gNode(g, bestPerm[i]).x = xSlots[i];
+          const rankIdx = rankNodes.indexOf(partition[i]);
+          if (rankIdx >= 0) rankNodes[rankIdx] = bestPerm[i];
+        }
+        anyMoved = true;
+      }
+    }
+  }
+  if (anyMoved) {
+    for (const edge of edgeList) {
+      const edgeData = gEdge(g, edge.source, edge.target);
+      if (!edgeData) continue;
+      const srcPos = gNode(g, edge.source);
+      const tgtPos = gNode(g, edge.target);
+      if (!srcPos || !tgtPos) continue;
+      const srcBottom = { x: srcPos.x, y: srcPos.y + srcPos.height / 2 };
+      const tgtTop = { x: tgtPos.x, y: tgtPos.y - tgtPos.height / 2 };
+      const midY = (srcBottom.y + tgtTop.y) / 2;
+      edgeData.points = [
+        srcBottom,
+        { x: srcBottom.x, y: midY },
+        { x: tgtTop.x, y: midY },
+        tgtTop
+      ];
+    }
+  }
+}
+function permutations(arr) {
+  const result = [];
+  const a = [...arr];
+  const n = a.length;
+  const c = new Array(n).fill(0);
+  result.push([...a]);
+  let i = 0;
+  while (i < n) {
+    if (c[i] < i) {
+      if (i % 2 === 0) {
+        [a[0], a[i]] = [a[i], a[0]];
+      } else {
+        [a[c[i]], a[i]] = [a[i], a[c[i]]];
+      }
+      result.push([...a]);
+      c[i]++;
+      i = 0;
+    } else {
+      c[i] = 0;
+      i++;
+    }
+  }
+  return result;
+}
+function buildOwnershipMap(elements) {
+  const map = /* @__PURE__ */ new Map();
+  function walk(el, ancestor) {
+    map.set(el.name, ancestor);
+    for (const child of el.children) {
+      walk(child, ancestor);
+    }
+    for (const group of el.groups) {
+      for (const child of group.children) {
+        walk(child, ancestor);
+      }
+    }
+  }
+  for (const el of elements) {
+    walk(el, el.name);
+  }
+  return map;
+}
+function collectAllRelationships(elements, _ownerMap) {
+  const result = [];
+  function walk(el) {
+    for (const rel of el.relationships) {
+      result.push({ sourceName: el.name, rel });
+    }
+    for (const child of el.children) {
+      walk(child);
+    }
+    for (const group of el.groups) {
+      for (const child of group.children) {
+        walk(child);
+      }
+    }
+  }
+  for (const el of elements) {
+    walk(el);
+  }
+  return result;
+}
+function rollUpContextRelationships(parsed) {
+  const ownerMap = buildOwnershipMap(parsed.elements);
+  const allRels = collectAllRelationships(parsed.elements, ownerMap);
+  const topLevelNames = new Set(parsed.elements.map((e) => e.name));
+  const explicitKeys = /* @__PURE__ */ new Set();
+  const explicit = [];
+  const nested = [];
+  for (const { sourceName, rel } of allRels) {
+    const sourceAncestor = ownerMap.get(sourceName) ?? sourceName;
+    const targetAncestor = ownerMap.get(rel.target) ?? rel.target;
+    if (sourceAncestor === targetAncestor) continue;
+    const entry = {
+      sourceName: sourceAncestor,
+      targetName: targetAncestor,
+      ...rel.label !== void 0 && { label: rel.label },
+      ...rel.technology !== void 0 && { technology: rel.technology },
+      arrowType: rel.arrowType,
+      lineNumber: rel.lineNumber
+    };
+    if (topLevelNames.has(sourceName) && sourceName === sourceAncestor) {
+      const key = `${sourceAncestor}\u2192${targetAncestor}`;
+      explicitKeys.add(key);
+      explicit.push(entry);
+    } else {
+      nested.push(entry);
+    }
+  }
+  const result = [...explicit];
+  const seenKeys = new Set(explicitKeys);
+  for (const rel of nested) {
+    const key = `${rel.sourceName}\u2192${rel.targetName}`;
+    if (!seenKeys.has(key)) {
+      seenKeys.add(key);
+      result.push(rel);
+    }
+  }
+  return result;
+}
+function resolveNodeColor(el, tagGroups, activeGroupName, ancestors) {
+  const colorMeta = el.metadata["color"];
+  if (colorMeta) return colorMeta;
+  if (!activeGroupName) return void 0;
+  const group = tagGroups.find(
+    (g) => g.name.toLowerCase() === activeGroupName.toLowerCase()
+  );
+  if (!group) return void 0;
+  const key = tagAttrKey(group.name);
+  let metaValue = el.metadata[key];
+  if (!metaValue && ancestors) {
+    for (const ancestor of ancestors) {
+      metaValue = ancestor.metadata[key];
+      if (metaValue) break;
+    }
+  }
+  const resolvedValue = metaValue ?? group.defaultValue;
+  if (!resolvedValue) return "#999999";
+  return group.entries.find(
+    (e) => e.value.toLowerCase() === resolvedValue.toLowerCase()
+  )?.color ?? "#999999";
+}
+var META_EXCLUDE_KEYS = /* @__PURE__ */ new Set([
+  "description",
+  "tech",
+  "technology",
+  "is a"
+]);
+function collectCardMetadata(metadata) {
+  const entries = [];
+  const tech = metadata["tech"] ?? metadata["technology"];
+  if (tech) entries.push({ key: "Technology", value: tech });
+  for (const [k, v] of Object.entries(metadata)) {
+    if (META_EXCLUDE_KEYS.has(k.toLowerCase())) continue;
+    const displayKey = k.charAt(0).toUpperCase() + k.slice(1);
+    entries.push({ key: displayKey, value: v });
+  }
+  return entries;
+}
+function computeC4NodeDimensions(el, options) {
+  const nameWidth = measureText(el.name, NAME_FONT_SIZE) + CARD_H_PAD * 2;
+  let width = Math.max(MIN_NODE_WIDTH, Math.min(MAX_NODE_WIDTH, nameWidth));
+  if (options?.showTechnology) {
+    let height2 = CARD_V_PAD + NAME_HEIGHT;
+    const desc2 = el.description?.join("\n");
+    if (desc2) {
+      const contentWidth = width - CARD_H_PAD * 2;
+      const lines = wrapTextToWidth(desc2, DESC_FONT_SIZE, contentWidth);
+      height2 += lines.length * DESC_LINE_HEIGHT;
+    }
+    const metaEntries = collectCardMetadata(el.metadata);
+    if (metaEntries.length > 0) {
+      height2 += DIVIDER_GAP;
+      height2 += metaEntries.length * META_LINE_HEIGHT;
+      const maxMetaWidth = Math.max(
+        ...metaEntries.map(
+          (e) => measureText(`${e.key}: ${e.value}`, META_FONT_SIZE) + CARD_H_PAD * 2
+        )
+      );
+      if (maxMetaWidth > width) width = Math.min(MAX_NODE_WIDTH, maxMetaWidth);
+    }
+    height2 += CARD_V_PAD;
+    return { width, height: height2 };
+  }
+  let height = CARD_V_PAD + TYPE_LABEL_HEIGHT + DIVIDER_GAP + NAME_HEIGHT;
+  const desc = el.description?.join("\n");
+  if (desc) {
+    const contentWidth = width - CARD_H_PAD * 2;
+    const lines = wrapTextToWidth(desc, DESC_FONT_SIZE, contentWidth);
+    height += lines.length * DESC_LINE_HEIGHT;
+  }
+  height += CARD_V_PAD;
+  return { width, height };
+}
+function computeLegendGroups(tagGroups) {
+  const result = [];
+  for (const group of tagGroups) {
+    const entries = [];
+    for (const entry of group.entries) {
+      entries.push({ value: entry.value, color: entry.color });
+    }
+    if (entries.length === 0) continue;
+    const nameW = measureLegendText(group.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD * 2;
+    let capsuleW = LEGEND_CAPSULE_PAD;
+    for (const e of entries) {
+      capsuleW += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(e.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
+    }
+    capsuleW += LEGEND_CAPSULE_PAD;
+    result.push({
+      name: group.name,
+      entries,
+      x: 0,
+      y: 0,
+      width: nameW + capsuleW,
+      height: LEGEND_HEIGHT
+    });
+  }
+  return result;
+}
+function computeAdaptiveSpacing(edges) {
+  const outDegree = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    if (edge.label || edge.technology) {
+      outDegree.set(edge.sourceName, (outDegree.get(edge.sourceName) ?? 0) + 1);
+    }
+  }
+  const maxFanOut = Math.max(0, ...outDegree.values());
+  const nodesep = Math.max(80, 60 + maxFanOut * 20);
+  const ranksep = Math.max(140, 100 + maxFanOut * 35);
+  const edgesep = Math.max(30, 20 + maxFanOut * 8);
+  return { nodesep, ranksep, edgesep };
+}
+function layoutC4Context(parsed, activeTagGroup) {
+  const contextElements = parsed.elements.filter(
+    (el) => el.type === "person" || el.type === "system"
+  );
+  if (contextElements.length === 0) {
+    return {
+      nodes: [],
+      edges: [],
+      legend: [],
+      groupBoundaries: [],
+      width: 0,
+      height: 0
+    };
+  }
+  const contextRels = rollUpContextRelationships(parsed);
+  const spacing = computeAdaptiveSpacing(contextRels);
+  const g = new dagre.graphlib.Graph();
+  g.setGraph({
+    rankdir: "TB",
+    nodesep: spacing.nodesep,
+    ranksep: spacing.ranksep,
+    edgesep: spacing.edgesep
+  });
+  g.setDefaultEdgeLabel(() => ({}));
+  const nameToElement = /* @__PURE__ */ new Map();
+  for (const el of contextElements) {
+    nameToElement.set(el.name, el);
+    const dims = computeC4NodeDimensions(el);
+    g.setNode(el.name, { width: dims.width, height: dims.height });
+  }
+  const validRels = [];
+  for (const rel of contextRels) {
+    if (nameToElement.has(rel.sourceName) && nameToElement.has(rel.targetName)) {
+      validRels.push(rel);
+      g.setEdge(rel.sourceName, rel.targetName, { label: rel.label ?? "" });
+    }
+  }
+  dagre.layout(g);
+  reduceCrossings(
+    g,
+    validRels.map((r) => ({ source: r.sourceName, target: r.targetName }))
+  );
+  const nodes = contextElements.map(
+    (el) => {
+      const pos = g.node(el.name);
+      const color = resolveNodeColor(
+        el,
+        parsed.tagGroups,
+        activeTagGroup ?? null
+      );
+      const hasContainers = el.children.some((c) => c.type === "container") || el.groups.some((g2) => g2.children.some((c) => c.type === "container"));
+      const description = el.description?.join("\n");
+      const drillable = hasContainers || el.importPath ? true : void 0;
+      return {
+        id: el.name,
+        name: el.name,
+        type: el.type,
+        ...description !== void 0 && { description },
+        metadata: el.metadata,
+        lineNumber: el.lineNumber,
+        ...color !== void 0 && { color },
+        ...drillable !== void 0 && { drillable },
+        ...el.importPath !== void 0 && { importPath: el.importPath },
+        x: pos.x,
+        y: pos.y,
+        width: pos.width,
+        height: pos.height
+      };
+    }
+  );
+  const edges = validRels.map(
+    (rel) => {
+      const edgeData = g.edge(rel.sourceName, rel.targetName);
+      return {
+        source: rel.sourceName,
+        target: rel.targetName,
+        arrowType: rel.arrowType,
+        ...rel.label !== void 0 && { label: rel.label },
+        ...rel.technology !== void 0 && { technology: rel.technology },
+        lineNumber: rel.lineNumber,
+        points: edgeData?.points ?? []
+      };
+    }
+  );
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const node of nodes) {
+    const left = node.x - node.width / 2;
+    const top = node.y - node.height / 2;
+    const right = node.x + node.width / 2;
+    const bottom = node.y + node.height / 2;
+    if (left < minX) minX = left;
+    if (top < minY) minY = top;
+    if (right > maxX) maxX = right;
+    if (bottom > maxY) maxY = bottom;
+  }
+  for (const edge of edges) {
+    for (const pt of edge.points) {
+      if (pt.x < minX) minX = pt.x;
+      if (pt.y < minY) minY = pt.y;
+      if (pt.x > maxX) maxX = pt.x;
+      if (pt.y > maxY) maxY = pt.y;
+    }
+  }
+  if (nodes.length > 0) {
+    const shiftX = MARGIN - minX;
+    const shiftY = MARGIN - minY;
+    for (const node of nodes) {
+      node.x += shiftX;
+      node.y += shiftY;
+    }
+    for (const edge of edges) {
+      for (const pt of edge.points) {
+        pt.x += shiftX;
+        pt.y += shiftY;
+      }
+    }
+  }
+  let totalWidth = nodes.length > 0 ? maxX - minX + MARGIN * 2 : 0;
+  let totalHeight = nodes.length > 0 ? maxY - minY + MARGIN * 2 : 0;
+  const legendGroups = computeLegendGroups(parsed.tagGroups);
+  if (legendGroups.length > 0) {
+    const legendY = totalHeight + MARGIN;
+    let legendX = MARGIN;
+    for (const lg of legendGroups) {
+      lg.x = legendX;
+      lg.y = legendY;
+      legendX += lg.width + 12;
+    }
+    const legendRight = legendX;
+    const legendBottom = legendY + LEGEND_HEIGHT;
+    if (legendRight > totalWidth) totalWidth = legendRight;
+    if (legendBottom > totalHeight) totalHeight = legendBottom;
+  }
+  return {
+    nodes,
+    edges,
+    legend: legendGroups,
+    groupBoundaries: [],
+    width: totalWidth,
+    height: totalHeight
+  };
+}
+function layoutC4Containers(parsed, systemName, activeTagGroup) {
+  const system = parsed.elements.find(
+    (el) => el.name.toLowerCase() === systemName.toLowerCase()
+  );
+  if (!system) {
+    return {
+      nodes: [],
+      edges: [],
+      legend: [],
+      groupBoundaries: [],
+      width: 0,
+      height: 0
+    };
+  }
+  const containers = [];
+  for (const child of system.children) {
+    if (child.type === "container") containers.push(child);
+  }
+  for (const group of system.groups) {
+    for (const child of group.children) {
+      if (child.type === "container") containers.push(child);
+    }
+  }
+  if (containers.length === 0) {
+    return {
+      nodes: [],
+      edges: [],
+      legend: [],
+      groupBoundaries: [],
+      width: 0,
+      height: 0
+    };
+  }
+  const containerNames = new Set(containers.map((c) => c.name.toLowerCase()));
+  const topElementsByName = /* @__PURE__ */ new Map();
+  for (const el of parsed.elements) {
+    topElementsByName.set(el.name.toLowerCase(), el);
+  }
+  const externalNames = /* @__PURE__ */ new Set();
+  for (const container of containers) {
+    for (const rel of container.relationships) {
+      const targetLower = rel.target.toLowerCase();
+      if (!containerNames.has(targetLower)) {
+        externalNames.add(targetLower);
+      }
+    }
+  }
+  const ownerMap = buildOwnershipMap(parsed.elements);
+  const allRels = collectAllRelationships(parsed.elements, ownerMap);
+  for (const { sourceName, rel } of allRels) {
+    const sourceAncestor = ownerMap.get(sourceName) ?? sourceName;
+    if (sourceAncestor.toLowerCase() === system.name.toLowerCase()) continue;
+    if (containerNames.has(rel.target.toLowerCase())) {
+      externalNames.add(sourceAncestor.toLowerCase());
+    }
+  }
+  const externals = [];
+  for (const name of externalNames) {
+    const el = topElementsByName.get(name);
+    if (el) externals.push(el);
+  }
+  const elementToGroup = /* @__PURE__ */ new Map();
+  for (const group of system.groups) {
+    for (const child of group.children) {
+      if (child.type === "container") {
+        elementToGroup.set(child.name, {
+          name: group.name,
+          lineNumber: group.lineNumber
+        });
+      }
+    }
+  }
+  const hasGroups = elementToGroup.size > 0;
+  const g = hasGroups ? new dagre.graphlib.Graph({ compound: true }) : new dagre.graphlib.Graph();
+  g.setDefaultEdgeLabel(() => ({}));
+  if (hasGroups) {
+    const seenGroups = /* @__PURE__ */ new Set();
+    for (const { name } of elementToGroup.values()) {
+      if (!seenGroups.has(name)) {
+        seenGroups.add(name);
+        g.setNode("__group_" + name, {});
+      }
+    }
+  }
+  const nameToElement = /* @__PURE__ */ new Map();
+  for (const el of containers) {
+    nameToElement.set(el.name, el);
+    const dims = computeC4NodeDimensions(el, { showTechnology: true });
+    g.setNode(el.name, { width: dims.width, height: dims.height });
+    const grp = elementToGroup.get(el.name);
+    if (grp) {
+      g.setParent(el.name, "__group_" + grp.name);
+    }
+  }
+  for (const el of externals) {
+    nameToElement.set(el.name, el);
+    const dims = computeC4NodeDimensions(el);
+    g.setNode(el.name, { width: dims.width, height: dims.height });
+  }
+  const containerRels = [];
+  const seenEdgeKeys = /* @__PURE__ */ new Set();
+  for (const container of containers) {
+    for (const rel of container.relationships) {
+      const targetEl = nameToElement.get(rel.target);
+      if (!targetEl) continue;
+      const key = `${container.name}\u2192${rel.target}`;
+      if (!seenEdgeKeys.has(key)) {
+        seenEdgeKeys.add(key);
+        containerRels.push({
+          sourceName: container.name,
+          targetName: rel.target,
+          ...rel.label !== void 0 && { label: rel.label },
+          ...rel.technology !== void 0 && { technology: rel.technology },
+          arrowType: rel.arrowType,
+          lineNumber: rel.lineNumber
+        });
+      }
+    }
+  }
+  for (const { sourceName, rel } of allRels) {
+    const sourceAncestor = ownerMap.get(sourceName) ?? sourceName;
+    if (sourceAncestor.toLowerCase() === system.name.toLowerCase()) continue;
+    if (containerNames.has(rel.target.toLowerCase())) {
+      const externalEl = nameToElement.get(sourceAncestor);
+      if (!externalEl) continue;
+      const key = `${sourceAncestor}\u2192${rel.target}`;
+      if (!seenEdgeKeys.has(key)) {
+        seenEdgeKeys.add(key);
+        containerRels.push({
+          sourceName: sourceAncestor,
+          targetName: rel.target,
+          ...rel.label !== void 0 && { label: rel.label },
+          ...rel.technology !== void 0 && { technology: rel.technology },
+          arrowType: rel.arrowType,
+          lineNumber: rel.lineNumber
+        });
+      }
+    }
+  }
+  const spacing = computeAdaptiveSpacing(containerRels);
+  g.setGraph({
+    rankdir: "TB",
+    nodesep: spacing.nodesep,
+    ranksep: spacing.ranksep,
+    edgesep: spacing.edgesep
+  });
+  for (const rel of containerRels) {
+    if (nameToElement.has(rel.sourceName) && nameToElement.has(rel.targetName)) {
+      g.setEdge(rel.sourceName, rel.targetName, { label: rel.label ?? "" });
+    }
+  }
+  dagre.layout(g);
+  const nodeGroupMap = hasGroups ? new Map([...elementToGroup.entries()].map(([k, v]) => [k, v.name])) : void 0;
+  reduceCrossings(
+    g,
+    containerRels.filter(
+      (r) => nameToElement.has(r.sourceName) && nameToElement.has(r.targetName)
+    ).map((r) => ({ source: r.sourceName, target: r.targetName })),
+    nodeGroupMap
+  );
+  const nodes = [];
+  for (const el of containers) {
+    const pos = g.node(el.name);
+    const color = resolveNodeColor(
+      el,
+      parsed.tagGroups,
+      activeTagGroup ?? null
+    );
+    const tech = el.metadata["tech"] ?? el.metadata["technology"];
+    const hasComponents = el.children.some((c) => c.type === "component") || el.groups.some((grp) => grp.children.some((c) => c.type === "component"));
+    const description = el.description?.join("\n");
+    const drillable = hasComponents || el.importPath ? true : void 0;
+    nodes.push({
+      id: el.name,
+      name: el.name,
+      type: "container",
+      ...description !== void 0 && { description },
+      metadata: el.metadata,
+      lineNumber: el.lineNumber,
+      ...color !== void 0 && { color },
+      shape: el.shape,
+      ...tech !== void 0 && { technology: tech },
+      ...drillable !== void 0 && { drillable },
+      ...el.importPath !== void 0 && { importPath: el.importPath },
+      x: pos.x,
+      y: pos.y,
+      width: pos.width,
+      height: pos.height
+    });
+  }
+  for (const el of externals) {
+    const pos = g.node(el.name);
+    const color = resolveNodeColor(
+      el,
+      parsed.tagGroups,
+      activeTagGroup ?? null
+    );
+    const description = el.description?.join("\n");
+    nodes.push({
+      id: el.name,
+      name: el.name,
+      type: el.type,
+      ...description !== void 0 && { description },
+      metadata: el.metadata,
+      lineNumber: el.lineNumber,
+      ...color !== void 0 && { color },
+      x: pos.x,
+      y: pos.y,
+      width: pos.width,
+      height: pos.height
+    });
+  }
+  const edges = containerRels.filter(
+    (rel) => nameToElement.has(rel.sourceName) && nameToElement.has(rel.targetName)
+  ).map((rel) => {
+    const edgeData = g.edge(rel.sourceName, rel.targetName);
+    return {
+      source: rel.sourceName,
+      target: rel.targetName,
+      arrowType: rel.arrowType,
+      ...rel.label !== void 0 && { label: rel.label },
+      ...rel.technology !== void 0 && { technology: rel.technology },
+      lineNumber: rel.lineNumber,
+      points: edgeData?.points ?? []
+    };
+  });
+  const containerNodes = nodes.filter((n) => n.type === "container");
+  let bMinX = Infinity, bMinY = Infinity, bMaxX = -Infinity, bMaxY = -Infinity;
+  for (const n of containerNodes) {
+    const left = n.x - n.width / 2;
+    const top = n.y - n.height / 2;
+    const right = n.x + n.width / 2;
+    const bottom = n.y + n.height / 2;
+    if (left < bMinX) bMinX = left;
+    if (top < bMinY) bMinY = top;
+    if (right > bMaxX) bMaxX = right;
+    if (bottom > bMaxY) bMaxY = bottom;
+  }
+  const boundary = {
+    label: system.name,
+    typeLabel: "system",
+    lineNumber: system.lineNumber,
+    x: bMinX - BOUNDARY_PAD,
+    y: bMinY - BOUNDARY_PAD,
+    width: bMaxX - bMinX + BOUNDARY_PAD * 2,
+    height: bMaxY - bMinY + BOUNDARY_PAD * 2
+  };
+  const groupBoundaries = [];
+  if (hasGroups) {
+    const nodeMap = new Map(containerNodes.map((n) => [n.name, n]));
+    const seenGroups = /* @__PURE__ */ new Map();
+    for (const [elName, grp] of elementToGroup) {
+      const node = nodeMap.get(elName);
+      if (!node) continue;
+      if (!seenGroups.has(grp.name)) {
+        seenGroups.set(grp.name, { lineNumber: grp.lineNumber, members: [] });
+      }
+      seenGroups.get(grp.name).members.push(node);
+    }
+    for (const [groupName, { lineNumber, members }] of seenGroups) {
+      if (members.length === 0) continue;
+      let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
+      for (const m of members) {
+        const left = m.x - m.width / 2;
+        const top = m.y - m.height / 2;
+        const right = m.x + m.width / 2;
+        const bottom = m.y + m.height / 2;
+        if (left < gMinX) gMinX = left;
+        if (top < gMinY) gMinY = top;
+        if (right > gMaxX) gMaxX = right;
+        if (bottom > gMaxY) gMaxY = bottom;
+      }
+      groupBoundaries.push({
+        label: groupName,
+        typeLabel: "group",
+        lineNumber,
+        x: gMinX - GROUP_BOUNDARY_PAD,
+        y: gMinY - GROUP_BOUNDARY_PAD,
+        width: gMaxX - gMinX + GROUP_BOUNDARY_PAD * 2,
+        height: gMaxY - gMinY + GROUP_BOUNDARY_PAD * 2
+      });
+    }
+  }
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const node of nodes) {
+    const left = node.x - node.width / 2;
+    const top = node.y - node.height / 2;
+    const right = node.x + node.width / 2;
+    const bottom = node.y + node.height / 2;
+    if (left < minX) minX = left;
+    if (top < minY) minY = top;
+    if (right > maxX) maxX = right;
+    if (bottom > maxY) maxY = bottom;
+  }
+  if (boundary.x < minX) minX = boundary.x;
+  if (boundary.y < minY) minY = boundary.y;
+  if (boundary.x + boundary.width > maxX) maxX = boundary.x + boundary.width;
+  if (boundary.y + boundary.height > maxY) maxY = boundary.y + boundary.height;
+  for (const gb of groupBoundaries) {
+    if (gb.x < minX) minX = gb.x;
+    if (gb.y < minY) minY = gb.y;
+    if (gb.x + gb.width > maxX) maxX = gb.x + gb.width;
+    if (gb.y + gb.height > maxY) maxY = gb.y + gb.height;
+  }
+  for (const edge of edges) {
+    for (const pt of edge.points) {
+      if (pt.x < minX) minX = pt.x;
+      if (pt.y < minY) minY = pt.y;
+      if (pt.x > maxX) maxX = pt.x;
+      if (pt.y > maxY) maxY = pt.y;
+    }
+  }
+  const shiftX = MARGIN - minX;
+  const shiftY = MARGIN - minY;
+  for (const node of nodes) {
+    node.x += shiftX;
+    node.y += shiftY;
+  }
+  boundary.x += shiftX;
+  boundary.y += shiftY;
+  for (const gb of groupBoundaries) {
+    gb.x += shiftX;
+    gb.y += shiftY;
+  }
+  for (const edge of edges) {
+    for (const pt of edge.points) {
+      pt.x += shiftX;
+      pt.y += shiftY;
+    }
+  }
+  let totalWidth = maxX - minX + MARGIN * 2;
+  let totalHeight = maxY - minY + MARGIN * 2;
+  const legendGroups = computeLegendGroups(parsed.tagGroups);
+  if (legendGroups.length > 0) {
+    const legendY = totalHeight + MARGIN;
+    let legendX = MARGIN;
+    for (const lg of legendGroups) {
+      lg.x = legendX;
+      lg.y = legendY;
+      legendX += lg.width + 12;
+    }
+    const legendRight = legendX;
+    const legendBottom = legendY + LEGEND_HEIGHT;
+    if (legendRight > totalWidth) totalWidth = legendRight;
+    if (legendBottom > totalHeight) totalHeight = legendBottom;
+  }
+  return {
+    nodes,
+    edges,
+    legend: legendGroups,
+    boundary,
+    groupBoundaries,
+    width: totalWidth,
+    height: totalHeight
+  };
+}
+function layoutC4Components(parsed, systemName, containerName, activeTagGroup) {
+  const system = parsed.elements.find(
+    (el) => el.name.toLowerCase() === systemName.toLowerCase()
+  );
+  if (!system) {
+    return {
+      nodes: [],
+      edges: [],
+      legend: [],
+      groupBoundaries: [],
+      width: 0,
+      height: 0
+    };
+  }
+  let targetContainer;
+  for (const child of system.children) {
+    if (child.type === "container" && child.name.toLowerCase() === containerName.toLowerCase()) {
+      targetContainer = child;
+      break;
+    }
+  }
+  if (!targetContainer) {
+    for (const group of system.groups) {
+      for (const child of group.children) {
+        if (child.type === "container" && child.name.toLowerCase() === containerName.toLowerCase()) {
+          targetContainer = child;
+          break;
+        }
+      }
+      if (targetContainer) break;
+    }
+  }
+  if (!targetContainer) {
+    return {
+      nodes: [],
+      edges: [],
+      legend: [],
+      groupBoundaries: [],
+      width: 0,
+      height: 0
+    };
+  }
+  const components = [];
+  for (const child of targetContainer.children) {
+    if (child.type === "component") components.push(child);
+  }
+  for (const group of targetContainer.groups) {
+    for (const child of group.children) {
+      if (child.type === "component") components.push(child);
+    }
+  }
+  if (components.length === 0) {
+    return {
+      nodes: [],
+      edges: [],
+      legend: [],
+      groupBoundaries: [],
+      width: 0,
+      height: 0
+    };
+  }
+  const componentNames = new Set(components.map((c) => c.name.toLowerCase()));
+  const topElementsByName = /* @__PURE__ */ new Map();
+  for (const el of parsed.elements) {
+    topElementsByName.set(el.name.toLowerCase(), el);
+    for (const child of el.children) {
+      if (child.type === "container") {
+        topElementsByName.set(child.name.toLowerCase(), child);
+      }
+    }
+    for (const group of el.groups) {
+      for (const child of group.children) {
+        if (child.type === "container") {
+          topElementsByName.set(child.name.toLowerCase(), child);
+        }
+      }
+    }
+  }
+  const externalNames = /* @__PURE__ */ new Set();
+  for (const component of components) {
+    for (const rel of component.relationships) {
+      const targetLower = rel.target.toLowerCase();
+      if (!componentNames.has(targetLower)) {
+        externalNames.add(targetLower);
+      }
+    }
+  }
+  const ownerMap = buildOwnershipMap(parsed.elements);
+  const allRels = collectAllRelationships(parsed.elements, ownerMap);
+  for (const { sourceName, rel } of allRels) {
+    if (componentNames.has(sourceName.toLowerCase())) continue;
+    if (componentNames.has(rel.target.toLowerCase())) {
+      const sourceAncestor = ownerMap.get(sourceName) ?? sourceName;
+      if (sourceAncestor.toLowerCase() === targetContainer.name.toLowerCase())
+        continue;
+      if (sourceAncestor.toLowerCase() === system.name.toLowerCase()) {
+        const sourceLower = sourceName.toLowerCase();
+        if (topElementsByName.has(sourceLower)) {
+          externalNames.add(sourceLower);
+        } else {
+          externalNames.add(sourceAncestor.toLowerCase());
+        }
+      } else {
+        externalNames.add(sourceAncestor.toLowerCase());
+      }
+    }
+  }
+  const externals = [];
+  for (const name of externalNames) {
+    const el = topElementsByName.get(name);
+    if (el) externals.push(el);
+  }
+  const elementToGroup = /* @__PURE__ */ new Map();
+  for (const group of targetContainer.groups) {
+    for (const child of group.children) {
+      if (child.type === "component") {
+        elementToGroup.set(child.name, {
+          name: group.name,
+          lineNumber: group.lineNumber
+        });
+      }
+    }
+  }
+  const hasGroups = elementToGroup.size > 0;
+  const g = hasGroups ? new dagre.graphlib.Graph({ compound: true }) : new dagre.graphlib.Graph();
+  g.setDefaultEdgeLabel(() => ({}));
+  if (hasGroups) {
+    const seenGroups = /* @__PURE__ */ new Set();
+    for (const { name } of elementToGroup.values()) {
+      if (!seenGroups.has(name)) {
+        seenGroups.add(name);
+        g.setNode("__group_" + name, {});
+      }
+    }
+  }
+  const nameToElement = /* @__PURE__ */ new Map();
+  for (const el of components) {
+    nameToElement.set(el.name, el);
+    const dims = computeC4NodeDimensions(el, { showTechnology: true });
+    g.setNode(el.name, { width: dims.width, height: dims.height });
+    const grp = elementToGroup.get(el.name);
+    if (grp) {
+      g.setParent(el.name, "__group_" + grp.name);
+    }
+  }
+  for (const el of externals) {
+    nameToElement.set(el.name, el);
+    const dims = computeC4NodeDimensions(el);
+    g.setNode(el.name, { width: dims.width, height: dims.height });
+  }
+  const componentRels = [];
+  const seenEdgeKeys = /* @__PURE__ */ new Set();
+  for (const component of components) {
+    for (const rel of component.relationships) {
+      const targetEl = nameToElement.get(rel.target);
+      if (!targetEl) continue;
+      const key = `${component.name}\u2192${rel.target}`;
+      if (!seenEdgeKeys.has(key)) {
+        seenEdgeKeys.add(key);
+        componentRels.push({
+          sourceName: component.name,
+          targetName: rel.target,
+          ...rel.label !== void 0 && { label: rel.label },
+          ...rel.technology !== void 0 && { technology: rel.technology },
+          arrowType: rel.arrowType,
+          lineNumber: rel.lineNumber
+        });
+      }
+    }
+  }
+  for (const { sourceName, rel } of allRels) {
+    if (componentNames.has(sourceName.toLowerCase())) continue;
+    if (!componentNames.has(rel.target.toLowerCase())) continue;
+    const sourceAncestor = ownerMap.get(sourceName) ?? sourceName;
+    if (sourceAncestor.toLowerCase() === targetContainer.name.toLowerCase())
+      continue;
+    let resolvedSource;
+    if (nameToElement.has(sourceName)) {
+      resolvedSource = sourceName;
+    } else if (nameToElement.has(sourceAncestor)) {
+      resolvedSource = sourceAncestor;
+    }
+    if (!resolvedSource) continue;
+    const key = `${resolvedSource}\u2192${rel.target}`;
+    if (!seenEdgeKeys.has(key)) {
+      seenEdgeKeys.add(key);
+      componentRels.push({
+        sourceName: resolvedSource,
+        targetName: rel.target,
+        ...rel.label !== void 0 && { label: rel.label },
+        ...rel.technology !== void 0 && { technology: rel.technology },
+        arrowType: rel.arrowType,
+        lineNumber: rel.lineNumber
+      });
+    }
+  }
+  const spacing = computeAdaptiveSpacing(componentRels);
+  g.setGraph({
+    rankdir: "TB",
+    nodesep: spacing.nodesep,
+    ranksep: spacing.ranksep,
+    edgesep: spacing.edgesep
+  });
+  for (const rel of componentRels) {
+    if (nameToElement.has(rel.sourceName) && nameToElement.has(rel.targetName)) {
+      g.setEdge(rel.sourceName, rel.targetName, { label: rel.label ?? "" });
+    }
+  }
+  dagre.layout(g);
+  const nodeGroupMap = hasGroups ? new Map([...elementToGroup.entries()].map(([k, v]) => [k, v.name])) : void 0;
+  reduceCrossings(
+    g,
+    componentRels.filter(
+      (r) => nameToElement.has(r.sourceName) && nameToElement.has(r.targetName)
+    ).map((r) => ({ source: r.sourceName, target: r.targetName })),
+    nodeGroupMap
+  );
+  const ancestors = [targetContainer, system];
+  const nodes = [];
+  for (const el of components) {
+    const pos = g.node(el.name);
+    const color = resolveNodeColor(
+      el,
+      parsed.tagGroups,
+      activeTagGroup ?? null,
+      ancestors
+    );
+    const tech = el.metadata["tech"] ?? el.metadata["technology"];
+    const hasComponents = el.children.some((c) => c.type === "component") || el.groups.some((grp) => grp.children.some((c) => c.type === "component"));
+    const description = el.description?.join("\n");
+    const drillable = hasComponents || el.importPath ? true : void 0;
+    nodes.push({
+      id: el.name,
+      name: el.name,
+      type: "component",
+      ...description !== void 0 && { description },
+      metadata: el.metadata,
+      lineNumber: el.lineNumber,
+      ...color !== void 0 && { color },
+      shape: el.shape,
+      ...tech !== void 0 && { technology: tech },
+      ...drillable !== void 0 && { drillable },
+      ...el.importPath !== void 0 && { importPath: el.importPath },
+      x: pos.x,
+      y: pos.y,
+      width: pos.width,
+      height: pos.height
+    });
+  }
+  for (const el of externals) {
+    const pos = g.node(el.name);
+    const color = resolveNodeColor(
+      el,
+      parsed.tagGroups,
+      activeTagGroup ?? null
+    );
+    const description = el.description?.join("\n");
+    nodes.push({
+      id: el.name,
+      name: el.name,
+      type: el.type,
+      ...description !== void 0 && { description },
+      metadata: el.metadata,
+      lineNumber: el.lineNumber,
+      ...color !== void 0 && { color },
+      x: pos.x,
+      y: pos.y,
+      width: pos.width,
+      height: pos.height
+    });
+  }
+  const edges = componentRels.filter(
+    (rel) => nameToElement.has(rel.sourceName) && nameToElement.has(rel.targetName)
+  ).map((rel) => {
+    const edgeData = g.edge(rel.sourceName, rel.targetName);
+    return {
+      source: rel.sourceName,
+      target: rel.targetName,
+      arrowType: rel.arrowType,
+      ...rel.label !== void 0 && { label: rel.label },
+      ...rel.technology !== void 0 && { technology: rel.technology },
+      lineNumber: rel.lineNumber,
+      points: edgeData?.points ?? []
+    };
+  });
+  const componentNodes = nodes.filter((n) => n.type === "component");
+  let bMinX = Infinity, bMinY = Infinity, bMaxX = -Infinity, bMaxY = -Infinity;
+  for (const n of componentNodes) {
+    const left = n.x - n.width / 2;
+    const top = n.y - n.height / 2;
+    const right = n.x + n.width / 2;
+    const bottom = n.y + n.height / 2;
+    if (left < bMinX) bMinX = left;
+    if (top < bMinY) bMinY = top;
+    if (right > bMaxX) bMaxX = right;
+    if (bottom > bMaxY) bMaxY = bottom;
+  }
+  const boundary = {
+    label: targetContainer.name,
+    typeLabel: "container",
+    lineNumber: targetContainer.lineNumber,
+    x: bMinX - BOUNDARY_PAD,
+    y: bMinY - BOUNDARY_PAD,
+    width: bMaxX - bMinX + BOUNDARY_PAD * 2,
+    height: bMaxY - bMinY + BOUNDARY_PAD * 2
+  };
+  const groupBoundaries = [];
+  if (hasGroups) {
+    const nodeMap = new Map(componentNodes.map((n) => [n.name, n]));
+    const seenGroups = /* @__PURE__ */ new Map();
+    for (const [elName, grp] of elementToGroup) {
+      const node = nodeMap.get(elName);
+      if (!node) continue;
+      if (!seenGroups.has(grp.name)) {
+        seenGroups.set(grp.name, { lineNumber: grp.lineNumber, members: [] });
+      }
+      seenGroups.get(grp.name).members.push(node);
+    }
+    for (const [groupName, { lineNumber, members }] of seenGroups) {
+      if (members.length === 0) continue;
+      let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
+      for (const m of members) {
+        const left = m.x - m.width / 2;
+        const top = m.y - m.height / 2;
+        const right = m.x + m.width / 2;
+        const bottom = m.y + m.height / 2;
+        if (left < gMinX) gMinX = left;
+        if (top < gMinY) gMinY = top;
+        if (right > gMaxX) gMaxX = right;
+        if (bottom > gMaxY) gMaxY = bottom;
+      }
+      groupBoundaries.push({
+        label: groupName,
+        typeLabel: "group",
+        lineNumber,
+        x: gMinX - GROUP_BOUNDARY_PAD,
+        y: gMinY - GROUP_BOUNDARY_PAD,
+        width: gMaxX - gMinX + GROUP_BOUNDARY_PAD * 2,
+        height: gMaxY - gMinY + GROUP_BOUNDARY_PAD * 2
+      });
+    }
+  }
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const node of nodes) {
+    const left = node.x - node.width / 2;
+    const top = node.y - node.height / 2;
+    const right = node.x + node.width / 2;
+    const bottom = node.y + node.height / 2;
+    if (left < minX) minX = left;
+    if (top < minY) minY = top;
+    if (right > maxX) maxX = right;
+    if (bottom > maxY) maxY = bottom;
+  }
+  if (boundary.x < minX) minX = boundary.x;
+  if (boundary.y < minY) minY = boundary.y;
+  if (boundary.x + boundary.width > maxX) maxX = boundary.x + boundary.width;
+  if (boundary.y + boundary.height > maxY) maxY = boundary.y + boundary.height;
+  for (const gb of groupBoundaries) {
+    if (gb.x < minX) minX = gb.x;
+    if (gb.y < minY) minY = gb.y;
+    if (gb.x + gb.width > maxX) maxX = gb.x + gb.width;
+    if (gb.y + gb.height > maxY) maxY = gb.y + gb.height;
+  }
+  for (const edge of edges) {
+    for (const pt of edge.points) {
+      if (pt.x < minX) minX = pt.x;
+      if (pt.y < minY) minY = pt.y;
+      if (pt.x > maxX) maxX = pt.x;
+      if (pt.y > maxY) maxY = pt.y;
+    }
+  }
+  const shiftX = MARGIN - minX;
+  const shiftY = MARGIN - minY;
+  for (const node of nodes) {
+    node.x += shiftX;
+    node.y += shiftY;
+  }
+  boundary.x += shiftX;
+  boundary.y += shiftY;
+  for (const gb of groupBoundaries) {
+    gb.x += shiftX;
+    gb.y += shiftY;
+  }
+  for (const edge of edges) {
+    for (const pt of edge.points) {
+      pt.x += shiftX;
+      pt.y += shiftY;
+    }
+  }
+  let totalWidth = maxX - minX + MARGIN * 2;
+  let totalHeight = maxY - minY + MARGIN * 2;
+  const legendGroups = computeLegendGroups(parsed.tagGroups);
+  if (legendGroups.length > 0) {
+    const legendY = totalHeight + MARGIN;
+    let legendX = MARGIN;
+    for (const lg of legendGroups) {
+      lg.x = legendX;
+      lg.y = legendY;
+      legendX += lg.width + 12;
+    }
+    const legendRight = legendX;
+    const legendBottom = legendY + LEGEND_HEIGHT;
+    if (legendRight > totalWidth) totalWidth = legendRight;
+    if (legendBottom > totalHeight) totalHeight = legendBottom;
+  }
+  return {
+    nodes,
+    edges,
+    legend: legendGroups,
+    boundary,
+    groupBoundaries,
+    width: totalWidth,
+    height: totalHeight
+  };
+}
+function resolveContainerRef(parsed, refName) {
+  const lower = refName.toLowerCase();
+  for (const el of parsed.elements) {
+    for (const child of el.children) {
+      if (child.type === "container" && child.name.toLowerCase() === lower)
+        return child;
+    }
+    for (const group of el.groups) {
+      for (const child of group.children) {
+        if (child.type === "container" && child.name.toLowerCase() === lower)
+          return child;
+      }
+    }
+  }
+  return void 0;
+}
+function collectDeploymentRefs(nodes, parsed, parentId, refs, infraIds, infraParents) {
+  for (const node of nodes) {
+    const infraId = `__infra_${node.name}`;
+    infraIds.set(infraId, node);
+    infraParents.set(infraId, parentId);
+    for (const ref of node.containerRefs) {
+      const el = resolveContainerRef(parsed, ref);
+      if (el) {
+        refs.push({
+          refName: ref,
+          element: el,
+          infraId,
+          deployLineNumber: node.lineNumber
+        });
+      }
+    }
+    collectDeploymentRefs(
+      node.children,
+      parsed,
+      infraId,
+      refs,
+      infraIds,
+      infraParents
+    );
+  }
+}
+function layoutC4Deployment(parsed, activeTagGroup) {
+  if (parsed.deployment.length === 0) {
+    return {
+      nodes: [],
+      edges: [],
+      legend: [],
+      groupBoundaries: [],
+      width: 0,
+      height: 0
+    };
+  }
+  const refs = [];
+  const infraIds = /* @__PURE__ */ new Map();
+  const infraParents = /* @__PURE__ */ new Map();
+  collectDeploymentRefs(
+    parsed.deployment,
+    parsed,
+    null,
+    refs,
+    infraIds,
+    infraParents
+  );
+  if (refs.length === 0) {
+    return {
+      nodes: [],
+      edges: [],
+      legend: [],
+      groupBoundaries: [],
+      width: 0,
+      height: 0
+    };
+  }
+  const seenRefs = /* @__PURE__ */ new Map();
+  for (const ref of refs) {
+    const key = ref.element.name.toLowerCase();
+    if (!seenRefs.has(key)) seenRefs.set(key, ref);
+  }
+  const refEntries = [...seenRefs.values()];
+  const refNames = new Set(refEntries.map((r) => r.element.name.toLowerCase()));
+  const nameToElement = /* @__PURE__ */ new Map();
+  for (const r of refEntries) {
+    nameToElement.set(r.element.name, r.element);
+  }
+  const g = new dagre.graphlib.Graph({ compound: true });
+  g.setDefaultEdgeLabel(() => ({}));
+  for (const [infraId] of infraIds) {
+    g.setNode(infraId, {});
+    const parentId = infraParents.get(infraId);
+    if (parentId) g.setParent(infraId, parentId);
+  }
+  for (const r of refEntries) {
+    const dims = computeC4NodeDimensions(r.element, { showTechnology: true });
+    g.setNode(r.element.name, { width: dims.width, height: dims.height });
+    g.setParent(r.element.name, r.infraId);
+  }
+  const deployRels = [];
+  const seenEdgeKeys = /* @__PURE__ */ new Set();
+  for (const r of refEntries) {
+    for (const rel of r.element.relationships) {
+      if (refNames.has(rel.target.toLowerCase())) {
+        const key = `${r.element.name}\u2192${rel.target}`;
+        if (!seenEdgeKeys.has(key)) {
+          seenEdgeKeys.add(key);
+          deployRels.push({
+            sourceName: r.element.name,
+            targetName: rel.target,
+            ...rel.label !== void 0 && { label: rel.label },
+            ...rel.technology !== void 0 && { technology: rel.technology },
+            arrowType: rel.arrowType,
+            lineNumber: rel.lineNumber
+          });
+        }
+      }
+    }
+  }
+  const spacing = computeAdaptiveSpacing(deployRels);
+  g.setGraph({
+    rankdir: "TB",
+    nodesep: spacing.nodesep,
+    ranksep: spacing.ranksep,
+    edgesep: spacing.edgesep
+  });
+  for (const rel of deployRels) {
+    if (nameToElement.has(rel.sourceName) && nameToElement.has(rel.targetName)) {
+      g.setEdge(rel.sourceName, rel.targetName, { label: rel.label ?? "" });
+    }
+  }
+  dagre.layout(g);
+  const nodeInfraMap = /* @__PURE__ */ new Map();
+  for (const r of refEntries) nodeInfraMap.set(r.element.name, r.infraId);
+  reduceCrossings(
+    g,
+    deployRels.filter(
+      (r) => nameToElement.has(r.sourceName) && nameToElement.has(r.targetName)
+    ).map((r) => ({ source: r.sourceName, target: r.targetName })),
+    nodeInfraMap
+  );
+  const nodes = [];
+  for (const r of refEntries) {
+    const pos = g.node(r.element.name);
+    const color = resolveNodeColor(
+      r.element,
+      parsed.tagGroups,
+      activeTagGroup ?? null
+    );
+    const tech = r.element.metadata["tech"] ?? r.element.metadata["technology"];
+    const description = r.element.description?.join("\n");
+    nodes.push({
+      id: r.element.name,
+      name: r.element.name,
+      type: "container",
+      ...description !== void 0 && { description },
+      metadata: r.element.metadata,
+      lineNumber: r.element.lineNumber,
+      ...color !== void 0 && { color },
+      shape: r.element.shape,
+      ...tech !== void 0 && { technology: tech },
+      x: pos.x,
+      y: pos.y,
+      width: pos.width,
+      height: pos.height
+    });
+  }
+  const edges = deployRels.filter(
+    (rel) => nameToElement.has(rel.sourceName) && nameToElement.has(rel.targetName)
+  ).map((rel) => {
+    const edgeData = g.edge(rel.sourceName, rel.targetName);
+    return {
+      source: rel.sourceName,
+      target: rel.targetName,
+      arrowType: rel.arrowType,
+      ...rel.label !== void 0 && { label: rel.label },
+      ...rel.technology !== void 0 && { technology: rel.technology },
+      lineNumber: rel.lineNumber,
+      points: edgeData?.points ?? []
+    };
+  });
+  const groupBoundaries = [];
+  const nodeMap = new Map(nodes.map((n) => [n.name, n]));
+  const infraMembers = /* @__PURE__ */ new Map();
+  for (const r of refEntries) {
+    const members = infraMembers.get(r.infraId) ?? [];
+    const node = nodeMap.get(r.element.name);
+    if (node) members.push(node);
+    infraMembers.set(r.infraId, members);
+  }
+  const infraBounds = /* @__PURE__ */ new Map();
+  function computeInfraBounds(infraId) {
+    if (infraBounds.has(infraId)) return infraBounds.get(infraId);
+    let bMinX = Infinity, bMinY = Infinity, bMaxX = -Infinity, bMaxY = -Infinity;
+    let hasContent = false;
+    const members = infraMembers.get(infraId) ?? [];
+    for (const m of members) {
+      hasContent = true;
+      const left = m.x - m.width / 2;
+      const top = m.y - m.height / 2;
+      const right = m.x + m.width / 2;
+      const bottom = m.y + m.height / 2;
+      if (left < bMinX) bMinX = left;
+      if (top < bMinY) bMinY = top;
+      if (right > bMaxX) bMaxX = right;
+      if (bottom > bMaxY) bMaxY = bottom;
+    }
+    for (const [childId, parentId] of infraParents) {
+      if (parentId === infraId) {
+        const childBounds = computeInfraBounds(childId);
+        if (childBounds) {
+          hasContent = true;
+          if (childBounds.x < bMinX) bMinX = childBounds.x;
+          if (childBounds.y < bMinY) bMinY = childBounds.y;
+          if (childBounds.x + childBounds.width > bMaxX)
+            bMaxX = childBounds.x + childBounds.width;
+          if (childBounds.y + childBounds.height > bMaxY)
+            bMaxY = childBounds.y + childBounds.height;
+        }
+      }
+    }
+    if (!hasContent) return null;
+    const bounds = {
+      x: bMinX - BOUNDARY_PAD,
+      y: bMinY - BOUNDARY_PAD,
+      width: bMaxX - bMinX + BOUNDARY_PAD * 2,
+      height: bMaxY - bMinY + BOUNDARY_PAD * 2
+    };
+    infraBounds.set(infraId, bounds);
+    return bounds;
+  }
+  for (const [infraId, node] of infraIds) {
+    const bounds = computeInfraBounds(infraId);
+    if (bounds) {
+      const shapeLabel = node.shape !== "default" ? node.shape : "node";
+      groupBoundaries.push({
+        label: node.name,
+        typeLabel: shapeLabel,
+        lineNumber: node.lineNumber,
+        ...bounds
+      });
+    }
+  }
+  groupBoundaries.sort((a, b) => b.width * b.height - a.width * a.height);
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const node of nodes) {
+    const left = node.x - node.width / 2;
+    const top = node.y - node.height / 2;
+    const right = node.x + node.width / 2;
+    const bottom = node.y + node.height / 2;
+    if (left < minX) minX = left;
+    if (top < minY) minY = top;
+    if (right > maxX) maxX = right;
+    if (bottom > maxY) maxY = bottom;
+  }
+  for (const gb of groupBoundaries) {
+    if (gb.x < minX) minX = gb.x;
+    if (gb.y < minY) minY = gb.y;
+    if (gb.x + gb.width > maxX) maxX = gb.x + gb.width;
+    if (gb.y + gb.height > maxY) maxY = gb.y + gb.height;
+  }
+  for (const edge of edges) {
+    for (const pt of edge.points) {
+      if (pt.x < minX) minX = pt.x;
+      if (pt.y < minY) minY = pt.y;
+      if (pt.x > maxX) maxX = pt.x;
+      if (pt.y > maxY) maxY = pt.y;
+    }
+  }
+  const shiftX = MARGIN - minX;
+  const shiftY = MARGIN - minY;
+  for (const node of nodes) {
+    node.x += shiftX;
+    node.y += shiftY;
+  }
+  for (const gb of groupBoundaries) {
+    gb.x += shiftX;
+    gb.y += shiftY;
+  }
+  for (const edge of edges) {
+    for (const pt of edge.points) {
+      pt.x += shiftX;
+      pt.y += shiftY;
+    }
+  }
+  let totalWidth = maxX - minX + MARGIN * 2;
+  let totalHeight = maxY - minY + MARGIN * 2;
+  const legendGroups = computeLegendGroups(parsed.tagGroups);
+  if (legendGroups.length > 0) {
+    const legendY = totalHeight + MARGIN;
+    let legendX = MARGIN;
+    for (const lg of legendGroups) {
+      lg.x = legendX;
+      lg.y = legendY;
+      legendX += lg.width + 12;
+    }
+    const legendRight = legendX;
+    const legendBottom = legendY + LEGEND_HEIGHT;
+    if (legendRight > totalWidth) totalWidth = legendRight;
+    if (legendBottom > totalHeight) totalHeight = legendBottom;
+  }
+  return {
+    nodes,
+    edges,
+    legend: legendGroups,
+    groupBoundaries,
+    width: totalWidth,
+    height: totalHeight
+  };
+}
+
+export {
+  rollUpContextRelationships,
+  collectCardMetadata,
+  computeC4NodeDimensions,
+  layoutC4Context,
+  layoutC4Containers,
+  layoutC4Components,
+  layoutC4Deployment
+};
+//# sourceMappingURL=chunk-QEBUY5NY.js.map