@diagrammo/dgmo 0.46.0 → 0.47.0

package/dist/chunk-4GRI7MEB.js

@@ -0,0 +1,1604 @@
+import {
+  parseInlineMarkdown,
+  safeHref
+} from "./chunk-3HDBAXF5.js";
+import {
+  renderIntegratedLegend
+} from "./chunk-PWIHZ6NJ.js";
+import {
+  ScaleContext
+} from "./chunk-YYVTBZZC.js";
+import {
+  getMaxLegendReservedHeight
+} from "./chunk-YAA6IID3.js";
+import {
+  FONT_FAMILY
+} from "./chunk-6KFWC4CO.js";
+import {
+  measureText,
+  truncateText,
+  wrapTextToWidth
+} from "./chunk-WCT3NYCV.js";
+import {
+  contrastText,
+  mix,
+  shapeFill
+} from "./chunk-P6T66CCZ.js";
+
+// src/tech-radar/renderer.ts
+import * as d3Selection2 from "d3-selection";
+
+// src/tech-radar/layout.ts
+var POSITION_ORDER = [
+  "top-left",
+  "top-right",
+  "bottom-right",
+  "bottom-left"
+];
+function getQuadrantArc(position) {
+  switch (position) {
+    case "top-right":
+      return { startAngle: 0, endAngle: Math.PI / 2 };
+    case "top-left":
+      return { startAngle: Math.PI / 2, endAngle: Math.PI };
+    case "bottom-left":
+      return { startAngle: Math.PI, endAngle: 3 * Math.PI / 2 };
+    case "bottom-right":
+      return { startAngle: 3 * Math.PI / 2, endAngle: 2 * Math.PI };
+  }
+}
+var BASE_BLIP_RADIUS = 12;
+var MIN_BLIP_RADIUS = 7;
+function computeRadarLayout(parsed, width, height, ctx) {
+  const points = [];
+  if (parsed.rings.length === 0 || parsed.quadrants.length === 0) return points;
+  const sc = ctx ?? ScaleContext.identity();
+  const sBlipRadius = Math.max(
+    MIN_BLIP_RADIUS,
+    sc.structural(BASE_BLIP_RADIUS)
+  );
+  const cx = width / 2;
+  const cy = height / 2;
+  const maxRadius = Math.min(cx, cy) * 0.88;
+  const ringCount = parsed.rings.length;
+  const ringBandWidth = maxRadius / ringCount;
+  const ringOrder = parsed.rings.map((r) => r.name);
+  const radialPadding = ringBandWidth * 0.12;
+  const angularPadding = 0.05;
+  for (const quadrant of parsed.quadrants) {
+    const quadrantIndex = POSITION_ORDER.indexOf(quadrant.position);
+    const { startAngle, endAngle } = getQuadrantArc(quadrant.position);
+    const usableArcStart = startAngle + angularPadding;
+    const usableArcEnd = endAngle - angularPadding;
+    const blipsByRing = /* @__PURE__ */ new Map();
+    for (const blip of quadrant.blips) {
+      const list = blipsByRing.get(blip.ring) ?? [];
+      list.push(blip);
+      blipsByRing.set(blip.ring, list);
+    }
+    const blipRadius = Math.max(
+      MIN_BLIP_RADIUS,
+      Math.min(sBlipRadius, (ringBandWidth - 2 * radialPadding) / 3)
+    );
+    for (const [ringName, blips] of blipsByRing) {
+      const ringIndex = ringOrder.indexOf(ringName);
+      if (ringIndex < 0) continue;
+      const rInner = ringIndex * ringBandWidth + radialPadding;
+      const rOuter = (ringIndex + 1) * ringBandWidth - radialPadding;
+      const rMid = (rInner + rOuter) / 2;
+      const usableRadial = rOuter - rInner - blipRadius * 2;
+      const arcSpan = usableArcEnd - usableArcStart;
+      const placedPoints = [];
+      for (let bi = 0; bi < blips.length; bi++) {
+        const blip = blips[bi];
+        let angle;
+        if (blips.length === 1) {
+          angle = (usableArcStart + usableArcEnd) / 2;
+        } else {
+          angle = usableArcStart + (bi + 0.5) / blips.length * arcSpan;
+        }
+        let radius;
+        if (blips.length <= 3) {
+          radius = rMid;
+        } else {
+          const radialSlots = Math.min(3, Math.ceil(blips.length / 3));
+          const slot = bi % radialSlots;
+          radius = rInner + blipRadius + slot / Math.max(1, radialSlots - 1) * usableRadial;
+        }
+        let attempts = 0;
+        while (attempts < 20) {
+          const x = cx + radius * Math.cos(angle);
+          const y = cy - radius * Math.sin(angle);
+          const overlapping = placedPoints.some((p) => {
+            const px = cx + p.radius * Math.cos(p.angle);
+            const py = cy - p.radius * Math.sin(p.angle);
+            const dx = x - px;
+            const dy = y - py;
+            return Math.sqrt(dx * dx + dy * dy) < blipRadius * 2.2;
+          });
+          if (!overlapping) break;
+          radius += blipRadius * 0.8;
+          if (radius > rOuter - blipRadius) {
+            radius = rInner + blipRadius;
+            angle += arcSpan * 0.05;
+            if (angle > usableArcEnd) angle = usableArcEnd;
+          }
+          attempts++;
+        }
+        placedPoints.push({ angle, radius });
+        points.push({
+          blip,
+          x: cx + radius * Math.cos(angle),
+          y: cy - radius * Math.sin(angle),
+          quadrantIndex,
+          ringIndex
+        });
+      }
+    }
+  }
+  return points;
+}
+function getRadarGeometry(width, height, ringCount) {
+  const cx = width / 2;
+  const cy = height / 2;
+  const maxRadius = Math.min(cx, cy) * 0.88;
+  return { cx, cy, maxRadius, ringBandWidth: maxRadius / ringCount };
+}
+
+// src/tech-radar/shared.ts
+var DEFAULT_QUADRANT_COLORS = {
+  "top-left": "blue",
+  "top-right": "green",
+  "bottom-left": "red",
+  "bottom-right": "orange"
+};
+function resolveQuadrantColor(position, color, palette) {
+  const name = color ?? DEFAULT_QUADRANT_COLORS[position];
+  return palette.colors[name] ?? palette.border;
+}
+function renderTrendIndicator(g, trend, color, cx, cy, r, angleToCenter) {
+  g.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r * 0.65).attr("fill", color);
+  if (trend === "new") {
+    g.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r).attr("fill", "none").attr("stroke", color).attr("stroke-width", 1.5);
+  } else if (trend === "up" || trend === "down") {
+    const crescentAngle = trend === "up" ? angleToCenter : angleToCenter + Math.PI;
+    renderCrescent(g, cx, cy, r, crescentAngle, color);
+  }
+}
+function renderCrescent(g, cx, cy, r, angle, color) {
+  const outerR = r;
+  const halfSpan = Math.PI * 4 / 9;
+  const startAngle = angle - halfSpan;
+  const endAngle = angle + halfSpan;
+  const x1 = cx + outerR * Math.cos(startAngle);
+  const y1 = cy + outerR * Math.sin(startAngle);
+  const x2 = cx + outerR * Math.cos(endAngle);
+  const y2 = cy + outerR * Math.sin(endAngle);
+  const largeArc = halfSpan * 2 > Math.PI ? 1 : 0;
+  g.append("path").attr("d", `M${x1},${y1} A${outerR},${outerR} 0 ${largeArc},1 ${x2},${y2}`).attr("fill", "none").attr("stroke", color).attr("stroke-width", 2.5).attr("stroke-linecap", "round");
+}
+var DIM_OPACITY = 0.25;
+var TREND_ITEMS = [
+  { trend: "new", label: "New" },
+  { trend: "up", label: "Moved in" },
+  { trend: "down", label: "Moved out" },
+  { trend: null, label: "No change" }
+];
+function createTooltip(container, palette, isDark) {
+  container.style.position = "relative";
+  const existing = container.querySelector("[data-d3-tooltip]");
+  if (existing) {
+    existing.style.display = "none";
+    return existing;
+  }
+  const tip = document.createElement("div");
+  tip.setAttribute("data-d3-tooltip", "");
+  tip.style.position = "absolute";
+  tip.style.display = "none";
+  tip.style.pointerEvents = "none";
+  tip.style.padding = "6px 10px";
+  tip.style.borderRadius = "4px";
+  tip.style.fontSize = "12px";
+  tip.style.fontFamily = FONT_FAMILY;
+  tip.style.lineHeight = "1.4";
+  tip.style.zIndex = "10";
+  tip.style.whiteSpace = "nowrap";
+  tip.style.background = palette.surface;
+  tip.style.color = palette.text;
+  tip.style.boxShadow = isDark ? "0 2px 6px rgba(0,0,0,0.3)" : "0 2px 6px rgba(0,0,0,0.12)";
+  container.appendChild(tip);
+  return tip;
+}
+
+// src/tech-radar/interactive.ts
+import * as d3Selection from "d3-selection";
+var BLIP_RADIUS = 13;
+var BLIP_FONT_SIZE = 10;
+var TITLE_FONT_SIZE = 16;
+var NARROW_BREAKPOINT = 600;
+function renderQuadrantFocus(container, parsed, quadrantPosition, palette, isDark, onClickItem, exportDims, _options) {
+  const quadrant = parsed.quadrants.find(
+    (q) => q.position === quadrantPosition
+  );
+  if (!quadrant) return;
+  container.innerHTML = "";
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
+  if (width <= 0 || height <= 0) return;
+  const isNarrow = width < NARROW_BREAKPOINT;
+  const qColor = resolveQuadrantColor(
+    quadrant.position,
+    quadrant.color,
+    palette
+  );
+  const titleBar = document.createElement("div");
+  titleBar.style.cssText = `
+    display: flex; align-items: baseline; gap: 8px;
+    padding: 8px 12px; font-family: ${FONT_FAMILY};
+    font-size: ${TITLE_FONT_SIZE}px; background: ${palette.bg};
+  `;
+  const titleLink = document.createElement("span");
+  titleLink.textContent = parsed.title || "Tech Radar";
+  titleLink.style.cssText = `font-weight: bold; color: ${palette.text}; cursor: pointer;`;
+  titleLink.setAttribute("data-line-number", String(parsed.titleLineNumber));
+  const sep = document.createElement("span");
+  sep.textContent = "\u203A";
+  sep.style.color = palette.border;
+  const quadrantLabel = document.createElement("span");
+  quadrantLabel.textContent = quadrant.name;
+  quadrantLabel.style.cssText = `font-weight: bold; color: ${qColor};`;
+  titleBar.appendChild(titleLink);
+  titleBar.appendChild(sep);
+  titleBar.appendChild(quadrantLabel);
+  container.appendChild(titleBar);
+  const mainLayout = document.createElement("div");
+  mainLayout.style.cssText = `
+    display: flex; flex-direction: ${isNarrow ? "column" : "row"};
+    flex: 1; min-height: 0; height: calc(100% - 40px); background: ${palette.bg};
+  `;
+  container.appendChild(mainLayout);
+  const svgContainer = document.createElement("div");
+  svgContainer.style.cssText = `
+    ${isNarrow ? "height: 40%;" : "width: 50%; min-width: 200px;"}
+    flex-shrink: 0;
+  `;
+  mainLayout.appendChild(svgContainer);
+  const panel = document.createElement("div");
+  panel.style.cssText = `
+    flex: 1; overflow-y: auto; padding: 8px 12px;
+    font-family: ${FONT_FAMILY}; background: ${palette.bg};
+  `;
+  mainLayout.appendChild(panel);
+  const toggleBlip = renderHtmlPanel(
+    panel,
+    parsed,
+    quadrant,
+    qColor,
+    palette,
+    isDark,
+    container,
+    onClickItem
+  );
+  const svgWidth = svgContainer.clientWidth || (isNarrow ? width : width * 0.5);
+  const svgHeight = svgContainer.clientHeight || (isNarrow ? height * 0.4 : height - 40);
+  const svg = d3Selection.select(svgContainer).append("svg").attr("width", "100%").attr("height", "100%").attr("viewBox", `0 0 ${svgWidth} ${svgHeight}`).style("background", palette.bg);
+  const tooltip = createTooltip(container, palette, isDark);
+  renderQuarterCircle(
+    svg,
+    parsed,
+    quadrant,
+    qColor,
+    palette,
+    isDark,
+    svgWidth,
+    svgHeight,
+    palette.border,
+    tooltip,
+    container,
+    toggleBlip
+  );
+  titleLink.addEventListener("click", () => {
+    if (onClickItem) onClickItem(parsed.titleLineNumber);
+  });
+  if (_options?.activeLine) {
+    const activeLn = _options.activeLine;
+    for (const blip of quadrant.blips) {
+      const isOnBlip = blip.lineNumber === activeLn;
+      const isOnDesc = blip.description.length > 0 && activeLn > blip.lineNumber && activeLn <= blip.lineNumber + blip.description.length;
+      if (isOnBlip || isOnDesc) {
+        toggleBlip(blip.lineNumber);
+        break;
+      }
+    }
+  }
+}
+function renderQuarterCircle(svg, parsed, quadrant, qColor, palette, isDark, width, height, mutedColor, _tooltip, rootContainer, onClickItem) {
+  const padding = 8;
+  const size = Math.min(width - padding, height - padding);
+  const maxRadius = size * 0.95;
+  const ringCount = parsed.rings.length;
+  const ringBandWidth = maxRadius / ringCount;
+  const { startAngle, endAngle } = getQuadrantArc(quadrant.position);
+  let cx, cy;
+  switch (quadrant.position) {
+    case "top-right":
+      cx = padding;
+      cy = size + padding;
+      break;
+    case "top-left":
+      cx = width - padding;
+      cy = size + padding;
+      break;
+    case "bottom-left":
+      cx = width - padding;
+      cy = padding;
+      break;
+    case "bottom-right":
+      cx = padding;
+      cy = padding;
+      break;
+  }
+  const arcGen = (innerR, outerR) => `M${cx + outerR * Math.cos(startAngle)},${cy - outerR * Math.sin(startAngle)} A${outerR},${outerR} 0 0,0 ${cx + outerR * Math.cos(endAngle)},${cy - outerR * Math.sin(endAngle)} L${cx + innerR * Math.cos(endAngle)},${cy - innerR * Math.sin(endAngle)} A${innerR},${innerR} 0 0,1 ${cx + innerR * Math.cos(startAngle)},${cy - innerR * Math.sin(startAngle)} Z`;
+  for (let ri = parsed.rings.length - 1; ri >= 0; ri--) {
+    const innerR = ri * ringBandWidth;
+    const outerR = (ri + 1) * ringBandWidth;
+    const fillColor = ri % 2 === 0 ? palette.bg : mix(palette.bg, palette.border, 0.15);
+    const ringName = parsed.rings[ri].name;
+    svg.append("path").attr("d", arcGen(innerR, outerR)).attr("fill", fillColor).attr("stroke", mutedColor).attr("stroke-width", 0.5);
+    svg.append("path").attr("d", arcGen(innerR, outerR)).attr("fill", "transparent").attr("data-ring-arc", ringName).style("cursor", "pointer").on("mouseenter", () => {
+      d3Selection.select(rootContainer).selectAll("[data-ring-arc]").each(function() {
+        const el = d3Selection.select(this);
+        const isMatch = this.getAttribute("data-ring-arc") === ringName;
+        el.attr("fill", isMatch ? qColor : "transparent").attr(
+          "opacity",
+          isMatch ? 0.15 : 1
+        );
+      });
+      dimExceptRing(rootContainer, ringName);
+    }).on("mouseleave", () => {
+      d3Selection.select(rootContainer).selectAll("[data-ring-arc]").attr("fill", "transparent").attr("opacity", 1);
+      clearDim(rootContainer);
+    });
+  }
+  const ringOrder = parsed.rings.map((r) => r.name);
+  const angularPadding = 0.08;
+  const radialPadding = ringBandWidth * 0.12;
+  const usableArcStart = startAngle + angularPadding;
+  const usableArcEnd = endAngle - angularPadding;
+  const arcSpan = usableArcEnd - usableArcStart;
+  const blipsByRing = /* @__PURE__ */ new Map();
+  for (const blip of quadrant.blips) {
+    const list = blipsByRing.get(blip.ring) ?? [];
+    list.push(blip);
+    blipsByRing.set(blip.ring, list);
+  }
+  for (const [ringName, blips] of blipsByRing) {
+    const ringIndex = ringOrder.indexOf(ringName);
+    if (ringIndex < 0) continue;
+    const rInner = ringIndex * ringBandWidth + radialPadding;
+    const rOuter = (ringIndex + 1) * ringBandWidth - radialPadding;
+    const rMid = (rInner + rOuter) / 2;
+    for (let bi = 0; bi < blips.length; bi++) {
+      const blip = blips[bi];
+      const angle = blips.length === 1 ? (usableArcStart + usableArcEnd) / 2 : usableArcStart + (bi + 0.5) / blips.length * arcSpan;
+      const radius = blips.length <= 3 ? rMid : rInner + BLIP_RADIUS + bi % 3 / 2 * (rOuter - rInner - BLIP_RADIUS * 2);
+      const bx = cx + radius * Math.cos(angle);
+      const by = cy - radius * Math.sin(angle);
+      const blipGroup = svg.append("g").attr("data-line-number", blip.lineNumber).attr("data-ring", blip.ring).attr("data-trend", blip.trend ?? "stable").style("cursor", "pointer");
+      const angleToCenter = Math.atan2(cy - by, cx - bx);
+      renderTrendIndicator(
+        blipGroup,
+        blip.trend,
+        qColor,
+        bx,
+        by,
+        BLIP_RADIUS,
+        angleToCenter
+      );
+      blipGroup.append("text").attr("x", bx).attr("y", by + 3).attr("text-anchor", "middle").attr("fill", isDark ? "#000" : "#fff").attr("font-family", FONT_FAMILY).attr("font-size", BLIP_FONT_SIZE).attr("font-weight", "bold").text(blip.globalNumber);
+      const lineNum = String(blip.lineNumber);
+      blipGroup.on("mouseenter", () => {
+        blipGroup.attr(
+          "transform",
+          `translate(${bx},${by}) scale(1.5) translate(${-bx},${-by})`
+        );
+        dimExcept(rootContainer, lineNum);
+      }).on("mouseleave", () => {
+        blipGroup.attr("transform", null);
+        clearDim(rootContainer);
+      });
+      blipGroup.on("click", () => {
+        if (onClickItem) {
+          onClickItem(blip.lineNumber);
+          requestAnimationFrame(() => dimExcept(rootContainer, lineNum));
+        }
+      });
+    }
+  }
+}
+function dimExcept(root, lineNum) {
+  root.querySelectorAll("[data-line-number]").forEach((el) => {
+    el.style.opacity = el.getAttribute("data-line-number") === lineNum ? "1" : String(DIM_OPACITY);
+  });
+}
+function dimExceptRing(root, ringName) {
+  root.querySelectorAll("[data-line-number]").forEach((el) => {
+    el.style.opacity = el.getAttribute("data-ring") === ringName ? "1" : String(DIM_OPACITY);
+  });
+  root.querySelectorAll("[data-ring-group]").forEach((el) => {
+    el.style.opacity = el.getAttribute("data-ring-group") === ringName ? "1" : String(DIM_OPACITY);
+  });
+}
+function clearDim(root) {
+  root.querySelectorAll("[data-line-number]").forEach((el) => {
+    el.style.opacity = "1";
+  });
+  root.querySelectorAll("[data-ring-group]").forEach((el) => {
+    el.style.opacity = "1";
+  });
+}
+function renderHtmlPanel(panel, parsed, quadrant, qColor, palette, isDark, rootContainer, onClickItem) {
+  const ringOrder = parsed.rings.map((r) => r.name);
+  const fillColor = shapeFill(palette, qColor, isDark, {
+    solid: parsed.options["solid-fill"] === "on"
+  });
+  let expandedLineNum = null;
+  function render() {
+    panel.innerHTML = "";
+    for (const ringName of ringOrder) {
+      const blips = quadrant.blips.filter((b) => b.ring === ringName);
+      if (blips.length === 0) continue;
+      const ringGroup = document.createElement("div");
+      ringGroup.setAttribute("data-ring-group", ringName);
+      ringGroup.style.cssText = `
+        background: ${palette.surface};
+        border-radius: 8px;
+        padding: 10px;
+        margin-bottom: 12px;
+        transition: opacity 0.15s;
+      `;
+      const header = document.createElement("div");
+      header.style.cssText = `
+        font-size: 13px; font-weight: 700; color: ${palette.textMuted};
+        margin-bottom: 8px;
+      `;
+      header.textContent = ringName;
+      ringGroup.appendChild(header);
+      panel.appendChild(ringGroup);
+      for (const blip of blips) {
+        const ln = String(blip.lineNumber);
+        const isExpanded = expandedLineNum === ln;
+        const hasDesc = blip.description.length > 0;
+        const node = document.createElement("div");
+        node.setAttribute("data-line-number", ln);
+        node.setAttribute("data-ring", blip.ring);
+        node.setAttribute("data-trend", blip.trend ?? "stable");
+        node.style.cssText = `
+          background: ${fillColor}; border: 1.5px solid ${qColor};
+          border-radius: 6px; margin-bottom: 6px; cursor: pointer;
+          transition: border-width 0.1s;
+          ${isExpanded ? "border-width: 2px;" : ""}
+        `;
+        const titleRow = document.createElement("div");
+        titleRow.style.cssText = `
+          display: flex; align-items: center; gap: 8px;
+          padding: 6px 10px; min-height: 28px;
+        `;
+        const indicatorSvg = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "svg"
+        );
+        indicatorSvg.setAttribute("width", "26");
+        indicatorSvg.setAttribute("height", "26");
+        indicatorSvg.style.flexShrink = "0";
+        const indicatorG = d3Selection.select(indicatorSvg).append("g");
+        renderTrendIndicator(
+          indicatorG,
+          blip.trend,
+          qColor,
+          13,
+          13,
+          10,
+          -Math.PI / 2
+        );
+        d3Selection.select(indicatorSvg).append("text").attr("x", 13).attr("y", 16).attr("text-anchor", "middle").attr("fill", isDark ? "#000" : "#fff").attr("font-family", FONT_FAMILY).attr("font-size", 9).attr("font-weight", "bold").text(blip.globalNumber);
+        titleRow.appendChild(indicatorSvg);
+        const name = document.createElement("span");
+        name.textContent = blip.name;
+        name.style.cssText = `
+          flex: 1; font-size: 12px; font-weight: 600;
+          color: ${palette.text}; white-space: nowrap;
+          overflow: hidden; text-overflow: ellipsis;
+        `;
+        titleRow.appendChild(name);
+        node.appendChild(titleRow);
+        if (isExpanded && hasDesc) {
+          const sep = document.createElement("div");
+          sep.style.cssText = `
+            border-top: 1px solid ${qColor}; opacity: 0.3;
+          `;
+          node.appendChild(sep);
+          const descDiv = document.createElement("div");
+          descDiv.style.cssText = `
+            padding: 6px 10px 8px; font-size: 11px; line-height: 1.6;
+            color: ${palette.textMuted};
+          `;
+          descDiv.innerHTML = renderDescriptionHtml(blip.description, palette);
+          node.appendChild(descDiv);
+        }
+        node.addEventListener("mouseenter", () => {
+          dimExcept(rootContainer, ln);
+          rootContainer.querySelectorAll("svg [data-line-number]").forEach((el) => {
+            if (el.getAttribute("data-line-number") === ln) {
+              const bbox = el.getBBox?.();
+              if (bbox) {
+                const bx = bbox.x + bbox.width / 2;
+                const by = bbox.y + bbox.height / 2;
+                el.setAttribute(
+                  "transform",
+                  `translate(${bx},${by}) scale(1.5) translate(${-bx},${-by})`
+                );
+              }
+            }
+          });
+        });
+        node.addEventListener("mouseleave", () => {
+          clearDim(rootContainer);
+          rootContainer.querySelectorAll("svg [data-line-number]").forEach((el) => {
+            el.removeAttribute("transform");
+          });
+        });
+        node.addEventListener("click", (event) => {
+          event.stopPropagation();
+          if (hasDesc) {
+            const wasExpanded = expandedLineNum === ln;
+            expandedLineNum = wasExpanded ? null : ln;
+            render();
+            if (!wasExpanded) {
+              requestAnimationFrame(() => {
+                dimExcept(rootContainer, ln);
+                rootContainer.querySelectorAll("svg [data-line-number]").forEach((el) => {
+                  if (el.getAttribute("data-line-number") === ln) {
+                    const bbox = el.getBBox?.();
+                    if (bbox) {
+                      const cbx = bbox.x + bbox.width / 2;
+                      const cby = bbox.y + bbox.height / 2;
+                      el.setAttribute(
+                        "transform",
+                        `translate(${cbx},${cby}) scale(1.5) translate(${-cbx},${-cby})`
+                      );
+                    }
+                  }
+                });
+              });
+            } else {
+              clearDim(rootContainer);
+              rootContainer.querySelectorAll("svg [data-line-number]").forEach((el) => el.removeAttribute("transform"));
+            }
+          } else if (onClickItem) {
+            onClickItem(blip.lineNumber);
+          }
+        });
+        ringGroup.appendChild(node);
+      }
+    }
+  }
+  render();
+  panel.addEventListener("click", () => {
+    if (expandedLineNum) {
+      expandedLineNum = null;
+      render();
+      clearDim(rootContainer);
+      rootContainer.querySelectorAll("svg [data-line-number]").forEach((el) => el.removeAttribute("transform"));
+    }
+  });
+  return (lineNumber) => {
+    const ln = String(lineNumber);
+    const blip = quadrant.blips.find((b) => String(b.lineNumber) === ln);
+    if (blip && blip.description.length > 0) {
+      const wasExpanded = expandedLineNum === ln;
+      expandedLineNum = wasExpanded ? null : ln;
+      render();
+      const node = panel.querySelector(`[data-line-number="${ln}"]`);
+      if (node) node.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      if (!wasExpanded) {
+        requestAnimationFrame(() => dimExcept(rootContainer, ln));
+      } else {
+        clearDim(rootContainer);
+        rootContainer.querySelectorAll("svg [data-line-number]").forEach((el) => el.removeAttribute("transform"));
+      }
+    } else if (onClickItem) {
+      onClickItem(lineNumber);
+    }
+  };
+}
+function renderDescriptionHtml(lines, palette) {
+  const paragraphs = joinParagraphs(lines);
+  let html = "";
+  for (const para of paragraphs) {
+    const trimmed = para.trim();
+    const isBullet = /^[-*•]\s+/.test(trimmed);
+    const content = isBullet ? trimmed.replace(/^[-*•]\s+/, "") : trimmed;
+    const rendered = renderInlineMarkdownHtml(content, palette);
+    if (isBullet) {
+      html += `<div style="padding-left: 14px; text-indent: -10px; margin: 2px 0;">\u2022 ${rendered}</div>`;
+    } else {
+      html += `<div style="margin: 4px 0;">${rendered}</div>`;
+    }
+  }
+  return html;
+}
+function joinParagraphs(lines) {
+  const result = [];
+  let currentPara = "";
+  for (const line of lines) {
+    const trimmed = line.trim();
+    const isBullet = /^[-*•]\s+/.test(trimmed);
+    if (isBullet) {
+      if (currentPara) {
+        result.push(currentPara);
+        currentPara = "";
+      }
+      result.push(trimmed);
+    } else if (!trimmed) {
+      if (currentPara) {
+        result.push(currentPara);
+        currentPara = "";
+      }
+    } else {
+      currentPara = currentPara ? `${currentPara} ${trimmed}` : trimmed;
+    }
+  }
+  if (currentPara) result.push(currentPara);
+  return result;
+}
+function renderInlineMarkdownHtml(text, palette) {
+  const spans = parseInlineMarkdown(text);
+  let html = "";
+  for (const span of spans) {
+    let t = escapeHtml(span.text);
+    if (span.bold) t = `<strong>${t}</strong>`;
+    if (span.italic) t = `<em>${t}</em>`;
+    if (span.code)
+      t = `<code style="background:${palette.surface}; padding: 1px 4px; border-radius: 3px; font-size: 10px;">${t}</code>`;
+    if (span.href) {
+      const safe = safeHref(span.href);
+      if (safe !== null) {
+        t = `<a href="${escapeHtml(safe)}" target="_blank" rel="noopener noreferrer" style="color: ${palette.primary ?? palette.text}; text-decoration: underline;">${t}</a>`;
+      }
+    }
+    html += t;
+  }
+  return html;
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function renderQuadrantFocusForExport(container, parsed, quadrantPosition, palette, isDark, exportDims) {
+  const quadrant = parsed.quadrants.find(
+    (q) => q.position === quadrantPosition
+  );
+  if (!quadrant) return;
+  container.innerHTML = "";
+  const width = exportDims.width;
+  const height = exportDims.height;
+  const qColor = resolveQuadrantColor(
+    quadrant.position,
+    quadrant.color,
+    palette
+  );
+  const titleBar = document.createElement("div");
+  titleBar.style.cssText = `
+    display: flex; align-items: baseline; gap: 8px;
+    padding: 12px 16px; font-family: ${FONT_FAMILY};
+    font-size: ${TITLE_FONT_SIZE + 2}px; background: ${palette.bg};
+  `;
+  const titleText = document.createElement("span");
+  titleText.textContent = parsed.title || "Tech Radar";
+  titleText.style.cssText = `font-weight: bold; color: ${palette.text};`;
+  const sep = document.createElement("span");
+  sep.textContent = "\u203A";
+  sep.style.color = palette.border;
+  const quadrantLabel = document.createElement("span");
+  quadrantLabel.textContent = quadrant.name;
+  quadrantLabel.style.cssText = `font-weight: bold; color: ${qColor};`;
+  titleBar.appendChild(titleText);
+  titleBar.appendChild(sep);
+  titleBar.appendChild(quadrantLabel);
+  container.appendChild(titleBar);
+  const mainLayout = document.createElement("div");
+  mainLayout.style.cssText = `
+    display: flex; flex-direction: row;
+    height: ${height - 48}px; background: ${palette.bg};
+  `;
+  container.appendChild(mainLayout);
+  const svgContainer = document.createElement("div");
+  svgContainer.style.cssText = `width: 45%; min-width: 200px; flex-shrink: 0;`;
+  mainLayout.appendChild(svgContainer);
+  const panel = document.createElement("div");
+  panel.style.cssText = `
+    flex: 1; padding: 8px 16px;
+    font-family: ${FONT_FAMILY}; background: ${palette.bg};
+  `;
+  mainLayout.appendChild(panel);
+  renderStaticHtmlPanel(panel, parsed, quadrant, qColor, palette, isDark);
+  const svgWidth = width * 0.45;
+  const svgHeight = height - 48;
+  const svg = d3Selection.select(svgContainer).append("svg").attr("width", svgWidth).attr("height", svgHeight).attr("viewBox", `0 0 ${svgWidth} ${svgHeight}`).style("background", palette.bg);
+  renderQuarterCircleStatic(
+    svg,
+    parsed,
+    quadrant,
+    qColor,
+    palette,
+    isDark,
+    svgWidth,
+    svgHeight,
+    palette.border
+  );
+}
+function renderQuarterCircleStatic(svg, parsed, quadrant, qColor, palette, isDark, width, height, mutedColor) {
+  const padding = 8;
+  const size = Math.min(width - padding, height - padding);
+  const maxRadius = size * 0.95;
+  const ringCount = parsed.rings.length;
+  const ringBandWidth = maxRadius / ringCount;
+  const { startAngle, endAngle } = getQuadrantArc(quadrant.position);
+  let cx, cy;
+  switch (quadrant.position) {
+    case "top-right":
+      cx = padding;
+      cy = size + padding;
+      break;
+    case "top-left":
+      cx = width - padding;
+      cy = size + padding;
+      break;
+    case "bottom-left":
+      cx = width - padding;
+      cy = padding;
+      break;
+    case "bottom-right":
+      cx = padding;
+      cy = padding;
+      break;
+  }
+  const arcGen = (innerR, outerR) => `M${cx + outerR * Math.cos(startAngle)},${cy - outerR * Math.sin(startAngle)} A${outerR},${outerR} 0 0,0 ${cx + outerR * Math.cos(endAngle)},${cy - outerR * Math.sin(endAngle)} L${cx + innerR * Math.cos(endAngle)},${cy - innerR * Math.sin(endAngle)} A${innerR},${innerR} 0 0,1 ${cx + innerR * Math.cos(startAngle)},${cy - innerR * Math.sin(startAngle)} Z`;
+  for (let ri = parsed.rings.length - 1; ri >= 0; ri--) {
+    const innerR = ri * ringBandWidth;
+    const outerR = (ri + 1) * ringBandWidth;
+    const fillColor = ri % 2 === 0 ? palette.bg : mix(palette.bg, palette.border, 0.15);
+    svg.append("path").attr("d", arcGen(innerR, outerR)).attr("fill", fillColor).attr("stroke", mutedColor).attr("stroke-width", 0.5);
+  }
+  for (let ri = 0; ri < parsed.rings.length; ri++) {
+    const rCenter = (ri + 0.5) * ringBandWidth;
+    const midAngle = (startAngle + endAngle) / 2;
+    const labelX = cx + rCenter * Math.cos(midAngle);
+    const labelY = cy - rCenter * Math.sin(midAngle);
+    svg.append("text").attr("x", labelX).attr("y", labelY).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", palette.textMuted).attr("font-family", FONT_FAMILY).attr("font-size", 11).attr("font-weight", "600").attr("opacity", 0.5).text(parsed.rings[ri].name);
+  }
+  const ringOrder = parsed.rings.map((r) => r.name);
+  const angularPadding = 0.08;
+  const radialPadding = ringBandWidth * 0.12;
+  const usableArcStart = startAngle + angularPadding;
+  const usableArcEnd = endAngle - angularPadding;
+  const arcSpan = usableArcEnd - usableArcStart;
+  const blipsByRing = /* @__PURE__ */ new Map();
+  for (const blip of quadrant.blips) {
+    const list = blipsByRing.get(blip.ring) ?? [];
+    list.push(blip);
+    blipsByRing.set(blip.ring, list);
+  }
+  for (const [ringName, blips] of blipsByRing) {
+    const ringIndex = ringOrder.indexOf(ringName);
+    if (ringIndex < 0) continue;
+    const rInner = ringIndex * ringBandWidth + radialPadding;
+    const rOuter = (ringIndex + 1) * ringBandWidth - radialPadding;
+    const rMid = (rInner + rOuter) / 2;
+    for (let bi = 0; bi < blips.length; bi++) {
+      const blip = blips[bi];
+      const angle = blips.length === 1 ? (usableArcStart + usableArcEnd) / 2 : usableArcStart + (bi + 0.5) / blips.length * arcSpan;
+      const radius = blips.length <= 3 ? rMid : rInner + BLIP_RADIUS + bi % 3 / 2 * (rOuter - rInner - BLIP_RADIUS * 2);
+      const bx = cx + radius * Math.cos(angle);
+      const by = cy - radius * Math.sin(angle);
+      const blipGroup = svg.append("g");
+      const angleToCenter = Math.atan2(cy - by, cx - bx);
+      renderTrendIndicator(
+        blipGroup,
+        blip.trend,
+        qColor,
+        bx,
+        by,
+        BLIP_RADIUS,
+        angleToCenter
+      );
+      blipGroup.append("text").attr("x", bx).attr("y", by + 3).attr("text-anchor", "middle").attr("fill", isDark ? "#000" : "#fff").attr("font-family", FONT_FAMILY).attr("font-size", BLIP_FONT_SIZE).attr("font-weight", "bold").text(blip.globalNumber);
+    }
+  }
+}
+function renderStaticHtmlPanel(panel, parsed, quadrant, qColor, palette, isDark) {
+  const ringOrder = parsed.rings.map((r) => r.name);
+  const fillColor = shapeFill(palette, qColor, isDark, {
+    solid: parsed.options["solid-fill"] === "on"
+  });
+  for (const ringName of ringOrder) {
+    const blips = quadrant.blips.filter((b) => b.ring === ringName);
+    if (blips.length === 0) continue;
+    const ringGroup = document.createElement("div");
+    ringGroup.style.cssText = `
+      background: ${palette.surface};
+      border-radius: 8px;
+      padding: 10px;
+      margin-bottom: 12px;
+    `;
+    const header = document.createElement("div");
+    header.style.cssText = `
+      font-size: 13px; font-weight: 700; color: ${palette.textMuted};
+      margin-bottom: 8px;
+    `;
+    header.textContent = ringName;
+    ringGroup.appendChild(header);
+    panel.appendChild(ringGroup);
+    for (const blip of blips) {
+      const hasDesc = blip.description.length > 0;
+      const node = document.createElement("div");
+      node.style.cssText = `
+        background: ${fillColor}; border: 1.5px solid ${qColor};
+        border-radius: 6px; margin-bottom: 6px;
+      `;
+      const titleRow = document.createElement("div");
+      titleRow.style.cssText = `
+        display: flex; align-items: center; gap: 8px;
+        padding: 6px 10px; min-height: 28px;
+      `;
+      const indicatorSvg = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "svg"
+      );
+      indicatorSvg.setAttribute("width", "26");
+      indicatorSvg.setAttribute("height", "26");
+      indicatorSvg.style.flexShrink = "0";
+      const indicatorG = d3Selection.select(indicatorSvg).append("g");
+      renderTrendIndicator(
+        indicatorG,
+        blip.trend,
+        qColor,
+        13,
+        13,
+        10,
+        -Math.PI / 2
+      );
+      d3Selection.select(indicatorSvg).append("text").attr("x", 13).attr("y", 16).attr("text-anchor", "middle").attr("fill", isDark ? "#000" : "#fff").attr("font-family", FONT_FAMILY).attr("font-size", 9).attr("font-weight", "bold").text(blip.globalNumber);
+      titleRow.appendChild(indicatorSvg);
+      const name = document.createElement("span");
+      name.textContent = blip.name;
+      name.style.cssText = `
+        flex: 1; font-size: 12px; font-weight: 600;
+        color: ${palette.text};
+      `;
+      titleRow.appendChild(name);
+      node.appendChild(titleRow);
+      if (hasDesc) {
+        const sepDiv = document.createElement("div");
+        sepDiv.style.cssText = `border-top: 1px solid ${qColor}; opacity: 0.3;`;
+        node.appendChild(sepDiv);
+        const descDiv = document.createElement("div");
+        descDiv.style.cssText = `
+          padding: 6px 10px 8px; font-size: 11px; line-height: 1.6;
+          color: ${palette.textMuted};
+        `;
+        descDiv.innerHTML = renderDescriptionHtml(blip.description, palette);
+        node.appendChild(descDiv);
+      }
+      ringGroup.appendChild(node);
+    }
+  }
+}
+
+// src/tech-radar/renderer.ts
+var BLIP_RADIUS2 = 12;
+var BLIP_FONT_SIZE2 = 9;
+var RING_LABEL_FONT_SIZE = 13;
+var QUADRANT_LABEL_FONT_SIZE = 18;
+var TITLE_FONT_SIZE2 = 18;
+var LISTING_FONT_SIZE = 12;
+var LISTING_HEADER_FONT_SIZE = 13;
+var LISTING_TOP_MARGIN = 24;
+var LISTING_COL_GAP = 16;
+var LISTING_LINE_HEIGHT = 24;
+function initRadarSvg(container, palette, exportDims) {
+  d3Selection2.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 null;
+  const textColor = palette.text;
+  const mutedColor = palette.border;
+  const bgColor = palette.bg;
+  const svg = d3Selection2.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMid meet").style("background", bgColor);
+  return { svg, width, height, textColor, mutedColor, bgColor };
+}
+function renderTechRadar(container, parsed, palette, isDark, onClickItem, exportDims, viewState, options) {
+  if (parsed.quadrants.length === 0 || parsed.rings.length === 0) return;
+  if (viewState?.rq && !exportDims) {
+    renderQuadrantFocus(
+      container,
+      parsed,
+      viewState.rq,
+      palette,
+      isDark,
+      onClickItem,
+      exportDims,
+      options
+    );
+    return;
+  }
+  const directiveOn = parsed.options["show-blip-legend"] === "on";
+  const showListing = exportDims ? true : options?.showListing ?? directiveOn;
+  const init = initRadarSvg(container, palette, exportDims);
+  if (!init) return;
+  const { svg, width, height, textColor, mutedColor } = init;
+  const colCount = parsed.quadrants.length;
+  const listingIdealWidth = colCount * 200 + LISTING_COL_GAP * (colCount + 1);
+  const radarIdealWidth = 500;
+  const idealWidth = Math.max(listingIdealWidth, radarIdealWidth);
+  const ctx = exportDims ? ScaleContext.identity() : ScaleContext.from(width, idealWidth);
+  const sBlipRadius = ctx.structural(BLIP_RADIUS2);
+  const sBlipFontSize = ctx.text(BLIP_FONT_SIZE2);
+  const sRingLabelFontSize = ctx.text(RING_LABEL_FONT_SIZE);
+  const sQuadrantLabelFontSize = ctx.text(QUADRANT_LABEL_FONT_SIZE);
+  const sTitleFontSize = ctx.text(TITLE_FONT_SIZE2);
+  const sListingFontSize = ctx.text(LISTING_FONT_SIZE);
+  const sListingHeaderFontSize = ctx.text(LISTING_HEADER_FONT_SIZE);
+  const sListingTopMargin = ctx.aesthetic(LISTING_TOP_MARGIN);
+  const sListingColGap = ctx.aesthetic(LISTING_COL_GAP);
+  const sListingLineHeight = ctx.structural(LISTING_LINE_HEIGHT);
+  const sListingBlipR = ctx.structural(LISTING_BLIP_R);
+  const listingHeight = showListing ? estimateListingHeight(parsed, sListingLineHeight, sListingTopMargin) : 0;
+  const radarHeight = Math.max(
+    200,
+    height - listingHeight - (showListing ? sListingTopMargin : 0)
+  );
+  const radarWidth = width;
+  const titleY = 24;
+  const showTitle = !!parsed.title && parsed.options["no-title"] !== "on";
+  if (showTitle) {
+    svg.append("text").attr("x", radarWidth / 2).attr("y", titleY).attr("text-anchor", "middle").attr("fill", textColor).attr("font-family", FONT_FAMILY).attr("font-size", sTitleFontSize).attr("font-weight", "bold").text(parsed.title);
+  }
+  let legendReservedHeight = 0;
+  if (!exportDims && options?.onToggleListing) {
+    const legendY = showTitle ? titleY + 8 : 4;
+    const legendG = svg.append("g").attr("transform", `translate(0, ${legendY})`);
+    const legendConfig = {
+      groups: [
+        {
+          name: "Trends",
+          entries: TREND_ITEMS.map((item) => ({
+            value: item.label,
+            color: palette.textMuted
+          }))
+        }
+      ],
+      position: { placement: "top-center", titleRelation: "below-title" },
+      mode: options?.exportMode ? "export" : "preview",
+      controlsGroup: {
+        toggles: [
+          {
+            id: "blip-legend",
+            type: "toggle",
+            label: "Blip Legend",
+            active: showListing,
+            onToggle: (active) => options.onToggleListing(active)
+          }
+        ]
+      },
+      ...options.controlsHost !== void 0 && {
+        controlsHost: options.controlsHost
+      }
+    };
+    const legendPalette = {
+      text: palette.text,
+      textMuted: palette.textMuted,
+      bg: palette.bg,
+      surface: palette.surface,
+      primary: palette.primary
+    };
+    const legendCallbacks = {
+      ...options.onLegendGroupToggle !== void 0 && {
+        onGroupToggle: options.onLegendGroupToggle
+      },
+      ...options.onToggleControlsExpand !== void 0 && {
+        onControlsExpand: options.onToggleControlsExpand
+      },
+      onControlsToggle: (id, active) => {
+        if (id === "blip-legend" && options.onToggleListing) {
+          options.onToggleListing(active);
+        }
+      },
+      onEntryHover: (_groupName, entryValue) => {
+        if (!entryValue) {
+          svg.selectAll("[data-trend]").style("opacity", "1");
+          return;
+        }
+        const item = TREND_ITEMS.find((t) => t.label === entryValue);
+        if (!item) return;
+        const trendVal = item.trend ?? "stable";
+        svg.selectAll("[data-trend]").style("opacity", function() {
+          return this.getAttribute("data-trend") === trendVal ? "1" : String(DIM_OPACITY);
+        });
+      }
+    };
+    renderIntegratedLegend(legendG, {
+      ...legendConfig,
+      palette: legendPalette,
+      isDark,
+      width,
+      activeGroup: options?.activeLegendGroup ?? null,
+      ...options.controlsExpanded !== void 0 && {
+        controlsExpanded: options.controlsExpanded
+      },
+      callbacks: legendCallbacks
+    });
+    legendReservedHeight = getMaxLegendReservedHeight(legendConfig, width) + 8;
+  }
+  const radarTop = (showTitle ? titleY + 16 : 8) + legendReservedHeight;
+  const radarAreaHeight = radarHeight - radarTop;
+  const radarAreaWidth = radarWidth;
+  const { cx, cy, maxRadius, ringBandWidth } = getRadarGeometry(
+    radarAreaWidth,
+    radarAreaHeight,
+    parsed.rings.length
+  );
+  const offsetY = radarTop;
+  const radarGroup = svg.append("g").attr("transform", `translate(0, ${offsetY})`);
+  if (ctx.isBelowFloor) {
+    svg.attr("viewBox", `0 0 ${width} ${height}`).attr("width", "100%");
+  }
+  for (let ri = parsed.rings.length - 1; ri >= 0; ri--) {
+    const innerR = ri * ringBandWidth;
+    const outerR = (ri + 1) * ringBandWidth;
+    const fillColor = ri % 2 === 0 ? palette.bg : mix(palette.bg, palette.border, 0.15);
+    const ringName = parsed.rings[ri].name;
+    for (const quadrant of parsed.quadrants) {
+      const { startAngle, endAngle } = getQuadrantArc(quadrant.position);
+      const path = buildArcSlicePath(
+        cx,
+        cy,
+        innerR,
+        outerR,
+        startAngle,
+        endAngle
+      );
+      radarGroup.append("path").attr("d", path).attr("fill", fillColor).attr("stroke", mutedColor).attr("stroke-width", 0.5).attr("data-ring-segment", "").attr("data-quadrant", quadrant.position).attr("data-ring", ringName);
+    }
+  }
+  radarGroup.append("line").attr("x1", cx - maxRadius).attr("y1", cy).attr("x2", cx + maxRadius).attr("y2", cy).attr("stroke", mutedColor).attr("stroke-width", 1);
+  radarGroup.append("line").attr("x1", cx).attr("y1", cy - maxRadius).attr("x2", cx).attr("y2", cy + maxRadius).attr("stroke", mutedColor).attr("stroke-width", 1);
+  for (let ri = 0; ri < parsed.rings.length; ri++) {
+    const rCenter = (ri + 0.5) * ringBandWidth;
+    if (ri === 0) {
+      radarGroup.append("text").attr("x", cx).attr("y", cy).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", textColor).attr("font-family", FONT_FAMILY).attr("font-size", sRingLabelFontSize).attr("font-weight", "600").attr("opacity", 0.5).text(parsed.rings[ri].name);
+    } else {
+      radarGroup.append("text").attr("x", cx).attr("y", cy - rCenter).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", textColor).attr("font-family", FONT_FAMILY).attr("font-size", sRingLabelFontSize).attr("font-weight", "600").attr("opacity", 0.5).text(parsed.rings[ri].name);
+      radarGroup.append("text").attr("x", cx).attr("y", cy + rCenter).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", textColor).attr("font-family", FONT_FAMILY).attr("font-size", sRingLabelFontSize).attr("font-weight", "600").attr("opacity", 0.5).text(parsed.rings[ri].name);
+    }
+  }
+  for (const quadrant of parsed.quadrants) {
+    const qColor = resolveQuadrantColor(
+      quadrant.position,
+      quadrant.color,
+      palette
+    );
+    const {
+      x: labelX,
+      y: labelY,
+      anchor
+    } = getQuadrantLabelPosition(quadrant.position, cx, cy, maxRadius);
+    const labelGroup = radarGroup.append("g").attr("data-line-number", quadrant.lineNumber).style("cursor", "pointer");
+    renderQuadrantLabel(
+      labelGroup,
+      quadrant.name,
+      labelX,
+      labelY,
+      anchor,
+      qColor,
+      maxRadius * 0.9,
+      sQuadrantLabelFontSize
+    );
+  }
+  if (!exportDims) {
+    renderRingHoverAreas(
+      radarGroup,
+      svg,
+      parsed,
+      palette,
+      cx,
+      cy,
+      ringBandWidth,
+      maxRadius
+    );
+  }
+  const layoutPoints = computeRadarLayout(
+    parsed,
+    radarAreaWidth,
+    radarAreaHeight,
+    ctx
+  );
+  const popover = createBlipPopover(container, palette, isDark);
+  let pinnedLineNum = null;
+  function showBlipHighlight(lineNum, bx, by, blipGroup) {
+    blipGroup.attr(
+      "transform",
+      `translate(${bx},${by}) scale(1.5) translate(${-bx},${-by})`
+    );
+    svg.selectAll("[data-line-number]").style("opacity", function() {
+      return this.getAttribute("data-line-number") === lineNum ? "1" : String(DIM_OPACITY);
+    });
+  }
+  function clearBlipHighlight() {
+    svg.selectAll("[data-line-number]").style("opacity", "1").attr("transform", null);
+  }
+  for (const point of layoutPoints) {
+    const quadrant = parsed.quadrants.find(
+      (q) => q.blips.includes(point.blip)
+    );
+    const qColor = resolveQuadrantColor(
+      quadrant.position,
+      quadrant.color,
+      palette
+    );
+    const blipGroup = radarGroup.append("g").attr("data-line-number", point.blip.lineNumber).attr("data-quadrant", quadrant.position).attr("data-ring", point.blip.ring).attr("data-trend", point.blip.trend ?? "stable").style("cursor", "pointer");
+    const angleToCenter = Math.atan2(cy - point.y, cx - point.x);
+    renderTrendIndicator(
+      blipGroup,
+      point.blip.trend,
+      qColor,
+      point.x,
+      point.y,
+      sBlipRadius,
+      angleToCenter
+    );
+    blipGroup.append("text").attr("x", point.x).attr("y", point.y + 3).attr("text-anchor", "middle").attr("fill", isDark ? "#000" : "#fff").attr("font-family", FONT_FAMILY).attr("font-size", sBlipFontSize).attr("font-weight", "bold").text(point.blip.globalNumber);
+    const lineNum = String(point.blip.lineNumber);
+    const bx = point.x;
+    const by = point.y;
+    blipGroup.on("mouseenter", (event) => {
+      if (pinnedLineNum) return;
+      showBlipPopover(
+        popover,
+        point.blip,
+        qColor,
+        palette,
+        isDark,
+        event,
+        // Tech-radar opts out of solid-fill: blip popover stays in tinted
+        // form so it reads consistently against the radar bg regardless of
+        // the diagram's option setting.
+        false
+      );
+      showBlipHighlight(lineNum, bx, by, blipGroup);
+    }).on("mousemove", (event) => {
+      if (pinnedLineNum) return;
+      positionPopover(popover, event);
+    }).on("mouseleave", () => {
+      if (pinnedLineNum) return;
+      hideBlipPopover(popover);
+      clearBlipHighlight();
+    });
+    blipGroup.on("click", (event) => {
+      event._blipClick = true;
+      if (pinnedLineNum === lineNum) {
+        pinnedLineNum = null;
+        hideBlipPopover(popover);
+        clearBlipHighlight();
+      } else {
+        pinnedLineNum = lineNum;
+        showBlipPopover(
+          popover,
+          point.blip,
+          qColor,
+          palette,
+          isDark,
+          event,
+          // Tech-radar opts out of solid-fill: blip popover stays in tinted
+          // form so it reads consistently against the radar bg regardless of
+          // the diagram's option setting.
+          false
+        );
+        popover.style.pointerEvents = "auto";
+        showBlipHighlight(lineNum, bx, by, blipGroup);
+      }
+    });
+  }
+  svg.on("click", (event) => {
+    if (event._blipClick) return;
+    if (pinnedLineNum) {
+      pinnedLineNum = null;
+      hideBlipPopover(popover);
+      clearBlipHighlight();
+    }
+  });
+  if (options?.activeLine && !pinnedLineNum) {
+    const activeLn = options.activeLine;
+    for (const point of layoutPoints) {
+      const blip = point.blip;
+      const isOnBlip = blip.lineNumber === activeLn;
+      const isOnDesc = blip.description.length > 0 && activeLn > blip.lineNumber && activeLn <= blip.lineNumber + blip.description.length;
+      if (isOnBlip || isOnDesc) {
+        const quadrant = parsed.quadrants.find((q) => q.blips.includes(blip));
+        const qColor = resolveQuadrantColor(
+          quadrant.position,
+          quadrant.color,
+          palette
+        );
+        const svgRect = svg.node()?.getBoundingClientRect();
+        if (svgRect) {
+          const fakeEvent = {
+            clientX: svgRect.left + point.x,
+            clientY: svgRect.top + offsetY + point.y
+          };
+          showBlipPopover(
+            popover,
+            blip,
+            qColor,
+            palette,
+            isDark,
+            fakeEvent,
+            // Tech-radar opts out of solid-fill: blip popover stays in tinted
+            // form so it reads consistently against the radar bg regardless of
+            // the diagram's option setting.
+            false
+          );
+        }
+        const lineNum = String(blip.lineNumber);
+        const blipEl = svg.select(`[data-line-number="${lineNum}"]`);
+        if (!blipEl.empty()) {
+          blipEl.attr(
+            "transform",
+            `translate(${point.x},${point.y}) scale(1.5) translate(${-point.x},${-point.y})`
+          );
+        }
+        svg.selectAll("[data-line-number]").style("opacity", function() {
+          return this.getAttribute("data-line-number") === lineNum ? "1" : String(DIM_OPACITY);
+        });
+        break;
+      }
+    }
+  }
+  if (showListing) {
+    renderBlipListing(
+      svg,
+      parsed,
+      palette,
+      isDark,
+      textColor,
+      radarHeight + sListingTopMargin,
+      width,
+      onClickItem,
+      sListingFontSize,
+      sListingHeaderFontSize,
+      sListingColGap,
+      sListingLineHeight,
+      sListingBlipR
+    );
+  }
+}
+var LISTING_BLIP_R = 11;
+function renderBlipListing(svg, parsed, palette, isDark, textColor, startY, totalWidth, onClickItem, sListingFontSize = LISTING_FONT_SIZE, sListingHeaderFontSize = LISTING_HEADER_FONT_SIZE, sListingColGap = LISTING_COL_GAP, sListingLineHeight = LISTING_LINE_HEIGHT, sListingBlipR = LISTING_BLIP_R) {
+  const colCount = parsed.quadrants.length;
+  if (colCount === 0) return;
+  const colWidth = (totalWidth - sListingColGap * (colCount + 1)) / colCount;
+  const sortedQuadrants = [...parsed.quadrants].sort(
+    (a, b) => POSITION_ORDER.indexOf(a.position) - POSITION_ORDER.indexOf(b.position)
+  );
+  for (let ci = 0; ci < sortedQuadrants.length; ci++) {
+    const quadrant = sortedQuadrants[ci];
+    const qColor = resolveQuadrantColor(
+      quadrant.position,
+      quadrant.color,
+      palette
+    );
+    const colX = sListingColGap + ci * (colWidth + sListingColGap);
+    let y = startY;
+    const headerText = svg.append("text").attr("x", colX).attr("y", y).attr("fill", qColor).attr("font-family", FONT_FAMILY).attr("font-size", sListingHeaderFontSize).attr("font-weight", "bold").style("cursor", "pointer").text(quadrant.name);
+    const qPos = quadrant.position;
+    headerText.on("mouseenter", () => {
+      svg.selectAll("[data-quadrant][data-ring]").style("opacity", function() {
+        return this.getAttribute("data-quadrant") === qPos ? "1" : String(DIM_OPACITY);
+      });
+    }).on("mouseleave", () => {
+      svg.selectAll("[data-quadrant][data-ring]").style("opacity", "1");
+    });
+    y += sListingLineHeight + 6;
+    const sortedBlips = [...quadrant.blips].sort(
+      (a, b) => a.globalNumber - b.globalNumber
+    );
+    for (const blip of sortedBlips) {
+      const itemGroup = svg.append("g").attr("data-line-number", blip.lineNumber).attr("data-quadrant", quadrant.position).attr("data-ring", blip.ring).attr("data-trend", blip.trend ?? "stable").style("cursor", onClickItem ? "pointer" : "default");
+      const blipCx = colX + sListingBlipR;
+      const blipCy = y - sListingBlipR + 2;
+      const trendAngle = -Math.PI / 2;
+      renderTrendIndicator(
+        itemGroup,
+        blip.trend,
+        qColor,
+        blipCx,
+        blipCy,
+        sListingBlipR,
+        trendAngle
+      );
+      itemGroup.append("text").attr("x", blipCx).attr("y", blipCy + 3).attr("text-anchor", "middle").attr("fill", isDark ? "#000" : "#fff").attr("font-family", FONT_FAMILY).attr("font-size", 9).attr("font-weight", "bold").text(blip.globalNumber);
+      const textX = colX + sListingBlipR * 2 + 6;
+      const availableWidth = colWidth - sListingBlipR * 2 - 8;
+      const fullLabel = `${blip.name} (${blip.ring})`;
+      const label = truncateText(fullLabel, sListingFontSize, availableWidth);
+      itemGroup.append("text").attr("x", textX).attr("y", y).attr("fill", textColor).attr("font-family", FONT_FAMILY).attr("font-size", sListingFontSize).text(label);
+      const ln = String(blip.lineNumber);
+      itemGroup.on("mouseenter", () => {
+        svg.selectAll("[data-line-number]").style("opacity", function() {
+          const isMatch = this.getAttribute("data-line-number") === ln;
+          if (isMatch && this.getAttribute("data-quadrant") && this.closest("g[transform]")) {
+            const bbox = this.getBBox?.();
+            if (bbox) {
+              const bx = bbox.x + bbox.width / 2;
+              const by = bbox.y + bbox.height / 2;
+              this.setAttribute(
+                "transform",
+                `translate(${bx},${by}) scale(1.5) translate(${-bx},${-by})`
+              );
+            }
+          }
+          return isMatch ? "1" : String(DIM_OPACITY);
+        });
+      }).on("mouseleave", () => {
+        svg.selectAll("[data-line-number]").style("opacity", "1").attr("transform", null);
+      });
+      if (onClickItem) {
+        itemGroup.on("click", () => onClickItem(blip.lineNumber));
+      }
+      y += sListingLineHeight;
+    }
+  }
+}
+function renderRingHoverAreas(radarGroup, svg, parsed, palette, cx, cy, ringBandWidth, _maxRadius) {
+  for (const quadrant of parsed.quadrants) {
+    const { startAngle, endAngle } = getQuadrantArc(quadrant.position);
+    const qColor = resolveQuadrantColor(
+      quadrant.position,
+      quadrant.color,
+      palette
+    );
+    for (let ri = 0; ri < parsed.rings.length; ri++) {
+      const innerR = ri * ringBandWidth;
+      const outerR = (ri + 1) * ringBandWidth;
+      const ringName = parsed.rings[ri].name;
+      const path = buildArcSlicePath(
+        cx,
+        cy,
+        innerR,
+        outerR,
+        startAngle,
+        endAngle
+      );
+      const hitArea = radarGroup.append("path").attr("d", path).attr("fill", "transparent").style("cursor", "pointer");
+      hitArea.on("mouseenter", () => {
+        hitArea.attr("fill", qColor).attr("opacity", 0.15);
+        svg.selectAll("[data-quadrant][data-ring]").style("opacity", function() {
+          const q = this.getAttribute("data-quadrant");
+          const r = this.getAttribute("data-ring");
+          return q === quadrant.position && r === ringName ? "1" : String(DIM_OPACITY);
+        });
+      }).on("mouseleave", () => {
+        hitArea.attr("fill", "transparent").attr("opacity", 1);
+        svg.selectAll("[data-quadrant][data-ring]").style("opacity", "1");
+      });
+    }
+  }
+}
+function buildArcSlicePath(cx, cy, innerR, outerR, startAngle, endAngle) {
+  const ox1 = cx + outerR * Math.cos(startAngle);
+  const oy1 = cy - outerR * Math.sin(startAngle);
+  const ox2 = cx + outerR * Math.cos(endAngle);
+  const oy2 = cy - outerR * Math.sin(endAngle);
+  const ix1 = cx + innerR * Math.cos(endAngle);
+  const iy1 = cy - innerR * Math.sin(endAngle);
+  const ix2 = cx + innerR * Math.cos(startAngle);
+  const iy2 = cy - innerR * Math.sin(startAngle);
+  if (innerR === 0) {
+    return `M${cx},${cy} L${ox1},${oy1} A${outerR},${outerR} 0 0,0 ${ox2},${oy2} Z`;
+  }
+  return `M${ox1},${oy1} A${outerR},${outerR} 0 0,0 ${ox2},${oy2} L${ix1},${iy1} A${innerR},${innerR} 0 0,1 ${ix2},${iy2} Z`;
+}
+function estimateListingHeight(parsed, lineHeight = LISTING_LINE_HEIGHT, topMargin = LISTING_TOP_MARGIN) {
+  const maxBlipsInQuadrant = Math.max(
+    0,
+    ...parsed.quadrants.map((q) => q.blips.length)
+  );
+  return lineHeight * (maxBlipsInQuadrant + 1) + lineHeight + topMargin;
+}
+function createBlipPopover(container, _palette, isDark) {
+  container.style.position = "relative";
+  const existing = container.querySelector(
+    "[data-blip-popover]"
+  );
+  if (existing) {
+    existing.style.display = "none";
+    return existing;
+  }
+  const el = document.createElement("div");
+  el.setAttribute("data-blip-popover", "");
+  el.style.position = "absolute";
+  el.style.display = "none";
+  el.style.pointerEvents = "none";
+  el.style.zIndex = "20";
+  el.style.maxWidth = "280px";
+  el.style.fontFamily = FONT_FAMILY;
+  el.style.fontSize = "12px";
+  el.style.lineHeight = "1.5";
+  el.style.borderRadius = "6px";
+  el.style.overflow = "hidden";
+  el.style.boxShadow = isDark ? "0 4px 12px rgba(0,0,0,0.4)" : "0 4px 12px rgba(0,0,0,0.12)";
+  container.appendChild(el);
+  return el;
+}
+function showBlipPopover(popover, blip, qColor, palette, isDark, event, solid) {
+  const fillColor = shapeFill(palette, qColor, isDark, {
+    ...solid !== void 0 && { solid }
+  });
+  const hasDesc = blip.description.length > 0;
+  const onFillText = contrastText(
+    fillColor,
+    palette.textOnFillLight,
+    palette.textOnFillDark
+  );
+  let html = `<div style="background:${fillColor}; border: 1.5px solid ${qColor}; border-radius: 6px; overflow: hidden;">`;
+  html += `<div style="padding: 8px 12px; font-weight: 600; color: ${onFillText};">${escapeHtml2(blip.name)}</div>`;
+  if (hasDesc) {
+    html += `<div style="border-top: 1px solid ${qColor}; opacity: 0.3;"></div>`;
+    html += `<div style="padding: 6px 12px 8px; color: ${palette.textMuted}; font-size: 11px; line-height: 1.6;">`;
+    const paragraphs = joinDescriptionParagraphs(blip.description);
+    for (const para of paragraphs) {
+      html += renderDescriptionLine(para, palette);
+    }
+    html += `</div>`;
+  }
+  html += `</div>`;
+  popover.innerHTML = html;
+  popover.style.display = "block";
+  positionPopover(popover, event);
+}
+function positionPopover(popover, event) {
+  const container = popover.parentElement;
+  const rect = container.getBoundingClientRect();
+  const tipW = popover.offsetWidth;
+  const tipH = popover.offsetHeight;
+  const cursorX = event.clientX - rect.left;
+  const cursorY = event.clientY - rect.top;
+  const centerX = rect.width / 2;
+  const centerY = rect.height / 2;
+  let left = cursorX < centerX ? cursorX + 16 : cursorX - tipW - 16;
+  let top = cursorY < centerY ? cursorY + 16 : cursorY - tipH - 16;
+  if (left + tipW > rect.width - 4) left = rect.width - tipW - 4;
+  if (left < 4) left = 4;
+  if (top + tipH > rect.height - 4) top = rect.height - tipH - 4;
+  if (top < 4) top = 4;
+  popover.style.left = `${left}px`;
+  popover.style.top = `${top}px`;
+}
+function hideBlipPopover(popover) {
+  popover.style.display = "none";
+  popover.style.pointerEvents = "none";
+}
+function joinDescriptionParagraphs(lines) {
+  const result = [];
+  let currentPara = "";
+  for (const line of lines) {
+    const trimmed = line.trim();
+    const isBullet = /^[-*•]\s+/.test(trimmed);
+    if (isBullet) {
+      if (currentPara) {
+        result.push(currentPara);
+        currentPara = "";
+      }
+      result.push(trimmed);
+    } else if (!trimmed) {
+      if (currentPara) {
+        result.push(currentPara);
+        currentPara = "";
+      }
+    } else {
+      currentPara = currentPara ? `${currentPara} ${trimmed}` : trimmed;
+    }
+  }
+  if (currentPara) result.push(currentPara);
+  return result;
+}
+function renderDescriptionLine(line, palette) {
+  const trimmed = line.trim();
+  const isBullet = /^[-*•]\s+/.test(trimmed);
+  const content = isBullet ? trimmed.replace(/^[-*•]\s+/, "") : trimmed;
+  const spans = parseInlineMarkdown(content);
+  let spanHtml = "";
+  for (const span of spans) {
+    let text = escapeHtml2(span.text);
+    if (span.bold) text = `<strong>${text}</strong>`;
+    if (span.italic) text = `<em>${text}</em>`;
+    if (span.code)
+      text = `<code style="background:${palette.surface}; padding: 1px 4px; border-radius: 3px; font-size: 10px;">${text}</code>`;
+    if (span.href) {
+      const safe = safeHref(span.href);
+      if (safe !== null) {
+        text = `<a href="${escapeHtml2(safe)}" target="_blank" rel="noopener noreferrer" style="color: ${palette.primary ?? palette.text}; text-decoration: underline;">${text}</a>`;
+      }
+    }
+    spanHtml += text;
+  }
+  if (isBullet) {
+    return `<div style="padding-left: 12px; text-indent: -10px; margin: 1px 0;">\u2022 ${spanHtml}</div>`;
+  }
+  return `<div style="margin: 2px 0;">${spanHtml}</div>`;
+}
+function escapeHtml2(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function renderQuadrantLabel(g, name, x, y, anchor, color, maxWidth, baseFontSize = QUADRANT_LABEL_FONT_SIZE) {
+  const lines = wrapTextToWidth(name, baseFontSize, maxWidth);
+  const estimatedWidth = Math.max(
+    ...lines.map((l) => measureText(l, baseFontSize))
+  );
+  const fontSize = estimatedWidth > maxWidth ? Math.max(12, baseFontSize * (maxWidth / estimatedWidth)) : baseFontSize;
+  const lineHeight = fontSize * 1.2;
+  for (let i = 0; i < lines.length; i++) {
+    g.append("text").attr("x", x).attr("y", y + i * lineHeight).attr("text-anchor", anchor).attr("fill", color).attr("font-family", FONT_FAMILY).attr("font-size", fontSize).attr("font-weight", "bold").text(lines[i]);
+  }
+}
+function getQuadrantLabelPosition(position, cx, cy, maxRadius) {
+  const margin = 8;
+  switch (position) {
+    case "top-left":
+      return {
+        x: cx - maxRadius + margin,
+        y: cy - maxRadius + 16,
+        anchor: "start"
+      };
+    case "top-right":
+      return {
+        x: cx + maxRadius - margin,
+        y: cy - maxRadius + 16,
+        anchor: "end"
+      };
+    case "bottom-left":
+      return {
+        x: cx - maxRadius + margin,
+        y: cy + maxRadius - 8,
+        anchor: "start"
+      };
+    case "bottom-right":
+      return {
+        x: cx + maxRadius - margin,
+        y: cy + maxRadius - 8,
+        anchor: "end"
+      };
+  }
+}
+function renderTechRadarForExport(container, parsed, palette, isDark, exportDims, viewState, exportMode) {
+  renderTechRadar(
+    container,
+    parsed,
+    palette,
+    isDark,
+    void 0,
+    exportDims,
+    viewState,
+    { ...exportMode !== void 0 && { exportMode } }
+  );
+}
+
+export {
+  computeRadarLayout,
+  getRadarGeometry,
+  renderQuadrantFocus,
+  renderQuadrantFocusForExport,
+  renderTechRadar,
+  renderTechRadarForExport
+};
+//# sourceMappingURL=chunk-4GRI7MEB.js.map