@diagrammo/dgmo 0.6.2 → 0.7.0

package/src/palettes/dracula.ts

@@ -0,0 +1,60 @@
+import type { PaletteConfig } from './types';
+import { registerPalette } from './registry';
+
+// ============================================================
+// Dracula Palette Definition
+// https://draculatheme.com/contribute
+// ============================================================
+
+export const draculaPalette: PaletteConfig = {
+  id: 'dracula',
+  name: 'Dracula',
+  light: {
+    bg: '#f8f8f2', // foreground as light bg
+    surface: '#f0f0ec',
+    overlay: '#e8e8e2',
+    border: '#d8d8d2',
+    text: '#282a36', // background as light text
+    textMuted: '#44475a', // current line
+    primary: '#6272a4', // comment
+    secondary: '#bd93f9', // purple
+    accent: '#bd93f9', // purple
+    destructive: '#ff5555', // red
+    colors: {
+      red: '#ff5555',
+      orange: '#ffb86c',
+      yellow: '#f1fa8c',
+      green: '#50fa7b',
+      blue: '#6272a4', // comment blue
+      purple: '#bd93f9',
+      teal: '#5ac8b8', // muted cyan toward green
+      cyan: '#8be9fd',
+      gray: '#6272a4',
+    },
+  },
+  dark: {
+    bg: '#282a36', // background
+    surface: '#343746', // between bg and current line
+    overlay: '#44475a', // current line
+    border: '#6272a4', // comment
+    text: '#f8f8f2', // foreground
+    textMuted: '#bcc2d4', // muted foreground
+    primary: '#bd93f9', // purple (Dracula's signature)
+    secondary: '#8be9fd', // cyan
+    accent: '#ff79c6', // pink
+    destructive: '#ff5555', // red
+    colors: {
+      red: '#ff5555',
+      orange: '#ffb86c',
+      yellow: '#f1fa8c',
+      green: '#50fa7b',
+      blue: '#6272a4', // comment blue
+      purple: '#bd93f9',
+      teal: '#5ac8b8', // muted cyan toward green
+      cyan: '#8be9fd',
+      gray: '#6272a4',
+    },
+  },
+};
+
+registerPalette(draculaPalette);

package/src/palettes/index.ts

@@ -22,15 +22,17 @@ export {
   contrastText,
 } from './color-utils';
 
-// Re-export palette definitions
-export { nordPalette } from './nord';
-export { solarizedPalette } from './solarized';
+// Re-export palette definitions (alphabetical)
+export { boldPalette } from './bold';
 export { catppuccinPalette } from './catppuccin';
-export { rosePinePalette } from './rose-pine';
+export { draculaPalette } from './dracula';
 export { gruvboxPalette } from './gruvbox';
-export { tokyoNightPalette } from './tokyo-night';
+export { monokaiPalette } from './monokai';
+export { nordPalette } from './nord';
 export { oneDarkPalette } from './one-dark';
-export { boldPalette } from './bold';
+export { rosePinePalette } from './rose-pine';
+export { solarizedPalette } from './solarized';
+export { tokyoNightPalette } from './tokyo-night';
 
 // Re-export Mermaid bridge
 export { buildMermaidThemeVars, buildThemeCSS } from './mermaid-bridge';

package/src/palettes/monokai.ts

