@oh-my-pi/pi-utils 16.0.6 → 16.0.8

package/src/vendor/mermaid-ascii/sequence/parser.ts

@@ -0,0 +1,207 @@
+import type { SequenceDiagram, Actor, Message, Block, Note } from './types'
+import { normalizeBrTags } from '../multiline-utils'
+
+// ============================================================================
+// Sequence diagram parser
+//
+// Parses Mermaid sequenceDiagram syntax into a SequenceDiagram structure.
+//
+// Supported syntax:
+//   participant A as Alice
+//   actor B as Bob
+//   A->>B: Solid arrow
+//   A-->>B: Dashed arrow
+//   A-)B: Open arrow
+//   A--)B: Dashed open arrow
+//   A->>+B: Activate target
+//   A-->>-B: Deactivate source
+//   loop Label ... end
+//   alt Label ... else Label ... end
+//   opt Label ... end
+//   par Label ... and Label ... end
+//   Note left of A: Text
+//   Note right of A: Text
+//   Note over A,B: Text
+// ============================================================================
+
+/**
+ * Parse a Mermaid sequence diagram.
+ * Expects the first line to be "sequenceDiagram".
+ */
+export function parseSequenceDiagram(lines: string[]): SequenceDiagram {
+  const diagram: SequenceDiagram = {
+    actors: [],
+    messages: [],
+    blocks: [],
+    notes: [],
+  }
+
+  // Track actor IDs to auto-create actors referenced in messages
+  const actorIds = new Set<string>()
+  // Track block nesting with a stack
+  const blockStack: Array<{ type: Block['type']; label: string; startIndex: number; dividers: Block['dividers'] }> = []
+
+  for (let i = 1; i < lines.length; i++) {
+    const line = lines[i]!
+
+    // --- Participant / Actor declaration ---
+    // "participant A as Alice" or "participant Alice"
+    // "actor B as Bob" or "actor Bob"
+    const actorMatch = line.match(/^(participant|actor)\s+(\S+?)(?:\s+as\s+(.+))?$/)
+    if (actorMatch) {
+      const type = actorMatch[1] as 'participant' | 'actor'
+      const id = actorMatch[2]!
+      const rawLabel = actorMatch[3]?.trim() ?? id
+      const label = normalizeBrTags(rawLabel)
+      if (!actorIds.has(id)) {
+        actorIds.add(id)
+        diagram.actors.push({ id, label, type })
+      }
+      continue
+    }
+
+    // --- Note ---
+    // "Note left of A: text" / "Note right of A: text" / "Note over A,B: text"
+    const noteMatch = line.match(/^Note\s+(left of|right of|over)\s+([^:]+):\s*(.+)$/i)
+    if (noteMatch) {
+      const posStr = noteMatch[1]!.toLowerCase()
+      const actorsStr = noteMatch[2]!.trim()
+      const text = normalizeBrTags(noteMatch[3]!.trim())
+      const noteActorIds = actorsStr.split(',').map(s => s.trim())
+
+      // Ensure actors exist
+      for (const aid of noteActorIds) {
+        ensureActor(diagram, actorIds, aid)
+      }
+
+      let position: 'left' | 'right' | 'over' = 'over'
+      if (posStr === 'left of') position = 'left'
+      else if (posStr === 'right of') position = 'right'
+
+      diagram.notes.push({
+        actorIds: noteActorIds,
+        text,
+        position,
+        afterIndex: diagram.messages.length - 1,
+      })
+      continue
+    }
+
+    // --- Block start: loop, alt, opt, par, critical, break, rect ---
+    const blockMatch = line.match(/^(loop|alt|opt|par|critical|break|rect)\s*(.*)$/)
+    if (blockMatch) {
+      const blockType = blockMatch[1] as Block['type']
+      const rawBlockLabel = blockMatch[2]?.trim() ?? ''
+      const label = normalizeBrTags(rawBlockLabel)
+      blockStack.push({
+        type: blockType,
+        label,
+        startIndex: diagram.messages.length,
+        dividers: [],
+      })
+      continue
+    }
+
+    // --- Block divider: else, and ---
+    const dividerMatch = line.match(/^(else|and)\s*(.*)$/)
+    if (dividerMatch && blockStack.length > 0) {
+      const rawDividerLabel = dividerMatch[2]?.trim() ?? ''
+      const label = normalizeBrTags(rawDividerLabel)
+      blockStack[blockStack.length - 1]!.dividers.push({
+        index: diagram.messages.length,
+        label,
+      })
+      continue
+    }
+
+    // --- Block end ---
+    if (line === 'end' && blockStack.length > 0) {
+      const completed = blockStack.pop()!
+      diagram.blocks.push({
+        type: completed.type,
+        label: completed.label,
+        startIndex: completed.startIndex,
+        endIndex: Math.max(diagram.messages.length - 1, completed.startIndex),
+        dividers: completed.dividers,
+      })
+      continue
+    }
+
+    // --- Message ---
+    // Patterns: A->>B, A-->>B, A-)B, A--)B, with optional +/- activation
+    // Format: FROM ARROW TO: LABEL
+    const msgMatch = line.match(
+      /^(\S+?)\s*(--?>?>|--?[)x]|--?>>|--?>)\s*([+-]?)(\S+?)\s*:\s*(.+)$/
+    )
+    if (msgMatch) {
+      const from = msgMatch[1]!
+      const arrow = msgMatch[2]!
+      const activationMark = msgMatch[3]
+      const to = msgMatch[4]!
+      const label = normalizeBrTags(msgMatch[5]!.trim())
+
+      // Ensure both actors exist
+      ensureActor(diagram, actorIds, from)
+      ensureActor(diagram, actorIds, to)
+
+      // Determine line style and arrow head from the arrow operator
+      const lineStyle = arrow.startsWith('--') ? 'dashed' : 'solid'
+      // ">>" = filled arrow, ")" or ">" alone = open arrow, "x" = cross (treat as filled)
+      const arrowHead = arrow.includes('>>') || arrow.includes('x') ? 'filled' : 'open'
+
+      const msg: Message = {
+        from,
+        to,
+        label,
+        lineStyle,
+        arrowHead,
+      }
+
+      // Activation/deactivation via +/- prefix on target
+      if (activationMark === '+') msg.activate = true
+      if (activationMark === '-') msg.deactivate = true
+
+      diagram.messages.push(msg)
+      continue
+    }
+
+    // --- Simplified message format: A->>B: Label (fallback with more relaxed regex) ---
+    const simpleMsgMatch = line.match(
+      /^(\S+?)\s*(->>|-->>|-\)|--\)|-x|--x|->|-->)\s*([+-]?)(\S+?)\s*:\s*(.+)$/
+    )
+    if (simpleMsgMatch) {
+      const from = simpleMsgMatch[1]!
+      const arrow = simpleMsgMatch[2]!
+      const activationMark = simpleMsgMatch[3]
+      const to = simpleMsgMatch[4]!
+      const label = normalizeBrTags(simpleMsgMatch[5]!.trim())
+
+      ensureActor(diagram, actorIds, from)
+      ensureActor(diagram, actorIds, to)
+
+      const lineStyle = arrow.startsWith('--') ? 'dashed' : 'solid'
+      const arrowHead = arrow.includes('>>') || arrow.includes('x') ? 'filled' : 'open'
+
+      const msg: Message = { from, to, label, lineStyle, arrowHead }
+      if (activationMark === '+') msg.activate = true
+      if (activationMark === '-') msg.deactivate = true
+
+      diagram.messages.push(msg)
+      continue
+    }
+
+    // --- activate / deactivate explicit commands ---
+    // These are handled implicitly via +/- on messages but can also appear standalone
+    // For now, we skip explicit activate/deactivate lines (they affect rendering only)
+  }
+
+  return diagram
+}
+
+/** Ensure an actor exists, creating a default participant if not */
+function ensureActor(diagram: SequenceDiagram, actorIds: Set<string>, id: string): void {
+  if (!actorIds.has(id)) {
+    actorIds.add(id)
+    diagram.actors.push({ id, label: id, type: 'participant' })
+  }
+}

