add svelte flow

platform/loom/editor/src/App.svelte

@@ -2,20 +2,62 @@
   import svelteLogo from './assets/svelte.svg'
   import viteLogo from '/vite.svg'
   import Counter from './lib/Counter.svelte'
+  import Flow from './lib/Flow.svelte'
+
+  // import { Splitpanes, Pane  } from 'svelte-splitpanes'
+
+  import { SvelteFlow, Controls, Background, MiniMap, Panel, ConnectionLineType } from '@xyflow/svelte';
+  import '@xyflow/svelte/dist/style.css';
+
+  let nodes = $state.raw<Node[]>([
+    {
+      id: '1',
+      position: { x: 0, y: 0 },
+      data: { label: 'Hello' },
+      type: 'input'
+    },
+    {
+      id: '2',
+      position: { x: 100, y: 100 },
+      data: { label: 'Hello you' },
+      type: 'output'
+    },
+    {
+      id: '3',
+      position: { x: 200, y: 0 },
+      data: { label: 'what about me'}
+    }
+  ]);
+  let edges = $state.raw<Edge[]>([
+    {
+      id: 'e1-2',
+      source: '1',
+      target: '2',
+      type: 'smoothstep'
+    }
+  ]);
 </script>
 
 <main>
-  <div>
-    <a href="https://grimu-r.voleum.cc" target="_blank" rel="noreferrer">
-      <h1>Grimu-R Loom</h1>
-    </a>
-  </div>
+  <!-- <Splitpanes dblClickSplitter={false} theme="how-do-themes-work"> -->
+  <!--   <Pane size={20} snapSize={5} maxSize={50} style="background-color: ivory"> -->
+  <!--     left -->
+  <!--   </Pane> -->
+  <!--   <Pane> -->
+  <!--     <div> -->
+  <!--       <a href="https://grimu-r.voleum.cc" target="_blank" rel="noreferrer"> -->
+  <!--         <h1>Grimu-R Loom</h1> -->
+  <!--       </a> -->
+  <!--     </div> -->
 
-  <div class="card">
-    <Counter />
-  </div>
+  <!--     <div> -->
+  <!--       <Counter /> -->
+  <!--     </div> -->
+  <!--   </Pane> -->
+  <!--   <Pane size={20} snapSize={5} maxSize={50}> -->
+  <!--     right -->
+  <!--   </Pane> -->
+  <!-- </Splitpanes> -->
+  
+  <Flow />
 </main>
-
-<style>
-
-</style>

platform/loom/editor/src/app.css

@@ -1,79 +1,14 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
+html, body, #app, main {
+  height: 100%;
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+.splitpanes__pane {
+  background-color: ivory;
 }
 
-.card {
-  padding: 2em;
-}
+.splitpanes__splitter {
+  background-color: gray;
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+  width: 5px;
 }

platform/loom/editor/src/lib/Flow.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { SvelteFlow,
+           Controls,
+           Background,
+           MiniMap,
+           ConnectionLineType
+         } from '@xyflow/svelte';
+  import '@xyflow/svelte/dist/style.css';
+
+  let nodes = $state.raw<Node[]>([
+    {
+      id: '1',
+      position: { x: 0, y: 0 },
+      data: { label: 'Hello' },
+      type: 'input'
+    },
+    {
+      id: '2',
+      position: { x: 100, y: 100 },
+      data: { label: 'Hello you' },
+      type: 'output'
+    },
+    {
+      id: '3',
+      position: { x: 200, y: 0 },
+      data: { label: 'what about me'}
+    }
+  ]);
+  let edges = $state.raw<Edge[]>([]);
+</script>
+
+<SvelteFlow bind:nodes bind:edges fitView snapGrid={[10,10]}
+            defaultEdgeOptions={{ type: 'smoothstep', zIndex: 0 }}
+            connectionLineType={ConnectionLineType.SmoothStep}>
+    <Controls />
+    <Background />
+    <MiniMap />
+</SvelteFlow>