@diagrammo/dgmo 0.77.0 → 0.78.0

package/dist/{chunk-EUVUOPRC.js → chunk-VAA7QSZ7.js}

@@ -1,19 +1,22 @@
 import {
   parseInlineMarkdown,
   safeHref
-} from "./chunk-WGC42WJU.js";
+} from "./chunk-FWNJDD4U.js";
 import {
   ScaleContext
 } from "./chunk-24YPR5EH.js";
+import {
+  TITLE_FONT_SIZE
+} from "./chunk-VSPNH7LC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-U4DS2ODO.js";
+} from "./chunk-67I3HFSF.js";
 import {
   getMaxLegendReservedHeight
-} from "./chunk-VRPV6QXR.js";
+} from "./chunk-IZTU6WVR.js";
 import {
   FONT_FAMILY
-} from "./chunk-53SEVJQM.js";
+} from "./chunk-ICLB27PZ.js";
 import {
   measureText,
   truncateText,
@@ -27,7 +30,7 @@ import {
   contrastText,
   mix,
   shapeFill
-} from "./chunk-GLREDNBA.js";
+} from "./chunk-YVLTNNME.js";
 
 // src/tech-radar/renderer.ts
 import * as d3Selection2 from "d3-selection";
@@ -218,7 +221,7 @@ function createTooltip(container, palette, isDark) {
 import * as d3Selection from "d3-selection";
 var BLIP_RADIUS = 13;
 var BLIP_FONT_SIZE = 10;
-var TITLE_FONT_SIZE = 16;
+var TITLE_FONT_SIZE2 = 16;
 var NARROW_BREAKPOINT = 600;
 function renderQuadrantFocus(container, parsed, quadrantPosition, palette, isDark, onClickItem, exportDims, _options) {
   const quadrant = parsed.quadrants.find(
@@ -239,7 +242,7 @@ function renderQuadrantFocus(container, parsed, quadrantPosition, palette, isDar
   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};
+    font-size: ${TITLE_FONT_SIZE2}px; background: ${palette.bg};
   `;
   const titleLink = document.createElement("span");
   titleLink.textContent = parsed.title || "Tech Radar";
@@ -293,7 +296,6 @@ function renderQuadrantFocus(container, parsed, quadrantPosition, palette, isDar
     quadrant,
     qColor,
     palette,
-    isDark,
     svgWidth,
     svgHeight,
     palette.border,
@@ -316,7 +318,7 @@ function renderQuadrantFocus(container, parsed, quadrantPosition, palette, isDar
     }
   }
 }
-function renderQuarterCircle(svg, parsed, quadrant, qColor, palette, isDark, width, height, mutedColor, _tooltip, rootContainer, onClickItem) {
+function renderQuarterCircle(svg, parsed, quadrant, qColor, palette, width, height, mutedColor, _tooltip, rootContainer, onClickItem) {
   const padding = 8;
   const size = Math.min(width - padding, height - padding);
   const maxRadius = size * 0.95;
@@ -399,7 +401,10 @@ function renderQuarterCircle(svg, parsed, quadrant, qColor, palette, isDark, wid
         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);
+      blipGroup.append("text").attr("x", bx).attr("y", by + 3).attr("text-anchor", "middle").attr(
+        "fill",
+        contrastText(qColor, palette.textOnFillLight, palette.textOnFillDark)
+      ).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(
@@ -463,7 +468,7 @@ function renderHtmlPanel(panel, parsed, quadrant, qColor, palette, isDark, rootC
       `;
       const header = document.createElement("div");
       header.style.cssText = `
-        font-size: 13px; font-weight: 700; color: ${palette.textMuted};
+        font-size: 13px; font-weight: bold; color: ${palette.textMuted};
         margin-bottom: 8px;
       `;
       header.textContent = ringName;
@@ -505,12 +510,19 @@ function renderHtmlPanel(panel, parsed, quadrant, qColor, palette, isDark, rootC
           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);
+        d3Selection.select(indicatorSvg).append("text").attr("x", 13).attr("y", 16).attr("text-anchor", "middle").attr(
+          "fill",
+          contrastText(
+            qColor,
+            palette.textOnFillLight,
+            palette.textOnFillDark
+          )
+        ).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;
+          flex: 1; font-size: 12px; font-weight: bold;
           color: ${palette.text}; white-space: nowrap;
           overflow: hidden; text-overflow: ellipsis;
         `;
@@ -695,7 +707,7 @@ function renderQuadrantFocusForExport(container, parsed, quadrantPosition, palet
   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};
+    font-size: ${TITLE_FONT_SIZE2 + 2}px; background: ${palette.bg};
   `;
   const titleText = document.createElement("span");
   titleText.textContent = parsed.title || "Tech Radar";
@@ -735,13 +747,12 @@ function renderQuadrantFocusForExport(container, parsed, quadrantPosition, palet
     quadrant,
     qColor,
     palette,
-    isDark,
     svgWidth,
     svgHeight,
     palette.border
   );
 }
-function renderQuarterCircleStatic(svg, parsed, quadrant, qColor, palette, isDark, width, height, mutedColor) {
+function renderQuarterCircleStatic(svg, parsed, quadrant, qColor, palette, width, height, mutedColor) {
   const padding = 8;
   const size = Math.min(width - padding, height - padding);
   const maxRadius = size * 0.95;
@@ -779,7 +790,7 @@ function renderQuarterCircleStatic(svg, parsed, quadrant, qColor, palette, isDar
     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);
+    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", "bold").attr("opacity", 0.5).text(parsed.rings[ri].name);
   }
   const ringOrder = parsed.rings.map((r) => r.name);
   const angularPadding = 0.08;
@@ -816,7 +827,10 @@ function renderQuarterCircleStatic(svg, parsed, quadrant, qColor, palette, isDar
         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);
+      blipGroup.append("text").attr("x", bx).attr("y", by + 3).attr("text-anchor", "middle").attr(
+        "fill",
+        contrastText(qColor, palette.textOnFillLight, palette.textOnFillDark)
+      ).attr("font-family", FONT_FAMILY).attr("font-size", BLIP_FONT_SIZE).attr("font-weight", "bold").text(blip.globalNumber);
     }
   }
 }