package/src/vendor/mermaid-ascii/sequence/types.ts

@@ -0,0 +1,146 @@
+// ============================================================================
+// Sequence diagram types
+//
+// Models the parsed and positioned representations of a Mermaid sequence diagram.
+// Sequence diagrams show actor interactions over time (vertical timeline).
+// ============================================================================
+
+/** Parsed sequence diagram — logical structure from mermaid text */
+export interface SequenceDiagram {
+  /** Ordered list of actors/participants */
+  actors: Actor[]
+  /** Messages between actors in chronological order */
+  messages: Message[]
+  /** Structural blocks (loop, alt, opt, par, critical) */
+  blocks: Block[]
+  /** Notes attached to actors */
+  notes: Note[]
+}
+
+export interface Actor {
+  id: string
+  label: string
+  /** 'participant' renders as a box, 'actor' renders as a stick figure */
+  type: 'participant' | 'actor'
+}
+
+export interface Message {
+  from: string
+  to: string
+  label: string
+  /** Arrow style: solid line or dashed line */
+  lineStyle: 'solid' | 'dashed'
+  /** Arrow head: filled (closed) or open */
+  arrowHead: 'filled' | 'open'
+  /** Activate the target lifeline (+) */
+  activate?: boolean
+  /** Deactivate the source lifeline (-) */
+  deactivate?: boolean
+}
+
+export interface Block {
+  /** Block type keyword */
+  type: 'loop' | 'alt' | 'opt' | 'par' | 'critical' | 'break' | 'rect'
+  /** Label for the block header */
+  label: string
+  /** Index of the first message inside this block */
+  startIndex: number
+  /** Index of the last message inside this block (inclusive) */
+  endIndex: number
+  /** For alt/par blocks: indices where "else"/"and" dividers appear (message indices) */
+  dividers: Array<{ index: number; label: string }>
+}
+
+export interface Note {
+  /** Which actor(s) the note is attached to */
+  actorIds: string[]
+  /** Note text content */
+  text: string
+  /** Position relative to the actor(s) */
+  position: 'left' | 'right' | 'over'
+  /** Message index after which this note appears */
+  afterIndex: number
+}
+
+// ============================================================================
+// Positioned sequence diagram — ready for SVG rendering
+// ============================================================================
+
+export interface PositionedSequenceDiagram {
+  width: number
+  height: number
+  actors: PositionedActor[]
+  lifelines: Lifeline[]
+  messages: PositionedMessage[]
+  activations: Activation[]
+  blocks: PositionedBlock[]
+  notes: PositionedNote[]
+}
+
+export interface PositionedActor {
+  id: string
+  label: string
+  type: 'participant' | 'actor'
+  /** Center x of the actor box */
+  x: number
+  /** Top y of the actor box */
+  y: number
+  width: number
+  height: number
+}
+
+/** Vertical dashed line from actor to bottom of diagram */
+export interface Lifeline {
+  actorId: string
+  x: number
+  topY: number
+  bottomY: number
+}
+
+export interface PositionedMessage {
+  from: string
+  to: string
+  label: string
+  lineStyle: 'solid' | 'dashed'
+  arrowHead: 'filled' | 'open'
+  /** Start point (from actor's lifeline) */
+  x1: number
+  /** End point (to actor's lifeline) */
+  x2: number
+  /** Vertical position */
+  y: number
+  /** Whether this is a self-message (same actor) */
+  isSelf: boolean
+}
+
+/** Narrow rectangle on a lifeline showing active processing */
+export interface Activation {
+  actorId: string
+  x: number
+  topY: number
+  bottomY: number
+  width: number
+}
+
+export interface PositionedBlock {
+  type: Block['type']
+  label: string
+  x: number
+  y: number
+  width: number
+  height: number
+  /** Divider lines within the block (for alt/par) */
+  dividers: Array<{ y: number; label: string }>
+}
+
+export interface PositionedNote {
+  text: string
+  x: number
+  y: number
+  width: number
+  height: number
+  /** Actor IDs this note is attached to (for SVG attribution) */
+  actors?: string[]
+  /** Note position relative to actors (for SVG attribution) */
+  position?: 'left' | 'right' | 'over'
+}

