@slexn/codecenter-ui 1.0.0

package/src/components/ui/network-graph/NetworkGraph.vue

@@ -0,0 +1,902 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from "vue"
+import type { HTMLAttributes } from "vue"
+import {
+  forceCenter,
+  forceCollide,
+  forceLink,
+  forceManyBody,
+  forceSimulation,
+  forceX,
+  forceY,
+  type Simulation,
+  type SimulationLinkDatum,
+  type SimulationNodeDatum,
+} from "d3-force"
+import {
+  FocusIcon,
+  MinusIcon,
+  PlusIcon,
+} from "@lucide/vue"
+import { cn } from "@/lib/utils"
+
+export type NetworkGraphSize = "sm" | "default" | "lg"
+
+export interface NetworkGraphNode {
+  color?: string
+  fixed?: boolean
+  group?: string
+  id: string
+  label?: string
+  metadata?: Record<string, unknown>
+  size?: number
+  value?: number
+  x?: number
+  y?: number
+}
+
+export interface NetworkGraphLink {
+  color?: string
+  id?: string
+  label?: string
+  source: string
+  target: string
+  value?: number
+}
+
+export interface NetworkGraphSelectPayload {
+  connectedNodeIds: string[]
+  index: number
+  links: NetworkGraphLink[]
+  node: NetworkGraphNode
+}
+
+interface NetworkGraphProps {
+  chargeStrength?: number
+  class?: HTMLAttributes["class"]
+  collisionPadding?: number
+  description?: string
+  draggable?: boolean
+  emptyLabel?: string
+  height?: number
+  linkDistance?: number
+  links?: NetworkGraphLink[]
+  maxZoom?: number
+  minZoom?: number
+  modelValue?: string
+  nodes?: NetworkGraphNode[]
+  pannable?: boolean
+  selectable?: boolean
+  showControls?: boolean
+  showLabels?: boolean
+  size?: NetworkGraphSize
+  summary?: string
+  title?: string
+}
+
+interface GraphNodeDatum extends SimulationNodeDatum {
+  color: string
+  group?: string
+  id: string
+  index: number
+  label: string
+  original: NetworkGraphNode
+  radius: number
+}
+
+interface GraphLinkDatum extends SimulationLinkDatum<GraphNodeDatum> {
+  color?: string
+  id: string
+  label?: string
+  original: NetworkGraphLink
+  source: string | GraphNodeDatum
+  sourceId: string
+  target: string | GraphNodeDatum
+  targetId: string
+  value: number
+}
+
+const props = withDefaults(defineProps<NetworkGraphProps>(), {
+  chargeStrength: -260,
+  collisionPadding: 6,
+  draggable: true,
+  emptyLabel: "No network data.",
+  linkDistance: 96,
+  maxZoom: 2.5,
+  minZoom: 0.45,
+  nodes: () => [],
+  links: () => [],
+  pannable: true,
+  selectable: true,
+  showControls: true,
+  showLabels: true,
+  size: "default",
+})
+
+const emit = defineEmits<{
+  "select": [payload: NetworkGraphSelectPayload]
+  "update:modelValue": [value: string]
+}>()
+
+const DEFAULT_GRAPH_WIDTH = 900
+const MIN_GRAPH_WIDTH = 320
+const graphRef = ref<SVGSVGElement | null>(null)
+const graphWidth = ref(DEFAULT_GRAPH_WIDTH)
+const graphNodes = ref<GraphNodeDatum[]>([])
+const graphLinks = ref<GraphLinkDatum[]>([])
+const internalSelectedId = ref<string | undefined>()
+const renderTick = ref(0)
+const transform = ref({
+  k: 1,
+  x: 0,
+  y: 0,
+})
+
+let simulation: Simulation<GraphNodeDatum, GraphLinkDatum> | undefined
+let resizeObserver: ResizeObserver | undefined
+let pointerMode: "node" | "pan" | undefined
+let activeNode: GraphNodeDatum | undefined
+let panStart:
+  | {
+      clientX: number
+      clientY: number
+      x: number
+      y: number
+    }
+  | undefined
+
+const defaultNodeColors = [
+  "oklch(0.58 0.19 248)",
+  "oklch(0.6 0.16 153)",
+  "oklch(0.67 0.18 69)",
+  "oklch(0.59 0.21 338)",
+  "oklch(0.62 0.18 204)",
+  "oklch(0.58 0.2 27)",
+]
+
+const sizeClasses = computed(() => {
+  if (props.size === "sm") {
+    return {
+      body: "p-3",
+      control: "size-7",
+      description: "text-xs",
+      empty: "min-h-56",
+      header: "gap-2 px-3 py-2.5",
+      height: 260,
+      label: "text-[10px]",
+      meta: "text-[11px]",
+      title: "text-xs",
+    }
+  }
+
+  if (props.size === "lg") {
+    return {
+      body: "p-5",
+      control: "size-8",
+      description: "text-sm",
+      empty: "min-h-[28rem]",
+      header: "gap-3 px-5 py-4",
+      height: 520,
+      label: "text-xs",
+      meta: "text-xs",
+      title: "text-sm",
+    }
+  }
+
+  return {
+    body: "p-4",
+    control: "size-8",
+    description: "text-sm",
+    empty: "min-h-80",
+    header: "gap-2.5 px-4 py-3",
+    height: 400,
+    label: "text-[11px]",
+    meta: "text-xs",
+    title: "text-[13px]",
+  }
+})
+
+const graphHeight = computed(() =>
+  Math.max(220, Math.trunc(props.height ?? sizeClasses.value.height)),
+)
+const hasHeader = computed(() =>
+  Boolean(props.title || props.description || props.summary),
+)
+const hasRenderableData = computed(() =>
+  graphNodes.value.length > 0,
+)
+const selectedId = computed(() =>
+  props.modelValue ?? internalSelectedId.value,
+)
+const graphTransform = computed(() =>
+  `translate(${transform.value.x} ${transform.value.y}) scale(${transform.value.k})`,
+)
+const nodeById = computed(() => {
+  const map = new Map<string, GraphNodeDatum>()
+
+  for (const node of graphNodes.value) {
+    map.set(node.id, node)
+  }
+
+  return map
+})
+const connectedNodeIds = computed(() => {
+  const selected = selectedId.value
+  const ids = new Set<string>()
+
+  if (!selected) return ids
+
+  ids.add(selected)
+
+  for (const link of graphLinks.value) {
+    if (link.sourceId === selected) ids.add(link.targetId)
+    if (link.targetId === selected) ids.add(link.sourceId)
+  }
+
+  return ids
+})
+const selectedNode = computed(() =>
+  selectedId.value ? nodeById.value.get(selectedId.value) : undefined,
+)
+const selectedNodeLinks = computed(() =>
+  selectedId.value
+    ? graphLinks.value.filter((link) => link.sourceId === selectedId.value || link.targetId === selectedId.value)
+    : [],
+)
+const formattedZoom = computed(() =>
+  `${Math.round(transform.value.k * 100)}%`,
+)
+const graphStats = computed(() => {
+  const nodes = graphNodes.value.length
+  const links = graphLinks.value.length
+
+  return `${nodes} nodes · ${links} links`
+})
+const selectedSummaryText = computed(() => {
+  if (!selectedNode.value) return graphStats.value
+
+  const connectedCount = Math.max(0, connectedNodeIds.value.size - 1)
+  const linkCount = selectedNodeLinks.value.length
+
+  return `${connectedCount} connected · ${linkCount} links`
+})
+watch(
+  () => [
+    props.nodes,
+    props.links,
+    props.chargeStrength,
+    props.collisionPadding,
+    props.height,
+    props.linkDistance,
+    props.size,
+    graphWidth.value,
+  ],
+  () => rebuildGraph(),
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+
+watch(
+  graphRef,
+  (svgElement) => {
+    resizeObserver?.disconnect()
+    resizeObserver = undefined
+
+    if (!svgElement) return
+
+    const updateGraphWidth = () => {
+      const rect = svgElement.getBoundingClientRect()
+      const nextWidth = Math.trunc(clamp(rect.width || DEFAULT_GRAPH_WIDTH, MIN_GRAPH_WIDTH, DEFAULT_GRAPH_WIDTH))
+
+      if (graphWidth.value !== nextWidth) {
+        graphWidth.value = nextWidth
+      }
+    }
+
+    updateGraphWidth()
+
+    if (typeof ResizeObserver === "undefined") return
+
+    resizeObserver = new ResizeObserver(updateGraphWidth)
+    resizeObserver.observe(svgElement)
+  },
+  {
+    flush: "post",
+  },
+)
+
+onBeforeUnmount(() => {
+  simulation?.stop()
+  resizeObserver?.disconnect()
+})
+
+function rebuildGraph() {
+  simulation?.stop()
+
+  const nodes = createGraphNodes()
+  const nodeIds = new Set(nodes.map((node) => node.id))
+  const links = createGraphLinks(nodeIds)
+
+  graphNodes.value = nodes
+  graphLinks.value = links
+
+  if (nodes.length === 0) return
+
+  simulation = forceSimulation<GraphNodeDatum>(nodes)
+    .force(
+      "link",
+      forceLink<GraphNodeDatum, GraphLinkDatum>(links)
+        .id((node) => node.id)
+        .distance(props.linkDistance)
+        .strength(0.45),
+    )
+    .force("charge", forceManyBody<GraphNodeDatum>().strength(props.chargeStrength))
+    .force("center", forceCenter(graphWidth.value / 2, graphHeight.value / 2))
+    .force("x", forceX<GraphNodeDatum>(graphWidth.value / 2).strength(0.045))
+    .force("y", forceY<GraphNodeDatum>(graphHeight.value / 2).strength(0.045))
+    .force(
+      "collide",
+      forceCollide<GraphNodeDatum>()
+        .radius((node) => node.radius + props.collisionPadding + (props.showLabels ? 18 : 0))
+        .strength(0.88),
+    )
+    .on("tick", () => {
+      constrainNodePositions()
+      renderTick.value += 1
+    })
+}
+
+function createGraphNodes() {
+  const count = Math.max(1, props.nodes.length)
+  const radius = Math.min(graphWidth.value, graphHeight.value) * 0.34
+
+  return props.nodes.map((node, index): GraphNodeDatum => {
+    const angle = (index / count) * Math.PI * 2
+    const x = getInitialNodeX(node, angle, radius)
+    const y = getInitialNodeY(node, angle, radius)
+    const graphNode: GraphNodeDatum = {
+      ...node,
+      color: getNodeColor(node, index),
+      id: node.id,
+      index,
+      label: node.label ?? node.id,
+      original: node,
+      radius: getNodeRadius(node),
+      x,
+      y,
+    }
+
+    if (node.fixed) {
+      graphNode.fx = x
+      graphNode.fy = y
+    }
+
+    return graphNode
+  })
+}
+
+function getInitialNodeX(node: NetworkGraphNode, angle: number, radius: number) {
+  const x = typeof node.x === "number"
+    ? node.x * (graphWidth.value / DEFAULT_GRAPH_WIDTH)
+    : (graphWidth.value / 2) + Math.cos(angle) * radius
+
+  return clampNodeX(x, getNodeRadius(node))
+}
+
+function getInitialNodeY(node: NetworkGraphNode, angle: number, radius: number) {
+  const y = typeof node.y === "number"
+    ? node.y
+    : (graphHeight.value / 2) + Math.sin(angle) * radius
+
+  return clampNodeY(y, getNodeRadius(node))
+}
+
+function createGraphLinks(nodeIds: Set<string>) {
+  return props.links
+    .filter((link) => nodeIds.has(link.source) && nodeIds.has(link.target))
+    .map((link, index): GraphLinkDatum => ({
+      ...link,
+      id: link.id ?? `${link.source}-${link.target}-${index}`,
+      original: link,
+      source: link.source,
+      sourceId: link.source,
+      target: link.target,
+      targetId: link.target,
+      value: Math.max(1, link.value ?? 1),
+    }))
+}
+
+function getNodeRadius(node: NetworkGraphNode) {
+  if (typeof node.size === "number" && Number.isFinite(node.size)) {
+    return clamp(node.size, 7, 28)
+  }
+
+  return clamp(8 + Math.sqrt(Math.max(0, node.value ?? 1)) * 2.5, 8, 24)
+}
+
+function getNodeColor(node: NetworkGraphNode, index: number) {
+  if (node.color) return node.color
+
+  const colorIndex = node.group
+    ? Math.abs(hashString(node.group)) % defaultNodeColors.length
+    : index % defaultNodeColors.length
+
+  return defaultNodeColors[colorIndex] ?? defaultNodeColors[0]
+}
+
+function getLinkSource(link: GraphLinkDatum) {
+  return typeof link.source === "string" ? nodeById.value.get(link.source) : link.source
+}
+
+function getLinkTarget(link: GraphLinkDatum) {
+  return typeof link.target === "string" ? nodeById.value.get(link.target) : link.target
+}
+
+function isSelectedNode(node: GraphNodeDatum) {
+  return selectedId.value === node.id
+}
+
+function isDimmedNode(node: GraphNodeDatum) {
+  return Boolean(selectedId.value && !connectedNodeIds.value.has(node.id))
+}
+
+function isDimmedLink(link: GraphLinkDatum) {
+  return Boolean(
+    selectedId.value &&
+      link.sourceId !== selectedId.value &&
+      link.targetId !== selectedId.value,
+  )
+}
+
+function linkStrokeWidth(link: GraphLinkDatum) {
+  const width = Math.min(4, 1 + Math.sqrt(link.value) * 0.35)
+
+  if (!selectedId.value || isDimmedLink(link)) return width
+
+  return Math.min(4.5, width + 0.35)
+}
+
+function linkStroke(link: GraphLinkDatum) {
+  if (!selectedId.value || isDimmedLink(link)) {
+    return link.color ?? "var(--border)"
+  }
+
+  return link.color ?? "var(--foreground)"
+}
+
+function linkOpacity(link: GraphLinkDatum) {
+  if (!selectedId.value) return 0.22
+
+  return isDimmedLink(link) ? 0.1 : 0.78
+}
+
+function nodeOpacity(node: GraphNodeDatum) {
+  return isDimmedNode(node) ? 0.32 : 1
+}
+
+function nodeStroke() {
+  return "var(--background)"
+}
+
+function constrainNodePositions() {
+  for (const node of graphNodes.value) {
+    node.x = clampNodeX(node.x ?? graphWidth.value / 2, node.radius)
+    node.y = clampNodeY(node.y ?? graphHeight.value / 2, node.radius)
+  }
+}
+
+function clampNodeX(value: number, radius: number) {
+  const padding = radius + 28
+  const max = Math.max(padding, graphWidth.value - padding)
+
+  return clamp(value, padding, max)
+}
+
+function clampNodeY(value: number, radius: number) {
+  const padding = radius + 34
+  const max = Math.max(padding, graphHeight.value - padding)
+
+  return clamp(value, padding, max)
+}
+
+function selectNode(node: GraphNodeDatum) {
+  if (!props.selectable) return
+
+  internalSelectedId.value = node.id
+  emit("update:modelValue", node.id)
+  emit("select", {
+    connectedNodeIds: Array.from(getConnectedIds(node.id)),
+    index: node.index,
+    links: props.links.filter((link) => link.source === node.id || link.target === node.id),
+    node: node.original,
+  })
+}
+
+function getConnectedIds(id: string) {
+  const ids = new Set<string>([id])
+
+  for (const link of graphLinks.value) {
+    if (link.sourceId === id) ids.add(link.targetId)
+    if (link.targetId === id) ids.add(link.sourceId)
+  }
+
+  return ids
+}
+
+function handleWheel(event: WheelEvent) {
+  const svgPoint = getSvgPoint(event)
+  const previous = transform.value
+  const nextZoom = clamp(
+    previous.k * (event.deltaY < 0 ? 1.12 : 0.88),
+    props.minZoom,
+    props.maxZoom,
+  )
+  const ratio = nextZoom / previous.k
+
+  transform.value = {
+    k: nextZoom,
+    x: svgPoint.x - (svgPoint.x - previous.x) * ratio,
+    y: svgPoint.y - (svgPoint.y - previous.y) * ratio,
+  }
+}
+
+function handleCanvasPointerDown(event: PointerEvent) {
+  if (!props.pannable || pointerMode) return
+
+  pointerMode = "pan"
+  panStart = {
+    clientX: event.clientX,
+    clientY: event.clientY,
+    x: transform.value.x,
+    y: transform.value.y,
+  }
+  graphRef.value?.setPointerCapture(event.pointerId)
+}
+
+function handleNodePointerDown(event: PointerEvent, node: GraphNodeDatum) {
+  event.stopPropagation()
+  selectNode(node)
+
+  if (!props.draggable) return
+
+  pointerMode = "node"
+  activeNode = node
+  node.fx = node.x
+  node.fy = node.y
+  simulation?.alphaTarget(0.22).restart()
+  graphRef.value?.setPointerCapture(event.pointerId)
+}
+
+function handlePointerMove(event: PointerEvent) {
+  if (pointerMode === "node" && activeNode) {
+    const point = getGraphPoint(event)
+
+    activeNode.fx = clampNodeX(point.x, activeNode.radius)
+    activeNode.fy = clampNodeY(point.y, activeNode.radius)
+    renderTick.value += 1
+    return
+  }
+
+  if (pointerMode === "pan" && panStart) {
+    const delta = getSvgDelta(event, panStart.clientX, panStart.clientY)
+
+    transform.value = {
+      ...transform.value,
+      x: panStart.x + delta.x,
+      y: panStart.y + delta.y,
+    }
+  }
+}
+
+function handlePointerUp(event: PointerEvent) {
+  if (pointerMode === "node" && activeNode) {
+    if (!activeNode.original.fixed) {
+      activeNode.fx = undefined
+      activeNode.fy = undefined
+    }
+
+    simulation?.alphaTarget(0)
+  }
+
+  pointerMode = undefined
+  activeNode = undefined
+  panStart = undefined
+  graphRef.value?.releasePointerCapture(event.pointerId)
+}
+
+function zoomBy(multiplier: number) {
+  const nextZoom = clamp(transform.value.k * multiplier, props.minZoom, props.maxZoom)
+
+  transform.value = {
+    ...transform.value,
+    k: nextZoom,
+  }
+}
+
+function resetView() {
+  transform.value = {
+    k: 1,
+    x: 0,
+    y: 0,
+  }
+}
+
+function getSvgPoint(event: Pick<MouseEvent, "clientX" | "clientY">) {
+  const rect = graphRef.value?.getBoundingClientRect()
+
+  if (!rect) {
+    return {
+      x: graphWidth.value / 2,
+      y: graphHeight.value / 2,
+    }
+  }
+
+  return {
+    x: ((event.clientX - rect.left) / rect.width) * graphWidth.value,
+    y: ((event.clientY - rect.top) / rect.height) * graphHeight.value,
+  }
+}
+
+function getGraphPoint(event: Pick<MouseEvent, "clientX" | "clientY">) {
+  const point = getSvgPoint(event)
+
+  return {
+    x: (point.x - transform.value.x) / transform.value.k,
+    y: (point.y - transform.value.y) / transform.value.k,
+  }
+}
+
+function getSvgDelta(event: Pick<MouseEvent, "clientX" | "clientY">, startX: number, startY: number) {
+  const rect = graphRef.value?.getBoundingClientRect()
+
+  if (!rect) {
+    return {
+      x: 0,
+      y: 0,
+    }
+  }
+
+  return {
+    x: ((event.clientX - startX) / rect.width) * graphWidth.value,
+    y: ((event.clientY - startY) / rect.height) * graphHeight.value,
+  }
+}
+
+function hashString(value: string) {
+  let hash = 0
+
+  for (let index = 0; index < value.length; index += 1) {
+    hash = ((hash << 5) - hash) + value.charCodeAt(index)
+    hash |= 0
+  }
+
+  return hash
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value))
+}
+</script>
+
+<template>
+  <article
+    data-slot="network-graph"
+    :data-size="props.size"
+    :class="cn('overflow-hidden rounded-xl border bg-card text-card-foreground shadow-xs', props.class)"
+  >
+    <header
+      v-if="hasHeader"
+      data-slot="network-graph-header"
+      :class="cn('flex flex-col gap-3 border-b sm:flex-row sm:items-start sm:justify-between', sizeClasses.header)"
+    >
+      <div
+        v-if="props.title || props.description"
+        class="flex min-w-0 flex-col gap-1"
+      >
+        <h3
+          v-if="props.title"
+          data-slot="network-graph-title"
+          :class="cn('truncate font-semibold leading-tight tracking-normal', sizeClasses.title)"
+        >
+          {{ props.title }}
+        </h3>
+        <p
+          v-if="props.description"
+          data-slot="network-graph-description"
+          :class="cn('max-w-2xl text-muted-foreground', sizeClasses.description)"
+        >
+          {{ props.description }}
+        </p>
+      </div>
+
+      <div
+        v-if="props.summary || hasRenderableData"
+        data-slot="network-graph-summary"
+        :class="cn('flex shrink-0 flex-wrap items-center gap-x-2 gap-y-1 text-muted-foreground', sizeClasses.meta)"
+      >
+        <span :class="cn(props.summary && 'font-medium text-foreground')">
+          {{ props.summary ?? graphStats }}
+        </span>
+      </div>
+    </header>
+
+    <div
+      data-slot="network-graph-body"
+      :class="cn('relative min-w-0 bg-background', sizeClasses.body)"
+      :data-tick="renderTick"
+    >
+      <div
+        v-if="!hasRenderableData"
+        data-slot="network-graph-empty"
+        :class="cn('flex items-center justify-center rounded-md border border-dashed bg-muted/20 text-sm text-muted-foreground', sizeClasses.empty)"
+      >
+        {{ props.emptyLabel }}
+      </div>
+
+      <template v-else>
+        <div
+          data-slot="network-graph-surface"
+          class="relative min-w-0 overflow-hidden bg-background"
+        >
+          <div
+            v-if="props.showControls"
+            data-slot="network-graph-controls"
+            class="absolute top-3 right-3 z-10 inline-flex items-center gap-1 rounded-md bg-background/80 p-1 text-xs backdrop-blur"
+          >
+            <button
+              type="button"
+              :class="cn('inline-flex items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none', sizeClasses.control)"
+              aria-label="Zoom in"
+              title="Zoom in"
+              @click="zoomBy(1.18)"
+            >
+              <PlusIcon class="size-3.5" />
+            </button>
+            <button
+              type="button"
+              :class="cn('inline-flex items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none', sizeClasses.control)"
+              aria-label="Zoom out"
+              title="Zoom out"
+              @click="zoomBy(0.82)"
+            >
+              <MinusIcon class="size-3.5" />
+            </button>
+            <span
+              data-slot="network-graph-zoom"
+              class="hidden min-w-10 text-center font-medium tabular-nums text-muted-foreground sm:inline"
+            >
+              {{ formattedZoom }}
+            </span>
+            <button
+              type="button"
+              :class="cn('inline-flex items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none', sizeClasses.control)"
+              aria-label="Reset view"
+              title="Reset view"
+              @click="resetView"
+            >
+              <FocusIcon class="size-3.5" />
+            </button>
+          </div>
+
+          <svg
+            ref="graphRef"
+            data-slot="network-graph-canvas"
+            class="block w-full touch-none"
+            :viewBox="`0 0 ${graphWidth} ${graphHeight}`"
+            :style="{ height: `${graphHeight}px` }"
+            role="img"
+            :aria-label="props.title ?? 'Network graph'"
+            @pointerdown="handleCanvasPointerDown"
+            @pointermove="handlePointerMove"
+            @pointerup="handlePointerUp"
+            @pointercancel="handlePointerUp"
+            @wheel.prevent="handleWheel"
+          >
+            <rect
+              data-slot="network-graph-background"
+              width="100%"
+              height="100%"
+              fill="var(--background)"
+            />
+
+            <g :transform="graphTransform">
+              <g data-slot="network-graph-links">
+                <line
+                  v-for="link in graphLinks"
+                  :key="link.id"
+                  data-slot="network-graph-link"
+                  :x1="getLinkSource(link)?.x ?? 0"
+                  :y1="getLinkSource(link)?.y ?? 0"
+                  :x2="getLinkTarget(link)?.x ?? 0"
+                  :y2="getLinkTarget(link)?.y ?? 0"
+                  :stroke="linkStroke(link)"
+                  :stroke-opacity="linkOpacity(link)"
+                  :stroke-width="linkStrokeWidth(link)"
+                  stroke-linecap="round"
+                />
+              </g>
+
+              <g data-slot="network-graph-nodes">
+                <g
+                  v-for="node in graphNodes"
+                  :key="node.id"
+                  data-slot="network-graph-node"
+                  :data-selected="isSelectedNode(node) ? '' : undefined"
+                  :data-dimmed="isDimmedNode(node) ? '' : undefined"
+                  :transform="`translate(${node.x ?? 0} ${node.y ?? 0})`"
+                  class="cursor-grab outline-none transition-opacity active:cursor-grabbing"
+                  :style="{ opacity: nodeOpacity(node) }"
+                  role="button"
+                  tabindex="0"
+                  :aria-label="node.label"
+                  @click="selectNode(node)"
+                  @keydown.enter.prevent="selectNode(node)"
+                  @keydown.space.prevent="selectNode(node)"
+                  @pointerdown="handleNodePointerDown($event, node)"
+                >
+                  <circle
+                    data-slot="network-graph-node-circle"
+                    :r="node.radius"
+                    :fill="node.color"
+                    :stroke="nodeStroke()"
+                    stroke-width="1.5"
+                    class="transition-[stroke,stroke-width]"
+                  />
+                  <circle
+                    v-if="isSelectedNode(node)"
+                    data-slot="network-graph-node-ring"
+                    :r="node.radius + 4"
+                    fill="none"
+                    stroke="var(--foreground)"
+                    stroke-opacity="0.32"
+                    stroke-width="1.5"
+                  />
+                  <text
+                    v-if="props.showLabels"
+                    data-slot="network-graph-label"
+                    :class="cn('pointer-events-none select-none fill-current text-center font-semibold text-foreground', sizeClasses.label)"
+                    text-anchor="middle"
+                    :y="node.radius + 16"
+                    stroke="var(--background)"
+                    stroke-linejoin="round"
+                    stroke-width="3"
+                    paint-order="stroke"
+                  >
+                    {{ node.label }}
+                  </text>
+                </g>
+              </g>
+            </g>
+          </svg>
+
+          <div
+            data-slot="network-graph-selection"
+            :class="cn('flex min-w-0 flex-col gap-1 border-t bg-muted/20 px-3 py-2.5 sm:flex-row sm:items-center sm:justify-between', sizeClasses.meta)"
+          >
+            <span class="flex min-w-0 items-center gap-2">
+              <span
+                data-slot="network-graph-selection-dot"
+                class="size-2 shrink-0 rounded-full bg-foreground"
+                :style="{ backgroundColor: selectedNode?.color ?? 'var(--muted-foreground)' }"
+              />
+              <span
+                data-slot="network-graph-selection-label"
+                class="min-w-0 truncate font-semibold text-foreground"
+              >
+                {{ selectedNode?.label ?? "No node selected" }}
+              </span>
+            </span>
+            <span
+              data-slot="network-graph-selection-meta"
+              class="min-w-0 text-muted-foreground"
+            >
+              {{ selectedSummaryText }}
+            </span>
+          </div>
+        </div>
+      </template>
+    </div>
+  </article>
+</template>