@@ -837,7 +851,7 @@ function renderStaticHtmlPanel(panel, parsed, quadrant, qColor, palette, isDark)
     `;
     const header = document.createElement("div");
     header.style.cssText = `
-      font-size: 13px; font-weight: 700; color: ${palette.textMuted};
+      font-size: 13px; font-weight: bold; color: ${palette.textMuted};
       margin-bottom: 8px;
     `;
     header.textContent = ringName;
@@ -872,12 +886,15 @@ function renderStaticHtmlPanel(panel, parsed, quadrant, qColor, palette, isDark)
         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);
+      d3Selection.select(indicatorSvg).append("text").attr("x", 13).attr("y", 16).attr("text-anchor", "middle").attr(
+        "fill",
+        contrastText(qColor, palette.textOnFillLight, palette.textOnFillDark)
+      ).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;
+        flex: 1; font-size: 12px; font-weight: bold;
         color: ${palette.text};
       `;
       titleRow.appendChild(name);
@@ -904,7 +921,6 @@ 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;
@@ -950,7 +966,7 @@ function renderTechRadar(container, parsed, palette, isDark, onClickItem, export
   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 sTitleFontSize = ctx.text(TITLE_FONT_SIZE);
   const sListingFontSize = ctx.text(LISTING_FONT_SIZE);
   const sListingHeaderFontSize = ctx.text(LISTING_HEADER_FONT_SIZE);
   const sListingTopMargin = ctx.aesthetic(LISTING_TOP_MARGIN);
@@ -1080,10 +1096,10 @@ function renderTechRadar(container, parsed, palette, isDark, onClickItem, export
   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);
+      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", "bold").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);
+      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", "bold").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", "bold").attr("opacity", 0.5).text(parsed.rings[ri].name);
     }
   }
   for (const quadrant of parsed.quadrants) {
@@ -1161,7 +1177,10 @@ function renderTechRadar(container, parsed, palette, isDark, onClickItem, export
       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);
+    blipGroup.append("text").attr("x", point.x).attr("y", point.y + 3).attr("text-anchor", "middle").attr(
+      "fill",
+      contrastText(qColor, palette.textOnFillLight, palette.textOnFillDark)
+    ).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;
@@ -1273,7 +1292,6 @@ function renderTechRadar(container, parsed, palette, isDark, onClickItem, export
       svg,
       parsed,
       palette,
-      isDark,
       textColor,
       radarHeight + sListingTopMargin,
       width,
@@ -1287,7 +1305,7 @@ function renderTechRadar(container, parsed, palette, isDark, onClickItem, export
   }
 }
 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) {
+function renderBlipListing(svg, parsed, palette, 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;
@@ -1330,7 +1348,10 @@ function renderBlipListing(svg, parsed, palette, isDark, textColor, startY, tota
         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);
+      itemGroup.append("text").attr("x", blipCx).attr("y", blipCy + 3).attr("text-anchor", "middle").attr(
+        "fill",
+        contrastText(qColor, palette.textOnFillLight, palette.textOnFillDark)
+      ).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})`;
@@ -1453,7 +1474,7 @@ function showBlipPopover(popover, blip, qColor, palette, isDark, event, fillMode
     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>`;
