@diagrammo/dgmo 0.15.1 → 0.17.0

package/src/sequence/renderer.ts

@@ -49,7 +49,6 @@ const PARTICIPANT_BOX_HEIGHT = 50;
 const TOP_MARGIN = 20;
 const TITLE_HEIGHT = 30;
 const PARTICIPANT_Y_OFFSET = 10;
-const SERVICE_BORDER_RADIUS = 10;
 const MESSAGE_START_OFFSET = 30;
 const LIFELINE_TAIL = 30;
 const ARROWHEAD_SIZE = 8;
@@ -180,25 +179,6 @@ function renderRectParticipant(
     .attr('stroke-width', SW);
 }
 
-function renderServiceParticipant(
-  g: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
-  palette: PaletteColors,
-  isDark: boolean,
-  color?: string,
-  solid?: boolean
-): void {
-  g.append('rect')
-    .attr('x', -W / 2)
-    .attr('y', 0)
-    .attr('width', W)
-    .attr('height', H)
-    .attr('rx', SERVICE_BORDER_RADIUS)
-    .attr('ry', SERVICE_BORDER_RADIUS)
-    .attr('fill', fill(palette, isDark, color, solid))
-    .attr('stroke', stroke(palette, color))
-    .attr('stroke-width', SW);
-}
-
 function renderActorParticipant(
   g: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
   palette: PaletteColors,
@@ -443,99 +423,6 @@ function renderCacheParticipant(
     .attr('stroke-dasharray', dash);
 }
 
-function renderNetworkingParticipant(
-  g: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
-  palette: PaletteColors,
-  isDark: boolean,
-  color?: string,
-  solid?: boolean
-): void {
-  // Hexagon fitting within W x H
-  const inset = 16;
-  const points = [
-    `${-W / 2 + inset},0`,
-    `${W / 2 - inset},0`,
-    `${W / 2},${H / 2}`,
-    `${W / 2 - inset},${H}`,
-    `${-W / 2 + inset},${H}`,
-    `${-W / 2},${H / 2}`,
-  ].join(' ');
-  g.append('polygon')
-    .attr('points', points)
-    .attr('fill', fill(palette, isDark, color, solid))
-    .attr('stroke', stroke(palette, color))
-    .attr('stroke-width', SW);
-}
-
-function renderFrontendParticipant(
-  g: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
-  palette: PaletteColors,
-  isDark: boolean,
-  color?: string,
-  solid?: boolean
-): void {
-  // Monitor shape fitting within W x H
-  const screenH = H - 10;
-  const s = stroke(palette, color);
-  g.append('rect')
-    .attr('x', -W / 2)
-    .attr('y', 0)
-    .attr('width', W)
-    .attr('height', screenH)
-    .attr('rx', 3)
-    .attr('ry', 3)
-    .attr('fill', fill(palette, isDark, color, solid))
-    .attr('stroke', s)
-    .attr('stroke-width', SW);
-  // Stand
-  g.append('line')
-    .attr('x1', 0)
-    .attr('y1', screenH)
-    .attr('x2', 0)
-    .attr('y2', H - 2)
-    .attr('stroke', s)
-    .attr('stroke-width', SW);
-  // Base
-  g.append('line')
-    .attr('x1', -14)
-    .attr('y1', H - 2)
-    .attr('x2', 14)
-    .attr('y2', H - 2)
-    .attr('stroke', s)
-    .attr('stroke-width', SW);
-}
-
-function renderExternalParticipant(
-  g: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
-  palette: PaletteColors,
-  isDark: boolean,
-  color?: string,
-  solid?: boolean
-): void {
-  // Dashed border rectangle
-  g.append('rect')
-    .attr('x', -W / 2)
-    .attr('y', 0)
-    .attr('width', W)
-    .attr('height', H)
-    .attr('rx', 2)
-    .attr('ry', 2)
-    .attr('fill', fill(palette, isDark, color, solid))
-    .attr('stroke', stroke(palette, color))
-    .attr('stroke-width', SW)
-    .attr('stroke-dasharray', '6 3');
-}
-
-function renderGatewayParticipant(
-  g: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
-  palette: PaletteColors,
-  isDark: boolean,
-  color?: string,
-  _solid?: boolean
-): void {
-  renderRectParticipant(g, palette, isDark, color);
-}
-
 // ============================================================
 // Collapsible Section Support
 // ============================================================
@@ -1528,7 +1415,7 @@ export function renderSequenceDiagram(
   // Ensure contentBottomY accounts for all note extents
   const lastStep = renderSteps[renderSteps.length - 1];
   const lastIsSelfCall =
-    lastStep && lastStep.type === 'call' && lastStep.from === lastStep.to;
+    lastStep?.type === 'call' && lastStep.from === lastStep.to;
   const lastStepTrailing = lastIsSelfCall ? SELF_CALL_HEIGHT + 25 : stepSpacing;
   let contentBottomY =
     renderSteps.length > 0
@@ -1968,6 +1855,13 @@ export function renderSequenceDiagram(
   // FRAME_PADDING_TOP declared earlier (near BLOCK_HEADER_SPACE)
   const FRAME_PADDING_BOTTOM = 15;
   const FRAME_LABEL_HEIGHT = 18;
+  // Self-loop projects ACTIVATION_WIDTH/2 + SELF_CALL_WIDTH (=35) past the
+  // lifeline; FRAME_PADDING_X (=30) leaves no breathing room. When a block
+  // contains a self-arrow, extend the frame on the loop's side so the loop
+  // sits comfortably inside.
+  const SELF_ARROW_PROJECTION = ACTIVATION_WIDTH / 2 + SELF_CALL_WIDTH;
+  const SELF_ARROW_FRAME_PAD = 10;
+  const frameRightmostX = Math.max(...Array.from(participantX.values()));
 
   // Collect message indices from an element subtree
   const collectMsgIndices = (els: SequenceElement[]): number[] => {
@@ -2063,14 +1957,46 @@ export function renderSequenceDiagram(
         }
       }
 
-      const frameX = minPX - FRAME_PADDING_X;
+      // Self-arrow geometry: extend frame on the loop's side so loops sit
+      // comfortably inside, and extend vertically if the block's last step
+      // is a self-call (whose loop drops SELF_CALL_HEIGHT below stepY).
+      let extraLeft = 0;
+      let extraRight = 0;
+      let maxStepIsSelfCall = false;
+      for (const mi of allIndices) {
+        const m = messages[mi];
+        if (m.from === m.to) {
+          const px = participantX.get(m.from);
+          if (px !== undefined) {
+            const flipLeft = px === frameRightmostX;
+            if (flipLeft) {
+              const loopMin = px - SELF_ARROW_PROJECTION;
+              const need =
+                minPX - FRAME_PADDING_X - loopMin + SELF_ARROW_FRAME_PAD;
+              if (need > 0) extraLeft = Math.max(extraLeft, need);
+            } else {
+              const loopMax = px + SELF_ARROW_PROJECTION;
+              const need =
+                loopMax - (maxPX + FRAME_PADDING_X) + SELF_ARROW_FRAME_PAD;
+              if (need > 0) extraRight = Math.max(extraRight, need);
+            }
+          }
+          if (msgToLastStep.get(mi) === maxStep) {
+            maxStepIsSelfCall = true;
+          }
+        }
+      }
+
+      const frameX = minPX - FRAME_PADDING_X - extraLeft;
       const frameY = stepY(minStep) - FRAME_PADDING_TOP;
-      const frameW = maxPX - minPX + FRAME_PADDING_X * 2;
+      const frameW =
+        maxPX - minPX + FRAME_PADDING_X * 2 + extraLeft + extraRight;
       const frameH =
         stepY(maxStep) -
         stepY(minStep) +
         FRAME_PADDING_TOP +
-        FRAME_PADDING_BOTTOM;
+        FRAME_PADDING_BOTTOM +
+        (maxStepIsSelfCall ? SELF_CALL_HEIGHT : 0);
 
       // Frame border
       svg
@@ -2093,7 +2019,7 @@ export function renderSequenceDiagram(
         x: frameX + 6,
         y: frameY + FRAME_LABEL_HEIGHT - 4,
         text: `${el.type} ${el.label}`,
-        bold: true,
+        bold: false,
         italic: false,
         blockLine: el.lineNumber,
       });
@@ -2121,7 +2047,7 @@ export function renderSequenceDiagram(
               y: dividerY + 14,
               text: `else if ${branchData.label}`,
               bold: false,
-              italic: true,
+              italic: false,
               blockLine: branchData.lineNumber,
             });
           }
