@diagrammo/dgmo 0.6.3 → 0.7.0

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/renderer.ts

@@ -1281,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);
@@ -1390,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);
@@ -1570,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);

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/renderer.ts

@@ -127,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;
 
@@ -543,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/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/legend-constants.ts

@@ -16,6 +16,7 @@ export const LEGEND_ENTRY_TRAIL = 8;
 export const LEGEND_GROUP_GAP = 12;
 export const LEGEND_EYE_SIZE = 14;
 export const LEGEND_EYE_GAP = 6;
+export const LEGEND_ICON_W = 20;
 
 // Eye icon SVG paths (14×14 viewBox)
 // Present only in org and sitemap legends (metadata visibility toggle)