zombie-mermaid 2.2.2 → 2.2.4

package/src/__tests__/ascii-class-parent-alignment-972.test.ts

@@ -0,0 +1,208 @@
+/**
+ * Regression tests for issue #972 — "ASCII class-diagram layout:
+ * multi-parent / overlap resolution," the second implementation stage of
+ * #964's fix (docs/decisions/ascii-class-diagram-x-coordinate-assignment-970.md),
+ * building on #971's single-parent alignment + universal compaction pass.
+ *
+ * #971 only computed a real desired position for a *singleton* block (no
+ * sibling at its level shares its exact parent-id set) with exactly one
+ * qualifying (strictly-shallower) parent. This fix adds the remaining
+ * block shapes #970's decision named: a block of more than one class
+ * sharing one qualifying-parent-set spreads evenly around that shared
+ * center; a block with more than one qualifying parent centers on the
+ * mean of their centers. Both reuse #971's exact compaction pass
+ * unchanged, which already handles "an aligned position collides with a
+ * sibling" — #972 does not add new nudging logic, only new
+ * desired-position computations for `if (qualifying.length === 0)` this
+ * pass now escapes into.
+ */
+
+import { describe, it, expect } from 'vitest'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+import { findBoxRect, rectsOverlap } from './helpers/ascii-form.ts'
+
+function boxCenter(rect: { x0: number; x1: number }): number {
+  return rect.x0 + Math.floor((rect.x1 - rect.x0 + 1) / 2)
+}
+
+describe('ASCII class diagram — multi-parent / overlap resolution (issue #972)', () => {
+  it('two children of the same parent spread evenly around its center, not packed from column 0', () => {
+    // WidePadding gives Animal real room on both sides -- proves genuine
+    // symmetric spreading, not just an edge-of-canvas clamp coincidence.
+    const src = `classDiagram
+  class WidePadding {
+    +String p0
+    +String p1
+    +String p2
+  }
+  class Animal
+  class Dog
+  class Cat
+  Animal <|-- Dog
+  Animal <|-- Cat`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const animal = findBoxRect(ascii, 'Animal')
+    const dog = findBoxRect(ascii, 'Dog')
+    const cat = findBoxRect(ascii, 'Cat')
+
+    // Declaration order preserved: Dog left of Cat, neither overlapping.
+    expect(dog.x1).toBeLessThan(cat.x0)
+    // The pair's combined footprint centers on Animal's own center.
+    const blockCenter = dog.x0 + Math.floor((cat.x1 - dog.x0 + 1) / 2)
+    expect(Math.abs(blockCenter - boxCenter(animal))).toBeLessThanOrEqual(1)
+    // Neither child sits at column 0 (the pre-#972 leftover artifact).
+    expect(dog.x0).toBeGreaterThan(0)
+  })
+
+  it('a child with two parents at different levels centers on the mean of their centers', () => {
+    // Controller (level 0) -> Model (level 1) -> View (level 2); View also
+    // has a direct edge from Controller. View's qualifying parents are
+    // both Controller and Model (both strictly shallower than View), so
+    // its desired center is their mean -- not just Controller's alone.
+    const src = `classDiagram
+  class Controller {
+    +handleInput() void
+  }
+  class Model {
+    +getData() void
+  }
+  class View {
+    +render() void
+  }
+  Controller --> Model
+  Controller --> View
+  Model ..> View`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const controller = findBoxRect(ascii, 'Controller')
+    const model = findBoxRect(ascii, 'Model')
+    const view = findBoxRect(ascii, 'View')
+
+    const expectedCenter = Math.round(
+      (boxCenter(controller) + boxCenter(model)) / 2,
+    )
+    expect(Math.abs(boxCenter(view) - expectedCenter)).toBeLessThanOrEqual(1)
+    // Not simply parked back at column 0 the way an unresolved block used to be.
+    expect(view.x0).toBeGreaterThan(0)
+  })
+
+  it('a multi-child block whose desired position collides with an earlier sibling is pushed right without overlapping it', () => {
+    // Two parents both near the canvas's left edge: EarlyParent's own
+    // child (EarlySibling) is placed first; WidePair's two children want
+    // to center on WidePair, which sits close enough that their desired
+    // block would otherwise land on top of EarlySibling. The universal
+    // compaction pass (#971, reused unchanged by #972) must push the
+    // whole block right of EarlySibling instead of overlapping it.
+    const src = `classDiagram
+  class EarlyParent
+  class WidePair
+  class EarlySibling
+  class ChildA
+  class ChildB
+  EarlyParent --> EarlySibling
+  WidePair --> ChildA
+  WidePair --> ChildB`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const names = [
+      'EarlyParent',
+      'WidePair',
+      'EarlySibling',
+      'ChildA',
+      'ChildB',
+    ]
+    const rects = names.map((n) => ({ n, r: findBoxRect(ascii, n) }))
+    for (let i = 0; i < rects.length; i++) {
+      for (let j = i + 1; j < rects.length; j++) {
+        expect(
+          rectsOverlap(rects[i]!.r, rects[j]!.r),
+          `${rects[i]!.n} and ${rects[j]!.n} boxes overlap`,
+        ).toBe(false)
+      }
+    }
+    // Declaration order preserved even after compaction pushes the block right.
+    const earlySibling = findBoxRect(ascii, 'EarlySibling')
+    const childA = findBoxRect(ascii, 'ChildA')
+    expect(earlySibling.x1).toBeLessThan(childA.x0)
+  })
+
+  it('a block with no qualifying parents (a rootless cycle with two same-level "parent" edges) keeps its plain baseline position', () => {
+    // A and B mutually reference each other with no external root: both
+    // land at level 0, and neither's same-level "parent" edge qualifies --
+    // #972 must not spread or converge this shape, only #971's untouched
+    // no-resolvable-parents fallback applies.
+    const src = `classDiagram
+  class A
+  class B
+  A --> B
+  B --> A`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const a = findBoxRect(ascii, 'A')
+    const b = findBoxRect(ascii, 'B')
+    expect(a.x0).toBe(0)
+    expect(a.x1).toBeLessThan(b.x0)
+  })
+
+  // Regression for a CodeRabbit finding on #972's own PR (thread
+  // PRRT_kwDOT5ndxc6hpu-C): two classes with no resolvable parents but the
+  // exact same (non-qualifying) parent-id set used to be merged into one
+  // joint placement unit the moment the *first* of them was reached in
+  // declaration order -- silently pulling an unrelated class declared
+  // *between* them ahead of its own position, since it hadn't been placed
+  // yet when the merged pair's combined placement consumed the columns it
+  // would have occupied.
+  it('an unrelated class declared between two same-parent-set siblings with no qualifying parent keeps its own declaration-order position', () => {
+    // Q and R share the exact same parent-id set ({P}), but P is at the
+    // same level as Q/R (a 3-way mutual-reference cycle), so neither
+    // qualifies -- both are "no resolvable parents" blocks on their own.
+    // Interloper is a plain, unrelated root declared between Q and R.
+    const src = `classDiagram
+  class P
+  class Q
+  class Interloper
+  class R
+  P --> Q
+  P --> R
+  Q --> P
+  R --> P`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const q = findBoxRect(ascii, 'Q')
+    const interloper = findBoxRect(ascii, 'Interloper')
+    const r = findBoxRect(ascii, 'R')
+    // Declared order Q, Interloper, R must survive as rendered left-to-right order.
+    expect(q.x1).toBeLessThan(interloper.x0)
+    expect(interloper.x1).toBeLessThan(r.x0)
+  })
+
+  // Regression for a CodeRabbit finding on #972's own PR (thread
+  // PRRT_kwDOT5ndxc6hpu-M): a multi-member block's desired left edge used
+  // to be derived from centering the *padded slot* span (every member's
+  // own reach padding, including the outermost edges with no neighbor to
+  // separate from) on the shared parent center, rather than the *visible
+  // box* span -- so a block whose first member has real reach padding
+  // (e.g. its own outgoing relationship carries a long label) and whose
+  // last member has none rendered visibly off-center from the parent it
+  // was supposed to align under.
+  it('a multi-child block with asymmetric reach padding on one child still visually centers on the shared parent', () => {
+    const src = `classDiagram
+  class Padding {
+    +String p0
+    +String p1
+    +String p2
+    +String p3
+  }
+  class Animal
+  class Dog
+  class Cat
+  class SomewhereElse
+  Animal <|-- Dog
+  Animal <|-- Cat
+  Dog --> SomewhereElse : a moderately long label`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const animal = findBoxRect(ascii, 'Animal')
+    const dog = findBoxRect(ascii, 'Dog')
+    const cat = findBoxRect(ascii, 'Cat')
+    const visibleBlockCenter = dog.x0 + Math.floor((cat.x1 - dog.x0 + 1) / 2)
+    expect(
+      Math.abs(visibleBlockCenter - boxCenter(animal)),
+    ).toBeLessThanOrEqual(1)
+  })
+})

