@diagrammo/dgmo 0.54.0 → 0.56.0

package/dist/{chunk-KINOX74I.js → chunk-HODUM6LY.js}

@@ -5,13 +5,18 @@ import {
 import {
   ScaleContext
 } from "./chunk-YYVTBZZC.js";
+import {
+  INLINE_HEADER_PAD,
+  layoutInlineHeader
+} from "./chunk-6VJCURWU.js";
 import {
   renderIntegratedLegend
-} from "./chunk-2NZOHEP4.js";
+} from "./chunk-QDOYT6UW.js";
 import {
   controlsGroupCapsuleWidth,
+  getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-J7HQPVYH.js";
+} from "./chunk-ES66QH6J.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -34,7 +39,7 @@ import {
   LEGEND_PILL_PAD,
   measureLegendText,
   truncateLegendText
-} from "./chunk-Q5IHQ4NW.js";
+} from "./chunk-SCJ7CAJF.js";
 import {
   CHAR_WIDTH_RATIO,
   measureText,
@@ -45,7 +50,7 @@ import {
   getSeriesColors,
   mix,
   shapeFill
-} from "./chunk-JYDMBWRP.js";
+} from "./chunk-42IT4BG2.js";
 import {
   normalizeName
 } from "./chunk-NOTA6TEI.js";
@@ -53,7 +58,7 @@ import {
   resolveActiveTagGroup,
   resolveTagColor,
   tagAttrKey
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-D5FANMSG.js";
 
 // src/gantt/renderer.ts
 import * as d3Scale from "d3-scale";
@@ -217,12 +222,38 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
   const sSprintLabelReserve = ctx.structural(sprintLabelReserve);
   const sTitleHeight = ctx.aesthetic(titleHeight);
   const sTagLegendReserve = ctx.structural(tagLegendReserve);
+  const inlineRequested = resolved.options.legendInline === true && resolved.tagGroups.length > 0;
+  const legendExtent = inlineRequested ? getLegendExtent(
+    {
+      groups: resolved.tagGroups.map((tg) => ({
+        name: tg.name,
+        entries: tg.entries
+      })),
+      position: { placement: "top-center", titleRelation: "inline-with-title" },
+      mode: "preview",
+      capsulePillAddonWidth: LEGEND_ICON_W
+    },
+    { activeGroup: currentActiveGroup },
+    containerWidth
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: title ?? "",
+    hasLegend: hasTagLegend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth,
+    titleBandHeight: sTitleHeight,
+    legendReserve: sTagLegendReserve,
+    titleBaselineY: sTitleY,
+    titleFontSize: sTitleFontSize
+  });
   const sEraReserve = ctx.structural(eraReserve);
   const sMarkerReserve = ctx.structural(markerReserve);
   const sTodayReserve = ctx.structural(todayReserve);
   const sFont10 = ctx.text(10);
   const sFont11 = ctx.text(11);
-  const sMarginTop = sTitleHeight + sTagLegendReserve + sEraReserve + sMarkerReserve + sTodayReserve + sTopDateLabelReserve + sSprintLabelReserve;
+  const sMarginTop = sTitleHeight + (header.inline ? 0 : sTagLegendReserve) + sEraReserve + sMarkerReserve + sTodayReserve + sTopDateLabelReserve + sSprintLabelReserve;
   const sTodayLabelY = sTodayReserve ? -(sTopDateLabelReserve + sHeaderRowH / 2) : 0;
   const sMarkerLabelY = sMarkerReserve ? -(sTopDateLabelReserve + sTodayReserve + sHeaderRowH / 2) : 0;
   const sEraLabelY = sEraReserve ? -(sTopDateLabelReserve + sTodayReserve + sMarkerReserve + sHeaderRowH / 2) : 0;