+  html += `<div style="padding: 8px 12px; font-weight: bold; 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;">`;
@@ -1603,4 +1624,4 @@ export {
   renderTechRadar,
   renderTechRadarForExport
 };
-//# sourceMappingURL=chunk-EUVUOPRC.js.map
+//# sourceMappingURL=chunk-VAA7QSZ7.js.map

package/dist/{chunk-43AJKH2U.js → chunk-VQGQF7O7.js}

@@ -1,9 +1,9 @@
 import {
   renderIntegratedLegend
-} from "./chunk-U4DS2ODO.js";
+} from "./chunk-67I3HFSF.js";
 import {
   FONT_FAMILY
-} from "./chunk-53SEVJQM.js";
+} from "./chunk-ICLB27PZ.js";
 import {
   getFigure,
   getPartGeom,
@@ -13,12 +13,12 @@ import {
   resolveActiveTagGroup,
   resolveTagColor,
   tagAttrKey
-} from "./chunk-76LHNLGX.js";
+} from "./chunk-R4YGH7DJ.js";
 import {
   getSeriesColors,
   mix,
   themeBaseBg
-} from "./chunk-GLREDNBA.js";
+} from "./chunk-YVLTNNME.js";
 import {
   resolveColor
 } from "./chunk-XOGQY4EC.js";