package/src/__tests__/ascii-draw-arrows-coverage.test.ts

@@ -5,6 +5,21 @@
 
 import { describe, it, expect } from 'vitest'
 import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+import {
+  unicodeArrowChar,
+  asciiArrowChar,
+} from '../../packages/ascii-renderer/src/draw-arrows.ts'
+import {
+  Up,
+  Down,
+  Left,
+  Right,
+  UpperRight,
+  UpperLeft,
+  LowerRight,
+  LowerLeft,
+  Middle,
+} from '../../packages/ascii-renderer/src/types.ts'
 
 describe('ASCII arrow drawing: no-arrow edges', () => {
   it('renders a solid no-arrow edge without an arrowhead in unicode mode', () => {
@@ -157,6 +172,47 @@ describe('ASCII arrow drawing: bidirectional edges', () => {
   })
 })
 
+describe('unicodeArrowChar / asciiArrowChar: direction-to-glyph mapping', () => {
+  // Direct unit coverage for every Direction, including LowerLeft — the
+  // ELK/pathfinder layout this module draws from only produces a diagonal
+  // direction via determinePath's rare Case-4 fallback, and every
+  // hand-written or gallery diagram that triggers it happens to need the
+  // target down-and-*right* of its source, never down-and-left. See
+  // issue #1062's drawArrowHead refactor.
+  it('maps all four orthogonal directions to filled triangles (unicode)', () => {
+    expect(unicodeArrowChar(Up)).toBe('▲')
+    expect(unicodeArrowChar(Down)).toBe('▼')
+    expect(unicodeArrowChar(Left)).toBe('◄')
+    expect(unicodeArrowChar(Right)).toBe('►')
+  })
+
+  it('maps all four diagonal directions to Arrows-block glyphs (unicode)', () => {
+    expect(unicodeArrowChar(UpperRight)).toBe('↗')
+    expect(unicodeArrowChar(UpperLeft)).toBe('↖')
+    expect(unicodeArrowChar(LowerRight)).toBe('↘')
+    expect(unicodeArrowChar(LowerLeft)).toBe('↙')
+  })
+
+  it('returns undefined for Middle (no arrowhead glyph)', () => {
+    expect(unicodeArrowChar(Middle)).toBeUndefined()
+    expect(asciiArrowChar(Middle)).toBeUndefined()
+  })
+
+  it('maps all four orthogonal directions to ASCII carets (ascii mode)', () => {
+    expect(asciiArrowChar(Up)).toBe('^')
+    expect(asciiArrowChar(Down)).toBe('v')
+    expect(asciiArrowChar(Left)).toBe('<')
+    expect(asciiArrowChar(Right)).toBe('>')
+  })
+
+  it('has no diagonal glyphs in ASCII mode', () => {
+    expect(asciiArrowChar(UpperRight)).toBeUndefined()
+    expect(asciiArrowChar(UpperLeft)).toBeUndefined()
+    expect(asciiArrowChar(LowerRight)).toBeUndefined()
+    expect(asciiArrowChar(LowerLeft)).toBeUndefined()
+  })
+})
+
 describe('ASCII arrow drawing: upward edge labels', () => {
   it('offsets the label on an edge that routes upward', () => {
     const result = renderMermaidASCII(`

package/src/__tests__/ascii-edge-ending-glyphs.test.ts

@@ -19,7 +19,7 @@ describe('ASCII flowchart edges: --o circle-end / --x cross-end glyphs', () => {
         A --o B
     `)
     expect(result).toContain('○')
-    expect(result).not.toMatch(/[►◄▲▼◢◣◤◥]/)
+    expect(result).not.toMatch(/[►◄▲▼◢◣◤◥↖↗↘↙]/)
   })
 
   it('draws an x glyph for --x in unicode mode', () => {
@@ -28,7 +28,7 @@ describe('ASCII flowchart edges: --o circle-end / --x cross-end glyphs', () => {
         A --x B
     `)
     expect(result).toContain('✕')
-    expect(result).not.toMatch(/[►◄▲▼◢◣◤◥]/)
+    expect(result).not.toMatch(/[►◄▲▼◢◣◤◥↖↗↘↙]/)
   })
 
   it('draws a circle glyph for --o in ascii mode', () => {
@@ -138,7 +138,7 @@ describe('ASCII flowchart edges: --o circle-end / --x cross-end glyphs', () => {
         F --o C
     `)
     expect(result).toContain('○')
-    expect(result).not.toMatch(/[►◄▲▼◢◣◤◥]/)
+    expect(result).not.toMatch(/[►◄▲▼◢◣◤◥↖↗↘↙]/)
   })
 
   // A mixed fan-in (one edge --o, another plain -->) has no single correct

package/src/__tests__/ascii-sequence-form-invariants.test.ts

@@ -280,6 +280,57 @@ describe('ASCII sequence — notes do not collide with an unrelated lifeline', (
     expect(carolCol < noteRect.x0 || carolCol > noteRect.x1).toBe(true)
   })
 
+  // Fixed by issue #992: a single-actor `Note over` centers on that actor's
+  // own lifeline (`nx = llX[aIdx] - Math.floor(nWidth / 2)`), but neither
+  // half of that width was reserved during layout — so a note wider than
+  // the actor's own column spilled into whichever neighbor was closer,
+  // exactly the shape cases A-C above already fixed for `left`/`right`
+  // notes. This is the exact repro from the issue (two actors, a note over
+  // the first one). A *multi*-actor `Note over A,B` is unaffected —
+  // spanning both actors is its intended shape (see the "note over two
+  // actors" case below), not this bug.
+  it("single-actor 'over' note on the first actor does not overlap the next actor's lifeline (issue #992 repro)", () => {
+    const src = `sequenceDiagram
+  participant A as Alice
+  participant B as Bob
+  Note over A: ${LONG_LABEL}
+  A->>B: hi`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const noteRect = findBoxRect(ascii, LONG_LABEL)
+    const bobCol = lifelineColumn(ascii, 'Bob')
+    expect(bobCol < noteRect.x0 || bobCol > noteRect.x1).toBe(true)
+  })
+
+  // Same fix, but a middle actor: both halves of the note (left half toward
+  // Alice, right half toward Carol) need to be reserved, not just the
+  // leftmost-actor case above.
+  it("single-actor 'over' note on a middle actor does not overlap either neighbor's lifeline", () => {
+    const src = `sequenceDiagram
+  participant A as Alice
+  participant B as Bob
+  participant C as Carol
+  A->>B: hi
+  Note over B: ${LONG_LABEL}`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const noteRect = findBoxRect(ascii, LONG_LABEL)
+    const aliceCol = lifelineColumn(ascii, 'Alice')
+    const carolCol = lifelineColumn(ascii, 'Carol')
+    expect(aliceCol < noteRect.x0 || aliceCol > noteRect.x1).toBe(true)
+    expect(carolCol < noteRect.x0 || carolCol > noteRect.x1).toBe(true)
+  })
+
+  it("short single-actor 'over' note does not overlap the next actor", () => {
+    const src = `sequenceDiagram
+  participant A as Alice
+  participant B as Bob
+  Note over A: ok
+  A->>B: hi`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const noteRect = findBoxRect(ascii, 'ok')
+    const bobCol = lifelineColumn(ascii, 'Bob')
+    expect(bobCol < noteRect.x0 || bobCol > noteRect.x1).toBe(true)
+  })
+
   // Regression locks: short notes, which don't hit any of the three bugs
   // above, must keep rendering without collision.
   it('short note left of a middle actor does not overlap its left neighbor', () => {

package/src/__tests__/text-metrics.test.ts

@@ -469,5 +469,18 @@ describe('isWideChar', () => {
     expect(isWideChar('◥')).toBe(false)
     expect(isWideChar('○')).toBe(false)
     expect(isWideChar('✕')).toBe(false)
+    // Diagonal edge-routing arrowheads (draw-arrows.ts's drawArrowHead) as
+    // of issue #1062 — JetBrains Mono NL has no glyph for the ◢◣◤◥ set
+    // above, so these Arrows-block glyphs are drawn instead.
+    expect(isWideChar('↖')).toBe(false)
+    expect(isWideChar('↗')).toBe(false)
+    expect(isWideChar('↘')).toBe(false)
+    expect(isWideChar('↙')).toBe(false)
+    // Same Arrows-block misclassification, not drawn by the renderer itself
+    // but reachable if typed into node/edge/note label text.
+    expect(isWideChar('↔')).toBe(false)
+    expect(isWideChar('↕')).toBe(false)
+    expect(isWideChar('↩')).toBe(false)
+    expect(isWideChar('↪')).toBe(false)
   })
 })

package/src/__tests__/theme.test.ts

@@ -130,3 +130,33 @@ describe('buildStyleBlock – font handling', () => {
     )
   })
 })
+
+describe('buildStyleBlock – mono font (#1061)', () => {
+  it('never reaches out to Google Fonts for the .mono rule', () => {
+    const block = buildStyleBlock('Inter', true)
+    // The main `font` still gets its own Google Fonts @import (unrelated to
+    // this regression test), but nothing in the block should ever request
+    // JetBrains Mono from a third-party CDN.
+    expect(block).not.toContain('fonts.googleapis.com/css2?family=JetBrains')
+  })
+
+  it('embeds a self-hosted @font-face as a base64 woff2 data URI for the mono font', () => {
+    const block = buildStyleBlock('Inter', true)
+    expect(block).toContain('@font-face')
+    expect(block).toContain('data:font/woff2;base64,')
+    expect(block).toContain("font-family: 'JetBrains Mono NL';")
+  })
+
+  it("leads the .mono rule's font stack with the self-hosted family name", () => {
+    const block = buildStyleBlock('Inter', true)
+    expect(block).toContain(
+      "  .mono { font-family: 'JetBrains Mono NL', 'SF Mono', 'Fira Code', ui-monospace, monospace; }",
+    )
+  })
+
+  it('emits neither the @font-face embed nor the .mono rule when hasMonoFont is false', () => {
+    const block = buildStyleBlock('Inter', false)
+    expect(block).not.toContain('@font-face')
+    expect(block).not.toContain('.mono')
+  })
+})

package/src/__tests__/workspace-package-boundaries.test.ts

@@ -226,7 +226,7 @@ describe('workspace package manifests', () => {
   // no longer `"private": true` — and its own independent build
   // (`packages/<name>/vite.config.ts`, via `vite.config.package.ts`).
   //
-  // That is preparation only. The umbrella (`vite.config.lib.ts`) still
+  // That is preparation only. The umbrella (`config/vite.config.lib.ts`) still
   // bundles all five packages' source directly into its own `dist/` (they
   // are absent from `isExternal` there, same as before #769) — none of
   // them is a real external `dependencies` entry of `zombie-mermaid`, none
@@ -234,7 +234,7 @@ describe('workspace package manifests', () => {
   // none has ever actually been published to npm. Externalizing them for
   // real is a separate, future PR gated on completing npm's one-time
   // trusted-publishing setup for each new package name — see
-  // RELEASING.md's "Future: multi-package publish" section.
+  // docs/RELEASING.md's "Future: multi-package publish" section.
   it.each(['core', 'mermaid-parser', 'svg-renderer', 'ascii-renderer', 'mcp'])(
     '%s is publish-ready in shape under the @zombie-mermaid/ scope (not yet externalized or published)',
     (pkg) => {

package/src/__tests__/xychart-parser-categories.test.ts

@@ -0,0 +1,78 @@
+/**
+ * Category-label unquoting tests for the xychart-beta parser (issue #1087).
+ *
+ * `x-axis [A, "B", C]` categorical items were only `.split(',').map(trim)`,
+ * so a quoted item like `"CLI output / logs"` kept its literal quote
+ * characters in the rendered label instead of being unquoted the way an
+ * axis *title* already is. These tests assert each category item is
+ * unquoted the same way, and that a comma embedded inside a quoted item
+ * (e.g. `"Jan, Feb"`) is treated as literal text rather than a delimiter.
+ */
+import { describe, it, expect } from 'vitest'
+import { parseXYChart as parseXYChartStatements } from '@zombie-mermaid/mermaid-parser'
+import { splitStatements } from '@zombie-mermaid/core'
+
+/** Helper to parse — preprocesses text the same way index.ts does */
+function parseXYChart(sourceLines: string[]) {
+  return parseXYChartStatements(splitStatements(sourceLines.join('\n')))
+}
+
+describe('parseXYChart – categorical x-axis quoting', () => {
+  it('strips quotes from quoted category items', () => {
+    const chart = parseXYChart([
+      'xychart-beta',
+      'x-axis ["Total used", "CLI output / logs"]',
+      'bar [86, 18]',
+    ])
+    expect(chart.xAxis.categories).toEqual(['Total used', 'CLI output / logs'])
+  })
+
+  it('handles a mix of quoted and unquoted category items', () => {
+    const chart = parseXYChart([
+      'xychart-beta',
+      'x-axis [Jan, "Feb 2024", Mar]',
+      'bar [1, 2, 3]',
+    ])
+    expect(chart.xAxis.categories).toEqual(['Jan', 'Feb 2024', 'Mar'])
+  })
+
+  it('still unquotes categories when an axis title is also present', () => {
+    const chart = parseXYChart([
+      'xychart-beta',
+      'x-axis "Month" ["Jan", "Feb"]',
+      'bar [1, 2]',
+    ])
+    expect(chart.xAxis.title).toBe('Month')
+    expect(chart.xAxis.categories).toEqual(['Jan', 'Feb'])
+  })
+
+  it('leaves unquoted category items unchanged', () => {
+    const chart = parseXYChart([
+      'xychart-beta',
+      'x-axis [Jan, Feb, Mar]',
+      'bar [1, 2, 3]',
+    ])
+    expect(chart.xAxis.categories).toEqual(['Jan', 'Feb', 'Mar'])
+  })
+
+  it('treats a comma inside a quoted item as literal text, not a delimiter', () => {
+    const chart = parseXYChart([
+      'xychart-beta',
+      'x-axis ["Jan, Feb", "Mar"]',
+      'bar [1, 2]',
+    ])
+    // A naive split(',') would break this into three pieces ('"Jan',
+    // ' Feb"', ' "Mar"') instead of two -- quoting a value that itself
+    // contains a comma is exactly the case quoting exists for.
+    expect(chart.xAxis.categories).toEqual(['Jan, Feb', 'Mar'])
+  })
+
+  it('handles multiple comma-containing quoted items in one list', () => {
+    const chart = parseXYChart([
+      'xychart-beta',
+      'x-axis ["A, B", "C, D, E", F]',
+      'bar [1, 2, 3]',
+    ])
+    expect(chart.xAxis.categories).toEqual(['A, B', 'C, D, E', 'F'])
+  })
+})

package/src/cli/html-viewer.ts

@@ -128,6 +128,11 @@ const PAGE_CSS = `
   @media print {
     #toolbar { display: none; }
     #stage { position: static; overflow: visible; }
+    /* Genuinely needs !important (zombie-mermaid#1080 audit): the client
+     * script's apply() sets #diagram's transform inline on every pan/zoom,
+     * so whatever pan/zoom state the viewer was left in is a live inline
+     * style this print rule must beat -- there's no static default to
+     * hoist it to instead. */
     #diagram { position: static; transform: none !important; }
   }
 `.trim()