Migrate to a D3-based graph renderer

src/style.css

@@ -15,9 +15,6 @@
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
   min-height: 100vh;
 }
 
@@ -36,6 +33,7 @@ h1 {
 .input {
   display: flex;
   align-items: center;
+  justify-content: center;
   margin-bottom: 0.5em;
 }
 input {
@@ -78,13 +76,6 @@ button:focus-visible {
   background-color: #fd3838;
 }
 
-.current-node {
-  fill: red !important;
-}
-.accepting-node {
-  stroke: yellow;
-}
-
 #automaton-selector {
   width: 100%;
   max-width: 600px;
@@ -124,3 +115,85 @@ button:focus-visible {
     outline-color: #9370DB;
   }
 }
+
+graph-editor {
+  display: block;
+  height: 600px;
+}
+
+.link {
+  stroke: orange;
+  stroke-width: 4px;
+  fill: none;
+}
+.link.draggable {
+  stroke: orangered;
+  stroke-dasharray: 8px 2px;
+  pointer-events: none;
+}
+.link.hidden {
+  stroke-width: 0;
+}
+
+.arrow {
+  fill: orange;
+}
+.arrow.draggable {
+  fill: orangered;
+}
+
+.node {
+  fill: #007aff;
+  stroke: none;
+  cursor: pointer;
+}
+.node.active {
+  fill: green;
+}
+.start-arrow {
+  fill: #007aff;
+  stroke: none;
+}
+.node.accepting {
+  outline: 5px solid #007aff;
+  outline-offset: 4px;
+  border-radius: 50%;
+}
+
+.clickbox {
+  stroke: rgba(0, 0, 0, 0);
+  stroke-width: 16px;
+  fill: none;
+  cursor: pointer;
+}
+
+.context-menu {
+  position: absolute;
+  background: white;
+  border: 1px solid #ccc;
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+  min-width: 150px;
+}
+
+.context-menu ul {
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  list-style-type: none;
+}
+
+.context-menu li {
+  padding: 4px 8px;
+}
+
+.context-menu li:hover, .context-menu li:focus {
+  background-color: #f0f0f0;
+}
+
+.context-menu li:active {
+  background-color: #e0e0e0;
+}
+.context-menu .checked:after {
+  content: "✓";
+  float: right;
+}