feat: add node help system and registry for extensible node types

- Implemented a help system for different node types (config, render, variable, function) with detailed usage instructions.
- Created a node registry to manage node types, including registration, retrieval, and validation of connections between nodes.
- Defined central node and edge types for the application to streamline state management.
- Added Nunjucks autocomplete functionality to enhance user experience in template editing.
- Developed a syntax highlighting parser for PlantUML and Nunjucks within the CodeMirror editor.
- Registered built-in node types at application startup, including their default configurations and help entries.
- Introduced a theme context provider to manage light/dark mode preferences across the application.
- Created utility functions for class name management using clsx and tailwind-merge.
- Set up Tailwind CSS for styling with custom themes and responsive design.
- Configured Vite for development with proxy settings for backend API calls and Kroki diagram service.

frontend/src/components/base/AnimatedEdge.tsx

@@ -0,0 +1,117 @@
+import React, { useContext, useMemo } from 'react'
+import {
+  BaseEdge,
+  getBezierPath,
+  type EdgeProps,
+} from '@xyflow/react'
+import FlowContext from '../../lib/flowContext'
+import { getConnectionLabelForTarget } from '../../lib/nodeRegistry'
+
+const EDGE_STROKE_WIDTH = 2
+const DOT_MARKER_R = 1.5
+
+export function AnimatedEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style,
+  label: labelProp,
+  interactionWidth,
+  target,
+}: EdgeProps) {
+  const ctx = useContext(FlowContext)
+  const nodes = ctx?.nodes ?? []
+  const targetNode = useMemo(() => nodes.find((n: any) => n.id === target), [nodes, target])
+  const derivedLabel = useMemo(
+    () => getConnectionLabelForTarget(targetNode?.type),
+    [targetNode?.type]
+  )
+  const label = labelProp ?? derivedLabel
+
+  const [edgePath, edgeLabelX, edgeLabelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+  })
+
+  const startId = `animated-edge-dot-start-${id}`
+  const endId = `animated-edge-dot-end-${id}`
+
+  return (
+    <>
+      <defs>
+        <marker
+          id={startId}
+          markerWidth={DOT_MARKER_R * 2}
+          markerHeight={DOT_MARKER_R * 2}
+          refX={DOT_MARKER_R - 1}
+          refY={DOT_MARKER_R}
+          orient="auto"
+        >
+          <circle
+            r={DOT_MARKER_R}
+            cx={DOT_MARKER_R}
+            cy={DOT_MARKER_R}
+            className="fill-primary"
+            strokeWidth={2}
+          />
+        </marker>
+        <marker
+          id={endId}
+          markerWidth={DOT_MARKER_R * 2}
+          markerHeight={DOT_MARKER_R * 2}
+          refX={DOT_MARKER_R + 1}
+          refY={DOT_MARKER_R}
+          orient="auto"
+        >
+          <circle
+            r={DOT_MARKER_R}
+            cx={DOT_MARKER_R}
+            cy={DOT_MARKER_R}
+            className="fill-primary"
+            strokeWidth={2}
+          />
+        </marker>
+      </defs>
+      <BaseEdge
+        path={edgePath}
+        markerStart={`url(#${startId})`}
+        markerEnd={`url(#${endId})`}
+        style={{
+          strokeWidth: EDGE_STROKE_WIDTH,
+          ...style,
+        }}
+        className="animated-edge-path"
+        interactionWidth={interactionWidth}
+      />
+      {label != null && (
+        <g transform={`translate(${edgeLabelX}, ${edgeLabelY})`} className="nodrag nopan">
+          <rect
+            x={-32}
+            y={-9}
+            width={64}
+            height={18}
+            rx={4}
+            ry={4}
+            className="fill-background stroke-border"
+            strokeWidth={1}
+          />
+          <text
+            textAnchor="middle"
+            dominantBaseline="middle"
+            className="fill-foreground text-[10px] font-medium"
+          >
+            {label}
+          </text>
+        </g>
+      )}
+    </>
+  )
+}