@@ -234,12 +265,12 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
   const svg = d3Selection.select(container).append("svg").attr("viewBox", `0 0 ${containerWidth} ${sOuterHeight}`).attr("width", exportDims ? containerWidth : "100%").attr("preserveAspectRatio", "xMidYMin meet").attr("font-family", FONT_FAMILY).style("overflow", "visible");
   const g = svg.append("g").attr("transform", `translate(${leftMargin}, ${sMarginTop})`);
   if (showTitle) {
-    svg.append("text").attr("class", "chart-title").attr("x", containerWidth / 2).attr("y", sTitleY).attr("text-anchor", "middle").attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).text(title);
+    svg.append("text").attr("class", "chart-title").attr("x", header.titleX).attr("y", sTitleY).attr("text-anchor", header.titleAnchor).attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).text(title);
   }
   function drawLegend() {
     svg.selectAll(".gantt-tag-legend-container").remove();
     if (hasTagLegend) {
-      const legendY = sTitleHeight;
+      const legendY = header.inline ? header.legendY : sTitleHeight;
       renderTagLegend(
         svg,
         g,
@@ -288,7 +319,8 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
           drawLegend();
         },
         options?.exportMode ?? false,
-        controlsHost
+        controlsHost,
+        header.inline
       );
     }
   }
@@ -1116,7 +1148,7 @@ function buildControlsToggles(hasCriticalPath, criticalPathActive, hasDependenci
   }
   return toggles;
 }
-function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargin, chartInnerWidth, legendY, palette, isDark, hasCriticalPath, criticalPathActive, _optionLineNumbers, onToggle, onToggleControlsExpand, currentSwimlaneGroup, onSwimlaneChange, legendViewMode, resolvedTasks, controlsExpanded = false, hasDependencies = false, dependenciesActive = false, onControlsToggle, exportMode = false, controlsHost = "inline") {
+function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargin, chartInnerWidth, legendY, palette, isDark, hasCriticalPath, criticalPathActive, _optionLineNumbers, onToggle, onToggleControlsExpand, currentSwimlaneGroup, onSwimlaneChange, legendViewMode, resolvedTasks, controlsExpanded = false, hasDependencies = false, dependenciesActive = false, onControlsToggle, exportMode = false, controlsHost = "inline", inlineHeader = false) {
   let visibleGroups;
   if (activeGroupName) {
     const activeGroup = tagGroups.filter(
@@ -1186,7 +1218,7 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
     totalW += controlsExpanded ? controlsGroupCapsuleWidth(controlsToggleLabels) : LEGEND_GEAR_PILL_W;
   }
   const containerWidth = chartLeftMargin + chartInnerWidth + RIGHT_MARGIN;
-  const legendX = (containerWidth - totalW) / 2;
+  const legendX = inlineHeader ? containerWidth - INLINE_HEADER_PAD - totalW : (containerWidth - totalW) / 2;
   const legendRow = svg.append("g").attr("class", "gantt-tag-legend-container").attr("transform", `translate(${legendX}, ${legendY})`);
   if (visibleGroups.length > 0) {
     const showIcon = !legendViewMode && tagGroups.length > 0;
@@ -1294,6 +1326,12 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
       width: tagGroupsW,
       mode: exportMode ? "export" : "preview",
       capsulePillAddonWidth: iconReserve,
+      ...inlineHeader && {
+        position: {
+          placement: "top-center",
+          titleRelation: "inline-with-title"
+        }
+      },
       ...controlsToggles.length > 0 && {
         controlsGroup: { toggles: controlsToggles }
       },
@@ -2105,4 +2143,4 @@ export {
   renderGantt,
   buildTagLaneRowList
 };
-//# sourceMappingURL=chunk-KINOX74I.js.map
+//# sourceMappingURL=chunk-HODUM6LY.js.map

package/dist/{chunk-47JNEKJA.js → chunk-HOPTF3ZP.js}

@@ -1,12 +1,16 @@
 import {
   renderInlineText
 } from "./chunk-3HDBAXF5.js";
+import {
+  layoutInlineHeader
+} from "./chunk-6VJCURWU.js";
 import {
   renderIntegratedLegend
-} from "./chunk-2NZOHEP4.js";
+} from "./chunk-QDOYT6UW.js";
 import {
+  getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-J7HQPVYH.js";
+} from "./chunk-ES66QH6J.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -17,7 +21,7 @@ import {
 } from "./chunk-6KFWC4CO.js";
 import {
   LEGEND_GROUP_GAP
-} from "./chunk-Q5IHQ4NW.js";
+} from "./chunk-SCJ7CAJF.js";
 import {
   measureText
 } from "./chunk-4ASYQ347.js";
