agentic-mermaid 0.1.1 → 0.2.0

package/src/class/renderer.ts

@@ -1,638 +0,0 @@
-import type { PositionedClassDiagram, PositionedClassNode, PositionedClassRelationship, ClassMember, RelationshipType } from './types.ts'
-import type { RenderContext } from '../types.ts'
-import { svgOpenTag, buildStyleBlock, buildShadowDefs } from '../theme.ts'
-import { FONT_SIZES, FONT_WEIGHTS, STROKE_WIDTHS, TEXT_BASELINE_SHIFT, applyTextTransform, resolveRenderStyle } from '../styles.ts'
-import type { RenderStyleDefaults, ResolvedRenderStyle } from '../styles.ts'
-import { CLS, CLASS_STYLE_DEFAULTS } from './layout.ts'
-import { buildAccessibilityAttrs } from '../shared/svg-a11y.ts'
-import { renderMultilineText, escapeAttr, escapeXml as escapeXmlUtil } from '../multiline-utils.ts'
-import { topRoundedRectPath } from '../svg-paths.ts'
-import type { MarkerRef, SceneDoc, SceneNode } from '../scene/ir.ts'
-import { hashId } from '../scene/seed.ts'
-import * as marks from '../scene/marks.ts'
-import { DefaultBackend } from '../scene/backend.ts'
-
-// ============================================================================
-// Class diagram SVG renderer
-//
-// The positioned diagram is first lowered to a SceneGraph (SPEC §3.1): every
-// visual mark becomes a scene node carrying semantic fields (role, geometry,
-// paint, stable id) plus its exact crisp serialization, built here from the
-// same inputs. renderClassSvg() is DefaultBackend serialization of that scene,
-// so the default path stays byte-identical to the historical string renderer
-// (corpus-gated by svg-equivalence.test.ts).
-//
-// All colors use CSS custom properties (var(--_xxx)) from the theme system.
-//
-// Render order:
-//   1. Relationship lines (behind boxes)
-//   2. Class boxes (header + attributes + methods compartments)
-//   3. Relationship endpoint markers (diamonds, triangles)
-//   4. Labels and cardinality
-// ============================================================================
-
-
-/** Font sizes specific to class diagrams */
-const CLS_FONT = {
-  memberSize: 11,
-  memberWeight: 400,
-  annotationSize: 10,
-  annotationWeight: 500,
-} as const
-
-/**
- * Render a positioned class diagram as an SVG string.
- *
- * @param colors - DiagramColors with bg/fg and optional enrichment variables.
- * @param transparent - If true, renders with transparent background.
- */
-export function renderClassSvg(
-  ctx: RenderContext<PositionedClassDiagram>,
-): string {
-  return DefaultBackend.render(lowerClassScene(ctx), { seed: 0 })
-}
-
-/**
- * Lower a positioned class diagram to the SceneGraph IR. Mark order matches
- * the historical parts[] order exactly; DefaultBackend joins crisps with '\n'.
- */
-export function lowerClassScene(
-  ctx: RenderContext<PositionedClassDiagram>,
-): SceneDoc {
-  const { positioned: diagram, colors, options } = ctx
-  const font = colors.font ?? 'Inter'
-  const transparent = options.transparent ?? false
-  const parts: SceneNode[] = []
-  const style = resolveRenderStyle(options, CLASS_STYLE_DEFAULTS)
-  const uid = `class-${hashId(diagram.width, diagram.height, diagram.classes.length, diagram.relationships.length)}`
-  const titleId = `${uid}-title`
-  const descId = `${uid}-desc`
-  const rootAttrs = buildAccessibilityAttrs(diagram.accessibilityTitle, diagram.accessibilityDescription, titleId, descId)
-
-  // SVG root with CSS variables + style block (with mono font) + defs
-  parts.push(marks.prelude(
-    {
-      id: 'prelude',
-      width: diagram.width,
-      height: diagram.height,
-      colors,
-      transparent,
-      font,
-      hasMonoFont: true,
-    },
-    svgOpenTag(diagram.width, diagram.height, colors, transparent, rootAttrs) + '\n' +
-    buildStyleBlock(font, true, colors.shadow, colors.embedFontImport),
-  ))
-  const defsParts: string[] = []
-  defsParts.push('<defs>')
-  defsParts.push(relationshipMarkerDefs(style))
-  const shadowDefs = buildShadowDefs(colors)
-  if (shadowDefs) defsParts.push(shadowDefs)
-  defsParts.push('</defs>')
-  parts.push(marks.raw({ id: 'defs', role: 'defs' }, defsParts.join('\n')))
-
-  if (diagram.accessibilityTitle) {
-    parts.push(marks.raw({ id: 'title', role: 'chrome' }, `<title id="${titleId}">${escapeXml(diagram.accessibilityTitle)}</title>`))
-  }
-  if (diagram.accessibilityDescription) {
-    parts.push(marks.raw({ id: 'desc', role: 'chrome' }, `<desc id="${descId}">${escapeXml(diagram.accessibilityDescription)}</desc>`))
-  }
-
-  // 1. Relationship lines (rendered behind boxes)
-  const relOccurrence = new Map<string, number>()
-  for (const rel of diagram.relationships) {
-    const pairKey = `${rel.from}->${rel.to}`
-    const k = relOccurrence.get(pairKey) ?? 0
-    relOccurrence.set(pairKey, k + 1)
-    parts.push(renderRelationship(rel, style, `rel:${pairKey}#${k}`))
-  }
-
-  // 2. Class boxes
-  for (const cls of diagram.classes) {
-    parts.push(renderClassBox(cls, style))
-  }
-
-  // 3. Relationship labels and cardinality
-  const labelOccurrence = new Map<string, number>()
-  for (const rel of diagram.relationships) {
-    const pairKey = `${rel.from}->${rel.to}`
-    const k = labelOccurrence.get(pairKey) ?? 0
-    labelOccurrence.set(pairKey, k + 1)
-    parts.push(...renderRelationshipLabels(rel, style, `${pairKey}#${k}`))
-  }
-
-  parts.push(marks.raw({ id: 'svg-close', role: 'chrome' }, '</svg>'))
-
-  return { family: 'class', width: diagram.width, height: diagram.height, colors, parts }
-}
-
-// ============================================================================
-// Marker definitions
-// ============================================================================
-
-/**
- * Marker definitions for class relationship endpoints.
- * Each relationship type has a distinct marker:
- *   - inheritance: hollow triangle
- *   - composition: filled diamond
- *   - aggregation: hollow diamond
- *   - association: open arrow (simple >)
- *   - dependency: open arrow (simple >)
- *   - realization: hollow triangle (same as inheritance)
- *
- * Uses var(--_arrow) for fill/stroke and var(--bg) for hollow marker fills.
- */
-function relationshipMarkerDefs(style: ResolvedRenderStyle): string {
-  const edgeColor = escapeAttr(style.edgeStrokeColor ?? 'var(--_arrow)')
-  return (
-    // Hollow triangle (inheritance, realization) — points at target
-    `  <marker id="cls-inherit" markerWidth="12" markerHeight="10" refX="12" refY="5" orient="auto-start-reverse">` +
-    `\n    <polygon points="0 0, 12 5, 0 10" fill="var(--bg)" stroke="${edgeColor}" stroke-width="1.5" />` +
-    `\n  </marker>` +
-    // Filled diamond (composition) — points at source
-    `\n  <marker id="cls-composition" markerWidth="12" markerHeight="10" refX="0" refY="5" orient="auto-start-reverse">` +
-    `\n    <polygon points="6 0, 12 5, 6 10, 0 5" fill="${edgeColor}" stroke="${edgeColor}" stroke-width="1" />` +
-    `\n  </marker>` +
-    // Hollow diamond (aggregation) — points at source
-    `\n  <marker id="cls-aggregation" markerWidth="12" markerHeight="10" refX="0" refY="5" orient="auto-start-reverse">` +
-    `\n    <polygon points="6 0, 12 5, 6 10, 0 5" fill="var(--bg)" stroke="${edgeColor}" stroke-width="1.5" />` +
-    `\n  </marker>` +
-    // Open arrow (association, dependency)
-    `\n  <marker id="cls-arrow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto-start-reverse">` +
-    `\n    <polyline points="0 0, 8 3, 0 6" fill="none" stroke="${edgeColor}" stroke-width="1.5" />` +
-    `\n  </marker>`
-  )
-}
-
-// ============================================================================
-// Class box rendering
-// ============================================================================
-
-/**
- * Render a class box with 3 compartments: header, attributes, methods.
- * Wrapped in <g class="class-node"> with semantic data attributes.
- */
-function renderClassBox(cls: PositionedClassNode, style: ResolvedRenderStyle): SceneNode {
-  const { x, y, width, height, headerHeight, attrHeight } = cls
-  const children: Array<{ node: SceneNode; indent: number }> = []
-
-  // Semantic wrapper with class metadata
-  // data-id: class identifier
-  // data-label: class name
-  // data-annotation: stereotype (interface, abstract, etc.)
-  const annotationAttr = cls.annotation ? ` data-annotation="${escapeAttr(cls.annotation)}"` : ''
-  const open =
-    `<g class="class-node" data-id="${escapeAttr(cls.id)}" data-label="${escapeAttr(cls.label)}"${annotationAttr}>`
-
-  // Outer rectangle (full box)
-  const boxFill = style.nodeFillColor ?? 'var(--_node-fill)'
-  const boxStroke = style.nodeBorderColor ?? 'var(--_node-stroke)'
-  children.push({
-    indent: 2,
-    node: marks.shape({
-      id: `class:${cls.id}:box`,
-      role: 'class-box',
-      geometry: { kind: 'rect', x, y, width, height, rx: style.cornerRadius ?? 0, ry: style.cornerRadius ?? 0 },
-      paint: { fill: boxFill, stroke: boxStroke, strokeWidth: String(style.nodeLineWidth) },
-    },
-      `<rect x="${x}" y="${y}" width="${width}" height="${height}" ` +
-      `rx="${style.cornerRadius ?? 0}" ry="${style.cornerRadius ?? 0}" fill="${escapeAttr(boxFill)}" stroke="${escapeAttr(boxStroke)}" stroke-width="${style.nodeLineWidth}" />`),
-  })
-
-  // Header background
-  const headerFill = style.groupHeaderFillColor ?? 'var(--_group-hdr)'
-  const headerPath = topRoundedRectPath(x, y, width, headerHeight, style.cornerRadius ?? 0)
-  children.push({
-    indent: 2,
-    node: marks.shape({
-      id: `class:${cls.id}:header`,
-      role: 'group-header',
-      geometry: { kind: 'path', d: headerPath },
-      paint: { fill: headerFill, stroke: boxStroke, strokeWidth: String(style.nodeLineWidth) },
-    },
-      `<path d="${headerPath}" ` +
-      `fill="${escapeAttr(headerFill)}" stroke="${escapeAttr(boxStroke)}" stroke-width="${style.nodeLineWidth}" />`),
-  })
-
-  // Annotation (<<interface>>, <<abstract>>, etc.)
-  let nameY = y + headerHeight / 2
-  if (cls.annotation) {
-    const annotY = y + 12
-    const annotColor = style.nodeTextColor ?? 'var(--_text-muted)'
-    children.push({
-      indent: 2,
-      node: marks.text({
-        id: `class:${cls.id}:annotation`,
-        role: 'label',
-        text: `<<${cls.annotation}>>`,
-        x: x + width / 2,
-        y: annotY,
-        fontSize: CLS_FONT.annotationSize,
-        anchor: 'middle',
-        paint: { fill: annotColor },
-      },
-        `<text x="${x + width / 2}" y="${annotY}" text-anchor="middle" dy="${TEXT_BASELINE_SHIFT}" ` +
-        `font-size="${CLS_FONT.annotationSize}" font-weight="${CLS_FONT.annotationWeight}" ` +
-        `font-style="italic" fill="${escapeAttr(annotColor)}">&lt;&lt;${escapeXml(cls.annotation)}&gt;&gt;</text>`),
-    })
-    nameY = y + headerHeight / 2 + 6
-  }
-
-  // Class name (supports multi-line via <br> tags)
-  const nameColor = style.nodeTextColor ?? 'var(--_text)'
-  const label = applyTextTransform(cls.label, style.nodeTextTransform)
-  children.push({
-    indent: 2,
-    node: marks.text({
-      id: `class:${cls.id}:name`,
-      role: 'label',
-      text: label,
-      x: x + width / 2,
-      y: nameY,
-      fontSize: style.nodeLabelFontSize,
-      anchor: 'middle',
-      paint: { fill: nameColor },
-    }, renderMultilineText(
-      label,
-      x + width / 2,
-      nameY,
-      style.nodeLabelFontSize,
-      `text-anchor="middle" font-size="${style.nodeLabelFontSize}" font-weight="${style.nodeLabelFontWeight}"${letterAttr(style.nodeLetterSpacing)} fill="${escapeAttr(nameColor)}"`
-    )),
-  })
-
-  // Divider line between header and attributes
-  const attrTop = y + headerHeight
-  children.push({ indent: 2, node: renderDivider(cls.id, 'attrs', x, attrTop, width, style) })
-
-  // Attributes
-  const memberRowH = 20
-  for (let i = 0; i < cls.attributes.length; i++) {
-    const member = cls.attributes[i]!
-    const memberY = attrTop + 4 + i * memberRowH + memberRowH / 2
-    children.push({ indent: 2, node: renderMember(member, x + style.nodePaddingX, memberY, style, `member:${cls.id}:${member.name}`) })
-  }
-
-  // Divider line between attributes and methods
-  const methodTop = attrTop + attrHeight
-  children.push({ indent: 2, node: renderDivider(cls.id, 'methods', x, methodTop, width, style) })
-
-  // Methods
-  for (let i = 0; i < cls.methods.length; i++) {
-    const member = cls.methods[i]!
-    const memberY = methodTop + 4 + i * memberRowH + memberRowH / 2
-    children.push({ indent: 2, node: renderMember(member, x + style.nodePaddingX, memberY, style, `member:${cls.id}:${member.name}`) })
-  }
-
-  return marks.group({
-    id: `class:${cls.id}`,
-    role: 'class-box',
-    open,
-    close: '</g>',
-    children,
-  })
-}
-
-/** Compartment divider line (header/attributes and attributes/methods). */
-function renderDivider(clsId: string, which: 'attrs' | 'methods', x: number, lineY: number, width: number, style: ResolvedRenderStyle): SceneNode {
-  const stroke = style.nodeBorderColor ?? 'var(--_node-stroke)'
-  const strokeWidth = Math.min(style.nodeLineWidth, STROKE_WIDTHS.innerBox)
-  return marks.shape({
-    id: `class:${clsId}:divider:${which}`,
-    role: 'chrome',
-    geometry: { kind: 'line', x1: x, y1: lineY, x2: x + width, y2: lineY },
-    paint: { stroke, strokeWidth: String(strokeWidth) },
-  },
-    `<line x1="${x}" y1="${lineY}" x2="${x + width}" y2="${lineY}" ` +
-    `stroke="${escapeAttr(stroke)}" stroke-width="${strokeWidth}" />`)
-}
-
-/**
- * Render a single class member with syntax highlighting.
- * Uses <tspan> elements to color each part of the member differently:
- *   - visibility symbol (+/-/#/~) → textFaint
- *   - member name (incl. parens for methods) → textSecondary
- *   - colon separator → textFaint
- *   - type annotation → textMuted
- */
-function renderMember(member: ClassMember, x: number, y: number, style: ResolvedRenderStyle, sceneId: string): SceneNode {
-  const fontStyle = member.isAbstract ? ' font-style="italic"' : ''
-  const decoration = member.isStatic ? ' text-decoration="underline"' : ''
-
-  // Build tspan parts for syntax-highlighted member text
-  const spans: string[] = []
-
-  if (member.visibility) {
-    spans.push(`<tspan fill="var(--_text-faint)">${escapeXml(member.visibility)} </tspan>`)
-  }
-
-  // Add parentheses for methods to distinguish from attributes, including parameters if present
-  const displayName = member.isMethod
-    ? `${member.name}(${member.params || ''})`
-    : member.name
-  spans.push(`<tspan fill="${escapeAttr(style.nodeTextColor ?? 'var(--_text-sec)')}">${escapeXml(displayName)}</tspan>`)
-
-  if (member.type) {
-    spans.push(`<tspan fill="var(--_text-faint)">: </tspan>`)
-    spans.push(`<tspan fill="var(--_text-muted)">${escapeXml(member.type)}</tspan>`)
-  }
-
-  // Plain signature string (the tspan structure lives in the crisp)
-  const plain =
-    `${member.visibility ? `${member.visibility} ` : ''}${displayName}${member.type ? `: ${member.type}` : ''}`
-
-  return marks.text({
-    id: sceneId,
-    role: 'member',
-    text: plain,
-    x,
-    y,
-    fontSize: CLS_FONT.memberSize,
-    anchor: 'start',
-    paint: { fill: style.nodeTextColor ?? 'var(--_text-sec)' },
-  },
-    `<text x="${x}" y="${y}" class="mono" dy="${TEXT_BASELINE_SHIFT}" ` +
-    `font-size="${CLS_FONT.memberSize}" font-weight="${CLS_FONT.memberWeight}"${fontStyle}${decoration}>` +
-    `${spans.join('')}</text>`)
-}
-
-// ============================================================================
-// Relationship rendering
-// ============================================================================
-
-/**
- * Render a relationship line with appropriate markers and semantic attributes.
- * Includes data-* attributes for programmatic inspection.
- */
-function renderRelationship(rel: PositionedClassRelationship, style: ResolvedRenderStyle, sceneId: string): SceneNode {
-  if (rel.points.length < 2) {
-    // Degenerate relationship — draws nothing (crisp '', like the old '' part).
-    return marks.connector({
-      id: sceneId,
-      role: 'relationship',
-      geometry: { kind: 'polyline', points: rel.points },
-      lineStyle: 'invisible',
-      paint: {},
-    }, '')
-  }
-
-  const pathData = rel.points.map(p => `${p.x},${p.y}`).join(' ')
-  const isDashed = rel.type === 'dependency' || rel.type === 'realization'
-  const dashArray = isDashed ? ' stroke-dasharray="6 4"' : ''
-  const lineStyle = isDashed ? 'dashed' : 'solid'
-
-  // Determine markers based on relationship type and which end has the marker
-  const markers = getRelationshipMarkers(rel.type, rel.markerAt)
-  const markerId = getMarkerDefId(rel.type)
-  const markerRef: MarkerRef | undefined = markerId ? { id: markerId, shape: markerShapeFor(markerId) } : undefined
-  const startMarker = rel.markerAt === 'from' ? markerRef : undefined
-  const endMarker = rel.markerAt === 'to' ? markerRef : undefined
-
-  // Build semantic data attributes for relationship inspection:
-  // - class="class-relationship": CSS targeting
-  // - data-from/data-to: source and target class IDs
-  // - data-type: relationship type (inheritance, composition, etc.)
-  // - data-marker-at: which end has the marker (from/to)
-  // - data-from-cardinality/data-to-cardinality: multiplicity if present
-  // - data-label: relationship label if present
-  const dataAttrs = [
-    'class="class-relationship"',
-    `data-from="${escapeAttr(rel.from)}"`,
-    `data-to="${escapeAttr(rel.to)}"`,
-    `data-type="${rel.type}"`,
-    `data-marker-at="${rel.markerAt}"`,
-  ]
-  if (rel.label) {
-    dataAttrs.push(`data-label="${escapeAttr(rel.label)}"`)
-  }
-  if (rel.fromCardinality) {
-    dataAttrs.push(`data-from-cardinality="${escapeAttr(rel.fromCardinality)}"`)
-  }
-  if (rel.toCardinality) {
-    dataAttrs.push(`data-to-cardinality="${escapeAttr(rel.toCardinality)}"`)
-  }
-
-  const strokeColor = style.edgeStrokeColor ?? 'var(--_line)'
-  const paint = {
-    stroke: strokeColor,
-    strokeWidth: String(style.lineWidth),
-    ...(isDashed ? { strokeDasharray: '6 4' } : {}),
-  }
-
-  if (style.edgeBendRadius > 0 && rel.points.length > 2) {
-    const d = pointsToPathD(rel.points, style.edgeBendRadius)
-    return marks.connector({
-      id: sceneId,
-      role: 'relationship',
-      geometry: { kind: 'path', d, points: rel.points },
-      lineStyle,
-      paint,
-      startMarker,
-      endMarker,
-    },
-      `<path ${dataAttrs.join(' ')} d="${d}" fill="none" stroke="${escapeAttr(strokeColor)}" ` +
-      `stroke-width="${style.lineWidth}"${dashArray}${markers} />`)
-  }
-
-  return marks.connector({
-    id: sceneId,
-    role: 'relationship',
-    geometry: { kind: 'polyline', points: rel.points },
-    lineStyle,
-    paint,
-    startMarker,
-    endMarker,
-  },
-    `<polyline ${dataAttrs.join(' ')} points="${pathData}" fill="none" stroke="${escapeAttr(strokeColor)}" ` +
-    `stroke-width="${style.lineWidth}"${dashArray}${markers} />`)
-}
-
-/**
- * Get marker-start/marker-end attributes for a relationship type.
- * Uses `markerAt` from the parser to place the marker on the correct end:
- *   - 'from' → marker-start (prefix arrows like `<|--`, `*--`, `o--`)
- *   - 'to'   → marker-end   (suffix arrows like `..|>`, `-->`, `--*`)
- */
-function getRelationshipMarkers(type: RelationshipType, markerAt: 'from' | 'to'): string {
-  const markerId = getMarkerDefId(type)
-  if (!markerId) return ''
-
-  if (markerAt === 'from') {
-    return ` marker-start="url(#${markerId})"`
-  } else {
-    return ` marker-end="url(#${markerId})"`
-  }
-}
-
-/** Map relationship type to its SVG marker definition ID */
-function getMarkerDefId(type: RelationshipType): string | null {
-  switch (type) {
-    case 'inheritance':
-    case 'realization':
-      return 'cls-inherit'
-    case 'composition':
-      return 'cls-composition'
-    case 'aggregation':
-      return 'cls-aggregation'
-    case 'association':
-    case 'dependency':
-      return 'cls-arrow'
-    default:
-      return null
-  }
-}
-
-/** Map a marker def ID to its MarkerRef archetype for styled backends. */
-function markerShapeFor(markerId: string): MarkerRef['shape'] {
-  switch (markerId) {
-    case 'cls-inherit':
-      return 'triangle'
-    case 'cls-composition':
-      return 'diamond'
-    case 'cls-aggregation':
-      return 'diamond-open'
-    default:
-      return 'open-arrow'
-  }
-}
-
-/** Render relationship labels and cardinality text (supports multi-line).
- *  Returns one text mark per label/cardinality; when the relationship has
- *  none, a single empty mark keeps the historical '' part (blank line). */
-function renderRelationshipLabels(rel: PositionedClassRelationship, style: ResolvedRenderStyle, key: string): SceneNode[] {
-  if ((!rel.label && !rel.fromCardinality && !rel.toCardinality) || rel.points.length < 2) {
-    return [marks.raw({ id: `rel-labels:${key}`, role: 'chrome' }, '')]
-  }
-
-  const out: SceneNode[] = []
-  const textColor = style.edgeTextColor ?? 'var(--_text-muted)'
-  const textAttrs =
-    `font-size="${style.edgeLabelFontSize}" text-anchor="middle" font-weight="${style.edgeLabelFontWeight}"${letterAttr(style.edgeLetterSpacing)} fill="${escapeAttr(textColor)}"`
-
-  // Label — prefer layout-computed position (collision-aware), fall back to midpoint
-  if (rel.label) {
-    const pos = rel.labelPosition ?? midpoint(rel.points)
-    const label = applyTextTransform(rel.label, style.edgeTextTransform)
-    out.push(marks.text({
-      id: `rel-label:${key}`,
-      role: 'label',
-      text: label,
-      x: pos.x,
-      y: pos.y - 8,
-      fontSize: style.edgeLabelFontSize,
-      anchor: 'middle',
-      paint: { fill: textColor },
-    }, renderMultilineText(label, pos.x, pos.y - 8, style.edgeLabelFontSize, textAttrs)))
-  }
-
-  // From cardinality (near start)
-  if (rel.fromCardinality) {
-    const p = rel.points[0]!
-    const next = rel.points[1]!
-    const offset = cardinalityOffset(p, next)
-    out.push(marks.text({
-      id: `rel-card:${key}:from`,
-      role: 'cardinality',
-      text: rel.fromCardinality,
-      x: p.x + offset.x,
-      y: p.y + offset.y,
-      fontSize: style.edgeLabelFontSize,
-      anchor: 'middle',
-      paint: { fill: textColor },
-    }, renderMultilineText(rel.fromCardinality, p.x + offset.x, p.y + offset.y, style.edgeLabelFontSize, textAttrs)))
-  }
-
-  // To cardinality (near end)
-  if (rel.toCardinality) {
-    const p = rel.points[rel.points.length - 1]!
-    const prev = rel.points[rel.points.length - 2]!
-    const offset = cardinalityOffset(p, prev)
-    out.push(marks.text({
-      id: `rel-card:${key}:to`,
-      role: 'cardinality',
-      text: rel.toCardinality,
-      x: p.x + offset.x,
-      y: p.y + offset.y,
-      fontSize: style.edgeLabelFontSize,
-      anchor: 'middle',
-      paint: { fill: textColor },
-    }, renderMultilineText(rel.toCardinality, p.x + offset.x, p.y + offset.y, style.edgeLabelFontSize, textAttrs)))
-  }
-
-  return out
-}
-
-function pointsToPathD(points: Array<{ x: number; y: number }>, radius: number): string {
-  if (points.length === 0) return ''
-  if (points.length === 1) return `M${points[0]!.x},${points[0]!.y}`
-  const parts = [`M${points[0]!.x},${points[0]!.y}`]
-  for (let i = 1; i < points.length - 1; i++) {
-    const prev = points[i - 1]!
-    const curr = points[i]!
-    const next = points[i + 1]!
-    const prevLen = Math.abs(curr.x - prev.x) + Math.abs(curr.y - prev.y)
-    const nextLen = Math.abs(next.x - curr.x) + Math.abs(next.y - curr.y)
-    const r = Math.min(radius, prevLen / 2, nextLen / 2)
-    if (r <= 0) {
-      parts.push(`L${curr.x},${curr.y}`)
-      continue
-    }
-    const before = pointToward(curr, prev, r)
-    const after = pointToward(curr, next, r)
-    parts.push(`L${before.x},${before.y}`)
-    parts.push(`Q${curr.x},${curr.y} ${after.x},${after.y}`)
-  }
-  const last = points[points.length - 1]!
-  parts.push(`L${last.x},${last.y}`)
-  return parts.join(' ')
-}
-
-function pointToward(from: { x: number; y: number }, to: { x: number; y: number }, distance: number): { x: number; y: number } {
-  const total = Math.abs(to.x - from.x) + Math.abs(to.y - from.y)
-  if (total === 0) return { ...from }
-  const t = distance / total
-  return {
-    x: Math.round((from.x + (to.x - from.x) * t) * 1000) / 1000,
-    y: Math.round((from.y + (to.y - from.y) * t) * 1000) / 1000,
-  }
-}
-
-/** Get the midpoint of a point array */
-function midpoint(points: Array<{ x: number; y: number }>): { x: number; y: number } {
-  if (points.length === 0) return { x: 0, y: 0 }
-  const mid = Math.floor(points.length / 2)
-  return points[mid]!
-}
-
-/** Calculate offset for cardinality label perpendicular to edge direction */
-function cardinalityOffset(
-  from: { x: number; y: number },
-  to: { x: number; y: number }
-): { x: number; y: number } {
-  const dx = to.x - from.x
-  const dy = to.y - from.y
-  // Place label perpendicular to the edge, 14px away
-  if (Math.abs(dx) > Math.abs(dy)) {
-    // Mostly horizontal — offset vertically
-    return { x: dx > 0 ? 14 : -14, y: -10 }
-  }
-  // Mostly vertical — offset horizontally
-  return { x: -14, y: dy > 0 ? 14 : -14 }
-}
-
-// ============================================================================
-// Utilities
-// ============================================================================
-
-function letterAttr(value: number): string {
-  return value !== 0 ? ` letter-spacing="${value}"` : ''
-}
-
-// Use shared escapeXml from multiline-utils
-const escapeXml = escapeXmlUtil
-
-
-/**
- * Escape a string for use as an XML/HTML attribute value.
- * Escapes quotes and ampersands to prevent attribute injection.
- */