@diagrammo/dgmo 0.45.0 → 0.47.0

package/dist/chunk-2LACINWN.js

@@ -0,0 +1,786 @@
+import {
+  NOTE_BADGE_RADIUS,
+  noteConnectorPoints,
+  renderNoteBadge,
+  renderNoteBox,
+  renderNoteConnector
+} from "./chunk-JEUJOX5X.js";
+import {
+  renderInlineText
+} from "./chunk-3HDBAXF5.js";
+import {
+  wrapDescriptionLines
+} from "./chunk-BMR4CIEO.js";
+import {
+  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_Y
+} from "./chunk-A4GOY3PE.js";
+import {
+  FONT_FAMILY
+} from "./chunk-6KFWC4CO.js";
+import {
+  CHAR_WIDTH_RATIO,
+  measureText,
+  truncateText
+} from "./chunk-WCT3NYCV.js";
+import {
+  contrastText,
+  mix,
+  relativeLuminance,
+  shapeFill,
+  themeBaseBg,
+  valueRampColor
+} from "./chunk-P6T66CCZ.js";
+import {
+  resolveTagColor
+} from "./chunk-QLCCJEJI.js";
+import {
+  resolveColor
+} from "./chunk-TLVIHFRO.js";
+
+// src/boxes-and-lines/renderer.ts
+import * as d3Selection from "d3-selection";
+import * as d3Shape from "d3-shape";
+var DIAGRAM_PADDING = 20;
+var NODE_FONT_SIZE = 11;
+var MIN_NODE_FONT_SIZE = 9;
+var EDGE_LABEL_FONT_SIZE = 11;
+var NODE_RX = 8;
+var COLLAPSE_BAR_HEIGHT = 4;
+var ARROWHEAD_W = 5;
+var ARROWHEAD_H = 4;
+var DESC_FONT_SIZE = 10;
+var DESC_LINE_HEIGHT = 1.4;
+var MAX_DESC_LINES = 6;
+var NODE_TEXT_PADDING = 12;
+var GROUP_RX = 8;
+var GROUP_LABEL_FONT_SIZE = 14;
+var GROUP_LABEL_ZONE = 32;
+var RAMP_FLOOR = 15;
+var VALUE_FONT_SIZE = 11;
+var lineGeneratorLR = d3Shape.line().x((d) => d.x).y((d) => d.y).curve(d3Shape.curveBasis);
+var lineGeneratorTB = d3Shape.line().x((d) => d.x).y((d) => d.y).curve(d3Shape.curveBasis);
+var lineGeneratorStraight = d3Shape.line().x((d) => d.x).y((d) => d.y).curve(d3Shape.curveLinear);
+function splitCamelCase(word) {
+  const parts = [];
+  let start = 0;
+  for (let i = 1; i < word.length; i++) {
+    const prev = word[i - 1];
+    const curr = word[i];
+    const next = i + 1 < word.length ? word[i + 1] : "";
+    const lowerToUpper = prev >= "a" && prev <= "z" && curr >= "A" && curr <= "Z";
+    const upperRunEnd = prev >= "A" && prev <= "Z" && curr >= "A" && curr <= "Z" && next >= "a" && next <= "z";
+    if (lowerToUpper || upperRunEnd) {
+      parts.push(word.slice(start, i));
+      start = i;
+    }
+  }
+  parts.push(word.slice(start));
+  return parts.length > 1 ? parts : [word];
+}
+function fitLabelToHeader(label, nodeWidth, maxLines) {
+  const maxTextWidth = nodeWidth - NODE_TEXT_PADDING * 2;
+  const rawParts = label.split(/(\s+|-)/);
+  const words = [];
+  for (const part of rawParts) {
+    if (!part || /^\s+$/.test(part) || part === "-") continue;
+    words.push(...splitCamelCase(part));
+  }
+  for (let fontSize = NODE_FONT_SIZE; fontSize >= MIN_NODE_FONT_SIZE; fontSize--) {
+    if (maxTextWidth < measureText("MM", fontSize)) continue;
+    const lines = [];
+    let current = "";
+    for (const word of words) {
+      const test = current ? `${current} ${word}` : word;
+      if (measureText(test, fontSize) <= maxTextWidth) {
+        current = test;
+      } else {
+        if (current) lines.push(current);
+        current = word;
+      }
+    }
+    if (current) lines.push(current);
+    const fits = (l) => measureText(l, fontSize) <= maxTextWidth;
+    if (lines.length <= maxLines && lines.every(fits)) {
+      return { lines, fontSize };
+    }
+    if (lines.length <= maxLines) {
+      const result2 = lines.map(
+        (l) => fits(l) ? l : truncateText(l, fontSize, maxTextWidth)
+      );
+      return { lines: result2, fontSize };
+    }
+    const result = lines.slice(0, maxLines).map((l) => fits(l) ? l : truncateText(l, fontSize, maxTextWidth));
+    const last = result[maxLines - 1];
+    if (!last.endsWith("\u2026")) {
+      result[maxLines - 1] = truncateText(
+        last + "\u2026",
+        fontSize,
+        maxTextWidth
+      );
+    }
+    return { lines: result, fontSize };
+  }
+  const truncated = truncateText(label, MIN_NODE_FONT_SIZE, maxTextWidth);
+  return { lines: [truncated], fontSize: MIN_NODE_FONT_SIZE };
+}
+function nodeColors(node, tagGroups, activeGroupName, palette, isDark, value, solid) {
+  const neutralFill = mix(palette.bg, palette.text, isDark ? 90 : 95);
+  if (value.active) {
+    if (node.value === void 0) {
+      const text3 = contrastText(
+        neutralFill,
+        palette.textOnFillLight,
+        palette.textOnFillDark
+      );
+      return { fill: neutralFill, stroke: value.hue, text: text3 };
+    }
+    const rampColor = value.fillForValue(node.value);
+    const fill2 = shapeFill(palette, rampColor, isDark, {
+      ...solid !== void 0 && { solid }
+    });
+    const stroke2 = value.twoColor ? rampColor : value.hue;
+    const text2 = contrastText(
+      fill2,
+      palette.textOnFillLight,
+      palette.textOnFillDark
+    );
+    return { fill: fill2, stroke: stroke2, text: text2 };
+  }
+  const tagColor = resolveTagColor(
+    node.metadata,
+    [...tagGroups],
+    activeGroupName
+  );
+  if (tagColor) {
+    const fill2 = shapeFill(palette, tagColor, isDark, {
+      ...solid !== void 0 && { solid }
+    });
+    const stroke2 = tagColor;
+    const text2 = contrastText(
+      fill2,
+      palette.textOnFillLight,
+      palette.textOnFillDark
+    );
+    return { fill: fill2, stroke: stroke2, text: text2 };
+  }
+  const fill = mix(palette.bg, palette.text, isDark ? 90 : 95);
+  const stroke = mix(palette.text, palette.bg, isDark ? 60 : 40);
+  const text = palette.text;
+  return { fill, stroke, text };
+}
+function edgeColor(edge, tagGroups, activeGroupName, palette) {
+  const hasTagMeta = Object.keys(edge.metadata).length > 0 && activeGroupName != null;
+  if (hasTagMeta) {
+    const tagColor = resolveTagColor(
+      edge.metadata,
+      [...tagGroups],
+      activeGroupName
+    );
+    if (tagColor) return tagColor;
+  }
+  return palette.textMuted;
+}
+function ensureArrowMarkers(defs, colors) {
+  for (const color of colors) {
+    const id = `bl-arrow-${color.replace("#", "")}`;
+    if (!defs.select(`#${id}`).empty()) continue;
+    defs.append("marker").attr("id", id).attr("viewBox", `0 0 ${ARROWHEAD_W * 2} ${ARROWHEAD_H * 2}`).attr("refX", ARROWHEAD_W * 2).attr("refY", ARROWHEAD_H).attr("markerWidth", ARROWHEAD_W).attr("markerHeight", ARROWHEAD_H).attr("orient", "auto").append("polygon").attr(
+      "points",
+      `0,0 ${ARROWHEAD_W * 2},${ARROWHEAD_H} 0,${ARROWHEAD_H * 2}`
+    ).attr("fill", color);
+    const revId = `bl-arrow-rev-${color.replace("#", "")}`;
+    if (!defs.select(`#${revId}`).empty()) continue;
+    defs.append("marker").attr("id", revId).attr("viewBox", `0 0 ${ARROWHEAD_W * 2} ${ARROWHEAD_H * 2}`).attr("refX", 0).attr("refY", ARROWHEAD_H).attr("markerWidth", ARROWHEAD_W).attr("markerHeight", ARROWHEAD_H).attr("orient", "auto").append("polygon").attr(
+      "points",
+      `${ARROWHEAD_W * 2},0 0,${ARROWHEAD_H} ${ARROWHEAD_W * 2},${ARROWHEAD_H * 2}`
+    ).attr("fill", color);
+  }
+}
+function renderBoxesAndLines(container, parsed, layout, palette, isDark, options) {
+  const {
+    onClickItem,
+    exportDims,
+    activeTagGroup,
+    hiddenTagValues,
+    hideDescriptions,
+    controlsExpanded,
+    onToggleDescriptions,
+    onToggleControlsExpand,
+    exportMode = false,
+    controlsHost,
+    rampDomain
+  } = options ?? {};
+  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 sctx = ScaleContext.identity();
+  const sDiagramPadding = sctx.aesthetic(DIAGRAM_PADDING);
+  const sMinNodeFontSize = sctx.text(MIN_NODE_FONT_SIZE);
+  const sEdgeLabelFontSize = sctx.text(EDGE_LABEL_FONT_SIZE);
+  const sEdgeStrokeWidth = sctx.structural(EDGE_STROKE_WIDTH);
+  const sNodeStrokeWidth = sctx.structural(NODE_STROKE_WIDTH);
+  const sCollapseBarHeight = sctx.structural(COLLAPSE_BAR_HEIGHT);
+  const sDescFontSize = sctx.text(DESC_FONT_SIZE);
+  const sGroupLabelFontSize = sctx.text(GROUP_LABEL_FONT_SIZE);
+  const sGroupLabelZone = sctx.structural(GROUP_LABEL_ZONE);
+  const sTitleFontSize = sctx.text(TITLE_FONT_SIZE);
+  const sTitleY = sctx.structural(TITLE_Y);
+  const nodeValues = parsed.nodes.filter((n) => n.value !== void 0).map((n) => n.value);
+  const hasRamp = nodeValues.length > 0;
+  const rampMin = rampDomain?.min ?? (hasRamp ? Math.min(...nodeValues) : 0);
+  const rampMax = rampDomain?.max ?? Math.max(...nodeValues);
+  const rampHue = resolveColor(parsed.boxMetricColor ?? "", palette) ?? palette.primary;
+  const rampLow = parsed.boxMetricLowColor ? resolveColor(parsed.boxMetricLowColor, palette) ?? void 0 : void 0;
+  const rampBase = isDark ? mix(palette.surface, palette.text, 28) : palette.bg;
+  const rampLowFloor = mix(rampHue, rampBase, RAMP_FLOOR);
+  const fillForValue = (v) => {
+    const t = rampMax > rampMin ? (v - rampMin) / (rampMax - rampMin) : 1;
+    if (rampLow !== void 0)
+      return valueRampColor(rampLow, rampHue, t, { isDark });
+    const pct = RAMP_FLOOR + Math.max(0, Math.min(1, t)) * (100 - RAMP_FLOOR);
+    return mix(rampHue, rampBase, pct);
+  };
+  const VALUE_NAME = hasRamp ? parsed.boxMetric?.trim() || "Value" : null;
+  const matchColorGroup = (v) => {
+    const lv = v.trim().toLowerCase();
+    if (lv === "" || lv === "none") return null;
+    const tg = parsed.tagGroups.find((g) => g.name.toLowerCase() === lv);
+    if (tg) return tg.name;
+    if (lv === VALUE_NAME?.toLowerCase()) return VALUE_NAME;
+    return v;
+  };
+  const override = activeTagGroup;
+  let activeGroup;
+  if (override !== void 0) {
+    activeGroup = override === null ? null : matchColorGroup(override);
+  } else if (parsed.options["active-tag"] !== void 0) {
+    activeGroup = matchColorGroup(parsed.options["active-tag"]);
+  } else {
+    activeGroup = VALUE_NAME ?? (parsed.tagGroups.length > 0 ? parsed.tagGroups[0].name : null);
+  }
+  const activeIsValue = VALUE_NAME !== null && activeGroup === VALUE_NAME;
+  const valueGroup = VALUE_NAME !== null ? {
+    name: VALUE_NAME,
+    entries: [],
+    gradient: {
+      min: rampMin,
+      max: rampMax,
+      low: rampLow ?? rampLowFloor,
+      high: rampHue
+    }
+  } : null;
+  const legendGroups = [
+    ...valueGroup ? [valueGroup] : [],
+    ...parsed.tagGroups
+  ];
+  const reserveHasDescriptions = parsed.nodes.some(
+    (n) => n.description && n.description.length > 0
+  );
+  const willRenderLegend = legendGroups.length > 0 || reserveHasDescriptions && controlsHost !== "app";
+  const sLegendHeight = willRenderLegend ? sctx.structural(
+    getMaxLegendReservedHeight(
+      {
+        groups: legendGroups,
+        position: { placement: "top-center", titleRelation: "below-title" },
+        mode: exportMode ? "export" : "preview"
+      },
+      width
+    )
+  ) : 0;
+  const hidden = hiddenTagValues ?? parsed.initialHiddenTagValues;
+  const nodeMap = /* @__PURE__ */ new Map();
+  for (const node of parsed.nodes) nodeMap.set(node.label, node);
+  const layoutNodeMap = /* @__PURE__ */ new Map();
+  for (const ln of layout.nodes) layoutNodeMap.set(ln.label, ln);
+  const showTitle = !!parsed.title && parsed.options["no-title"] !== "on";
+  const titleOffset = showTitle ? 40 : 0;
+  const hasAnyDescriptions = parsed.nodes.some(
+    (n) => n.description && n.description.length > 0
+  );
+  const needsLegend = legendGroups.length > 0 || hasAnyDescriptions && onToggleDescriptions;
+  const legendH = needsLegend ? sLegendHeight + 8 : 0;
+  const groupLabelsSet = new Set(layout.groups.map((g) => g.label));
+  let labelZoneExtension = 0;
+  for (const group of parsed.groups) {
+    if (group.children.some((c) => groupLabelsSet.has(c))) {
+      labelZoneExtension += sGroupLabelZone;
+    }
+  }
+  const contentW = layout.width;
+  const contentH = layout.height + titleOffset + legendH + labelZoneExtension;
+  const scaleX = width / (contentW + sDiagramPadding * 2);
+  const scaleY = height / (contentH + sDiagramPadding * 2);
+  const scale = Math.min(scaleX, scaleY, 3);
+  let centerShiftX = 0;
+  let centerShiftY = 0;
+  if (parsed.nodePositions && parsed.nodePositions.size > 0) {
+    let bMinX = Infinity, bMinY = Infinity, bMaxX = -Infinity, bMaxY = -Infinity;
+    const accB = (x, y) => {
+      if (x < bMinX) bMinX = x;
+      if (x > bMaxX) bMaxX = x;
+      if (y < bMinY) bMinY = y;
+      if (y > bMaxY) bMaxY = y;
+    };
+    for (const n of layout.nodes) {
+      accB(n.x - n.width / 2, n.y - n.height / 2);
+      accB(n.x + n.width / 2, n.y + n.height / 2);
+    }
+    for (const g of layout.groups) {
+      accB(g.x - g.width / 2, g.y - g.height / 2);
+      accB(g.x + g.width / 2, g.y + g.height / 2);
+    }
+    for (const e of layout.edges) for (const p of e.points) accB(p.x, p.y);
+    if (Number.isFinite(bMinX)) {
+      centerShiftX = (layout.width - bMaxX - bMinX) / 2;
+      centerShiftY = (layout.height - bMaxY - bMinY) / 2;
+    }
+  }
+  const offsetX = (width - contentW * scale) / 2 + centerShiftX * scale;
+  const offsetY = sDiagramPadding + titleOffset + legendH + centerShiftY * scale;
+  const svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").style("font-family", FONT_FAMILY).style("background", palette.bg);
+  if (sctx.isBelowFloor) {
+    svg.attr("width", "100%");
+  }
+  const defs = svg.append("defs");
+  if (showTitle) {
+    svg.append("text").attr("x", width / 2).attr("y", sTitleY).attr("text-anchor", "middle").attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).text(parsed.title);
+  }
+  const diagramG = svg.append("g").attr("transform", `translate(${offsetX},${offsetY}) scale(${scale})`);
+  const arrowColors = /* @__PURE__ */ new Set();
+  const edgeColorMap = /* @__PURE__ */ new Map();
+  for (let i = 0; i < layout.edges.length; i++) {
+    const c = edgeColor(
+      // In-bounds by loop guard.
+      layout.edges[i],
+      parsed.tagGroups,
+      activeGroup,
+      palette
+    );
+    arrowColors.add(c);
+    edgeColorMap.set(i, c);
+  }
+  ensureArrowMarkers(defs, arrowColors);
+  const sortedGroups = [...layout.groups].sort(
+    (a, b) => b.width * b.height - a.width * a.height
+  );
+  const groupLabels = new Set(layout.groups.map((g) => g.label));
+  const hasSubGroups = /* @__PURE__ */ new Set();
+  for (const group of parsed.groups) {
+    for (const child of group.children) {
+      if (groupLabels.has(child)) hasSubGroups.add(group.label);
+    }
+  }
+  for (const group of sortedGroups) {
+    const gx = group.x - group.width / 2;
+    const needsExtra = !group.collapsed && hasSubGroups.has(group.label);
+    const gy = needsExtra ? group.y - group.height / 2 - sGroupLabelZone : group.y - group.height / 2;
+    const groupHeight = needsExtra ? group.height + sGroupLabelZone : group.height;
+    const groupG = diagramG.append("g").attr(
+      "class",
+      group.collapsed ? "bl-group bl-group-collapsed" : "bl-group"
+    ).attr("data-line-number", String(group.lineNumber)).attr("data-node-id", group.label).attr("data-group-toggle", group.label).style("cursor", "pointer");
+    if (group.collapsed) {
+      const fillColor = themeBaseBg(palette, isDark);
+      const strokeColor = palette.border;
+      groupG.append("rect").attr("x", gx).attr("y", gy).attr("width", group.width).attr("height", group.height).attr("rx", NODE_RX).attr("ry", NODE_RX).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", sNodeStrokeWidth);
+      const clipId = `bl-clip-${group.label.replace(/[[\]\s]/g, "")}`;
+      groupG.append("clipPath").attr("id", clipId).append("rect").attr("x", gx).attr("y", gy).attr("width", group.width).attr("height", group.height).attr("rx", NODE_RX);
+      groupG.append("rect").attr("x", gx).attr("y", gy + group.height - sCollapseBarHeight).attr("width", group.width).attr("height", sCollapseBarHeight).attr("fill", strokeColor).attr("clip-path", `url(#${clipId})`).attr("class", "bl-collapse-bar");
+      const maxLabelLines = Math.max(
+        2,
+        Math.floor((group.height - 16) / (sMinNodeFontSize * 1.3))
+      );
+      const fitted = fitLabelToHeader(group.label, group.width, maxLabelLines);
+      const lineH = fitted.fontSize * 1.3;
+      const totalH = fitted.lines.length * lineH;
+      for (let li = 0; li < fitted.lines.length; li++) {
+        groupG.append("text").attr("class", "bl-group-label").attr("x", group.x).attr("y", group.y - totalH / 2 + lineH / 2 + li * lineH).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-family", FONT_FAMILY).attr("font-size", fitted.fontSize).attr("font-weight", "600").attr("fill", palette.text).text(fitted.lines[li]);
+      }
+    } else {
+      groupG.append("rect").attr("x", gx).attr("y", gy).attr("width", group.width).attr("height", groupHeight).attr("rx", GROUP_RX).attr("ry", GROUP_RX).attr("fill", mix(palette.surface, palette.bg, 40)).attr("stroke", palette.textMuted).attr("stroke-width", 1).attr("stroke-opacity", 0.35);
+      groupG.append("text").attr("class", "bl-group-label").attr("x", gx + group.width / 2).attr("y", gy + 18).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", sGroupLabelFontSize).attr("font-weight", "600").attr("fill", palette.text).text(group.label);
+    }
+  }
+  for (let i = 0; i < layout.edges.length; i++) {
+    const le = layout.edges[i];
+    const color = edgeColorMap.get(i) ?? palette.textMuted;
+    if (hidden.size > 0) {
+      let isHidden = false;
+      for (const [groupKey, hiddenVals] of hidden) {
+        const val = le.metadata[groupKey];
+        if (val && hiddenVals.has(val.toLowerCase())) {
+          isHidden = true;
+          break;
+        }
+      }
+      if (isHidden) continue;
+    }
+    if (le.source === le.target) {
+      const nodeLayout = layoutNodeMap.get(le.source);
+      if (nodeLayout) {
+        const edgeG2 = diagramG.append("g").attr("class", "bl-edge-group").attr("data-line-number", String(le.lineNumber)).attr("data-from", le.source).attr("data-to", le.target);
+        const markerId2 = `bl-arrow-${color.replace("#", "")}`;
+        const cx = nodeLayout.x;
+        const cy = nodeLayout.y;
+        const hw = nodeLayout.width / 2;
+        const hh = nodeLayout.height / 2;
+        const pad = 20;
+        const startX = cx + hw;
+        const startY = cy + hh * 0.4;
+        const endX = cx + hw * 0.4;
+        const endY = cy + hh;
+        const cp1x = startX + hw + pad;
+        const cp1y = startY;
+        const cp2x = endX;
+        const cp2y = endY + hh + pad;
+        edgeG2.append("path").attr("class", "bl-edge").attr(
+          "d",
+          `M ${startX} ${startY} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${endX} ${endY}`
+        ).attr("fill", "none").attr("stroke", color).attr("stroke-width", sEdgeStrokeWidth).attr("marker-end", `url(#${markerId2})`);
+      }
+      continue;
+    }
+    let points;
+    if (le.yOffset !== 0 && le.parallelCount > 1) {
+      const srcLayout = layoutNodeMap.get(le.source);
+      const tgtLayout = layoutNodeMap.get(le.target);
+      const srcY = srcLayout?.y ?? le.points[0]?.y ?? 0;
+      const tgtY = tgtLayout?.y ?? le.points[le.points.length - 1]?.y ?? 0;
+      const srcX = le.points[0]?.x ?? 0;
+      const tgtX = le.points[le.points.length - 1]?.x ?? 0;
+      const midX = (srcX + tgtX) / 2;
+      const midY = (srcY + tgtY) / 2;
+      points = [
+        { x: srcX, y: srcY },
+        // port (bundled)
+        { x: srcX + (midX - srcX) * 0.3, y: srcY + le.yOffset * 0.5 },
+        // separate
+        { x: midX, y: midY + le.yOffset },
+        // full spread
+        { x: tgtX - (tgtX - midX) * 0.3, y: tgtY + le.yOffset * 0.5 },
+        // converge
+        { x: tgtX, y: tgtY }
+        // port (bundled)
+      ];
+    } else {
+      points = le.points.map((p) => ({ x: p.x, y: p.y }));
+    }
+    if (points.length < 2) continue;
+    const edgeG = diagramG.append("g").attr("class", "bl-edge-group").attr("data-line-number", String(le.lineNumber)).attr("data-from", le.source).attr("data-to", le.target);
+    const markerId = `bl-arrow-${color.replace("#", "")}`;
+    const gen = le.straight ? lineGeneratorStraight : parsed.direction === "TB" ? lineGeneratorTB : lineGeneratorLR;
+    const path = edgeG.append("path").attr("class", "bl-edge").attr("d", gen(points) ?? "").attr("fill", "none").attr("stroke", color).attr("stroke-width", sEdgeStrokeWidth).attr("marker-end", `url(#${markerId})`);
+    if (le.bidirectional) {
+      const revId = `bl-arrow-rev-${color.replace("#", "")}`;
+      path.attr("marker-start", `url(#${revId})`);
+    }
+  }
+  for (const ln of layout.nodes) {
+    const node = nodeMap.get(ln.label);
+    if (!node) continue;
+    if (hidden.size > 0) {
+      let isHidden = false;
+      for (const [groupKey, hiddenVals] of hidden) {
+        const val = node.metadata[groupKey];
+        if (val && hiddenVals.has(val.toLowerCase())) {
+          isHidden = true;
+          break;
+        }
+      }
+      if (isHidden) continue;
+    }
+    const solid = parsed.options["solid-fill"] === "on";
+    const colors = nodeColors(
+      node,
+      parsed.tagGroups,
+      activeGroup,
+      palette,
+      isDark,
+      {
+        active: activeIsValue,
+        hue: rampHue,
+        twoColor: rampLow !== void 0,
+        fillForValue
+      },
+      solid
+    );
+    const dividerStroke = solid ? colors.text : colors.stroke;
+    const nodeG = diagramG.append("g").attr("class", "bl-node").attr("transform", `translate(${ln.x},${ln.y})`).attr("data-line-number", node.lineNumber).attr("data-node-id", node.label).style("cursor", onClickItem ? "pointer" : "default").style("--bl-node-stroke", colors.stroke);
+    for (const [key, val] of Object.entries(node.metadata)) {
+      nodeG.attr(`data-tag-${key.toLowerCase()}`, val.toLowerCase());
+    }
+    if (node.value !== void 0) {
+      nodeG.attr("data-value", node.value);
+    }
+    if (onClickItem) {
+      nodeG.on("click", (event) => {
+        const target = event.target;
+        if (target?.closest("a")) return;
+        onClickItem(node.lineNumber);
+      });
+    }
+    const x = -ln.width / 2;
+    const y = -ln.height / 2;
+    nodeG.append("rect").attr("x", x).attr("y", y).attr("width", ln.width).attr("height", ln.height).attr("rx", NODE_RX).attr("ry", NODE_RX).attr("fill", colors.fill).attr("stroke", colors.stroke).attr("stroke-width", sNodeStrokeWidth);
+    const desc = node.description;
+    if (desc && desc.length > 0 && !hideDescriptions) {
+      const MAX_LABEL_LINES = 3;
+      const fitted = fitLabelToHeader(node.label, ln.width, MAX_LABEL_LINES);
+      const labelLines = fitted.lines;
+      const labelLineH = fitted.fontSize * 1.3;
+      const labelTotalH = labelLines.length * labelLineH;
+      const headerH = labelTotalH + 12;
+      const headerCenterY = -ln.height / 2 + headerH / 2;
+      for (let li = 0; li < labelLines.length; li++) {
+        nodeG.append("text").attr("x", 0).attr(
+          "y",
+          headerCenterY - labelTotalH / 2 + labelLineH / 2 + li * labelLineH
+        ).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", fitted.fontSize).attr("font-weight", "bold").attr("fill", colors.text).text(labelLines[li]);
+      }
+      const sepY = -ln.height / 2 + headerH;
+      nodeG.append("line").attr("x1", -ln.width / 2).attr("y1", sepY).attr("x2", ln.width / 2).attr("y2", sepY).attr("stroke", dividerStroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+      const descStartY = sepY + 4 + sDescFontSize;
+      const maxTextWidth = ln.width - NODE_TEXT_PADDING * 2;
+      const charsPerLine = Math.floor(
+        maxTextWidth / (sDescFontSize * CHAR_WIDTH_RATIO)
+      );
+      const descLineH = sDescFontSize * DESC_LINE_HEIGHT;
+      const displayLen = (text) => text.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/\*\*(.+?)\*\*/g, "$1").replace(/\*(.+?)\*/g, "$1").replace(/`(.+?)`/g, "$1").replace(/https?:\/\/\S+/g, (u) => u.slice(0, 20)).length;
+      const normalizedLines = [];
+      for (const descLine of desc) {
+        let normalized = descLine.startsWith("- ") ? "\u2022 " + descLine.slice(2) : descLine;
+        normalized = normalized.replace(
+          /\bhttps?\s+([\w][\w.-]+\.[a-z]{2,}(?:\/\S*)?)/gi,
+          (_, domain) => `https://${domain}`
+        );
+        normalizedLines.push(normalized);
+      }
+      const wrappedLinesShared = wrapDescriptionLines(
+        normalizedLines,
+        charsPerLine,
+        displayLen
+      );
+      const truncated = wrappedLinesShared.length > MAX_DESC_LINES;
+      const visibleLines = truncated ? wrappedLinesShared.slice(0, MAX_DESC_LINES) : wrappedLinesShared;
+      const BULLET_GLYPH_X = -ln.width / 2 + 6;
+      const BULLET_BODY_X = BULLET_GLYPH_X + 10;
+      const descColor = relativeLuminance(colors.fill) > 0.5 ? palette.textMuted : mix(colors.text, colors.fill, 75);
+      for (let li = 0; li < visibleLines.length; li++) {
+        const line2 = visibleLines[li];
+        let lineText = line2.text;
+        if (truncated && li === visibleLines.length - 1) {
+          lineText = measureText(lineText, sDescFontSize) >= maxTextWidth ? truncateText(lineText, sDescFontSize, maxTextWidth) : lineText + "\u2026";
+        }
+        const y2 = descStartY + li * descLineH;
+        if (line2.kind === "bullet-first") {
+          nodeG.append("text").attr("x", BULLET_GLYPH_X).attr("y", y2).attr("text-anchor", "start").attr("dominant-baseline", "central").attr("font-size", sDescFontSize).attr("fill", descColor).text("\u2022");
+        }
+        const isBullet = line2.kind === "bullet-first" || line2.kind === "bullet-cont";
+        const textEl = nodeG.append("text").attr("x", isBullet ? BULLET_BODY_X : 0).attr("y", y2).attr("text-anchor", isBullet ? "start" : "middle").attr("dominant-baseline", "central").attr("font-size", DESC_FONT_SIZE).attr("fill", descColor);
+        renderInlineText(textEl, lineText, palette, sDescFontSize);
+      }
+      if (truncated) {
+        const fullText = desc.join(" ");
+        const tooltipText = fullText.length > 200 ? fullText.slice(0, 199) + "\u2026" : fullText;
+        nodeG.append("title").text(tooltipText);
+      }
+      if (parsed.showValues && node.value !== void 0) {
+        const valueLabel = parsed.boxMetric ? `${parsed.boxMetric}: ${node.value}` : String(node.value);
+        nodeG.append("text").attr("class", "bl-node-value").attr("x", 0).attr("y", descStartY + visibleLines.length * descLineH).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", VALUE_FONT_SIZE).attr("font-weight", "600").attr("fill", colors.text).text(valueLabel);
+      }
+    } else if (parsed.showValues && node.value !== void 0) {
+      const valueLabel = parsed.boxMetric ? `${parsed.boxMetric}: ${node.value}` : String(node.value);
+      const headerH = ln.height / 2;
+      const sepY = -ln.height / 2 + headerH;
+      const fitted = fitLabelToHeader(node.label, ln.width, 2);
+      const labelLineH = fitted.fontSize * 1.3;
+      const labelTotalH = fitted.lines.length * labelLineH;
+      const headerCenterY = -ln.height / 2 + headerH / 2;
+      for (let li = 0; li < fitted.lines.length; li++) {
+        nodeG.append("text").attr("x", 0).attr(
+          "y",
+          headerCenterY - labelTotalH / 2 + labelLineH / 2 + li * labelLineH
+        ).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", fitted.fontSize).attr("font-weight", "bold").attr("fill", colors.text).text(fitted.lines[li]);
+      }
+      nodeG.append("line").attr("x1", -ln.width / 2).attr("y1", sepY).attr("x2", ln.width / 2).attr("y2", sepY).attr("stroke", dividerStroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+      nodeG.append("text").attr("class", "bl-node-value").attr("x", 0).attr("y", (sepY + ln.height / 2) / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", VALUE_FONT_SIZE).attr("fill", colors.text).attr("opacity", 0.85).text(valueLabel);
+    } else {
+      const maxLabelLines = Math.max(
+        2,
+        Math.floor((ln.height - 16) / (sMinNodeFontSize * 1.3))
+      );
+      const fitted = fitLabelToHeader(node.label, ln.width, maxLabelLines);
+      const lineH = fitted.fontSize * 1.3;
+      const totalH = fitted.lines.length * lineH;
+      for (let li = 0; li < fitted.lines.length; li++) {
+        nodeG.append("text").attr("x", 0).attr("y", -totalH / 2 + lineH / 2 + li * lineH).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", fitted.fontSize).attr("font-weight", "600").attr("fill", colors.text).text(fitted.lines[li]);
+      }
+    }
+    if (ln.note) {
+      if (ln.note.collapsed) {
+        renderNoteBadge(
+          nodeG,
+          {
+            x: ln.width / 2 - NOTE_BADGE_RADIUS - 3,
+            y: -ln.height / 2 + NOTE_BADGE_RADIUS + 3
+          },
+          palette,
+          {
+            isDark,
+            ...ln.note.color && { color: ln.note.color },
+            lineNumber: ln.note.lineNumber,
+            endLineNumber: ln.note.endLineNumber
+          }
+        );
+      } else {
+        const [cx1, cy1, cx2, cy2] = noteConnectorPoints(
+          { width: ln.width, height: ln.height },
+          ln.note
+        );
+        renderNoteConnector(nodeG, cx1, cy1, cx2, cy2, palette);
+        renderNoteBox(
+          nodeG,
+          {
+            x: ln.note.x,
+            y: ln.note.y,
+            width: ln.note.width,
+            height: ln.note.height
+          },
+          ln.note.lines,
+          palette,
+          {
+            isDark,
+            ...ln.note.color && { color: ln.note.color },
+            lineNumber: ln.note.lineNumber,
+            endLineNumber: ln.note.endLineNumber,
+            interactive: true
+          }
+        );
+      }
+    }
+  }
+  const labelLayer = diagramG.append("g").attr("class", "bl-edge-labels");
+  const labelLineHeight = sEdgeLabelFontSize * 1.3;
+  for (const le of layout.edges) {
+    if (!le.labelLines || le.labelLines.length === 0) continue;
+    if (le.labelX === void 0 || le.labelY === void 0) continue;
+    const lx = le.labelX;
+    const ly = le.labelY;
+    if (hidden.size > 0) {
+      let isHidden = false;
+      for (const [groupKey, hiddenVals] of hidden) {
+        const val = le.metadata[groupKey];
+        if (val && hiddenVals.has(val.toLowerCase())) {
+          isHidden = true;
+          break;
+        }
+      }
+      if (isHidden) continue;
+    }
+    const lw = le.labelWidth ?? 0;
+    const lh = le.labelHeight ?? sEdgeLabelFontSize + 6;
+    const lines = le.labelLines;
+    const labelG = labelLayer.append("g").attr("class", "bl-edge-label").attr("data-line-number", String(le.lineNumber));
+    labelG.append("rect").attr("x", lx - lw / 2).attr("y", ly - lh / 2).attr("width", lw).attr("height", lh).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.72);
+    const text = labelG.append("text").attr("x", lx).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", sEdgeLabelFontSize).attr("fill", palette.textMuted);
+    const firstY = ly - (lines.length - 1) / 2 * labelLineHeight + sEdgeLabelFontSize / 3;
+    lines.forEach((line2, k) => {
+      text.append("tspan").attr("x", lx).attr("y", firstY + k * labelLineHeight).text(line2);
+    });
+  }
+  const hasDescriptions = parsed.nodes.some(
+    (n) => n.description && n.description.length > 0
+  );
+  const hasLegend = legendGroups.length > 0 || hasDescriptions && controlsHost !== "app";
+  if (hasLegend) {
+    let controlsGroup;
+    if (hasDescriptions && (onToggleDescriptions || controlsHost === "app")) {
+      controlsGroup = {
+        toggles: [
+          {
+            id: "descriptions",
+            type: "toggle",
+            label: "Descriptions",
+            active: !hideDescriptions,
+            onToggle: () => {
+            }
+          }
+        ]
+      };
+    }
+    const legendCallbacks = {
+      ...onToggleControlsExpand !== void 0 && {
+        onControlsExpand: onToggleControlsExpand
+      },
+      onControlsToggle: (toggleId, active) => {
+        if (toggleId === "descriptions" && onToggleDescriptions) {
+          onToggleDescriptions(active);
+        }
+      }
+    };
+    const legendG = svg.append("g").attr("transform", `translate(0,${titleOffset + 4})`);
+    renderIntegratedLegend(legendG, {
+      groups: legendGroups,
+      activeGroup,
+      mode: exportMode ? "export" : "preview",
+      // Keep inactive sibling tag groups visible as collapsed pills so the user
+      // can click one to flip the active colouring dimension (preview only).
+      showInactivePills: true,
+      ...controlsGroup !== void 0 && { controlsGroup },
+      ...controlsHost !== void 0 && { controlsHost },
+      ...controlsExpanded !== void 0 && { controlsExpanded },
+      callbacks: legendCallbacks,
+      palette,
+      isDark,
+      width
+    });
+    legendG.selectAll("[data-legend-group]").classed("bl-legend-group", true);
+  }
+  if (!exportDims && !exportMode) {
+    const iconSize = 14;
+    const focusG = svg.append("g").attr("class", "bl-focus-icon").attr("data-export-ignore", "true").style("display", "none").style("pointer-events", "auto").style("cursor", "pointer");
+    focusG.append("rect").attr("x", -3).attr("y", -3).attr("width", iconSize + 6).attr("height", iconSize + 6).attr("fill", "transparent");
+    const cx = iconSize / 2;
+    const cy = iconSize / 2;
+    focusG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", iconSize / 2 - 1).attr("fill", palette.bg).attr("stroke", palette.textMuted).attr("stroke-width", 1.5);
+    focusG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 2).attr("fill", palette.textMuted);
+  }
+}
+function renderBoxesAndLinesForExport(container, parsed, layout, palette, isDark, options) {
+  renderBoxesAndLines(container, parsed, layout, palette, isDark, {
+    ...options?.exportDims !== void 0 && {
+      exportDims: options.exportDims
+    },
+    ...options?.activeTagGroup !== void 0 && {
+      activeTagGroup: options.activeTagGroup
+    },
+    ...options?.hiddenTagValues !== void 0 && {
+      hiddenTagValues: options.hiddenTagValues
+    },
+    ...options?.exportMode !== void 0 && {
+      exportMode: options.exportMode
+    }
+  });
+}
+
+export {
+  renderBoxesAndLines,
+  renderBoxesAndLinesForExport
+};
+//# sourceMappingURL=chunk-2LACINWN.js.map