@zombie-mermaid/svg-renderer 3.2.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zombie-mermaid/svg-renderer",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "license": "MIT",
   "description": "SVG rendering primitives and the ELK-backed layout engine behind zombie-mermaid's SVG output.",
   "repository": {
@@ -37,7 +37,7 @@
   "dependencies": {
     "elkjs": "^0.11.0",
     "entities": "^7.0.1",
-    "@zombie-mermaid/core": "3.2.0",
-    "@zombie-mermaid/mermaid-parser": "3.2.0"
+    "@zombie-mermaid/core": "4.0.0",
+    "@zombie-mermaid/mermaid-parser": "4.0.0"
   }
 }

package/src/__tests__/c4-label-clearance-1290.test.ts

@@ -0,0 +1,112 @@
+import { describe, it, expect } from 'vitest'
+import { splitStatements } from '@zombie-mermaid/core'
+import { c4RelLabelLines, parseC4Diagram } from '@zombie-mermaid/mermaid-parser'
+import { layoutC4DiagramSync } from '../c4/layout.ts'
+import { C4, c4TextWidth } from '../c4/metrics.ts'
+
+// Mermaid starts a relationship label at the chord's midpoint, which can land
+// it on a shape. The label slides along its line to clear every shape (#1290).
+const layout = (src: string) =>
+  layoutC4DiagramSync(parseC4Diagram(splitStatements(src)))
+
+// The C4 Container sample: `Reads/writes [SQL]` and `Publishes [AMQP]` both
+// used to sit on the Database cylinder.
+const container = `C4Container
+  Person(user, "User")
+  System_Boundary(sys, "Shop") {
+    Container(web, "Web App", "React", "Storefront")
+    Container(api, "API", "Node.js", "Business logic")
+    ContainerDb(db, "Database", "PostgreSQL", "Orders")
+    ContainerQueue(q, "Events", "Kafka")
+  }
+  System_Ext(pay, "Payments")
+  Rel(user, web, "Browses")
+  Rel(web, api, "Calls", "JSON/HTTPS")
+  Rel(api, db, "Reads/writes", "SQL")
+  BiRel(api, q, "Publishes", "AMQP")
+  Rel(api, pay, "Charges cards")`
+
+function labelRects(d: ReturnType<typeof layout>) {
+  return d.relationships.flatMap((rel) => {
+    if (!rel.labelPosition) return []
+    const lines = c4RelLabelLines(rel)
+    return lines.map((line, i) => {
+      const isTech = rel.technology !== undefined && i === lines.length - 1
+      const w = c4TextWidth(line, C4.messageSize, 400)
+      const cx =
+        isTech && rel.technologyX !== undefined
+          ? rel.technologyX
+          : rel.labelPosition!.x
+      const cy = rel.labelPosition!.y + (i === 0 ? 0 : C4.messageSize + 5)
+      return {
+        rel: `${rel.from}->${rel.to}`,
+        x0: cx - w / 2,
+        x1: cx + w / 2,
+        y0: cy - C4.messageSize / 2,
+        y1: cy + C4.messageSize / 2,
+      }
+    })
+  })
+}
+
+function overlapping(d: ReturnType<typeof layout>): string[] {
+  const hits: string[] = []
+  for (const r of labelRects(d)) {
+    for (const e of d.elements) {
+      if (
+        r.x0 < e.x + e.width &&
+        r.x1 > e.x &&
+        r.y0 < e.y + e.height &&
+        r.y1 > e.y
+      ) {
+        hits.push(`${r.rel} label over ${e.alias}`)
+      }
+    }
+  }
+  return hits
+}
+
+describe('C4 relationship labels clear the shapes (#1290)', () => {
+  it('keeps every label in the Container sample off every shape', () => {
+    expect(overlapping(layout(container))).toEqual([])
+  })
+
+  it('keeps a label on its own line, only sliding along it', () => {
+    const d = layout(container)
+    const rel = d.relationships.find((r) => r.to === 'db')!
+    const [s, e] = rel.points
+    const dx = e!.x - s!.x
+    const dy = e!.y - s!.y
+    const t = rel.labelPosition!
+    // Same distance from the chord as an unmoved label: Mermaid's label is
+    // half its own width to the right of the midpoint, never further off.
+    const across = Math.abs(
+      ((t.x - s!.x) * dy - (t.y - s!.y) * dx) / Math.hypot(dx, dy),
+    )
+    expect(across).toBeLessThan(40)
+  })
+
+  it('leaves a label that already clears every shape where Mermaid puts it', () => {
+    const d = layout(`C4Context
+  System(a, "A")
+  System(b, "B")
+  Rel(a, b, "Uses")`)
+    const rel = d.relationships[0]!
+    const [s, e] = rel.points
+    const mid = (s!.x + e!.x) / 2
+    const width = c4TextWidth('Uses', C4.messageSize, 400)
+    expect(rel.labelPosition!.x).toBeCloseTo(mid + width / 2, 5)
+  })
+
+  it('does not let two labels in one gap sit on each other', () => {
+    const rects = labelRects(layout(container))
+    for (const [i, a] of rects.entries()) {
+      for (const b of rects.slice(i + 1)) {
+        if (a.rel === b.rel) continue
+        const apart =
+          a.x1 <= b.x0 || b.x1 <= a.x0 || a.y1 <= b.y0 || b.y1 <= a.y0
+        expect(apart, `${a.rel} vs ${b.rel}`).toBe(true)
+      }
+    }
+  })
+})