@@ -171,7 +171,7 @@ function gutterLabels(r, palette) {
       prevY = ly;
       const note = a.part.notes.length ? a.part.notes[0] : "";
       const dl = ` class="dgmo-body-part" data-line-number="${a.part.lineNumber}" data-emph-key="${esc(a.emph)}"`;
-      labels += `<path${dl} d="M${sx} ${ly} L${tgt.x} ${tgt.y}" stroke="${a.color}" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" fill="none" opacity="0.85"/><circle${dl} cx="${tgt.x}" cy="${tgt.y}" r="5.5" fill="${a.color}" stroke="${palette.bg}" stroke-width="2" vector-effect="non-scaling-stroke"/><text${dl} x="${gx}" y="${ly + (note ? -2 : 7)}" text-anchor="${anchorX}" font-size="${LABEL_FONT}" font-weight="700" fill="${palette.text}">${esc(partLabel(a.part))}</text>`;
+      labels += `<path${dl} d="M${sx} ${ly} L${tgt.x} ${tgt.y}" stroke="${a.color}" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" fill="none" opacity="0.85"/><circle${dl} cx="${tgt.x}" cy="${tgt.y}" r="5.5" fill="${a.color}" stroke="${palette.bg}" stroke-width="2" vector-effect="non-scaling-stroke"/><text${dl} x="${gx}" y="${ly + (note ? -2 : 7)}" text-anchor="${anchorX}" font-size="${LABEL_FONT}" font-weight="bold" fill="${palette.text}">${esc(partLabel(a.part))}</text>`;
       if (note) {
         labels += `<text${dl} x="${gx}" y="${ly + 22}" text-anchor="${anchorX}" font-size="${NOTE_FONT}" fill="${palette.textMuted}">${esc(note)}</text>`;
       }
@@ -280,7 +280,7 @@ function renderBody(container, parsed, palette, _isDark, _onClickItem, exportDim
       if (it.right) {
         labels += `<path${dl} d="M${(centerX + stub).toFixed(1)} ${it.y.toFixed(1)} L${it.right.x.toFixed(1)} ${it.right.y.toFixed(1)}" stroke="${it.color}" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" fill="none" opacity="0.85"/><circle${dl} cx="${it.right.x.toFixed(1)}" cy="${it.right.y.toFixed(1)}" r="5.5" fill="${it.color}" stroke="${palette.bg}" stroke-width="2" vector-effect="non-scaling-stroke"/>`;
       }
-      labels += `<text${dl} x="${centerX}" y="${(it.y - 3).toFixed(1)}" text-anchor="middle" font-size="${LABEL_FONT}" font-weight="700" fill="${palette.text}">${esc(it.name)}</text>`;
+      labels += `<text${dl} x="${centerX}" y="${(it.y - 3).toFixed(1)}" text-anchor="middle" font-size="${LABEL_FONT}" font-weight="bold" fill="${palette.text}">${esc(it.name)}</text>`;
       if (it.note) {
         labels += `<text${dl} x="${centerX}" y="${(it.y + 20).toFixed(1)}" text-anchor="middle" font-size="${NOTE_FONT}" fill="${palette.textMuted}">${esc(it.note)}</text>`;
       }
@@ -292,9 +292,11 @@ function renderBody(container, parsed, palette, _isDark, _onClickItem, exportDim
   d3Selection.select(container).selectAll("svg").remove();
   const width = exportDims?.width ?? container.clientWidth ?? 1200;
   const height = exportDims?.height ?? container.clientHeight ?? 800;
-  const svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", height).attr(
+  const vbW = totalW + 2 * PAGE_MARGIN;
+  const vbH = totalH + 2 * PAGE_MARGIN;
+  const svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", vbW > 0 ? Math.round(width * vbH / vbW) : height).attr(
     "viewBox",
-    `${-PAGE_MARGIN} ${-PAGE_MARGIN} ${(totalW + 2 * PAGE_MARGIN).toFixed(0)} ${(totalH + 2 * PAGE_MARGIN).toFixed(0)}`
+    `${-PAGE_MARGIN} ${-PAGE_MARGIN} ${vbW.toFixed(0)} ${vbH.toFixed(0)}`
   ).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").style("font-family", FONT_FAMILY);
   if (defs.length) {
     const defsSel = svg.append("defs");
@@ -307,7 +309,7 @@ function renderBody(container, parsed, palette, _isDark, _onClickItem, exportDim
   }
   svg.append("g").html(body);
   if (parsed.title && !parsed.options.noTitle) {
-    svg.append("text").attr("x", totalW / 2).attr("y", 40).attr("text-anchor", "middle").attr("font-size", 34).attr("font-weight", 700).attr("fill", palette.text).text(parsed.title);
+    svg.append("text").attr("x", totalW / 2).attr("y", 40).attr("text-anchor", "middle").attr("font-size", 34).attr("font-weight", "bold").attr("fill", palette.text).text(parsed.title);
   }
   if (!parsed.options.noLegend && parsed.tagGroups.length) {
     const legendG = svg.append("g").attr("transform", `translate(0, ${TITLE_H}) scale(${LEGEND_SCALE})`);
@@ -346,4 +348,4 @@ export {
   renderBody,
   renderBodyForExport
 };
-//# sourceMappingURL=chunk-43AJKH2U.js.map
+//# sourceMappingURL=chunk-VQGQF7O7.js.map

package/dist/{chunk-DEW62ON3.js → chunk-VSPNH7LC.js}

@@ -1,6 +1,6 @@
 // src/utils/title-constants.ts
 var TITLE_FONT_SIZE = 20;
-var TITLE_FONT_WEIGHT = "700";
+var TITLE_FONT_WEIGHT = "bold";
 var TITLE_Y = 30;
 var TITLE_OFFSET = 40;
 var CAPTION_FONT_SIZE = 13;
@@ -20,4 +20,4 @@ export {
   CAPTION_BOX_PADDING_X,
   CAPTION_BOX_PADDING_Y
 };
-//# sourceMappingURL=chunk-DEW62ON3.js.map
+//# sourceMappingURL=chunk-VSPNH7LC.js.map

package/dist/{chunk-4YER7UCV.js → chunk-VUJQ6RU6.js}

@@ -8,7 +8,7 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-76LHNLGX.js";
+} from "./chunk-R4YGH7DJ.js";
 import {
   TREEMAP_REGISTRY,
   extractColor,
@@ -445,4 +445,4 @@ export {
   TREEMAP_DIAGNOSTICS,
   parseTreemap
 };
-//# sourceMappingURL=chunk-4YER7UCV.js.map
+//# sourceMappingURL=chunk-VUJQ6RU6.js.map

package/dist/{chunk-CHOK7NCJ.js → chunk-VZD3ZV4Y.js}

@@ -1,44 +1,48 @@
 import {
   layoutClassDiagram
-} from "./chunk-LM3HY3VG.js";
+} from "./chunk-P2DM7Q5U.js";
 import {
   NOTE_BADGE_RADIUS,
   noteConnectorPoints,
   renderNoteBadge,
   renderNoteBox,
   renderNoteConnector
-} from "./chunk-Q74GP3GK.js";
+} from "./chunk-KO6DGOOB.js";
 import {
-  extractExportSvg,
-  runInExportContainer
-} from "./chunk-YM5RMLFO.js";
+  ScaleContext
+} from "./chunk-24YPR5EH.js";
 import {
+  ARROWHEAD_HEIGHT,
+  ARROWHEAD_WIDTH,
+  EDGE_DASH,
+  EDGE_LABEL_KNOCKOUT_OPACITY,
   EDGE_STROKE_WIDTH,
   NODE_STROKE_WIDTH
-} from "./chunk-FJ57274M.js";
+} from "./chunk-IIEI7VK5.js";
 import {
-  ScaleContext
-} from "./chunk-24YPR5EH.js";
+  extractExportSvg,
+  runInExportContainer
+} from "./chunk-QFIXL3OK.js";
 import {
   layoutInlineHeader
-} from "./chunk-MG3DE3VO.js";
+} from "./chunk-FLMXJMMY.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
   TITLE_Y