package/src/vendor/mermaid-ascii/text-metrics.ts

@@ -0,0 +1,71 @@
+// ============================================================================
+// Terminal display width — used by the ASCII renderer
+//
+// Terminals render most characters in 1 column, but East Asian wide
+// characters (CJK ideographs, Hangul, kana, fullwidth forms) and
+// emoji-presentation glyphs occupy 2 columns. The ASCII canvas is a
+// cell-per-column grid, so its width math counts display columns rather
+// than code units.
+//
+// Width is delegated to Bun.stringWidth (wcwidth-style, locale-insensitive):
+// East Asian Wide/Fullwidth and emoji-presentation graphemes (incl. ZWJ
+// sequences and regional-indicator flags) measure 2; box-drawing, the
+// renderer's narrow arrowheads (◀ ▶ ►), and East Asian Ambiguous glyphs
+// measure 1. This matches the renderer's structural glyph set exactly.
+//
+// Text is measured in grapheme clusters (Intl.Segmenter): a cluster that
+// renders 2 columns is stored as its full string in one canvas cell
+// followed by WIDE_PAD in the continuation cell it covers. The ASCII
+// serializers drop WIDE_PAD cells when joining a row, so the emitted line
+// occupies exactly as many terminal columns as the canvas has cells.
+// ============================================================================
+
+/**
+ * Placeholder occupying the second cell of a fullwidth glyph on the ASCII
+ * canvas. U+0000 cannot appear in parsed Mermaid labels, is treated as
+ * occupied label content by canvas merging, and is stripped at
+ * serialization time. Invariant: a WIDE_PAD cell always sits immediately
+ * right of its lead cell; canvas writes keep the pair atomic.
+ */
+export const WIDE_PAD = '\u0000'
+
+const graphemeSegmenter = new Intl.Segmenter()
+
+/**
+ * Display width of a string in terminal columns, summed over grapheme
+ * clusters so it always equals `toCells(text).length`. ASCII-only strings
+ * take a fast path.
+ */
+export function displayWidth(text: string): number {
+  let ascii = true
+  for (let i = 0; i < text.length; i++) {
+    if (text.charCodeAt(i) > 0x7e) {
+      ascii = false
+      break
+    }
+  }
+  if (ascii) return text.length
+
+  let width = 0
+  for (const seg of graphemeSegmenter.segment(text)) {
+    width += Bun.stringWidth(seg.segment) >= 2 ? 2 : 1
+  }
+  return width
+}
+
+/**
+ * Expand a string into ASCII-canvas cells: each 2-column grapheme cluster
+ * is stored whole in one cell and followed by WIDE_PAD, so that
+ * `cells.length === displayWidth(text)`. Per-character placement loops can
+ * iterate the result with plain cell offsets.
+ */
+export function toCells(text: string): string[] {
+  const cells: string[] = []
+  for (const seg of graphemeSegmenter.segment(text)) {
+    cells.push(seg.segment)
+    if (Bun.stringWidth(seg.segment) >= 2) {
+      cells.push(WIDE_PAD)
+    }
+  }
+  return cells
+}

