agentic-mermaid 0.1.0 → 0.1.2

package/src/timeline/layout.ts

@@ -1,381 +0,0 @@
-import type {
-  TimelineDiagram,
-  PositionedTimelineDiagram,
-  PositionedTimelineSection,
-  PositionedTimelinePeriod,
-  PositionedTimelineEvent,
-} from './types.ts'
-import type { RenderOptions } from '../types.ts'
-import { measureMultilineText, measureTextWidth } from '../text-metrics.ts'
-import { STROKE_WIDTHS, applyTextTransform, resolveRenderStyle } from '../styles.ts'
-import type { RenderStyleDefaults } from '../styles.ts'
-import { stripFormattingTags } from '../multiline-utils.ts'
-
-// ============================================================================
-// Timeline diagram layout engine
-//
-// Computes direct coordinates for a horizontal timeline with:
-//   - optional section frames
-//   - period pills above the rail
-//   - stacked event cards below the rail
-// ============================================================================
-
-const TL = {
-  paddingX: 32,
-  paddingY: 28,
-  titleFontSize: 18,
-  titleFontWeight: 600,
-  titleGap: 24,
-  titleWrapWidth: 420,
-  sectionHeaderHeight: 24,
-  sectionFontSize: 12,
-  sectionFontWeight: 600,
-  sectionHeaderPadX: 12,
-  sectionHeaderGap: 14,
-  sectionWrapWidth: 168,
-  sectionPadX: 18,
-  sectionPadBottom: 18,
-  sectionGap: 28,
-  columnGap: 24,
-  pillFontSize: 12,
-  pillFontWeight: 600,
-  pillWrapWidth: 116,
-  pillPadX: 12,
-  pillPadY: 8,
-  pillMinWidth: 72,
-  railToPillGap: 22,
-  railToEventsGap: 28,
-  markerRadius: 8,
-  eventFontSize: 12,
-  eventFontWeight: 400,
-  eventWrapWidth: 148,
-  eventPadX: 14,
-  eventPadY: 10,
-  eventMinWidth: 128,
-  eventGap: 10,
-} as const
-
-/** Shared by layout (sizing) and renderer (drawing) — keep it single-sourced. */
-export const TIMELINE_STYLE_DEFAULTS: RenderStyleDefaults = {
-  nodeLabelFontSize: TL.eventFontSize,
-  edgeLabelFontSize: TL.pillFontSize,
-  groupHeaderFontSize: TL.sectionFontSize,
-  nodeLabelFontWeight: TL.eventFontWeight,
-  edgeLabelFontWeight: TL.pillFontWeight,
-  groupHeaderFontWeight: TL.sectionFontWeight,
-  nodePaddingX: TL.eventPadX,
-  nodePaddingY: TL.eventPadY,
-  nodeCornerRadius: 0,
-  nodeLineWidth: STROKE_WIDTHS.outerBox,
-  edgeLineWidth: 1.5,
-  groupCornerRadius: 0,
-  groupPaddingX: TL.sectionPadX,
-  groupPaddingY: TL.sectionPadBottom,
-  groupLabelPaddingX: TL.sectionHeaderPadX,
-  groupLineWidth: STROKE_WIDTHS.outerBox,
-}
-
-interface PeriodMetric {
-  label: string
-  pillWidth: number
-  pillHeight: number
-  columnWidth: number
-  stackHeight: number
-  events: Array<{ text: string; width: number; height: number }>
-}
-
-interface SectionMetric {
-  label?: string
-  headerWidth: number
-  innerWidth: number
-  columnAreaWidth: number
-  periods: PeriodMetric[]
-  maxStackHeight: number
-}
-
-/**
- * Lay out a parsed timeline diagram.
- */
-export function layoutTimelineDiagram(
-  diagram: TimelineDiagram,
-  options: RenderOptions = {}
-): PositionedTimelineDiagram {
-  const style = resolveRenderStyle(options, TIMELINE_STYLE_DEFAULTS)
-  const hasNamedSections = diagram.sections.some(section => !!section.label)
-  const showSectionFrames = diagram.sections.length > 1 || hasNamedSections
-  const sectionHeaderHeight = hasNamedSections ? Math.max(TL.sectionHeaderHeight, style.groupHeaderFontSize + style.groupPaddingY) : 0
-  const sectionPadX = showSectionFrames ? style.groupPaddingX : 0
-  const titleText = diagram.title
-    ? wrapTimelineText(applyTextTransform(diagram.title, style.groupTextTransform), TL.titleWrapWidth, TL.titleFontSize, TL.titleFontWeight)
-    : undefined
-
-  const titleMetrics = titleText
-    ? measureMultilineText(titleText, TL.titleFontSize, TL.titleFontWeight)
-    : undefined
-
-  const metrics: SectionMetric[] = diagram.sections.map(section => {
-    const wrappedSectionLabel = section.label
-      ? wrapTimelineText(applyTextTransform(section.label, style.groupTextTransform), TL.sectionWrapWidth, style.groupHeaderFontSize, style.groupHeaderFontWeight)
-      : undefined
-    const periodMetrics: PeriodMetric[] = section.periods.map(period => {
-      const wrappedPeriodLabel = wrapTimelineText(applyTextTransform(period.label, style.edgeTextTransform), TL.pillWrapWidth, style.edgeLabelFontSize, style.edgeLabelFontWeight)
-      const pillText = measureMultilineText(wrappedPeriodLabel, style.edgeLabelFontSize, style.edgeLabelFontWeight)
-      const pillWidth = Math.max(TL.pillMinWidth, pillText.width + style.nodePaddingX * 2)
-      const pillHeight = pillText.height + style.nodePaddingY * 2
-
-      const eventMetrics = period.events.map(event => {
-        const wrappedEventText = wrapTimelineText(applyTextTransform(event.text, style.nodeTextTransform), TL.eventWrapWidth, style.nodeLabelFontSize, style.nodeLabelFontWeight)
-        const text = measureMultilineText(wrappedEventText, style.nodeLabelFontSize, style.nodeLabelFontWeight)
-        return {
-          text: wrappedEventText,
-          width: Math.max(TL.eventMinWidth, text.width + style.nodePaddingX * 2),
-          height: text.height + style.nodePaddingY * 2,
-        }
-      })
-
-      const columnWidth = Math.max(
-        pillWidth,
-        ...eventMetrics.map(event => event.width),
-      )
-
-      const stackHeight = eventMetrics.reduce((sum, event, index) => {
-        const gap = index === 0 ? 0 : TL.eventGap
-        return sum + gap + event.height
-      }, 0)
-
-      return {
-        label: wrappedPeriodLabel,
-        pillWidth,
-        pillHeight,
-        columnWidth,
-        stackHeight,
-        events: eventMetrics,
-      }
-    })
-
-    const columnAreaWidth = periodMetrics.reduce((sum, period, index) => {
-      const gap = index === 0 ? 0 : TL.columnGap
-      return sum + gap + period.columnWidth
-    }, 0)
-
-    const headerWidth = wrappedSectionLabel
-      ? measureMultilineText(wrappedSectionLabel, style.groupHeaderFontSize, style.groupHeaderFontWeight).width + style.groupLabelPaddingX * 2
-      : 0
-
-    const innerWidth = Math.max(columnAreaWidth, headerWidth)
-    const maxStackHeight = Math.max(0, ...periodMetrics.map(period => period.stackHeight))
-
-    return {
-      label: wrappedSectionLabel,
-      headerWidth,
-      innerWidth,
-      columnAreaWidth,
-      periods: periodMetrics,
-      maxStackHeight,
-    }
-  })
-
-  const maxPillHeight = Math.max(
-    0,
-    ...metrics.flatMap(section => section.periods.map(period => period.pillHeight)),
-  )
-
-  let contentTop = TL.paddingY
-  if (titleMetrics) {
-    contentTop += titleMetrics.height
-    contentTop += TL.titleGap
-  }
-
-  const pillY = contentTop + sectionHeaderHeight + (hasNamedSections ? TL.sectionHeaderGap : 0)
-  const railY = pillY + maxPillHeight + TL.railToPillGap
-  const eventsTop = railY + TL.railToEventsGap
-
-  let cursorX = TL.paddingX
-  const sections: PositionedTimelineSection[] = []
-  let maxBottom = railY + TL.markerRadius
-
-  for (let sectionIndex = 0; sectionIndex < diagram.sections.length; sectionIndex++) {
-    const section = diagram.sections[sectionIndex]!
-    const metric = metrics[sectionIndex]!
-    const sectionWidth = metric.innerWidth + sectionPadX * 2
-    const columnStartX = cursorX + sectionPadX + (metric.innerWidth - metric.columnAreaWidth) / 2
-
-    let periodCursorX = columnStartX
-    const periods: PositionedTimelinePeriod[] = []
-    let sectionBottom = railY + TL.markerRadius
-
-    for (let periodIndex = 0; periodIndex < section.periods.length; periodIndex++) {
-      const period = section.periods[periodIndex]!
-      const periodMetric = metric.periods[periodIndex]!
-      const centerX = periodCursorX + periodMetric.columnWidth / 2
-
-      let eventY = eventsTop
-      const events: PositionedTimelineEvent[] = period.events.map((event, eventIndex) => {
-        const eventMetric = periodMetric.events[eventIndex]!
-        const positioned: PositionedTimelineEvent = {
-          id: event.id,
-          sectionId: section.id,
-          periodId: period.id,
-          periodLabel: periodMetric.label,
-          text: eventMetric.text,
-          x: centerX - eventMetric.width / 2,
-          y: eventY,
-          width: eventMetric.width,
-          height: eventMetric.height,
-        }
-        eventY += eventMetric.height + TL.eventGap
-        return positioned
-      })
-
-      const stemBottomY = events.length > 0 ? events[0]!.y - 10 : railY + 16
-
-      periods.push({
-        id: period.id,
-        sectionId: section.id,
-        label: periodMetric.label,
-        centerX,
-        markerY: railY,
-        pillX: centerX - periodMetric.pillWidth / 2,
-        pillY,
-        pillWidth: periodMetric.pillWidth,
-        pillHeight: periodMetric.pillHeight,
-        stemTopY: railY + TL.markerRadius,
-        stemBottomY,
-        events,
-      })
-
-      if (events.length > 0) {
-        const lastEvent = events[events.length - 1]!
-        sectionBottom = Math.max(sectionBottom, lastEvent.y + lastEvent.height)
-      }
-
-      periodCursorX += periodMetric.columnWidth + TL.columnGap
-    }
-
-    sectionBottom += style.groupPaddingY
-    maxBottom = Math.max(maxBottom, sectionBottom)
-
-    sections.push({
-      id: section.id,
-      label: metric.label,
-      x: cursorX,
-      y: contentTop,
-      width: sectionWidth,
-      height: sectionBottom - contentTop,
-      framed: showSectionFrames,
-      headerHeight: sectionHeaderHeight,
-      periods,
-    })
-
-    cursorX += sectionWidth
-    if (sectionIndex < diagram.sections.length - 1) {
-      cursorX += showSectionFrames ? TL.sectionGap : TL.columnGap
-    }
-  }
-
-  const width = cursorX + TL.paddingX
-  const height = maxBottom + TL.paddingY
-  const allPeriods = sections.flatMap(section => section.periods)
-  const firstCenter = allPeriods[0]?.centerX ?? TL.paddingX
-  const lastCenter = allPeriods[allPeriods.length - 1]?.centerX ?? width - TL.paddingX
-
-  return {
-    width,
-    height,
-    title: titleText
-      ? {
-          text: titleText,
-          x: width / 2,
-          y: TL.paddingY + titleMetrics!.height / 2,
-        }
-      : undefined,
-    accessibilityTitle: diagram.accessibilityTitle,
-    accessibilityDescription: diagram.accessibilityDescription,
-    rail: {
-      x1: firstCenter === lastCenter ? firstCenter - 42 : firstCenter,
-      x2: firstCenter === lastCenter ? lastCenter + 42 : lastCenter,
-      y: railY,
-    },
-    sections,
-  }
-}
-
-function wrapTimelineText(
-  text: string,
-  maxWidth: number,
-  fontSize: number,
-  fontWeight: number,
-): string {
-  return text
-    .split('\n')
-    .flatMap(line => wrapTimelineLine(line, maxWidth, fontSize, fontWeight))
-    .join('\n')
-}
-
-function wrapTimelineLine(
-  line: string,
-  maxWidth: number,
-  fontSize: number,
-  fontWeight: number,
-): string[] {
-  const plainLine = stripFormattingTags(line)
-  if (measureTextWidth(plainLine, fontSize, fontWeight) <= maxWidth) {
-    return [line]
-  }
-
-  const words = line.trim().split(/\s+/)
-  if (words.length <= 1) {
-    return breakLongToken(line, maxWidth, fontSize, fontWeight)
-  }
-
-  const wrapped: string[] = []
-  let current = ''
-
-  for (const word of words) {
-    const candidate = current ? `${current} ${word}` : word
-    const candidateWidth = measureTextWidth(stripFormattingTags(candidate), fontSize, fontWeight)
-
-    if (candidateWidth <= maxWidth) {
-      current = candidate
-      continue
-    }
-
-    if (current) {
-      wrapped.push(current)
-      current = ''
-    }
-
-    if (measureTextWidth(stripFormattingTags(word), fontSize, fontWeight) > maxWidth) {
-      wrapped.push(...breakLongToken(word, maxWidth, fontSize, fontWeight))
-    } else {
-      current = word
-    }
-  }
-
-  if (current) wrapped.push(current)
-  return wrapped
-}
-
-function breakLongToken(
-  token: string,
-  maxWidth: number,
-  fontSize: number,
-  fontWeight: number,
-): string[] {
-  const chunks: string[] = []
-  let current = ''
-
-  for (const char of token) {
-    const candidate = current + char
-    if (current && measureTextWidth(stripFormattingTags(candidate), fontSize, fontWeight) > maxWidth) {
-      chunks.push(current)
-      current = char
-      continue
-    }
-
-    current = candidate
-  }
-
-  if (current) chunks.push(current)
-  return chunks
-}

