@diagrammo/dgmo 0.7.3 → 0.8.0

package/src/sitemap/parser.ts

@@ -11,10 +11,15 @@ import {
   measureIndent,
   extractColor,
   parsePipeMetadata,
+  normalizeDirection,
+  inferArrowColor,
   MULTIPLE_PIPE_WARNING,
   CHART_TYPE_RE,
   TITLE_RE,
   OPTION_RE,
+  parseFirstLine,
+  OPTION_NOCOLON_RE,
+  ALL_CHART_TYPES,
 } from '../utils/parsing';
 import type {
   SitemapNode,
@@ -26,7 +31,8 @@ import type {
 // Regexes
 // ============================================================
 
-const CONTAINER_RE = /^\[([^\]]+)\]$/;
+const CONTAINER_RE = /^\[([^\]]+)\]\s*(?:\|\s*(.+))?$/;
+/** Metadata on content nodes: `key: value` (colon-separated, used in content phase) */
 const METADATA_RE = /^([^:]+):\s*(.+)$/;
 
 /**
@@ -54,9 +60,12 @@ function parseArrowLine(
   const arrowMatch = trimmed.match(ARROW_RE);
   if (arrowMatch) {
     const label = arrowMatch[1]?.trim() || undefined;
-    const color = arrowMatch[2]
-      ? resolveColor(arrowMatch[2].trim(), palette)
+    let color = arrowMatch[2]
+      ? resolveColor(arrowMatch[2].trim(), palette) ?? undefined
       : undefined;
+    if (label && !color) {
+      color = inferArrowColor(label);
+    }
     const target = arrowMatch[3].trim();
     return { label, color, target };
   }
@@ -149,6 +158,7 @@ export function parseSitemap(
   let contentStarted = false;
   let nodeCounter = 0;
   let containerCounter = 0;
+  let firstLineParsed = false;
 
   // Tag group parsing state
   let currentTagGroup: TagGroup | null = null;
@@ -189,32 +199,22 @@ export function parseSitemap(
 
     // --- Header phase ---
 
-    // chart: type
-    if (!contentStarted) {
-      const chartMatch = trimmed.match(CHART_TYPE_RE);
-      if (chartMatch) {
-        const chartType = chartMatch[1].trim().toLowerCase();
-        if (chartType !== 'sitemap') {
-          const allTypes = [
-            'sitemap', 'org', 'class', 'flowchart', 'sequence', 'er',
-            'bar', 'line', 'pie', 'scatter', 'sankey', 'venn', 'timeline',
-            'arc', 'slope', 'kanban', 'c4', 'initiative-status', 'state',
-          ];
-          let msg = `Expected chart type "sitemap", got "${chartType}"`;
-          const hint = suggest(chartType, allTypes);
+    // First line: try parseFirstLine for `sitemap [Title]`
+    if (!firstLineParsed && !contentStarted) {
+      const firstLineResult = parseFirstLine(trimmed);
+      if (firstLineResult) {
+        firstLineParsed = true;
+        if (firstLineResult.chartType !== 'sitemap') {
+          const allTypes = Array.from(ALL_CHART_TYPES);
+          let msg = `Expected chart type "sitemap", got "${firstLineResult.chartType}"`;
+          const hint = suggest(firstLineResult.chartType, allTypes);
           if (hint) msg += `. ${hint}`;
           return fail(lineNumber, msg);
         }
-        continue;
-      }
-    }
-
-    // title: value
-    if (!contentStarted) {
-      const titleMatch = trimmed.match(TITLE_RE);
-      if (titleMatch) {
-        result.title = titleMatch[1].trim();
-        result.titleLineNumber = lineNumber;
+        if (firstLineResult.title) {
+          result.title = firstLineResult.title;
+          result.titleLineNumber = lineNumber;
+        }
         continue;
       }
     }
@@ -227,10 +227,8 @@ export function parseSitemap(
         continue;
       }
       if (tagBlockMatch.deprecated) {
-        pushWarning(
-          lineNumber,
-          `'## ${tagBlockMatch.name}' is deprecated for tag groups — use 'tag: ${tagBlockMatch.name}' instead`,
-        );
+        pushError(lineNumber, `'## ${tagBlockMatch.name}' is no longer supported — use 'tag: ${tagBlockMatch.name}' instead`);
+        continue;
       }
       currentTagGroup = {
         name: tagBlockMatch.name,
@@ -245,22 +243,22 @@ export function parseSitemap(
       continue;
     }
 
-    // Generic header options (before content/tag groups)
-    if (!contentStarted && !currentTagGroup && measureIndent(line) === 0) {
-      const optMatch = trimmed.match(OPTION_RE);
+    // Generic header options (space-separated, before content/tag groups)
+    // Skip lines with `|` (pipe metadata) or `->` (arrows) — those are content
+    if (!contentStarted && !currentTagGroup && measureIndent(line) === 0
+        && !trimmed.includes('|') && !trimmed.includes('->')) {
+      const optMatch = trimmed.match(OPTION_NOCOLON_RE);
       if (optMatch) {
         const key = optMatch[1].trim().toLowerCase();
-        if (key === 'direction') {
-          const dir = optMatch[2].trim().toUpperCase();
-          if (dir === 'TB' || dir === 'LR') {
+        if (key === 'direction' || key === 'orientation') {
+          const dir = normalizeDirection(optMatch[2]);
+          if (dir) {
             result.direction = dir as SitemapDirection;
           }
           continue;
         }
-        if (key !== 'chart' && key !== 'title') {
-          result.options[key] = optMatch[2].trim();
-          continue;
-        }
+        result.options[key] = optMatch[2].trim();
+        continue;
       }
     }
 
@@ -268,11 +266,7 @@ export function parseSitemap(
     if (currentTagGroup && !contentStarted) {
       const indent = measureIndent(line);
       if (indent > 0) {
-        const isDefault = /\bdefault\s*$/.test(trimmed);
-        const entryText = isDefault
-          ? trimmed.replace(/\s+default\s*$/, '').trim()
-          : trimmed;
-        const { label, color } = extractColor(entryText, palette);
+        const { label, color } = extractColor(trimmed, palette);
         if (!color) {
           pushError(
             lineNumber,
@@ -280,14 +274,15 @@ export function parseSitemap(
           );
           continue;
         }
-        if (isDefault) {
-          currentTagGroup.defaultValue = label;
-        }
         currentTagGroup.entries.push({
           value: label,
           color,
           lineNumber,
         });
+        // First entry is the default
+        if (currentTagGroup.entries.length === 1) {
+          currentTagGroup.defaultValue = label;
+        }
         continue;
       }
       // Non-indented line after tag group — fall through to content
@@ -332,11 +327,20 @@ export function parseSitemap(
       const rawLabel = containerMatch[1].trim();
       const { label, color } = extractColor(rawLabel, palette);
 
+      // Parse optional pipe metadata on the container line
+      const pipeStr = containerMatch[2];
+      const containerMetadata: Record<string, string> = {};
+      if (pipeStr) {
+        // Build segments array compatible with parsePipeMetadata (first element is label, rest are pipe parts)
+        const pipeSegments = ['', pipeStr];
+        Object.assign(containerMetadata, parsePipeMetadata(pipeSegments, aliasMap));
+      }
+
       containerCounter++;
       const node: SitemapNode = {
         id: `container-${containerCounter}`,
         label,
-        metadata: {},
+        metadata: containerMetadata,
         children: [],
         parentId: null,
         isContainer: true,
@@ -466,6 +470,10 @@ function attachNode(
   if (indentStack.length > 0) {
     const parent = indentStack[indentStack.length - 1].node;
     node.parentId = parent.id;
+    // Cascade container metadata to child nodes (child overrides on conflict)
+    if (parent.isContainer && Object.keys(parent.metadata).length > 0 && !node.isContainer) {
+      node.metadata = { ...parent.metadata, ...node.metadata };
+    }
     parent.children.push(node);
   } else {
     result.roots.push(node);

package/src/sitemap/renderer.ts

@@ -16,11 +16,9 @@ import {
   LEGEND_HEIGHT,
   LEGEND_PILL_PAD,
   LEGEND_PILL_FONT_SIZE,
-  LEGEND_PILL_FONT_W,
   LEGEND_CAPSULE_PAD,
   LEGEND_DOT_R,
   LEGEND_ENTRY_FONT_SIZE,
-  LEGEND_ENTRY_FONT_W,
   LEGEND_ENTRY_DOT_GAP,
   LEGEND_ENTRY_TRAIL,
   LEGEND_GROUP_GAP,
@@ -28,6 +26,7 @@ import {
   LEGEND_EYE_GAP,
   EYE_OPEN_PATH,
   EYE_CLOSED_PATH,
+  measureLegendText,
 } from '../utils/legend-constants';
 
 // ============================================================
@@ -36,8 +35,8 @@ import {
 
 const DIAGRAM_PADDING = 20;
 const MAX_SCALE = 3;
+import { TITLE_FONT_SIZE, TITLE_FONT_WEIGHT } from '../utils/title-constants';
 const TITLE_HEIGHT = 30;
-const TITLE_FONT_SIZE = 18;
 const LABEL_FONT_SIZE = 13;
 const META_FONT_SIZE = 11;
 const META_LINE_HEIGHT = 16;
@@ -209,7 +208,7 @@ export function renderSitemap(
       .attr('text-anchor', 'middle')
       .attr('fill', palette.text)
       .attr('font-size', TITLE_FONT_SIZE)
-      .attr('font-weight', 'bold')
+      .attr('font-weight', TITLE_FONT_WEIGHT)
       .attr('class', 'sitemap-title chart-title');
 
     if (parsed.titleLineNumber) {
@@ -523,7 +522,7 @@ export function renderSitemap(
       .attr('text-anchor', 'middle')
       .attr('fill', palette.text)
       .attr('font-size', TITLE_FONT_SIZE)
-      .attr('font-weight', 'bold')
+      .attr('font-weight', TITLE_FONT_WEIGHT)
       .attr('class', 'sitemap-title chart-title')
       .style('font-family', FONT_FAMILY);
 
@@ -592,7 +591,7 @@ function renderLegend(
 
   for (const group of visibleGroups) {
     const isActive = activeTagGroup != null;
-    const pillW = group.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+    const pillW = measureLegendText(group.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
 
     const gX = fixedPositions?.get(group.name) ?? group.x;
     const gY = fixedPositions ? 0 : group.y;
@@ -705,7 +704,7 @@ function renderLegend(
           .attr('fill', palette.textMuted)
           .text(entry.value);
 
-        entryX = textX + entry.value.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+        entryX = textX + measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
       }
     }
   }

package/src/utils/arrows.ts

@@ -14,14 +14,14 @@ export interface ParsedArrow {
 }
 
 // Forward (call) patterns — participant names may contain spaces, so use non-greedy (.+?)
-const SYNC_LABELED_RE = /^(.+?)\s+-(.+)->\s+(.+)$/;
-const ASYNC_LABELED_RE = /^(.+?)\s+~(.+)~>\s+(.+)$/;
+const SYNC_LABELED_RE = /^(.+?)\s*-(.+)->\s*(.+)$/;
+const ASYNC_LABELED_RE = /^(.+?)\s*~(.+)~>\s*(.+)$/;
 
 // Deprecated patterns — produce errors
-const RETURN_SYNC_LABELED_RE = /^(.+?)\s+<-(.+)-\s+(.+)$/;
-const RETURN_ASYNC_LABELED_RE = /^(.+?)\s+<~(.+)~\s+(.+)$/;
-const BIDI_SYNC_RE = /^(.+?)\s+<-(.+)->\s+(.+)$/;
-const BIDI_ASYNC_RE = /^(.+?)\s+<~(.+)~>\s+(.+)$/;
+const RETURN_SYNC_LABELED_RE = /^(.+?)\s*<-(.+)-\s*(.+)$/;
+const RETURN_ASYNC_LABELED_RE = /^(.+?)\s*<~(.+)~\s*(.+)$/;
+const BIDI_SYNC_RE = /^(.+?)\s*<-(.+)->\s*(.+)$/;
+const BIDI_ASYNC_RE = /^(.+?)\s*<~(.+)~>\s*(.+)$/;
 
 const ARROW_CHARS = ['->', '~>'];
 
@@ -93,3 +93,22 @@ export function parseArrow(
 
   return null;
 }
+
+/**
+ * Match an arrow segment and extract label + async flag.
+ * Handles: `->`, `-label->`, `~>`, `~label~>`.
+ * Returns null if no arrow pattern matched.
+ */
+export function matchArrowLabel(segment: string): { label: string; async: boolean } | null {
+  // Async labeled: ~label~>
+  const asyncLabeled = segment.match(/^~(.+?)~>$/);
+  if (asyncLabeled) return { label: asyncLabeled[1].trim(), async: true };
+  // Async bare: ~>
+  if (segment.trim() === '~>') return { label: '', async: true };
+  // Sync labeled: -label->
+  const syncLabeled = segment.match(/^-(.+?)->$/);
+  if (syncLabeled) return { label: syncLabeled[1].trim(), async: false };
+  // Sync bare: ->
+  if (segment.trim() === '->') return { label: '', async: false };
+  return null;
+}

