@diagrammo/dgmo 0.7.2 → 0.8.0

package/src/d3.ts

@@ -88,6 +88,7 @@ export interface TimelineEra {
   endDate: string;
   label: string;
   color: string | null;
+  lineNumber: number;
 }
 
 export interface TimelineMarker {
@@ -181,22 +182,22 @@ import { getSeriesColors } from './palettes';
 import { mix } from './palettes/color-utils';
 import type { DgmoError } from './diagnostics';
 import { makeDgmoError, formatDgmoError, suggest } from './diagnostics';
-import { collectIndentedValues, extractColor, parsePipeMetadata, MULTIPLE_PIPE_WARNING } from './utils/parsing';
+import { collectIndentedValues, extractColor, normalizeDirection, parseFirstLine, parsePipeMetadata, MULTIPLE_PIPE_WARNING } 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,
   LEGEND_PILL_PAD as TL_LEGEND_PILL_PAD,
   LEGEND_PILL_FONT_SIZE as TL_LEGEND_PILL_FONT_SIZE,
-  LEGEND_PILL_FONT_W as TL_LEGEND_PILL_FONT_W,
   LEGEND_CAPSULE_PAD as TL_LEGEND_CAPSULE_PAD,
   LEGEND_DOT_R as TL_LEGEND_DOT_R,
   LEGEND_ENTRY_FONT_SIZE as TL_LEGEND_ENTRY_FONT_SIZE,
-  LEGEND_ENTRY_FONT_W as TL_LEGEND_ENTRY_FONT_W,
   LEGEND_ENTRY_DOT_GAP as TL_LEGEND_ENTRY_DOT_GAP,
   LEGEND_ENTRY_TRAIL as TL_LEGEND_ENTRY_TRAIL,
   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';
 
 // ============================================================
 // Shared Rendering Helpers
@@ -217,11 +218,11 @@ function renderChartTitle(
   const titleEl = svg.append('text')
     .attr('class', 'chart-title')
     .attr('x', width / 2)
-    .attr('y', 30)
+    .attr('y', TITLE_Y)
     .attr('text-anchor', 'middle')
     .attr('fill', textColor)
-    .attr('font-size', '20px')
-    .attr('font-weight', '700')
+    .attr('font-size', TITLE_FONT_SIZE)
+    .attr('font-weight', TITLE_FONT_WEIGHT)
     .style('cursor', onClickItem && titleLineNumber ? 'pointer' : 'default')
     .text(title);
   if (titleLineNumber) {
@@ -261,45 +262,97 @@ function initD3Chart(
 // ============================================================
 
 /**
- * Converts a date string (YYYY, YYYY-MM, YYYY-MM-DD) to a fractional year number.
+ * Converts a date string (YYYY, YYYY-MM, YYYY-MM-DD, or YYYY-MM-DD HH:MM) to a fractional year number.
  */
 export function parseTimelineDate(s: string): number {
-  const parts = s.split('-').map((p) => parseInt(p, 10));
+  // Split off optional time component
+  const spaceIdx = s.indexOf(' ');
+  let datePart = s;
+  let hour = 0;
+  let minute = 0;
+
+  if (spaceIdx !== -1) {
+    datePart = s.slice(0, spaceIdx);
+    const timePart = s.slice(spaceIdx + 1);
+    const timeParts = timePart.split(':');
+    if (timeParts.length === 2) {
+      hour = parseInt(timeParts[0], 10);
+      minute = parseInt(timeParts[1], 10);
+    }
+  }
+
+  const parts = datePart.split('-').map((p) => parseInt(p, 10));
   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;
+  return year + (month - 1) / 12 + (day - 1) / 365 + hour / 8760 + minute / 525600;
+}
+
+/** Convert a fractional year number back to a Date (inverse of parseTimelineDate). */
+function fractionalYearToDate(frac: number): Date {
+  const year = Math.floor(frac);
+  const remainder = frac - year;
+  // Inverse of: (month-1)/12 + (day-1)/365 + hour/8760 + minute/525600
+  const monthFrac = remainder * 12;
+  const month = Math.floor(monthFrac); // 0-based
+  const monthRemainder = remainder - month / 12;
+  const dayFrac = monthRemainder * 365; // fractional day-of-year offset
+  const day = Math.floor(dayFrac) + 1;
+  const dayRemainder = dayFrac - Math.floor(dayFrac);
+  const hourFrac = dayRemainder * 24;
+  const hour = Math.floor(hourFrac);
+  const minute = Math.round((hourFrac - hour) * 60);
+  return new Date(year, month, day, hour, minute);
+}
+
+/** 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;
 }
 
 /**
  * Adds a duration to a date string and returns the resulting date string.
- * Supports: d (days), w (weeks), m (months), y (years)
+ * Supports: 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)
- * Preserves the precision of the input date (YYYY, YYYY-MM, or YYYY-MM-DD).
+ * Preserves the precision of the input date (YYYY, YYYY-MM, YYYY-MM-DD, or YYYY-MM-DD HH:MM).
  */
 export function addDurationToDate(
   startDate: string,
   amount: number,
-  unit: 'd' | 'w' | 'm' | 'y'
+  unit: 'd' | 'w' | 'm' | 'y' | 'h' | 'min'
 ): string {
-  const parts = startDate.split('-').map((p) => parseInt(p, 10));
+  // Split off optional time component
+  const spaceIdx = startDate.indexOf(' ');
+  let datePart = startDate;
+  let hour = 0;
+  let minute = 0;
+
+  if (spaceIdx !== -1) {
+    datePart = startDate.slice(0, spaceIdx);
+    const timePart = startDate.slice(spaceIdx + 1);
+    const tp = timePart.split(':');
+    if (tp.length === 2) {
+      hour = parseInt(tp[0], 10);
+      minute = parseInt(tp[1], 10);
+    }
+  }
+
+  const parts = datePart.split('-').map((p) => parseInt(p, 10));
   const year = parts[0];
   const month = parts.length >= 2 ? parts[1] : 1;
   const day = parts.length >= 3 ? parts[2] : 1;
 
-  const date = new Date(year, month - 1, day);
+  const date = new Date(year, month - 1, day, hour, minute);
 
   switch (unit) {
     case 'd':
-      // Round days to nearest integer
       date.setDate(date.getDate() + Math.round(amount));
       break;
     case 'w':
-      // Convert weeks to days, round to nearest integer
       date.setDate(date.getDate() + Math.round(amount * 7));
       break;
     case 'm': {
-      // Add whole months, then remaining days
       const wholeMonths = Math.floor(amount);
       const fractionalDays = Math.round((amount - wholeMonths) * 30);
       date.setMonth(date.getMonth() + wholeMonths);
@@ -309,7 +362,6 @@ export function addDurationToDate(
       break;
     }
     case 'y': {
-      // Add whole years, then remaining months
       const wholeYears = Math.floor(amount);
       const fractionalMonths = Math.round((amount - wholeYears) * 12);
       date.setFullYear(date.getFullYear() + wholeYears);
@@ -318,17 +370,28 @@ export function addDurationToDate(
       }
       break;
     }
+    case 'h':
+      date.setTime(date.getTime() + amount * 3600000);
+      break;
+    case 'min':
+      date.setTime(date.getTime() + amount * 60000);
+      break;
   }
 
   // Preserve original precision
   const endYear = date.getFullYear();
   const endMonth = String(date.getMonth() + 1).padStart(2, '0');
   const endDay = String(date.getDate()).padStart(2, '0');
+  const endHour = String(date.getHours()).padStart(2, '0');
+  const endMinute = String(date.getMinutes()).padStart(2, '0');
+  const hasTime = unit === 'h' || unit === 'min' || spaceIdx !== -1;
 
   if (parts.length === 1) {
     return String(endYear);
   } else if (parts.length === 2) {
     return `${endYear}-${endMonth}`;
+  } else if (hasTime && (date.getHours() !== 0 || date.getMinutes() !== 0)) {
+    return `${endYear}-${endMonth}-${endDay} ${endHour}:${endMinute}`;
   } else {
     return `${endYear}-${endMonth}-${endDay}`;
   }
@@ -401,6 +464,8 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
   let currentTimelineGroup: string | null = null;
   let currentTimelineTagGroup: TagGroup | null = null;
   const timelineAliasMap = new Map<string, string>();
+  const VALID_D3_TYPES = new Set(['slope', 'wordcloud', 'arc', 'timeline', 'venn', 'quadrant', 'sequence']);
+  let firstLineParsed = false;
 
   for (let i = 0; i < lines.length; i++) {
     const rawLine = lines[i];
@@ -411,6 +476,24 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
     // Skip empty lines
     if (!line) continue;
 
+    // Skip comments
+    if (line.startsWith('//')) continue;
+
+    // First non-empty, non-comment line: chart type + optional title
+    if (!firstLineParsed) {
+      firstLineParsed = true;
+      const firstLineResult = parseFirstLine(line);
+      if (firstLineResult && VALID_D3_TYPES.has(firstLineResult.chartType)) {
+        result.type = firstLineResult.chartType as ParsedVisualization['type'];
+        if (firstLineResult.title) {
+          result.title = firstLineResult.title;
+          result.titleLineNumber = lineNumber;
+        }
+        continue;
+      }
+      // Not a bare chart type — fall through to normal parsing
+    }
+
     // Timeline tag group heading: `tag: Name [alias X]`
     if (result.type === 'timeline' && indent === 0) {
       const tagBlockMatch = matchTagBlockHeading(line);
@@ -487,11 +570,6 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
       currentTimelineGroup = null;
     }
 
-    // Skip comments
-    if (line.startsWith('//')) {
-      continue;
-    }
-
     // Arc link line: source -> target(color): weight
     if (result.type === 'arc') {
       const linkMatch = line.match(
@@ -527,10 +605,10 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
       }
     }
 
-    // Timeline era lines: era YYYY->YYYY: Label (color)
+    // Timeline era lines: era YYYY->YYYY Label (color)
     if (result.type === 'timeline') {
       const eraMatch = line.match(
-        /^era\s+(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*->\s*(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*:\s*(.+?)(?:\s*\(([^)]+)\))?\s*$/
+        /^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*$/
       );
       if (eraMatch) {
         const colorAnnotation = eraMatch[4]?.trim() || null;
@@ -541,13 +619,14 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
           color: colorAnnotation
             ? resolveColor(colorAnnotation, palette)
             : null,
+          lineNumber,
         });
         continue;
       }
 
-      // Timeline marker lines: marker: YYYY Label (color)
+      // Timeline marker lines: marker YYYY Label (color)
       const markerMatch = line.match(
-        /^marker:\s+(\d{4}(?:-\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;
@@ -565,17 +644,17 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
 
     // Timeline event lines: duration, range, or point
     if (result.type === 'timeline') {
-      // Duration event: 2026-07-15->30d: description (d=days, w=weeks, m=months, y=years)
+      // 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%)
       const durationMatch = line.match(
-        /^(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*->\s*(\d+(?:\.\d{1,2})?)([dwmy])(\?)?\s*:\s*(.+)$/
+        /^(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*->\s*(\d+(?:\.\d{1,2})?)(min|[dwmyh])(\?)?(?:\s*:\s*|\s+)(.+)$/
       );
       if (durationMatch) {
         const startDate = durationMatch[1];
         const uncertain = durationMatch[4] === '?';
         const amount = parseFloat(durationMatch[2]);
-        const unit = durationMatch[3] as 'd' | 'w' | 'm' | 'y';
+        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
@@ -593,9 +672,9 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
         continue;
       }
 
-      // Range event: 1655->1667: description (supports uncertain end: 1655->1667?)
+      // Range event: 1655->1667 description (supports uncertain end: 1655->1667?)
       const rangeMatch = line.match(
-        /^(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*->\s*(\d{4}(?:-\d{2})?(?:-\d{2})?)(\?)?\s*:\s*(.+)$/
+        /^(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*->\s*(\d{4}(?:-\d{2})?(?:-\d{2})?)(\?)?(?:\s*:\s*|\s+)(.+)$/
       );
       if (rangeMatch) {
         const segments = rangeMatch[4].split('|');
@@ -614,9 +693,9 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
         continue;
       }
 
-      // Point event: 1718: description
+      // Point event: 1718 description (or legacy 1718: description)
       const pointMatch = line.match(
-        /^(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*:\s*(.+)$/
+        /^(\d{4}(?:-\d{2})?(?:-\d{2})?)(?:\s*:\s*|\s+)(.+)$/
       );
       if (pointMatch) {
         const segments = pointMatch[2].split('|');
@@ -664,7 +743,9 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
         let color: string | null = null;
         if (colorName) {
           const resolved = resolveColor(colorName, palette);
-          if (resolved.startsWith('#')) {
+          if (resolved === null) {
+            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.`);
@@ -765,7 +846,102 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
       }
     }
 
-    // Check for metadata lines
+    // ── Space-separated options (no colon) ──────────────────
+    const spaceIdx = line.indexOf(' ');
+    if (spaceIdx >= 0) {
+      const firstToken = line.substring(0, spaceIdx).toLowerCase();
+      const restValue = line.substring(spaceIdx + 1).trim();
+
+      if (firstToken === 'chart' && VALID_D3_TYPES.has(restValue.toLowerCase())) {
+        result.type = restValue.toLowerCase() as ParsedVisualization['type'];
+        continue;
+      }
+
+      if (firstToken === 'title') {
+        result.title = restValue;
+        result.titleLineNumber = lineNumber;
+        if (result.type === 'quadrant') {
+          result.quadrantTitleLineNumber = lineNumber;
+        }
+        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') {
+          result.arcOrder = v;
+        }
+        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') {
+          result.cloudOptions.rotate = v;
+        }
+        continue;
+      }
+
+      if (firstToken === 'max') {
+        const v = parseInt(restValue, 10);
+        if (!isNaN(v) && v > 0) {
+          result.cloudOptions.max = v;
+        }
+        continue;
+      }
+
+      if (firstToken === 'size') {
+        const parts = restValue.split(',').map((s) => parseInt(s.trim(), 10));
+        if (
+          parts.length === 2 &&
+          parts.every((n) => !isNaN(n) && n > 0) &&
+          parts[0] < parts[1]
+        ) {
+          result.cloudOptions.minSize = parts[0];
+          result.cloudOptions.maxSize = parts[1];
+        }
+        continue;
+      }
+    }
+
+    // ── Colon-separated metadata / options (legacy + data lines) ──
     const colonIndex = line.indexOf(':');
 
     if (colonIndex !== -1) {
@@ -780,18 +956,10 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
           .substring(colonIndex + 1)
           .trim()
           .toLowerCase();
-        if (
-          value === 'slope' ||
-          value === 'wordcloud' ||
-          value === 'arc' ||
-          value === 'timeline' ||
-          value === 'venn' ||
-          value === 'quadrant' ||
-          value === 'sequence'
-        ) {
-          result.type = value;
+        if (VALID_D3_TYPES.has(value)) {
+          result.type = value as ParsedVisualization['type'];
         } else {
-          const validD3Types = ['slope', 'wordcloud', 'arc', 'timeline', 'venn', 'quadrant', 'sequence'];
+          const validD3Types = [...VALID_D3_TYPES];
           let msg = `Unsupported chart type: ${value}. Supported types: ${validD3Types.join(', ')}`;
           const hint = suggest(value, validD3Types);
           if (hint) msg += `. ${hint}`;
@@ -809,15 +977,18 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
         continue;
       }
 
-      if (key === 'orientation') {
+      if (key === 'orientation' || key === 'direction') {
         // Only arc and timeline support orientation
         if (result.type === 'arc' || result.type === 'timeline') {
-          const v = line
-            .substring(colonIndex + 1)
-            .trim()
-            .toLowerCase();
-          if (v === 'horizontal' || v === 'vertical') {
-            result.orientation = v;
+          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;
@@ -972,7 +1143,12 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
 
   // Validation
   if (!result.type) {
-    return fail(1, 'Missing required "chart:" line (e.g., "chart: slope")');
+    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);
+    let msg = `Unsupported chart type: "${firstNonEmpty.split(/\s/)[0]}". Supported types: ${validD3Types.join(', ')}`;
+    if (hint) msg += `. ${hint}`;
+    return fail(1, msg);
   }
 
   // Sequence diagrams are parsed by their own dedicated parser
@@ -2155,6 +2331,7 @@ function renderEras(
     const eraG = g
       .append('g')
       .attr('class', 'tl-era')
+      .attr('data-line-number', String(era.lineNumber))
       .attr('data-era-start', String(startVal))
       .attr('data-era-end', String(endVal))
       .style('cursor', 'pointer')
@@ -2358,19 +2535,30 @@ const MONTH_ABBR = [
 ];
 
 /**
- * Converts a DSL date string (YYYY, YYYY-MM, YYYY-MM-DD) to a human-readable label.
- *   '1718'       → '1718'
- *   '1718-05'    → 'May 1718'
- *   '1718-05-22' → 'May 22, 1718'
+ * Converts a DSL date string (YYYY, YYYY-MM, YYYY-MM-DD, or YYYY-MM-DD HH:MM) to a human-readable label.
+ *   '1718'              → '1718'
+ *   '1718-05'           → 'May 1718'
+ *   '1718-05-22'        → 'May 22, 1718'
+ *   '2024-06-15 14:30'  → 'Jun 15, 2024 14:30'
  */
 export function formatDateLabel(dateStr: string): string {
-  const parts = dateStr.split('-');
+  // Split off optional time component
+  const spaceIdx = dateStr.indexOf(' ');
+  let datePart = dateStr;
+  let timeSuffix = '';
+
+  if (spaceIdx !== -1) {
+    datePart = dateStr.slice(0, spaceIdx);
+    timeSuffix = ' ' + dateStr.slice(spaceIdx + 1);
+  }
+
+  const parts = datePart.split('-');
   const year = parts[0];
-  if (parts.length === 1) return year;
+  if (parts.length === 1) return year + timeSuffix;
   const month = MONTH_ABBR[parseInt(parts[1], 10) - 1];
-  if (parts.length === 2) return `${month} ${year}`;
+  if (parts.length === 2) return `${month} ${year}${timeSuffix}`;
   const day = parseInt(parts[2], 10);
-  return `${month} ${day}, ${year}`;
+  return `${month} ${day}, ${year}${timeSuffix}`;
 }
 
 /**
@@ -2432,6 +2620,55 @@ export function computeTimeTicks(
         }
       }
     }
+  } else if (span <= 0.000685) {
+    // Minute ticks for spans ≤ ~6 hours
+    // Adaptive step: >3h → 30min, >1h → 15min, >30min → 10min, else 5min
+    let stepMin = 5;
+    const spanHours = span * 8760;
+    if (spanHours > 3) stepMin = 30;
+    else if (spanHours > 1) stepMin = 15;
+    else if (spanHours > 0.5) stepMin = 10;
+
+    // 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);
+
+    while (true) {
+      const val = dateToFractionalYear(startDate);
+      if (val > domainMax) break;
+      if (val >= domainMin) {
+        const hh = String(startDate.getHours()).padStart(2, '0');
+        const mm = String(startDate.getMinutes()).padStart(2, '0');
+        ticks.push({ pos: scale(val), label: `${hh}:${mm}` });
+      }
+      startDate.setMinutes(startDate.getMinutes() + stepMin);
+    }
+  } else if (span <= 0.00822) {
+    // Hour ticks for spans ≤ ~3 days
+    // Adaptive step: >2d → 6h, >1d → 3h, >12h → 2h, else 1h
+    let stepHour = 1;
+    const spanHours = span * 8760;
+    if (spanHours > 48) stepHour = 6;
+    else if (spanHours > 24) stepHour = 3;
+    else if (spanHours > 12) stepHour = 2;
+
+    const startDate = fractionalYearToDate(domainMin);
+    // Round down to nearest step boundary
+    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}` });
+      }
+      startDate.setHours(startDate.getHours() + stepHour);
+    }
   } else {
     // Week ticks for spans ≤ ~3 months (1st, 8th, 15th, 22nd of each month)
     for (let y = minYear; y <= maxYear + 1; y++) {
@@ -3116,8 +3353,9 @@ export function renderTimeline(
       const svg = d3Selection
         .select(container)
         .append('svg')
-        .attr('width', width)
-        .attr('height', height)
+        .attr('viewBox', `0 0 ${width} ${height}`)
+        .attr('width', exportDims ? width : '100%')
+        .attr('preserveAspectRatio', 'xMidYMin meet')
         .style('background', bgColor);
 
       const g = svg
@@ -3365,8 +3603,9 @@ export function renderTimeline(
       const svg = d3Selection
         .select(container)
         .append('svg')
-        .attr('width', width)
-        .attr('height', height)
+        .attr('viewBox', `0 0 ${width} ${height}`)
+        .attr('width', exportDims ? width : '100%')
+        .attr('preserveAspectRatio', 'xMidYMin meet')
         .style('background', bgColor);
 
       const g = svg
@@ -4228,11 +4467,9 @@ export function renderTimeline(
     const LG_HEIGHT = TL_LEGEND_HEIGHT;
     const LG_PILL_PAD = TL_LEGEND_PILL_PAD;
     const LG_PILL_FONT_SIZE = TL_LEGEND_PILL_FONT_SIZE;
-    const LG_PILL_FONT_W = TL_LEGEND_PILL_FONT_W;
     const LG_CAPSULE_PAD = TL_LEGEND_CAPSULE_PAD;
     const LG_DOT_R = TL_LEGEND_DOT_R;
     const LG_ENTRY_FONT_SIZE = TL_LEGEND_ENTRY_FONT_SIZE;
-    const LG_ENTRY_FONT_W = TL_LEGEND_ENTRY_FONT_W;
     const LG_ENTRY_DOT_GAP = TL_LEGEND_ENTRY_DOT_GAP;
     const LG_ENTRY_TRAIL = TL_LEGEND_ENTRY_TRAIL;
     const LG_GROUP_GAP = TL_LEGEND_GROUP_GAP;
@@ -4255,13 +4492,13 @@ export function renderTimeline(
         expandedWidth: number;
       };
       const legendGroups: LegendGroup[] = parsed.timelineTagGroups.map((g) => {
-        const pillW = g.name.length * LG_PILL_FONT_W + 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 + entry.value.length * LG_ENTRY_FONT_W + LG_ENTRY_TRAIL;
+          entryX = textX + measureLegendText(entry.value, LG_ENTRY_FONT_SIZE) + LG_ENTRY_TRAIL;
         }
         return {
           group: g,
@@ -4360,7 +4597,7 @@ export function renderTimeline(
             currentSwimlaneGroup.toLowerCase() === groupKey;
 
           const pillLabel = lg.group.name;
-          const pillWidth = pillLabel.length * LG_PILL_FONT_W + LG_PILL_PAD;
+          const pillWidth = measureLegendText(pillLabel, LG_PILL_FONT_SIZE) + LG_PILL_PAD;
 
           const gEl = legendContainer
             .append('g')
@@ -4497,7 +4734,7 @@ export function renderTimeline(
                 .attr('fill', palette.textMuted)
                 .text(entry.value);
 
-              entryX = textX + entry.value.length * LG_ENTRY_FONT_W + LG_ENTRY_TRAIL;
+              entryX = textX + measureLegendText(entry.value, LG_ENTRY_FONT_SIZE) + LG_ENTRY_TRAIL;
             }
           }
 
@@ -5816,6 +6053,8 @@ function finalizeSvgExport(
   }
   svgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
   svgEl.style.fontFamily = FONT_FAMILY;
+  // Strip elements marked for export exclusion (e.g., inactive legend pills)
+  svgEl.querySelectorAll('[data-export-ignore]').forEach((el) => el.remove());
   const svgHtml = svgEl.outerHTML;
   document.body.removeChild(container);
   if (options?.branding !== false) {