package/src/timeline/parser.ts

@@ -1,215 +0,0 @@
-import type { TimelineDiagram, TimelineSection, TimelinePeriod, TimelineEvent } from './types.ts'
-import { normalizeBrTags } from '../multiline-utils.ts'
-import { syntaxError } from '../shared/syntax-error.ts'
-
-// ============================================================================
-// Timeline diagram parser
-//
-// Parses Mermaid timeline syntax into a TimelineDiagram structure.
-//
-// Supported syntax:
-//   timeline
-//   title Timeline Title
-//   section Section Label
-//   2020 : Event 1
-//   2021 : Event 1 : Event 2
-//        : Continued event for the previous period
-// ============================================================================
-
-/**
- * Parse a Mermaid timeline diagram.
- * Expects the first line to be "timeline".
- */
-export function parseTimelineDiagram(lines: string[]): TimelineDiagram {
-  const diagram: TimelineDiagram = { sections: [] }
-
-  let currentSection: TimelineSection | undefined
-  let currentPeriod: TimelinePeriod | undefined
-  let sectionIndex = 0
-  let periodIndex = 0
-  let eventIndex = 0
-
-  const ensureSection = (): TimelineSection => {
-    if (currentSection) return currentSection
-    currentSection = {
-      id: `section-${sectionIndex++}`,
-      periods: [],
-    }
-    diagram.sections.push(currentSection)
-    return currentSection
-  }
-
-  const pushEvents = (period: TimelinePeriod, rawEvents: string[]): void => {
-    for (const rawEvent of rawEvents) {
-      const normalized = normalizeBrTags(rawEvent.trim())
-      if (!normalized) continue
-
-      const event: TimelineEvent = {
-        id: `event-${eventIndex++}`,
-        text: normalized,
-      }
-      period.events.push(event)
-    }
-  }
-
-  for (let i = 1; i < lines.length; i++) {
-    const line = lines[i]!
-
-    if (/^timeline\b/i.test(line)) continue
-    if (/^#/.test(line)) continue
-
-    const titleMatch = line.match(/^title\s+(.+)$/i)
-    if (titleMatch) {
-      diagram.title = normalizeBrTags(titleMatch[1]!.trim())
-      continue
-    }
-
-    const accTitleMatch = line.match(/^accTitle\s*:\s*(.+)$/i)
-    if (accTitleMatch) {
-      diagram.accessibilityTitle = normalizeBrTags(accTitleMatch[1]!.trim())
-      continue
-    }
-
-    const accDescrMatch = line.match(/^accDescr\s*:\s*(.+)$/i)
-    if (accDescrMatch) {
-      diagram.accessibilityDescription = normalizeBrTags(accDescrMatch[1]!.trim())
-      continue
-    }
-
-    if (/^accDescr\s*\{\s*$/i.test(line)) {
-      const descriptionLines: string[] = []
-      let foundClosingBrace = false
-
-      while (++i < lines.length) {
-        const blockLine = lines[i]!
-        if (blockLine === '}') {
-          foundClosingBrace = true
-          break
-        }
-        descriptionLines.push(blockLine)
-      }
-
-      if (!foundClosingBrace) {
-        throw new Error('Timeline accDescr block was not closed with "}"')
-      }
-
-      diagram.accessibilityDescription = normalizeBrTags(descriptionLines.join('\n').trim())
-      continue
-    }
-
-    const sectionMatch = line.match(/^section\s+([^:]+)$/i)
-    if (sectionMatch) {
-      currentSection = {
-        id: `section-${sectionIndex++}`,
-        label: normalizeBrTags(sectionMatch[1]!.trim()),
-        periods: [],
-      }
-      diagram.sections.push(currentSection)
-      currentPeriod = undefined
-      continue
-    }
-
-    const continuationMatch = line.match(/^:\s+(.+)$/)
-    if (continuationMatch) {
-      if (!currentPeriod) {
-        throw new Error('Timeline continuation found before any period was declared')
-      }
-      pushEvents(currentPeriod, splitTimelineEvents(`: ${continuationMatch[1]!}`))
-      continue
-    }
-
-    const periodMatch = line.match(/^([^:#\n]+?)(\s*:\s+.+)$/)
-    if (periodMatch) {
-      const periodLabel = normalizeBrTags(periodMatch[1]!.trim())
-      const events = splitTimelineEvents(periodMatch[2]!)
-
-      if (!periodLabel) {
-        throw syntaxError({
-          what: `Invalid timeline period: "${line}"`,
-          expectedForm: 'Period : Event[ : Event…]',
-          example: '2025 : Launch : Beta',
-        })
-      }
-
-      const period: TimelinePeriod = {
-        id: `period-${periodIndex++}`,
-        label: periodLabel,
-        events: [],
-      }
-
-      pushEvents(period, events)
-
-      if (period.events.length === 0) {
-        throw new Error(`Timeline period "${periodLabel}" must include at least one event`)
-      }
-
-      ensureSection().periods.push(period)
-      currentPeriod = period
-      continue
-    }
-
-    // Upstream parity: a bare line (no colon) is a period with no events —
-    // mermaid renders these, and the upstream suite's two-task sections rely
-    // on it. Malformed colon lines still fall through to the loud throw.
-    if (!line.includes(':') && line.trim().length > 0) {
-      const period: TimelinePeriod = {
-        id: `period-${periodIndex++}`,
-        label: normalizeBrTags(line.trim()),
-        events: [],
-      }
-      ensureSection().periods.push(period)
-      currentPeriod = period
-      continue
-    }
-
-    throw syntaxError({
-      what: `Unsupported timeline syntax: "${line}"`,
-      expectedForm: 'a title, a section, or a period (Period : Event…)',
-      example: '2025 : Launch',
-    })
-  }
-
-  // Upstream parity: a timeline with a title or sections but no periods still
-  // renders (as its header/section furniture). Only a timeline with NOTHING
-  // is unrenderable.
-  if (diagram.sections.length === 0 && !diagram.title && !diagram.accessibilityTitle && !diagram.accessibilityDescription) {
-    throw new Error('Timeline diagram must include at least one period, section, or title')
-  }
-
-  return diagram
-}
-
-function splitTimelineEvents(raw: string): string[] {
-  const events: string[] = []
-  let index = 0
-
-  while (index < raw.length) {
-    while (index < raw.length && /\s/.test(raw[index]!)) index++
-    if (index >= raw.length) break
-
-    if (raw[index] !== ':') {
-      throw syntaxError({
-        what: `Invalid timeline event list: "${raw}"`,
-        expectedForm: 'events separated by " : "',
-        example: 'Launch : Beta',
-      })
-    }
-
-    index++
-    if (index >= raw.length || !/\s/.test(raw[index]!)) {
-      throw new Error(`Timeline events must use ": " separators: "${raw}"`)
-    }
-
-    while (index < raw.length && /\s/.test(raw[index]!)) index++
-    const start = index
-
-    while (index < raw.length) {
-      if (raw[index] === ':' && /\s/.test(raw[index + 1] ?? '')) break
-      index++
-    }
-
-    events.push(raw.slice(start, index).trim())
-  }
-
-  return events
-}