-} from "./chunk-DEW62ON3.js";
+} from "./chunk-VSPNH7LC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-U4DS2ODO.js";
+} from "./chunk-67I3HFSF.js";
 import {
   getLegendExtent
-} from "./chunk-VRPV6QXR.js";
+} from "./chunk-IZTU6WVR.js";
 import {
   FONT_FAMILY
-} from "./chunk-53SEVJQM.js";
+} from "./chunk-ICLB27PZ.js";
 import {
   LEGEND_HEIGHT
-} from "./chunk-YT5ICQ4R.js";
+} from "./chunk-MFK7LF66.js";
 import {
   measureText
 } from "./chunk-MTGGOCND.js";
@@ -53,7 +57,7 @@ import {
 import {
   contrastText,
   shapeFill
-} from "./chunk-GLREDNBA.js";
+} from "./chunk-YVLTNNME.js";
 
 // src/class/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -215,12 +219,12 @@ function renderClassDiagram(container, parsed, layout, palette, isDark, onClickI
     svg.attr("width", "100%");
   }
   const defs = svg.append("defs");
-  const AW = 12;
-  const AH = 8;
+  const AW = ARROWHEAD_WIDTH;
+  const AH = ARROWHEAD_HEIGHT;
   defs.append("marker").attr("id", "cd-arrow-inherit").attr("viewBox", `0 0 ${AW} ${AH}`).attr("refX", AW).attr("refY", AH / 2).attr("markerWidth", AW).attr("markerHeight", AH).attr("orient", "auto").append("polygon").attr("points", `0,0 ${AW},${AH / 2} 0,${AH}`).attr("fill", palette.textMuted).attr("stroke", palette.textMuted).attr("stroke-width", 1);
   defs.append("marker").attr("id", "cd-arrow-implement").attr("viewBox", `0 0 ${AW} ${AH}`).attr("refX", AW).attr("refY", AH / 2).attr("markerWidth", AW).attr("markerHeight", AH).attr("orient", "auto").append("polygon").attr("points", `0,0 ${AW},${AH / 2} 0,${AH}`).attr("fill", palette.bg).attr("stroke", palette.textMuted).attr("stroke-width", 1);
