@shumoku/core 0.1.1 → 0.2.0

package/src/models/types.ts

@@ -378,6 +378,38 @@ export function paperSizeToPixels(
  */
 export type ThemeType = 'light' | 'dark'
 
+export interface LegendSettings {
+  /**
+   * Show legend in the diagram
+   */
+  enabled?: boolean
+
+  /**
+   * Legend position
+   */
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+
+  /**
+   * Show device type icons
+   */
+  showDeviceTypes?: boolean
+
+  /**
+   * Show bandwidth indicators
+   */
+  showBandwidth?: boolean
+
+  /**
+   * Show cable/link types
+   */
+  showCableTypes?: boolean
+
+  /**
+   * Show VLAN colors
+   */
+  showVlans?: boolean
+}
+
 export interface GraphSettings {
   /**
    * Default layout direction
@@ -408,6 +440,11 @@ export interface GraphSettings {
    * Canvas/sheet size settings
    */
   canvas?: CanvasSettings
+
+  /**
+   * Legend configuration
+   */
+  legend?: boolean | LegendSettings
 }
 
 export interface NetworkGraph {

package/src/renderer/svg.ts

@@ -14,8 +14,16 @@ import type {
   NodeShape,
   LinkType,
   ThemeType,
+  LegendSettings,
+  LinkBandwidth,
 } from '../models/index.js'
 import { getDeviceIcon, getVendorIconEntry, type IconThemeVariant } from '../icons/index.js'
+import {
+  DEFAULT_ICON_SIZE,
+  ICON_LABEL_GAP,
+  LABEL_LINE_HEIGHT,
+  MAX_ICON_WIDTH_RATIO,
+} from '../constants.js'
 
 // ============================================
 // Theme Colors
@@ -126,11 +134,30 @@ export class SVGRenderer {
     this.themeColors = this.getThemeColors(theme)
     this.iconTheme = this.getIconTheme(theme)
 
+    // Calculate legend dimensions if enabled
+    const legendSettings = this.getLegendSettings(graph.settings?.legend)
+    let legendWidth = 0
+    let legendHeight = 0
+    if (legendSettings.enabled) {
+      const legendDims = this.calculateLegendDimensions(graph, legendSettings)
+      legendWidth = legendDims.width
+      legendHeight = legendDims.height
+    }
+
+    // Expand bounds to include legend with padding
+    const legendPadding = 20
+    const expandedBounds = {
+      x: bounds.x,
+      y: bounds.y,
+      width: bounds.width + (legendSettings.enabled && legendWidth > 0 ? legendPadding : 0),
+      height: bounds.height + (legendSettings.enabled && legendHeight > 0 ? legendPadding : 0),
+    }
+
     const parts: string[] = []
 
-    // SVG header using content bounds
-    const viewBox = `${bounds.x} ${bounds.y} ${bounds.width} ${bounds.height}`
-    parts.push(this.renderHeader(bounds.width, bounds.height, viewBox))
+    // SVG header using expanded bounds
+    const viewBox = `${expandedBounds.x} ${expandedBounds.y} ${expandedBounds.width} ${expandedBounds.height}`
+    parts.push(this.renderHeader(expandedBounds.width, expandedBounds.height, viewBox))
 
     // Defs (markers, gradients)
     parts.push(this.renderDefs())
@@ -138,27 +165,195 @@ export class SVGRenderer {
     // Styles
     parts.push(this.renderStyles())
 
-    // Subgraphs (background, render first)
+    // Layer 1: Subgraphs (background)
     layout.subgraphs.forEach((sg) => {
       parts.push(this.renderSubgraph(sg))
     })
 
-    // Links
+    // Layer 2: Node backgrounds (shapes)
+    layout.nodes.forEach((node) => {
+      parts.push(this.renderNodeBackground(node))
+    })
+
+    // Layer 3: Links (on top of node backgrounds)
     layout.links.forEach((link) => {
       parts.push(this.renderLink(link, layout.nodes))
     })
 
-    // Nodes
+    // Layer 4: Node foregrounds (content + ports, on top of links)
     layout.nodes.forEach((node) => {
-      parts.push(this.renderNode(node))
+      parts.push(this.renderNodeForeground(node))
     })
 
+    // Legend (if enabled) - use already calculated legendSettings
+    if (legendSettings.enabled && legendWidth > 0) {
+      parts.push(this.renderLegend(graph, layout, legendSettings))
+    }
+
     // Close SVG
     parts.push('</svg>')
 
     return parts.join('\n')
   }
 
+  /**
+   * Calculate legend dimensions without rendering
+   */
+  private calculateLegendDimensions(graph: NetworkGraph, settings: LegendSettings): { width: number; height: number } {
+    const lineHeight = 20
+    const padding = 12
+    const iconWidth = 30
+    const maxLabelWidth = 100
+
+    // Count items
+    let itemCount = 0
+
+    if (settings.showBandwidth) {
+      const usedBandwidths = new Set<LinkBandwidth>()
+      graph.links.forEach(link => {
+        if (link.bandwidth) usedBandwidths.add(link.bandwidth)
+      })
+      itemCount += usedBandwidths.size
+    }
+
+    if (itemCount === 0) {
+      return { width: 0, height: 0 }
+    }
+
+    const width = iconWidth + maxLabelWidth + padding * 2
+    const height = itemCount * lineHeight + padding * 2 + 20 // +20 for title
+
+    return { width, height }
+  }
+
+  /**
+   * Parse legend settings from various input formats
+   */
+  private getLegendSettings(legend?: boolean | LegendSettings): LegendSettings & { enabled: boolean } {
+    if (legend === true) {
+      return {
+        enabled: true,
+        position: 'top-right',
+        showDeviceTypes: true,
+        showBandwidth: true,
+        showCableTypes: true,
+        showVlans: false,
+      }
+    }
+
+    if (legend && typeof legend === 'object') {
+      return {
+        enabled: legend.enabled !== false,
+        position: legend.position ?? 'top-right',
+        showDeviceTypes: legend.showDeviceTypes ?? true,
+        showBandwidth: legend.showBandwidth ?? true,
+        showCableTypes: legend.showCableTypes ?? true,
+        showVlans: legend.showVlans ?? false,
+      }
+    }
+
+    return { enabled: false, position: 'top-right' }
+  }
+
+  /**
+   * Render legend showing visual elements used in the diagram
+   */
+  private renderLegend(graph: NetworkGraph, layout: LayoutResult, settings: LegendSettings): string {
+    const items: { icon: string; label: string }[] = []
+    const lineHeight = 20
+    const padding = 12
+    const iconWidth = 30
+    const maxLabelWidth = 100
+
+    // Collect used bandwidths
+    const usedBandwidths = new Set<LinkBandwidth>()
+    graph.links.forEach(link => {
+      if (link.bandwidth) usedBandwidths.add(link.bandwidth)
+    })
+
+    // Collect used device types
+    const usedDeviceTypes = new Set<string>()
+    graph.nodes.forEach(node => {
+      if (node.type) usedDeviceTypes.add(node.type)
+    })
+
+    // Build legend items
+    if (settings.showBandwidth && usedBandwidths.size > 0) {
+      const sortedBandwidths: LinkBandwidth[] = ['1G', '10G', '25G', '40G', '100G'].filter(
+        b => usedBandwidths.has(b as LinkBandwidth)
+      ) as LinkBandwidth[]
+
+      for (const bw of sortedBandwidths) {
+        const config = this.getBandwidthConfig(bw)
+        items.push({
+          icon: this.renderBandwidthLegendIcon(config.lineCount),
+          label: bw,
+        })
+      }
+    }
+
+    if (items.length === 0) return ''
+
+    // Calculate legend dimensions
+    const legendWidth = iconWidth + maxLabelWidth + padding * 2
+    const legendHeight = items.length * lineHeight + padding * 2 + 20 // +20 for title
+
+    // Position based on settings
+    const { bounds } = layout
+    let legendX = bounds.x + bounds.width - legendWidth - 10
+    let legendY = bounds.y + bounds.height - legendHeight - 10
+
+    switch (settings.position) {
+      case 'top-left':
+        legendX = bounds.x + 10
+        legendY = bounds.y + 10
+        break
+      case 'top-right':
+        legendX = bounds.x + bounds.width - legendWidth - 10
+        legendY = bounds.y + 10
+        break
+      case 'bottom-left':
+        legendX = bounds.x + 10
+        legendY = bounds.y + bounds.height - legendHeight - 10
+        break
+    }
+
+    // Render legend box
+    let svg = `<g class="legend" transform="translate(${legendX}, ${legendY})">
+  <rect x="0" y="0" width="${legendWidth}" height="${legendHeight}" rx="4"
+    fill="${this.themeColors.backgroundColor}" stroke="${this.themeColors.subgraphStroke}" stroke-width="1" opacity="0.95" />
+  <text x="${padding}" y="${padding + 12}" class="subgraph-label" font-size="11">Legend</text>`
+
+    // Render items
+    items.forEach((item, index) => {
+      const y = padding + 28 + index * lineHeight
+      svg += `\n  <g transform="translate(${padding}, ${y})">`
+      svg += `\n    ${item.icon}`
+      svg += `\n    <text x="${iconWidth + 4}" y="4" class="node-label" font-size="10">${this.escapeXml(item.label)}</text>`
+      svg += `\n  </g>`
+    })
+
+    svg += '\n</g>'
+    return svg
+  }
+
+  /**
+   * Render bandwidth indicator for legend
+   */
+  private renderBandwidthLegendIcon(lineCount: number): string {
+    const lineSpacing = 3
+    const lineWidth = 24
+    const strokeWidth = 2
+    const offsets = this.calculateLineOffsets(lineCount, lineSpacing)
+
+    const lines = offsets.map(offset => {
+      const y = offset
+      return `<line x1="0" y1="${y}" x2="${lineWidth}" y2="${y}" stroke="${this.themeColors.defaultLinkStroke}" stroke-width="${strokeWidth}" />`
+    })
+
+    return `<g transform="translate(0, 0)">${lines.join('')}</g>`
+  }
+
   private renderHeader(width: number, height: number, viewBox: string): string {
     return `<svg xmlns="http://www.w3.org/2000/svg"
   viewBox="${viewBox}"
@@ -273,8 +468,9 @@ export class SVGRenderer {
 </g>`
   }
 
-  private renderNode(layoutNode: LayoutNode): string {
-    const { id, position, size, node, ports } = layoutNode
+  /** Render node background (shape only) */
+  private renderNodeBackground(layoutNode: LayoutNode): string {
+    const { id, position, size, node } = layoutNode
     const x = position.x
     const y = position.y
     const w = size.width
@@ -287,18 +483,27 @@ export class SVGRenderer {
     const strokeDasharray = style.strokeDasharray || ''
 
     const shape = this.renderNodeShape(node.shape, x, y, w, h, fill, stroke, strokeWidth, strokeDasharray)
-    const iconResult = this.renderNodeIcon(node, x, y, w, h)
-    const label = this.renderNodeLabel(node, x, y, h, iconResult.height)
+
+    return `<g class="node-bg" data-id="${id}">${shape}</g>`
+  }
+
+  /** Render node foreground (content + ports) */
+  private renderNodeForeground(layoutNode: LayoutNode): string {
+    const { id, position, size, node, ports } = layoutNode
+    const x = position.x
+    const y = position.y
+    const w = size.width
+
+    const content = this.renderNodeContent(node, x, y, w)
     const portsRendered = this.renderPorts(x, y, ports)
 
-    return `<g class="node" data-id="${id}" transform="translate(0,0)">
-  ${shape}
-  ${iconResult.svg}
-  ${label}
+    return `<g class="node-fg" data-id="${id}">
+  ${content}
   ${portsRendered}
 </g>`
   }
 
+
   /**
    * Render ports on a node
    */
@@ -430,9 +635,8 @@ export class SVGRenderer {
    * Calculate icon dimensions for a node
    */
   private calculateIconInfo(node: Node, w: number): { width: number; height: number; svg: string } | null {
-    const defaultIconSize = 40
-    const iconPadding = 16
-    const maxIconWidth = w - iconPadding
+    // Cap icon width at MAX_ICON_WIDTH_RATIO of node width to leave room for ports
+    const maxIconWidth = Math.round(w * MAX_ICON_WIDTH_RATIO)
 
     // Try vendor-specific icon first (service for cloud, model for hardware)
     const iconKey = node.service || node.model
@@ -449,8 +653,8 @@ export class SVGRenderer {
             const vbWidth = parseInt(viewBoxMatch[1])
             const vbHeight = parseInt(viewBoxMatch[2])
             const aspectRatio = vbWidth / vbHeight
-            let iconWidth = Math.round(defaultIconSize * aspectRatio)
-            let iconHeight = defaultIconSize
+            let iconWidth = Math.round(DEFAULT_ICON_SIZE * aspectRatio)
+            let iconHeight = DEFAULT_ICON_SIZE
             if (iconWidth > maxIconWidth) {
               iconWidth = maxIconWidth
               iconHeight = Math.round(maxIconWidth / aspectRatio)
@@ -470,8 +674,8 @@ export class SVGRenderer {
           const vbWidth = parseInt(vbMatch[3])
           const vbHeight = parseInt(vbMatch[4])
           const aspectRatio = vbWidth / vbHeight
-          let iconWidth = Math.abs(aspectRatio - 1) < 0.01 ? defaultIconSize : Math.round(defaultIconSize * aspectRatio)
-          let iconHeight = defaultIconSize
+          let iconWidth = Math.abs(aspectRatio - 1) < 0.01 ? DEFAULT_ICON_SIZE : Math.round(DEFAULT_ICON_SIZE * aspectRatio)
+          let iconHeight = DEFAULT_ICON_SIZE
           if (iconWidth > maxIconWidth) {
             iconWidth = maxIconWidth
             iconHeight = Math.round(maxIconWidth / aspectRatio)
@@ -485,9 +689,9 @@ export class SVGRenderer {
 
         // Fallback: use viewBox directly
         return {
-          width: defaultIconSize,
-          height: defaultIconSize,
-          svg: `<svg width="${defaultIconSize}" height="${defaultIconSize}" viewBox="${viewBox}">${vendorIcon}</svg>`,
+          width: DEFAULT_ICON_SIZE,
+          height: DEFAULT_ICON_SIZE,
+          svg: `<svg width="${DEFAULT_ICON_SIZE}" height="${DEFAULT_ICON_SIZE}" viewBox="${viewBox}">${vendorIcon}</svg>`,
         }
       }
     }
@@ -497,42 +701,48 @@ export class SVGRenderer {
     if (!iconPath) return null
 
     return {
-      width: defaultIconSize,
-      height: defaultIconSize,
-      svg: `<svg width="${defaultIconSize}" height="${defaultIconSize}" viewBox="0 0 24 24" fill="currentColor">${iconPath}</svg>`,
+      width: DEFAULT_ICON_SIZE,
+      height: DEFAULT_ICON_SIZE,
+      svg: `<svg width="${DEFAULT_ICON_SIZE}" height="${DEFAULT_ICON_SIZE}" viewBox="0 0 24 24" fill="currentColor">${iconPath}</svg>`,
     }
   }
 
-  private renderNodeIcon(node: Node, x: number, y: number, w: number, h: number): { svg: string; height: number } {
+  /**
+   * Render node content (icon + label) with dynamic vertical centering
+   */
+  private renderNodeContent(node: Node, x: number, y: number, w: number): string {
     const iconInfo = this.calculateIconInfo(node, w)
-    if (!iconInfo) return { svg: '', height: 0 }
+    const labels = Array.isArray(node.label) ? node.label : [node.label]
+    const labelHeight = labels.length * LABEL_LINE_HEIGHT
 
-    const iconY = y - h / 2 + 12 // Position near top of node
-    const svg = `<g class="node-icon" transform="translate(${x - iconInfo.width / 2}, ${iconY})">
-      ${iconInfo.svg}
-    </g>`
-    return { svg, height: iconInfo.height }
-  }
+    // Calculate total content height
+    const iconHeight = iconInfo?.height || 0
+    const gap = iconHeight > 0 ? ICON_LABEL_GAP : 0
+    const totalContentHeight = iconHeight + gap + labelHeight
 
-  private renderNodeLabel(node: Node, x: number, y: number, _h: number, iconHeight: number): string {
-    const labels = Array.isArray(node.label) ? node.label : [node.label]
-    const lineHeight = 16
-    const totalHeight = labels.length * lineHeight
+    // Center the content block vertically in the node
+    const contentTop = y - totalContentHeight / 2
 
-    // Shift labels down based on actual icon height (with small padding)
-    const iconOffset = iconHeight > 0 ? iconHeight - 8 : 0
-    const startY = y - totalHeight / 2 + lineHeight / 2 + 4 + iconOffset
+    const parts: string[] = []
+
+    // Render icon at top of content block
+    if (iconInfo) {
+      const iconY = contentTop
+      parts.push(`<g class="node-icon" transform="translate(${x - iconInfo.width / 2}, ${iconY})">
+      ${iconInfo.svg}
+    </g>`)
+    }
 
-    const lines = labels.map((line, i) => {
-      // Parse simple HTML tags
+    // Render labels below icon
+    const labelStartY = contentTop + iconHeight + gap + LABEL_LINE_HEIGHT * 0.7  // 0.7 for text baseline adjustment
+    labels.forEach((line, i) => {
       const isBold = line.includes('<b>') || line.includes('<strong>')
       const cleanLine = line.replace(/<\/?b>|<\/?strong>|<br\s*\/?>/gi, '')
       const className = isBold ? 'node-label node-label-bold' : 'node-label'
-
-      return `<text x="${x}" y="${startY + i * lineHeight}" class="${className}" text-anchor="middle">${this.escapeXml(cleanLine)}</text>`
+      parts.push(`<text x="${x}" y="${labelStartY + i * LABEL_LINE_HEIGHT}" class="${className}" text-anchor="middle">${this.escapeXml(cleanLine)}</text>`)
     })
 
-    return lines.join('\n  ')
+    return parts.join('\n  ')
   }
 
   private renderLink(layoutLink: LayoutLink, nodes: Map<string, LayoutNode>): string {
@@ -634,10 +844,6 @@ export class SVGRenderer {
     const nx = len > 0 ? dx / len : 0
     const ny = len > 0 ? dy / len : 1
 
-    // Perpendicular direction (90 degrees rotated)
-    const perpX = -ny
-    const perpY = nx
-
     const isVertical = Math.abs(dy) > Math.abs(dx)
 
     // Hash port name as fallback
@@ -670,21 +876,29 @@ export class SVGRenderer {
     let x: number
     let y: number
 
+    let anchor: string
+
     if (isVertical) {
       // For vertical links, use fixed horizontal offset (simpler and consistent)
       x = endpoint.x + perpDist * sideMultiplier
       y = endpoint.y + ny * offsetDist
-    } else {
-      // For horizontal links, use perpendicular calculation
-      x = endpoint.x + nx * offsetDist + perpX * perpDist * sideMultiplier
-      y = endpoint.y + ny * offsetDist + perpY * perpDist * sideMultiplier
-    }
 
-    // Text anchor based on final position relative to endpoint
-    let anchor = 'middle'
-    const labelDx = x - endpoint.x
-    if (Math.abs(labelDx) > 8) {
-      anchor = labelDx > 0 ? 'start' : 'end'
+      // Text anchor based on final position relative to endpoint
+      anchor = 'middle'
+      const labelDx = x - endpoint.x
+      if (Math.abs(labelDx) > 8) {
+        anchor = labelDx > 0 ? 'start' : 'end'
+      }
+    } else {
+      // For horizontal links, position label near the port (not toward center)
+      // Keep x near the endpoint, offset y below the line
+      x = endpoint.x
+      y = endpoint.y + perpDist  // Always below the line
+
+      // Text anchor: extend toward the center of the link
+      // Start endpoint extends right (start), end endpoint extends left (end)
+      // Check direction: if nextPoint is to the left, we're on the right side
+      anchor = nx < 0 ? 'end' : 'start'
     }
 
     return { x, y, anchor }
@@ -730,7 +944,7 @@ export class SVGRenderer {
     switch (type) {
       case 'thick': return 3
       case 'double': return 2
-      default: return 1.5
+      default: return 2
     }
   }
 
@@ -743,7 +957,7 @@ export class SVGRenderer {
    * 100G → 5 lines
    */
   private getBandwidthConfig(bandwidth?: string): { lineCount: number; strokeWidth: number } {
-    const strokeWidth = 1.5
+    const strokeWidth = 2
     switch (bandwidth) {
       case '1G':
         return { lineCount: 1, strokeWidth }
@@ -809,19 +1023,53 @@ ${result}`
   }
 
   /**
-   * Generate SVG path string from points
+   * Generate SVG path string from points with rounded corners
    */
-  private generatePath(points: { x: number; y: number }[]): string {
-    if (points.length === 4) {
-      // Cubic bezier curve
-      return `M ${points[0].x} ${points[0].y} C ${points[1].x} ${points[1].y}, ${points[2].x} ${points[2].y}, ${points[3].x} ${points[3].y}`
-    } else if (points.length === 2) {
-      // Straight line
+  private generatePath(points: { x: number; y: number }[], cornerRadius: number = 8): string {
+    if (points.length < 2) return ''
+    if (points.length === 2) {
       return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`
-    } else {
-      // Polyline
-      return `M ${points[0].x} ${points[0].y} ` + points.slice(1).map(p => `L ${p.x} ${p.y}`).join(' ')
     }
+
+    const parts: string[] = [`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]
+
+      // Calculate distances to prev and next points
+      const distPrev = Math.hypot(curr.x - prev.x, curr.y - prev.y)
+      const distNext = Math.hypot(next.x - curr.x, next.y - curr.y)
+
+      // Limit radius to half the shortest segment
+      const maxRadius = Math.min(distPrev, distNext) / 2
+      const radius = Math.min(cornerRadius, maxRadius)
+
+      if (radius < 1) {
+        // Too small for rounding, just use straight line
+        parts.push(`L ${curr.x} ${curr.y}`)
+        continue
+      }
+
+      // Calculate direction vectors
+      const dirPrev = { x: (curr.x - prev.x) / distPrev, y: (curr.y - prev.y) / distPrev }
+      const dirNext = { x: (next.x - curr.x) / distNext, y: (next.y - curr.y) / distNext }
+
+      // Points where curve starts and ends
+      const startCurve = { x: curr.x - dirPrev.x * radius, y: curr.y - dirPrev.y * radius }
+      const endCurve = { x: curr.x + dirNext.x * radius, y: curr.y + dirNext.y * radius }
+
+      // Line to start of curve, then quadratic bezier through corner
+      parts.push(`L ${startCurve.x} ${startCurve.y}`)
+      parts.push(`Q ${curr.x} ${curr.y} ${endCurve.x} ${endCurve.y}`)
+    }
+
+    // Line to final point
+    const last = points[points.length - 1]
+    parts.push(`L ${last.x} ${last.y}`)
+
+    return parts.join(' ')
   }
 
   /**
@@ -839,27 +1087,59 @@ ${result}`
   }
 
   /**
-   * Offset points perpendicular to the line direction
+   * Offset points perpendicular to line direction, handling each segment properly
+   * For orthogonal paths, this maintains parallel lines through bends
    */
   private offsetPoints(points: { x: number; y: number }[], offset: number): { x: number; y: number }[] {
     if (points.length < 2) return points
 
-    // Calculate perpendicular direction from first to last point
-    const dx = points[points.length - 1].x - points[0].x
-    const dy = points[points.length - 1].y - points[0].y
-    const len = Math.sqrt(dx * dx + dy * dy)
+    const result: { x: number; y: number }[] = []
+
+    for (let i = 0; i < points.length; i++) {
+      const p = points[i]
+
+      if (i === 0) {
+        // First point: use direction to next point
+        const next = points[i + 1]
+        const perp = this.getPerpendicular(p, next)
+        result.push({ x: p.x + perp.x * offset, y: p.y + perp.y * offset })
+      } else if (i === points.length - 1) {
+        // Last point: use direction from previous point
+        const prev = points[i - 1]
+        const perp = this.getPerpendicular(prev, p)
+        result.push({ x: p.x + perp.x * offset, y: p.y + perp.y * offset })
+      } else {
+        // Middle point (bend): offset based on incoming segment direction
+        const prev = points[i - 1]
+        const perp = this.getPerpendicular(prev, p)
+        result.push({ x: p.x + perp.x * offset, y: p.y + perp.y * offset })
+
+        // Also add a point for the outgoing segment if direction changes
+        const next = points[i + 1]
+        const perpNext = this.getPerpendicular(p, next)
+
+        // Check if direction changed (bend point)
+        if (Math.abs(perp.x - perpNext.x) > 0.01 || Math.abs(perp.y - perpNext.y) > 0.01) {
+          result.push({ x: p.x + perpNext.x * offset, y: p.y + perpNext.y * offset })
+        }
+      }
+    }
 
-    if (len === 0) return points
+    return result
+  }
+
+  /**
+   * Get perpendicular unit vector for a line segment
+   */
+  private getPerpendicular(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
+    const len = Math.sqrt(dx * dx + dy * dy)
 
-    // Perpendicular unit vector
-    const perpX = -dy / len
-    const perpY = dx / len
+    if (len === 0) return { x: 0, y: 0 }
 
-    // Offset all points
-    return points.map(p => ({
-      x: p.x + perpX * offset,
-      y: p.y + perpY * offset,
-    }))
+    // Perpendicular unit vector (rotate 90 degrees)
+    return { x: -dy / len, y: dx / len }
   }
 
   /**

package/dist/renderer/components/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * Renderer Components
- */
-export { renderNode, type NodeRendererContext } from './node-renderer.js';
-export { renderLink, type LinkRendererContext } from './link-renderer.js';
-export { renderPorts } from './port-renderer.js';
-export { renderSubgraph, type SubgraphRendererContext } from './subgraph-renderer.js';
-//# sourceMappingURL=index.d.ts.map

package/dist/renderer/components/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/renderer/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,UAAU,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AACzE,OAAO,EAAE,UAAU,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAA"}