package/src/vendor/mermaid-ascii/types.ts

@@ -0,0 +1,164 @@
+// ============================================================================
+// Parsed graph — logical structure extracted from Mermaid text
+// ============================================================================
+
+export interface MermaidGraph {
+  direction: Direction
+  nodes: Map<string, MermaidNode>
+  edges: MermaidEdge[]
+  subgraphs: MermaidSubgraph[]
+  classDefs: Map<string, Record<string, string>>
+  /** Maps node IDs to their class names (from `class X className` or `:::className` shorthand) */
+  classAssignments: Map<string, string>
+  /** Maps node IDs to inline styles (from `style X fill:#f00,stroke:#333`) */
+  nodeStyles: Map<string, Record<string, string>>
+  /** Maps edge indices (or 'default') to inline styles from `linkStyle` directives */
+  linkStyles: Map<number | 'default', Record<string, string>>
+}
+
+export type Direction = 'TD' | 'TB' | 'LR' | 'BT' | 'RL'
+
+export interface MermaidNode {
+  id: string
+  label: string
+  shape: NodeShape
+}
+
+export type NodeShape =
+  | 'rectangle'
+  | 'rounded'
+  | 'diamond'
+  | 'stadium'
+  | 'circle'
+  // Batch 1 additions
+  | 'subroutine'     // [[text]]  — double-bordered rectangle
+  | 'doublecircle'   // (((text))) — concentric circles
+  | 'hexagon'        // {{text}}  — six-sided polygon
+  // Batch 2 additions
+  | 'cylinder'       // [(text)]  — database cylinder
+  | 'asymmetric'     // >text]    — flag/banner shape
+  | 'trapezoid'      // [/text\]  — wider bottom
+  | 'trapezoid-alt'  // [\text/]  — wider top
+  // Batch 3 state diagram pseudostates
+  | 'state-start'    // filled circle (start pseudostate)
+  | 'state-end'      // bullseye circle (end pseudostate)
+
+export interface MermaidEdge {
+  source: string
+  target: string
+  label?: string
+  style: EdgeStyle
+  /** Whether to render an arrowhead at the start (source end) of the edge */
+  hasArrowStart: boolean
+  /** Whether to render an arrowhead at the end (target end) of the edge */
+  hasArrowEnd: boolean
+}
+
+export type EdgeStyle = 'solid' | 'dotted' | 'thick'
+
+export interface MermaidSubgraph {
+  id: string
+  label: string
+  nodeIds: string[]
+  children: MermaidSubgraph[]
+  /** Optional direction override for this subgraph's internal layout */
+  direction?: Direction
+}
+
+// ============================================================================
+// Positioned graph — after ELK layout, ready for SVG rendering
+// ============================================================================
+
+export interface PositionedGraph {
+  width: number
+  height: number
+  nodes: PositionedNode[]
+  edges: PositionedEdge[]
+  groups: PositionedGroup[]
+}
+
+export interface PositionedNode {
+  id: string
+  label: string
+  shape: NodeShape
+  x: number
+  y: number
+  width: number
+  height: number
+  /** Inline styles resolved from classDef + explicit `style` statements — override theme defaults */
+  inlineStyle?: Record<string, string>
+}
+
+export interface PositionedEdge {
+  source: string
+  target: string
+  label?: string
+  style: EdgeStyle
+  hasArrowStart: boolean
+  hasArrowEnd: boolean
+  /** Full path including bends — array of {x, y} points */
+  points: Point[]
+  /** Layout-computed label center position (avoids label-label collisions) */
+  labelPosition?: Point
+  /** Inline styles resolved from `linkStyle` directives — override theme defaults */
+  inlineStyle?: Record<string, string>
+}
+
+export interface Point {
+  x: number
+  y: number
+}
+
+export interface PositionedGroup {
+  id: string
+  label: string
+  x: number
+  y: number
+  width: number
+  height: number
+  children: PositionedGroup[]
+}
+
+// ============================================================================
+// Render options — user-facing configuration
+//
+// Color theming uses CSS custom properties: --bg and --fg are required,
+// optional enrichment variables (--line, --accent, --muted, --surface,
+// --border) add richer color from Shiki themes or custom palettes.
+// See src/theme.ts for the full variable system.
+// ============================================================================
+
+export interface RenderOptions {
+  /** Background color → CSS variable --bg. Default: '#FFFFFF' */
+  bg?: string
+  /** Foreground / primary text color → CSS variable --fg. Default: '#27272A' */
+  fg?: string
+
+  // -- Optional enrichment colors (fall back to color-mix from bg/fg) --
+
+  /** Edge/connector color → CSS variable --line */
+  line?: string
+  /** Arrow heads, highlights → CSS variable --accent */
+  accent?: string
+  /** Secondary text, edge labels → CSS variable --muted */
+  muted?: string
+  /** Node/box fill tint → CSS variable --surface */
+  surface?: string
+  /** Node/group stroke color → CSS variable --border */
+  border?: string
+
+  /** Font family for all text. Default: 'Inter' */
+  font?: string
+  /** Canvas padding in px. Default: 40 */
+  padding?: number
+  /** Horizontal spacing between sibling nodes. Default: 24 */
+  nodeSpacing?: number
+  /** Vertical spacing between layers. Default: 40 */
+  layerSpacing?: number
+  /** Spacing between disconnected components. Default: nodeSpacing (24) */
+  componentSpacing?: number
+  /** Render with transparent background (no background style on SVG). Default: false */
+  transparent?: boolean
+  /** Enable hover tooltips on chart data points (xychart only). Default: false */
+  interactive?: boolean
+}