-  const DW = 12;
-  const DH = 8;
+  const DW = ARROWHEAD_WIDTH;
+  const DH = ARROWHEAD_HEIGHT;
   defs.append("marker").attr("id", "cd-arrow-compose").attr("viewBox", `0 0 ${DW} ${DH}`).attr("refX", 0).attr("refY", DH / 2).attr("markerWidth", DW).attr("markerHeight", DH).attr("orient", "auto").append("polygon").attr("points", `${DW / 2},0 ${DW},${DH / 2} ${DW / 2},${DH} 0,${DH / 2}`).attr("fill", palette.textMuted).attr("stroke", palette.textMuted).attr("stroke-width", 1);
   defs.append("marker").attr("id", "cd-arrow-aggregate").attr("viewBox", `0 0 ${DW} ${DH}`).attr("refX", 0).attr("refY", DH / 2).attr("markerWidth", DW).attr("markerHeight", DH).attr("orient", "auto").append("polygon").attr("points", `${DW / 2},0 ${DW},${DH / 2} ${DW / 2},${DH} 0,${DH / 2}`).attr("fill", palette.bg).attr("stroke", palette.textMuted).attr("stroke-width", 1);
   defs.append("marker").attr("id", "cd-arrow-depend").attr("viewBox", `0 0 ${AW} ${AH}`).attr("refX", AW).attr("refY", AH / 2).attr("markerWidth", AW).attr("markerHeight", AH).attr("orient", "auto").append("polyline").attr("points", `0,0 ${AW},${AH / 2} 0,${AH}`).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1.5);
@@ -271,7 +275,7 @@ function renderClassDiagram(container, parsed, layout, palette, isDark, onClickI
     if (pathD) {
       const pathEl = edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", edgeColor).attr("stroke-width", sEdgeStrokeWidth).attr("class", "cd-edge");
       if (dashed) {
-        pathEl.attr("stroke-dasharray", "6 3");
+        pathEl.attr("stroke-dasharray", EDGE_DASH);
       }
       if (sourceMarker) {
         pathEl.attr("marker-start", `url(#${markerId})`);
@@ -284,7 +288,7 @@ function renderClassDiagram(container, parsed, layout, palette, isDark, onClickI
       const midPt = edge.points[midIdx];
       const bgW = measureText(edge.label, sEdgeLabelFontSize) + 8;
       const bgH = 16;
-      edgeG.append("rect").attr("x", midPt.x - bgW / 2).attr("y", midPt.y - bgH / 2 - 1).attr("width", bgW).attr("height", bgH).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.85).attr("class", "cd-edge-label-bg");
+      edgeG.append("rect").attr("x", midPt.x - bgW / 2).attr("y", midPt.y - bgH / 2 - 1).attr("width", bgW).attr("height", bgH).attr("rx", 3).attr("fill", palette.bg).attr("opacity", EDGE_LABEL_KNOCKOUT_OPACITY).attr("class", "cd-edge-label-bg");
       edgeG.append("text").attr("x", midPt.x).attr("y", midPt.y + 4).attr("text-anchor", "middle").attr("fill", edgeColor).attr("font-size", sEdgeLabelFontSize).attr("class", "cd-edge-label").text(edge.label);
     }
   }
@@ -448,4 +452,4 @@ export {
   renderClassDiagram,
   renderClassDiagramForExport
 };
-//# sourceMappingURL=chunk-CHOK7NCJ.js.map
+//# sourceMappingURL=chunk-VZD3ZV4Y.js.map

package/dist/{chunk-NCT22MOD.js → chunk-WMIKC5XO.js}

@@ -1,6 +1,6 @@
 import {
   stripInlineMarkdown
-} from "./chunk-WGC42WJU.js";
+} from "./chunk-FWNJDD4U.js";
 
 // src/utils/wrapped-desc.ts
 var BULLET_PREFIX = "\u2022 ";
@@ -90,4 +90,4 @@ function wrapPlainLine(line, charsPerLine, lengthFn) {
 export {
   wrapDescriptionLines
 };
-//# sourceMappingURL=chunk-NCT22MOD.js.map
+//# sourceMappingURL=chunk-WMIKC5XO.js.map

package/dist/{chunk-C2WH3BMS.js → chunk-X326N4GN.js}

@@ -1,17 +1,19 @@
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-76LHNLGX.js";
+} from "./chunk-R4YGH7DJ.js";
 import {
   mix
-} from "./chunk-GLREDNBA.js";
+} from "./chunk-YVLTNNME.js";
 import {
   resolveColor
 } from "./chunk-XOGQY4EC.js";
 
 // src/treemap/treemap-shared.ts
 import { scaleLinear } from "d3-scale";