package/src/__tests__/c4-line-ends-1208.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest'
+import { splitStatements } from '@zombie-mermaid/core'
+import { parseC4Diagram } from '@zombie-mermaid/mermaid-parser'
+import { layoutC4DiagramSync } from '../c4/layout.ts'
+import { c4PersonGeometry } from '../c4/metrics.ts'
+
+// A relationship meets a cylinder, pipe or person where Mermaid's own shape
+// outline puts it, not at the box around the shape (#1208). The pipe and the
+// oblique person cases are checked against recorded Mermaid output in
+// c4-mermaid-reference.test.ts.
+const layout = (src: string) =>
+  layoutC4DiagramSync(parseC4Diagram(splitStatements(src)))
+
+describe('C4 line ends on shaped elements (#1208)', () => {
+  // Row 1 holds four shapes and row 2 starts under the first, so the line from
+  // `b` down to the database arrives from the upper right.
+  const src = `C4Context
+  System(a, "A")
+  System(b, "B")
+  System(c, "C")
+  System(e, "E")
+  SystemDb(db, "Store")
+  Rel(b, db, "Reads")`
+
+  it('ends a slanted line on the curve of the cylinder cap, below the box top', () => {
+    const d = layout(src)
+    const store = d.elements.find((e) => e.alias === 'db')!
+    const [, end] = d.relationships[0]!.points
+    // 84.4px right of the centre the cap (rx 108, ry 15.8) has dropped
+    // 5.9px, so the line ends 5.9px under the top of the box, not on it.
+    expect(end!.y - store.y).toBeCloseTo(5.96, 1)
+  })
+
+  it('ends a line into the bottom middle of a cylinder at the box bottom', () => {
+    const d = layout(`C4Context
+  SystemDb(db, "Store")
+  System(b, "B")
+  System(c, "C")
+  System(e, "E")
+  System(f, "F")
+  Rel(f, db, "Reads")`)
+    const store = d.elements.find((e) => e.alias === 'db')!
+    const [, end] = d.relationships[0]!.points
+    // Straight below the centre the ellipse is at its lowest: no lift.
+    expect(end!.y - (store.y + store.height)).toBeCloseTo(0, 5)
+  })
+
+  it("keeps a wide person head at Mermaid's 56px radius cap", () => {
+    expect(c4PersonGeometry(216).headRadius).toBeCloseTo(49.68, 2)
+    expect(c4PersonGeometry(400).headRadius).toBe(56)
+  })
+})

package/src/__tests__/c4-mermaid-reference.test.ts