@@ -0,0 +1,60 @@
+import type { PaletteConfig } from './types';
+import { registerPalette } from './registry';
+
+// ============================================================
+// Monokai Palette Definition
+// Based on Monokai / Monokai Pro color scheme
+// ============================================================
+
+export const monokaiPalette: PaletteConfig = {
+  id: 'monokai',
+  name: 'Monokai',
+  light: {
+    bg: '#fafaf8',
+    surface: '#f0efe8',
+    overlay: '#e6e5de',
+    border: '#d4d3cc',
+    text: '#272822', // classic Monokai bg as text
+    textMuted: '#75715e', // comment
+    primary: '#49483e', // line highlight
+    secondary: '#f92672', // pink
+    accent: '#a6e22e', // green
+    destructive: '#f92672', // pink/red
+    colors: {
+      red: '#f92672', // Monokai pink-red
+      orange: '#fd971f',
+      yellow: '#e6db74',
+      green: '#a6e22e',
+      blue: '#5c7eab', // derived true blue
+      purple: '#ae81ff',
+      teal: '#4ea8a6', // muted from cyan
+      cyan: '#66d9ef',
+      gray: '#75715e', // comment
+    },
+  },
+  dark: {
+    bg: '#272822', // classic background
+    surface: '#2d2e27',
+    overlay: '#3e3d32', // line highlight
+    border: '#49483e',
+    text: '#f8f8f2', // foreground
+    textMuted: '#a6a28c', // brightened comment
+    primary: '#a6e22e', // green
+    secondary: '#66d9ef', // cyan
+    accent: '#f92672', // pink
+    destructive: '#f92672', // pink/red
+    colors: {
+      red: '#f92672',
+      orange: '#fd971f',
+      yellow: '#e6db74',
+      green: '#a6e22e',
+      blue: '#5c7eab', // derived true blue
+      purple: '#ae81ff',
+      teal: '#4ea8a6', // muted from cyan
+      cyan: '#66d9ef',
+      gray: '#75715e', // comment
+    },
+  },
+};
+
+registerPalette(monokaiPalette);

package/src/palettes/registry.ts

@@ -86,7 +86,9 @@ export function getPalette(id: string): PaletteConfig {
   return PALETTE_REGISTRY.get(id) ?? PALETTE_REGISTRY.get(DEFAULT_PALETTE_ID)!;
 }
 
-/** List all registered palettes (for the selector UI). */
+/** List all registered palettes alphabetically (for the selector UI). */
 export function getAvailablePalettes(): PaletteConfig[] {
-  return Array.from(PALETTE_REGISTRY.values());
+  return Array.from(PALETTE_REGISTRY.values()).sort((a, b) =>
+    a.name.localeCompare(b.name)
+  );
 }

package/src/sequence/parser.ts

@@ -153,12 +153,14 @@ export interface ParsedSequenceDgmo {
   error: string | null;
 }
 
-// "Name is a type" pattern — e.g. "AuthService is a service"
+// "Name is a type" pattern — e.g. "Auth Server is a service"
+// Participant names may contain spaces; [^:]+? stops at colons so that
+// note lines like "note right of A: this is a service" are not falsely matched.
 // Remainder after type is parsed separately for aka/position modifiers
-const IS_A_PATTERN = /^(\S+)\s+is\s+an?\s+(\w+)(?:\s+(.+))?$/i;
+const IS_A_PATTERN = /^([^:]+?)\s+is\s+an?\s+(\w+)(?:\s+(.+))?$/i;
 
 // Standalone "Name position N" pattern — e.g. "DB position -1"
-const POSITION_ONLY_PATTERN = /^(\S+)\s+position\s+(-?\d+)$/i;
+const POSITION_ONLY_PATTERN = /^([^:]+?)\s+position\s+(-?\d+)$/i;
 
 // Colored participant declaration — e.g. "Tapin2(green)", "API(blue)"
 const COLORED_PARTICIPANT_PATTERN = /^(\S+?)\(([^)]+)\)\s*$/;
@@ -174,9 +176,10 @@ const SECTION_PATTERN = /^==\s+(.+?)(?:\s*==)?\s*$/;
 // Arrow pattern for sequence inference — detects any arrow form
 const ARROW_PATTERN = /\S+\s*(?:<-\S+-|<~\S+~|-\S+->|~\S+~>|->|~>|<-|<~)\s*\S+/;
 