-var MUTED_FILL = "#cbd5e1";
+function mutedFill(palette) {
+  return mix(palette.colors.gray, palette.bg, 35);
+}
 function depthTint(hue, depth, bg) {
   if (depth <= 1) return hue;
   const keepPct = Math.max(55, 100 - (depth - 1) * 18);
@@ -38,15 +40,15 @@ function activeTagGroupOf(parsed) {
 }
 function resolveCellColor(cell, ctx) {
   if (ctx.mode === "heat") {
-    return cell.heat !== void 0 && ctx.heat ? ctx.heat.scale(cell.heat) : MUTED_FILL;
+    return cell.heat !== void 0 && ctx.heat ? ctx.heat.scale(cell.heat) : ctx.muted;
   }
   if (ctx.mode === "tag") {
-    if (!cell.node) return MUTED_FILL;
+    if (!cell.node) return ctx.muted;
     return resolveTagColor(
       cell.node.metadata,
       ctx.tagGroups,
       ctx.activeGroup
-    ) ?? MUTED_FILL;
+    ) ?? ctx.muted;
   }
   const topLabel = cell.path[0] ?? cell.label;
   const idx = (ctx.rootIndexByLabel.get(topLabel) ?? cell.topIndex) + ctx.colorOffset;
@@ -168,6 +170,7 @@ function buildLegend(activeMode, parsed, heat, seriesColors, colorOffset) {
 }
 
 export {
+  mutedFill,
   resolveColorMode,
   activeTagGroupOf,
   resolveCellColor,
@@ -176,4 +179,4 @@ export {
   formatPct,
   buildLegend
 };
-//# sourceMappingURL=chunk-C2WH3BMS.js.map
+//# sourceMappingURL=chunk-X326N4GN.js.map

package/dist/chunk-XBJJP2HN.js

@@ -0,0 +1,37 @@
+// src/utils/arrow-markers.ts
+function appendArrowheadMarkers(defs, opts) {
+  const { idPrefix, width, height, baseFill, colors } = opts;
+  const appendMarker = (id, fill) => {
+    defs.append("marker").attr("id", id).attr("viewBox", `0 0 ${width} ${height}`).attr("refX", width).attr("refY", height / 2).attr("markerWidth", width).attr("markerHeight", height).attr("orient", "auto").append("polygon").attr("points", `0,0 ${width},${height / 2} 0,${height}`).attr("fill", fill);
+  };
+  appendMarker(`${idPrefix}-arrow`, baseFill);
+  for (const color of colors ?? []) {
+    appendMarker(`${idPrefix}-arrow-${color.replace("#", "")}`, color);
+  }
+}
+function appendReverseArrowheadMarkers(defs, opts) {
+  const {
+    idPrefix,
+    width,
+    height,
+    baseFill,
+    colors,
+    reverseSuffix = "arrow-rev"
+  } = opts;
+  const appendMarker = (id, fill) => {
+    defs.append("marker").attr("id", id).attr("viewBox", `0 0 ${width} ${height}`).attr("refX", 0).attr("refY", height / 2).attr("markerWidth", width).attr("markerHeight", height).attr("orient", "auto").append("polygon").attr("points", `${width},0 0,${height / 2} ${width},${height}`).attr("fill", fill);
+  };
+  appendMarker(`${idPrefix}-${reverseSuffix}`, baseFill);
+  for (const color of colors ?? []) {
+    appendMarker(
+      `${idPrefix}-${reverseSuffix}-${color.replace("#", "")}`,
+      color
+    );
+  }
+}
+
+export {
+  appendArrowheadMarkers,
+  appendReverseArrowheadMarkers
+};
+//# sourceMappingURL=chunk-XBJJP2HN.js.map

package/dist/{chunk-7NSNE52V.js → chunk-XCR3PDFF.js}

@@ -17,7 +17,7 @@ import {
   stripDefaultModifier,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-76LHNLGX.js";
+} from "./chunk-R4YGH7DJ.js";
 import {
   AliasRegistry,
   FILL_FAMILY_TOKENS,
@@ -1072,4 +1072,4 @@ export {
   parseSequenceDgmo,
   looksLikeSequence
 };
-//# sourceMappingURL=chunk-7NSNE52V.js.map
+//# sourceMappingURL=chunk-XCR3PDFF.js.map