feat: make graph work in div

app/src/lib/grid/Cell.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+
+  let index = -1;
+  let wrapper: HTMLDivElement;
+
+  $: if (index === -1) {
+    index = getContext<() => number>("registerCell")();
+  }
+
+  const sizes = getContext<Writable<string[]>>("sizes");
+
+  let downSizes: string[] = [];
+  let downWidth = 0;
+  let mouseDown = false;
+  let startX = 0;
+
+  function handleMouseDown(event: MouseEvent) {
+    downSizes = [...$sizes];
+    mouseDown = true;
+    startX = event.clientX;
+    downWidth = wrapper.getBoundingClientRect().width;
+  }
+
+  function handleMouseMove(event: MouseEvent) {
+    if (mouseDown) {
+      const width = downWidth + startX - event.clientX;
+      $sizes[index] = `${width}px`;
+      $sizes = $sizes;
+    }
+  }
+</script>
+
+<svelte:window
+  on:mouseup={() => (mouseDown = false)}
+  on:mousemove={handleMouseMove}
+/>
+
+{#if index > 0}
+  <div
+    class="seperator"
+    role="button"
+    tabindex="0"
+    on:mousedown={handleMouseDown}
+  ></div>
+{/if}
+
+<div class="cell" bind:this={wrapper}>
+  <slot />
+</div>
+
+<style>
+  .cell {
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+  .seperator {
+    background: white;
+    cursor: ew-resize;
+    height: 100%;
+    width: 5px;
+  }
+</style>

app/src/lib/grid/Grid.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+
+  export let id = "grid-0";
+
+  setContext("grid-id", id);
+</script>
+
+<slot {id} />

app/src/lib/grid/Row.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { setContext, getContext } from "svelte";
+  import localStore from "$lib/helpers/localStore";
+
+  const gridId = getContext<string>("grid-id");
+  let sizes = localStore<string[]>(gridId, []);
+
+  let registerIndex = 0;
+  setContext("registerCell", function () {
+    let index = registerIndex;
+    registerIndex++;
+    if (registerIndex > $sizes.length) {
+      $sizes = [...$sizes, "1fr"];
+    }
+    console.log("registering cell", registerIndex);
+    return index;
+  });
+
+  setContext("sizes", sizes);
+
+  $: cols = $sizes.map((size, i) => `${i > 0 ? "5px " : ""}` + size).join(" ");
+</script>
+
+<div class="wrapper" style={`grid-template-columns: ${cols};`}>
+  <slot />
+</div>
+
+<style>
+  .wrapper {
+    display: grid;
+    height: 100%;
+  }
+</style>

app/src/lib/grid/index.ts

@@ -0,0 +1,6 @@
+import { withSubComponents } from "$lib/helpers";
+import Grid from "./Grid.svelte";
+import Row from "./Row.svelte";
+import Cell from "./Cell.svelte";
+
+export default withSubComponents(Grid, { Row, Cell });