-// Note patterns — "note: text", "note right of API: text", "note left of User"
-const NOTE_SINGLE = /^note(?:\s+(right|left)\s+of\s+(\S+))?\s*:\s*(.+)$/i;
-const NOTE_MULTI = /^note(?:\s+(right|left)\s+of\s+([^\s:]+))?\s*:?\s*$/i;
+// Note patterns — "note: text", "note right of Auth Server: text"
+// Participant names may contain spaces; the colon acts as the delimiter.
+const NOTE_SINGLE = /^note(?:\s+(right|left)\s+of\s+(.+?))?\s*:\s*(.+)$/i;
+const NOTE_MULTI = /^note(?:\s+(right|left)\s+of\s+(.+?))?\s*:?\s*$/i;
 
 /**
  * Parse a .dgmo file with `chart: sequence` into a structured representation.
@@ -673,7 +676,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
 
     // ---- Error: plain bidirectional arrows (A <-> B, A <~> B) ----
     const bidiPlainMatch = arrowCore.match(
-      /^(\S+)\s*(?:<->|<~>)\s*(\S+)/
+      /^(.+?)\s*(?:<->|<~>)\s*(.+)/
     );
     if (bidiPlainMatch) {
       pushError(
@@ -684,8 +687,8 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
     }
 
     // ---- Deprecated bare return arrows: A <- B, A <~ B ----
-    const bareReturnSync = arrowCore.match(/^(\S+)\s+<-\s+(\S+)$/);
-    const bareReturnAsync = arrowCore.match(/^(\S+)\s+<~\s+(\S+)$/);
+    const bareReturnSync = arrowCore.match(/^(.+?)\s+<-\s+(.+)$/);
+    const bareReturnAsync = arrowCore.match(/^(.+?)\s+<~\s+(.+)$/);
     const bareReturn = bareReturnSync || bareReturnAsync;
     if (bareReturn) {
       const to = bareReturn[1];
@@ -698,8 +701,8 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
     }
 
     // ---- Bare (unlabeled) call arrows: A -> B, A ~> B ----
-    const bareCallSync = arrowCore.match(/^(\S+)\s*->\s*(\S+)$/);
-    const bareCallAsync = arrowCore.match(/^(\S+)\s*~>\s*(\S+)$/);
+    const bareCallSync = arrowCore.match(/^(.+?)\s*->\s*(.+)$/);
+    const bareCallAsync = arrowCore.match(/^(.+?)\s*~>\s*(.+)$/);
     const bareCall = bareCallSync || bareCallAsync;
     if (bareCall) {
       contentStarted = true;

package/src/sequence/renderer.ts

@@ -10,7 +10,6 @@ import {
   truncateBareUrl,
   renderInlineText,
 } from '../utils/inline-markdown';
-export type { InlineSpan } from '../utils/inline-markdown';
 export { parseInlineMarkdown, truncateBareUrl };
 import { FONT_FAMILY } from '../fonts';
 import { resolveColor } from '../colors';
@@ -1282,10 +1281,12 @@ export function renderSequenceDiagram(
 
   // Compute cumulative Y positions for each step, with section dividers as stable anchors
   const titleOffset = title ? TITLE_HEIGHT : 0;
+  const LEGEND_FIXED_GAP = 8;
+  const legendTopSpace = parsed.tagGroups.length > 0 ? LEGEND_HEIGHT + LEGEND_FIXED_GAP : 0;
   const groupOffset =
     groups.length > 0 ? GROUP_PADDING_TOP + GROUP_LABEL_SIZE : 0;
   const participantStartY =
-    TOP_MARGIN + titleOffset + PARTICIPANT_Y_OFFSET + groupOffset;
+    TOP_MARGIN + titleOffset + legendTopSpace + PARTICIPANT_Y_OFFSET + groupOffset;
   const lifelineStartY0 = participantStartY + PARTICIPANT_BOX_HEIGHT;
   const hasActors = participants.some((p) => p.type === 'actor');
   const messageStartOffset = MESSAGE_START_OFFSET + (hasActors ? 20 : 0);
@@ -1391,8 +1392,7 @@ export function renderSequenceDiagram(
     PARTICIPANT_BOX_HEIGHT +
     Math.max(lifelineLength, 40) +
     40;
-  const legendSpace = parsed.tagGroups.length > 0 ? LEGEND_HEIGHT : 0;
-  const totalHeight = contentHeight + legendSpace;
+  const totalHeight = contentHeight;
 
   const containerWidth = options?.exportWidth ?? container.getBoundingClientRect().width;
   const svgWidth = Math.max(totalWidth, containerWidth);
@@ -1571,7 +1571,7 @@ export function renderSequenceDiagram(
 
   // Render legend pills for tag groups
   if (parsed.tagGroups.length > 0) {
-    const legendY = contentHeight;
+    const legendY = TOP_MARGIN + titleOffset;
     const groupBg = isDark
       ? mix(palette.surface, palette.bg, 50)
       : mix(palette.surface, palette.bg, 30);
@@ -2129,7 +2129,6 @@ export function renderSequenceDiagram(
     // IMPORTANT: only the <g> carries data-line-number / data-section —
     // children must NOT have them, otherwise the click walk-up resolves
     // to a line-number navigation before reaching data-section-toggle.
-    const HIT_AREA_HEIGHT = 36;
     const sectionG = svg
       .append('g')
       .attr('data-section-toggle', '')

package/src/sequence/tag-resolution.ts

@@ -5,7 +5,6 @@
 // Resolves effective tag values for participants and messages
 // using the priority chain: explicit > group > receiver-inherit > default > neutral
 
-import type { TagGroup } from '../utils/tag-groups';
 import type {
   ParsedSequenceDgmo,
   SequenceParticipant,

package/src/sharing.ts

@@ -10,6 +10,7 @@ export interface DiagramViewState {
   activeTagGroup?: string;
   collapsedGroups?: string[];
   swimlaneTagGroup?: string;
+  collapsedLanes?: string[];
   palette?: string;
   theme?: 'light' | 'dark';
 }
@@ -59,6 +60,10 @@ export function encodeDiagramUrl(
     hash += `&swim=${encodeURIComponent(options.viewState.swimlaneTagGroup)}`;
   }
 
+  if (options?.viewState?.collapsedLanes?.length) {
+    hash += `&cl=${encodeURIComponent(options.viewState.collapsedLanes.join(','))}`;
+  }
+
   if (options?.viewState?.palette && options.viewState.palette !== 'nord') {
     hash += `&pal=${encodeURIComponent(options.viewState.palette)}`;
   }
@@ -115,6 +120,9 @@ export function decodeDiagramUrl(hash: string): DecodedDiagramUrl {
     if (key === 'swim' && val) {
       viewState.swimlaneTagGroup = val;
     }
+    if (key === 'cl' && val) {
+      viewState.collapsedLanes = val.split(',').filter(Boolean);
+    }
     if (key === 'pal' && val) viewState.palette = val;
     if (key === 'th' && (val === 'light' || val === 'dark')) viewState.theme = val;
   }

package/src/sitemap/layout.ts

@@ -3,7 +3,7 @@
 // ============================================================
 
 import dagre from '@dagrejs/dagre';
-import type { ParsedSitemap, SitemapNode, SitemapEdge } from './types';
+import type { ParsedSitemap, SitemapNode } from './types';
 import type { TagGroup } from '../utils/tag-groups';
 import { resolveTagColor, injectDefaultTagMetadata } from '../utils/tag-groups';
 
@@ -89,8 +89,6 @@ export interface SitemapLayoutResult {
 // ============================================================
 
 const CHAR_WIDTH = 7.5;
-const LABEL_FONT_SIZE = 13;
-const META_FONT_SIZE = 11;
 const META_LINE_HEIGHT = 16;
 const HEADER_HEIGHT = 28;
 const SEPARATOR_GAP = 6;
@@ -105,7 +103,6 @@ const CONTAINER_LABEL_HEIGHT = 28;
 const CONTAINER_META_LINE_HEIGHT = 16;
 
 // Legend (kanban-style pills)
-const LEGEND_GAP = 30;
 const LEGEND_HEIGHT = 28;
 const LEGEND_PILL_PAD = 16;
 const LEGEND_PILL_FONT_W = 11 * 0.6;
@@ -162,16 +159,6 @@ function resolveNodeColor(
 
 const OVERLAP_GAP = 20;
 
-function countDescendantNodes(node: SitemapNode, hiddenCounts?: Map<string, number>): number {
-  let count = 0;
-  for (const child of node.children) {
-    count += (child.isContainer ? 0 : 1) + countDescendantNodes(child, hiddenCounts);
-    const hc = hiddenCounts?.get(child.id);
-    if (hc) count += hc;
-  }
-  return count;
-}
-
 // ============================================================
 // Legend
 // ============================================================

package/src/sitemap/parser.ts

@@ -5,7 +5,7 @@
 import type { PaletteColors } from '../palettes';
 import { resolveColor } from '../colors';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
-import type { TagGroup, TagEntry } from '../utils/tag-groups';
+import type { TagGroup } from '../utils/tag-groups';
 import { isTagBlockHeading, matchTagBlockHeading, validateTagValues } from '../utils/tag-groups';
 import {
   measureIndent,
@@ -17,7 +17,6 @@ import {
 } from '../utils/parsing';
 import type {
   SitemapNode,
-  SitemapEdge,
   SitemapDirection,
   ParsedSitemap,
 } from './types';

package/src/sitemap/renderer.ts

@@ -10,9 +10,6 @@ import { mix } from '../palettes/color-utils';
 import type { ParsedSitemap } from './types';
 import type {
   SitemapLayoutResult,
-  SitemapLayoutNode,
-  SitemapLayoutEdge,
-  SitemapContainerBounds,
   SitemapLegendGroup,
 } from './layout';
 import {
@@ -130,9 +127,9 @@ export function renderSitemap(
   const fixedTitle = fixedLegend && !!parsed.title;
   const fixedTitleH = fixedTitle ? TITLE_HEIGHT : 0;
   const legendReserveH = fixedLegend ? LEGEND_HEIGHT + LEGEND_FIXED_GAP : 0;
-  // Space reserved above content (title only), and below content (legend)
-  const fixedReserveTop = fixedTitleH;
-  const fixedReserveBottom = legendReserveH;
+  // Space reserved above content (title + legend)
+  const fixedReserveTop = fixedTitleH + legendReserveH;
+  const fixedReserveBottom = 0;
   // Title inside scaled group only when legend is NOT fixed
   const titleOffset = !fixedTitle && parsed.title ? TITLE_HEIGHT : 0;
 
@@ -546,7 +543,7 @@ export function renderSitemap(
     const legendParent = svg
       .append('g')
       .attr('class', 'sitemap-legend-fixed')
-      .attr('transform', `translate(0, ${height - DIAGRAM_PADDING - LEGEND_HEIGHT})`);
+      .attr('transform', `translate(0, ${DIAGRAM_PADDING + fixedTitleH})`);
     if (activeTagGroup) {
       legendParent.attr('data-legend-active', activeTagGroup.toLowerCase());
     }

package/src/utils/arrows.ts

@@ -13,15 +13,15 @@ export interface ParsedArrow {
   async: boolean;
 }
 
-// Forward (call) patterns
-const SYNC_LABELED_RE = /^(\S+)\s+-(.+)->\s+(\S+)$/;
-const ASYNC_LABELED_RE = /^(\S+)\s+~(.+)~>\s+(\S+)$/;
+// Forward (call) patterns — participant names may contain spaces, so use non-greedy (.+?)
+const SYNC_LABELED_RE = /^(.+?)\s+-(.+)->\s+(.+)$/;
+const ASYNC_LABELED_RE = /^(.+?)\s+~(.+)~>\s+(.+)$/;
 
 // Deprecated patterns — produce errors
-const RETURN_SYNC_LABELED_RE = /^(\S+)\s+<-(.+)-\s+(\S+)$/;
-const RETURN_ASYNC_LABELED_RE = /^(\S+)\s+<~(.+)~\s+(\S+)$/;
-const BIDI_SYNC_RE = /^(\S+)\s+<-(.+)->\s+(\S+)$/;
-const BIDI_ASYNC_RE = /^(\S+)\s+<~(.+)~>\s+(\S+)$/;
+const RETURN_SYNC_LABELED_RE = /^(.+?)\s+<-(.+)-\s+(.+)$/;
+const RETURN_ASYNC_LABELED_RE = /^(.+?)\s+<~(.+)~\s+(.+)$/;
+const BIDI_SYNC_RE = /^(.+?)\s+<-(.+)->\s+(.+)$/;
+const BIDI_ASYNC_RE = /^(.+?)\s+<~(.+)~>\s+(.+)$/;
 
 const ARROW_CHARS = ['->', '~>'];
 

package/src/utils/duration.ts

@@ -0,0 +1,212 @@
+// ============================================================
+// Duration & Business Day Arithmetic
+// ============================================================
+
+import type { Duration, DurationUnit, GanttHolidays, Offset, Weekday } from '../gantt/types';
+
+// ── Weekday constants ─────────────────────────────────────
+
+/** JS Date.getDay() → Weekday mapping (0=Sun, 1=Mon, ..., 6=Sat) */
+const JS_DAY_TO_WEEKDAY: Weekday[] = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
+
+/**
+ * Check if a date is a workday (not a weekend and not a holiday).
+ */
+export function isWorkday(
+  date: Date,
+  workweek: Weekday[],
+  holidaySet: Set<string>,
+): boolean {
+  const dayName = JS_DAY_TO_WEEKDAY[date.getDay()];
+  if (!workweek.includes(dayName)) return false;
+  if (holidaySet.has(formatDateKey(date))) return false;
+  return true;
+}
+
+/**
+ * Format a Date as YYYY-MM-DD for holiday set lookups.
+ */
+export function formatDateKey(date: Date): string {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  return `${y}-${m}-${d}`;
+}
+
+/**
+ * Build a Set of holiday date strings for efficient lookup.
+ * Expands date ranges into individual dates.
+ */
+export function buildHolidaySet(holidays: GanttHolidays): Set<string> {
+  const set = new Set<string>();
+
+  for (const h of holidays.dates) {
+    set.add(h.date);
+  }
+
+  for (const range of holidays.ranges) {
+    const start = new Date(range.startDate + 'T00:00:00');
+    const end = new Date(range.endDate + 'T00:00:00');
+    const current = new Date(start);
+    while (current <= end) {
+      set.add(formatDateKey(current));
+      current.setDate(current.getDate() + 1);
+    }
+  }
+
+  return set;
+}
+
+/**
+ * Add business days to a start date, skipping weekends and holidays.
+ *
+ * For fractional business days, rounds to the nearest whole day first.
+ * Handles both positive amounts (forward) and zero (returns start date).
+ */
+export function addBusinessDays(
+  startDate: Date,
+  count: number,
+  workweek: Weekday[],
+  holidaySet: Set<string>,
+  direction: 1 | -1 = 1,
+): Date {
+  const days = Math.round(Math.abs(count));
+  if (days === 0) return new Date(startDate);
+
+  const current = new Date(startDate);
+  let remaining = days;
+
+  while (remaining > 0) {
+    current.setDate(current.getDate() + direction);
+    if (isWorkday(current, workweek, holidaySet)) {
+      remaining--;
+    }
+  }
+
+  return current;
+}
+
+/**
+ * Add a gantt duration to a start date, producing an end date.
+ *
+ * Calendar units (d, w, m, q, y) ignore holidays.
+ * Business day units (bd) skip weekends and holidays.
+ */
+export function addGanttDuration(
+  startDate: Date,
+  duration: Duration,
+  holidays: GanttHolidays,
+  holidaySet: Set<string>,
+  direction: 1 | -1 = 1,
+): Date {
+  const { amount, unit } = duration;
+
+  switch (unit) {
+    case 'bd':
+      return addBusinessDays(startDate, amount, holidays.workweek, holidaySet, direction);
+
+    case 'd': {
+      const result = new Date(startDate);
+      result.setDate(result.getDate() + Math.round(amount) * direction);
+      return result;
+    }
+
+    case 'w': {
+      const result = new Date(startDate);
+      result.setDate(result.getDate() + Math.round(amount * 7) * direction);
+      return result;
+    }
+
+    case 'm': {
+      const result = new Date(startDate);
+      const wholeMonths = direction === -1 ? Math.round(amount) : Math.floor(amount);
+      const fractionalDays = direction === -1 ? 0 : Math.round((amount - wholeMonths) * 30);
+      result.setMonth(result.getMonth() + wholeMonths * direction);
+      if (fractionalDays > 0) {
+        result.setDate(result.getDate() + fractionalDays * direction);
+      }
+      return result;
+    }
+
+    case 'q': {
+      const result = new Date(startDate);
+      const totalMonths = amount * 3;
+      const wholeMonths = direction === -1 ? Math.round(totalMonths) : Math.floor(totalMonths);
+      const fractionalDays = direction === -1 ? 0 : Math.round((totalMonths - wholeMonths) * 30);
+      result.setMonth(result.getMonth() + wholeMonths * direction);
+      if (fractionalDays > 0) {
+        result.setDate(result.getDate() + fractionalDays * direction);
+      }
+      return result;
+    }
+
+    case 'y': {
+      const result = new Date(startDate);
+      const wholeYears = direction === -1 ? Math.round(amount) : Math.floor(amount);
+      const fractionalMonths = direction === -1 ? 0 : Math.round((amount - wholeYears) * 12);
+      result.setFullYear(result.getFullYear() + wholeYears * direction);
+      if (fractionalMonths > 0) {
+        result.setMonth(result.getMonth() + fractionalMonths * direction);
+      }
+      return result;
+    }
+  }
+}
+
+/**
+ * Parse a duration string like "3bd" or "5d".
+ */
+export function parseDuration(s: string): Duration | null {
+  const match = s.trim().match(/^(\d+(?:\.\d+)?)(d|bd|w|m|q|y)$/);
+  if (!match) return null;
+  return { amount: parseFloat(match[1]), unit: match[2] as DurationUnit };
+}
+
+/**
+ * Parse an offset string like "5bd", "-3bd", or "0d".
+ * Returns null if the format is invalid.
+ * Explicit '+' prefix (e.g. "+5bd") returns null — caller should warn.
+ */
+export function parseOffset(value: string): Offset | null {
+  const trimmed = value.trim();
+  let direction: 1 | -1 = 1;
+  let remainder = trimmed;
+
+  if (trimmed.startsWith('-')) {
+    direction = -1;
+    remainder = trimmed.slice(1);
+  } else if (trimmed.startsWith('+')) {
+    return null; // explicit + is not supported
+  }
+
+  const duration = parseDuration(remainder);
+  if (!duration) return null;
+  return { duration, direction };
+}
+
+/**
+ * Parse a date string (YYYY-MM-DD, YYYY-MM, or YYYY) into a Date object.
+ * Always returns midnight local time on the first available day.
+ */
+export function parseGanttDate(s: string): Date {
+  const parts = s.split('-').map(p => parseInt(p, 10));
+  const year = parts[0];
+  const month = parts.length >= 2 ? parts[1] - 1 : 0; // JS months are 0-based
+  const day = parts.length >= 3 ? parts[2] : 1;
+  return new Date(year, month, day);
+}
+
+/**
+ * Format a Date as YYYY-MM-DD string.
+ */
+export function formatGanttDate(date: Date): string {
+  return formatDateKey(date);
+}
+
+/**
+ * Calculate the difference in calendar days between two dates.
+ */
+export function daysBetween(a: Date, b: Date): number {
+  const msPerDay = 86400000;
+  return Math.round((b.getTime() - a.getTime()) / msPerDay);
+}

