@diagrammo/dgmo 0.45.0 → 0.47.0

package/dist/chunk-PBHE5UG6.js

@@ -0,0 +1,1530 @@
+import {
+  computeInfra
+} from "./chunk-A44USUV7.js";
+import {
+  layoutInfra
+} from "./chunk-Y2ZE3MSG.js";
+import {
+  renderInlineText
+} from "./chunk-3HDBAXF5.js";
+import {
+  COLLAPSE_BAR_HEIGHT,
+  COLLAPSE_BAR_INSET,
+  EDGE_STROKE_WIDTH,
+  NODE_STROKE_WIDTH
+} from "./chunk-3CIOJ5YJ.js";
+import {
+  renderIntegratedLegend
+} from "./chunk-PWIHZ6NJ.js";
+import {
+  ScaleContext
+} from "./chunk-YYVTBZZC.js";
+import {
+  getMaxLegendReservedHeight
+} from "./chunk-YAA6IID3.js";
+import {
+  TITLE_FONT_SIZE,
+  TITLE_FONT_WEIGHT,
+  TITLE_OFFSET,
+  TITLE_Y
+} from "./chunk-A4GOY3PE.js";
+import {
+  FONT_FAMILY
+} from "./chunk-6KFWC4CO.js";
+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 {
+  CHAR_WIDTH_RATIO,
+  measureText,
+  truncateText
+} from "./chunk-WCT3NYCV.js";
+import {
+  parseInfra
+} from "./chunk-33LCUH4H.js";
+import {
+  preprocessDescriptionLine
+} from "./chunk-IYULMRBE.js";
+import {
+  contrastText,
+  mix,
+  shapeFill
+} from "./chunk-P6T66CCZ.js";
+import {
+  tagAttrKey
+} from "./chunk-QLCCJEJI.js";
+import {
+  resolveColor
+} from "./chunk-TLVIHFRO.js";
+
+// src/infra/renderer.ts
+import * as d3Selection from "d3-selection";
+import * as d3Shape from "d3-shape";
+
+// src/infra/roles.ts
+var ROLE_RULES = [
+  { keys: ["cache-hit"], role: { name: "Cache", color: "#22c55e" } },
+  { keys: ["firewall-block"], role: { name: "Firewall", color: "#ef4444" } },
+  { keys: ["ratelimit-rps"], role: { name: "Rate Limiter", color: "#eab308" } },
+  { keys: ["max-rps"], role: { name: "Service", color: "#3b82f6" } },
+  { keys: ["cb-error-threshold", "cb-latency-threshold-ms"], role: { name: "Circuit Breaker", color: "#a855f7" } },
+  { keys: ["concurrency"], role: { name: "Serverless", color: "#06b6d4" } },
+  { keys: ["buffer"], role: { name: "Queue", color: "#8b5cf6" } }
+];
+function inferRoles(properties) {
+  const propKeys = new Set(properties.map((p) => p.key));
+  const roles = [];
+  for (const rule of ROLE_RULES) {
+    if (rule.keys.some((k) => propKeys.has(k))) {
+      roles.push(rule.role);
+    }
+  }
+  return roles;
+}
+var FANOUT_ROLE = { name: "Fan-Out", color: "#f97316" };
+function collectFanoutSourceIds(edges) {
+  const ids = /* @__PURE__ */ new Set();
+  for (const e of edges) {
+    if (e.fanout != null) ids.add(e.sourceId);
+  }
+  return ids;
+}
+function collectDiagramRoles(allProperties) {
+  const seen = /* @__PURE__ */ new Set();
+  const roles = [];
+  for (const props of allProperties) {
+    for (const role of inferRoles(props)) {
+      if (!seen.has(role.name)) {
+        seen.add(role.name);
+        roles.push(role);
+      }
+    }
+  }
+  return roles;
+}
+
+// src/infra/renderer.ts
+var NODE_FONT_SIZE = 13;
+var META_FONT_SIZE = 10;
+var META_LINE_HEIGHT = 14;
+var EDGE_LABEL_FONT_SIZE = 11;
+var GROUP_LABEL_FONT_SIZE = 14;
+var NODE_BORDER_RADIUS = 8;
+var OVERLOAD_STROKE_WIDTH = 3;
+var ROLE_DOT_RADIUS = 3;
+var NODE_HEADER_HEIGHT = 28;
+var NODE_SEPARATOR_GAP = 4;
+var NODE_PAD_BOTTOM = 10;
+var LEGEND_FIXED_GAP = 16;
+var SPEED_BADGE_H_PAD = 5;
+var SPEED_BADGE_V_PAD = 3;
+var SPEED_BADGE_GAP = 6;
+function buildScaledConstants(ctx) {
+  return {
+    sNodeFontSize: ctx.text(NODE_FONT_SIZE),
+    sMetaFontSize: ctx.text(META_FONT_SIZE),
+    sMetaLineHeight: ctx.structural(META_LINE_HEIGHT),
+    sEdgeLabelFontSize: ctx.text(EDGE_LABEL_FONT_SIZE),
+    sGroupLabelFontSize: ctx.text(GROUP_LABEL_FONT_SIZE),
+    sNodeBorderRadius: ctx.structural(NODE_BORDER_RADIUS),
+    sEdgeStrokeWidth: ctx.structural(EDGE_STROKE_WIDTH),
+    sNodeStrokeWidth: ctx.structural(NODE_STROKE_WIDTH),
+    sOverloadStrokeWidth: ctx.structural(OVERLOAD_STROKE_WIDTH),
+    sRoleDotRadius: ctx.structural(ROLE_DOT_RADIUS),
+    sNodeSeparatorGap: ctx.structural(NODE_SEPARATOR_GAP),
+    sNodePadBottom: ctx.structural(NODE_PAD_BOTTOM),
+    sCollapseBarHeight: ctx.structural(COLLAPSE_BAR_HEIGHT),
+    sCollapseBarInset: ctx.structural(COLLAPSE_BAR_INSET),
+    sParticleR: ctx.structural(PARTICLE_R),
+    sRejectParticleR: ctx.structural(PARTICLE_R),
+    sRejectDropDistance: ctx.structural(REJECT_DROP_DISTANCE),
+    sTitleFontSize: ctx.text(TITLE_FONT_SIZE),
+    sTitleY: ctx.structural(TITLE_Y),
+    sLegendFixedGap: ctx.aesthetic(LEGEND_FIXED_GAP)
+  };
+}
+var COLOR_HEALTHY = "#22c55e";
+var COLOR_WARNING = "#eab308";
+var COLOR_OVERLOADED = "#ef4444";
+function resolveNodeSlo(node, diagramOptions) {
+  const nodeProp = (key) => node.properties.find((p) => p.key === key);
+  const availRaw = nodeProp("slo-availability")?.value ?? diagramOptions["slo-availability"];
+  const latencyRaw = nodeProp("slo-p90-latency-ms")?.value ?? diagramOptions["slo-p90-latency-ms"];
+  const marginRaw = nodeProp("slo-warning-margin")?.value ?? diagramOptions["slo-warning-margin"];
+  const availParsed = availRaw != null ? parseFloat(String(availRaw).replace("%", "")) / 100 : NaN;
+  const availThreshold = !isNaN(availParsed) ? availParsed : null;
+  const latencyParsed = latencyRaw != null ? parseFloat(String(latencyRaw)) : NaN;
+  const latencyP90 = !isNaN(latencyParsed) ? latencyParsed : null;
+  const marginParsed = marginRaw != null ? parseFloat(String(marginRaw).replace("%", "")) / 100 : NaN;
+  const warningMargin = !isNaN(marginParsed) ? marginParsed : 0.05;
+  if (availThreshold == null && latencyP90 == null) return null;
+  return { availThreshold, latencyP90, warningMargin };
+}
+var FLOW_SPEED_MIN = 2.5;
+var FLOW_SPEED_MAX = 6;
+var PARTICLE_R = 5;
+var PARTICLE_COUNT_MIN = 1;
+var PARTICLE_COUNT_MAX = 4;
+var NODE_PULSE_SPEED = 1.5;
+var NODE_PULSE_OVERLOAD = 0.7;
+var REJECT_DROP_DISTANCE = 30;
+var REJECT_DURATION_MIN = 1.5;
+var REJECT_DURATION_MAX = 3;
+var REJECT_COUNT_MIN = 1;
+var REJECT_COUNT_MAX = 3;
+function buildPathD(pts, direction) {
+  const gen = d3Shape.line().x((d) => d.x).y((d) => d.y);
+  if (pts.length <= 2) {
+    gen.curve(direction === "TB" ? d3Shape.curveBumpY : d3Shape.curveBumpX);
+  } else {
+    gen.curve(d3Shape.curveCatmullRom.alpha(0.5));
+  }
+  return gen(pts) ?? "";
+}
+function computePortPts(edges, nodeMap, direction) {
+  const srcPts = /* @__PURE__ */ new Map();
+  const tgtPts = /* @__PURE__ */ new Map();
+  const PAD = 0.1;
+  const activeEdges = edges.filter((e) => e.points.length > 0);
+  const bySource = /* @__PURE__ */ new Map();
+  for (const e of activeEdges) {
+    if (!bySource.has(e.sourceId)) bySource.set(e.sourceId, []);
+    bySource.get(e.sourceId).push(e);
+  }
+  for (const [sourceId, es] of bySource) {
+    if (es.length < 2) continue;
+    const source = nodeMap.get(sourceId);
+    if (!source) continue;
+    const sorted = es.map((e) => ({ e, t: nodeMap.get(e.targetId) })).filter(
+      (x) => x.t != null
+    ).sort((a, b) => direction === "LR" ? a.t.y - b.t.y : a.t.x - b.t.x);
+    const n = sorted.length;
+    for (let i = 0; i < n; i++) {
+      const frac = n === 1 ? 0.5 : PAD + (1 - 2 * PAD) * i / (n - 1);
+      const { e, t } = sorted[i];
+      const isBackward = direction === "LR" ? t.x < source.x : t.y < source.y;
+      if (direction === "LR") {
+        srcPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: isBackward ? source.x - source.width / 2 : source.x + source.width / 2,
+          y: source.y - source.height / 2 + frac * source.height
+        });
+      } else {
+        srcPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: source.x - source.width / 2 + frac * source.width,
+          y: isBackward ? source.y - source.height / 2 : source.y + source.height / 2
+        });
+      }
+    }
+  }
+  const byTarget = /* @__PURE__ */ new Map();
+  for (const e of activeEdges) {
+    if (!byTarget.has(e.targetId)) byTarget.set(e.targetId, []);
+    byTarget.get(e.targetId).push(e);
+  }
+  for (const [targetId, es] of byTarget) {
+    if (es.length < 2) continue;
+    const target = nodeMap.get(targetId);
+    if (!target) continue;
+    const sorted = es.map((e) => ({ e, s: nodeMap.get(e.sourceId) })).filter(
+      (x) => x.s != null
+    ).sort((a, b) => direction === "LR" ? a.s.y - b.s.y : a.s.x - b.s.x);
+    const n = sorted.length;
+    for (let i = 0; i < n; i++) {
+      const frac = n === 1 ? 0.5 : PAD + (1 - 2 * PAD) * i / (n - 1);
+      const { e, s } = sorted[i];
+      const isBackward = direction === "LR" ? target.x < s.x : target.y < s.y;
+      if (direction === "LR") {
+        tgtPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: isBackward ? target.x + target.width / 2 : target.x - target.width / 2,
+          y: target.y - target.height / 2 + frac * target.height
+        });
+      } else {
+        tgtPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: target.x - target.width / 2 + frac * target.width,
+          y: isBackward ? target.y + target.height / 2 : target.y - target.height / 2
+        });
+      }
+    }
+  }
+  return { srcPts, tgtPts };
+}
+function findRoutingLane(blocking, targetY, margin) {
+  const MERGE_SLOP = 4;
+  const sorted = [...blocking].sort(
+    (a, b) => a.y + a.height / 2 - (b.y + b.height / 2)
+  );
+  const merged = [];
+  for (const r of sorted) {
+    const lo = r.y - MERGE_SLOP;
+    const hi = r.y + r.height + MERGE_SLOP;
+    if (merged.length && lo <= merged[merged.length - 1][1]) {
+      merged[merged.length - 1][1] = Math.max(
+        merged[merged.length - 1][1],
+        hi
+      );
+    } else {
+      merged.push([lo, hi]);
+    }
+  }
+  if (merged.length === 0) return targetY;
+  const MIN_GAP = 10;
+  const candidates = [
+    // In-bounds: merged.length > 0 guarded above.
+    merged[0][0] - margin,
+    // above all blocking rects
+    merged[merged.length - 1][1] + margin
+    // below all blocking rects
+  ];
+  for (let i = 0; i < merged.length - 1; i++) {
+    const gapLo = merged[i][1];
+    const gapHi = merged[i + 1][0];
+    if (gapHi - gapLo >= MIN_GAP) {
+      candidates.push((gapLo + gapHi) / 2);
+    }
+  }
+  return candidates.reduce(
+    // candidates[0] is a non-empty array (two seed values pushed above).
+    (best, c) => Math.abs(c - targetY) < Math.abs(best - targetY) ? c : best,
+    candidates[0]
+  );
+}
+function segmentIntersectsRect(p1, p2, rect) {
+  const { x: rx, y: ry, width: rw, height: rh } = rect;
+  const rr = rx + rw;
+  const rb = ry + rh;
+  const inRect = (p) => p.x >= rx && p.x <= rr && p.y >= ry && p.y <= rb;
+  if (inRect(p1) || inRect(p2)) return true;
+  if (Math.max(p1.x, p2.x) < rx || Math.min(p1.x, p2.x) > rr) return false;
+  if (Math.max(p1.y, p2.y) < ry || Math.min(p1.y, p2.y) > rb) return false;
+  const cross = (o, a, b) => (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x);
+  const crosses = (a, b) => {
+    const d1 = cross(a, b, p1);
+    const d2 = cross(a, b, p2);
+    const d3 = cross(p1, p2, a);
+    const d4 = cross(p1, p2, b);
+    return (d1 > 0 && d2 < 0 || d1 < 0 && d2 > 0) && (d3 > 0 && d4 < 0 || d3 < 0 && d4 > 0);
+  };
+  const tl = { x: rx, y: ry };
+  const tr = { x: rr, y: ry };
+  const br = { x: rr, y: rb };
+  const bl = { x: rx, y: rb };
+  return crosses(tl, tr) || crosses(tr, br) || crosses(br, bl) || crosses(bl, tl);
+}
+function curveIntersectsRect(sc, tc, rect, direction) {
+  if (direction === "LR") {
+    const midX = (sc.x + tc.x) / 2;
+    const m1 = { x: midX, y: sc.y };
+    const m2 = { x: midX, y: tc.y };
+    return segmentIntersectsRect(sc, m1, rect) || segmentIntersectsRect(m1, m2, rect) || segmentIntersectsRect(m2, tc, rect);
+  } else {
+    const midY = (sc.y + tc.y) / 2;
+    const m1 = { x: sc.x, y: midY };
+    const m2 = { x: tc.x, y: midY };
+    return segmentIntersectsRect(sc, m1, rect) || segmentIntersectsRect(m1, m2, rect) || segmentIntersectsRect(m2, tc, rect);
+  }
+}
+function edgeWaypoints(source, target, groups, nodes, direction, margin = 30, srcExitPt, tgtEnterPt) {
+  const sc = { x: source.x, y: source.y };
+  const tc = { x: target.x, y: target.y };
+  const isBackward = direction === "LR" ? tc.x < sc.x : tc.y < sc.y;
+  if (isBackward) {
+    if (direction === "LR") {
+      const xBandObs = [];
+      for (const g of groups) {
+        if (g.x + g.width < tc.x - margin || g.x > sc.x + margin) continue;
+        xBandObs.push({ x: g.x, y: g.y, width: g.width, height: g.height });
+      }
+      for (const n of nodes) {
+        if (n.id === source.id || n.id === target.id) continue;
+        const nLeft = n.x - n.width / 2;
+        const nRight = n.x + n.width / 2;
+        if (nRight < tc.x - margin || nLeft > sc.x + margin) continue;
+        xBandObs.push({
+          x: nLeft,
+          y: n.y - n.height / 2,
+          width: n.width,
+          height: n.height
+        });
+      }
+      const midY = (sc.y + tc.y) / 2;
+      const routeY2 = xBandObs.length > 0 ? findRoutingLane(xBandObs, midY, margin) : midY;
+      const exitBorder = srcExitPt ?? nodeBorderPoint(source, { x: sc.x, y: routeY2 });
+      const exitPt2 = { x: exitBorder.x, y: routeY2 };
+      const enterPt2 = { x: tc.x, y: routeY2 };
+      const tp2 = tgtEnterPt ?? nodeBorderPoint(target, enterPt2);
+      return srcExitPt ? [srcExitPt, exitPt2, enterPt2, tp2] : [exitBorder, exitPt2, enterPt2, tp2];
+    } else {
+      const yBandObs = [];
+      for (const g of groups) {
+        if (g.y + g.height < tc.y - margin || g.y > sc.y + margin) continue;
+        yBandObs.push({ x: g.x, y: g.y, width: g.width, height: g.height });
+      }
+      for (const n of nodes) {
+        if (n.id === source.id || n.id === target.id) continue;
+        const nTop = n.y - n.height / 2;
+        const nBot = n.y + n.height / 2;
+        if (nBot < tc.y - margin || nTop > sc.y + margin) continue;
+        yBandObs.push({
+          x: n.x - n.width / 2,
+          y: nTop,
+          width: n.width,
+          height: n.height
+        });
+      }
+      const rotated = yBandObs.map((r) => ({
+        x: r.y,
+        y: r.x,
+        width: r.height,
+        height: r.width
+      }));
+      const midX = (sc.x + tc.x) / 2;
+      const routeX = rotated.length > 0 ? findRoutingLane(rotated, midX, margin) : midX;
+      const exitPt2 = srcExitPt ?? { x: routeX, y: sc.y };
+      const enterPt2 = { x: routeX, y: tc.y };
+      return [
+        srcExitPt ?? nodeBorderPoint(source, exitPt2),
+        exitPt2,
+        enterPt2,
+        tgtEnterPt ?? nodeBorderPoint(target, enterPt2)
+      ];
+    }
+  }
+  const blocking = [];
+  const blockingGroupIds = /* @__PURE__ */ new Set();
+  const pathSrc = srcExitPt ?? sc;
+  const pathTgt = tgtEnterPt ?? tc;
+  for (const g of groups) {
+    if (g.id === source.groupId || g.id === target.groupId) continue;
+    const gRect = { x: g.x, y: g.y, width: g.width, height: g.height };
+    if (curveIntersectsRect(pathSrc, pathTgt, gRect, direction)) {
+      blocking.push(gRect);
+      blockingGroupIds.add(g.id);
+    }
+  }
+  for (const n of nodes) {
+    if (n.id === source.id || n.id === target.id) continue;
+    if (n.groupId && (n.groupId === source.groupId || n.groupId === target.groupId))
+      continue;
+    if (n.groupId && blockingGroupIds.has(n.groupId)) continue;
+    const nodeRect = {
+      x: n.x - n.width / 2,
+      y: n.y - n.height / 2,
+      width: n.width,
+      height: n.height
+    };
+    if (curveIntersectsRect(pathSrc, pathTgt, nodeRect, direction)) {
+      blocking.push(nodeRect);
+    }
+  }
+  if (blocking.length === 0) {
+    const sp = srcExitPt ?? nodeBorderPoint(source, tc);
+    const tp2 = tgtEnterPt ?? nodeBorderPoint(target, sp);
+    return [sp, tp2];
+  }
+  const obsLeft = Math.min(...blocking.map((o) => o.x));
+  const obsRight = Math.max(...blocking.map((o) => o.x + o.width));
+  const routeY = findRoutingLane(blocking, tc.y, margin);
+  const exitX = direction === "LR" ? Math.max(sc.x, obsLeft - margin) : obsLeft - margin;
+  const enterX = direction === "LR" ? Math.min(tc.x, obsRight + margin) : obsRight + margin;
+  const exitPt = { x: exitX, y: routeY };
+  const enterPt = { x: enterX, y: routeY };
+  const tp = tgtEnterPt ?? nodeBorderPoint(target, enterPt);
+  if (srcExitPt) {
+    return [srcExitPt, exitPt, enterPt, tp];
+  }
+  return [nodeBorderPoint(source, exitPt), exitPt, enterPt, tp];
+}
+function nodeBorderPoint(node, target) {
+  const hw = node.width / 2;
+  const hh = node.height / 2;
+  const dx = target.x - node.x;
+  const dy = target.y - node.y;
+  if (dx === 0 && dy === 0) return { x: node.x + hw, y: node.y };
+  const sx = hw / Math.abs(dx || 1);
+  const sy = hh / Math.abs(dy || 1);
+  const s = Math.min(sx, sy);
+  return { x: node.x + dx * s, y: node.y + dy * s };
+}
+function flowDuration(rps, maxRps) {
+  if (maxRps <= 0) return FLOW_SPEED_MAX;
+  const t = Math.min(rps / maxRps, 1);
+  return FLOW_SPEED_MAX - t * (FLOW_SPEED_MAX - FLOW_SPEED_MIN);
+}
+function particleCount(rps, maxRps) {
+  if (maxRps <= 0) return PARTICLE_COUNT_MIN;
+  const t = Math.min(rps / maxRps, 1);
+  return Math.round(
+    PARTICLE_COUNT_MIN + t * (PARTICLE_COUNT_MAX - PARTICLE_COUNT_MIN)
+  );
+}
+function isWarning(node) {
+  if (node.overloaded || node.isEdge) return false;
+  const concurrencyProp = node.properties.find((p) => p.key === "concurrency");
+  if (concurrencyProp) {
+    const concurrency = Number(concurrencyProp.value);
+    const durationProp = node.properties.find((p) => p.key === "duration-ms");
+    const durationMs = durationProp ? Number(durationProp.value) : 100;
+    const cap2 = concurrency / (durationMs / 1e3);
+    return cap2 > 0 && node.computedRps / cap2 > 0.7;
+  }
+  const maxRps = node.properties.find((p) => p.key === "max-rps");
+  if (!maxRps) return false;
+  const cap = Number(maxRps.value) * node.computedInstances;
+  return cap > 0 && node.computedRps / cap > 0.7;
+}
+var PROP_DISPLAY = {
+  "cache-hit": "cache hit",
+  "firewall-block": "firewall block",
+  "ratelimit-rps": "rate limit RPS",
+  "latency-ms": "latency",
+  uptime: "uptime",
+  instances: "instances",
+  "max-rps": "max RPS",
+  "cb-error-threshold": "CB error threshold",
+  "cb-latency-threshold-ms": "CB latency threshold",
+  concurrency: "concurrency",
+  "duration-ms": "duration",
+  "cold-start-ms": "cold start",
+  buffer: "buffer",
+  "drain-rate": "drain rate",
+  "retention-hours": "retention",
+  partitions: "partitions"
+};
+var DESC_MAX_CHARS = 120;
+var DESC_MAX_WIDTH = DESC_MAX_CHARS * CHAR_WIDTH_RATIO * META_FONT_SIZE;
+function truncateDesc(text) {
+  return truncateText(text, META_FONT_SIZE, DESC_MAX_WIDTH);
+}
+var RPS_FORMAT_KEYS = /* @__PURE__ */ new Set(["max-rps", "ratelimit-rps"]);
+var MS_FORMAT_KEYS = /* @__PURE__ */ new Set([
+  "latency-ms",
+  "cb-latency-threshold-ms",
+  "duration-ms",
+  "cold-start-ms"
+]);
+var PCT_FORMAT_KEYS = /* @__PURE__ */ new Set([
+  "cache-hit",
+  "firewall-block",
+  "uptime",
+  "cb-error-threshold"
+]);
+function sloLatencyColor(p90, slo) {
+  const t = slo.latencyP90 ?? 0;
+  if (t === 0) return COLOR_HEALTHY;
+  const m = slo.warningMargin;
+  return p90 > t ? COLOR_OVERLOADED : p90 > t * (1 - m) ? COLOR_WARNING : COLOR_HEALTHY;
+}
+function getComputedRows(node, expanded, slo) {
+  const rows = [];
+  if (node.computedConcurrentInvocations > 0) {
+    const concurrency = getNodeNumProp(node, "concurrency", 0);
+    const demand = node.computedConcurrentInvocations;
+    const ratio = concurrency > 0 ? demand / concurrency : 0;
+    const color = ratio > 1 ? COLOR_OVERLOADED : ratio > 0.7 ? COLOR_WARNING : void 0;
+    const value = concurrency > 0 ? `${formatCount(demand)} / ${formatCount(concurrency)}` : `${formatCount(demand)}`;
+    rows.push({
+      key: "instances",
+      value,
+      ...color !== void 0 && { color },
+      inverted: color != null
+    });
+  }
+  const p = node.computedLatencyPercentiles;
+  if (p.p50 > 0 || p.p90 > 0 || p.p99 > 0) {
+    if (expanded) {
+      rows.push({ key: "p50", value: formatMsShort(p.p50) });
+      if (slo?.latencyP90 != null) {
+        const color = sloLatencyColor(p.p90, slo);
+        const p90Value = color !== COLOR_HEALTHY ? `${formatMsShort(p.p90)} / ${formatMsShort(slo.latencyP90)}` : formatMsShort(p.p90);
+        rows.push({
+          key: "p90",
+          value: p90Value,
+          color,
+          inverted: color !== COLOR_HEALTHY
+        });
+      } else {
+        rows.push({ key: "p90", value: formatMsShort(p.p90) });
+      }
+      rows.push({ key: "p99", value: formatMsShort(p.p99) });
+    } else if (p.p90 > 0) {
+      if (slo?.latencyP90 != null) {
+        const color = sloLatencyColor(p.p90, slo);
+        const p90Value = color !== COLOR_HEALTHY ? `${formatMsShort(p.p90)} / ${formatMsShort(slo.latencyP90)}` : formatMsShort(p.p90);
+        rows.push({
+          key: "p90",
+          value: p90Value,
+          color,
+          inverted: color !== COLOR_HEALTHY
+        });
+      } else {
+        rows.push({ key: "p90", value: formatMsShort(p.p90) });
+      }
+    }
+  }
+  if (node.computedUptime < 1) {
+    const declaredUptime = node.properties.find((p2) => p2.key === "uptime");
+    const declaredVal = declaredUptime ? Number(declaredUptime.value) / 100 : 1;
+    const differs = Math.abs(node.computedUptime - declaredVal) > 1e-6;
+    if (differs || node.isEdge) {
+      rows.push({
+        key: "eff. uptime",
+        value: formatUptimeShort(node.computedUptime)
+      });
+    }
+  }
+  if (node.computedAvailability < 1) {
+    let color;
+    if (slo?.availThreshold != null) {
+      const t = slo.availThreshold;
+      const m = slo.warningMargin;
+      if (node.computedAvailability < t) color = COLOR_OVERLOADED;
+      else if (node.computedAvailability < Math.min(1, t + m))
+        color = COLOR_WARNING;
+      else color = COLOR_HEALTHY;
+    } else {
+      color = node.computedAvailability < 0.95 ? COLOR_OVERLOADED : node.computedAvailability < 0.99 ? COLOR_WARNING : void 0;
+    }
+    rows.push({
+      key: "availability",
+      value: formatUptimeShort(node.computedAvailability),
+      ...color !== void 0 && { color },
+      inverted: color != null && color !== COLOR_HEALTHY
+    });
+  }
+  if (node.computedCbState === "open") {
+    rows.push({
+      key: "CB",
+      value: "OPEN",
+      color: COLOR_OVERLOADED,
+      inverted: true
+    });
+  }
+  if (node.queueMetrics) {
+    const { fillRate, timeToOverflow } = node.queueMetrics;
+    if (fillRate > 0) {
+      rows.push({
+        key: "lag",
+        value: `${formatCount(Math.round(fillRate))} msg/s`
+      });
+    }
+    if (fillRate > 0 && timeToOverflow < Infinity) {
+      const overflowColor = timeToOverflow < 60 ? COLOR_OVERLOADED : COLOR_WARNING;
+      rows.push({
+        key: "overflow",
+        value: `~${Math.round(timeToOverflow)}s`,
+        color: overflowColor,
+        inverted: timeToOverflow < 60
+      });
+    }
+  }
+  return rows;
+}
+function formatCount(n) {
+  if (n >= 1e6)
+    return `${(n / 1e6).toFixed(n % 1e6 === 0 ? 0 : 1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(n % 1e3 === 0 ? 0 : 1)}k`;
+  return String(n);
+}
+function formatMsShort(ms) {
+  if (ms >= 1e3) return `${(ms / 1e3).toFixed(1)}s`;
+  return `${Math.round(ms)}ms`;
+}
+function formatUptimeShort(fraction) {
+  const pct = fraction * 100;
+  if (pct >= 99.99) return "99.99%";
+  if (pct >= 99.9) return `${pct.toFixed(2)}%`;
+  if (pct >= 99) return `${pct.toFixed(1)}%`;
+  return `${pct.toFixed(1)}%`;
+}
+function getDisplayProps(node, expanded, diagramOptions) {
+  if (node.isEdge) return [];
+  const rows = [];
+  for (const p of node.properties) {
+    const displayKey = PROP_DISPLAY[p.key];
+    if (!displayKey) continue;
+    if (p.key === "ratelimit-rps" && !expanded) continue;
+    if (p.key === "max-rps" && !expanded) continue;
+    if (p.key === "concurrency" && !expanded) continue;
+    if (RPS_FORMAT_KEYS.has(p.key)) {
+      const num = typeof p.value === "number" ? p.value : parseFloat(String(p.value));
+      rows.push({
+        key: p.key,
+        displayKey,
+        value: isNaN(num) ? String(p.value) : formatRpsShort(num)
+      });
+    } else if (MS_FORMAT_KEYS.has(p.key)) {
+      const num = typeof p.value === "number" ? p.value : parseFloat(String(p.value));
+      rows.push({
+        key: p.key,
+        displayKey,
+        value: isNaN(num) ? String(p.value) : formatMsShort(num)
+      });
+    } else if (PCT_FORMAT_KEYS.has(p.key)) {
+      const num = typeof p.value === "number" ? p.value : parseFloat(String(p.value));
+      rows.push({
+        key: p.key,
+        displayKey,
+        value: isNaN(num) ? String(p.value) : `${num}%`
+      });
+    } else if (p.key === "buffer") {
+      const num = typeof p.value === "number" ? p.value : parseFloat(String(p.value));
+      rows.push({
+        key: p.key,
+        displayKey,
+        value: isNaN(num) ? String(p.value) : formatCount(num)
+      });
+    } else if (p.key === "drain-rate") {
+      const num = typeof p.value === "number" ? p.value : parseFloat(String(p.value));
+      rows.push({
+        key: p.key,
+        displayKey,
+        value: isNaN(num) ? String(p.value) : `${formatRpsShort(num)}/s`
+      });
+    } else if (p.key === "retention-hours") {
+      const num = typeof p.value === "number" ? p.value : parseFloat(String(p.value));
+      rows.push({
+        key: p.key,
+        displayKey,
+        value: isNaN(num) ? String(p.value) : `${num}h`
+      });
+    } else {
+      rows.push({ key: p.key, displayKey, value: String(p.value) });
+    }
+  }
+  if (diagramOptions) {
+    const hasLatency = node.properties.some((p) => p.key === "latency-ms");
+    const hasUptime = node.properties.some((p) => p.key === "uptime");
+    const isServerlessNode = node.properties.some(
+      (p) => p.key === "concurrency"
+    );
+    const defaultLatency = parseFloat(diagramOptions["default-latency-ms"] ?? "") || 0;
+    const defaultUptime = parseFloat(diagramOptions["default-uptime"] ?? "") || 0;
+    if (!hasLatency && !isServerlessNode && defaultLatency > 0) {
+      rows.push({
+        key: "latency-ms",
+        displayKey: "latency",
+        value: formatMsShort(defaultLatency)
+      });
+    }
+    if (!hasUptime && defaultUptime > 0 && defaultUptime < 100) {
+      rows.push({
+        key: "uptime",
+        displayKey: "uptime",
+        value: `${defaultUptime}%`
+      });
+    }
+  }
+  return rows;
+}
+function formatRpsShort(rps) {
+  if (rps >= 1e3) return `${(rps / 1e3).toFixed(1)}k`;
+  return `${Math.round(rps)}`;
+}
+function worstNodeSeverity(node, slo) {
+  let worst = "normal";
+  const upgrade = (s) => {
+    if (s === "overloaded") worst = "overloaded";
+    else if (worst !== "overloaded") worst = "warning";
+  };
+  if (node.childHealthState === "overloaded") upgrade("overloaded");
+  else if (node.childHealthState === "warning") upgrade("warning");
+  if (node.overloaded) upgrade("overloaded");
+  if (node.rateLimited) upgrade("warning");
+  if (isWarning(node)) upgrade("warning");
+  if (slo?.availThreshold != null) {
+    const t = slo.availThreshold;
+    const m = slo.warningMargin;
+    if (node.computedAvailability < t) upgrade("overloaded");
+    else if (node.computedAvailability < Math.min(1, t + m)) upgrade("warning");
+  } else {
+    if (node.computedAvailability < 0.95) upgrade("overloaded");
+    else if (node.computedAvailability < 0.99) upgrade("warning");
+  }
+  if (slo?.latencyP90 != null) {
+    const t = slo.latencyP90;
+    const m = slo.warningMargin;
+    const p90 = node.computedLatencyPercentiles.p90;
+    if (p90 > t) upgrade("overloaded");
+    else if (p90 > t * (1 - m)) upgrade("warning");
+  }
+  if (node.computedCbState === "open") upgrade("overloaded");
+  if (node.queueMetrics && node.queueMetrics.fillRate > 0) {
+    if (node.queueMetrics.timeToOverflow < 60) upgrade("overloaded");
+    else upgrade("warning");
+  }
+  if (!node.isEdge) {
+    const nodeRateLimit = getNodeNumProp(node, "ratelimit-rps", 0);
+    if (nodeRateLimit > 0 && node.computedRps > 0) {
+      let preRl = node.computedRps;
+      const ch = getNodeNumProp(node, "cache-hit", 0);
+      if (ch > 0) preRl *= (100 - ch) / 100;
+      const fw = getNodeNumProp(node, "firewall-block", 0);
+      if (fw > 0) preRl *= (100 - fw) / 100;
+      if (preRl > nodeRateLimit) upgrade("overloaded");
+      else if (preRl > nodeRateLimit * 0.8) upgrade("warning");
+    }
+  }
+  if (worst === "normal" && slo != null) {
+    const availGreen = slo.availThreshold == null || node.computedAvailability >= Math.min(1, slo.availThreshold + slo.warningMargin);
+    const latencyGreen = slo.latencyP90 == null || node.computedLatencyPercentiles.p90 <= slo.latencyP90 * (1 - slo.warningMargin);
+    if (availGreen && latencyGreen) return "healthy";
+  }
+  return worst;
+}
+function nodeColor(_node, palette, isDark, severity, solid) {
+  if (severity === "overloaded") {
+    const fill = shapeFill(palette, COLOR_OVERLOADED, isDark, {
+      ...solid !== void 0 && { solid }
+    });
+    return {
+      fill,
+      stroke: COLOR_OVERLOADED,
+      textFill: contrastText(
+        fill,
+        palette.textOnFillLight,
+        palette.textOnFillDark
+      )
+    };
+  }
+  if (severity === "warning") {
+    const fill = shapeFill(palette, COLOR_WARNING, isDark, {
+      ...solid !== void 0 && { solid }
+    });
+    return {
+      fill,
+      stroke: COLOR_WARNING,
+      textFill: contrastText(
+        fill,
+        palette.textOnFillLight,
+        palette.textOnFillDark
+      )
+    };
+  }
+  if (severity === "healthy") {
+    const fill = shapeFill(palette, COLOR_HEALTHY, isDark, {
+      ...solid !== void 0 && { solid }
+    });
+    return {
+      fill,
+      stroke: COLOR_HEALTHY,
+      textFill: contrastText(
+        fill,
+        palette.textOnFillLight,
+        palette.textOnFillDark
+      )
+    };
+  }
+  return {
+    fill: isDark ? mix(palette.bg, palette.text, 90) : mix(palette.bg, palette.text, 95),
+    stroke: isDark ? mix(palette.text, palette.bg, 60) : mix(palette.text, palette.bg, 40),
+    textFill: palette.text
+  };
+}
+function edgeColor(_edge, palette) {
+  return palette.textMuted;
+}
+function renderGroups(svg, groups, palette, _isDark, sc = buildScaledConstants(ScaleContext.identity())) {
+  for (const group of groups) {
+    const g = svg.append("g").attr("class", "infra-group").attr("data-line-number", group.lineNumber).attr("data-node-toggle", group.id).style("cursor", "pointer");
+    const groupFill = mix(palette.surface, palette.bg, 40);
+    const groupStroke = palette.textMuted;
+    g.append("rect").attr("x", group.x).attr("y", group.y).attr("width", group.width).attr("height", group.height).attr("rx", 6).attr("fill", groupFill).attr("stroke", groupStroke).attr("stroke-opacity", 0.35).attr("stroke-width", 1);
+    g.append("text").attr("x", group.x + group.width / 2).attr("y", group.y + 16).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", sc.sGroupLabelFontSize).attr("font-weight", "600").attr("fill", palette.text).text(group.label);
+    const gi = typeof group.instances === "number" ? group.instances : typeof group.instances === "string" ? parseInt(String(group.instances), 10) || 0 : 0;
+    if (gi > 1) {
+      g.append("text").attr("x", group.x + group.width - 8).attr("y", group.y + 16).attr("text-anchor", "end").attr("font-family", FONT_FAMILY).attr("font-size", sc.sMetaFontSize).attr("fill", palette.textMuted).text(`${gi}x`);
+    }
+  }
+}
+function renderEdgePaths(svg, edges, nodes, groups, palette, _isDark, animate, direction, speedMultiplier = 1, sc = buildScaledConstants(ScaleContext.identity())) {
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+  const maxRps = Math.max(...edges.map((e) => e.computedRps), 1);
+  const { srcPts, tgtPts } = computePortPts(edges, nodeMap, direction);
+  for (const edge of edges) {
+    if (edge.points.length === 0) continue;
+    const targetNode = nodeMap.get(edge.targetId);
+    const sourceNode = nodeMap.get(edge.sourceId);
+    const color = edgeColor(edge, palette);
+    const strokeW = sc.sEdgeStrokeWidth;
+    if (!sourceNode || !targetNode) continue;
+    const key = `${edge.sourceId}:${edge.targetId}`;
+    const pts = edgeWaypoints(
+      sourceNode,
+      targetNode,
+      groups,
+      nodes,
+      direction,
+      30,
+      srcPts.get(key),
+      tgtPts.get(key)
+    );
+    const pathD = buildPathD(pts, direction);
+    const edgeG = svg.append("g").attr("class", "infra-edge").attr("data-line-number", edge.lineNumber).attr("data-from", edge.sourceId).attr("data-to", edge.targetId);
+    const edgePath = edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", color).attr("stroke-width", strokeW);
+    if (edge.async) {
+      edgePath.attr("stroke-dasharray", "6 4");
+    }
+    if (animate && edge.computedRps > 0) {
+      const baseDur = flowDuration(edge.computedRps, maxRps);
+      const dur = speedMultiplier > 0 ? baseDur / speedMultiplier : baseDur;
+      const count = particleCount(edge.computedRps, maxRps);
+      const particleColor = palette.colors.green;
+      for (let i = 0; i < count; i++) {
+        const delay = dur / count * i;
+        const circle = edgeG.append("circle").attr("r", sc.sParticleR).attr("fill", particleColor).attr("opacity", 0.85);
+        circle.append("animateMotion").attr("dur", `${dur}s`).attr("repeatCount", "indefinite").attr("begin", `${delay}s`).attr("path", pathD);
+      }
+    }
+  }
+}
+function renderEdgeLabels(svg, edges, nodes, groups, palette, _isDark, animate, direction, sc = buildScaledConstants(ScaleContext.identity())) {
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+  const { srcPts, tgtPts } = computePortPts(edges, nodeMap, direction);
+  for (const edge of edges) {
+    if (edge.points.length === 0) continue;
+    if (!edge.label) continue;
+    const sourceNode = nodeMap.get(edge.sourceId);
+    const targetNode = nodeMap.get(edge.targetId);
+    if (!sourceNode || !targetNode) continue;
+    const key = `${edge.sourceId}:${edge.targetId}`;
+    const wps = edgeWaypoints(
+      sourceNode,
+      targetNode,
+      groups,
+      nodes,
+      direction,
+      30,
+      srcPts.get(key),
+      tgtPts.get(key)
+    );
+    const midPt = wps[Math.floor(wps.length / 2)];
+    if (!midPt) continue;
+    const labelText = edge.label;
+    const g = svg.append("g").attr("class", animate ? "infra-edge-label" : "");
+    const textWidth = measureText(labelText, EDGE_LABEL_FONT_SIZE) + 8;
+    g.append("rect").attr("x", midPt.x - textWidth / 2).attr("y", midPt.y - 8).attr("width", textWidth).attr("height", 16).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.9);
+    g.append("text").attr("x", midPt.x).attr("y", midPt.y + 4).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", sc.sEdgeLabelFontSize).attr("fill", palette.textMuted).text(labelText);
+    if (animate) {
+      const pathD = buildPathD(wps, direction);
+      g.insert("path", ":first-child").attr("d", pathD).attr("fill", "none").attr("stroke", "transparent").attr("stroke-width", 20);
+    }
+  }
+}
+function resolveActiveTagStroke(node, activeGroup, tagGroups, palette) {
+  const tg = tagGroups.find(
+    (t) => t.name.toLowerCase() === activeGroup.toLowerCase()
+  );
+  if (!tg) return null;
+  const tagKey = tagAttrKey(tg.alias ?? tg.name);
+  const tagVal = node.tags[tagKey];
+  if (!tagVal) return null;
+  const tv = tg.values.find(
+    (v) => v.name.toLowerCase() === tagVal.toLowerCase()
+  );
+  if (!tv?.color) return null;
+  return resolveColor(tv.color, palette);
+}
+function renderNodes(svg, nodes, palette, isDark, animate, expandedNodeIds, activeGroup, diagramOptions, collapsedNodes, tagGroups, fanoutSourceIds, scaledGroupIds, sc = buildScaledConstants(ScaleContext.identity())) {
+  for (const node of nodes) {
+    const slo = !node.isEdge && diagramOptions ? resolveNodeSlo(node, diagramOptions) : null;
+    const severity = worstNodeSeverity(node, slo);
+    const nodeColors = nodeColor(node, palette, isDark, severity, false);
+    const textFill = nodeColors.textFill;
+    let { fill, stroke } = nodeColors;
+    if (activeGroup && tagGroups && !node.isEdge) {
+      const tagStroke = resolveActiveTagStroke(
+        node,
+        activeGroup,
+        tagGroups,
+        palette
+      );
+      if (tagStroke) {
+        stroke = tagStroke;
+        fill = shapeFill(palette, tagStroke, isDark);
+      }
+    }
+    let cls = "infra-node";
+    if (animate && node.isEdge) {
+      cls += " infra-node-edge-throb";
+    } else if (animate && !node.isEdge) {
+      if (node.computedCbState === "open") cls += " infra-node-cb-open";
+      else if (severity === "overloaded") cls += " infra-node-overload";
+      else if (severity === "warning") cls += " infra-node-warning";
+    }
+    const g = svg.append("g").attr("class", cls).attr("data-line-number", node.lineNumber).attr("data-infra-node", node.id).attr("data-node-collapse", node.id).style("cursor", "pointer");
+    if (node.id.startsWith("[")) {
+      g.attr("data-node-toggle", node.id);
+    }
+    for (const [tagKey, tagVal] of Object.entries(node.tags)) {
+      g.attr(`data-tag-${tagKey.toLowerCase()}`, tagVal.toLowerCase());
+    }
+    if (!node.isEdge) {
+      const roles = inferRoles(node.properties);
+      for (const role of roles) {
+        g.attr(
+          `data-role-${role.name.toLowerCase().replace(/\s+/g, "-")}`,
+          "true"
+        );
+      }
+      if (fanoutSourceIds?.has(node.id)) {
+        g.attr("data-role-fan-out", "true");
+      }
+    }
+    const x = node.x - node.width / 2;
+    const y = node.y - node.height / 2;
+    const isCollapsedGroup = node.id.startsWith("[");
+    const strokeWidth = severity !== "normal" ? sc.sOverloadStrokeWidth : sc.sNodeStrokeWidth;
+    g.append("rect").attr("x", x).attr("y", y).attr("width", node.width).attr("height", node.height).attr("rx", sc.sNodeBorderRadius).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", strokeWidth);
+    const headerCenterY = y + NODE_HEADER_HEIGHT / 2 + sc.sNodeFontSize * 0.35;
+    g.append("text").attr("x", node.x).attr("y", headerCenterY).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", sc.sNodeFontSize).attr("font-weight", "600").attr("fill", textFill).text(node.label);
+    const isNodeCollapsed = collapsedNodes?.has(node.id) ?? false;
+    if (isNodeCollapsed) {
+      const chevronY = y + node.height - 6;
+      g.append("text").attr("x", node.x).attr("y", chevronY).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", 8).attr("fill", textFill).attr("opacity", 0.6).text("\u25B6");
+    }
+    if (!isNodeCollapsed) {
+      const expanded = expandedNodeIds?.has(node.id) ?? false;
+      const descLines = expanded && node.description && !node.isEdge ? node.description : [];
+      const descH = descLines.length * META_LINE_HEIGHT;
+      for (let di = 0; di < descLines.length; di++) {
+        const rawLine = descLines[di];
+        const processed = preprocessDescriptionLine(rawLine);
+        const descTruncated = truncateDesc(processed);
+        const isTruncated = descTruncated !== processed;
+        const textEl = g.append("text").attr("x", node.x).attr(
+          "y",
+          y + NODE_HEADER_HEIGHT + di * META_LINE_HEIGHT + META_LINE_HEIGHT / 2 + sc.sMetaFontSize * 0.35
+        ).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", sc.sMetaFontSize).attr("fill", textFill);
+        renderInlineText(textEl, descTruncated, palette, sc.sMetaFontSize);
+        if (isTruncated) textEl.append("title").text(rawLine);
+      }
+      const displayProps = !node.isEdge && expanded ? getDisplayProps(node, expanded, diagramOptions) : [];
+      const computedRows = getComputedRows(node, expanded, slo);
+      const hasContent = displayProps.length > 0 || computedRows.length > 0 || node.computedRps > 0;
+      if (hasContent) {
+        const sepY = y + NODE_HEADER_HEIGHT + descH;
+        g.append("line").attr("x1", x).attr("y1", sepY).attr("x2", x + node.width).attr("y2", sepY).attr("stroke", stroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+        const computedSection = [];
+        const declaredSection = [];
+        const nodeMaxRps = getNodeNumProp(node, "max-rps", 0);
+        const nodeRateLimit = getNodeNumProp(node, "ratelimit-rps", 0);
+        const nodeConcurrency = getNodeNumProp(node, "concurrency", 0);
+        const nodeDurationMs = getNodeNumProp(node, "duration-ms", 100);
+        const serverlessCap = nodeConcurrency > 0 ? nodeConcurrency / (nodeDurationMs / 1e3) : 0;
+        const effectiveCap = serverlessCap > 0 ? serverlessCap : nodeMaxRps > 0 && nodeRateLimit > 0 ? Math.min(nodeMaxRps * node.computedInstances, nodeRateLimit) : nodeMaxRps > 0 ? nodeMaxRps * node.computedInstances : nodeRateLimit > 0 ? nodeRateLimit : 0;
+        if (node.computedRps > 0) {
+          let rlSeverity = "normal";
+          if (nodeRateLimit > 0 && node.computedRps > 0 && !node.isEdge) {
+            let preRl = node.computedRps;
+            const ch = getNodeNumProp(node, "cache-hit", 0);
+            if (ch > 0) preRl *= (100 - ch) / 100;
+            const fw = getNodeNumProp(node, "firewall-block", 0);
+            if (fw > 0) preRl *= (100 - fw) / 100;
+            if (preRl > nodeRateLimit) rlSeverity = "overloaded";
+            else if (preRl > nodeRateLimit * 0.8) rlSeverity = "warning";
+          }
+          const rpsSeverity = node.overloaded ? "overloaded" : rlSeverity === "overloaded" ? "overloaded" : node.rateLimited ? "warning" : isWarning(node) ? "warning" : rlSeverity === "warning" ? "warning" : "normal";
+          const rpsColor = rpsSeverity === "overloaded" ? COLOR_OVERLOADED : rpsSeverity === "warning" ? COLOR_WARNING : textFill;
+          const rpsInverted = rpsSeverity !== "normal";
+          const rpsText = effectiveCap > 0 && !node.isEdge ? `${formatRpsShort(node.computedRps)} / ${formatRpsShort(effectiveCap)}` : formatRpsShort(node.computedRps);
+          computedSection.push({
+            key: "RPS",
+            value: rpsText,
+            valueFill: rpsColor,
+            fontWeight: "500",
+            inverted: rpsInverted,
+            ...rpsInverted && { invertedBg: rpsColor }
+          });
+        }
+        for (const cr of computedRows) {
+          computedSection.push({
+            key: cr.key,
+            value: cr.value,
+            valueFill: cr.color ?? textFill,
+            fontWeight: "normal",
+            ...cr.inverted !== void 0 && { inverted: cr.inverted },
+            ...cr.inverted && cr.color !== void 0 && { invertedBg: cr.color }
+          });
+        }
+        for (const prop of displayProps) {
+          let propColor = textFill;
+          let inverted = false;
+          let invertedBg;
+          if (prop.key === "ratelimit-rps" && nodeRateLimit > 0 && node.computedRps > 0) {
+            let preRl = node.computedRps;
+            const ch = getNodeNumProp(node, "cache-hit", 0);
+            if (ch > 0) preRl *= (100 - ch) / 100;
+            const fw = getNodeNumProp(node, "firewall-block", 0);
+            if (fw > 0) preRl *= (100 - fw) / 100;
+            if (preRl > nodeRateLimit) {
+              propColor = COLOR_OVERLOADED;
+              inverted = true;
+              invertedBg = COLOR_OVERLOADED;
+            } else if (preRl > nodeRateLimit * 0.8) {
+              propColor = COLOR_WARNING;
+              inverted = true;
+              invertedBg = COLOR_WARNING;
+            }
+          }
+          declaredSection.push({
+            key: prop.displayKey,
+            value: prop.value,
+            valueFill: propColor,
+            fontWeight: "normal",
+            inverted,
+            ...invertedBg !== void 0 && { invertedBg }
+          });
+        }
+        const rows = [...computedSection, ...declaredSection];
+        const maxKeyWidth = Math.max(
+          ...rows.map((r) => measureText(`${r.key}: `, sc.sMetaFontSize))
+        );
+        const valueX = x + 10 + maxKeyWidth;
+        let rowY = sepY + NODE_SEPARATOR_GAP + sc.sMetaFontSize;
+        const needsSectionSep = computedSection.length > 0 && declaredSection.length > 0;
+        let rowIdx = 0;
+        for (const row of rows) {
+          if (needsSectionSep && rowIdx === computedSection.length) {
+            const sepLineY = rowY - sc.sMetaFontSize + 1;
+            g.append("line").attr("x1", x).attr("y1", sepLineY).attr("x2", x + node.width).attr("y2", sepLineY).attr("stroke", stroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+            rowY += sc.sNodeSeparatorGap;
+          }
+          if (row.inverted && row.invertedBg) {
+            const pillH = sc.sMetaLineHeight - 1;
+            const pillPad = 4;
+            const pillX = x + pillPad;
+            const pillY = rowY - sc.sMetaFontSize + 1;
+            const pillW = node.width - pillPad * 2;
+            g.append("rect").attr("x", pillX).attr("y", pillY).attr("width", pillW).attr("height", pillH).attr("rx", 3).attr("fill", row.invertedBg).attr("opacity", 0.9);
+            const pillTextColor = isDark ? "#ffffff" : palette.text;
+            g.append("text").attr("x", x + 10).attr("y", rowY).attr("font-family", FONT_FAMILY).attr("font-size", sc.sMetaFontSize).attr("font-weight", "600").attr("fill", pillTextColor).text(`${row.key}: `);
+            g.append("text").attr("x", valueX).attr("y", rowY).attr("font-family", FONT_FAMILY).attr("font-size", sc.sMetaFontSize).attr("font-weight", "600").attr("fill", pillTextColor).text(row.value);
+          } else {
+            g.append("text").attr("x", x + 10).attr("y", rowY).attr("font-family", FONT_FAMILY).attr("font-size", sc.sMetaFontSize).attr("fill", textFill).text(`${row.key}: `);
+            g.append("text").attr("x", valueX).attr("y", rowY).attr("font-family", FONT_FAMILY).attr("font-size", sc.sMetaFontSize).attr("font-weight", row.fontWeight).attr("fill", row.valueFill).text(row.value);
+          }
+          rowY += sc.sMetaLineHeight;
+          rowIdx++;
+        }
+      }
+      const inScaledGroup = node.groupId != null && (scaledGroupIds?.has(node.groupId) ?? false);
+      if (!node.isEdge && node.computedConcurrentInvocations === 0 && node.computedInstances > 1 && !inScaledGroup) {
+        const badgeText = `${node.computedInstances}x`;
+        g.append("text").attr("x", x + node.width - 6).attr("y", y + NODE_HEADER_HEIGHT / 2 + sc.sMetaFontSize * 0.35).attr("text-anchor", "end").attr("font-family", FONT_FAMILY).attr("font-size", sc.sMetaFontSize).attr("fill", textFill).attr("data-instance-node", node.id).style("cursor", "pointer").text(badgeText);
+      }
+      const showDots = activeGroup?.toLowerCase() === "capabilities";
+      const roles = showDots && !node.isEdge ? inferRoles(node.properties) : [];
+      if (roles.length > 0) {
+        const dotY = isCollapsedGroup ? y + node.height - sc.sCollapseBarHeight - sc.sNodePadBottom / 2 : y + node.height - sc.sNodePadBottom / 2;
+        const totalDotsWidth = roles.length * (sc.sRoleDotRadius * 2 + 2) - 2;
+        const startX = node.x - totalDotsWidth / 2 + sc.sRoleDotRadius;
+        for (let i = 0; i < roles.length; i++) {
+          g.append("circle").attr("cx", startX + i * (sc.sRoleDotRadius * 2 + 2)).attr("cy", dotY).attr("r", sc.sRoleDotRadius).attr("fill", roles[i].color);
+        }
+      }
+      if (isCollapsedGroup) {
+        const clipId = `clip-${node.id.replace(/[[\]\s]/g, "")}`;
+        g.append("clipPath").attr("id", clipId).append("rect").attr("x", x).attr("y", y).attr("width", node.width).attr("height", node.height).attr("rx", sc.sNodeBorderRadius);
+        g.append("rect").attr("x", x + sc.sCollapseBarInset).attr("y", y + node.height - sc.sCollapseBarHeight).attr("width", node.width - sc.sCollapseBarInset * 2).attr("height", sc.sCollapseBarHeight).attr("fill", stroke).attr("clip-path", `url(#${clipId})`).attr("class", "infra-collapse-bar");
+      }
+    }
+  }
+}
+function getNodeNumProp(node, key, fallback) {
+  const prop = node.properties.find((p) => p.key === key);
+  if (!prop) return fallback;
+  if (typeof prop.value === "number") return prop.value;
+  const num = parseFloat(String(prop.value));
+  return isNaN(num) ? fallback : num;
+}
+function computeRejectedRps(node) {
+  if (node.isEdge || node.computedRps <= 0) return 0;
+  let rejected = 0;
+  const inbound = node.computedRps;
+  const fwBlock = getNodeNumProp(node, "firewall-block", 0);
+  if (fwBlock > 0) rejected += inbound * (fwBlock / 100);
+  const rateLimit = getNodeNumProp(node, "ratelimit-rps", 0);
+  if (rateLimit > 0) {
+    let preRateLimitRps = inbound;
+    const cacheHit = getNodeNumProp(node, "cache-hit", 0);
+    if (cacheHit > 0) preRateLimitRps *= (100 - cacheHit) / 100;
+    if (fwBlock > 0) preRateLimitRps *= (100 - fwBlock) / 100;
+    if (preRateLimitRps > rateLimit) {
+      rejected += preRateLimitRps - rateLimit;
+    }
+  }
+  if (node.overloaded || node.childHealthState === "overloaded") {
+    const maxRps = getNodeNumProp(node, "max-rps", 0);
+    if (maxRps > 0) {
+      const capacity = maxRps * node.computedInstances;
+      if (inbound > capacity) {
+        rejected += inbound - capacity;
+      }
+    }
+    if (rejected === 0) {
+      rejected = inbound * 0.1;
+    }
+  }
+  return rejected;
+}
+function renderRejectParticles(svg, nodes, speedMultiplier = 1, sc = buildScaledConstants(ScaleContext.identity())) {
+  const rejectMap = [];
+  for (const node of nodes) {
+    const rejected = computeRejectedRps(node);
+    if (rejected > 0) rejectMap.push({ node, rejected });
+  }
+  if (rejectMap.length === 0) return;
+  const maxRejected = Math.max(...rejectMap.map((r) => r.rejected));
+  for (const { node, rejected } of rejectMap) {
+    const t = Math.min(rejected / maxRejected, 1);
+    const count = Math.round(
+      REJECT_COUNT_MIN + t * (REJECT_COUNT_MAX - REJECT_COUNT_MIN)
+    );
+    const baseDur = REJECT_DURATION_MAX - t * (REJECT_DURATION_MAX - REJECT_DURATION_MIN);
+    const dur = speedMultiplier > 0 ? baseDur / speedMultiplier : baseDur;
+    const nodeBottom = node.y + node.height / 2;
+    for (let i = 0; i < count; i++) {
+      const delay = dur / count * i;
+      const spread = node.width * 0.3;
+      const startX = node.x + (count > 1 ? -spread / 2 + spread * (i / (count - 1)) : 0);
+      const startY = nodeBottom;
+      const endY = nodeBottom + sc.sRejectDropDistance;
+      const rejectColor = node.overloaded || node.childHealthState === "overloaded" ? COLOR_OVERLOADED : COLOR_WARNING;
+      const circle = svg.append("circle").attr("r", sc.sRejectParticleR).attr("fill", rejectColor).attr("opacity", 0);
+      circle.append("animate").attr("attributeName", "cy").attr("from", startY).attr("to", endY).attr("dur", `${dur}s`).attr("repeatCount", "indefinite").attr("begin", `${delay}s`);
+      circle.append("animate").attr("attributeName", "cx").attr("from", startX).attr("to", startX).attr("dur", `${dur}s`).attr("repeatCount", "indefinite").attr("begin", `${delay}s`);
+      circle.append("animate").attr("attributeName", "opacity").attr("values", "0;0.8;0.6;0").attr("keyTimes", "0;0.1;0.5;1").attr("dur", `${dur}s`).attr("repeatCount", "indefinite").attr("begin", `${delay}s`);
+    }
+  }
+}
+function computeInfraLegendGroups(nodes, tagGroups, palette, edges) {
+  const groups = [];
+  const roles = collectDiagramRoles(
+    nodes.filter((n) => !n.isEdge).map((n) => n.properties)
+  );
+  if (edges && collectFanoutSourceIds([...edges]).size > 0) {
+    roles.push(FANOUT_ROLE);
+  }
+  if (roles.length > 0) {
+    const entries = roles.map((r) => ({
+      value: r.name,
+      color: r.color,
+      key: r.name.toLowerCase().replace(/\s+/g, "-")
+    }));
+    const pillWidth = measureLegendText("Capabilities", LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
+    let entriesWidth = 0;
+    for (const e of entries) {
+      entriesWidth += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(e.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
+    }
+    groups.push({
+      name: "Capabilities",
+      type: "role",
+      entries,
+      width: LEGEND_CAPSULE_PAD * 2 + pillWidth + 4 + entriesWidth,
+      minifiedWidth: pillWidth
+    });
+  }
+  for (const tg of tagGroups) {
+    const entries = [];
+    for (const tv of tg.values) {
+      if (tv.color) {
+        entries.push({
+          value: tv.name,
+          color: resolveColor(tv.color, palette) ?? tv.color,
+          key: tv.name.toLowerCase()
+        });
+      }
+    }
+    if (entries.length === 0) continue;
+    const pillWidth = measureLegendText(tg.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
+    let entriesWidth = 0;
+    for (const e of entries) {
+      entriesWidth += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(e.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
+    }
+    groups.push({
+      name: tg.name,
+      type: "tag",
+      tagKey: tagAttrKey(tg.alias ?? tg.name),
+      entries,
+      width: LEGEND_CAPSULE_PAD * 2 + pillWidth + 4 + entriesWidth,
+      minifiedWidth: pillWidth
+    });
+  }
+  return groups;
+}
+function renderLegend(rootSvg, legendGroups, totalWidth, legendY, palette, isDark, activeGroup, playback, exportMode = false, controlsHost) {
+  if (legendGroups.length === 0 && !playback) return;
+  const appHostedPlayback = controlsHost === "app" && !!playback;
+  const legendG = rootSvg.append("g").attr("transform", `translate(0, ${legendY})`);
+  if (activeGroup) {
+    legendG.attr("data-legend-active", tagAttrKey(activeGroup));
+  }
+  const allGroups = legendGroups.map((g) => ({
+    name: g.name,
+    entries: g.entries.map((e) => ({ value: e.value, color: e.color }))
+  }));
+  if (playback && !appHostedPlayback) {
+    allGroups.push({ name: "Playback", entries: [] });
+  }
+  renderIntegratedLegend(legendG, {
+    groups: allGroups,
+    activeGroup,
+    mode: exportMode ? "export" : "preview",
+    showEmptyGroups: true,
+    ...appHostedPlayback && {
+      controlsHost: "app",
+      controlsGroup: {
+        toggles: [
+          {
+            id: "playback",
+            type: "toggle",
+            label: "Playback",
+            active: true,
+            onToggle: () => {
+            }
+          }
+        ]
+      }
+    },
+    palette,
+    isDark,
+    width: totalWidth
+  });
+  legendG.selectAll("[data-legend-group]").classed("infra-legend-group", true);
+  for (const group of legendGroups) {
+    const groupKey = tagAttrKey(group.name);
+    for (const entry of group.entries) {
+      const entryEl = legendG.select(
+        `[data-legend-group="${groupKey}"] [data-legend-entry="${entry.value.toLowerCase()}"]`
+      );
+      if (!entryEl.empty()) {
+        entryEl.attr("data-legend-entry", entry.key.toLowerCase()).attr("data-legend-color", entry.color).attr("data-legend-type", group.type).attr(
+          "data-legend-tag-group",
+          group.type === "tag" ? group.tagKey ?? "" : null
+        );
+      }
+    }
+  }
+  const playbackEl = legendG.select('[data-legend-group="playback"]');
+  if (!playbackEl.empty()) {
+    playbackEl.classed("infra-playback-pill", true);
+  }
+  if (playback && playback.expanded && !playbackEl.empty()) {
+    const pillWidth = measureLegendText("Playback", LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
+    let entryX = pillWidth + 8;
+    const entryY = LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1;
+    const ppLabel = playback.paused ? "\u25B6" : "\u23F8";
+    playbackEl.append("text").attr("x", entryX).attr("y", entryY).attr("font-family", FONT_FAMILY).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("fill", palette.textMuted).attr("data-playback-action", "toggle-pause").style("cursor", "pointer").text(ppLabel);
+    entryX += LEGEND_PILL_FONT_SIZE * 0.8 + 6;
+    for (const s of playback.speedOptions) {
+      const label = `${s}x`;
+      const isSpeedActive = playback.speed === s;
+      const slotW = measureLegendText(label, LEGEND_ENTRY_FONT_SIZE) + SPEED_BADGE_H_PAD * 2;
+      const badgeH = LEGEND_ENTRY_FONT_SIZE + SPEED_BADGE_V_PAD * 2;
+      const badgeY = (LEGEND_HEIGHT - badgeH) / 2;
+      const speedG = playbackEl.append("g").attr("data-playback-action", "set-speed").attr("data-playback-value", String(s)).style("cursor", "pointer");
+      speedG.append("rect").attr("x", entryX).attr("y", badgeY).attr("width", slotW).attr("height", badgeH).attr("rx", badgeH / 2).attr("fill", isSpeedActive ? palette.primary : "transparent");
+      speedG.append("text").attr("x", entryX + slotW / 2).attr("y", entryY).attr("font-family", FONT_FAMILY).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("font-weight", isSpeedActive ? "600" : "400").attr("fill", isSpeedActive ? palette.bg : palette.textMuted).attr("text-anchor", "middle").text(label);
+      entryX += slotW + SPEED_BADGE_GAP;
+    }
+  }
+}
+function renderInfra(container, layout, palette, isDark, title, titleLineNumber, tagGroups, activeGroup, animate, playback, expandedNodeIds, exportMode, collapsedNodes, controlsHost) {
+  d3Selection.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  const appHostedPlayback = controlsHost === "app" && !!playback;
+  const ctx = ScaleContext.identity();
+  const sc = buildScaledConstants(ctx);
+  const legendGroups = computeInfraLegendGroups(
+    layout.nodes,
+    tagGroups ?? [],
+    palette,
+    layout.edges
+  );
+  const hasLegend = legendGroups.length > 0 || !!playback && !appHostedPlayback;
+  const fixedLegend = !exportMode && hasLegend;
+  const legendDynamicH = hasLegend ? getMaxLegendReservedHeight(
+    {
+      groups: legendGroups,
+      position: { placement: "top-center", titleRelation: "below-title" },
+      mode: exportMode ? "export" : "preview",
+      showEmptyGroups: true
+    },
+    container.clientWidth || layout.width
+  ) : LEGEND_HEIGHT;
+  const legendOffset = hasLegend && !fixedLegend ? legendDynamicH : 0;
+  const titleOffset = title ? TITLE_OFFSET : 0;
+  const totalWidth = layout.width;
+  const totalHeight = layout.height + titleOffset + legendOffset;
+  const shouldAnimate = animate !== false;
+  const fixedTitleH = fixedLegend && title ? TITLE_OFFSET : 0;
+  const diagramViewHeight = fixedLegend ? layout.height + (title && !fixedTitleH ? titleOffset : 0) + legendOffset : totalHeight;
+  if (fixedTitleH) {
+    const titleContainerW = container.clientWidth || totalWidth;
+    const titleSvg = d3Selection.select(container).append("svg").attr("class", "infra-title-fixed").attr("width", "100%").attr("height", fixedTitleH).attr("viewBox", `0 0 ${titleContainerW} ${fixedTitleH}`).attr("preserveAspectRatio", "xMidYMid meet").style("display", "block");
+    titleSvg.append("text").attr("class", "chart-title").attr("x", titleContainerW / 2).attr("y", sc.sTitleY).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", sc.sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).attr("data-line-number", titleLineNumber != null ? titleLineNumber : "").text(title);
+  }
+  const fixedOverheadH = (fixedLegend ? legendDynamicH + sc.sLegendFixedGap : 0) + fixedTitleH;
+  const rootSvg = d3Selection.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", "100%").attr(
+    "height",
+    fixedOverheadH > 0 ? `calc(100% - ${fixedOverheadH}px)` : "100%"
+  ).attr("viewBox", `0 0 ${totalWidth} ${diagramViewHeight}`).attr("preserveAspectRatio", "xMidYMid meet");
+  if (ctx.isBelowFloor) {
+    rootSvg.attr("width", "100%");
+  }
+  if (shouldAnimate) {
+    rootSvg.append("style").text(`
+      @keyframes infra-pulse-warning {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.7; }
+      }
+      @keyframes infra-pulse-overload {
+        0%, 100% { stroke-width: ${sc.sOverloadStrokeWidth}; }
+        50% { stroke-width: ${sc.sOverloadStrokeWidth + 2}; }
+      }
+      @keyframes infra-pulse-cb {
+        0%, 49% { stroke-dasharray: none; }
+        50%, 100% { stroke-dasharray: 6 4; }
+      }
+      .infra-node-warning > rect:first-of-type {
+        animation: infra-pulse-warning ${NODE_PULSE_SPEED}s ease-in-out infinite;
+      }
+      .infra-node-overload > rect:first-of-type {
+        animation: infra-pulse-overload ${NODE_PULSE_OVERLOAD}s ease-in-out infinite;
+      }
+      .infra-node-cb-open > rect:first-of-type {
+        stroke-dasharray: 6 4;
+        animation: infra-pulse-cb 1s step-end infinite;
+      }
+      @keyframes infra-edge-throb {
+        0%, 100% { stroke-width: ${sc.sEdgeStrokeWidth}; }
+        50% { stroke-width: ${sc.sEdgeStrokeWidth * 2}; }
+      }
+      .infra-node-edge-throb > rect:first-of-type {
+        animation: infra-edge-throb 2s ease-in-out infinite;
+        cursor: pointer;
+      }
+      .infra-edge-label {
+        opacity: 0;
+        transition: opacity 0.15s ease;
+        pointer-events: all;
+      }
+      .infra-edge-label:hover {
+        opacity: 1;
+      }
+    `);
+  }
+  const contentTitleOffset = fixedTitleH ? 0 : titleOffset;
+  const svg = rootSvg.append("g").attr("transform", `translate(0, ${contentTitleOffset + legendOffset})`);
+  if (title && !fixedTitleH) {
+    rootSvg.append("text").attr("class", "chart-title").attr("x", totalWidth / 2).attr("y", sc.sTitleY).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", sc.sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).attr("data-line-number", titleLineNumber != null ? titleLineNumber : "").text(title);
+  }
+  renderGroups(svg, layout.groups, palette, isDark, sc);
+  const speedMultiplier = playback?.speed ?? 1;
+  renderEdgePaths(
+    svg,
+    layout.edges,
+    layout.nodes,
+    layout.groups,
+    palette,
+    isDark,
+    shouldAnimate,
+    layout.direction,
+    speedMultiplier,
+    sc
+  );
+  const fanoutSourceIds = collectFanoutSourceIds([...layout.edges]);
+  const scaledGroupIds = new Set(
+    layout.groups.filter((g) => {
+      const gi = typeof g.instances === "number" ? g.instances : typeof g.instances === "string" ? parseInt(String(g.instances), 10) || 0 : 0;
+      return gi > 1;
+    }).map((g) => g.id)
+  );
+  renderNodes(
+    svg,
+    layout.nodes,
+    palette,
+    isDark,
+    shouldAnimate,
+    expandedNodeIds,
+    activeGroup,
+    layout.options,
+    collapsedNodes,
+    tagGroups ?? [],
+    fanoutSourceIds,
+    scaledGroupIds,
+    sc
+  );
+  if (shouldAnimate) {
+    renderRejectParticles(svg, layout.nodes, speedMultiplier, sc);
+  }
+  renderEdgeLabels(
+    svg,
+    layout.edges,
+    layout.nodes,
+    layout.groups,
+    palette,
+    isDark,
+    shouldAnimate,
+    layout.direction,
+    sc
+  );
+  if (hasLegend) {
+    if (fixedLegend) {
+      const legendContainerW = container.clientWidth || totalWidth;
+      const legendSvg = d3Selection.select(container).insert("svg", "svg:last-of-type").attr("class", "infra-legend-fixed").attr("width", "100%").attr("height", legendDynamicH + sc.sLegendFixedGap).attr(
+        "viewBox",
+        `0 0 ${legendContainerW} ${legendDynamicH + sc.sLegendFixedGap}`
+      ).attr("preserveAspectRatio", "xMidYMid meet").style("display", "block").style("pointer-events", "none");
+      renderLegend(
+        legendSvg,
+        legendGroups,
+        legendContainerW,
+        sc.sLegendFixedGap / 2,
+        palette,
+        isDark,
+        activeGroup ?? null,
+        playback ?? void 0,
+        exportMode,
+        controlsHost
+      );
+      legendSvg.selectAll(".infra-legend-group").style("pointer-events", "auto");
+    } else {
+      renderLegend(
+        rootSvg,
+        legendGroups,
+        totalWidth,
+        titleOffset,
+        palette,
+        isDark,
+        activeGroup ?? null,
+        playback ?? void 0,
+        exportMode,
+        controlsHost
+      );
+    }
+  }
+}
+function parseAndLayoutInfra(content) {
+  const parsed = parseInfra(content);
+  if (parsed.error) return { parsed, computed: null, layout: null };
+  const computed = computeInfra(parsed);
+  const layout = layoutInfra(computed);
+  return { parsed, computed, layout };
+}
+
+export {
+  inferRoles,
+  collectDiagramRoles,
+  computeInfraLegendGroups,
+  renderInfra,
+  parseAndLayoutInfra
+};
+//# sourceMappingURL=chunk-PBHE5UG6.js.map