@diagrammo/dgmo 0.46.0 → 0.47.0

package/dist/chunk-P4RH4OSP.js

@@ -0,0 +1,1038 @@
+import {
+  collectCardMetadata,
+  layoutC4Components,
+  layoutC4Containers,
+  layoutC4Context,
+  layoutC4Deployment
+} from "./chunk-QEBUY5NY.js";
+import {
+  renderInlineText
+} from "./chunk-3HDBAXF5.js";
+import {
+  CARD_RADIUS,
+  EDGE_STROKE_WIDTH,
+  META_FONT_SIZE,
+  META_LINE_HEIGHT,
+  NODE_STROKE_WIDTH
+} from "./chunk-3CIOJ5YJ.js";
+import {
+  renderIntegratedLegend
+} from "./chunk-PWIHZ6NJ.js";
+import {
+  TITLE_FONT_SIZE,
+  TITLE_FONT_WEIGHT
+} from "./chunk-A4GOY3PE.js";
+import {
+  FONT_FAMILY
+} from "./chunk-6KFWC4CO.js";
+import {
+  LEGEND_HEIGHT
+} from "./chunk-QOOUC2J5.js";
+import {
+  measureText,
+  wrapTextToWidth
+} from "./chunk-WCT3NYCV.js";
+import {
+  parseC4
+} from "./chunk-2DXMZRWJ.js";
+import {
+  preprocessDescriptionLine
+} from "./chunk-IYULMRBE.js";
+import {
+  contrastText,
+  mix,
+  shapeFill
+} from "./chunk-P6T66CCZ.js";
+import {
+  tagAttrKey
+} from "./chunk-QLCCJEJI.js";
+
+// src/c4/renderer.ts
+import * as d3Selection from "d3-selection";
+import * as d3Shape from "d3-shape";
+var DIAGRAM_PADDING = 20;
+var MAX_SCALE = 3;
+var TITLE_HEIGHT = 30;
+var TYPE_FONT_SIZE = 10;
+var NAME_FONT_SIZE = 14;
+var DESC_FONT_SIZE = 11;
+var DESC_LINE_HEIGHT = 16;
+var EDGE_LABEL_FONT_SIZE = 11;
+var TECH_FONT_SIZE = 10;
+var CARD_H_PAD = 20;
+var CARD_V_PAD = 14;
+var TYPE_LABEL_HEIGHT = 18;
+var DIVIDER_GAP = 6;
+var NAME_HEIGHT = 20;
+var BOUNDARY_LABEL_FONT_SIZE = 12;
+var BOUNDARY_STROKE_WIDTH = 1.5;
+var BOUNDARY_RADIUS = 8;
+var DRILL_BAR_HEIGHT = 6;
+var CYLINDER_RY = 8;
+var PERSON_HEAD_R = 4;
+var PERSON_ARM_SPAN = 10;
+var PERSON_LEG_SPAN = 7;
+var PERSON_ICON_W = PERSON_ARM_SPAN * 2;
+var PERSON_SW = 1.5;
+function typeColor(type, palette, nodeColor) {
+  if (nodeColor) return nodeColor;
+  switch (type) {
+    case "person":
+      return palette.colors.blue;
+    case "container":
+      return palette.colors.purple;
+    case "component":
+      return palette.colors.green;
+    default:
+      return palette.colors.teal;
+  }
+}
+function nodeFill(palette, isDark, type, nodeColor, solid) {
+  const color = typeColor(type, palette, nodeColor);
+  return shapeFill(palette, color, isDark, {
+    ...solid !== void 0 && { solid }
+  });
+}
+function nodeStroke(palette, type, nodeColor) {
+  return typeColor(type, palette, nodeColor);
+}
+var lineGenerator = d3Shape.line().x((d) => d.x).y((d) => d.y).curve(d3Shape.curveBasis);
+function isDashedEdge(arrowType) {
+  return arrowType === "async" || arrowType === "bidirectional-async";
+}
+function hasBidirectionalMarkers(arrowType) {
+  return arrowType === "bidirectional" || arrowType === "bidirectional-async";
+}
+function drawPersonIcon(g, cx, cy, color) {
+  const headY = cy - 7;
+  const bodyTopY = headY + PERSON_HEAD_R + 1;
+  const bodyBottomY = cy + 4;
+  const legY = cy + 10;
+  g.append("circle").attr("cx", cx).attr("cy", headY).attr("r", PERSON_HEAD_R).attr("fill", "none").attr("stroke", color).attr("stroke-width", PERSON_SW);
+  g.append("line").attr("x1", cx).attr("y1", bodyTopY).attr("x2", cx).attr("y2", bodyBottomY).attr("stroke", color).attr("stroke-width", PERSON_SW);
+  g.append("line").attr("x1", cx - PERSON_ARM_SPAN).attr("y1", bodyTopY + 3).attr("x2", cx + PERSON_ARM_SPAN).attr("y2", bodyTopY + 3).attr("stroke", color).attr("stroke-width", PERSON_SW);
+  g.append("line").attr("x1", cx).attr("y1", bodyBottomY).attr("x2", cx - PERSON_LEG_SPAN).attr("y2", legY).attr("stroke", color).attr("stroke-width", PERSON_SW);
+  g.append("line").attr("x1", cx).attr("y1", bodyBottomY).attr("x2", cx + PERSON_LEG_SPAN).attr("y2", legY).attr("stroke", color).attr("stroke-width", PERSON_SW);
+}
+function renderC4Context(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, exportMode) {
+  d3Selection.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
+  if (width <= 0 || height <= 0) return;
+  const titleHeight = parsed.title && parsed.options["no-title"] !== "on" ? TITLE_HEIGHT + 10 : 0;
+  const diagramW = layout.width;
+  const hasLegend = layout.legend.length > 0;
+  const C4_LAYOUT_MARGIN = 40;
+  const LEGEND_FIXED_GAP = 8;
+  const fixedLegend = !exportDims && hasLegend;
+  const legendLayoutSpace = C4_LAYOUT_MARGIN + LEGEND_HEIGHT;
+  const legendReserveH = fixedLegend ? LEGEND_HEIGHT + LEGEND_FIXED_GAP : 0;
+  const diagramH = fixedLegend ? layout.height - legendLayoutSpace : layout.height;
+  const availH = height - titleHeight - legendReserveH;
+  const scaleX = (width - DIAGRAM_PADDING * 2) / diagramW;
+  const scaleY = (availH - DIAGRAM_PADDING * 2) / diagramH;
+  const scale = Math.min(MAX_SCALE, scaleX, scaleY);
+  const scaledW = diagramW * scale;
+  const offsetX = (width - scaledW) / 2;
+  const offsetY = titleHeight + DIAGRAM_PADDING + legendReserveH;
+  const svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMid meet").style("font-family", FONT_FAMILY);
+  const defs = svg.append("defs");
+  const AW = 10;
+  const AH = 7;
+  defs.append("marker").attr("id", "c4-arrow-end").attr("viewBox", `0 0 ${AW} ${AH}`).attr("refX", AW).attr("refY", AH / 2).attr("markerWidth", AW).attr("markerHeight", AH).attr("orient", "auto").append("polygon").attr("points", `0,0 ${AW},${AH / 2} 0,${AH}`).attr("fill", palette.textMuted);
+  defs.append("marker").attr("id", "c4-arrow-start").attr("viewBox", `0 0 ${AW} ${AH}`).attr("refX", 0).attr("refY", AH / 2).attr("markerWidth", AW).attr("markerHeight", AH).attr("orient", "auto").append("polygon").attr("points", `${AW},0 0,${AH / 2} ${AW},${AH}`).attr("fill", palette.textMuted);
+  if (parsed.title && parsed.options["no-title"] !== "on") {
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).style(
+      "cursor",
+      onClickItem && parsed.titleLineNumber ? "pointer" : "default"
+    ).text(parsed.title);
+    if (parsed.titleLineNumber) {
+      titleEl.attr("data-line-number", parsed.titleLineNumber);
+      if (onClickItem) {
+        titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
+          d3Selection.select(this).attr("opacity", 0.7);
+        }).on("mouseleave", function() {
+          d3Selection.select(this).attr("opacity", 1);
+        });
+      }
+    }
+  }
+  const contentG = svg.append("g").attr("transform", `translate(${offsetX}, ${offsetY}) scale(${scale})`);
+  for (const edge of layout.edges) {
+    if (edge.points.length < 2) continue;
+    const edgeG = contentG.append("g").attr("class", "c4-edge-group").attr("data-line-number", String(edge.lineNumber)).attr("data-source", edge.source).attr("data-target", edge.target);
+    if (onClickItem) {
+      edgeG.style("cursor", "pointer").on("click", () => {
+        onClickItem(edge.lineNumber);
+      });
+    }
+    const edgeColor = palette.textMuted;
+    const dashed = isDashedEdge(edge.arrowType);
+    const bidir = hasBidirectionalMarkers(edge.arrowType);
+    const pathD = lineGenerator(edge.points);
+    if (pathD) {
+      const pathEl = edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", edgeColor).attr("stroke-width", EDGE_STROKE_WIDTH).attr("class", "c4-edge").attr("marker-end", "url(#c4-arrow-end)");
+      if (dashed) {
+        pathEl.attr("stroke-dasharray", "6 3");
+      }
+      if (bidir) {
+        pathEl.attr("marker-start", "url(#c4-arrow-start)");
+      }
+    }
+    if (edge.label || edge.technology) {
+      const midIdx = Math.floor(edge.points.length / 2);
+      const midPt = edge.points[midIdx];
+      const labelText = edge.label ?? "";
+      const techText = edge.technology ? `[${edge.technology}]` : "";
+      const textW = Math.max(
+        measureText(labelText, EDGE_LABEL_FONT_SIZE),
+        measureText(techText, TECH_FONT_SIZE)
+      );
+      const bgW = textW + 12;
+      const bgH = (labelText ? 16 : 0) + (techText ? 14 : 0) + 4;
+      edgeG.append("rect").attr("x", midPt.x - bgW / 2).attr("y", midPt.y - bgH / 2).attr("width", bgW).attr("height", bgH).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.9).attr("class", "c4-edge-label-bg");
+      let textY = midPt.y;
+      if (labelText && techText) {
+        textY = midPt.y - 4;
+      }
+      if (labelText) {
+        edgeG.append("text").attr("x", midPt.x).attr("y", textY + 4).attr("text-anchor", "middle").attr("fill", edgeColor).attr("font-size", EDGE_LABEL_FONT_SIZE).attr("class", "c4-edge-label").text(labelText);
+      }
+      if (techText) {
+        edgeG.append("text").attr("x", midPt.x).attr("y", labelText ? textY + 18 : textY + 4).attr("text-anchor", "middle").attr("fill", edgeColor).attr("font-size", TECH_FONT_SIZE).attr("font-style", "italic").attr("class", "c4-edge-tech").text(techText);
+      }
+    }
+  }
+  for (const node of layout.nodes) {
+    const nodeG = contentG.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("class", "c4-card").attr("data-line-number", String(node.lineNumber)).attr("data-node-id", node.id);
+    if (activeTagGroup) {
+      const tagKey = tagAttrKey(activeTagGroup);
+      const tagValue = node.metadata[tagKey];
+      if (tagValue) {
+        nodeG.attr(`data-tag-${tagKey}`, tagValue.toLowerCase());
+      } else {
+        const tagGroup = parsed.tagGroups.find(
+          (g) => g.name.toLowerCase() === tagKey || g.alias?.toLowerCase() === tagKey
+        );
+        if (tagGroup?.defaultValue) {
+          nodeG.attr(`data-tag-${tagKey}`, tagGroup.defaultValue.toLowerCase());
+        }
+      }
+    }
+    if (node.importPath) {
+      nodeG.attr("data-import-path", node.importPath);
+    }
+    if (onClickItem) {
+      nodeG.style("cursor", "pointer").on("click", () => {
+        onClickItem(node.lineNumber);
+      });
+    }
+    const w = node.width;
+    const h = node.height;
+    const solid = parsed.options["solid-fill"] === "on";
+    const fill = nodeFill(palette, isDark, node.type, node.color, solid);
+    const stroke = nodeStroke(palette, node.type, node.color);
+    const onFillText = contrastText(
+      fill,
+      palette.textOnFillLight,
+      palette.textOnFillDark
+    );
+    nodeG.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", CARD_RADIUS).attr("ry", CARD_RADIUS).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", NODE_STROKE_WIDTH);
+    let yPos = -h / 2 + CARD_V_PAD;
+    const typeLabel = `\xAB${node.type}\xBB`;
+    nodeG.append("text").attr("x", 0).attr("y", yPos + TYPE_FONT_SIZE / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", TYPE_FONT_SIZE).attr("font-style", "italic").text(typeLabel);
+    yPos += TYPE_LABEL_HEIGHT;
+    if (node.type === "person") {
+      const textWidth = measureText(node.name, NAME_FONT_SIZE);
+      const gap = 6;
+      const totalWidth = PERSON_ICON_W + gap + textWidth;
+      const iconCx = -totalWidth / 2 + PERSON_ICON_W / 2;
+      const textX = iconCx + PERSON_ICON_W / 2 + gap;
+      drawPersonIcon(
+        nodeG,
+        iconCx,
+        yPos + NAME_FONT_SIZE / 2 - 2,
+        stroke
+      );
+      nodeG.append("text").attr("x", textX).attr("y", yPos + NAME_FONT_SIZE / 2).attr("text-anchor", "start").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", NAME_FONT_SIZE).attr("font-weight", "bold").text(node.name);
+    } else {
+      nodeG.append("text").attr("x", 0).attr("y", yPos + NAME_FONT_SIZE / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", NAME_FONT_SIZE).attr("font-weight", "bold").text(node.name);
+    }
+    yPos += NAME_HEIGHT;
+    nodeG.append("line").attr("x1", -w / 2 + CARD_H_PAD / 2).attr("y1", yPos).attr("x2", w / 2 - CARD_H_PAD / 2).attr("y2", yPos).attr("stroke", solid ? onFillText : stroke).attr("stroke-width", 0.5).attr("stroke-opacity", 0.4);
+    yPos += DIVIDER_GAP;
+    if (node.description) {
+      const contentWidth = w - CARD_H_PAD * 2;
+      const lines = wrapTextToWidth(
+        node.description,
+        DESC_FONT_SIZE,
+        contentWidth
+      );
+      for (const line2 of lines) {
+        const textEl = nodeG.append("text").attr("x", 0).attr("y", yPos + DESC_FONT_SIZE / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", DESC_FONT_SIZE);
+        renderInlineText(
+          textEl,
+          preprocessDescriptionLine(line2),
+          palette,
+          DESC_FONT_SIZE
+        );
+        yPos += DESC_LINE_HEIGHT;
+      }
+    }
+    if (node.drillable) {
+      const clipId = `clip-drill-${node.id.replace(/\s+/g, "-")}`;
+      nodeG.append("clipPath").attr("id", clipId).append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", CARD_RADIUS);
+      nodeG.append("rect").attr("x", -w / 2).attr("y", h / 2 - DRILL_BAR_HEIGHT).attr("width", w).attr("height", DRILL_BAR_HEIGHT).attr("fill", solid ? onFillText : stroke).attr("clip-path", `url(#${clipId})`).attr("class", "c4-drill-bar");
+    }
+  }
+  if (hasLegend) {
+    const legendParent = fixedLegend ? svg.append("g").attr("class", "c4-legend-fixed").attr("transform", `translate(0, ${DIAGRAM_PADDING + titleHeight})`) : contentG.append("g").attr("class", "c4-legend");
+    if (activeTagGroup) {
+      legendParent.attr("data-legend-active", tagAttrKey(activeTagGroup));
+    }
+    renderLegend(
+      legendParent,
+      layout,
+      palette,
+      isDark,
+      activeTagGroup,
+      fixedLegend ? width : null,
+      exportMode
+    );
+  }
+}
+function renderC4ContextForExport(content, theme, palette) {
+  const parsed = parseC4(content, palette);
+  if (parsed.error || parsed.elements.length === 0) return "";
+  const layout = layoutC4Context(parsed);
+  const isDark = theme === "dark";
+  const container = document.createElement("div");
+  const titleOffset = parsed.title && parsed.options["no-title"] !== "on" ? TITLE_HEIGHT + 10 : 0;
+  const exportWidth = layout.width + DIAGRAM_PADDING * 2;
+  const exportHeight = layout.height + DIAGRAM_PADDING * 2 + titleOffset;
+  container.style.width = `${exportWidth}px`;
+  container.style.height = `${exportHeight}px`;
+  container.style.position = "absolute";
+  container.style.left = "-9999px";
+  document.body.appendChild(container);
+  try {
+    renderC4Context(container, parsed, layout, palette, isDark, void 0, {
+      width: exportWidth,
+      height: exportHeight
+    });
+    const svgEl = container.querySelector("svg");
+    if (!svgEl) return "";
+    if (theme === "transparent") {
+      svgEl.style.background = "none";
+    }
+    svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svgEl.style.fontFamily = FONT_FAMILY;
+    return svgEl.outerHTML;
+  } finally {
+    document.body.removeChild(container);
+  }
+}
+function drawCylinderCard(nodeG, w, h, fill, stroke, dashed) {
+  const ry = CYLINDER_RY;
+  const path = [
+    `M ${-w / 2} ${-h / 2 + ry}`,
+    `A ${w / 2} ${ry} 0 0 1 ${w / 2} ${-h / 2 + ry}`,
+    `L ${w / 2} ${h / 2 - ry}`,
+    `A ${w / 2} ${ry} 0 0 1 ${-w / 2} ${h / 2 - ry}`,
+    "Z"
+  ].join(" ");
+  const el = nodeG.append("path").attr("d", path).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", NODE_STROKE_WIDTH);
+  if (dashed) {
+    el.attr("stroke-dasharray", "6 3");
+  }
+  nodeG.append("ellipse").attr("cx", 0).attr("cy", -h / 2 + ry).attr("rx", w / 2).attr("ry", ry).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", NODE_STROKE_WIDTH);
+}
+function drawCardRect(nodeG, w, h, fill, stroke, dashed) {
+  const el = nodeG.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", CARD_RADIUS).attr("ry", CARD_RADIUS).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", NODE_STROKE_WIDTH);
+  if (dashed) {
+    el.attr("stroke-dasharray", "6 3");
+  }
+}
+function renderEdges(contentG, edges, palette, onClickItem, obstacleRects) {
+  const pendingLabels = [];
+  for (const edge of edges) {
+    if (edge.points.length < 2) continue;
+    const edgeG = contentG.append("g").attr("class", "c4-edge-group").attr("data-line-number", String(edge.lineNumber)).attr("data-source", edge.source).attr("data-target", edge.target);
+    if (onClickItem) {
+      edgeG.style("cursor", "pointer").on("click", () => {
+        onClickItem(edge.lineNumber);
+      });
+    }
+    const edgeColor = palette.textMuted;
+    const dashed = isDashedEdge(edge.arrowType);
+    const bidir = hasBidirectionalMarkers(edge.arrowType);
+    const pathD = lineGenerator(edge.points);
+    if (pathD) {
+      const pathEl = edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", edgeColor).attr("stroke-width", EDGE_STROKE_WIDTH).attr("class", "c4-edge").attr("marker-end", "url(#c4-arrow-end)");
+      if (dashed) {
+        pathEl.attr("stroke-dasharray", "6 3");
+      }
+      if (bidir) {
+        pathEl.attr("marker-start", "url(#c4-arrow-start)");
+      }
+    }
+    if (edge.label || edge.technology) {
+      const labelText = edge.label ?? "";
+      const techText = edge.technology ? `[${edge.technology}]` : "";
+      const textW = Math.max(
+        measureText(labelText, EDGE_LABEL_FONT_SIZE),
+        measureText(techText, TECH_FONT_SIZE)
+      );
+      const bgW = textW + 12;
+      const bgH = (labelText ? 16 : 0) + (techText ? 14 : 0) + 4;
+      pendingLabels.push({
+        edgeG,
+        labelText,
+        techText,
+        bgW,
+        bgH,
+        x: 0,
+        y: 0,
+        edgeColor,
+        edgeIdx: edges.indexOf(edge)
+      });
+    }
+  }
+  placeEdgeLabels(pendingLabels, edges, obstacleRects);
+  for (const lbl of pendingLabels) {
+    lbl.edgeG.append("rect").attr("x", lbl.x - lbl.bgW / 2).attr("y", lbl.y - lbl.bgH / 2).attr("width", lbl.bgW).attr("height", lbl.bgH).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.9).attr("class", "c4-edge-label-bg");
+    let textY = lbl.y;
+    if (lbl.labelText && lbl.techText) {
+      textY = lbl.y - 4;
+    }
+    if (lbl.labelText) {
+      lbl.edgeG.append("text").attr("x", lbl.x).attr("y", textY + 4).attr("text-anchor", "middle").attr("fill", lbl.edgeColor).attr("font-size", EDGE_LABEL_FONT_SIZE).attr("class", "c4-edge-label").text(lbl.labelText);
+    }
+    if (lbl.techText) {
+      lbl.edgeG.append("text").attr("x", lbl.x).attr("y", lbl.labelText ? textY + 18 : textY + 4).attr("text-anchor", "middle").attr("fill", lbl.edgeColor).attr("font-size", TECH_FONT_SIZE).attr("font-style", "italic").attr("class", "c4-edge-tech").text(lbl.techText);
+    }
+  }
+}
+function interpolateAlongPath(points, t) {
+  if (points.length < 2) return points[0];
+  let totalLen = 0;
+  for (let i = 1; i < points.length; i++) {
+    const dx = points[i].x - points[i - 1].x;
+    const dy = points[i].y - points[i - 1].y;
+    totalLen += Math.sqrt(dx * dx + dy * dy);
+  }
+  const targetLen = t * totalLen;
+  let accumulated = 0;
+  for (let i = 1; i < points.length; i++) {
+    const dx = points[i].x - points[i - 1].x;
+    const dy = points[i].y - points[i - 1].y;
+    const segLen = Math.sqrt(dx * dx + dy * dy);
+    if (accumulated + segLen >= targetLen) {
+      const segT = segLen > 0 ? (targetLen - accumulated) / segLen : 0;
+      return {
+        x: points[i - 1].x + dx * segT,
+        y: points[i - 1].y + dy * segT
+      };
+    }
+    accumulated += segLen;
+  }
+  return points[points.length - 1];
+}
+function pointToSegmentDist(p, a, b) {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  const lenSq = dx * dx + dy * dy;
+  if (lenSq === 0) {
+    const ex2 = p.x - a.x;
+    const ey2 = p.y - a.y;
+    return Math.sqrt(ex2 * ex2 + ey2 * ey2);
+  }
+  let t = ((p.x - a.x) * dx + (p.y - a.y) * dy) / lenSq;
+  t = Math.max(0, Math.min(1, t));
+  const projX = a.x + t * dx;
+  const projY = a.y + t * dy;
+  const ex = p.x - projX;
+  const ey = p.y - projY;
+  return Math.sqrt(ex * ex + ey * ey);
+}
+function pointToPolylineDist(p, points) {
+  let minDist = Infinity;
+  for (let i = 1; i < points.length; i++) {
+    const d = pointToSegmentDist(p, points[i - 1], points[i]);
+    if (d < minDist) minDist = d;
+  }
+  return minDist;
+}
+function rectsOverlap(ax, ay, aw, ah, bx, by, bw, bh, pad) {
+  return !(ax + aw / 2 + pad < bx - bw / 2 - pad || bx + bw / 2 + pad < ax - aw / 2 - pad || ay + ah / 2 + pad < by - bh / 2 - pad || by + bh / 2 + pad < ay - ah / 2 - pad);
+}
+function tangentAt(points, t) {
+  if (points.length < 2) return { x: 0, y: 1 };
+  let totalLen = 0;
+  for (let i = 1; i < points.length; i++) {
+    const dx = points[i].x - points[i - 1].x;
+    const dy = points[i].y - points[i - 1].y;
+    totalLen += Math.sqrt(dx * dx + dy * dy);
+  }
+  const targetLen = t * totalLen;
+  let accumulated = 0;
+  for (let i = 1; i < points.length; i++) {
+    const dx = points[i].x - points[i - 1].x;
+    const dy = points[i].y - points[i - 1].y;
+    const segLen = Math.sqrt(dx * dx + dy * dy);
+    if (accumulated + segLen >= targetLen || i === points.length - 1) {
+      return { x: dx, y: dy };
+    }
+    accumulated += segLen;
+  }
+  return { x: 0, y: 1 };
+}
+function placeEdgeLabels(labels, edges, obstacleRects) {
+  if (labels.length === 0) return;
+  const allPaths = edges.map((e) => e.points);
+  const placedRects = [];
+  const SAMPLES = [0.4, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9];
+  const candidates = labels.map((lbl) => {
+    const ownPath = allPaths[lbl.edgeIdx];
+    return SAMPLES.map((t) => ({ pt: interpolateAlongPath(ownPath, t), t }));
+  });
+  const order = labels.map((_, i) => i);
+  order.sort((a, b) => {
+    const midA = interpolateAlongPath(allPaths[labels[a].edgeIdx], 0.5);
+    const midB = interpolateAlongPath(allPaths[labels[b].edgeIdx], 0.5);
+    let nearA = 0, nearB = 0;
+    for (let e = 0; e < allPaths.length; e++) {
+      if (e === labels[a].edgeIdx) continue;
+      if (pointToPolylineDist(midA, allPaths[e]) < 100) nearA++;
+    }
+    for (let e = 0; e < allPaths.length; e++) {
+      if (e === labels[b].edgeIdx) continue;
+      if (pointToPolylineDist(midB, allPaths[e]) < 100) nearB++;
+    }
+    return nearB - nearA;
+  });
+  for (const idx of order) {
+    const lbl = labels[idx];
+    const ownEdgeIdx = lbl.edgeIdx;
+    const ownPath = allPaths[ownEdgeIdx];
+    const cands = candidates[idx];
+    let bestScore = -Infinity;
+    let bestPt = cands[Math.floor(cands.length / 2)].pt;
+    let bestT = 0.5;
+    for (const { pt, t } of cands) {
+      let minEdgeDist = Infinity;
+      for (let e = 0; e < allPaths.length; e++) {
+        if (e === ownEdgeIdx) continue;
+        const d = pointToPolylineDist(pt, allPaths[e]);
+        if (d < minEdgeDist) minEdgeDist = d;
+      }
+      let labelOverlapPenalty = 0;
+      for (const placed of placedRects) {
+        if (rectsOverlap(
+          pt.x,
+          pt.y,
+          lbl.bgW,
+          lbl.bgH,
+          placed.x,
+          placed.y,
+          placed.w,
+          placed.h,
+          6
+        )) {
+          labelOverlapPenalty += 200;
+        }
+      }
+      if (obstacleRects) {
+        for (const obs of obstacleRects) {
+          if (rectsOverlap(
+            pt.x,
+            pt.y,
+            lbl.bgW,
+            lbl.bgH,
+            obs.x + obs.w / 2,
+            obs.y + obs.h / 2,
+            obs.w,
+            obs.h,
+            6
+          )) {
+            labelOverlapPenalty += 200;
+          }
+        }
+      }
+      const score = minEdgeDist - labelOverlapPenalty;
+      if (score > bestScore) {
+        bestScore = score;
+        bestPt = pt;
+        bestT = t;
+      }
+    }
+    const tan = tangentAt(ownPath, bestT);
+    const tLen = Math.sqrt(tan.x * tan.x + tan.y * tan.y);
+    if (tLen > 0) {
+      const nx = -tan.y / tLen;
+      const ny = tan.x / tLen;
+      const offsetDist = lbl.bgH / 2 + 4;
+      const sideA = {
+        x: bestPt.x + nx * offsetDist,
+        y: bestPt.y + ny * offsetDist
+      };
+      const sideB = {
+        x: bestPt.x - nx * offsetDist,
+        y: bestPt.y - ny * offsetDist
+      };
+      let scoreA = Infinity, scoreB = Infinity;
+      for (let e = 0; e < allPaths.length; e++) {
+        if (e === ownEdgeIdx) continue;
+        scoreA = Math.min(scoreA, pointToPolylineDist(sideA, allPaths[e]));
+        scoreB = Math.min(scoreB, pointToPolylineDist(sideB, allPaths[e]));
+      }
+      for (const placed of placedRects) {
+        if (rectsOverlap(
+          sideA.x,
+          sideA.y,
+          lbl.bgW,
+          lbl.bgH,
+          placed.x,
+          placed.y,
+          placed.w,
+          placed.h,
+          6
+        )) {
+          scoreA -= 200;
+        }
+        if (rectsOverlap(
+          sideB.x,
+          sideB.y,
+          lbl.bgW,
+          lbl.bgH,
+          placed.x,
+          placed.y,
+          placed.w,
+          placed.h,
+          6
+        )) {
+          scoreB -= 200;
+        }
+      }
+      if (obstacleRects) {
+        for (const obs of obstacleRects) {
+          const cx = obs.x + obs.w / 2, cy = obs.y + obs.h / 2;
+          if (rectsOverlap(
+            sideA.x,
+            sideA.y,
+            lbl.bgW,
+            lbl.bgH,
+            cx,
+            cy,
+            obs.w,
+            obs.h,
+            6
+          )) {
+            scoreA -= 200;
+          }
+          if (rectsOverlap(
+            sideB.x,
+            sideB.y,
+            lbl.bgW,
+            lbl.bgH,
+            cx,
+            cy,
+            obs.w,
+            obs.h,
+            6
+          )) {
+            scoreB -= 200;
+          }
+        }
+      }
+      const finalPt = scoreA >= scoreB ? sideA : sideB;
+      lbl.x = finalPt.x;
+      lbl.y = finalPt.y;
+    } else {
+      lbl.x = bestPt.x;
+      lbl.y = bestPt.y;
+    }
+    placedRects.push({ x: lbl.x, y: lbl.y, w: lbl.bgW, h: lbl.bgH });
+  }
+}
+function renderLegend(parent, layout, palette, isDark, activeTagGroup, fixedWidth, exportMode) {
+  const groups = layout.legend.map((g) => ({
+    name: g.name,
+    entries: g.entries.map((e) => ({ value: e.value, color: e.color }))
+  }));
+  const containerWidth = fixedWidth ?? layout.width;
+  renderIntegratedLegend(parent, {
+    groups,
+    activeGroup: activeTagGroup ?? null,
+    mode: exportMode ? "export" : "preview",
+    palette,
+    isDark,
+    width: containerWidth
+  });
+  parent.selectAll("[data-legend-group]").classed("c4-legend-group", true);
+}
+function renderC4Containers(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, exportMode) {
+  d3Selection.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
+  if (width <= 0 || height <= 0) return;
+  const titleHeight = parsed.title && parsed.options["no-title"] !== "on" ? TITLE_HEIGHT + 10 : 0;
+  const diagramW = layout.width;
+  const hasLegend = layout.legend.length > 0;
+  const C4_LAYOUT_MARGIN = 40;
+  const LEGEND_FIXED_GAP = 8;
+  const fixedLegend = !exportDims && hasLegend;
+  const legendLayoutSpace = C4_LAYOUT_MARGIN + LEGEND_HEIGHT;
+  const legendReserveH = fixedLegend ? LEGEND_HEIGHT + LEGEND_FIXED_GAP : 0;
+  const diagramH = fixedLegend ? layout.height - legendLayoutSpace : layout.height;
+  const availH = height - titleHeight - legendReserveH;
+  const scaleX = (width - DIAGRAM_PADDING * 2) / diagramW;
+  const scaleY = (availH - DIAGRAM_PADDING * 2) / diagramH;
+  const scale = Math.min(MAX_SCALE, scaleX, scaleY);
+  const scaledW = diagramW * scale;
+  const offsetX = (width - scaledW) / 2;
+  const offsetY = titleHeight + DIAGRAM_PADDING + legendReserveH;
+  const svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMid meet").style("font-family", FONT_FAMILY);
+  const defs = svg.append("defs");
+  const AW = 10;
+  const AH = 7;
+  defs.append("marker").attr("id", "c4-arrow-end").attr("viewBox", `0 0 ${AW} ${AH}`).attr("refX", AW).attr("refY", AH / 2).attr("markerWidth", AW).attr("markerHeight", AH).attr("orient", "auto").append("polygon").attr("points", `0,0 ${AW},${AH / 2} 0,${AH}`).attr("fill", palette.textMuted);
+  defs.append("marker").attr("id", "c4-arrow-start").attr("viewBox", `0 0 ${AW} ${AH}`).attr("refX", 0).attr("refY", AH / 2).attr("markerWidth", AW).attr("markerHeight", AH).attr("orient", "auto").append("polygon").attr("points", `${AW},0 0,${AH / 2} ${AW},${AH}`).attr("fill", palette.textMuted);
+  if (parsed.title && parsed.options["no-title"] !== "on") {
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).style(
+      "cursor",
+      onClickItem && parsed.titleLineNumber ? "pointer" : "default"
+    ).text(parsed.title);
+    if (parsed.titleLineNumber) {
+      titleEl.attr("data-line-number", parsed.titleLineNumber);
+      if (onClickItem) {
+        titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
+          d3Selection.select(this).attr("opacity", 0.7);
+        }).on("mouseleave", function() {
+          d3Selection.select(this).attr("opacity", 1);
+        });
+      }
+    }
+  }
+  const contentG = svg.append("g").attr("transform", `translate(${offsetX}, ${offsetY}) scale(${scale})`);
+  if (layout.boundary) {
+    const b = layout.boundary;
+    const boundaryFill = mix(palette.surface, palette.bg, 30);
+    const boundaryStroke = mix(palette.textMuted, palette.bg, 50);
+    const boundaryG = contentG.append("g").attr("class", "c4-boundary").attr("data-line-number", String(b.lineNumber));
+    if (onClickItem) {
+      boundaryG.style("cursor", "pointer").on("click", () => {
+        onClickItem(b.lineNumber);
+      });
+    }
+    boundaryG.append("rect").attr("x", b.x).attr("y", b.y).attr("width", b.width).attr("height", b.height).attr("rx", BOUNDARY_RADIUS).attr("ry", BOUNDARY_RADIUS).attr("fill", boundaryFill).attr("stroke", boundaryStroke).attr("stroke-width", BOUNDARY_STROKE_WIDTH);
+    boundaryG.append("text").attr("x", b.x + 12).attr("y", b.y + 16).attr("fill", palette.textMuted).attr("font-size", BOUNDARY_LABEL_FONT_SIZE).attr("font-style", "italic").text(`${b.label} \u2014 ${b.typeLabel}`);
+  }
+  if (layout.groupBoundaries.length > 0) {
+    const groupFill = mix(palette.surface, palette.bg, 15);
+    const groupStroke = mix(palette.textMuted, palette.bg, 60);
+    for (const gb of layout.groupBoundaries) {
+      const gbG = contentG.append("g").attr("class", "c4-group-boundary").attr("data-line-number", String(gb.lineNumber));
+      if (onClickItem) {
+        gbG.style("cursor", "pointer").on("click", () => {
+          onClickItem(gb.lineNumber);
+        });
+      }
+      gbG.append("rect").attr("x", gb.x).attr("y", gb.y).attr("width", gb.width).attr("height", gb.height).attr("rx", 6).attr("ry", 6).attr("fill", groupFill).attr("stroke", groupStroke).attr("stroke-width", 1);
+      gbG.append("text").attr("x", gb.x + 10).attr("y", gb.y + 14).attr("fill", palette.textMuted).attr("font-size", BOUNDARY_LABEL_FONT_SIZE).attr("font-style", "italic").text(gb.label);
+    }
+  }
+  const boundaryLabelObstacles = [];
+  if (layout.boundary) {
+    const b = layout.boundary;
+    const labelText = `${b.label} \u2014 ${b.typeLabel}`;
+    const w = measureText(labelText, BOUNDARY_LABEL_FONT_SIZE) + 12;
+    const h = BOUNDARY_LABEL_FONT_SIZE + 4;
+    boundaryLabelObstacles.push({ x: b.x + 12, y: b.y + 16 - h + 4, w, h });
+  }
+  for (const gb of layout.groupBoundaries) {
+    const w = measureText(gb.label, BOUNDARY_LABEL_FONT_SIZE) + 12;
+    const h = BOUNDARY_LABEL_FONT_SIZE + 4;
+    boundaryLabelObstacles.push({ x: gb.x + 10, y: gb.y + 14 - h + 4, w, h });
+  }
+  renderEdges(
+    contentG,
+    layout.edges,
+    palette,
+    onClickItem,
+    boundaryLabelObstacles
+  );
+  for (const node of layout.nodes) {
+    const nodeG = contentG.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("class", "c4-card").attr("data-line-number", String(node.lineNumber)).attr("data-node-id", node.id);
+    if (activeTagGroup) {
+      const tagKey = tagAttrKey(activeTagGroup);
+      const tagValue = node.metadata[tagKey];
+      if (tagValue) {
+        nodeG.attr(`data-tag-${tagKey}`, tagValue.toLowerCase());
+      } else {
+        const tagGroup = parsed.tagGroups.find(
+          (g) => g.name.toLowerCase() === tagKey || g.alias?.toLowerCase() === tagKey
+        );
+        if (tagGroup?.defaultValue) {
+          nodeG.attr(`data-tag-${tagKey}`, tagGroup.defaultValue.toLowerCase());
+        }
+      }
+    }
+    if (node.shape) {
+      nodeG.attr("data-shape", node.shape);
+    }
+    if (node.importPath) {
+      nodeG.attr("data-import-path", node.importPath);
+    }
+    if (onClickItem) {
+      nodeG.style("cursor", "pointer").on("click", () => {
+        onClickItem(node.lineNumber);
+      });
+    }
+    const w = node.width;
+    const h = node.height;
+    const solid = parsed.options["solid-fill"] === "on";
+    const fill = nodeFill(palette, isDark, node.type, node.color, solid);
+    const stroke = nodeStroke(palette, node.type, node.color);
+    const onFillText = contrastText(
+      fill,
+      palette.textOnFillLight,
+      palette.textOnFillDark
+    );
+    const shape = node.shape ?? "default";
+    const isExternalShape = shape === "external";
+    if (shape === "database" || shape === "cache") {
+      drawCylinderCard(
+        nodeG,
+        w,
+        h,
+        fill,
+        stroke,
+        shape === "cache"
+      );
+    } else {
+      drawCardRect(nodeG, w, h, fill, stroke, isExternalShape);
+    }
+    let yPos = -h / 2 + CARD_V_PAD;
+    if (shape === "database" || shape === "cache") {
+      yPos += CYLINDER_RY;
+    }
+    if (node.type !== "container" && node.type !== "component") {
+      const typeLabel = `\xAB${node.type}\xBB`;
+      nodeG.append("text").attr("x", 0).attr("y", yPos + TYPE_FONT_SIZE / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", TYPE_FONT_SIZE).attr("font-style", "italic").text(typeLabel);
+      yPos += TYPE_LABEL_HEIGHT;
+    }
+    if (node.type === "person") {
+      const textWidth = measureText(node.name, NAME_FONT_SIZE);
+      const gap = 6;
+      const totalWidth = PERSON_ICON_W + gap + textWidth;
+      const iconCx = -totalWidth / 2 + PERSON_ICON_W / 2;
+      const textX = iconCx + PERSON_ICON_W / 2 + gap;
+      drawPersonIcon(
+        nodeG,
+        iconCx,
+        yPos + NAME_FONT_SIZE / 2 - 2,
+        stroke
+      );
+      nodeG.append("text").attr("x", textX).attr("y", yPos + NAME_FONT_SIZE / 2).attr("text-anchor", "start").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", NAME_FONT_SIZE).attr("font-weight", "bold").text(node.name);
+    } else {
+      nodeG.append("text").attr("x", 0).attr("y", yPos + NAME_FONT_SIZE / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", NAME_FONT_SIZE).attr("font-weight", "bold").text(node.name);
+    }
+    yPos += NAME_HEIGHT;
+    if (node.type === "container") {
+      if (node.description) {
+        const contentWidth = w - CARD_H_PAD * 2;
+        const lines = wrapTextToWidth(
+          node.description,
+          DESC_FONT_SIZE,
+          contentWidth
+        );
+        for (const line2 of lines) {
+          const textEl = nodeG.append("text").attr("x", 0).attr("y", yPos + DESC_FONT_SIZE / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", DESC_FONT_SIZE);
+          renderInlineText(
+            textEl,
+            preprocessDescriptionLine(line2),
+            palette,
+            DESC_FONT_SIZE
+          );
+          yPos += DESC_LINE_HEIGHT;
+        }
+      }
+      const metaEntries = collectCardMetadata(node.metadata);
+      if (metaEntries.length > 0) {
+        nodeG.append("line").attr("x1", -w / 2 + CARD_H_PAD / 2).attr("y1", yPos).attr("x2", w / 2 - CARD_H_PAD / 2).attr("y2", yPos).attr("stroke", solid ? onFillText : stroke).attr("stroke-width", 0.5).attr("stroke-opacity", 0.4);
+        yPos += DIVIDER_GAP;
+        const maxKeyWidth = Math.max(
+          ...metaEntries.map((e) => measureText(`${e.key}: `, META_FONT_SIZE))
+        );
+        const valueX = -w / 2 + CARD_H_PAD + maxKeyWidth;
+        for (const entry of metaEntries) {
+          nodeG.append("text").attr("x", -w / 2 + CARD_H_PAD).attr("y", yPos + META_FONT_SIZE / 2).attr("text-anchor", "start").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", META_FONT_SIZE).text(`${entry.key}:`);
+          nodeG.append("text").attr("x", valueX).attr("y", yPos + META_FONT_SIZE / 2).attr("text-anchor", "start").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", META_FONT_SIZE).text(entry.value);
+          yPos += META_LINE_HEIGHT;
+        }
+      }
+    } else {
+      nodeG.append("line").attr("x1", -w / 2 + CARD_H_PAD / 2).attr("y1", yPos).attr("x2", w / 2 - CARD_H_PAD / 2).attr("y2", yPos).attr("stroke", solid ? onFillText : stroke).attr("stroke-width", 0.5).attr("stroke-opacity", 0.4);
+      yPos += DIVIDER_GAP;
+      if (node.description) {
+        const contentWidth = w - CARD_H_PAD * 2;
+        const lines = wrapTextToWidth(
+          node.description,
+          DESC_FONT_SIZE,
+          contentWidth
+        );
+        for (const line2 of lines) {
+          const textEl = nodeG.append("text").attr("x", 0).attr("y", yPos + DESC_FONT_SIZE / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", DESC_FONT_SIZE);
+          renderInlineText(
+            textEl,
+            preprocessDescriptionLine(line2),
+            palette,
+            DESC_FONT_SIZE
+          );
+          yPos += DESC_LINE_HEIGHT;
+        }
+      }
+    }
+    if (node.drillable) {
+      const clipId = `clip-drill-${node.id.replace(/\s+/g, "-")}`;
+      nodeG.append("clipPath").attr("id", clipId).append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", CARD_RADIUS);
+      nodeG.append("rect").attr("x", -w / 2).attr("y", h / 2 - DRILL_BAR_HEIGHT).attr("width", w).attr("height", DRILL_BAR_HEIGHT).attr("fill", solid ? onFillText : stroke).attr("clip-path", `url(#${clipId})`).attr("class", "c4-drill-bar");
+    }
+  }
+  if (hasLegend) {
+    const legendParent = fixedLegend ? svg.append("g").attr("class", "c4-legend-fixed").attr("transform", `translate(0, ${DIAGRAM_PADDING + titleHeight})`) : contentG.append("g").attr("class", "c4-legend");
+    if (activeTagGroup) {
+      legendParent.attr("data-legend-active", tagAttrKey(activeTagGroup));
+    }
+    renderLegend(
+      legendParent,
+      layout,
+      palette,
+      isDark,
+      activeTagGroup,
+      fixedLegend ? width : null,
+      exportMode
+    );
+  }
+}
+function renderC4ContainersForExport(content, systemName, theme, palette) {
+  const parsed = parseC4(content, palette);
+  if (parsed.error || parsed.elements.length === 0) return "";
+  const layout = layoutC4Containers(parsed, systemName);
+  if (layout.nodes.length === 0) return "";
+  const isDark = theme === "dark";
+  const el = document.createElement("div");
+  const titleOffset = parsed.title && parsed.options["no-title"] !== "on" ? TITLE_HEIGHT + 10 : 0;
+  const exportWidth = layout.width + DIAGRAM_PADDING * 2;
+  const exportHeight = layout.height + DIAGRAM_PADDING * 2 + titleOffset;
+  el.style.width = `${exportWidth}px`;
+  el.style.height = `${exportHeight}px`;
+  el.style.position = "absolute";
+  el.style.left = "-9999px";
+  document.body.appendChild(el);
+  try {
+    renderC4Containers(el, parsed, layout, palette, isDark, void 0, {
+      width: exportWidth,
+      height: exportHeight
+    });
+    const svgEl = el.querySelector("svg");
+    if (!svgEl) return "";
+    if (theme === "transparent") {
+      svgEl.style.background = "none";
+    }
+    svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svgEl.style.fontFamily = FONT_FAMILY;
+    return svgEl.outerHTML;
+  } finally {
+    document.body.removeChild(el);
+  }
+}
+function renderC4ComponentsForExport(content, systemName, containerName, theme, palette) {
+  const parsed = parseC4(content, palette);
+  if (parsed.error || parsed.elements.length === 0) return "";
+  const layout = layoutC4Components(parsed, systemName, containerName);
+  if (layout.nodes.length === 0) return "";
+  const isDark = theme === "dark";
+  const el = document.createElement("div");
+  const titleOffset = parsed.title && parsed.options["no-title"] !== "on" ? TITLE_HEIGHT + 10 : 0;
+  const exportWidth = layout.width + DIAGRAM_PADDING * 2;
+  const exportHeight = layout.height + DIAGRAM_PADDING * 2 + titleOffset;
+  el.style.width = `${exportWidth}px`;
+  el.style.height = `${exportHeight}px`;
+  el.style.position = "absolute";
+  el.style.left = "-9999px";
+  document.body.appendChild(el);
+  try {
+    renderC4Containers(el, parsed, layout, palette, isDark, void 0, {
+      width: exportWidth,
+      height: exportHeight
+    });
+    const svgEl = el.querySelector("svg");
+    if (!svgEl) return "";
+    if (theme === "transparent") {
+      svgEl.style.background = "none";
+    }
+    svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svgEl.style.fontFamily = FONT_FAMILY;
+    return svgEl.outerHTML;
+  } finally {
+    document.body.removeChild(el);
+  }
+}
+function renderC4Deployment(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, exportMode) {
+  renderC4Containers(
+    container,
+    parsed,
+    layout,
+    palette,
+    isDark,
+    onClickItem,
+    exportDims,
+    activeTagGroup,
+    exportMode
+  );
+}
+function renderC4DeploymentForExport(content, theme, palette) {
+  const parsed = parseC4(content, palette);
+  if (parsed.error || parsed.deployment.length === 0) return "";
+  const layout = layoutC4Deployment(parsed);
+  if (layout.nodes.length === 0) return "";
+  const isDark = theme === "dark";
+  const el = document.createElement("div");
+  const titleOffset = parsed.title && parsed.options["no-title"] !== "on" ? TITLE_HEIGHT + 10 : 0;
+  const exportWidth = layout.width + DIAGRAM_PADDING * 2;
+  const exportHeight = layout.height + DIAGRAM_PADDING * 2 + titleOffset;
+  el.style.width = `${exportWidth}px`;
+  el.style.height = `${exportHeight}px`;
+  el.style.position = "absolute";
+  el.style.left = "-9999px";
+  document.body.appendChild(el);
+  try {
+    renderC4Containers(el, parsed, layout, palette, isDark, void 0, {
+      width: exportWidth,
+      height: exportHeight
+    });
+    const svgEl = el.querySelector("svg");
+    if (!svgEl) return "";
+    if (theme === "transparent") {
+      svgEl.style.background = "none";
+    }
+    svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svgEl.style.fontFamily = FONT_FAMILY;
+    return svgEl.outerHTML;
+  } finally {
+    document.body.removeChild(el);
+  }
+}
+
+export {
+  renderC4Context,
+  renderC4ContextForExport,
+  renderC4Containers,
+  renderC4ContainersForExport,
+  renderC4ComponentsForExport,
+  renderC4Deployment,
+  renderC4DeploymentForExport
+};
+//# sourceMappingURL=chunk-P4RH4OSP.js.map