package/src/utils/export-container.ts

@@ -0,0 +1,40 @@
+import { FONT_FAMILY } from '../fonts';
+
+/**
+ * Creates an offscreen DOM container at the given dimensions, runs `fn` inside it,
+ * then removes it (try/finally). Returns whatever `fn` returns.
+ */
+export function runInExportContainer<T>(
+  width: number,
+  height: number,
+  fn: (container: HTMLDivElement) => T,
+): T {
+  const container = document.createElement('div');
+  container.style.width = `${width}px`;
+  container.style.height = `${height}px`;
+  container.style.position = 'absolute';
+  container.style.left = '-9999px';
+  document.body.appendChild(container);
+  try {
+    return fn(container);
+  } finally {
+    document.body.removeChild(container);
+  }
+}
+
+/**
+ * Extracts the SVG element from an export container, applies required export attributes
+ * (xmlns, fontFamily, transparent background if requested), and returns its outerHTML.
+ * Returns '' if no SVG element is found.
+ */
+export function extractExportSvg(
+  container: HTMLElement,
+  theme: 'light' | 'dark' | 'transparent',
+): string {
+  const svgEl = container.querySelector('svg');
+  if (!svgEl) return '';
+  if (theme === 'transparent') svgEl.style.background = 'none';
+  svgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+  svgEl.style.fontFamily = FONT_FAMILY;
+  return svgEl.outerHTML;
+}