Upgrade SvelteFlow. Arrows!

web/package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@popperjs/core": "^2.11.8",
-        "@xyflow/svelte": "^0.0.41",
+        "@xyflow/svelte": "^0.1.3",
         "bootstrap": "^5.3.3",
         "fuse.js": "^7.0.0",
         "graphology": "^0.25.4",
@@ -624,12 +624,12 @@
       }
     },
     "node_modules/@xyflow/svelte": {
-      "version": "0.0.41",
-      "resolved": "https://registry.npmjs.org/@xyflow/svelte/-/svelte-0.0.41.tgz",
-      "integrity": "sha512-6YE8XJVebBRJnio7y6zgfN/L+J65Tw8F21TGj95c4kxMRVcU1cNRbGT/CJJ4xk3g4bSaxStlblgS/Z2I7mlUHA==",
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@xyflow/svelte/-/svelte-0.1.3.tgz",
+      "integrity": "sha512-bqvN1/hIVdD8/r1Qqs4jJC3ScObxcX5PwDhvnE9VpQCfUWTszCd6ex6k38CIcu+m6CZUZWefJrg3kjOEV4disg==",
       "dependencies": {
         "@svelte-put/shortcut": "^3.1.0",
-        "@xyflow/system": "0.0.21",
+        "@xyflow/system": "0.0.25",
         "classcat": "^5.0.4",
         "svelte-preprocess": "^5.1.3"
       },
@@ -638,9 +638,9 @@
       }
     },
     "node_modules/@xyflow/system": {
-      "version": "0.0.21",
-      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.21.tgz",
-      "integrity": "sha512-IvvJkC495u8mIA4Xm35dnQp0a5JUwzRm8eDBWKNyI3lAw93dOr85cKSrCNSuQ5M5SWNy2teFCFvnQEgVjwK3dg==",
+      "version": "0.0.25",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.25.tgz",
+      "integrity": "sha512-xukvOg6620ZO+w1UccS+LFTCl4mTptswUOjlcLkdLQJDSu7BJfNBGDN0qL/q/a05GSVFRIP8hlaqgOdi3fDsWw==",
       "dependencies": {
         "@types/d3": "^7.4.0",
         "@types/d3-drag": "^3.0.1",
@@ -3165,20 +3165,20 @@
       "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw=="
     },
     "@xyflow/svelte": {
-      "version": "0.0.41",
-      "resolved": "https://registry.npmjs.org/@xyflow/svelte/-/svelte-0.0.41.tgz",
-      "integrity": "sha512-6YE8XJVebBRJnio7y6zgfN/L+J65Tw8F21TGj95c4kxMRVcU1cNRbGT/CJJ4xk3g4bSaxStlblgS/Z2I7mlUHA==",
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@xyflow/svelte/-/svelte-0.1.3.tgz",
+      "integrity": "sha512-bqvN1/hIVdD8/r1Qqs4jJC3ScObxcX5PwDhvnE9VpQCfUWTszCd6ex6k38CIcu+m6CZUZWefJrg3kjOEV4disg==",
       "requires": {
         "@svelte-put/shortcut": "^3.1.0",
-        "@xyflow/system": "0.0.21",
+        "@xyflow/system": "0.0.25",
         "classcat": "^5.0.4",
         "svelte-preprocess": "^5.1.3"
       }
     },
     "@xyflow/system": {
-      "version": "0.0.21",
-      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.21.tgz",
-      "integrity": "sha512-IvvJkC495u8mIA4Xm35dnQp0a5JUwzRm8eDBWKNyI3lAw93dOr85cKSrCNSuQ5M5SWNy2teFCFvnQEgVjwK3dg==",
+      "version": "0.0.25",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.25.tgz",
+      "integrity": "sha512-xukvOg6620ZO+w1UccS+LFTCl4mTptswUOjlcLkdLQJDSu7BJfNBGDN0qL/q/a05GSVFRIP8hlaqgOdi3fDsWw==",
       "requires": {
         "@types/d3": "^7.4.0",
         "@types/d3-drag": "^3.0.1",

web/package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@xyflow/svelte": "^0.0.41",
+    "@xyflow/svelte": "^0.1.3",
     "bootstrap": "^5.3.3",
     "fuse.js": "^7.0.0",
     "graphology": "^0.25.4",

web/src/LynxKiteFlow.svelte

@@ -172,6 +172,7 @@
     maxZoom={1.5}
     minZoom={0.3}
     onconnect={onconnect}
+    defaultEdgeOptions={{ markerEnd: { type: MarkerType.Arrow } }}
     >
     <Controls />
     <MiniMap />

web/src/LynxKiteNode.svelte

@@ -93,21 +93,23 @@
     padding: 8px;
   }
   .handle-name {
-    font-size: 12px;
-    color: oklch(25% 0.2 55);
+    font-size: 10px;
+    color: black;
+    letter-spacing: 0.05em;
     text-align: right;
     white-space: nowrap;
     position: absolute;
     top: -5px;
-    -webkit-text-stroke: 5px white;
-    paint-order: stroke fill;
+    backdrop-filter: blur(10px);
+    padding: 2px 8px;
+    border-radius: 4px;
     visibility: hidden;
   }
   :global(.left) .handle-name {
-    right: 15px;
+    right: 20px;
   }
   :global(.right) .handle-name {
-    left: 15px;
+    left: 20px;
   }
   .node-container:hover .handle-name {
     visibility: visible;