@@ -27,17 +31,17 @@ import {
   mix,
   shapeFill,
   themeBaseBg
-} from "./chunk-JYDMBWRP.js";
+} from "./chunk-42IT4BG2.js";
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-D5FANMSG.js";
 import {
   resolveColor
-} from "./chunk-ZKPPI6BF.js";
+} from "./chunk-EXNKNJ65.js";
 import {
   makeDgmoError
-} from "./chunk-4W2PE66Q.js";
+} from "./chunk-OLMWTJVU.js";
 
 // src/bracket/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -707,16 +711,41 @@ function renderBracket(container, parsed, palette, isDark, exportDims) {
     { groups: legendGroups, position: LEGEND_POSITION, mode: "preview" },
     width
   ) + LEGEND_GROUP_GAP : 0;
+  const inlineRequested = parsed.legendInline === true;
+  const legendExtent = inlineRequested && legendGroups.length > 0 ? getLegendExtent(
+    {
+      groups: legendGroups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: exportMode ? "export" : "preview"
+    },
+    { activeGroup: activeGroup?.name ?? null },
+    width
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend: legendGroups.length > 0,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: width,
+    titleBandHeight: titleH,
+    legendReserve,
+    titleBaselineY: TITLE_Y,
+    titleFontSize: TITLE_FONT_SIZE
+  });
   const svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").attr("class", "dgmo-bracket").attr("role", "img").attr(
     "aria-label",
     `Tournament bracket${parsed.title ? ` \u2014 ${parsed.title}` : ""}${layout.champion ? `, champion ${layout.champion}` : ""}`
   ).style("font-family", FONT_FAMILY);
   if (showTitle) {
-    const t = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", TITLE_Y).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).text(parsed.title);
+    const t = svg.append("text").attr("class", "chart-title").attr("x", header.titleX).attr("y", TITLE_Y).attr("text-anchor", header.titleAnchor).attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).text(parsed.title);
     if (parsed.titleLineNumber !== null)
       t.attr("data-line-number", parsed.titleLineNumber);
   }
-  const areaY = titleH + legendReserve + PADDING;
+  const areaY = (header.inline ? titleH : titleH + legendReserve) + PADDING;
   const areaX = PADDING;
   const areaW = Math.max(1, width - PADDING * 2);
   const areaH = Math.max(1, height - areaY - PADDING);
