@diagrammo/dgmo 0.8.2 → 0.8.4

package/src/d3.ts

@@ -182,8 +182,18 @@ import { getSeriesColors } from './palettes';
 import { mix } from './palettes/color-utils';
 import type { DgmoError } from './diagnostics';
 import { makeDgmoError, formatDgmoError, suggest } from './diagnostics';
-import { collectIndentedValues, extractColor, normalizeDirection, parseFirstLine, parsePipeMetadata, MULTIPLE_PIPE_WARNING } from './utils/parsing';
-import { matchTagBlockHeading, validateTagValues, resolveTagColor } from './utils/tag-groups';
+import {
+  collectIndentedValues,
+  extractColor,
+  parseFirstLine,
+  parsePipeMetadata,
+  MULTIPLE_PIPE_ERROR,
+} from './utils/parsing';
+import {
+  matchTagBlockHeading,
+  validateTagValues,
+  resolveTagColor,
+} from './utils/tag-groups';
 import type { TagGroup } from './utils/tag-groups';
 import {
   LEGEND_HEIGHT as TL_LEGEND_HEIGHT,
@@ -197,7 +207,11 @@ import {
   LEGEND_GROUP_GAP as TL_LEGEND_GROUP_GAP,
   measureLegendText,
 } from './utils/legend-constants';
-import { TITLE_FONT_SIZE, TITLE_FONT_WEIGHT, TITLE_Y } from './utils/title-constants';
+import {
+  TITLE_FONT_SIZE,
+  TITLE_FONT_WEIGHT,
+  TITLE_Y,
+} from './utils/title-constants';
 
 // ============================================================
 // Shared Rendering Helpers
@@ -215,7 +229,8 @@ function renderChartTitle(
   onClickItem?: (lineNumber: number) => void
 ): void {
   if (!title) return;
-  const titleEl = svg.append('text')
+  const titleEl = svg
+    .append('text')
     .attr('class', 'chart-title')
     .attr('x', width / 2)
     .attr('y', TITLE_Y)
@@ -230,8 +245,12 @@ function renderChartTitle(
     if (onClickItem) {
       titleEl
         .on('click', () => onClickItem(titleLineNumber))
-        .on('mouseenter', function () { d3Selection.select(this).attr('opacity', 0.7); })
-        .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+        .on('mouseenter', function () {
+          d3Selection.select(this).attr('opacity', 0.7);
+        })
+        .on('mouseleave', function () {
+          d3Selection.select(this).attr('opacity', 1);
+        });
     }
   }
 }
@@ -244,7 +263,15 @@ function initD3Chart(
   container: HTMLDivElement,
   palette: PaletteColors,
   exportDims?: D3ExportDimensions
-): { svg: d3Selection.Selection<SVGSVGElement, unknown, null, undefined>; width: number; height: number; textColor: string; mutedColor: string; bgColor: string; colors: string[] } | null {
+): {
+  svg: d3Selection.Selection<SVGSVGElement, unknown, null, undefined>;
+  width: number;
+  height: number;
+  textColor: string;
+  mutedColor: string;
+  bgColor: string;
+  colors: string[];
+} | null {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
@@ -253,7 +280,12 @@ function initD3Chart(
   const mutedColor = palette.border;
   const bgColor = palette.bg;
   const colors = getSeriesColors(palette);
-  const svg = d3Selection.select(container).append('svg').attr('width', width).attr('height', height).style('background', bgColor);
+  const svg = d3Selection
+    .select(container)
+    .append('svg')
+    .attr('width', width)
+    .attr('height', height)
+    .style('background', bgColor);
   return { svg, width, height, textColor, mutedColor, bgColor, colors };
 }
 
@@ -285,7 +317,9 @@ export function parseTimelineDate(s: string): number {
   const year = parts[0];
   const month = parts.length >= 2 ? parts[1] : 1;
   const day = parts.length >= 3 ? parts[2] : 1;
-  return year + (month - 1) / 12 + (day - 1) / 365 + hour / 8760 + minute / 525600;
+  return (
+    year + (month - 1) / 12 + (day - 1) / 365 + hour / 8760 + minute / 525600
+  );
 }
 
 /** Convert a fractional year number back to a Date (inverse of parseTimelineDate). */
@@ -307,8 +341,13 @@ function fractionalYearToDate(frac: number): Date {
 
 /** Convert a Date to a fractional year number. */
 function dateToFractionalYear(d: Date): number {
-  return d.getFullYear() + d.getMonth() / 12 + (d.getDate() - 1) / 365
-    + d.getHours() / 8760 + d.getMinutes() / 525600;
+  return (
+    d.getFullYear() +
+    d.getMonth() / 12 +
+    (d.getDate() - 1) / 365 +
+    d.getHours() / 8760 +
+    d.getMinutes() / 525600
+  );
 }
 
 /**
@@ -404,7 +443,10 @@ export function addDurationToDate(
 /**
  * Parses D3 chart text format into structured data.
  */
-export function parseVisualization(content: string, palette?: PaletteColors): ParsedVisualization {
+export function parseVisualization(
+  content: string,
+  palette?: PaletteColors
+): ParsedVisualization {
   const result: ParsedVisualization = {
     type: null,
     title: null,
@@ -463,8 +505,20 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
   let currentArcGroup: string | null = null;
   let currentTimelineGroup: string | null = null;
   let currentTimelineTagGroup: TagGroup | null = null;
+  let inTimelineEraBlock = false;
+  let timelineEraBlockIndent = 0;
+  let inTimelineMarkerBlock = false;
+  let timelineMarkerBlockIndent = 0;
   const timelineAliasMap = new Map<string, string>();
-  const VALID_D3_TYPES = new Set(['slope', 'wordcloud', 'arc', 'timeline', 'venn', 'quadrant', 'sequence']);
+  const VALID_D3_TYPES = new Set([
+    'slope',
+    'wordcloud',
+    'arc',
+    'timeline',
+    'venn',
+    'quadrant',
+    'sequence',
+  ]);
   let firstLineParsed = false;
 
   for (let i = 0; i < lines.length; i++) {
@@ -494,14 +548,10 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
       // Not a bare chart type — fall through to normal parsing
     }
 
-    // Timeline tag group heading: `tag: Name [alias X]`
+    // Timeline tag group heading: `tag Name [alias X]`
     if (result.type === 'timeline' && indent === 0) {
       const tagBlockMatch = matchTagBlockHeading(line);
       if (tagBlockMatch) {
-        if (tagBlockMatch.deprecated) {
-          result.diagnostics.push(makeDgmoError(lineNumber,
-            `'## ${tagBlockMatch.name}' is deprecated for tag groups — use 'tag: ${tagBlockMatch.name}' instead`, 'warning'));
-        }
         currentTimelineTagGroup = {
           name: tagBlockMatch.name,
           alias: tagBlockMatch.alias,
@@ -509,7 +559,10 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
           lineNumber,
         };
         if (tagBlockMatch.alias) {
-          timelineAliasMap.set(tagBlockMatch.alias.toLowerCase(), tagBlockMatch.name.toLowerCase());
+          timelineAliasMap.set(
+            tagBlockMatch.alias.toLowerCase(),
+            tagBlockMatch.name.toLowerCase()
+          );
         }
         result.timelineTagGroups.push(currentTimelineTagGroup);
         continue;
@@ -526,7 +579,11 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
       const { label, color } = extractColor(entryText, palette);
       if (color) {
         if (isDefault) currentTimelineTagGroup.defaultValue = label;
-        currentTimelineTagGroup.entries.push({ value: label, color, lineNumber });
+        currentTimelineTagGroup.entries.push({
+          value: label,
+          color,
+          lineNumber,
+        });
         continue;
       }
     }
@@ -558,9 +615,21 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
     }
 
     // Reject legacy ## group syntax
-    if (/^#{2,}\s+/.test(line) && (result.type === 'arc' || result.type === 'timeline')) {
-      const name = line.replace(/^#{2,}\s+/, '').replace(/\s*\([^)]*\)\s*$/, '').trim();
-      result.diagnostics.push(makeDgmoError(lineNumber, `'## ${name}' is no longer supported. Use '[${name}]' instead`, 'warning'));
+    if (
+      /^#{2,}\s+/.test(line) &&
+      (result.type === 'arc' || result.type === 'timeline')
+    ) {
+      const name = line
+        .replace(/^#{2,}\s+/, '')
+        .replace(/\s*\([^)]*\)\s*$/, '')
+        .trim();
+      result.diagnostics.push(
+        makeDgmoError(
+          lineNumber,
+          `'## ${name}' is no longer supported. Use '[${name}]' instead`,
+          'warning'
+        )
+      );
       continue;
     }
 
@@ -570,10 +639,10 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
       currentTimelineGroup = null;
     }
 
-    // Arc link line: source -> target(color): weight
+    // Arc link line: source -> target(color) weight
     if (result.type === 'arc') {
       const linkMatch = line.match(
-        /^(.+?)\s*->\s*(.+?)(?:\(([^)]+)\))?\s*(?::\s*(\d+(?:\.\d+)?))?$/
+        /^(.+?)\s*->\s*(.+?)(?:\(([^)]+)\))?\s*(?:\s+(\d+(?:\.\d+)?))?$/
       );
       if (linkMatch) {
         const source = linkMatch[1].trim();
@@ -605,10 +674,80 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
       }
     }
 
-    // Timeline era lines: era YYYY->YYYY Label (color)
+    // Timeline era block entries (indented under bare `era`)
+    if (result.type === 'timeline' && inTimelineEraBlock) {
+      if (indent <= timelineEraBlockIndent) {
+        inTimelineEraBlock = false;
+        // fall through to process this line normally
+      } else {
+        if (line.startsWith('//')) continue;
+        const eraEntryMatch = line.match(
+          /^(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*(?:->|\u2013>)\s*(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/
+        );
+        if (eraEntryMatch) {
+          const colorAnnotation = eraEntryMatch[4]?.trim() || null;
+          result.timelineEras.push({
+            startDate: eraEntryMatch[1],
+            endDate: eraEntryMatch[2],
+            label: eraEntryMatch[3].trim(),
+            color: colorAnnotation
+              ? resolveColor(colorAnnotation, palette)
+              : null,
+            lineNumber,
+          });
+        } else {
+          warn(lineNumber, `Unrecognized era entry: "${line}"`);
+        }
+        continue;
+      }
+    }
+
+    // Timeline marker block entries (indented under bare `marker`)
+    if (result.type === 'timeline' && inTimelineMarkerBlock) {
+      if (indent <= timelineMarkerBlockIndent) {
+        inTimelineMarkerBlock = false;
+        // fall through to process this line normally
+      } else {
+        if (line.startsWith('//')) continue;
+        const markerEntryMatch = line.match(
+          /^(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/
+        );
+        if (markerEntryMatch) {
+          const colorAnnotation = markerEntryMatch[3]?.trim() || null;
+          result.timelineMarkers.push({
+            date: markerEntryMatch[1],
+            label: markerEntryMatch[2].trim(),
+            color: colorAnnotation
+              ? resolveColor(colorAnnotation, palette)
+              : null,
+            lineNumber,
+          });
+        } else {
+          warn(lineNumber, `Unrecognized marker entry: "${line}"`);
+        }
+        continue;
+      }
+    }
+
+    // Timeline era/marker block starters and inline forms
     if (result.type === 'timeline') {
+      // Bare `era` keyword starts a block
+      if (line.toLowerCase() === 'era') {
+        inTimelineEraBlock = true;
+        timelineEraBlockIndent = indent;
+        continue;
+      }
+
+      // Bare `marker` keyword starts a block
+      if (line.toLowerCase() === 'marker') {
+        inTimelineMarkerBlock = true;
+        timelineMarkerBlockIndent = indent;
+        continue;
+      }
+
+      // Timeline era lines (inline): era YYYY->YYYY Label (color)
       const eraMatch = line.match(
-        /^era\s+(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*->\s*(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*:?\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/
+        /^era\s+(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*(?:->|\u2013>)\s*(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/
       );
       if (eraMatch) {
         const colorAnnotation = eraMatch[4]?.trim() || null;
@@ -624,9 +763,9 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
         continue;
       }
 
-      // Timeline marker lines: marker YYYY Label (color)
+      // Timeline marker lines (inline): marker YYYY Label (color)
       const markerMatch = line.match(
-        /^marker:?\s+(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/
+        /^marker\s+(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/
       );
       if (markerMatch) {
         const colorAnnotation = markerMatch[3]?.trim() || null;
@@ -647,8 +786,9 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
       // Duration event: 2026-07-15->30d: description (d=days, w=weeks, m=months, y=years, h=hours, min=minutes)
       // Supports decimals up to 2 places (e.g., 1.25y = 1 year 3 months)
       // Supports uncertain end with ? suffix (e.g., ->3m?: fades out the last 20%)
+      // Accepts both -> (hyphen) and –> (en-dash U+2013)
       const durationMatch = line.match(
-        /^(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*->\s*(\d+(?:\.\d{1,2})?)(min|[dwmyh])(\?)?(?:\s*:\s*|\s+)(.+)$/
+        /^(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*(?:->|\u2013>)\s*(\d+(?:\.\d{1,2})?)(min|[dwmyh])(\?)?\s+(.+)$/
       );
       if (durationMatch) {
         const startDate = durationMatch[1];
@@ -657,9 +797,14 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
         const unit = durationMatch[3] as 'd' | 'w' | 'm' | 'y' | 'h' | 'min';
         const endDate = addDurationToDate(startDate, amount, unit);
         const segments = durationMatch[5].split('|');
-        const metadata = segments.length > 1
-          ? parsePipeMetadata(['', ...segments.slice(1)], timelineAliasMap, () => warn(lineNumber, MULTIPLE_PIPE_WARNING))
-          : {};
+        const metadata =
+          segments.length > 1
+            ? parsePipeMetadata(
+                ['', ...segments.slice(1)],
+                timelineAliasMap,
+                () => warn(lineNumber, MULTIPLE_PIPE_ERROR)
+              )
+            : {};
         result.timelineEvents.push({
           date: startDate,
           endDate,
@@ -673,14 +818,21 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
       }
 
       // Range event: 1655->1667 description (supports uncertain end: 1655->1667?)
+      // Also supports YYYY-MM-DD HH:MM in both start and end dates
+      // Accepts both -> (hyphen) and –> (en-dash U+2013)
       const rangeMatch = line.match(
-        /^(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*->\s*(\d{4}(?:-\d{2})?(?:-\d{2})?)(\?)?(?:\s*:\s*|\s+)(.+)$/
+        /^(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*(?:->|\u2013>)\s*(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)(\?)?\s+(.+)$/
       );
       if (rangeMatch) {
         const segments = rangeMatch[4].split('|');
-        const metadata = segments.length > 1
-          ? parsePipeMetadata(['', ...segments.slice(1)], timelineAliasMap, () => warn(lineNumber, MULTIPLE_PIPE_WARNING))
-          : {};
+        const metadata =
+          segments.length > 1
+            ? parsePipeMetadata(
+                ['', ...segments.slice(1)],
+                timelineAliasMap,
+                () => warn(lineNumber, MULTIPLE_PIPE_ERROR)
+              )
+            : {};
         result.timelineEvents.push({
           date: rangeMatch[1],
           endDate: rangeMatch[2],
@@ -693,15 +845,18 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
         continue;
       }
 
-      // Point event: 1718 description (or legacy 1718: description)
-      const pointMatch = line.match(
-        /^(\d{4}(?:-\d{2})?(?:-\d{2})?)(?:\s*:\s*|\s+)(.+)$/
-      );
+      // Point event: 1718 description
+      const pointMatch = line.match(/^(\d{4}(?:-\d{2})?(?:-\d{2})?)\s+(.+)$/);
       if (pointMatch) {
         const segments = pointMatch[2].split('|');
-        const metadata = segments.length > 1
-          ? parsePipeMetadata(['', ...segments.slice(1)], timelineAliasMap, () => warn(lineNumber, MULTIPLE_PIPE_WARNING))
-          : {};
+        const metadata =
+          segments.length > 1
+            ? parsePipeMetadata(
+                ['', ...segments.slice(1)],
+                timelineAliasMap,
+                () => warn(lineNumber, MULTIPLE_PIPE_ERROR)
+              )
+            : {};
         result.timelineEvents.push({
           date: pointMatch[1],
           endDate: null,
@@ -716,27 +871,58 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
 
     // Venn diagram DSL
     if (result.type === 'venn') {
-      // Intersection line: "A + B: Label" / "A + B" / "A + B + C: Label"
+      // Intersection line: "A + B Label" / "A + B" / "A + B + C Label"
+      // Also accepts deprecated colon syntax: "A + B: Label"
       if (/\+/.test(line)) {
-        const colonIdx = line.indexOf(':');
-        let setsPart: string;
-        let label: string | null;
-        if (colonIdx >= 0) {
-          setsPart = line.substring(0, colonIdx).trim();
-          label = line.substring(colonIdx + 1).trim() || null;
-        } else {
-          setsPart = line.trim();
-          label = null;
+        // Build lookup of known set names and aliases for label extraction
+        const knownSetRefs = new Set<string>();
+        for (const s of result.vennSets) {
+          knownSetRefs.add(s.name.toLowerCase());
+          if (s.alias) knownSetRefs.add(s.alias.toLowerCase());
         }
-        const rawSets = setsPart.split('+').map((s) => s.trim()).filter(Boolean);
-        if (rawSets.length >= 2) {
+
+        const segments = line
+          .split('+')
+          .map((s) => s.trim())
+          .filter(Boolean);
+        if (segments.length >= 2) {
+          // All segments except the last are pure set references
+          const rawSets = segments.slice(0, -1);
+          const lastSeg = segments[segments.length - 1];
+
+          // For the last segment, extract set reference and optional label.
+          // Find where the set reference ends and label begins.
+          // Try progressively shorter prefixes against known set names/aliases.
+          const words = lastSeg.split(/\s+/);
+          let matchLen = 0;
+          for (let w = words.length; w >= 1; w--) {
+            const candidate = words.slice(0, w).join(' ');
+            if (knownSetRefs.has(candidate.toLowerCase())) {
+              matchLen = w;
+              break;
+            }
+          }
+          let lastSetRef: string;
+          let label: string | null;
+          if (matchLen > 0) {
+            lastSetRef = words.slice(0, matchLen).join(' ');
+            label =
+              words.length > matchLen ? words.slice(matchLen).join(' ') : null;
+          } else {
+            // No known set matched — assume first word is the set ref, rest is label
+            lastSetRef = words[0];
+            label = words.length > 1 ? words.slice(1).join(' ') : null;
+          }
+          rawSets.push(lastSetRef);
           result.vennOverlaps.push({ sets: rawSets, label, lineNumber });
           continue;
         }
       }
 
       // Set declaration: "Name(color) alias x" / "Name alias x" / "Name(color)" / "Name"
-      const setDeclMatch = line.match(/^([^(:]+?)(?:\(([^)]+)\))?(?:\s+alias\s+(\S+))?\s*$/i);
+      const setDeclMatch = line.match(
+        /^([^(:]+?)(?:\(([^)]+)\))?(?:\s+alias\s+(\S+))?\s*$/i
+      );
       if (setDeclMatch) {
         const name = setDeclMatch[1].trim();
         const colorName = setDeclMatch[2]?.trim() ?? null;
@@ -744,11 +930,17 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
         if (colorName) {
           const resolved = resolveColor(colorName, palette);
           if (resolved === null) {
-            warn(lineNumber, `Hex colors are not supported — use named colors (blue, red, green, etc.)`);
+            warn(
+              lineNumber,
+              `Hex colors are not supported — use named colors (blue, red, green, etc.)`
+            );
           } else if (resolved.startsWith('#')) {
             color = resolved;
           } else {
-            warn(lineNumber, `Unknown color "${colorName}" on set "${name}". Using auto-assigned color.`);
+            warn(
+              lineNumber,
+              `Unknown color "${colorName}" on set "${name}". Using auto-assigned color.`
+            );
           }
         }
         const alias = setDeclMatch[3]?.trim() ?? null;
@@ -759,8 +951,8 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
 
     // Quadrant-specific parsing
     if (result.type === 'quadrant') {
-      // x-axis: Low, High  — or indented multi-line
-      const xAxisMatch = line.match(/^x-axis\s*:\s*(.*)/i);
+      // x-label Low, High  — or indented multi-line
+      const xAxisMatch = line.match(/^x-label\s+(.*)/i);
       if (xAxisMatch) {
         const val = xAxisMatch[1].trim();
         let parts: string[];
@@ -778,8 +970,8 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
         continue;
       }
 
-      // y-axis: Low, High  — or indented multi-line
-      const yAxisMatch = line.match(/^y-axis\s*:\s*(.*)/i);
+      // y-label Low, High  — or indented multi-line
+      const yAxisMatch = line.match(/^y-label\s+(.*)/i);
       if (yAxisMatch) {
         const val = yAxisMatch[1].trim();
         let parts: string[];
@@ -797,9 +989,9 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
         continue;
       }
 
-      // Quadrant position labels: top-right: Label (color)
+      // Quadrant position labels: top-right Label (color)
       const quadrantLabelRe =
-        /^(top-right|top-left|bottom-left|bottom-right)\s*:\s*(.+)/i;
+        /^(top-right|top-left|bottom-left|bottom-right)\s+(.+)/i;
       const quadrantMatch = line.match(quadrantLabelRe);
       if (quadrantMatch) {
         const position = quadrantMatch[1].toLowerCase();
@@ -821,9 +1013,9 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
         continue;
       }
 
-      // Data points: Label: x, y
+      // Data points: Label x, y
       const pointMatch = line.match(
-        /^(.+?):\s*([0-9]*\.?[0-9]+)\s*,\s*([0-9]*\.?[0-9]+)\s*$/
+        /^(.+?)\s+([0-9]*\.?[0-9]+)\s*,\s*([0-9]*\.?[0-9]+)\s*$/
       );
       if (pointMatch) {
         const label = pointMatch[1].trim();
@@ -852,7 +1044,10 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
       const firstToken = line.substring(0, spaceIdx).toLowerCase();
       const restValue = line.substring(spaceIdx + 1).trim();
 
-      if (firstToken === 'chart' && VALID_D3_TYPES.has(restValue.toLowerCase())) {
+      if (
+        firstToken === 'chart' &&
+        VALID_D3_TYPES.has(restValue.toLowerCase())
+      ) {
         result.type = restValue.toLowerCase() as ParsedVisualization['type'];
         continue;
       }
@@ -866,20 +1061,6 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
         continue;
       }
 
-      if (firstToken === 'orientation' || firstToken === 'direction') {
-        if (result.type === 'arc' || result.type === 'timeline') {
-          const vLower = restValue.toLowerCase();
-          if (vLower === 'horizontal' || vLower === 'vertical') {
-            result.orientation = vLower;
-          } else {
-            const dir = normalizeDirection(restValue);
-            if (dir === 'LR') result.orientation = 'horizontal';
-            else if (dir === 'TB') result.orientation = 'vertical';
-          }
-        }
-        continue;
-      }
-
       if (firstToken === 'order') {
         const v = restValue.toLowerCase();
         if (v === 'name' || v === 'group' || v === 'degree') {
@@ -888,29 +1069,6 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
         continue;
       }
 
-      if (firstToken === 'sort') {
-        const vLower = restValue.toLowerCase();
-        if (vLower === 'time' || vLower === 'group') {
-          result.timelineSort = vLower;
-        } else if (vLower === 'tag' || vLower.startsWith('tag:')) {
-          result.timelineSort = 'tag';
-          if (vLower.startsWith('tag:')) {
-            const groupRef = restValue.substring(4).trim();
-            if (groupRef) {
-              result.timelineDefaultSwimlaneTG = groupRef;
-            }
-          }
-        }
-        continue;
-      }
-
-      if (firstToken === 'swimlanes') {
-        const v = restValue.toLowerCase();
-        if (v === 'on') result.timelineSwimlanes = true;
-        else if (v === 'off') result.timelineSwimlanes = false;
-        continue;
-      }
-
       if (firstToken === 'rotate') {
         const v = restValue.toLowerCase();
         if (v === 'none' || v === 'mixed' || v === 'angled') {
@@ -951,23 +1109,6 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
       // Check for color annotation in raw key: "Label(color)"
       const colorMatch = rawKey.match(/^(.+?)\(([^)]+)\)\s*$/);
 
-      if (key === 'chart') {
-        const value = line
-          .substring(colonIndex + 1)
-          .trim()
-          .toLowerCase();
-        if (VALID_D3_TYPES.has(value)) {
-          result.type = value as ParsedVisualization['type'];
-        } else {
-          const validD3Types = [...VALID_D3_TYPES];
-          let msg = `Unsupported chart type: ${value}. Supported types: ${validD3Types.join(', ')}`;
-          const hint = suggest(value, validD3Types);
-          if (hint) msg += `. ${hint}`;
-          return fail(lineNumber, msg);
-        }
-        continue;
-      }
-
       if (key === 'title') {
         result.title = line.substring(colonIndex + 1).trim();
         result.titleLineNumber = lineNumber;
@@ -977,23 +1118,6 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
         continue;
       }
 
-      if (key === 'orientation' || key === 'direction') {
-        // Only arc and timeline support orientation
-        if (result.type === 'arc' || result.type === 'timeline') {
-          const raw = line.substring(colonIndex + 1).trim();
-          // Accept horizontal/vertical directly, or LR/TB via normalizeDirection
-          const vLower = raw.toLowerCase();
-          if (vLower === 'horizontal' || vLower === 'vertical') {
-            result.orientation = vLower;
-          } else {
-            const dir = normalizeDirection(raw);
-            if (dir === 'LR') result.orientation = 'horizontal';
-            else if (dir === 'TB') result.orientation = 'vertical';
-          }
-        }
-        continue;
-      }
-
       if (key === 'order') {
         const v = line
           .substring(colonIndex + 1)
@@ -1005,39 +1129,6 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
         continue;
       }
 
-      if (key === 'sort') {
-        const v = line
-          .substring(colonIndex + 1)
-          .trim();
-        const vLower = v.toLowerCase();
-        if (vLower === 'time' || vLower === 'group') {
-          result.timelineSort = vLower;
-        } else if (vLower === 'tag' || vLower.startsWith('tag:')) {
-          result.timelineSort = 'tag';
-          if (vLower.startsWith('tag:')) {
-            // Extract group name (preserving original case for display)
-            const groupRef = v.substring(4).trim();
-            if (groupRef) {
-              result.timelineDefaultSwimlaneTG = groupRef;
-            }
-          }
-        }
-        continue;
-      }
-
-      if (key === 'swimlanes') {
-        const v = line
-          .substring(colonIndex + 1)
-          .trim()
-          .toLowerCase();
-        if (v === 'on') {
-          result.timelineSwimlanes = true;
-        } else if (v === 'off') {
-          result.timelineSwimlanes = false;
-        }
-        continue;
-      }
-
       if (key === 'rotate') {
         const v = line
           .substring(colonIndex + 1)
@@ -1092,22 +1183,16 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
       }
 
       if (allNumeric && numericValues.length > 0) {
-        // For wordcloud, single numeric value = word weight
-        if (result.type === 'wordcloud' && numericValues.length === 1) {
-          result.words.push({
-            text: labelPart,
-            weight: numericValues[0],
-            lineNumber,
-          });
-        } else {
+        // Wordcloud does not use colon data format — skip to freeform handling
+        if (result.type !== 'wordcloud') {
           result.data.push({
             label: labelPart,
             values: numericValues,
             color: colorPart,
             lineNumber,
           });
+          continue;
         }
-        continue;
       }
     }
 
@@ -1119,9 +1204,14 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
       } else if (colonIndex === -1) {
         // Try "word weight" or "multi-word-label weight" space-separated format
         const lastSpace = line.lastIndexOf(' ');
-        const maybeWeight = lastSpace >= 0 ? parseFloat(line.substring(lastSpace + 1)) : NaN;
+        const maybeWeight =
+          lastSpace >= 0 ? parseFloat(line.substring(lastSpace + 1)) : NaN;
         if (lastSpace >= 0 && !isNaN(maybeWeight) && maybeWeight > 0) {
-          result.words.push({ text: line.substring(0, lastSpace).trim(), weight: maybeWeight, lineNumber });
+          result.words.push({
+            text: line.substring(0, lastSpace).trim(),
+            weight: maybeWeight,
+            lineNumber,
+          });
         } else {
           freeformLines.push(line);
         }
@@ -1148,13 +1238,23 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
         continue;
       }
     }
+
+    // Catch-all: nothing matched this line
+    // Skip on first line — chart type suggestion is handled post-loop
+    if (firstLineParsed) {
+      warn(lineNumber, `Unexpected line: '${line}'.`);
+    }
   }
 
   // Validation
   if (!result.type) {
     const validD3Types = [...VALID_D3_TYPES];
-    const firstNonEmpty = lines.find(l => l.trim() && !l.trim().startsWith('//'))?.trim() ?? '';
-    const hint = suggest(firstNonEmpty.split(/\s/)[0].toLowerCase(), validD3Types);
+    const firstNonEmpty =
+      lines.find((l) => l.trim() && !l.trim().startsWith('//'))?.trim() ?? '';
+    const hint = suggest(
+      firstNonEmpty.split(/\s/)[0].toLowerCase(),
+      validD3Types
+    );
     let msg = `Unsupported chart type: "${firstNonEmpty.split(/\s/)[0]}". Supported types: ${validD3Types.join(', ')}`;
     if (hint) msg += `. ${hint}`;
     return fail(1, msg);
@@ -1171,7 +1271,10 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
       result.words = tokenizeFreeformText(freeformLines.join(' '));
     }
     if (result.words.length === 0) {
-      warn(1, 'No words found. Add words as "word: weight", one per line, or paste freeform text');
+      warn(
+        1,
+        'No words found. Add words as "word weight" (space-separated), one per line, or paste freeform text'
+      );
     }
     // Apply max word limit (words are already sorted by weight desc for freeform)
     if (
@@ -1188,12 +1291,18 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
 
   if (result.type === 'arc') {
     if (result.links.length === 0) {
-      warn(1, 'No links found. Add links as "Source -> Target: weight" (e.g., "Alice -> Bob: 5")');
+      warn(
+        1,
+        'No links found. Add links as "Source -> Target weight" (e.g., "Alice -> Bob 5")'
+      );
     }
     // Validate arc ordering vs groups
     if (result.arcNodeGroups.length > 0) {
       if (result.arcOrder === 'name' || result.arcOrder === 'degree') {
-        warn(1, `Cannot use "order: ${result.arcOrder}" with [Group] headers. Use "order: group" or remove group headers.`);
+        warn(
+          1,
+          `Cannot use "order ${result.arcOrder}" with [Group] headers. Use "order group" or remove group headers.`
+        );
         result.arcOrder = 'group';
       }
       if (result.arcOrder === 'appearance') {
@@ -1205,15 +1314,19 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
 
   if (result.type === 'timeline') {
     if (result.timelineEvents.length === 0) {
-      warn(1, 'No events found. Add events as "YYYY: description" or "YYYY->YYYY: description"');
+      warn(
+        1,
+        'No events found. Add events as "YYYY: description" or "YYYY->YYYY: description"'
+      );
     }
     // Validate tag values and inject defaults
     if (result.timelineTagGroups.length > 0) {
       validateTagValues(
         result.timelineEvents,
         result.timelineTagGroups,
-        (line, msg) => result.diagnostics.push(makeDgmoError(line, msg, 'warning')),
-        suggest,
+        (line, msg) =>
+          result.diagnostics.push(makeDgmoError(line, msg, 'warning')),
+        suggest
       );
       for (const group of result.timelineTagGroups) {
         if (!group.defaultValue) continue;
@@ -1226,35 +1339,15 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
       }
     }
 
-    // Resolve sort: tag default swimlane group
-    if (result.timelineSort === 'tag') {
-      if (result.timelineTagGroups.length === 0) {
-        warn(1, '"sort: tag" requires at least one tag group definition');
-        result.timelineSort = 'time';
-      } else if (result.timelineDefaultSwimlaneTG) {
-        // Resolve alias → full group name
-        const ref = result.timelineDefaultSwimlaneTG.toLowerCase();
-        const match = result.timelineTagGroups.find(
-          (g) => g.name.toLowerCase() === ref || g.alias?.toLowerCase() === ref
-        );
-        if (match) {
-          result.timelineDefaultSwimlaneTG = match.name;
-        } else {
-          warn(1, `"sort: tag:${result.timelineDefaultSwimlaneTG}" — no tag group matches "${result.timelineDefaultSwimlaneTG}"`);
-          result.timelineDefaultSwimlaneTG = result.timelineTagGroups[0].name;
-        }
-      } else {
-        // Default to first tag group
-        result.timelineDefaultSwimlaneTG = result.timelineTagGroups[0].name;
-      }
-    }
-
     return result;
   }
 
   if (result.type === 'venn') {
     if (result.vennSets.length < 2) {
-      return fail(1, 'At least 2 sets are required. Add set names (e.g., "Apples", "Oranges")');
+      return fail(
+        1,
+        'At least 2 sets are required. Add set names (e.g., "Apples", "Oranges")'
+      );
     }
     if (result.vennSets.length > 3) {
       return fail(1, 'Venn diagrams support 2–3 sets');
@@ -1268,7 +1361,9 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
       if (s.alias) aliasLower.set(s.alias.toLowerCase(), s.name);
     }
     const resolveSetRef = (ref: string): string | null =>
-      setNameLower.get(ref.toLowerCase()) ?? aliasLower.get(ref.toLowerCase()) ?? null;
+      setNameLower.get(ref.toLowerCase()) ??
+      aliasLower.get(ref.toLowerCase()) ??
+      null;
 
     // Resolve intersection set references; drop invalid ones with a diagnostic
     const validOverlaps: VennOverlap[] = [];
@@ -1278,8 +1373,16 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
       for (const ref of ov.sets) {
         const resolved = resolveSetRef(ref);
         if (!resolved) {
-          result.diagnostics.push(makeDgmoError(ov.lineNumber, `Intersection references unknown set or alias "${ref}"`));
-          if (!result.error) result.error = formatDgmoError(result.diagnostics[result.diagnostics.length - 1]);
+          result.diagnostics.push(
+            makeDgmoError(
+              ov.lineNumber,
+              `Intersection references unknown set or alias "${ref}"`
+            )
+          );
+          if (!result.error)
+            result.error = formatDgmoError(
+              result.diagnostics[result.diagnostics.length - 1]
+            );
           valid = false;
           break;
         }
@@ -1293,24 +1396,36 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
 
   if (result.type === 'quadrant') {
     if (result.quadrantPoints.length === 0) {
-      warn(1, 'No data points found. Add points as "Label: x, y" (e.g., "Item A: 0.5, 0.7")');
+      warn(
+        1,
+        'No data points found. Add points as "Label x, y" (e.g., "Item A 0.5, 0.7")'
+      );
     }
     return result;
   }
 
   // Slope chart validation
   if (result.periods.length < 2) {
-    return fail(1, 'Missing or invalid periods line. Provide at least 2 comma-separated period labels (e.g., "2020, 2024")');
+    return fail(
+      1,
+      'Missing or invalid periods line. Provide at least 2 comma-separated period labels (e.g., "2020, 2024")'
+    );
   }
 
   if (result.data.length === 0) {
-    warn(1, 'No data lines found. Add data as "Label: value1, value2" (e.g., "Apple: 25, 35")');
+    warn(
+      1,
+      'No data lines found. Add data as "Label: value1, value2" (e.g., "Apple: 25, 35")'
+    );
   }
 
   // Validate value counts match period count — warn and skip mismatched items
   for (const item of result.data) {
     if (item.values.length !== result.periods.length) {
-      warn(item.lineNumber, `Data item "${item.label}" has ${item.values.length} value(s) but ${result.periods.length} period(s) are defined`);
+      warn(
+        item.lineNumber,
+        `Data item "${item.label}" has ${item.values.length} value(s) but ${result.periods.length} period(s) are defined`
+      );
     }
   }
   result.data = result.data.filter(
@@ -1551,7 +1666,14 @@ export function renderSlopeChart(
   const tooltip = createTooltip(container, palette, isDark);
 
   // Title
-  renderChartTitle(svg, title, parsed.titleLineNumber, width, textColor, onClickItem);
+  renderChartTitle(
+    svg,
+    title,
+    parsed.titleLineNumber,
+    width,
+    textColor,
+    onClickItem
+  );
 
   // Period column headers
   for (const period of periods) {
@@ -1620,13 +1742,23 @@ export function renderSlopeChart(
       wrappedLines = lines;
     }
     const lineHeight = SLOPE_LABEL_FONT_SIZE * 1.2;
-    const labelHeight = labelLineCount === 1
-      ? SLOPE_LABEL_FONT_SIZE
-      : labelLineCount * lineHeight;
+    const labelHeight =
+      labelLineCount === 1
+        ? SLOPE_LABEL_FONT_SIZE
+        : labelLineCount * lineHeight;
 
     return {
-      item, idx, color, firstVal, lastVal, tipHtml,
-      lastX, labelText, maxChars, wrappedLines, labelHeight,
+      item,
+      idx,
+      color,
+      firstVal,
+      lastVal,
+      tipHtml,
+      lastX,
+      labelText,
+      maxChars,
+      wrappedLines,
+      labelHeight,
     };
   });
 
@@ -1638,7 +1770,10 @@ export function renderSlopeChart(
       naturalY: yScale(item.values[pi]),
       height: leftLabelHeight,
     }));
-    leftLabelCollisions.set(pi, resolveVerticalCollisions(entries, 4, innerHeight));
+    leftLabelCollisions.set(
+      pi,
+      resolveVerticalCollisions(entries, 4, innerHeight)
+    );
   }
 
   // --- Resolve right-side label collisions ---
@@ -1646,7 +1781,11 @@ export function renderSlopeChart(
     naturalY: yScale(si.lastVal),
     height: Math.max(si.labelHeight, SLOPE_LABEL_FONT_SIZE * 1.4),
   }));
-  const rightAdjustedY = resolveVerticalCollisions(rightEntries, 4, innerHeight);
+  const rightAdjustedY = resolveVerticalCollisions(
+    rightEntries,
+    4,
+    innerHeight
+  );
 
   // Render each data series
   data.forEach((item, idx) => {
@@ -1660,7 +1799,8 @@ export function renderSlopeChart(
       .attr('data-line-number', String(item.lineNumber));
 
     // Line
-    seriesG.append('path')
+    seriesG
+      .append('path')
       .datum(item.values)
       .attr('fill', 'none')
       .attr('stroke', color)
@@ -1668,7 +1808,8 @@ export function renderSlopeChart(
       .attr('d', lineGen);
 
     // Invisible wider path for easier hover targeting
-    seriesG.append('path')
+    seriesG
+      .append('path')
       .datum(item.values)
       .attr('fill', 'none')
       .attr('stroke', 'transparent')
@@ -1692,7 +1833,8 @@ export function renderSlopeChart(
       const y = yScale(val);
 
       // Point circle
-      seriesG.append('circle')
+      seriesG
+        .append('circle')
         .attr('cx', x)
         .attr('cy', y)
         .attr('r', 4)
@@ -1716,7 +1858,8 @@ export function renderSlopeChart(
       const isLast = i === periods.length - 1;
       if (!isLast) {
         const adjustedY = leftLabelCollisions.get(i)![idx];
-        seriesG.append('text')
+        seriesG
+          .append('text')
           .attr('x', isFirst ? x - 10 : x)
           .attr('y', adjustedY)
           .attr('dy', '0.35em')
@@ -1948,7 +2091,14 @@ export function renderArcDiagram(
     .attr('transform', `translate(${margin.left},${margin.top})`);
 
   // Title
-  renderChartTitle(svg, title, parsed.titleLineNumber, width, textColor, onClickItem);
+  renderChartTitle(
+    svg,
+    title,
+    parsed.titleLineNumber,
+    width,
+    textColor,
+    onClickItem
+  );
 
   // Build adjacency map for hover interactions
   const neighbors = new Map<string, Set<string>>();
@@ -2125,13 +2275,18 @@ export function renderArcDiagram(
       const y = yScale(node)!;
       const nodeColor = nodeColorMap.get(node) ?? textColor;
       // Find the first link involving this node (for line number and click target)
-      const nodeLink = links.find((l) => l.source === node || l.target === node);
+      const nodeLink = links.find(
+        (l) => l.source === node || l.target === node
+      );
 
       const nodeG = g
         .append('g')
         .attr('class', 'arc-node')
         .attr('data-node', node)
-        .attr('data-line-number', nodeLink?.lineNumber ? String(nodeLink.lineNumber) : null)
+        .attr(
+          'data-line-number',
+          nodeLink?.lineNumber ? String(nodeLink.lineNumber) : null
+        )
         .style('cursor', 'pointer')
         .on('mouseenter', () => handleMouseEnter(node))
         .on('mouseleave', handleMouseLeave)
@@ -2260,13 +2415,18 @@ export function renderArcDiagram(
       const x = xScale(node)!;
       const nodeColor = nodeColorMap.get(node) ?? textColor;
       // Find the first link involving this node (for line number and click target)
-      const nodeLink = links.find((l) => l.source === node || l.target === node);
+      const nodeLink = links.find(
+        (l) => l.source === node || l.target === node
+      );
 
       const nodeG = g
         .append('g')
         .attr('class', 'arc-node')
         .attr('data-node', node)
-        .attr('data-line-number', nodeLink?.lineNumber ? String(nodeLink.lineNumber) : null)
+        .attr(
+          'data-line-number',
+          nodeLink?.lineNumber ? String(nodeLink.lineNumber) : null
+        )
         .style('cursor', 'pointer')
         .on('mouseenter', () => handleMouseEnter(node))
         .on('mouseleave', handleMouseLeave)
@@ -2570,6 +2730,26 @@ export function formatDateLabel(dateStr: string): string {
   return `${month} ${day}, ${year}${timeSuffix}`;
 }
 
+/**
+ * Formats a boundary label for the time axis.
+ * When both boundaries fall on the same calendar day and have a time component,
+ * returns just the time (e.g. "12:15") to avoid collisions with regular ticks.
+ * Otherwise falls back to the full formatDateLabel.
+ */
+function formatBoundaryLabel(dateStr: string, otherDateStr: string): string {
+  const spaceIdx = dateStr.indexOf(' ');
+  const otherSpaceIdx = otherDateStr.indexOf(' ');
+  // Both must have time components and share the same date portion
+  if (spaceIdx !== -1 && otherSpaceIdx !== -1) {
+    const datePart = dateStr.slice(0, spaceIdx);
+    const otherDatePart = otherDateStr.slice(0, otherSpaceIdx);
+    if (datePart === otherDatePart) {
+      return dateStr.slice(spaceIdx + 1); // just "HH:MM"
+    }
+  }
+  return formatDateLabel(dateStr);
+}
+
 /**
  * Computes adaptive tick marks for a timeline scale.
  * - Multi-year spans → year ticks
@@ -2641,7 +2821,11 @@ export function computeTimeTicks(
     // Iterate from the start hour boundary
     const startDate = fractionalYearToDate(domainMin);
     // Round down to nearest step boundary
-    startDate.setMinutes(Math.floor(startDate.getMinutes() / stepMin) * stepMin, 0, 0);
+    startDate.setMinutes(
+      Math.floor(startDate.getMinutes() / stepMin) * stepMin,
+      0,
+      0
+    );
 
     while (true) {
       const val = dateToFractionalYear(startDate);
@@ -2662,19 +2846,31 @@ export function computeTimeTicks(
     else if (spanHours > 24) stepHour = 3;
     else if (spanHours > 12) stepHour = 2;
 
+    // For single-day spans, just show HH:MM without the date prefix
+    const singleDay = spanHours <= 24;
+
     const startDate = fractionalYearToDate(domainMin);
     // Round down to nearest step boundary
-    startDate.setHours(Math.floor(startDate.getHours() / stepHour) * stepHour, 0, 0, 0);
+    startDate.setHours(
+      Math.floor(startDate.getHours() / stepHour) * stepHour,
+      0,
+      0,
+      0
+    );
 
     while (true) {
       const val = dateToFractionalYear(startDate);
       if (val > domainMax) break;
       if (val >= domainMin) {
-        const mon = MONTH_ABBR[startDate.getMonth()];
-        const d = startDate.getDate();
         const hh = String(startDate.getHours()).padStart(2, '0');
         const mm = String(startDate.getMinutes()).padStart(2, '0');
-        ticks.push({ pos: scale(val), label: `${mon} ${d} ${hh}:${mm}` });
+        if (singleDay) {
+          ticks.push({ pos: scale(val), label: `${hh}:${mm}` });
+        } else {
+          const mon = MONTH_ABBR[startDate.getMonth()];
+          const d = startDate.getDate();
+          ticks.push({ pos: scale(val), label: `${mon} ${d} ${hh}:${mm}` });
+        }
       }
       startDate.setHours(startDate.getHours() + stepHour);
     }
@@ -3073,7 +3269,10 @@ export function renderTimeline(
   exportDims?: D3ExportDimensions,
   activeTagGroup?: string | null,
   swimlaneTagGroup?: string | null,
-  onTagStateChange?: (activeTagGroup: string | null, swimlaneTagGroup: string | null) => void,
+  onTagStateChange?: (
+    activeTagGroup: string | null,
+    swimlaneTagGroup: string | null
+  ) => void,
   viewMode?: boolean
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
@@ -3092,7 +3291,11 @@ export function renderTimeline(
   if (timelineEvents.length === 0) return;
 
   // When sort: tag is set and no explicit swimlane param, use the default
-  if (swimlaneTagGroup == null && timelineSort === 'tag' && parsed.timelineDefaultSwimlaneTG) {
+  if (
+    swimlaneTagGroup == null &&
+    timelineSort === 'tag' &&
+    parsed.timelineDefaultSwimlaneTG
+  ) {
     swimlaneTagGroup = parsed.timelineDefaultSwimlaneTG;
   }
 
@@ -3144,12 +3347,8 @@ export function renderTimeline(
 
       // Order lanes by earliest event date
       const laneEntries = [...buckets.entries()].sort((a, b) => {
-        const aMin = Math.min(
-          ...a[1].map((e) => parseTimelineDate(e.date))
-        );
-        const bMin = Math.min(
-          ...b[1].map((e) => parseTimelineDate(e.date))
-        );
+        const aMin = Math.min(...a[1].map((e) => parseTimelineDate(e.date)));
+        const bMin = Math.min(...b[1].map((e) => parseTimelineDate(e.date)));
         return aMin - bMin;
       });
 
@@ -3171,7 +3370,11 @@ export function renderTimeline(
   function eventColor(ev: TimelineEvent): string {
     // Tag color takes priority when a tag group is active
     if (effectiveColorTG) {
-      const tagColor = resolveTagColor(ev.metadata, parsed.timelineTagGroups, effectiveColorTG);
+      const tagColor = resolveTagColor(
+        ev.metadata,
+        parsed.timelineTagGroups,
+        effectiveColorTG
+      );
       if (tagColor) return tagColor;
     }
     if (ev.group && groupColorMap.has(ev.group)) {
@@ -3282,16 +3485,23 @@ export function renderTimeline(
       el.attr('opacity', val === tagValue ? 1 : FADE_OPACITY);
     });
     g.selectAll<SVGGElement, unknown>('.tl-legend-item, .tl-lane-header').attr(
-      'opacity', FADE_OPACITY
+      'opacity',
+      FADE_OPACITY
+    );
+    g.selectAll<SVGGElement, unknown>('.tl-marker').attr(
+      'opacity',
+      FADE_OPACITY
     );
-    g.selectAll<SVGGElement, unknown>('.tl-marker').attr('opacity', FADE_OPACITY);
     // Fade legend entry dots/labels that don't match (keep group pill visible)
     g.selectAll<SVGGElement, unknown>('.tl-tag-legend-entry').each(function () {
       const el = d3Selection.select(this);
       const entryValue = el.attr('data-legend-entry');
       if (entryValue === '__group__') return; // keep group pill at full opacity
       const entryGroup = el.attr('data-tag-group');
-      el.attr('opacity', entryGroup === tagKey && entryValue === tagValue ? 1 : FADE_OPACITY);
+      el.attr(
+        'opacity',
+        entryGroup === tagKey && entryValue === tagValue ? 1 : FADE_OPACITY
+      );
     });
   }
 
@@ -3312,7 +3522,8 @@ export function renderTimeline(
   // VERTICAL orientation (time flows top→bottom)
   // ================================================================
   if (isVertical) {
-    const useGroupedVertical = tagLanes != null ||
+    const useGroupedVertical =
+      tagLanes != null ||
       (timelineSort === 'group' && timelineGroups.length > 0);
     if (useGroupedVertical) {
       // === GROUPED: one column/lane per group, vertical ===
@@ -3371,7 +3582,14 @@ export function renderTimeline(
         .append('g')
         .attr('transform', `translate(${margin.left},${margin.top})`);
 
-      renderChartTitle(svg, title, parsed.titleLineNumber, width, textColor, onClickItem);
+      renderChartTitle(
+        svg,
+        title,
+        parsed.titleLineNumber,
+        width,
+        textColor,
+        onClickItem
+      );
 
       renderEras(
         g,
@@ -3409,8 +3627,8 @@ export function renderTimeline(
           textColor,
           minDate,
           maxDate,
-          formatDateLabel(earliestStartDateStr),
-          formatDateLabel(latestEndDateStr)
+          formatBoundaryLabel(earliestStartDateStr, latestEndDateStr),
+          formatBoundaryLabel(latestEndDateStr, earliestStartDateStr)
         );
       }
 
@@ -3621,7 +3839,14 @@ export function renderTimeline(
         .append('g')
         .attr('transform', `translate(${margin.left},${margin.top})`);
 
-      renderChartTitle(svg, title, parsed.titleLineNumber, width, textColor, onClickItem);
+      renderChartTitle(
+        svg,
+        title,
+        parsed.titleLineNumber,
+        width,
+        textColor,
+        onClickItem
+      );
 
       renderEras(
         g,
@@ -3659,8 +3884,8 @@ export function renderTimeline(
           textColor,
           minDate,
           maxDate,
-          formatDateLabel(earliestStartDateStr),
-          formatDateLabel(latestEndDateStr)
+          formatBoundaryLabel(earliestStartDateStr, latestEndDateStr),
+          formatBoundaryLabel(latestEndDateStr, earliestStartDateStr)
         );
       }
 
@@ -3747,8 +3972,7 @@ export function renderTimeline(
           if (ev.uncertain) {
             const gradientId = `uncertain-v-${ev.lineNumber}`;
             const strokeGradientId = `uncertain-v-s-${ev.lineNumber}`;
-            const defs =
-              svg.select('defs').node() || svg.append('defs').node();
+            const defs = svg.select('defs').node() || svg.append('defs').node();
             const defsEl = d3Selection.select(defs as Element);
             defsEl
               .append('linearGradient')
@@ -3862,8 +4086,8 @@ export function renderTimeline(
   const BAR_H = 22; // range bar thickness (tall enough for text inside)
   const GROUP_GAP = 12; // vertical gap between group swim-lanes
 
-  const useGroupedHorizontal = tagLanes != null ||
-    (timelineSort === 'group' && timelineGroups.length > 0);
+  const useGroupedHorizontal =
+    tagLanes != null || (timelineSort === 'group' && timelineGroups.length > 0);
   if (useGroupedHorizontal) {
     // === GROUPED: swim-lanes stacked vertically, events on own rows ===
     let lanes: Lane[];
@@ -3896,7 +4120,11 @@ export function renderTimeline(
     // Group-sorted doesn't need legend space (group names shown on left)
     const baseTopMargin = title ? 50 : 20;
     const margin = {
-      top: baseTopMargin + (timelineScale ? 40 : 0) + markerMargin + tagLegendReserve,
+      top:
+        baseTopMargin +
+        (timelineScale ? 40 : 0) +
+        markerMargin +
+        tagLegendReserve,
       right: 40,
       bottom: 40 + scaleMargin,
       left: dynamicLeftMargin,
@@ -3922,7 +4150,14 @@ export function renderTimeline(
       .append('g')
       .attr('transform', `translate(${margin.left},${margin.top})`);
 
-    renderChartTitle(svg, title, parsed.titleLineNumber, width, textColor, onClickItem);
+    renderChartTitle(
+      svg,
+      title,
+      parsed.titleLineNumber,
+      width,
+      textColor,
+      onClickItem
+    );
 
     renderEras(
       g,
@@ -3960,8 +4195,8 @@ export function renderTimeline(
         textColor,
         minDate,
         maxDate,
-        formatDateLabel(earliestStartDateStr),
-        formatDateLabel(latestEndDateStr)
+        formatBoundaryLabel(earliestStartDateStr, latestEndDateStr),
+        formatBoundaryLabel(latestEndDateStr, earliestStartDateStr)
       );
     }
 
@@ -4223,7 +4458,14 @@ export function renderTimeline(
       .append('g')
       .attr('transform', `translate(${margin.left},${margin.top})`);
 
-    renderChartTitle(svg, title, parsed.titleLineNumber, width, textColor, onClickItem);
+    renderChartTitle(
+      svg,
+      title,
+      parsed.titleLineNumber,
+      width,
+      textColor,
+      onClickItem
+    );
 
     renderEras(
       g,
@@ -4261,8 +4503,8 @@ export function renderTimeline(
         textColor,
         minDate,
         maxDate,
-        formatDateLabel(earliestStartDateStr),
-        formatDateLabel(latestEndDateStr)
+        formatBoundaryLabel(earliestStartDateStr, latestEndDateStr),
+        formatBoundaryLabel(latestEndDateStr, earliestStartDateStr)
       );
     }
 
@@ -4501,13 +4743,17 @@ export function renderTimeline(
         expandedWidth: number;
       };
       const legendGroups: LegendGroup[] = parsed.timelineTagGroups.map((g) => {
-        const pillW = measureLegendText(g.name, LG_PILL_FONT_SIZE) + LG_PILL_PAD;
+        const pillW =
+          measureLegendText(g.name, LG_PILL_FONT_SIZE) + LG_PILL_PAD;
         // Expanded: pill + icon (unless viewMode) + entries
         const iconSpace = viewMode ? 8 : LG_ICON_W + 4;
         let entryX = LG_CAPSULE_PAD + pillW + iconSpace;
         for (const entry of g.entries) {
           const textX = entryX + LG_DOT_R * 2 + LG_ENTRY_DOT_GAP;
-          entryX = textX + measureLegendText(entry.value, LG_ENTRY_FONT_SIZE) + LG_ENTRY_TRAIL;
+          entryX =
+            textX +
+            measureLegendText(entry.value, LG_ENTRY_FONT_SIZE) +
+            LG_ENTRY_TRAIL;
         }
         return {
           group: g,
@@ -4527,7 +4773,8 @@ export function renderTimeline(
         y: number,
         isSwimActive: boolean
       ) {
-        const iconG = parent.append('g')
+        const iconG = parent
+          .append('g')
           .attr('class', 'tl-swimlane-icon')
           .attr('transform', `translate(${x}, ${y})`)
           .style('cursor', 'pointer');
@@ -4540,7 +4787,8 @@ export function renderTimeline(
           { y: 8, w: 6 },
         ];
         for (const bar of bars) {
-          iconG.append('rect')
+          iconG
+            .append('rect')
             .attr('x', 0)
             .attr('y', bar.y)
             .attr('width', bar.w)
@@ -4555,8 +4803,16 @@ export function renderTimeline(
       /** Full re-render with updated swimlane state */
       function relayout() {
         renderTimeline(
-          container, parsed, palette, isDark, onClickItem, exportDims,
-          currentActiveGroup, currentSwimlaneGroup, onTagStateChange, viewMode
+          container,
+          parsed,
+          palette,
+          isDark,
+          onClickItem,
+          exportDims,
+          currentActiveGroup,
+          currentSwimlaneGroup,
+          onTagStateChange,
+          viewMode
         );
       }
 
@@ -4566,7 +4822,8 @@ export function renderTimeline(
         mainSvg.selectAll('.tl-tag-legend-container').remove();
 
         // Effective color source: explicit color group > swimlane group
-        const effectiveColorKey = (currentActiveGroup ?? currentSwimlaneGroup)?.toLowerCase() ?? null;
+        const effectiveColorKey =
+          (currentActiveGroup ?? currentSwimlaneGroup)?.toLowerCase() ?? null;
 
         // In view mode, only show the color-driving tag group (expanded, non-interactive).
         // Skip the swimlane group if it's separate from the color group (lane headers already label it).
@@ -4581,32 +4838,43 @@ export function renderTimeline(
         if (visibleGroups.length === 0) return;
 
         // Compute total width and center horizontally in SVG
-        const totalW = visibleGroups.reduce((s, lg) => {
-          const isActive = viewMode ||
-            (currentActiveGroup != null &&
-              lg.group.name.toLowerCase() === currentActiveGroup.toLowerCase());
-          return s + (isActive ? lg.expandedWidth : lg.minifiedWidth);
-        }, 0) + (visibleGroups.length - 1) * LG_GROUP_GAP;
+        const totalW =
+          visibleGroups.reduce((s, lg) => {
+            const isActive =
+              viewMode ||
+              (currentActiveGroup != null &&
+                lg.group.name.toLowerCase() ===
+                  currentActiveGroup.toLowerCase());
+            return s + (isActive ? lg.expandedWidth : lg.minifiedWidth);
+          }, 0) +
+          (visibleGroups.length - 1) * LG_GROUP_GAP;
 
         let cx = (width - totalW) / 2;
 
         // Legend container for data-legend-active attribute
-        const legendContainer = mainSvg.append('g')
+        const legendContainer = mainSvg
+          .append('g')
           .attr('class', 'tl-tag-legend-container');
         if (currentActiveGroup) {
-          legendContainer.attr('data-legend-active', currentActiveGroup.toLowerCase());
+          legendContainer.attr(
+            'data-legend-active',
+            currentActiveGroup.toLowerCase()
+          );
         }
 
         for (const lg of visibleGroups) {
           const groupKey = lg.group.name.toLowerCase();
-          const isActive = viewMode ||
+          const isActive =
+            viewMode ||
             (currentActiveGroup != null &&
               currentActiveGroup.toLowerCase() === groupKey);
-          const isSwimActive = currentSwimlaneGroup != null &&
+          const isSwimActive =
+            currentSwimlaneGroup != null &&
             currentSwimlaneGroup.toLowerCase() === groupKey;
 
           const pillLabel = lg.group.name;
-          const pillWidth = measureLegendText(pillLabel, LG_PILL_FONT_SIZE) + LG_PILL_PAD;
+          const pillWidth =
+            measureLegendText(pillLabel, LG_PILL_FONT_SIZE) + LG_PILL_PAD;
 
           const gEl = legendContainer
             .append('g')
@@ -4617,19 +4885,19 @@ export function renderTimeline(
             .attr('data-legend-entry', '__group__');
 
           if (!viewMode) {
-            gEl
-              .style('cursor', 'pointer')
-              .on('click', () => {
-                currentActiveGroup = currentActiveGroup === groupKey ? null : groupKey;
-                drawLegend();
-                recolorEvents();
-                onTagStateChange?.(currentActiveGroup, currentSwimlaneGroup);
-              });
+            gEl.style('cursor', 'pointer').on('click', () => {
+              currentActiveGroup =
+                currentActiveGroup === groupKey ? null : groupKey;
+              drawLegend();
+              recolorEvents();
+              onTagStateChange?.(currentActiveGroup, currentSwimlaneGroup);
+            });
           }
 
           // Outer capsule background (active only)
           if (isActive) {
-            gEl.append('rect')
+            gEl
+              .append('rect')
               .attr('width', lg.expandedWidth)
               .attr('height', LG_HEIGHT)
               .attr('rx', LG_HEIGHT / 2)
@@ -4641,7 +4909,8 @@ export function renderTimeline(
           const pillH = LG_HEIGHT - (isActive ? LG_CAPSULE_PAD * 2 : 0);
 
           // Pill background
-          gEl.append('rect')
+          gEl
+            .append('rect')
             .attr('x', pillXOff)
             .attr('y', pillYOff)
             .attr('width', pillWidth)
@@ -4651,7 +4920,8 @@ export function renderTimeline(
 
           // Active pill border
           if (isActive) {
-            gEl.append('rect')
+            gEl
+              .append('rect')
               .attr('x', pillXOff)
               .attr('y', pillYOff)
               .attr('width', pillWidth)
@@ -4663,7 +4933,8 @@ export function renderTimeline(
           }
 
           // Pill text
-          gEl.append('text')
+          gEl
+            .append('text')
             .attr('x', pillXOff + pillWidth / 2)
             .attr('y', LG_HEIGHT / 2 + LG_PILL_FONT_SIZE / 2 - 2)
             .attr('font-size', LG_PILL_FONT_SIZE)
@@ -4685,7 +4956,8 @@ export function renderTimeline(
                 .attr('data-swimlane-toggle', groupKey)
                 .on('click', (event: MouseEvent) => {
                   event.stopPropagation();
-                  currentSwimlaneGroup = currentSwimlaneGroup === groupKey ? null : groupKey;
+                  currentSwimlaneGroup =
+                    currentSwimlaneGroup === groupKey ? null : groupKey;
                   onTagStateChange?.(currentActiveGroup, currentSwimlaneGroup);
                   relayout();
                 });
@@ -4698,7 +4970,8 @@ export function renderTimeline(
               const tagKey = lg.group.name.toLowerCase();
               const tagVal = entry.value.toLowerCase();
 
-              const entryG = gEl.append('g')
+              const entryG = gEl
+                .append('g')
                 .attr('class', 'tl-tag-legend-entry')
                 .attr('data-tag-group', tagKey)
                 .attr('data-legend-entry', tagVal);
@@ -4709,18 +4982,24 @@ export function renderTimeline(
                   .on('mouseenter', (event: MouseEvent) => {
                     event.stopPropagation();
                     fadeToTagValue(mainG, tagKey, tagVal);
-                    mainSvg.selectAll<SVGGElement, unknown>('.tl-tag-legend-entry').each(function () {
-                      const el = d3Selection.select(this);
-                      const ev = el.attr('data-legend-entry');
-                      if (ev === '__group__') return;
-                      const eg = el.attr('data-tag-group');
-                      el.attr('opacity', eg === tagKey && ev === tagVal ? 1 : FADE_OPACITY);
-                    });
+                    mainSvg
+                      .selectAll<SVGGElement, unknown>('.tl-tag-legend-entry')
+                      .each(function () {
+                        const el = d3Selection.select(this);
+                        const ev = el.attr('data-legend-entry');
+                        if (ev === '__group__') return;
+                        const eg = el.attr('data-tag-group');
+                        el.attr(
+                          'opacity',
+                          eg === tagKey && ev === tagVal ? 1 : FADE_OPACITY
+                        );
+                      });
                   })
                   .on('mouseleave', (event: MouseEvent) => {
                     event.stopPropagation();
                     fadeReset(mainG);
-                    mainSvg.selectAll<SVGGElement, unknown>('.tl-tag-legend-entry')
+                    mainSvg
+                      .selectAll<SVGGElement, unknown>('.tl-tag-legend-entry')
                       .attr('opacity', 1);
                   })
                   .on('click', (event: MouseEvent) => {
@@ -4728,14 +5007,16 @@ export function renderTimeline(
                   });
               }
 
-              entryG.append('circle')
+              entryG
+                .append('circle')
                 .attr('cx', entryX + LG_DOT_R)
                 .attr('cy', LG_HEIGHT / 2)
                 .attr('r', LG_DOT_R)
                 .attr('fill', entry.color);
 
               const textX = entryX + LG_DOT_R * 2 + LG_ENTRY_DOT_GAP;
-              entryG.append('text')
+              entryG
+                .append('text')
                 .attr('x', textX)
                 .attr('y', LG_HEIGHT / 2 + LG_ENTRY_FONT_SIZE / 2 - 1)
                 .attr('font-size', LG_ENTRY_FONT_SIZE)
@@ -4743,7 +5024,10 @@ export function renderTimeline(
                 .attr('fill', palette.textMuted)
                 .text(entry.value);
 
-              entryX = textX + measureLegendText(entry.value, LG_ENTRY_FONT_SIZE) + LG_ENTRY_TRAIL;
+              entryX =
+                textX +
+                measureLegendText(entry.value, LG_ENTRY_FONT_SIZE) +
+                LG_ENTRY_TRAIL;
             }
           }
 
@@ -4768,16 +5052,27 @@ export function renderTimeline(
           let color: string;
           if (colorTG) {
             const tagColor = resolveTagColor(
-              ev.metadata, parsed.timelineTagGroups, colorTG
+              ev.metadata,
+              parsed.timelineTagGroups,
+              colorTG
             );
-            color = tagColor ?? (ev.group && groupColorMap.has(ev.group)
-              ? groupColorMap.get(ev.group)! : textColor);
+            color =
+              tagColor ??
+              (ev.group && groupColorMap.has(ev.group)
+                ? groupColorMap.get(ev.group)!
+                : textColor);
           } else {
-            color = ev.group && groupColorMap.has(ev.group)
-              ? groupColorMap.get(ev.group)! : textColor;
+            color =
+              ev.group && groupColorMap.has(ev.group)
+                ? groupColorMap.get(ev.group)!
+                : textColor;
           }
-          el.selectAll('rect').attr('fill', mix(color, bg, 30)).attr('stroke', color);
-          el.selectAll('circle:not(.tl-event-point-outline)').attr('fill', mix(color, bg, 30)).attr('stroke', color);
+          el.selectAll('rect')
+            .attr('fill', mix(color, bg, 30))
+            .attr('stroke', color);
+          el.selectAll('circle:not(.tl-event-point-outline)')
+            .attr('fill', mix(color, bg, 30))
+            .attr('stroke', color);
         });
       }
 
@@ -4834,7 +5129,14 @@ export function renderWordCloud(
 
   const rotateFn = getRotateFn(cloudOptions.rotate);
 
-  renderChartTitle(svg, title, parsed.titleLineNumber, width, textColor, onClickItem);
+  renderChartTitle(
+    svg,
+    title,
+    parsed.titleLineNumber,
+    width,
+    textColor,
+    onClickItem
+  );
 
   const g = svg
     .append('g')
@@ -5141,7 +5443,8 @@ export function renderVenn(
   const labelTextPad = 4;
 
   for (let i = 0; i < n; i++) {
-    const estimatedWidth = vennSets[i].name.length * 8.5 + stubLen + edgePad + labelTextPad;
+    const estimatedWidth =
+      vennSets[i].name.length * 8.5 + stubLen + edgePad + labelTextPad;
     const dx = rawCircles[i].x - clusterCx;
     const dy = rawCircles[i].y - clusterCy;
     if (Math.abs(dx) >= Math.abs(dy)) {
@@ -5168,13 +5471,27 @@ export function renderVenn(
   const scaledR = circles[0].r;
 
   // Suppress WebKit focus ring on interactive SVG elements
-  svg.append('style').text('circle:focus, circle:focus-visible { outline: none !important; }');
+  svg
+    .append('style')
+    .text('circle:focus, circle:focus-visible { outline: none !important; }');
 
   // Title
-  renderChartTitle(svg, title, parsed.titleLineNumber, width, textColor, onClickItem);
+  renderChartTitle(
+    svg,
+    title,
+    parsed.titleLineNumber,
+    width,
+    textColor,
+    onClickItem
+  );
 
   // ── Semi-transparent filled circles (non-interactive) ──
-  const circleEls: d3Selection.Selection<SVGCircleElement, unknown, null, undefined>[] = [];
+  const circleEls: d3Selection.Selection<
+    SVGCircleElement,
+    unknown,
+    null,
+    undefined
+  >[] = [];
   const circleGroup = svg.append('g');
   circles.forEach((c, i) => {
     const el = circleGroup
@@ -5201,10 +5518,13 @@ export function renderVenn(
 
   // Individual circle clipPaths
   circles.forEach((c, i) => {
-    defs.append('clipPath')
+    defs
+      .append('clipPath')
       .attr('id', `vcp-${i}`)
       .append('circle')
-      .attr('cx', c.x).attr('cy', c.y).attr('r', c.r);
+      .attr('cx', c.x)
+      .attr('cy', c.y)
+      .attr('r', c.r);
   });
 
   // All region index-sets: exclusive then intersection subsets
@@ -5216,57 +5536,79 @@ export function renderVenn(
   }
 
   const overlayGroup = svg.append('g').style('pointer-events', 'none');
-  const overlayEls = new Map<string, d3Selection.Selection<SVGRectElement, unknown, null, undefined>>();
+  const overlayEls = new Map<
+    string,
+    d3Selection.Selection<SVGRectElement, unknown, null, undefined>
+  >();
 
   for (const idxs of regionIdxSets) {
     const key = idxs.join('-');
-    const excluded = Array.from({ length: n }, (_, j) => j).filter(j => !idxs.includes(j));
+    const excluded = Array.from({ length: n }, (_, j) => j).filter(
+      (j) => !idxs.includes(j)
+    );
 
     // Build nested clipPath for intersection of all idxs
     let clipId = `vcp-${idxs[0]}`;
     for (let k = 1; k < idxs.length; k++) {
       const nestedId = `vcp-n-${idxs.slice(0, k + 1).join('-')}`;
       const ci = idxs[k];
-      defs.append('clipPath')
+      defs
+        .append('clipPath')
         .attr('id', nestedId)
         .append('circle')
-        .attr('cx', circles[ci].x).attr('cy', circles[ci].y).attr('r', circles[ci].r)
+        .attr('cx', circles[ci].x)
+        .attr('cy', circles[ci].y)
+        .attr('r', circles[ci].r)
         .attr('clip-path', `url(#${clipId})`);
       clipId = nestedId;
     }
 
     // Determine line number for this region (for editor sync)
-    let regionLineNumber: number | null = null;
+    let regionLineNumber: number | null = null; // eslint-disable-line no-useless-assignment
     if (idxs.length === 1) {
       regionLineNumber = vennSets[idxs[0]].lineNumber;
     } else {
-      const sortedNames = idxs.map(i => vennSets[i].name).sort();
+      const sortedNames = idxs.map((i) => vennSets[i].name).sort();
       const ov = vennOverlaps.find(
-        (o) => o.sets.length === sortedNames.length && o.sets.every((s, k) => s === sortedNames[k])
+        (o) =>
+          o.sets.length === sortedNames.length &&
+          o.sets.every((s, k) => s === sortedNames[k])
       );
       regionLineNumber = ov?.lineNumber ?? null;
     }
 
-    const el = overlayGroup.append('rect')
-      .attr('x', 0).attr('y', 0)
-      .attr('width', width).attr('height', height)
+    const el = overlayGroup
+      .append('rect')
+      .attr('x', 0)
+      .attr('y', 0)
+      .attr('width', width)
+      .attr('height', height)
       .attr('fill', 'white')
       .attr('fill-opacity', 0)
       .attr('class', 'venn-region-overlay')
-      .attr('data-line-number', regionLineNumber != null ? String(regionLineNumber) : '0')
+      .attr(
+        'data-line-number',
+        regionLineNumber != null ? String(regionLineNumber) : '0'
+      )
       .attr('clip-path', `url(#${clipId})`);
 
     if (excluded.length > 0) {
       // Mask subtracts excluded circles so only the exact region shape highlights
       const maskId = `vvm-${key}`;
       const mask = defs.append('mask').attr('id', maskId);
-      mask.append('rect')
-        .attr('x', 0).attr('y', 0)
-        .attr('width', width).attr('height', height)
+      mask
+        .append('rect')
+        .attr('x', 0)
+        .attr('y', 0)
+        .attr('width', width)
+        .attr('height', height)
         .attr('fill', 'white');
       for (const j of excluded) {
-        mask.append('circle')
-          .attr('cx', circles[j].x).attr('cy', circles[j].y).attr('r', circles[j].r)
+        mask
+          .append('circle')
+          .attr('cx', circles[j].x)
+          .attr('cy', circles[j].y)
+          .attr('r', circles[j].r)
           .attr('fill', 'black');
       }
       el.attr('mask', `url(#${maskId})`);
@@ -5277,10 +5619,12 @@ export function renderVenn(
 
   const showRegionOverlay = (idxs: number[]) => {
     const key = [...idxs].sort((a, b) => a - b).join('-');
-    overlayEls.forEach((el, k) => el.attr('fill-opacity', k === key ? 0 : 0.55));
+    overlayEls.forEach((el, k) =>
+      el.attr('fill-opacity', k === key ? 0 : 0.55)
+    );
   };
   const hideAllOverlays = () => {
-    overlayEls.forEach(el => el.attr('fill-opacity', 0));
+    overlayEls.forEach((el) => el.attr('fill-opacity', 0));
   };
 
   // ── Labels ──
@@ -5289,7 +5633,9 @@ export function renderVenn(
 
   function exclusiveHSpan(px: number, py: number, ci: number): number {
     const dy = py - circles[ci].y;
-    const halfChord = Math.sqrt(Math.max(0, circles[ci].r * circles[ci].r - dy * dy));
+    const halfChord = Math.sqrt(
+      Math.max(0, circles[ci].r * circles[ci].r - dy * dy)
+    );
     let left = circles[ci].x - halfChord;
     let right = circles[ci].x + halfChord;
     for (let j = 0; j < n; j++) {
@@ -5320,11 +5666,14 @@ export function renderVenn(
     const centroid = regionCentroid(circles, inside);
 
     const availW = exclusiveHSpan(centroid.x, centroid.y, i);
-    const fitFont = Math.min(MAX_FONT, Math.max(MIN_FONT,
-      (availW - INTERNAL_PAD * 2) / (text.length * CH_RATIO)));
+    const fitFont = Math.min(
+      MAX_FONT,
+      Math.max(MIN_FONT, (availW - INTERNAL_PAD * 2) / (text.length * CH_RATIO))
+    );
     const estTextW = text.length * CH_RATIO * fitFont;
 
-    const fitsInside = estTextW + INTERNAL_PAD * 2 < availW &&
+    const fitsInside =
+      estTextW + INTERNAL_PAD * 2 < availW &&
       pointInCircle({ x: centroid.x, y: centroid.y - fitFont / 2 }, c) &&
       pointInCircle({ x: centroid.x, y: centroid.y + fitFont / 2 }, c);
 
@@ -5343,7 +5692,13 @@ export function renderVenn(
       let dx = c.x - gcx;
       let dy = c.y - gcy;
       const mag = Math.sqrt(dx * dx + dy * dy);
-      if (mag < 1e-6) { dx = 1; dy = 0; } else { dx /= mag; dy /= mag; }
+      if (mag < 1e-6) {
+        dx = 1;
+        dy = 0;
+      } else {
+        dx /= mag;
+        dy /= mag;
+      }
 
       const exitX = c.x + dx * c.r;
       const exitY = c.y + dy * c.r;
@@ -5354,8 +5709,10 @@ export function renderVenn(
 
       labelGroup
         .append('line')
-        .attr('x1', edgeX).attr('y1', edgeY)
-        .attr('x2', stubEndX).attr('y2', stubEndY)
+        .attr('x1', edgeX)
+        .attr('y1', edgeY)
+        .attr('x2', stubEndX)
+        .attr('y2', stubEndY)
         .attr('stroke', textColor)
         .attr('stroke-width', 1);
 
@@ -5382,7 +5739,8 @@ export function renderVenn(
 
   // ── Overlap labels (inline at region centroid) ──
   function overlapHSpan(py: number, idxs: number[]): number {
-    let left = -Infinity, right = Infinity;
+    let left = -Infinity,
+      right = Infinity;
     for (const ci of idxs) {
       const dy = py - circles[ci].y;
       if (Math.abs(dy) >= circles[ci].r) return 0;
@@ -5412,8 +5770,13 @@ export function renderVenn(
     const inside = circles.map((_, j) => idxs.includes(j));
     const centroid = regionCentroid(circles, inside);
     const availW = overlapHSpan(centroid.y, idxs);
-    const fitFont = Math.min(MAX_FONT, Math.max(MIN_FONT,
-      (availW - INTERNAL_PAD * 2) / (ov.label.length * CH_RATIO)));
+    const fitFont = Math.min(
+      MAX_FONT,
+      Math.max(
+        MIN_FONT,
+        (availW - INTERNAL_PAD * 2) / (ov.label.length * CH_RATIO)
+      )
+    );
     labelGroup
       .append('text')
       .attr('x', centroid.x)
@@ -5442,11 +5805,16 @@ export function renderVenn(
       .attr('data-line-number', String(vennSets[i].lineNumber))
       .style('cursor', onClickItem ? 'pointer' : 'default')
       .style('outline', 'none')
-      .on('mouseenter', () => { showRegionOverlay([i]); })
-      .on('mouseleave', () => { hideAllOverlays(); })
+      .on('mouseenter', () => {
+        showRegionOverlay([i]);
+      })
+      .on('mouseleave', () => {
+        hideAllOverlays();
+      })
       .on('click', function () {
         (this as SVGElement).blur?.();
-        if (onClickItem && vennSets[i].lineNumber) onClickItem(vennSets[i].lineNumber);
+        if (onClickItem && vennSets[i].lineNumber)
+          onClickItem(vennSets[i].lineNumber);
       });
   });
 
@@ -5455,14 +5823,23 @@ export function renderVenn(
 
   const subsets: { idxs: number[]; sets: string[] }[] = [];
   if (n === 2) {
-    subsets.push({ idxs: [0, 1], sets: [vennSets[0].name, vennSets[1].name].sort() });
+    subsets.push({
+      idxs: [0, 1],
+      sets: [vennSets[0].name, vennSets[1].name].sort(),
+    });
   } else {
     for (let a = 0; a < n; a++) {
       for (let b = a + 1; b < n; b++) {
-        subsets.push({ idxs: [a, b], sets: [vennSets[a].name, vennSets[b].name].sort() });
+        subsets.push({
+          idxs: [a, b],
+          sets: [vennSets[a].name, vennSets[b].name].sort(),
+        });
       }
     }
-    subsets.push({ idxs: [0, 1, 2], sets: [vennSets[0].name, vennSets[1].name, vennSets[2].name].sort() });
+    subsets.push({
+      idxs: [0, 1, 2],
+      sets: [vennSets[0].name, vennSets[1].name, vennSets[2].name].sort(),
+    });
   }
 
   for (const subset of subsets) {
@@ -5470,7 +5847,8 @@ export function renderVenn(
     const inside = circles.map((_, j) => idxs.includes(j));
     const centroid = regionCentroid(circles, inside);
     const declaredOv = vennOverlaps.find(
-      (ov) => ov.sets.length === sets.length && ov.sets.every((s, k) => s === sets[k])
+      (ov) =>
+        ov.sets.length === sets.length && ov.sets.every((s, k) => s === sets[k])
     );
     hoverGroup
       .append('circle')
@@ -5483,8 +5861,12 @@ export function renderVenn(
       .attr('data-line-number', declaredOv ? String(declaredOv.lineNumber) : '')
       .style('cursor', onClickItem && declaredOv ? 'pointer' : 'default')
       .style('outline', 'none')
-      .on('mouseenter', () => { showRegionOverlay(idxs); })
-      .on('mouseleave', () => { hideAllOverlays(); })
+      .on('mouseenter', () => {
+        showRegionOverlay(idxs);
+      })
+      .on('mouseleave', () => {
+        hideAllOverlays();
+      })
       .on('click', function () {
         (this as SVGElement).blur?.();
         if (onClickItem && declaredOv) onClickItem(declaredOv.lineNumber);
@@ -5543,7 +5925,12 @@ export function renderQuadrant(
   // Margins
   const hasXAxis = !!quadrantXAxis;
   const hasYAxis = !!quadrantYAxis;
-  const margin = { top: title ? 60 : 30, right: 30, bottom: hasXAxis ? 70 : 40, left: hasYAxis ? 80 : 40 };
+  const margin = {
+    top: title ? 60 : 30,
+    right: 30,
+    bottom: hasXAxis ? 70 : 40,
+    left: hasYAxis ? 80 : 40,
+  };
   const chartWidth = width - margin.left - margin.right;
   const chartHeight = height - margin.top - margin.bottom;
 
@@ -5555,7 +5942,14 @@ export function renderQuadrant(
   const tooltip = createTooltip(container, palette, isDark);
 
   // Title
-  renderChartTitle(svg, title, quadrantTitleLineNumber, width, textColor, onClickItem);
+  renderChartTitle(
+    svg,
+    title,
+    quadrantTitleLineNumber,
+    width,
+    textColor,
+    onClickItem
+  );
 
   // Chart group (translated by margins)
   const chartG = svg
@@ -5566,12 +5960,21 @@ export function renderQuadrant(
   const mixHex = (a: string, b: string, pct: number): string => {
     const parse = (h: string) => {
       const r = h.replace('#', '');
-      const f = r.length === 3 ? r[0]+r[0]+r[1]+r[1]+r[2]+r[2] : r;
-      return [parseInt(f.substring(0,2),16), parseInt(f.substring(2,4),16), parseInt(f.substring(4,6),16)];
+      const f = r.length === 3 ? r[0] + r[0] + r[1] + r[1] + r[2] + r[2] : r;
+      return [
+        parseInt(f.substring(0, 2), 16),
+        parseInt(f.substring(2, 4), 16),
+        parseInt(f.substring(4, 6), 16),
+      ];
     };
-    const [ar,ag,ab] = parse(a), [br,bg,bb] = parse(b), t = pct/100;
-    const c = (x: number, y: number) => Math.round(x*t + y*(1-t)).toString(16).padStart(2,'0');
-    return `#${c(ar,br)}${c(ag,bg)}${c(ab,bb)}`;
+    const [ar, ag, ab] = parse(a),
+      [br, bg, bb] = parse(b),
+      t = pct / 100;
+    const c = (x: number, y: number) =>
+      Math.round(x * t + y * (1 - t))
+        .toString(16)
+        .padStart(2, '0');
+    return `#${c(ar, br)}${c(ag, bg)}${c(ab, bb)}`;
   };
 
   const bg = isDark ? palette.surface : palette.bg;
@@ -5688,7 +6091,11 @@ export function renderQuadrant(
     fontSize: number;
   }
 
-  const quadrantLabelLayout = (text: string, qw: number, qh: number): QuadrantLabelLayout => {
+  const quadrantLabelLayout = (
+    text: string,
+    qw: number,
+    qh: number
+  ): QuadrantLabelLayout => {
     const availW = qw - LABEL_PAD;
     const availH = qh - LABEL_PAD;
     const words = text.split(/\s+/);
@@ -5696,7 +6103,10 @@ export function renderQuadrant(
     // Try single line first
     if (estTextWidth(text, LABEL_MAX_FONT) <= availW) {
       const fs = Math.min(LABEL_MAX_FONT, availH);
-      return { lines: [text], fontSize: Math.max(LABEL_MIN_FONT, Math.round(fs)) };
+      return {
+        lines: [text],
+        fontSize: Math.max(LABEL_MIN_FONT, Math.round(fs)),
+      };
     }
 
     // Try wrapping into 2+ lines: greedily pack words so each line fits availW
@@ -5743,7 +6153,10 @@ export function renderQuadrant(
   const qh = chartHeight / 2;
   const quadrantDefsWithLabel = quadrantDefs.filter((d) => d.label !== null);
   const labelLayouts = new Map(
-    quadrantDefsWithLabel.map((d) => [d.label!.text, quadrantLabelLayout(d.label!.text, qw, qh)])
+    quadrantDefsWithLabel.map((d) => [
+      d.label!.text,
+      quadrantLabelLayout(d.label!.text, qw, qh),
+    ])
   );
 
   const quadrantLabelTexts = chartG
@@ -5808,7 +6221,10 @@ export function renderQuadrant(
       .attr('text-anchor', 'middle')
       .attr('fill', textColor)
       .attr('font-size', '18px')
-      .attr('data-line-number', quadrantXAxisLineNumber ? String(quadrantXAxisLineNumber) : null)
+      .attr(
+        'data-line-number',
+        quadrantXAxisLineNumber ? String(quadrantXAxisLineNumber) : null
+      )
       .style(
         'cursor',
         onClickItem && quadrantXAxisLineNumber ? 'pointer' : 'default'
@@ -5824,7 +6240,10 @@ export function renderQuadrant(
       .attr('text-anchor', 'middle')
       .attr('fill', textColor)
       .attr('font-size', '18px')
-      .attr('data-line-number', quadrantXAxisLineNumber ? String(quadrantXAxisLineNumber) : null)
+      .attr(
+        'data-line-number',
+        quadrantXAxisLineNumber ? String(quadrantXAxisLineNumber) : null
+      )
       .style(
         'cursor',
         onClickItem && quadrantXAxisLineNumber ? 'pointer' : 'default'
@@ -5860,7 +6279,10 @@ export function renderQuadrant(
       .attr('fill', textColor)
       .attr('font-size', '18px')
       .attr('transform', `rotate(-90, 22, ${yMidBottom})`)
-      .attr('data-line-number', quadrantYAxisLineNumber ? String(quadrantYAxisLineNumber) : null)
+      .attr(
+        'data-line-number',
+        quadrantYAxisLineNumber ? String(quadrantYAxisLineNumber) : null
+      )
       .style(
         'cursor',
         onClickItem && quadrantYAxisLineNumber ? 'pointer' : 'default'
@@ -5877,7 +6299,10 @@ export function renderQuadrant(
       .attr('fill', textColor)
       .attr('font-size', '18px')
       .attr('transform', `rotate(-90, 22, ${yMidTop})`)
-      .attr('data-line-number', quadrantYAxisLineNumber ? String(quadrantYAxisLineNumber) : null)
+      .attr(
+        'data-line-number',
+        quadrantYAxisLineNumber ? String(quadrantYAxisLineNumber) : null
+      )
       .style(
         'cursor',
         onClickItem && quadrantYAxisLineNumber ? 'pointer' : 'default'
@@ -5936,7 +6361,9 @@ export function renderQuadrant(
     const pointColor =
       quadDef?.label?.color ?? defaultColors[quadDef?.colorIdx ?? 0];
 
-    const pointG = pointsG.append('g').attr('class', 'point-group')
+    const pointG = pointsG
+      .append('g')
+      .attr('class', 'point-group')
       .attr('data-line-number', String(point.lineNumber));
 
     // Circle with white fill and colored border for visibility on opaque quadrants
@@ -6025,7 +6452,10 @@ const EXPORT_HEIGHT = 800;
 /**
  * Resolves the palette for export, falling back to Nord light/dark.
  */
-async function resolveExportPalette(theme: string, palette?: PaletteColors): Promise<PaletteColors> {
+async function resolveExportPalette(
+  theme: string,
+  palette?: PaletteColors
+): Promise<PaletteColors> {
   if (palette) return palette;
   const { getPalette } = await import('./palettes');
   return theme === 'dark' ? getPalette('nord').dark : getPalette('nord').light;
@@ -6087,7 +6517,13 @@ export async function renderForExport(
     hiddenAttributes?: Set<string>;
     swimlaneTagGroup?: string | null;
   },
-  options?: { branding?: boolean; c4Level?: 'context' | 'containers' | 'components' | 'deployment'; c4System?: string; c4Container?: string; tagGroup?: string }
+  options?: {
+    branding?: boolean;
+    c4Level?: 'context' | 'containers' | 'components' | 'deployment';
+    c4System?: string;
+    c4Container?: string;
+    tagGroup?: string;
+  }
 ): Promise<string> {
   // Flowchart and org chart use their own parser pipelines — intercept before parseVisualization()
   const { parseDgmoChartType } = await import('./dgmo-router');
@@ -6107,7 +6543,8 @@ export async function renderForExport(
 
     // Apply interactive collapse state when provided
     const collapsedNodes = orgExportState?.collapsedNodes;
-    const activeTagGroup = orgExportState?.activeTagGroup ?? options?.tagGroup ?? null;
+    const activeTagGroup =
+      orgExportState?.activeTagGroup ?? options?.tagGroup ?? null;
     const hiddenAttributes = orgExportState?.hiddenAttributes;
 
     const { parsed: effectiveParsed, hiddenCounts } =
@@ -6129,7 +6566,17 @@ export async function renderForExport(
     const exportHeight = orgLayout.height + PADDING * 2 + titleOffset;
     const container = createExportContainer(exportWidth, exportHeight);
 
-    renderOrg(container, effectiveParsed, orgLayout, effectivePalette, isDark, undefined, { width: exportWidth, height: exportHeight }, activeTagGroup, hiddenAttributes);
+    renderOrg(
+      container,
+      effectiveParsed,
+      orgLayout,
+      effectivePalette,
+      isDark,
+      undefined,
+      { width: exportWidth, height: exportHeight },
+      activeTagGroup,
+      hiddenAttributes
+    );
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
 
@@ -6147,7 +6594,8 @@ export async function renderForExport(
 
     // Apply interactive collapse state when provided
     const collapsedNodes = orgExportState?.collapsedNodes;
-    const activeTagGroup = orgExportState?.activeTagGroup ?? options?.tagGroup ?? null;
+    const activeTagGroup =
+      orgExportState?.activeTagGroup ?? options?.tagGroup ?? null;
     const hiddenAttributes = orgExportState?.hiddenAttributes;
 
     const { parsed: effectiveParsed, hiddenCounts } =
@@ -6160,7 +6608,7 @@ export async function renderForExport(
       hiddenCounts.size > 0 ? hiddenCounts : undefined,
       activeTagGroup,
       hiddenAttributes,
-      true,
+      true
     );
 
     const PADDING = 20;
@@ -6169,7 +6617,17 @@ export async function renderForExport(
     const exportHeight = sitemapLayout.height + PADDING * 2 + titleOffset;
     const container = createExportContainer(exportWidth, exportHeight);
 
-    renderSitemap(container, effectiveParsed, sitemapLayout, effectivePalette, isDark, undefined, { width: exportWidth, height: exportHeight }, activeTagGroup, hiddenAttributes);
+    renderSitemap(
+      container,
+      effectiveParsed,
+      sitemapLayout,
+      effectivePalette,
+      isDark,
+      undefined,
+      { width: exportWidth, height: exportHeight },
+      activeTagGroup,
+      hiddenAttributes
+    );
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
 
@@ -6187,7 +6645,15 @@ export async function renderForExport(
     container.style.left = '-9999px';
     document.body.appendChild(container);
 
-    renderKanban(container, kanbanParsed, effectivePalette, theme === 'dark', undefined, undefined, options?.tagGroup);
+    renderKanban(
+      container,
+      kanbanParsed,
+      effectivePalette,
+      theme === 'dark',
+      undefined,
+      undefined,
+      options?.tagGroup
+    );
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
 
@@ -6207,7 +6673,15 @@ export async function renderForExport(
     const exportHeight = classLayout.height + PADDING * 2 + titleOffset;
     const container = createExportContainer(exportWidth, exportHeight);
 
-    renderClassDiagram(container, classParsed, classLayout, effectivePalette, theme === 'dark', undefined, { width: exportWidth, height: exportHeight });
+    renderClassDiagram(
+      container,
+      classParsed,
+      classLayout,
+      effectivePalette,
+      theme === 'dark',
+      undefined,
+      { width: exportWidth, height: exportHeight }
+    );
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
 
@@ -6227,14 +6701,26 @@ export async function renderForExport(
     const exportHeight = erLayout.height + PADDING * 2 + titleOffset;
     const container = createExportContainer(exportWidth, exportHeight);
 
-    renderERDiagram(container, erParsed, erLayout, effectivePalette, theme === 'dark', undefined, { width: exportWidth, height: exportHeight }, options?.tagGroup);
+    renderERDiagram(
+      container,
+      erParsed,
+      erLayout,
+      effectivePalette,
+      theme === 'dark',
+      undefined,
+      { width: exportWidth, height: exportHeight },
+      options?.tagGroup
+    );
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
 
   if (detectedType === 'initiative-status') {
-    const { parseInitiativeStatus } = await import('./initiative-status/parser');
-    const { layoutInitiativeStatus } = await import('./initiative-status/layout');
-    const { renderInitiativeStatus } = await import('./initiative-status/renderer');
+    const { parseInitiativeStatus } =
+      await import('./initiative-status/parser');
+    const { layoutInitiativeStatus } =
+      await import('./initiative-status/layout');
+    const { renderInitiativeStatus } =
+      await import('./initiative-status/renderer');
 
     const effectivePalette = await resolveExportPalette(theme, palette);
     const isParsed = parseInitiativeStatus(content);
@@ -6247,14 +6733,27 @@ export async function renderForExport(
     const exportHeight = isLayout.height + PADDING * 2 + titleOffset;
     const container = createExportContainer(exportWidth, exportHeight);
 
-    renderInitiativeStatus(container, isParsed, isLayout, effectivePalette, theme === 'dark', { exportDims: { width: exportWidth, height: exportHeight } });
+    renderInitiativeStatus(
+      container,
+      isParsed,
+      isLayout,
+      effectivePalette,
+      theme === 'dark',
+      { exportDims: { width: exportWidth, height: exportHeight } }
+    );
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
 
   if (detectedType === 'c4') {
     const { parseC4 } = await import('./c4/parser');
-    const { layoutC4Context, layoutC4Containers, layoutC4Components, layoutC4Deployment } = await import('./c4/layout');
-    const { renderC4Context, renderC4Containers } = await import('./c4/renderer');
+    const {
+      layoutC4Context,
+      layoutC4Containers,
+      layoutC4Components,
+      layoutC4Deployment,
+    } = await import('./c4/layout');
+    const { renderC4Context, renderC4Containers } =
+      await import('./c4/renderer');
 
     const effectivePalette = await resolveExportPalette(theme, palette);
     const c4Parsed = parseC4(content, effectivePalette);
@@ -6265,13 +6764,14 @@ export async function renderForExport(
     const c4System = options?.c4System;
     const c4Container = options?.c4Container;
 
-    const c4Layout = c4Level === 'deployment'
-      ? layoutC4Deployment(c4Parsed)
-      : c4Level === 'components' && c4System && c4Container
-        ? layoutC4Components(c4Parsed, c4System, c4Container)
-        : c4Level === 'containers' && c4System
-          ? layoutC4Containers(c4Parsed, c4System)
-          : layoutC4Context(c4Parsed);
+    const c4Layout =
+      c4Level === 'deployment'
+        ? layoutC4Deployment(c4Parsed)
+        : c4Level === 'components' && c4System && c4Container
+          ? layoutC4Components(c4Parsed, c4System, c4Container)
+          : c4Level === 'containers' && c4System
+            ? layoutC4Containers(c4Parsed, c4System)
+            : layoutC4Context(c4Parsed);
 
     if (c4Layout.nodes.length === 0) return '';
 
@@ -6281,11 +6781,23 @@ export async function renderForExport(
     const exportHeight = c4Layout.height + PADDING * 2 + titleOffset;
     const container = createExportContainer(exportWidth, exportHeight);
 
-    const renderFn = c4Level === 'deployment' || (c4Level === 'components' && c4System && c4Container) || (c4Level === 'containers' && c4System)
-      ? renderC4Containers
-      : renderC4Context;
-
-    renderFn(container, c4Parsed, c4Layout, effectivePalette, theme === 'dark', undefined, { width: exportWidth, height: exportHeight }, options?.tagGroup);
+    const renderFn =
+      c4Level === 'deployment' ||
+      (c4Level === 'components' && c4System && c4Container) ||
+      (c4Level === 'containers' && c4System)
+        ? renderC4Containers
+        : renderC4Context;
+
+    renderFn(
+      container,
+      c4Parsed,
+      c4Layout,
+      effectivePalette,
+      theme === 'dark',
+      undefined,
+      { width: exportWidth, height: exportHeight },
+      options?.tagGroup
+    );
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
 
@@ -6301,7 +6813,15 @@ export async function renderForExport(
     const layout = layoutGraph(fcParsed);
     const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
 
-    renderFlowchart(container, fcParsed, layout, effectivePalette, theme === 'dark', undefined, { width: EXPORT_WIDTH, height: EXPORT_HEIGHT });
+    renderFlowchart(
+      container,
+      fcParsed,
+      layout,
+      effectivePalette,
+      theme === 'dark',
+      undefined,
+      { width: EXPORT_WIDTH, height: EXPORT_HEIGHT }
+    );
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
 
@@ -6309,7 +6829,8 @@ export async function renderForExport(
     const { parseInfra } = await import('./infra/parser');
     const { computeInfra } = await import('./infra/compute');
     const { layoutInfra } = await import('./infra/layout');
-    const { renderInfra, computeInfraLegendGroups } = await import('./infra/renderer');
+    const { renderInfra, computeInfraLegendGroups } =
+      await import('./infra/renderer');
 
     const effectivePalette = await resolveExportPalette(theme, palette);
     const infraParsed = parseInfra(content);
@@ -6320,13 +6841,30 @@ export async function renderForExport(
     const activeTagGroup = options?.tagGroup ?? null;
 
     const titleOffset = infraParsed.title ? 40 : 0;
-    const legendGroups = computeInfraLegendGroups(infraLayout.nodes, infraParsed.tagGroups, effectivePalette);
+    const legendGroups = computeInfraLegendGroups(
+      infraLayout.nodes,
+      infraParsed.tagGroups,
+      effectivePalette
+    );
     const legendOffset = legendGroups.length > 0 ? 28 : 0;
     const exportWidth = infraLayout.width;
     const exportHeight = infraLayout.height + titleOffset + legendOffset;
     const container = createExportContainer(exportWidth, exportHeight);
 
-    renderInfra(container, infraLayout, effectivePalette, theme === 'dark', infraParsed.title, infraParsed.titleLineNumber, infraParsed.tagGroups, activeTagGroup, false, null, null, true);
+    renderInfra(
+      container,
+      infraLayout,
+      effectivePalette,
+      theme === 'dark',
+      infraParsed.title,
+      infraParsed.titleLineNumber,
+      infraParsed.tagGroups,
+      activeTagGroup,
+      false,
+      null,
+      null,
+      true
+    );
     // Restore explicit pixel dimensions for resvg (renderer uses 100%/viewBox for app scaling)
     const infraSvg = container.querySelector('svg');
     if (infraSvg) {
@@ -6350,7 +6888,14 @@ export async function renderForExport(
     const EXPORT_H = 800;
     const container = createExportContainer(EXPORT_W, EXPORT_H);
 
-    renderGantt(container, resolved, effectivePalette, theme === 'dark', undefined, { width: EXPORT_W, height: EXPORT_H });
+    renderGantt(
+      container,
+      resolved,
+      effectivePalette,
+      theme === 'dark',
+      undefined,
+      { width: EXPORT_W, height: EXPORT_H }
+    );
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
 
@@ -6366,7 +6911,15 @@ export async function renderForExport(
     const layout = layoutGraph(stateParsed);
     const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
 
-    renderState(container, stateParsed, layout, effectivePalette, theme === 'dark', undefined, { width: EXPORT_WIDTH, height: EXPORT_HEIGHT });
+    renderState(
+      container,
+      stateParsed,
+      layout,
+      effectivePalette,
+      theme === 'dark',
+      undefined,
+      { width: EXPORT_WIDTH, height: EXPORT_HEIGHT }
+    );
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
 
@@ -6392,30 +6945,75 @@ export async function renderForExport(
   const effectivePalette = await resolveExportPalette(theme, palette);
   const isDark = theme === 'dark';
   const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
-  const dims: D3ExportDimensions = { width: EXPORT_WIDTH, height: EXPORT_HEIGHT };
+  const dims: D3ExportDimensions = {
+    width: EXPORT_WIDTH,
+    height: EXPORT_HEIGHT,
+  };
 
   if (parsed.type === 'sequence') {
     const { parseSequenceDgmo } = await import('./sequence/parser');
     const { renderSequenceDiagram } = await import('./sequence/renderer');
     const seqParsed = parseSequenceDgmo(content);
     if (seqParsed.error || seqParsed.participants.length === 0) return '';
-    renderSequenceDiagram(container, seqParsed, effectivePalette, isDark, undefined, {
-      exportWidth: EXPORT_WIDTH,
-      activeTagGroup: options?.tagGroup,
-    });
+    renderSequenceDiagram(
+      container,
+      seqParsed,
+      effectivePalette,
+      isDark,
+      undefined,
+      {
+        exportWidth: EXPORT_WIDTH,
+        activeTagGroup: options?.tagGroup,
+      }
+    );
   } else if (parsed.type === 'wordcloud') {
-    await renderWordCloudAsync(container, parsed, effectivePalette, isDark, dims);
+    await renderWordCloudAsync(
+      container,
+      parsed,
+      effectivePalette,
+      isDark,
+      dims
+    );
   } else if (parsed.type === 'arc') {
-    renderArcDiagram(container, parsed, effectivePalette, isDark, undefined, dims);
+    renderArcDiagram(
+      container,
+      parsed,
+      effectivePalette,
+      isDark,
+      undefined,
+      dims
+    );
   } else if (parsed.type === 'timeline') {
-    renderTimeline(container, parsed, effectivePalette, isDark, undefined, dims,
-      orgExportState?.activeTagGroup ?? options?.tagGroup, orgExportState?.swimlaneTagGroup);
+    renderTimeline(
+      container,
+      parsed,
+      effectivePalette,
+      isDark,
+      undefined,
+      dims,
+      orgExportState?.activeTagGroup ?? options?.tagGroup,
+      orgExportState?.swimlaneTagGroup
+    );
   } else if (parsed.type === 'venn') {
     renderVenn(container, parsed, effectivePalette, isDark, undefined, dims);
   } else if (parsed.type === 'quadrant') {
-    renderQuadrant(container, parsed, effectivePalette, isDark, undefined, dims);
+    renderQuadrant(
+      container,
+      parsed,
+      effectivePalette,
+      isDark,
+      undefined,
+      dims
+    );
   } else {
-    renderSlopeChart(container, parsed, effectivePalette, isDark, undefined, dims);
+    renderSlopeChart(
+      container,
+      parsed,
+      effectivePalette,
+      isDark,
+      undefined,
+      dims
+    );
   }
 
   return finalizeSvgExport(container, theme, effectivePalette, options);