@@ -12,9 +12,9 @@ import { layoutC4DiagramSync } from '../c4/layout.ts'
 // direction), so a constant tuned to one sample cannot satisfy all of them.
 //
 // Vertical numbers depend only on heights and gaps, so they must agree to a
-// few pixels. Horizontal ones depend on text widths, which this package
-// estimates (Mermaid measures them in a browser), and relationship ends depend
-// on each shape's own outline, so those get a wider allowance.
+// few pixels. Horizontal ones depend on text widths, which this package sums
+// from Arial advances (Mermaid measures them in a browser), and relationship
+// ends follow each shape's own outline, as Mermaid's do.
 interface Reference {
   name: string
   source: string
@@ -32,9 +32,22 @@ const cases: Reference[] = JSON.parse(
 )
 
 const Y = 3
-const X = 11
-const LINE = 16
+const X = 2
+const LINE = 3
+// Relationships whose end this package cannot place within LINE, with the
+// reason. Each is a limit of the shape outline, not of the text widths.
+const WIDER_LINE = 9
+const WIDER: Record<string, number[]> = {
+  // A line that skims along the top of a person's body, where the pill meets
+  // the head: 0.25px of height moves where it crosses by about 8px.
+  'v02-person-targets': [3],
+}
 const LABEL = 10
+// Deliberate difference (#1209): Mermaid merges two relationships with the
+// same from/to (the later one wins, one line drawn). This package draws both,
+// so a relationship the author wrote is never dropped. Each entry is a case
+// where Mermaid drew `n` lines for a source with `n + 1` relationships.
+const DUPLICATE_PAIRS = new Set(['v07-dynamic'])
 
 describe('C4 SVG layout against Mermaid on varied diagrams', () => {
   it('covers a spread of diagrams', () => {
@@ -56,28 +69,54 @@ describe('C4 SVG layout against Mermaid on varied diagrams', () => {
         expect(Math.abs(cy - r[1]), `${e.alias} centre y`).toBeLessThan(Y)
       }
 
-      // Mermaid merges two relationships between the same pair; this draws
-      // both, so the lines only line up when the counts agree.
-      if (ref.relationships.length !== d.relationships.length) return
+      // Mermaid merges duplicate pairs and this package draws both (see
+      // DUPLICATE_PAIRS), so the lines only line up when the counts agree.
+      // A count mismatch is only allowed for a listed case, and there it must
+      // be exactly the duplicate that is drawn extra.
+      if (DUPLICATE_PAIRS.has(ref.name)) {
+        expect(d.relationships.length, 'both duplicate lines drawn').toBe(
+          ref.relationships.length + 1,
+        )
+        const pairs = d.relationships.map((r) => `${r.from}>${r.to}`)
+        expect(
+          new Set(pairs).size,
+          'a pair is drawn twice, as written',
+        ).toBeLessThan(pairs.length)
+        return
+      }
+      expect(d.relationships.length, 'relationship count').toBe(
+        ref.relationships.length,
+      )
       d.relationships.forEach((rel, i) => {
         const r = ref.relationships[i]!
         const [s, e] = rel.points
         const got = [s!.x, s!.y, e!.x, e!.y]
+        const limit = WIDER[ref.name]?.includes(i + 1) ? WIDER_LINE : LINE
         got.forEach((v, k) => {
           expect(
             Math.abs(v - r.line[k]!),
             `relationship ${i + 1} line[${k}]`,
-          ).toBeLessThan(LINE)
+          ).toBeLessThan(limit)
         })
         if (r.label && rel.labelPosition) {
-          expect(
-            Math.abs(rel.labelPosition.x - r.label[0]),
-            `relationship ${i + 1} label x`,
-          ).toBeLessThan(LABEL)
-          expect(
-            Math.abs(rel.labelPosition.y - r.label[1]),
-            `relationship ${i + 1} label y`,
-          ).toBeLessThan(LABEL)
+          // Mermaid's label can sit on a shape; this package slides it along
+          // the chord to clear it (#1290). That is the one allowed difference:
+          // the label may move along the line but not off it.
+          const dx = e!.x - s!.x
+          const dy = e!.y - s!.y
+          const len = Math.hypot(dx, dy)
+          const across = (p: { x: number; y: number }): number =>
+            ((p.x - s!.x) * dy - (p.y - s!.y) * dx) / len
+          const ref0 = { x: r.label[0], y: r.label[1] }
+          const moved =
+            Math.abs(rel.labelPosition.x - ref0.x) >= LABEL ||
+            Math.abs(rel.labelPosition.y - ref0.y) >= LABEL
+          if (moved) {
+            expect(
+              Math.abs(across(rel.labelPosition) - across(ref0)),
+              `relationship ${i + 1} label is off the chord`,
+            ).toBeLessThan(LABEL)
+          }
         }
       })
     })

package/src/__tests__/c4-text-width-1210.test.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect } from 'vitest'
+import { splitStatements } from '@zombie-mermaid/core'
+import { parseC4Diagram } from '@zombie-mermaid/mermaid-parser'
+import { layoutC4DiagramSync } from '../c4/layout.ts'
+import { C4, C4_TEXT_WIDTH, c4TextWidth, wrapToWidth } from '../c4/metrics.ts'
+
+// Mermaid 11.17.2 measures C4 text in the browser. The widths below are read
+// back from its SVG (see c4-mermaid-reference.test.ts for the full set), and
+// text near the wrap limit is where an estimate that is a few percent off
+// changes a shape's width (#1210).
+const shapes = (src: string) =>
+  layoutC4DiagramSync(parseC4Diagram(splitStatements(src))).elements
+
+describe('C4 text widths (#1210)', () => {
+  it('measures a bold name as Mermaid does', () => {
+    // Mermaid made the shape for this name 227.6px wide: text plus 2 x 20.
+    expect(
+      c4TextWidth('Personal Banking Customer', C4.nameSize, 700),
+    ).toBeCloseTo(227.6 - 2 * C4.shapePadding, 0)
+  })
+
+  it('wraps at the shape width less its padding, measured at regular weight', () => {
+    expect(C4_TEXT_WIDTH).toBe(176)
+    // 187.6px in bold, 175.9px in regular: it stays on one line, as in
+    // Mermaid, even though the drawn name is wider than the limit.
+    const name = 'Personal Banking Customer'
+    expect(wrapToWidth(name, C4_TEXT_WIDTH, C4.nameSize)).toEqual([name])
+    expect(c4TextWidth(name, C4.nameSize, 700)).toBeGreaterThan(C4_TEXT_WIDTH)
+  })
+
+  it('keeps a person with a three-line description at the standard width', () => {
+    const [p] = shapes(
+      'C4Context\n  Person(p, "Customer", "A description that is long enough to wrap into three lines at the standard width of a shape")',
+    )
+    expect(p!.descriptionLines).toHaveLength(3)
+    // Mermaid: 216px. A wider estimate widened it to 222px.
+    expect(p!.width).toBeCloseTo(216, 1)
+  })
+
+  it('falls back to a scaled estimate outside printable ASCII', () => {
+    expect(c4TextWidth('中文', C4.descrSize, 400)).toBeGreaterThan(0)
+  })
+})

package/src/__tests__/class-component-order-1249.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest'
+import { splitStatements } from '@zombie-mermaid/core'
+import { parseClassDiagram } from '@zombie-mermaid/mermaid-parser'
+import { layoutClassDiagramSync } from '../class/layout.ts'
+
+const layout = (src: string) =>
+  layoutClassDiagramSync(parseClassDiagram(splitStatements(src)))
+
+// Mermaid places disconnected components left to right in declaration order
+// (#1249). ELK's layered algorithm otherwise orders them by its own graph
+// traversal, so the layout has to keep the declared order.
+describe('class diagram disconnected components (#1249)', () => {
+  it('places each component left to right in source order, in one row', () => {
+    const p = layout(`classDiagram
+  A <|-- B : inheritance
+  C *-- D : composition
+  E o-- F : aggregation
+  G --> H : association
+  I ..> J : dependency
+  K ..|> L : realization`)
+    const at = (id: string) => p.classes.find((c) => c.id === id)!
+    const roots = ['A', 'C', 'E', 'G', 'I', 'K'].map((id) => at(id))
+    const lefts = roots.map((c, i) => Math.min(c.x, at('BDFHJL'[i]!).x))
+    for (let i = 1; i < lefts.length; i++) {
+      expect(lefts[i]!).toBeGreaterThan(lefts[i - 1]!)
+    }
+    // Single row: every component starts at the same top.
+    expect(new Set(roots.map((c) => c.y)).size).toBe(1)
+  })
+
+  it('orders components by first appearance, not by relationship order', () => {
+    const p = layout(`classDiagram
+  class Z
+  class Y
+  Z <|-- Q
+  Y <|-- R`)
+    const x = (id: string) => p.classes.find((c) => c.id === id)!.x
+    expect(x('Z')).toBeLessThan(x('Y'))
+  })
+})

package/src/__tests__/class-member-right-padding-1238.test.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect } from 'vitest'
+import { renderMermaidSVG } from '../../../../src/index.ts'
+
+// Mono glyphs advance 0.6em (6.6px at the 11px member size). Chromium without
+// subpixel glyph positioning (headless Linux) rounds each advance to a whole
+// pixel, so the worst-case drawn width is chars * ceil(6.6) = chars * 7. A box
+// sized from the unrounded estimate let a long member run into the right
+// border in the Linux baselines (#1238).
+const WORST_CASE_ADVANCE = 7
+const MIN_RIGHT_PADDING = 8
+
+const SRC = `classDiagram
+  class Controller {
+    -model Model
+    +handleInput(event) void
+    +updateModel(data) void
+  }`
+
+const attr = (tag: string, name: string) => {
+  const start = tag.indexOf(`${name}="`) + name.length + 2
+  return Number(tag.slice(start, tag.indexOf('"', start)))
+}
+
+describe('class member right padding (#1238)', () => {
+  const svg = renderMermaidSVG(SRC)
+  const box =
+    (svg.split('<g class="class-node"')[1] ?? '').split('<rect')[1] ?? ''
+  const text = svg
+    .split('<text')
+    .find((t) => t.includes('handleInput(event)')) as string
+  const drawnChars = '+ handleInput(event): void'.length
+
+  it('finds the box and the member text', () => {
+    expect(box).not.toBe('')
+    expect(text).toBeDefined()
+  })
+
+  it('keeps the minimum right padding even with whole-pixel glyph advances', () => {
+    const boxRight = attr(box, 'x') + attr(box, 'width')
+    const textRight = attr(text, 'x') + drawnChars * WORST_CASE_ADVANCE
+    expect(boxRight - textRight).toBeGreaterThanOrEqual(MIN_RIGHT_PADDING)
+  })
+})

package/src/__tests__/class-namespace-1196.test.ts

@@ -0,0 +1,165 @@
+import { describe, it, expect } from 'vitest'
+import { splitStatements } from '@zombie-mermaid/core'
+import { parseClassDiagram } from '@zombie-mermaid/mermaid-parser'
+import { layoutClassDiagramSync } from '../class/layout.ts'
+import { renderMermaidSVG } from '../index.ts'
+
+const SRC = `classDiagram
+namespace Core {
+  class A
+  class B
+}
+namespace Extras {
+  class C
+}
+class D
+A --> C
+A --> B
+D --> B`
+
+const layout = (src: string) =>
+  layoutClassDiagramSync(parseClassDiagram(splitStatements(src)))
+
+describe('class diagram namespaces (#1196)', () => {
+  const p = layout(SRC)
+  const cls = (id: string) => p.classes.find((c) => c.id === id)!
+  const ns = (name: string) => p.namespaces.find((n) => n.name === name)!
+
+  it('lays out one frame per namespace', () => {
+    expect(p.namespaces.map((n) => n.name)).toEqual(['Core', 'Extras'])
+  })
+
+  it('encloses each member class and no outsider', () => {
+    const inside = (n: string, id: string) => {
+      const f = ns(n)
+      const c = cls(id)
+      return (
+        c.x >= f.x &&
+        c.y >= f.y &&
+        c.x + c.width <= f.x + f.width &&
+        c.y + c.height <= f.y + f.height
+      )
+    }
+    expect(inside('Core', 'A')).toBe(true)
+    expect(inside('Core', 'B')).toBe(true)
+    expect(inside('Extras', 'C')).toBe(true)
+    expect(inside('Core', 'C')).toBe(false)
+    expect(inside('Core', 'D')).toBe(false)
+    expect(inside('Extras', 'D')).toBe(false)
+  })
+
+  it('keeps frames inside the canvas and apart from each other', () => {
+    for (const f of p.namespaces) {
+      expect(f.x).toBeGreaterThanOrEqual(0)
+      expect(f.y).toBeGreaterThanOrEqual(0)
+      expect(f.x + f.width).toBeLessThanOrEqual(p.width)
+      expect(f.y + f.height).toBeLessThanOrEqual(p.height)
+    }
+    const a = ns('Core')
+    const b = ns('Extras')
+    const disjoint =
+      a.x + a.width <= b.x ||
+      b.x + b.width <= a.x ||
+      a.y + a.height <= b.y ||
+      b.y + b.height <= a.y
+    expect(disjoint).toBe(true)
+  })
+
+  it('leaves room for the title above the classes', () => {
+    expect(cls('A').y - ns('Core').y).toBeGreaterThanOrEqual(28)
+  })
+
+  it('routes edges to the class boxes, including edges inside a namespace', () => {
+    const touches = (pt: { x: number; y: number }, id: string) => {
+      const c = cls(id)
+      const tol = 1.5
+      return (
+        pt.x >= c.x - tol &&
+        pt.x <= c.x + c.width + tol &&
+        pt.y >= c.y - tol &&
+        pt.y <= c.y + c.height + tol
+      )
+    }
+    for (const rel of p.relationships) {
+      const first = rel.points[0]!
+      const last = rel.points[rel.points.length - 1]!
+      expect(touches(first, rel.from)).toBe(true)
+      expect(touches(last, rel.to)).toBe(true)
+    }
+  })
+
+  it('draws the namespace names and frames in SVG', () => {
+    const svg = renderMermaidSVG(SRC)
+    expect(svg).toContain('>Core</text>')
+    expect(svg).toContain('>Extras</text>')
+    expect(svg.match(/class="class-namespace"/g)).toHaveLength(2)
+    // Frames sit behind the class boxes.
+    expect(svg.indexOf('class-namespace')).toBeLessThan(
+      svg.indexOf('class-node'),
+    )
+  })
+
+  it('escapes the namespace name', () => {
+    const svg = renderMermaidSVG(`classDiagram
+namespace a&b {
+  class A
+}`)
+    expect(svg).toContain('>a&amp;b</text>')
+  })
+
+  it('ignores a namespace with no classes and a class claimed twice', () => {
+    const q = layout(`classDiagram
+namespace Empty {
+}
+namespace One {
+  class A
+}
+namespace Two {
+  class A
+  class B
+}`)
+    expect(q.namespaces.map((n) => [n.name, n.classIds])).toEqual([
+      ['One', ['A']],
+      ['Two', ['B']],
+    ])
+  })
+
+  it('leaves diagrams without namespaces unframed', () => {
+    expect(layout('classDiagram\nA --> B').namespaces).toEqual([])
+  })
+
+  it('returns no frames for an empty diagram', () => {
+    expect(layout('classDiagram').namespaces).toEqual([])
+  })
+
+  it('keeps a note link attached to a class inside a namespace', () => {
+    const q = layout(`classDiagram
+namespace Core {
+  class A
+  class B
+}
+A --> B
+note for A "hello"`)
+    const a = q.classes.find((c) => c.id === 'A')!
+    const note = q.notes[0]!
+    expect(note.linkPoints).toBeDefined()
+    const pts = note.linkPoints!
+    const end = pts[pts.length - 1]!
+    const tol = 1.5
+    const touchesA =
+      end.x >= a.x - tol &&
+      end.x <= a.x + a.width + tol &&
+      end.y >= a.y - tol &&
+      end.y <= a.y + a.height + tol
+    expect(touchesA).toBe(true)
+  })
+
+  it('lays out a note that has no link', () => {
+    const q = layout(`classDiagram
+namespace Core {
+  class A
+}
+note "free floating"`)
+    expect(q.notes[0]!.linkPoints).toBeUndefined()
+  })
+})

package/src/__tests__/class-namespace-sparse-elk-1196.test.ts

@@ -0,0 +1,96 @@
+import { describe, it, expect, vi } from 'vitest'
+import type { ElkNode } from 'elkjs/lib/elk-api'
+import { splitStatements } from '@zombie-mermaid/core'
+import { parseClassDiagram } from '@zombie-mermaid/mermaid-parser'
+
+// ELK's result type marks every coordinate optional. Strip them (and
+// optionally drop a node) so the layout extractor's fallbacks run.
+const mode = vi.hoisted(() => ({
+  strip: false,
+  dropNamespaces: false,
+  emptyNamespaces: false,
+  noChildren: false,
+}))
+
+vi.mock('../elk-instance.ts', async (importOriginal) => {
+  const real = await importOriginal<typeof import('../elk-instance.ts')>()
+  const bare = (n: ElkNode): ElkNode => {
+    return { id: n.id, edges: n.edges, children: n.children?.map(bare) }
+  }
+  return {
+    ...real,
+    elkLayoutSync: (...args: Parameters<typeof real.elkLayoutSync>) => {
+      const result = real.elkLayoutSync(...args)
+      if (mode.noChildren) return { ...result, children: undefined }
+      if (mode.emptyNamespaces) {
+        return {
+          ...result,
+          children: result.children?.map((c) =>
+            c.id.startsWith('namespace') ? { ...c, children: undefined } : c,
+          ),
+        }
+      }
+      if (mode.dropNamespaces) {
+        return {
+          ...result,
+          children: result.children?.filter(
+            (c) => !c.id.startsWith('namespace'),
+          ),
+        }
+      }
+      return mode.strip ? bare(result) : result
+    },
+  }
+})
+
+const { layoutClassDiagramSync } = await import('../class/layout.ts')
+
+const SRC = `classDiagram
+namespace Core {
+  class A
+  class B
+}
+A --> B`
+
+const layout = () =>
+  layoutClassDiagramSync(parseClassDiagram(splitStatements(SRC)))
+
+describe('class namespace layout against sparse ELK output (#1196)', () => {
+  it('falls back to the origin and measured sizes when ELK omits geometry', () => {
+    mode.strip = true
+    mode.dropNamespaces = false
+    const p = layout()
+    expect(p.namespaces).toEqual([
+      { name: 'Core', classIds: ['A', 'B'], x: 0, y: 0, width: 0, height: 0 },
+    ])
+    for (const c of p.classes) {
+      expect(c.x).toBe(0)
+      expect(c.width).toBeGreaterThan(0)
+    }
+  })
+
+  it('tolerates a namespace node without children', () => {
+    mode.strip = false
+    mode.dropNamespaces = false
+    mode.emptyNamespaces = true
+    expect(layout().namespaces).toHaveLength(1)
+  })
+
+  it('tolerates a result without any children', () => {
+    mode.strip = false
+    mode.dropNamespaces = false
+    mode.emptyNamespaces = false
+    mode.noChildren = true
+    const p = layout()
+    expect(p.namespaces).toEqual([])
+    expect(p.classes).toEqual([])
+  })
+
+  it('skips a namespace ELK did not return', () => {
+    mode.strip = false
+    mode.noChildren = false
+    mode.emptyNamespaces = false
+    mode.dropNamespaces = true
+    expect(layout().namespaces).toEqual([])
+  })
+})