package/src/utils/duration.ts

@@ -150,6 +150,18 @@ export function addGanttDuration(
       }
       return result;
     }
+
+    case 'h': {
+      const result = new Date(startDate);
+      result.setTime(result.getTime() + amount * 3600000 * direction);
+      return result;
+    }
+
+    case 'min': {
+      const result = new Date(startDate);
+      result.setTime(result.getTime() + amount * 60000 * direction);
+      return result;
+    }
   }
 }
 
@@ -157,7 +169,7 @@ export function addGanttDuration(
  * Parse a duration string like "3bd" or "5d".
  */
 export function parseDuration(s: string): Duration | null {
-  const match = s.trim().match(/^(\d+(?:\.\d+)?)(d|bd|w|m|q|y)$/);
+  const match = s.trim().match(/^(\d+(?:\.\d+)?)(min|bd|d|w|m|q|y|h)$/);
   if (!match) return null;
   return { amount: parseFloat(match[1]), unit: match[2] as DurationUnit };
 }
@@ -185,22 +197,46 @@ export function parseOffset(value: string): Offset | null {
 }
 
 /**
- * Parse a date string (YYYY-MM-DD, YYYY-MM, or YYYY) into a Date object.
- * Always returns midnight local time on the first available day.
+ * Parse a date string (YYYY-MM-DD, YYYY-MM, YYYY, or YYYY-MM-DD HH:MM) into a Date object.
+ * Returns midnight local time unless HH:MM is specified.
  */
 export function parseGanttDate(s: string): Date {
-  const parts = s.split('-').map(p => parseInt(p, 10));
+  // Split on space to detect optional time component
+  const spaceIdx = s.indexOf(' ');
+  let datePart = s;
+  let hour = 0;
+  let minute = 0;
+
+  if (spaceIdx !== -1) {
+    datePart = s.slice(0, spaceIdx);
+    const timePart = s.slice(spaceIdx + 1);
+    const timeParts = timePart.split(':');
+    if (timeParts.length === 2) {
+      const h = parseInt(timeParts[0], 10);
+      const m = parseInt(timeParts[1], 10);
+      if (h >= 0 && h <= 23 && m >= 0 && m <= 59) {
+        hour = h;
+        minute = m;
+      }
+    }
+  }
+
+  const parts = datePart.split('-').map(p => parseInt(p, 10));
   const year = parts[0];
   const month = parts.length >= 2 ? parts[1] - 1 : 0; // JS months are 0-based
   const day = parts.length >= 3 ? parts[2] : 1;
-  return new Date(year, month, day);
+  return new Date(year, month, day, hour, minute);
 }
 
 /**
- * Format a Date as YYYY-MM-DD string.
+ * Format a Date as YYYY-MM-DD string, or YYYY-MM-DD HH:MM if time is non-midnight.
  */
 export function formatGanttDate(date: Date): string {
-  return formatDateKey(date);
+  const dateStr = formatDateKey(date);
+  const h = date.getHours();
+  const m = date.getMinutes();
+  if (h === 0 && m === 0) return dateStr;
+  return `${dateStr} ${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
 }
 
 /**

package/src/utils/legend-constants.ts

@@ -18,6 +18,32 @@ export const LEGEND_EYE_SIZE = 14;
 export const LEGEND_EYE_GAP = 6;
 export const LEGEND_ICON_W = 20;
 
+// ── Proportional text measurement ────────────────────────────
+// Helvetica character width ratios (fraction of fontSize).
+// Replaces the naive `chars * 0.6 * fontSize` estimate with
+// per-character proportional widths for accurate legend sizing.
+// prettier-ignore
+const CHAR_W: Record<string, number> = {
+  ' ':.28,'!': .28,'"': .36,'#': .56,'$': .56,'%': .89,'&': .67,"'":.19,
+  '(':.33,')':.33,'*': .39,'+':.58,',':.28,'-':.33,'.':.28,'/':.28,
+  '0':.56,'1':.56,'2':.56,'3':.56,'4':.56,'5':.56,'6':.56,'7':.56,'8':.56,'9':.56,
+  ':':.28,';':.28,'<':.58,'=':.58,'>':.58,'?':.56,'@':1.02,
+  A:.67,B:.67,C:.72,D:.72,E:.67,F:.61,G:.78,H:.72,I:.28,J:.50,K:.67,L:.56,M:.83,
+  N:.72,O:.78,P:.67,Q:.78,R:.72,S:.67,T:.61,U:.72,V:.67,W:.94,X:.67,Y:.67,Z:.61,
+  a:.56,b:.56,c:.50,d:.56,e:.56,f:.28,g:.56,h:.56,i:.22,j:.22,k:.50,l:.22,m:.83,
+  n:.56,o:.56,p:.56,q:.56,r:.33,s:.50,t:.28,u:.56,v:.50,w:.72,x:.50,y:.50,z:.50,
+};
+const DEFAULT_W = 0.56;
+
+/** Estimate rendered text width using Helvetica proportional character widths. */
+export function measureLegendText(text: string, fontSize: number): number {
+  let w = 0;
+  for (let i = 0; i < text.length; i++) {
+    w += (CHAR_W[text[i]] ?? DEFAULT_W) * fontSize;
+  }
+  return w;
+}
+
 // Eye icon SVG paths (14×14 viewBox)
 // Present only in org and sitemap legends (metadata visibility toggle)
 export const EYE_OPEN_PATH =

package/src/utils/legend-svg.ts

@@ -0,0 +1,167 @@
+// ============================================================
+// Shared legend SVG string generator
+// Produces SVG <g> elements matching the standard legend style
+// used across all diagram types (capsule pills with colored dots).
+// ============================================================
+
+import {
+  LEGEND_HEIGHT,
+  LEGEND_PILL_PAD,
+  LEGEND_PILL_FONT_SIZE,
+  LEGEND_CAPSULE_PAD,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_ENTRY_DOT_GAP,
+  LEGEND_ENTRY_TRAIL,
+  LEGEND_GROUP_GAP,
+  measureLegendText,
+} from './legend-constants';
+import { mix } from '../palettes/color-utils';
+import { FONT_FAMILY } from '../fonts';
+
+// ── Types ────────────────────────────────────────────────────
+
+export interface LegendGroupData {
+  name: string;
+  entries: Array<{ value: string; color: string }>;
+}
+
+export interface LegendRenderOptions {
+  palette: { bg: string; surface: string; text: string; textMuted: string };
+  isDark: boolean;
+  containerWidth: number;
+  /** Grid left offset as percentage (e.g. 12 for '12%'). Centers legend over plot area. */
+  gridLeftPct?: number;
+  /** Grid right offset as percentage (e.g. 4 for '4%'). Centers legend over plot area. */
+  gridRightPct?: number;
+  activeGroup?: string | null;
+  className?: string;
+}
+
+export interface LegendRenderResult {
+  svg: string;
+  height: number;
+  /** Natural content width (px). Callers can use this for CSS-based centering. */
+  width: number;
+}
+
+// ── Helpers ──────────────────────────────────────────────────
+
+function esc(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+function pillWidth(name: string): number {
+  return measureLegendText(name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
+}
+
+function entriesWidth(entries: Array<{ value: string }>): number {
+  let w = 0;
+  for (const e of entries) {
+    w += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(e.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
+  }
+  return w;
+}
+
+function groupTotalWidth(name: string, entries: Array<{ value: string }>, isActive: boolean): number {
+  const pw = pillWidth(name);
+  if (!isActive) return pw;
+  return LEGEND_CAPSULE_PAD * 2 + pw + 4 + entriesWidth(entries);
+}
+
+// ── Main renderer ────────────────────────────────────────────
+
+export function renderLegendSvg(
+  groups: LegendGroupData[],
+  options: LegendRenderOptions,
+): LegendRenderResult {
+  if (groups.length === 0) return { svg: '', height: 0, width: 0 };
+
+  const { palette, isDark, containerWidth, activeGroup, className } = options;
+  const groupBg = isDark
+    ? mix(palette.surface, palette.bg, 50)
+    : mix(palette.surface, palette.bg, 30);
+
+  // Pre-compute layout
+  const items = groups
+    .filter((g) => g.entries.length > 0)
+    .map((g) => {
+      const isActive = !!activeGroup && g.name.toLowerCase() === activeGroup.toLowerCase();
+      const pw = pillWidth(g.name);
+      const tw = groupTotalWidth(g.name, g.entries, isActive);
+      return { group: g, isActive, pillWidth: pw, totalWidth: tw };
+    });
+
+  if (items.length === 0) return { svg: '', height: 0, width: 0 };
+
+  const totalWidth = items.reduce((s, it) => s + it.totalWidth, 0) + (items.length - 1) * LEGEND_GROUP_GAP;
+
+  // Center over the plot area when grid offsets are provided, otherwise full container
+  const plotLeft = options.gridLeftPct ? (containerWidth * options.gridLeftPct) / 100 : 0;
+  const plotRight = options.gridRightPct ? containerWidth - (containerWidth * options.gridRightPct) / 100 : containerWidth;
+  const plotWidth = plotRight - plotLeft;
+  let x = Math.max(0, plotLeft + (plotWidth - totalWidth) / 2);
+
+  const parts: string[] = [];
+  const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
+
+  for (const item of items) {
+    const groupKey = item.group.name.toLowerCase();
+    const inner: string[] = [];
+
+    // Outer capsule (active only)
+    if (item.isActive) {
+      inner.push(
+        `<rect width="${item.totalWidth}" height="${LEGEND_HEIGHT}" rx="${LEGEND_HEIGHT / 2}" fill="${esc(groupBg)}"/>`,
+      );
+    }
+
+    const pillXOff = item.isActive ? LEGEND_CAPSULE_PAD : 0;
+    const pillYOff = item.isActive ? LEGEND_CAPSULE_PAD : 0;
+    const h = item.isActive ? pillH : LEGEND_HEIGHT;
+
+    // Pill background
+    inner.push(
+      `<rect x="${pillXOff}" y="${pillYOff}" width="${item.pillWidth}" height="${h}" rx="${h / 2}" fill="${esc(item.isActive ? palette.bg : groupBg)}"/>`,
+    );
+
+    // Active pill border
+    if (item.isActive) {
+      inner.push(
+        `<rect x="${pillXOff}" y="${pillYOff}" width="${item.pillWidth}" height="${h}" rx="${h / 2}" fill="none" stroke="${esc(mix(palette.textMuted, palette.bg, 50))}" stroke-width="0.75"/>`,
+      );
+    }
+
+    // Pill text
+    inner.push(
+      `<text x="${pillXOff + item.pillWidth / 2}" y="${LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2}" font-size="${LEGEND_PILL_FONT_SIZE}" font-weight="500" fill="${esc(item.isActive ? palette.text : palette.textMuted)}" text-anchor="middle" font-family="${esc(FONT_FAMILY)}">${esc(item.group.name)}</text>`,
+    );
+
+    // Entry dots + labels (active only)
+    if (item.isActive) {
+      let entryX = pillXOff + item.pillWidth + 4;
+      for (const entry of item.group.entries) {
+        const textX = entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP;
+        inner.push(
+          `<g data-legend-entry="${esc(entry.value.toLowerCase())}" data-series-name="${esc(entry.value)}" style="cursor:pointer">` +
+          `<circle cx="${entryX + LEGEND_DOT_R}" cy="${LEGEND_HEIGHT / 2}" r="${LEGEND_DOT_R}" fill="${esc(entry.color)}"/>` +
+          `<text x="${textX}" y="${LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1}" font-size="${LEGEND_ENTRY_FONT_SIZE}" fill="${esc(palette.textMuted)}" font-family="${esc(FONT_FAMILY)}">${esc(entry.value)}</text>` +
+          `</g>`,
+        );
+        entryX = textX + measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
+      }
+    }
+
+    parts.push(
+      `<g transform="translate(${x},0)" data-legend-group="${esc(groupKey)}" style="cursor:pointer">${inner.join('')}</g>`,
+    );
+
+    x += item.totalWidth + LEGEND_GROUP_GAP;
+  }
+
+  const classAttr = className ? ` class="${esc(className)}"` : '';
+  const activeAttr = activeGroup ? ` data-legend-active="${esc(activeGroup.toLowerCase())}"` : '';
+  const svg = `<g${classAttr}${activeAttr}>${parts.join('')}</g>`;
+
+  return { svg, height: LEGEND_HEIGHT, width: totalWidth };
+}