@@ -2150,7 +2076,7 @@ export function renderSequenceDiagram(
             y: dividerY + 14,
             text: 'else',
             bold: false,
-            italic: true,
+            italic: false,
             blockLine: el.elseLineNumber,
           });
         }
@@ -2292,7 +2218,7 @@ export function renderSequenceDiagram(
 
   // Render section dividers
   const leftmostX = Math.min(...Array.from(participantX.values()));
-  const rightmostX = Math.max(...Array.from(participantX.values()));
+  const rightmostX = frameRightmostX;
   const sectionLineX1 = leftmostX - PARTICIPANT_BOX_WIDTH / 2 - 10;
   const sectionLineX2 = rightmostX + PARTICIPANT_BOX_WIDTH / 2 + 10;
 
@@ -2762,7 +2688,7 @@ export function renderSequenceDiagram(
     const legendConfig: LegendConfig = {
       groups: resolvedGroups,
       position: { placement: 'top-center', titleRelation: 'below-title' },
-      mode: 'fixed',
+      mode: 'preview',
     };
     const legendState: LegendState = {
       activeGroup: activeTagGroup ?? null,
@@ -2853,27 +2779,12 @@ function renderParticipant(
     case 'database':
       renderDatabaseParticipant(g, palette, isDark, color, solid);
       break;
-    case 'service':
-      renderServiceParticipant(g, palette, isDark, color, solid);
-      break;
     case 'queue':
       renderQueueParticipant(g, palette, isDark, color, solid);
       break;
     case 'cache':
       renderCacheParticipant(g, palette, isDark, color, solid);
       break;
-    case 'networking':
-      renderNetworkingParticipant(g, palette, isDark, color, solid);
-      break;
-    case 'frontend':
-      renderFrontendParticipant(g, palette, isDark, color, solid);
-      break;
-    case 'external':
-      renderExternalParticipant(g, palette, isDark, color, solid);
-      break;
-    case 'gateway':
-      renderGatewayParticipant(g, palette, isDark, color, solid);
-      break;
     default:
       renderRectParticipant(g, palette, isDark, color, solid);
       break;

package/src/sitemap/layout.ts

@@ -41,7 +41,6 @@ export interface SitemapLayoutEdge {
   targetId: string;
   points: { x: number; y: number }[];
   label?: string;
-  color?: string;
   lineNumber: number;
   /** True for edges deferred from dagre (container endpoints) — use linear curve */
   deferred?: boolean;
@@ -652,7 +651,6 @@ export function layoutSitemap(
       targetId: edge.targetId,
       points,
       label: edge.label,
-      color: edge.color,
       lineNumber: edge.lineNumber,
       deferred: deferredSet.has(i) || undefined,
     });

package/src/sitemap/parser.ts

@@ -3,7 +3,6 @@
 // ============================================================
 
 import type { PaletteColors } from '../palettes';
-import { resolveColorWithDiagnostic } from '../colors';
 import type { DgmoError } from '../diagnostics';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
 import { normalizeName } from '../utils/name-normalize';
@@ -20,7 +19,6 @@ import {
   measureIndent,
   extractColor,
   parsePipeMetadata,
-  inferArrowColor,
   MULTIPLE_PIPE_ERROR,
   parseFirstLine,
   OPTION_NOCOLON_RE,
@@ -39,10 +37,11 @@ const CONTAINER_RE = /^\[([^\]]+)\]\s*(?:\|\s*(.+))?$/;
 const METADATA_RE = /^([^:]+):\s*(.+)$/;
 
 /**
- * Arrow line: `-label->`, `-(color)->`, `-label(color)->`, `->` followed by target label.
- * Captures: [1] label, [2] color, [3] target
+ * Arrow line: `-label->` or `->` followed by target label.
+ * Edges have no color slot (spec §1.7).
+ * Captures: [1] label, [2] target
  */
-const ARROW_RE = /^-([^(>][^(>]*?)?\s*(?:\(([^)]+)\))?\s*->\s*(.+)$/;
+const ARROW_RE = /^-([^>][^>]*?)?\s*->\s*(.+)$/;
 const BARE_ARROW_RE = /^->\s*(.+)$/;
 
 // ============================================================
@@ -51,12 +50,11 @@ const BARE_ARROW_RE = /^->\s*(.+)$/;
 
 function parseArrowLine(
   trimmed: string,
-  palette: PaletteColors | undefined,
-  lineNumber: number,
-  diagnostics: DgmoError[]
+  _palette: PaletteColors | undefined,
+  _lineNumber: number,
+  _diagnostics: DgmoError[]
 ): {
   label?: string;
-  color?: string;
   target: string;
   targetIsGroup: boolean;
 } | null {
@@ -71,33 +69,14 @@ function parseArrowLine(
     };
   }
 
-  // Labeled/colored arrow: -label(color)-> Target
+  // Labeled arrow: -label-> Target
   const arrowMatch = trimmed.match(ARROW_RE);
   if (arrowMatch) {
     const label = arrowMatch[1]?.trim() || undefined;
-    let color = arrowMatch[2]
-      ? resolveColorWithDiagnostic(
-          arrowMatch[2].trim(),
-          lineNumber,
-          diagnostics,
-          palette
-        )
-      : undefined;
-    if (label && !color) {
-      const inferred = inferArrowColor(label);
-      if (inferred)
-        color = resolveColorWithDiagnostic(
-          inferred,
-          lineNumber,
-          diagnostics,
-          palette
-        );
-    }
-    const rawTarget = arrowMatch[3].trim();
+    const rawTarget = arrowMatch[2].trim();
     const groupMatch = rawTarget.match(/^\[(.+)\]$/);
     return {
       label,
-      color,
       target: groupMatch ? groupMatch[1].trim() : rawTarget,
       targetIsGroup: !!groupMatch,
     };
@@ -183,7 +162,7 @@ export function parseSitemap(
     result.diagnostics.push(makeDgmoError(line, message, 'warning'));
   };
 
-  if (!content || !content.trim()) {
+  if (!content?.trim()) {
     return fail(0, 'No content provided');
   }
 
@@ -216,7 +195,6 @@ export function parseSitemap(
     targetLabel: string;
     targetIsGroup: boolean;
     label?: string;
-    color?: string;
     lineNumber: number;
   }[] = [];
 
@@ -309,7 +287,7 @@ export function parseSitemap(
       }
     }
 
-    // Tag group entries (indented Value(color) under tag heading)
+    // Tag group entries (indented `Value color` under tag heading; §1.5)
     // First entry is the default unless another is marked `default`
     if (currentTagGroup && !contentStarted) {
       const indent = measureIndent(line);
@@ -319,7 +297,7 @@ export function parseSitemap(
         if (!color) {
           pushError(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }
@@ -365,7 +343,6 @@ export function parseSitemap(
           targetLabel: arrowInfo.target,
           targetIsGroup: arrowInfo.targetIsGroup,
           label: arrowInfo.label,
-          color: arrowInfo.color,
           lineNumber,
         });
       }
@@ -486,7 +463,6 @@ export function parseSitemap(
         sourceId: arrow.sourceNode.id,
         targetId: aliasHit,
         label: arrow.label,
-        color: arrow.color,
         lineNumber: arrow.lineNumber,
       });
       continue;
@@ -508,7 +484,6 @@ export function parseSitemap(
         sourceId: arrow.sourceNode.id,
         targetId: targetContainer.id,
         label: arrow.label,
-        color: arrow.color,
         lineNumber: arrow.lineNumber,
       });
     } else {
@@ -526,7 +501,6 @@ export function parseSitemap(
         sourceId: arrow.sourceNode.id,
         targetId: targetNode.id,
         label: arrow.label,
-        color: arrow.color,
         lineNumber: arrow.lineNumber,
       });
     }

package/src/sitemap/renderer.ts

@@ -116,7 +116,8 @@ export function renderSitemap(
   onClickItem?: (lineNumber: number) => void,
   exportDims?: { width?: number; height?: number },
   activeTagGroup?: string | null,
-  hiddenAttributes?: Set<string>
+  hiddenAttributes?: Set<string>,
+  exportMode?: boolean
 ): void {
   // Clear existing content
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
@@ -184,11 +185,9 @@ export function renderSitemap(
     .attr('points', `0,0 ${ARROWHEAD_W},${ARROWHEAD_H / 2} 0,${ARROWHEAD_H}`)
     .attr('fill', palette.textMuted);
 
-  // Colored arrowheads
+  // Edges have no color slot (spec §1.7); keep empty set so the marker-setup
+  // loop is a no-op but the symbol stays available for future color sources.
   const edgeColors = new Set<string>();
-  for (const edge of layout.edges) {
-    if (edge.color) edgeColors.add(edge.color);
-  }
   for (const color of edgeColors) {
     const id = `sm-arrow-${color.replace('#', '')}`;
     defs
@@ -379,10 +378,8 @@ export function renderSitemap(
       .attr('class', 'sitemap-edge-group')
       .attr('data-line-number', String(edge.lineNumber));
 
-    const edgeColor = edge.color ?? palette.textMuted;
-    const markerId = edge.color
-      ? `sm-arrow-${edge.color.replace('#', '')}`
-      : 'sm-arrow';
+    const edgeColor = palette.textMuted;
+    const markerId = 'sm-arrow';
 
     const gen = edge.deferred ? lineGeneratorLinear : lineGenerator;
     const pathD = gen(edge.points);
@@ -602,7 +599,8 @@ export function renderSitemap(
       isDark,
       activeTagGroup,
       undefined,
-      hiddenAttributes
+      hiddenAttributes,
+      exportMode
     );
   }
 
@@ -647,7 +645,8 @@ export function renderSitemap(
       isDark,
       activeTagGroup,
       width,
-      hiddenAttributes
+      hiddenAttributes,
+      exportMode
     );
   }
 }
@@ -663,7 +662,8 @@ function renderLegend(
   isDark: boolean,
   activeTagGroup?: string | null,
   fixedWidth?: number,
-  hiddenAttributes?: Set<string>
+  hiddenAttributes?: Set<string>,
+  exportMode?: boolean
 ): void {
   if (legendGroups.length === 0) return;
 
@@ -678,7 +678,7 @@ function renderLegend(
   const legendConfig: LegendConfig = {
     groups,
     position: { placement: 'top-center', titleRelation: 'below-title' },
-    mode: 'fixed',
+    mode: exportMode ? 'export' : 'preview',
     capsulePillAddonWidth: eyeAddonWidth,
   };
   const legendState: LegendState = { activeGroup: activeTagGroup ?? null };

package/src/sitemap/types.ts

@@ -22,7 +22,6 @@ export interface SitemapEdge {
   sourceId: string;
   targetId: string;
   label?: string;
-  color?: string;
   lineNumber: number;
 }
 

package/src/tech-radar/parser.ts

@@ -62,7 +62,7 @@ export function parseTechRadar(content: string): ParsedTechRadar {
     result.diagnostics.push(makeDgmoError(line, message, 'warning'));
   };
 
-  if (!content || !content.trim()) {
+  if (!content?.trim()) {
     return fail(0, 'No content provided');
   }
 
@@ -115,7 +115,7 @@ export function parseTechRadar(content: string): ParsedTechRadar {
     // --- First line: chart type + title ---
     if (!headerParsed) {
       const firstLine = parseFirstLine(trimmed);
-      if (firstLine && firstLine.chartType === 'tech-radar') {
+      if (firstLine?.chartType === 'tech-radar') {
         result.title = firstLine.title ?? '';
         result.titleLineNumber = lineNumber;
         headerParsed = true;

package/src/tech-radar/renderer.ts

@@ -163,7 +163,7 @@ export function renderTechRadar(
         },
       ],
       position: { placement: 'top-center', titleRelation: 'below-title' },
-      mode: 'fixed',
+      mode: options?.exportMode ? 'export' : 'preview',
       controlsGroup: {
         toggles: [
           {
@@ -1195,7 +1195,8 @@ export function renderTechRadarForExport(
   palette: PaletteColors,
   isDark: boolean,
   exportDims?: D3ExportDimensions,
-  viewState?: CompactViewState
+  viewState?: CompactViewState,
+  exportMode?: boolean
 ): void {
   renderTechRadar(
     container,
@@ -1204,6 +1205,7 @@ export function renderTechRadarForExport(
     isDark,
     undefined,
     exportDims,
-    viewState
+    viewState,
+    { exportMode }
   );
 }

package/src/tech-radar/types.ts

@@ -78,4 +78,6 @@ export interface TechRadarRenderOptions {
   onLegendGroupToggle?: (groupName: string) => void;
   /** Active line from the editor cursor — triggers popover/expansion for that blip. */
   activeLine?: number | null;
+  /** True when rendering for export (PNG/SVG/PDF) — controls whether collapsed legend pills and cog are stripped. */
+  exportMode?: boolean;
 }

package/src/utils/arrows.ts

@@ -22,7 +22,6 @@
 
 import type { DgmoError } from '../diagnostics';
 import { makeDgmoError } from '../diagnostics';
-import { RECOGNIZED_COLOR_NAMES } from '../colors';
 
 interface ParsedArrow {
   from: string;
@@ -140,10 +139,9 @@ export interface ParseInArrowLabelResult {
  *
  * This helper is intentionally chart-agnostic: it operates on an already
  * extracted label string, leaving each chart's existing arrow-finding
- * tokenization in place. TD-11 color-parens is handled inside the
- * flowchart and state `parseArrowToken` functions because those are the
- * only charts that interpret `-(color)->` as a colored edge; they use
- * `matchColorParens()` from this module for the shared lookup.
+ * tokenization in place. Edges no longer have a color slot on any chart
+ * type (see spec §1.7 "Edge color is not a feature"); arrow content is
+ * pure label text.
  */
 export function parseInArrowLabel(
   rawLabel: string,
@@ -162,29 +160,6 @@ export function parseInArrowLabel(
   return { label: trimmed, diagnostics };
 }
 
-// ============================================================
-// matchColorParens — shared TD-11 helper for flowchart and state
-// ============================================================
-
-/**
- * Test whether a string matches the TD-11 color-parens form `(colorName)`
- * where `colorName` is one of the 11 recognized palette color names from
- * `src/colors.ts:RECOGNIZED_COLOR_NAMES`. Returns the lowercase color name
- * on a match, or `null` on fall-through (whole string becomes a label).
- *
- * Used by flowchart and state parsers to keep the color-parens recognition
- * rule in one place — do NOT re-implement the regex in chart parsers.
- */
-export function matchColorParens(content: string): string | null {
-  const m = content.match(/^\(([A-Za-z]+)\)$/);
-  if (!m) return null;
-  const candidate = m[1].toLowerCase();
-  if ((RECOGNIZED_COLOR_NAMES as readonly string[]).includes(candidate)) {
-    return candidate;
-  }
-  return null;
-}
-
 // Forward (call) patterns — participant names may contain spaces, so use non-greedy (.+?)
 const SYNC_LABELED_RE = /^(.+?)\s*-(.+)->\s*(.+)$/;
 const ASYNC_LABELED_RE = /^(.+?)\s*~(.+)~>\s*(.+)$/;

package/src/utils/extract-alias.ts

@@ -32,7 +32,7 @@ export const ALIAS_TOKEN_RE = /^[A-Za-z][A-Za-z0-9_]{0,11}$/;
  * DGMO grammar keywords with all chart-type tokens (per F5).
  *
  * Articles (`a`, `an`, `the`) are intentionally NOT reserved — the
- * spec's worked examples use `Alice is a service as a`, where `a`
+ * spec's worked examples use `Alice is an actor as a`, where `a`
  * is a perfectly fine single-letter alias. Reserving English
  * articles would break the canonical example pattern.
  */

package/src/utils/inline-markdown.ts

@@ -2,7 +2,7 @@
 // Inline Markdown — shared parsing + SVG rendering for text fields
 // ============================================================
 
-import * as d3Selection from 'd3-selection';
+import type * as d3Selection from 'd3-selection';
 import type { PaletteColors } from '../palettes';
 import { safeHref } from './safe-href';
 

package/src/utils/legend-d3.ts

@@ -46,7 +46,14 @@ export function renderLegendD3(
   let currentState = { ...state };
   let currentLayout: LegendLayout;
 
-  const legendG = container.append('g').attr('class', 'dgmo-legend');
+  const legendG = container
+    .append('g')
+    .attr('class', 'dgmo-legend')
+    .attr('data-legend-title-relation', config.position.titleRelation)
+    .attr(
+      'data-legend-capsule-addon-width',
+      String(config.capsulePillAddonWidth ?? 0)
+    );
 
   function render() {
     currentLayout = computeLegendLayout(config, currentState, width);
@@ -270,11 +277,10 @@ function renderPill(
   groupBg: string,
   callbacks?: LegendCallbacks
 ): void {
-  // Collapsed tag-group pills survive static export so readers see
-  // that the diagram has tag dimensions even when no group is active.
-  // (Per spec §1.3 "Coloring is opt-in" — exports default to collapsed
-  // pills, no node coloring.) Interactive controls keep
-  // `data-export-ignore` separately.
+  // Collapsed tag-group pills are hidden in export mode
+  // (`LegendConfig.mode === 'export'`) — the layout engine filters them
+  // in `computeLegendLayout`. See
+  // tech-spec-hide-inactive-tag-pills-in-exports.md.
   const g = parent
     .append('g')
     .attr('transform', `translate(${pill.x},${pill.y})`)