@@ -725,7 +754,10 @@ function renderBracket(container, parsed, palette, isDark, exportDims) {
   const offsetY = areaY;
   const root = svg.append("g").attr("class", "dgmo-bracket-body").attr("transform", `translate(${offsetX},${offsetY}) scale(${scale})`);
   if (legendGroups.length > 0) {
-    const legendG = svg.append("g").attr("class", "dgmo-bracket-legend").attr("transform", `translate(0, ${titleH})`);
+    const legendG = svg.append("g").attr("class", "dgmo-bracket-legend").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0, ${titleH})`
+    );
     renderIntegratedLegend(legendG, {
       groups: legendGroups,
       palette: {
@@ -738,7 +770,10 @@ function renderBracket(container, parsed, palette, isDark, exportDims) {
       isDark,
       width,
       mode: exportMode ? "export" : "preview",
-      position: LEGEND_POSITION,
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      },
       activeGroup: activeGroup?.name ?? null
     });
   }
@@ -959,4 +994,4 @@ export {
   renderBracket,
   renderBracketForExport
 };
-//# sourceMappingURL=chunk-47JNEKJA.js.map
+//# sourceMappingURL=chunk-HOPTF3ZP.js.map

package/dist/{chunk-WW4BQ744.js → chunk-HPJITTF7.js}

@@ -3,7 +3,7 @@ import {
   layoutJourneyMap,
   scoreToColor,
   scoreToCurveY
-} from "./chunk-HFEOOQ46.js";
+} from "./chunk-VU3DOZ6C.js";
 import {
   wrapNoteBody
 } from "./chunk-UU6LUYUH.js";
@@ -19,15 +19,18 @@ import {
 import {
   ScaleContext
 } from "./chunk-YYVTBZZC.js";
+import {
+  serializeSvg
+} from "./chunk-NZ5QVASG.js";
 import {
   renderIntegratedLegend
-} from "./chunk-2NZOHEP4.js";
+} from "./chunk-QDOYT6UW.js";
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
 import {
   parseJourneyMap
-} from "./chunk-KQ3FNRGR.js";
+} from "./chunk-RQGNELB3.js";
 import {
   measureText,
   truncateText,
@@ -38,14 +41,14 @@ import {
   mix,
   shapeFill,
   themeBaseBg
-} from "./chunk-JYDMBWRP.js";
+} from "./chunk-42IT4BG2.js";
 import {
   resolveActiveTagGroup,
   tagAttrKey
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-D5FANMSG.js";
 import {
   fillModeFromOptions
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 
 // src/journey-map/renderer.ts
 import * as d3 from "d3-selection";
@@ -861,11 +864,11 @@ function renderJourneyMapForExport(content, theme, palette) {
     const bgRect = svgEl.querySelector("rect:first-child");
     if (bgRect) bgRect.remove();
   }
-  return svgEl.outerHTML;
+  return serializeSvg(svgEl);
 }
 
 export {
   renderJourneyMap,
   renderJourneyMapForExport
 };
-//# sourceMappingURL=chunk-WW4BQ744.js.map
+//# sourceMappingURL=chunk-HPJITTF7.js.map

package/dist/{chunk-BEOAKGNA.js → chunk-I55PVEIX.js}

@@ -1,6 +1,6 @@
 import {
   emit
-} from "./chunk-4W2PE66Q.js";
+} from "./chunk-OLMWTJVU.js";
 
 // src/raci/diagnostics.ts
 var RACI_DX = {
@@ -481,4 +481,4 @@ export {
   RACI_WARNING_CODES,
   VARIANTS
 };
-//# sourceMappingURL=chunk-BEOAKGNA.js.map
+//# sourceMappingURL=chunk-I55PVEIX.js.map

package/dist/{chunk-7JDTNFAK.js → chunk-IMXG673Y.js}

@@ -7,21 +7,28 @@ import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
 import {
-  getSeriesColors
-} from "./chunk-JYDMBWRP.js";
+  getSeriesColors,
+  mix
+} from "./chunk-42IT4BG2.js";
 import {
   resolveColor
-} from "./chunk-ZKPPI6BF.js";
+} from "./chunk-EXNKNJ65.js";
 
 // src/version-control/renderer.ts
 import * as d3Selection from "d3-selection";
-var LINE = 5.5;
-var DOT = 8;
-var CORNER = 13;
-var ANG = 32;
+var LINE = 3;
+var DOT = 5.5;
+var CORNER = 10;
 var STACK = 19;
 var CIRCLED = "\u2460\u2461\u2462\u2463\u2464\u2465\u2466\u2467\u2468";
 var TITLE_AREA = 40;
+var SHELF_TINT = 13;
+var SHELF_EDGE = 4;
+var SHELF_LIP = 2;
+var SHELF_PAD = 8;
+var SHELF_H = 21;
+var LEADER_GAP = 22;
+var ROW_GAP = 7;
 function clip(s, max) {
   return s.length > max ? s.slice(0, max - 1) + "\u2026" : s;
 }
@@ -94,12 +101,9 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
   const pos = /* @__PURE__ */ new Map();
   const placements = [];
   let contentW, contentH, gutter, cross0, captionY = 0;
-  const cos = Math.cos(ANG * Math.PI / 180);
-  const sin = Math.sin(ANG * Math.PI / 180);
   if (!TB) {
-    const maxName = Math.max(4, ...parsed.branches.map((b) => b.name.length));
-    gutter = maxName * 7.5 + 18;
-    const along0 = gutter + 34, step = 86, laneGap = 54;
+    gutter = 14;
+    const along0 = gutter + 20, step = 88, laneGap = 50;
     cross0 = 16 + maxStack * STACK + 14;
     for (const n of nodes)
       pos.set(n.key, {
@@ -107,17 +111,34 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
         y: cross0 + n.lane * laneGap
       });
     const lanesBottom = cross0 + (laneCount - 1) * laneGap;
-    const bandY = lanesBottom + 26;
-    for (const n of nodes) {
+    const bandTop = lanesBottom + LEADER_GAP;
+    const shelfGap = 6;
+    const rowRight = [];
+    const sorted = [...nodes].sort(
+      (a, b) => pos.get(a.key).x - pos.get(b.key).x
+    );
+    for (const n of sorted) {
       const p = pos.get(n.key);
+      const w = label.get(n.key).lw + SHELF_PAD * 2;
+      const left = p.x - w / 2;
+      let row = rowRight.length;
+      for (let l = 0; l < rowRight.length; l++)
+        if (rowRight[l] + shelfGap <= left) {
+          row = l;
+          break;
+        }
+      const top = bandTop + row * (SHELF_H + ROW_GAP);
+      rowRight[row] = left + w;
       placements.push({
         node: n,
         kind: "msg",
-        diag: true,
         x: p.x,
-        y: bandY,
+        y: top,
         anchor: "start",
-        leader: { x1: p.x, y1: p.y + DOT, x2: p.x, y2: bandY - 3 }
+        shelfLeft: Math.max(4, left),
+        shelfTop: top,
+        shelfW: w,
+        leader: { x1: p.x, y1: p.y + DOT, x2: p.x, y2: top }
       });
       const stack = above.get(n.key) ?? [];
       stack.forEach(
@@ -133,6 +154,7 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
         })
       );
     }
+    const rowCount = rowRight.length;
     for (const b of parsed.branches) {
       if (!b.ab || b.ab.ahead + b.ab.behind === 0 || b.tip == null) continue;
       const tip = pos.get(b.tip);
@@ -146,10 +168,12 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
       });
     }
     contentW = Math.max(
-      along0 + (K - 1) * step + DOT + 70,
-      ...[...pos.entries()].map(([k, p]) => p.x + label.get(k).lw * cos)
-    ) + 18;
-    contentH = bandY + maxLW * sin + 12 * cos + 16;
+      along0 + (K - 1) * step + DOT + 40,
+      ...[...pos.entries()].map(
+        ([k, p]) => p.x + label.get(k).lw / 2 + SHELF_PAD + 8
+      )
+    ) + 8;
+    contentH = bandTop + rowCount * (SHELF_H + ROW_GAP) + 8;
     if (parsed.notes.length) {
       captionY = contentH + 4;
       contentH += 8 + parsed.notes.length * 16 + 8;
@@ -169,7 +193,6 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
       placements.push({
         node: n,
         kind: "msg",
-        diag: false,
         x: bandX,
         y: p.y,
         anchor: "start",
@@ -194,10 +217,16 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
   }
   const showTitle = !!parsed.title;
   const titleH = showTitle ? TITLE_AREA : 0;
-  const W = Math.round(contentW);
-  const H = Math.round(contentH + titleH);
+  const baseW = contentW;
+  const baseH = contentH + titleH;
   const exportMode = !!exportDims;
-  const svg = d3Selection.select(container).append("svg").attr("width", W).attr("height", H).attr("viewBox", `0 0 ${W} ${H}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").style("font-family", FONT_FAMILY);
+  const paneW = exportMode ? 0 : container.clientWidth || 0;
+  const paneH = exportMode ? 0 : container.clientHeight || 0;
+  const W = Math.round(Math.max(baseW, paneW));
+  const H = Math.round(Math.max(baseH, paneH));
+  const vw = exportMode ? W : paneW || W;
+  const vh = exportMode ? H : paneH || H;
+  const svg = d3Selection.select(container).append("svg").attr("width", vw).attr("height", vh).attr("viewBox", `0 0 ${W} ${H}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").style("font-family", FONT_FAMILY);
   svg.append("rect").attr("width", W).attr("height", H).attr("fill", palette.bg);
   if (showTitle) {
     const t = svg.append("text").attr("class", "chart-title").attr("x", W / 2).attr("y", TITLE_Y).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("data-line-number", parsed.titleLineNumber ?? 1).text(parsed.title);
@@ -217,7 +246,6 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
     label,
     colorOf,
     byKey,
-    gutter,
     cross0,
     captionY,
     onClickItem && !exportMode ? onClickItem : void 0
@@ -229,7 +257,7 @@ function abText(ab) {
   if (ab.behind) a.push("\u2193" + ab.behind);
   return a.join(" ");
 }
-function drawGraph(g, parsed, palette, TB, pos, placements, label, colorOf, byKey, gutter, cross0, captionY, onClickItem) {
+function drawGraph(g, parsed, palette, TB, pos, placements, label, colorOf, byKey, cross0, captionY, onClickItem) {
   const nodes = parsed.nodes;
   const P = (k) => pos.get(k);
   const branchCorner = (par, n) => TB ? { x: P(n.key).x, y: P(par.key).y } : { x: P(par.key).x, y: P(n.key).y };
@@ -253,17 +281,17 @@ function drawGraph(g, parsed, palette, TB, pos, placements, label, colorOf, byKe
     const N = P(n.key);
     if (n.prev != null) {
       const a = P(n.prev);
-      const e = g.append("line").attr("x1", a.x).attr("y1", a.y).attr("x2", N.x).attr("y2", N.y).attr("stroke", c).attr("stroke-width", LINE).attr("stroke-linecap", "round").attr("opacity", o);
+      const e = g.append("line").attr("x1", a.x).attr("y1", a.y).attr("x2", N.x).attr("y2", N.y).attr("stroke", c).attr("stroke-width", LINE).attr("stroke-linecap", "round").attr("data-branch", n.branch).attr("opacity", o);
       if (n.ghost) e.attr("stroke-dasharray", "5 5");
     }
     if (n.parent != null) {
       const par = byKey(n.parent), cc = branchCorner(par, n), pp = P(par.key);
-      const e = g.append("path").attr("d", roundedL(pp.x, pp.y, cc.x, cc.y, N.x, N.y, CORNER)).attr("fill", "none").attr("stroke", c).attr("stroke-width", LINE).attr("stroke-linecap", "round").attr("opacity", o);
+      const e = g.append("path").attr("d", roundedL(pp.x, pp.y, cc.x, cc.y, N.x, N.y, CORNER)).attr("fill", "none").attr("stroke", c).attr("stroke-width", LINE).attr("stroke-linecap", "round").attr("data-branch", n.branch).attr("opacity", o);
       if (n.ghost) e.attr("stroke-dasharray", "5 5");
     }
     if (n.mergeFrom != null) {
       const s = byKey(n.mergeFrom), cc = mergeCorner(s, n), sp = P(s.key);
-      g.append("path").attr("d", roundedL(sp.x, sp.y, cc.x, cc.y, N.x, N.y, CORNER)).attr("fill", "none").attr("stroke", colorOf(s)).attr("stroke-width", LINE).attr("stroke-linecap", "round").attr("opacity", 0.92 * o);
+      g.append("path").attr("d", roundedL(sp.x, sp.y, cc.x, cc.y, N.x, N.y, CORNER)).attr("fill", "none").attr("stroke", colorOf(s)).attr("stroke-width", LINE).attr("stroke-linecap", "round").attr("data-branch", s.branch).attr("opacity", 0.92 * o);
     }
     if (n.cherryFrom != null)
       dlink(byKey(n.cherryFrom), n, colorOf(byKey(n.cherryFrom)), false);
@@ -284,7 +312,7 @@ function drawGraph(g, parsed, palette, TB, pos, placements, label, colorOf, byKe
       if (TB) {
         g.append("text").attr("x", fp.x).attr("y", 14).attr("text-anchor", "middle").attr("font-size", 12.5).attr("font-weight", 800).attr("fill", col).text(b.name);
       } else {
-        g.append("text").attr("x", gutter).attr("y", fp.y + 4).attr("text-anchor", "end").attr("font-size", 12.5).attr("font-weight", 800).attr("fill", col).text(b.name);
+        g.append("text").attr("x", fp.x - DOT - 1).attr("y", fp.y - DOT - 7).attr("text-anchor", "start").attr("font-size", 12.5).attr("font-weight", 800).attr("fill", col).attr("data-branch", b.name).text(b.name);
       }
     }
   }
@@ -338,11 +366,12 @@ function drawGraph(g, parsed, palette, TB, pos, placements, label, colorOf, byKe
     }
     g.append("text").attr("x", cx).attr("y", cy + 4).attr("text-anchor", "middle").attr("font-size", 10.5).attr("font-weight", weight).attr("fill", textColor).text(text);
   };
+  let shelfSeq = 0;
   for (const pl of placements) {
     const n = pl.node;
     const c = colorOf(n);
     if (pl.leader) {
-      g.append("line").attr("x1", pl.leader.x1).attr("y1", pl.leader.y1).attr("x2", pl.leader.x2).attr("y2", pl.leader.y2).attr("stroke", c).attr("stroke-width", 1).attr("opacity", 0.34 * gop(n));
+      g.append("line").attr("x1", pl.leader.x1).attr("y1", pl.leader.y1).attr("x2", pl.leader.x2).attr("y2", pl.leader.y2).attr("stroke", c).attr("stroke-width", 1.5).attr("stroke-linecap", "round").attr("data-branch", n.branch).attr("opacity", 0.55 * gop(n));
     }
     if (pl.kind === "tag") pill(pl.x, pl.y, pl.w, pl.label, c, palette.bg);
     else if (pl.kind === "head")
@@ -368,7 +397,22 @@ function drawGraph(g, parsed, palette, TB, pos, placements, label, colorOf, byKe
       const L = label.get(n.key);
       const gh = n.ghost;
       const mfill = gh ? palette.textMuted : c;
-      const t = pl.diag ? g.append("text").attr("transform", `translate(${pl.x},${pl.y}) rotate(${ANG})`).attr("font-size", 12).attr("opacity", gh ? 0.55 : 1) : g.append("text").attr("x", pl.x).attr("y", pl.y + 4).attr("text-anchor", pl.anchor).attr("font-size", 12).attr("opacity", gh ? 0.55 : 1);
+      let tx = pl.x;
+      let ty = pl.y + 4;
+      let anchor = pl.anchor;
+      if (pl.shelfW != null) {
+        const left = pl.shelfLeft;
+        const top = pl.shelfTop;
+        const w = pl.shelfW;
+        const clipId = `dgmo-vc-shelf-${shelfSeq++}`;
+        g.append("clipPath").attr("id", clipId).append("rect").attr("x", left).attr("y", top).attr("width", w).attr("height", SHELF_H).attr("rx", SHELF_EDGE);
+        g.append("rect").attr("x", left).attr("y", top).attr("width", w).attr("height", SHELF_H).attr("rx", SHELF_EDGE).attr("fill", gh ? palette.bg : mix(c, palette.bg, SHELF_TINT)).attr("data-branch", n.branch).attr("opacity", gh ? 0.5 : 1);
+        g.append("rect").attr("x", left).attr("y", top).attr("width", w).attr("height", SHELF_LIP).attr("clip-path", `url(#${clipId})`).attr("fill", c).attr("data-branch", n.branch).attr("opacity", gh ? 0.4 : 1);
+        tx = left + SHELF_PAD;
+        ty = top + SHELF_H / 2 + 4;
+        anchor = "start";
+      }
+      const t = g.append("text").attr("x", tx).attr("y", ty).attr("text-anchor", anchor).attr("font-size", 12).attr("data-branch", n.branch).attr("opacity", gh ? 0.6 : 1);
       if (L.sha)
         t.append("tspan").attr("font-family", "ui-monospace, monospace").attr("font-size", 11).attr("fill", palette.textMuted).text(L.sha + " ");
       t.append("tspan").attr("fill", mfill).attr("font-weight", n.kind === "cherry" ? 400 : 700).attr("font-style", n.kind === "cherry" ? "italic" : "normal").text(L.msg);
@@ -399,4 +443,4 @@ export {
   renderVersionControl,
   renderVersionControlForExport
 };
-//# sourceMappingURL=chunk-7JDTNFAK.js.map
+//# sourceMappingURL=chunk-IMXG673Y.js.map

package/dist/{chunk-4T6OCSJ2.js → chunk-JE3SMHRZ.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-YYVTBZZC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-2NZOHEP4.js";
+} from "./chunk-QDOYT6UW.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -20,7 +20,7 @@ import {
 } from "./chunk-6KFWC4CO.js";
 import {
   LEGEND_HEIGHT
-} from "./chunk-Q5IHQ4NW.js";
+} from "./chunk-SCJ7CAJF.js";
 import {
   measureText,
   wrapTextToWidth
@@ -28,13 +28,13 @@ import {
 import {
   contrastText,
   shapeFill
-} from "./chunk-JYDMBWRP.js";
+} from "./chunk-42IT4BG2.js";
 import {
   fillModeFromOptions
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 import {
   resolveColor
-} from "./chunk-ZKPPI6BF.js";
+} from "./chunk-EXNKNJ65.js";
 
 // src/cycle/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -969,4 +969,4 @@ export {
   renderCycle,
   renderCycleForExport
 };
-//# sourceMappingURL=chunk-4T6OCSJ2.js.map
+//# sourceMappingURL=chunk-JE3SMHRZ.js.map