feat: updating some things

chore: cleanup some code
feat(ui): remove storybook
2026-01-18 15:39:10 +01:00 · 2026-01-18 15:18:11 +01:00 · 2026-01-18 15:17:56 +01:00 · 2026-01-18 15:17:27 +01:00 · 2025-12-09 20:00:52 +01:00 · 2025-12-05 14:19:29 +01:00
67 changed files with 2116 additions and 3080 deletions
--- a/app/package.json
+++ b/app/package.json
@@ -13,34 +13,34 @@
    "@nodarium/registry": "link:../packages/registry",
    "@nodarium/ui": "link:../packages/ui",
    "@nodarium/utils": "link:../packages/utils",
-    "@sveltejs/kit": "^2.49.0",
-    "@threlte/core": "8.3.0",
-    "@threlte/extras": "9.7.0",
-    "@types/three": "^0.181.0",
-    "@unocss/reset": "^66.5.9",
+    "@sveltejs/kit": "^2.50.0",
+    "@threlte/core": "8.3.1",
+    "@threlte/extras": "9.7.1",
+    "@types/three": "^0.182.0",
+    "@unocss/reset": "^66.6.0",
    "comlink": "^4.4.2",
    "file-saver": "^2.0.5",
    "idb": "^8.0.3",
    "jsondiffpatch": "^0.7.3",
-    "three": "^0.181.2"
+    "three": "^0.182.0"
  },
  "devDependencies": {
-    "@iconify-json/tabler": "^1.2.23",
+    "@iconify-json/tabler": "^1.2.26",
    "@nodarium/types": "link:../packages/types",
    "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
    "@tsconfig/svelte": "^5.0.6",
    "@types/file-saver": "^2.0.7",
-    "@unocss/preset-icons": "^66.5.9",
-    "svelte": "^5.43.14",
-    "svelte-check": "^4.3.4",
+    "@unocss/preset-icons": "^66.6.0",
+    "svelte": "^5.46.4",
+    "svelte-check": "^4.3.5",
    "tslib": "^2.8.1",
    "typescript": "^5.9.3",
-    "unocss": "^66.5.9",
-    "vite": "^7.2.4",
+    "unocss": "^66.6.0",
+    "vite": "^7.3.1",
    "vite-plugin-comlink": "^5.3.0",
-    "vite-plugin-glsl": "^1.5.4",
+    "vite-plugin-glsl": "^1.5.5",
    "vite-plugin-wasm": "^3.5.0",
-    "vitest": "^4.0.13"
+    "vitest": "^4.0.17"
  }
 }
--- a/app/src/lib/graph-interface/components/AddMenu.svelte
+++ b/app/src/lib/graph-interface/components/AddMenu.svelte
@@ -2,7 +2,7 @@
  import { HTML } from "@threlte/extras";
  import { onMount } from "svelte";
  import type { NodeInstance, NodeId } from "@nodarium/types";
-  import { getGraphManager, getGraphState } from "../graph/state.svelte";
+  import { getGraphManager, getGraphState } from "../graph-state.svelte";

  type Props = {
    onnode: (n: NodeInstance) => void;
--- a/app/src/lib/graph-interface/graph-state.svelte.ts
+++ b/app/src/lib/graph-interface/graph-state.svelte.ts
@@ -1,7 +1,7 @@
 import type { NodeInstance, Socket } from "@nodarium/types";
 import { getContext, setContext } from "svelte";
 import { SvelteSet } from "svelte/reactivity";
-import type { GraphManager } from "../graph-manager.svelte";
+import type { GraphManager } from "./graph-manager.svelte";
 import type { OrthographicCamera } from "three";


@@ -24,7 +24,24 @@ export function setGraphManager(manager: GraphManager) {

 export class GraphState {

-  constructor(private graph: GraphManager) { }
+  constructor(private graph: GraphManager) {
+    $effect.root(() => {
+      $effect(() => {
+        localStorage.setItem("cameraPosition", `[${this.cameraPosition[0]},${this.cameraPosition[1]},${this.cameraPosition[2]}]`)
+      })
+    })
+    const storedPosition = localStorage.getItem("cameraPosition")
+    if (storedPosition) {
+      try {
+        const d = JSON.parse(storedPosition);
+        this.cameraPosition[0] = d[0];
+        this.cameraPosition[1] = d[1];
+        this.cameraPosition[2] = d[2];
+      } catch (e) {
+        console.log("Failed to parsed stored camera position", e);
+      }
+    }
+  }

  width = $state(100);
  height = $state(100);
@@ -80,42 +97,24 @@ export class GraphState {

  isBodyFocused = () => document?.activeElement?.nodeName !== "INPUT";

-  setCameraTransform(
-    x = this.cameraPosition[0],
-    y = this.cameraPosition[1],
-    z = this.cameraPosition[2],
-  ) {
-    if (this.camera) {
-      this.camera.position.x = x;
-      this.camera.position.z = y;
-      this.camera.zoom = z;
-    }
-    this.cameraPosition = [x, y, z];
-    localStorage.setItem("cameraPosition", JSON.stringify(this.cameraPosition));
-  }
-
-
  updateNodePosition(node: NodeInstance) {
-    if (node.state.ref && node.state.mesh) {
-      if (node.state["x"] !== undefined && node.state["y"] !== undefined) {
+    if (
+      node.state.x === node.position[0] &&
+      node.state.y === node.position[1]
+    ) {
+      delete node.state.x;
+      delete node.state.y;
+    }
+
+    if (node.state["x"] !== undefined && node.state["y"] !== undefined) {
+      if (node.state.ref) {
        node.state.ref.style.setProperty("--nx", `${node.state.x * 10}px`);
        node.state.ref.style.setProperty("--ny", `${node.state.y * 10}px`);
-        node.state.mesh.position.x = node.state.x + 10;
-        node.state.mesh.position.z = node.state.y + this.getNodeHeight(node.type) / 2;
-        if (
-          node.state.x === node.position[0] &&
-          node.state.y === node.position[1]
-        ) {
-          delete node.state.x;
-          delete node.state.y;
-        }
-        this.graph.edges = [...this.graph.edges];
-      } else {
+      }
+    } else {
+      if (node.state.ref) {
        node.state.ref.style.setProperty("--nx", `${node.position[0] * 10}px`);
        node.state.ref.style.setProperty("--ny", `${node.position[1] * 10}px`);
-        node.state.mesh.position.x = node.position[0] + 10;
-        node.state.mesh.position.z =
-          node.position[1] + this.getNodeHeight(node.type) / 2;
      }
    }
  }
--- a/app/src/lib/graph-interface/graph/Graph.svelte
+++ b/app/src/lib/graph-interface/graph/Graph.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
  import type { Edge, NodeInstance } from "@nodarium/types";
-  import { onMount } from "svelte";
  import { createKeyMap } from "../../helpers/createKeyMap";
  import AddMenu from "../components/AddMenu.svelte";
  import Background from "../background/Background.svelte";
@@ -10,7 +9,7 @@
  import Camera from "../components/Camera.svelte";
  import { Canvas } from "@threlte/core";
  import HelpView from "../components/HelpView.svelte";
-  import { getGraphManager, getGraphState } from "./state.svelte";
+  import { getGraphManager, getGraphState } from "../graph-state.svelte";
  import { HTML } from "@threlte/extras";
  import { FileDropEventManager, MouseEventManager } from "./events";
  import { maxZoom, minZoom } from "./constants";
@@ -93,15 +92,6 @@
    graphState.activeSocket = null;
    graphState.addMenuPosition = null;
  }
-
-  onMount(() => {
-    if (localStorage.getItem("cameraPosition")) {
-      const cPosition = JSON.parse(localStorage.getItem("cameraPosition")!);
-      if (Array.isArray(cPosition)) {
-        graphState.setCameraTransform(cPosition[0], cPosition[1], cPosition[2]);
-      }
-    }
-  });
 </script>

 <svelte:window
@@ -187,11 +177,9 @@
        <EdgeEl z={graphState.cameraPosition[2]} {x1} {y1} {x2} {y2} />
      {/each}

-      <HTML transform={false}>
+      <HTML>
        <div
-          role="tree"
          id="graph"
-          tabindex="0"
          class="wrapper"
          style:transform={`scale(${graphState.cameraPosition[2] * 0.1})`}
          class:hovering-sockets={graphState.activeSocket}
--- a/app/src/lib/graph-interface/graph/Wrapper.svelte
+++ b/app/src/lib/graph-interface/graph/Wrapper.svelte
@@ -3,7 +3,11 @@
  import GraphEl from "./Graph.svelte";
  import { GraphManager } from "../graph-manager.svelte";
  import { createKeyMap } from "$lib/helpers/createKeyMap";
-  import { GraphState, setGraphManager, setGraphState } from "./state.svelte";
+  import {
+    GraphState,
+    setGraphManager,
+    setGraphState,
+  } from "../graph-state.svelte";
  import { setupKeymaps } from "../keymaps";

  type Props = {
--- a/app/src/lib/graph-interface/graph/events.ts
+++ b/app/src/lib/graph-interface/graph/events.ts
@@ -1,6 +1,6 @@
 import { GraphSchema, type NodeId, type NodeInstance } from "@nodarium/types";
 import type { GraphManager } from "../graph-manager.svelte";
-import type { GraphState } from "./state.svelte";
+import type { GraphState } from "../graph-state.svelte";
 import { animate, lerp } from "$lib/helpers";
 import { snapToGrid as snapPointToGrid } from "../helpers";
 import { maxZoom, minZoom, zoomSpeed } from "./constants";
@@ -455,7 +455,8 @@ export class MouseEventManager {
      this.state.cameraDown[1] -
      (my - this.state.mouseDown[1]) / this.state.cameraPosition[2];

-    this.state.setCameraTransform(newX, newY);
+    this.state.cameraPosition[0] = newX;
+    this.state.cameraPosition[1] = newY;
  }


@@ -486,15 +487,13 @@ export class MouseEventManager {
    const zoomRatio = newZoom / this.state.cameraPosition[2];

    // Update camera position and zoom level
-    this.state.setCameraTransform(
-      this.state.mousePosition[0] -
+    this.state.cameraPosition[0] = this.state.mousePosition[0] -
      (this.state.mousePosition[0] - this.state.cameraPosition[0]) /
-      zoomRatio,
-      this.state.mousePosition[1] -
+      zoomRatio;
+    this.state.cameraPosition[1] = this.state.mousePosition[1] -
      (this.state.mousePosition[1] - this.state.cameraPosition[1]) /
      zoomRatio,
-      newZoom,
-    );
+      this.state.cameraPosition[2] = newZoom;
  }

 }
--- a/app/src/lib/graph-interface/keymaps.ts
+++ b/app/src/lib/graph-interface/keymaps.ts
@@ -2,7 +2,7 @@ import { animate, lerp } from "$lib/helpers";
 import type { createKeyMap } from "$lib/helpers/createKeyMap";
 import FileSaver from "file-saver";
 import type { GraphManager } from "./graph-manager.svelte";
-import type { GraphState } from "./graph/state.svelte";
+import type { GraphState } from "./graph-state.svelte";

 type Keymap = ReturnType<typeof createKeyMap>;
 export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: GraphState) {
@@ -88,11 +88,9 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
      const ease = (t: number) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t);

      animate(500, (a: number) => {
-        graphState.setCameraTransform(
-          lerp(camX, average[0], ease(a)),
-          lerp(camY, average[1], ease(a)),
-          lerp(camZ, 2, ease(a)),
-        );
+        graphState.cameraPosition[0] = lerp(camX, average[0], ease(a));
+        graphState.cameraPosition[1] = lerp(camY, average[1], ease(a));
+        graphState.cameraPosition[2] = lerp(camZ, 2, ease(a))
        if (graphState.mouseDown) return false;
      });
    },
--- a/app/src/lib/graph-interface/node/Node.svelte
+++ b/app/src/lib/graph-interface/node/Node.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import type { NodeInstance } from "@nodarium/types";
-  import { getGraphState } from "../graph/state.svelte";
+  import { getGraphState } from "../graph-state.svelte";
  import { T } from "@threlte/core";
  import { type Mesh } from "three";
  import NodeFrag from "./Node.frag";
@@ -16,7 +16,7 @@
    inView: boolean;
    z: number;
  };
-  let { node, inView, z }: Props = $props();
+  let { node = $bindable(), inView, z }: Props = $props();

  const isActive = $derived(graphState.activeNodeId === node.id);
  const isSelected = $derived(graphState.selectedNodes.has(node.id));
@@ -42,8 +42,8 @@
 </script>

 <T.Mesh
-  position.x={node.position[0] + 10}
-  position.z={node.position[1] + height / 2}
+  position.x={(node.state.x ?? node.position[0]) + 10}
+  position.z={(node.state.y ?? node.position[1]) + height / 2}
  position.y={0.8}
  rotation.x={-Math.PI / 2}
  bind:ref={meshRef}
@@ -67,4 +67,4 @@
  />
 </T.Mesh>

-<NodeHtml {node} {inView} {isActive} {isSelected} {z} />
+<NodeHtml bind:node {inView} {isActive} {isSelected} {z} />
--- a/app/src/lib/graph-interface/node/NodeHTML.svelte
+++ b/app/src/lib/graph-interface/node/NodeHTML.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-  import type { NodeInstance, SerializedNode } from "@nodarium/types";
+  import type { NodeInstance } from "@nodarium/types";
  import NodeHeader from "./NodeHeader.svelte";
  import NodeParameter from "./NodeParameter.svelte";
-  import { getGraphState } from "../graph/state.svelte";
+  import { getGraphState } from "../graph-state.svelte";

  let ref: HTMLDivElement;

  const graphState = getGraphState();

  type Props = {
-    node: SerializedNode | NodeInstance;
+    node: NodeInstance;
    position?: "absolute" | "fixed" | "relative";
    isActive?: boolean;
    isSelected?: boolean;
@@ -30,15 +30,10 @@
  const zOffset = Math.random() - 0.5;
  const zLimit = 2 - zOffset;

-  const parameters =
-    "state" in node
-      ? Object.entries(node.state?.type?.inputs || {}).filter(
-          (p) =>
-            p[1].type !== "seed" &&
-            !("setting" in p[1]) &&
-            p[1]?.hidden !== true,
-        )
-      : [];
+  const parameters = Object.entries(node.state?.type?.inputs || {}).filter(
+    (p) =>
+      p[1].type !== "seed" && !("setting" in p[1]) && p[1]?.hidden !== true,
+  );

  $effect(() => {
    if ("state" in node && !node.state.ref) {
--- a/app/src/lib/graph-interface/node/NodeHeader.svelte
+++ b/app/src/lib/graph-interface/node/NodeHeader.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { getGraphState } from "../graph/state.svelte.js";
+  import { getGraphState } from "../graph-state.svelte";
  import { createNodePath } from "../helpers/index.js";
-  import type { NodeInstance, SerializedNode } from "@nodarium/types";
+  import type { NodeInstance } from "@nodarium/types";

  const graphState = getGraphState();

-  const { node }: { node: NodeInstance | SerializedNode } = $props();
+  const { node }: { node: NodeInstance } = $props();

  function handleMouseDown(event: MouseEvent) {
    event.stopPropagation();
@@ -20,8 +20,7 @@
  }

  const cornerTop = 10;
-  const rightBump =
-    "state" in node ? !!node?.state?.type?.outputs?.length : false;
+  const rightBump = !!node?.state?.type?.outputs?.length;
  const aspectRatio = 0.25;

  const path = createNodePath({
--- a/app/src/lib/graph-interface/node/NodeParameter.svelte
+++ b/app/src/lib/graph-interface/node/NodeParameter.svelte
@@ -1,16 +1,12 @@
 <script lang="ts">
-  import type {
-    NodeInput as NodeInputType,
-    NodeInstance,
-    SerializedNode,
-  } from "@nodarium/types";
-  import { createNodePath } from "../helpers/index.js";
-  import NodeInput from "./NodeInput.svelte";
-  import { getGraphManager, getGraphState } from "../graph/state.svelte.js";
+  import type { NodeInput, NodeInstance } from "@nodarium/types";
+  import { createNodePath } from "../helpers";
+  import NodeInputEl from "./NodeInput.svelte";
+  import { getGraphManager, getGraphState } from "../graph-state.svelte";

  type Props = {
-    node: NodeInstance | SerializedNode;
-    input: NodeInputType;
+    node: NodeInstance;
+    input: NodeInput;
    id: string;
    isLast?: boolean;
  };
@@ -80,7 +76,7 @@
        <label for={elementId}>{input.label || id}</label>
      {/if}
      {#if inputType.external !== true}
-        <NodeInput {graph} {elementId} bind:node {input} {id} />
+        <NodeInputEl {graph} {elementId} bind:node {input} {id} />
      {/if}
    </div>

--- a/app/src/lib/helpers/index.ts
+++ b/app/src/lib/helpers/index.ts
@@ -126,7 +126,7 @@ export function humanizeDuration(durationInMilliseconds: number) {
  }

  if (millis > 0 || durationString === '') {
-    durationString += millis + 'ms';
+    durationString += Math.floor(millis) + 'ms';
  }

  return durationString.trim();
--- a/app/src/lib/icons/graph.svg
+++ b/app/src/lib/icons/graph.svg
@@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 
  <rect x="17" y="8" width="5" height="7" rx="1" stroke="currentColor" stroke-width="2"/> 
  <rect x="2" y="3" width="5" height="7" rx="1" stroke="currentColor" stroke-width="2"/> 
  <rect x="2" y="14" width="5" height="7" rx="1" stroke="currentColor" stroke-width="2"/> 
--- a/app/src/lib/node-store/BreadCrumbs.svelte
+++ b/app/src/lib/node-store/BreadCrumbs.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
  import { Select } from "@nodarium/ui";
-  import type { Writable } from "svelte/store";

-  let activeStore = 0;
-  export let activeId: Writable<string>;
-  $: [activeUser, activeCollection, activeNode] = $activeId.split(`/`);
+  let activeStore = $state(0);
+  let { activeId }: { activeId: string } = $props();
+  const [activeUser, activeCollection, activeNode] = $derived(
+    activeId.split(`/`),
+  );
 </script>

 <div class="breadcrumbs">
@@ -12,16 +13,16 @@
    <Select id="root" options={["root"]} bind:value={activeStore}></Select>
    {#if activeCollection}
      <button
-        on:click={() => {
-          $activeId = activeUser;
+        onclick={() => {
+          activeId = activeUser;
        }}
      >
        {activeUser}
      </button>
      {#if activeNode}
        <button
-          on:click={() => {
-            $activeId = `${activeUser}/${activeCollection}`;
+          onclick={() => {
+            activeId = `${activeUser}/${activeCollection}`;
          }}
        >
          {activeCollection}
--- a/app/src/lib/node-store/DraggableNode.svelte
+++ b/app/src/lib/node-store/DraggableNode.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
  import NodeHtml from "$lib/graph-interface/node/NodeHTML.svelte";
-  import type { SerializedNode } from "@nodarium/types";
+  import type { NodeDefinition, NodeId, NodeInstance } from "@nodarium/types";

-  const { node }: { node: SerializedNode } = $props();
+  const { node }: { node: NodeDefinition } = $props();

  let dragging = $state(false);

-  let nodeData = $state({
+  let nodeData = $state<NodeInstance>({
    id: 0,
-    type: node?.id,
+    type: node.id as unknown as NodeId,
    position: [0, 0] as [number, number],
    props: {},
-    tmp: {
+    state: {
      type: node,
    },
  });
@@ -46,7 +46,7 @@
    tabindex="0"
    ondragstart={handleDragStart}
  >
-    <NodeHtml inView={true} position={"relative"} z={5} bind:node={nodeData} />
+    <NodeHtml bind:node={nodeData} inView={true} position={"relative"} z={5} />
  </div>
 </div>

--- a/app/src/lib/node-store/NodeStore.svelte
+++ b/app/src/lib/node-store/NodeStore.svelte
@@ -1,19 +1,16 @@
 <script lang="ts">
-  import { writable } from "svelte/store";
  import BreadCrumbs from "./BreadCrumbs.svelte";
  import DraggableNode from "./DraggableNode.svelte";
  import type { RemoteNodeRegistry } from "@nodarium/registry";

-  export let registry: RemoteNodeRegistry;
+  const { registry }: { registry: RemoteNodeRegistry } = $props();

-  const activeId = writable("max/plantarium");
+  let activeId = $state("max/plantarium");
  let showBreadCrumbs = false;

-  // const activeId = localStore<
-  //   `${string}` | `${string}/${string}` | `${string}/${string}/${string}`
-  // >("nodes.store.activeId", "");
-
-  $: [activeUser, activeCollection, activeNode] = $activeId.split(`/`);
+  const [activeUser, activeCollection, activeNode] = $derived(
+    activeId.split(`/`),
+  );
 </script>

 {#if showBreadCrumbs}
@@ -27,8 +24,8 @@
    {:then users}
      {#each users as user}
        <button
-          on:click={() => {
-            $activeId = user.id;
+          onclick={() => {
+            activeId = user.id;
          }}>{user.id}</button
        >
      {/each}
@@ -41,8 +38,8 @@
    {:then user}
      {#each user.collections as collection}
        <button
-          on:click={() => {
-            $activeId = collection.id;
+          onclick={() => {
+            activeId = collection.id;
          }}
        >
          {collection.id.split(`/`)[1]}
--- a/app/src/lib/performance/BarSplit.svelte
+++ b/app/src/lib/performance/BarSplit.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-  export let labels: string[] = [];
-  export let values: number[] = [];
+  type Props = {
+    labels: string[];
+    values: number[];
+  };

-  $: total = values.reduce((acc, v) => acc + v, 0);
+  const { labels, values }: Props = $props();
+
+  const total = $derived(values.reduce((acc, v) => acc + v, 0));

  let colors = ["red", "green", "blue"];
 </script>
@@ -21,10 +25,7 @@
      <div class="text-{colors[i]}">{labels[i]}</div>
    {/each}
  </div>
-
-  <span
-    class="bg-red bg-green bg-yellow bg-blue text-red text-green text-yellow text-blue"
-  ></span>
+  <span class="bg-red bg-green bg-blue text-red text-green text-blue"></span>
 </div>

 <style>
--- a/app/src/lib/performance/Monitor.svelte
+++ b/app/src/lib/performance/Monitor.svelte
@@ -1,52 +1,59 @@
 <script lang="ts">
-  export let points: number[];
+  type Props = {
+    points: number[];
+    type?: string;
+    title?: string;
+    max?: number;
+    min?: number;
+  };

-  export let type = "ms";
-  export let title = "Performance";
-  export let max: number | undefined = undefined;
-  export let min: number | undefined = undefined;
+  let {
+    points,
+    type = "ms",
+    title = "Performance",
+    max,
+    min,
+  }: Props = $props();

-  function getMax(m?: number) {
+  let internalMax = $derived(max ?? Math.max(...points));
+  let internalMin = $derived(min ?? Math.min(...points))!;
+
+  const maxText = $derived.by(() => {
    if (type === "%") {
      return 100;
    }

-    if (m !== undefined) {
-      if (m < 1) {
-        return Math.floor(m * 100) / 100;
+    if (internalMax !== undefined) {
+      if (internalMax < 1) {
+        return Math.floor(internalMax * 100) / 100;
      }
-      if (m < 10) {
-        return Math.floor(m * 10) / 10;
+      if (internalMax < 10) {
+        return Math.floor(internalMax * 10) / 10;
      }
-      return Math.floor(m);
+      return Math.floor(internalMax);
    }

    return 1;
-  }
+  });

-  function constructPath() {
-    max = max !== undefined ? max : Math.max(...points);
-    min = min !== undefined ? min : Math.min(...points);
-    const mi = min as number;
-    const ma = max as number;
-    return points
+  const path = $derived(
+    points
      .map((point, i) => {
        const x = (i / (points.length - 1)) * 100;
-        const y = 100 - ((point - mi) / (ma - mi)) * 100;
+        const y =
+          100 - ((point - internalMin) / (internalMax - internalMin)) * 100;
        return `${x},${y}`;
      })
-      .join(" ");
-  }
+      .join(" "),
+  );
 </script>

 <div class="wrapper">
  <p>{title}</p>
-  <span class="min">{Math.floor(min || 0)}{type}</span>
-  <span class="max">{getMax(max)}{type}</span>
+  <span class="min">{Math.floor(internalMin || 0)}{type}</span>
+  <span class="max">{maxText}{type}</span>
  <svg preserveAspectRatio="none" viewBox="0 0 100 100">
-    {#key points}
-      <polyline vector-effect="non-scaling-stroke" points={constructPath()} />
-    {/key}
+    <polyline vector-effect="non-scaling-stroke" points={path} />
  </svg>
 </div>

--- a/app/src/lib/performance/PerformanceViewer.svelte
+++ b/app/src/lib/performance/PerformanceViewer.svelte
@@ -2,23 +2,13 @@
  import Monitor from "./Monitor.svelte";
  import { humanizeNumber } from "$lib/helpers";
  import { Checkbox } from "@nodarium/ui";
-  import localStore from "$lib/helpers/localStore";
-  import { type PerformanceData } from "@nodarium/utils";
+  import type { PerformanceData } from "@nodarium/utils";
  import BarSplit from "./BarSplit.svelte";

-  export let data: PerformanceData;
+  const { data }: { data: PerformanceData } = $props();

-  let activeType = localStore<string>("nodes.performance.active-type", "total");
-  let showAverage = true;
-
-  function getAverage(key: string) {
-    return (
-      data
-        .map((run) => run[key]?.[0])
-        .filter((v) => v !== undefined)
-        .reduce((acc, run) => acc + run, 0) / data.length
-    );
-  }
+  let activeType = $state("total");
+  let showAverage = $state(true);

  function round(v: number) {
    if (v < 1) {
@@ -30,45 +20,15 @@
    return Math.floor(v);
  }

-  function getAverages() {
-    let lastRun = data.at(-1);
-    if (!lastRun) return {};
-    return Object.keys(lastRun).reduce(
-      (acc, key) => {
-        acc[key] = getAverage(key);
-        return acc;
-      },
-      {} as Record<string, number>,
-    );
-  }
-
-  function getLast(key: string) {
-    return data.at(-1)?.[key]?.[0] || 0;
-  }
-
-  function getLasts() {
-    return data.at(-1) || {};
-  }
-
-  function getTotalPerformance(onlyLast = false) {
-    if (onlyLast) {
-      return (
-        getLast("runtime") +
-        getLast("update-geometries") +
-        getLast("worker-transfer")
-      );
+  function getTitle(t: string) {
+    if (t.includes("/")) {
+      return `Node ${t.split("/").slice(-1).join("/")}`;
    }
-    return (
-      getAverage("runtime") +
-      getAverage("update-geometries") +
-      getAverage("worker-transfer")
-    );
-  }

-  function getCacheRatio(onlyLast = false) {
-    let ratio = onlyLast ? getLast("cache-hit") : getAverage("cache-hit");
-
-    return Math.floor(ratio * 100);
+    return t
+      .split("-")
+      .map((v) => v[0].toUpperCase() + v.slice(1))
+      .join(" ");
  }

  const viewerKeys = [
@@ -78,10 +38,53 @@
    "split-result",
  ];

-  function getPerformanceData(onlyLast: boolean = false) {
-    let data = onlyLast ? getLasts() : getAverages();
+  // --- Small helpers that query `data` directly ---
+  function getAverage(key: string) {
+    const vals = data
+      .map((run) => run[key]?.[0])
+      .filter((v) => v !== undefined) as number[];

-    return Object.entries(data)
+    if (vals.length === 0) return 0;
+    return vals.reduce((acc, v) => acc + v, 0) / vals.length;
+  }
+
+  function getLast(key: string) {
+    return data.at(-1)?.[key]?.[0] || 0;
+  }
+
+  const averages = $derived.by(() => {
+    const lr = data.at(-1);
+    if (!lr) return {} as Record<string, number>;
+    return Object.keys(lr).reduce((acc: Record<string, number>, key) => {
+      acc[key] = getAverage(key);
+      return acc;
+    }, {});
+  });
+
+  const lasts = $derived.by(() => data.at(-1) || {});
+
+  const totalPerformance = $derived.by(() => {
+    const onlyLast =
+      getLast("runtime") +
+      getLast("update-geometries") +
+      getLast("worker-transfer");
+    const average =
+      getAverage("runtime") +
+      getAverage("update-geometries") +
+      getAverage("worker-transfer");
+    return { onlyLast, average };
+  });
+
+  const cacheRatio = $derived.by(() => {
+    return {
+      onlyLast: Math.floor(getLast("cache-hit") * 100),
+      average: Math.floor(getAverage("cache-hit") * 100),
+    };
+  });
+
+  const performanceData = $derived.by(() => {
+    const source = showAverage ? averages : lasts;
+    return Object.entries(source)
      .filter(
        ([key]) =>
          !key.startsWith("node/") &&
@@ -90,19 +93,18 @@
          !viewerKeys.includes(key),
      )
      .sort((a, b) => b[1] - a[1]);
-  }
+  });

-  function getNodePerformanceData(onlyLast: boolean = false) {
-    let data = onlyLast ? getLasts() : getAverages();
-
-    return Object.entries(data)
+  const nodePerformanceData = $derived.by(() => {
+    const source = showAverage ? averages : lasts;
+    return Object.entries(source)
      .filter(([key]) => key.startsWith("node/"))
      .sort((a, b) => b[1] - a[1]);
-  }
+  });

-  function getViewerPerformanceData(onlyLast: boolean = false) {
-    let data = onlyLast ? getLasts() : getAverages();
-    return Object.entries(data)
+  const viewerPerformanceData = $derived.by(() => {
+    const source = showAverage ? averages : lasts;
+    return Object.entries(source)
      .filter(
        ([key]) =>
          key !== "total-vertices" &&
@@ -110,14 +112,29 @@
          viewerKeys.includes(key),
      )
      .sort((a, b) => b[1] - a[1]);
-  }
+  });

-  function getTotalPoints() {
+  const splitValues = $derived.by(() => {
+    if (showAverage) {
+      return [
+        getAverage("worker-transfer"),
+        getAverage("runtime"),
+        getAverage("update-geometries"),
+      ];
+    }
+    return [
+      getLast("worker-transfer"),
+      getLast("runtime"),
+      getLast("update-geometries"),
+    ];
+  });
+
+  const totalPoints = $derived.by(() => {
    if (showAverage) {
      return data.map((run) => {
        return (
-          run["runtime"].reduce((acc, v) => acc + v, 0) +
-          run["update-geometries"].reduce((acc, v) => acc + v, 0) +
+          (run["runtime"]?.reduce((acc, v) => acc + v, 0) || 0) +
+          (run["update-geometries"]?.reduce((acc, v) => acc + v, 0) || 0) +
          (run["worker-transfer"]?.reduce((acc, v) => acc + v, 0) || 0)
        );
      });
@@ -125,16 +142,16 @@

    return data.map((run) => {
      return (
-        run["runtime"][0] +
-        run["update-geometries"][0] +
+        (run["runtime"]?.[0] || 0) +
+        (run["update-geometries"]?.[0] || 0) +
        (run["worker-transfer"]?.[0] || 0)
      );
    });
-  }
+  });

  function constructPoints(key: string) {
    if (key === "total") {
-      return getTotalPoints();
+      return totalPoints;
    }
    return data.map((run) => {
      if (key in run) {
@@ -148,47 +165,33 @@
    });
  }

-  function getSplitValues(): number[] {
-    if (showAverage) {
-      return [
-        getAverage("worker-transfer"),
-        getAverage("runtime"),
-        getAverage("update-geometries"),
-      ];
-    }
+  const computedTotalDisplay = $derived.by(() =>
+    round(showAverage ? totalPerformance.average : totalPerformance.onlyLast),
+  );

-    return [
-      getLast("worker-transfer"),
-      getLast("runtime"),
-      getLast("update-geometries"),
-    ];
-  }
-
-  function getTitle(t: string) {
-    if (t.includes("/")) {
-      return `Node ${t.split("/").slice(-1).join("/")}`;
-    }
-
-    return t
-      .split("-")
-      .map((v) => v[0].toUpperCase() + v.slice(1))
-      .join(" ");
-  }
+  const computedFps = $derived.by(() =>
+    Math.floor(
+      1000 /
+        (showAverage
+          ? totalPerformance.average || 1
+          : totalPerformance.onlyLast || 1),
+    ),
+  );
 </script>

-{#key $activeType && data}
-  {#if $activeType === "cache-hit"}
+{#if data.length !== 0}
+  {#if activeType === "cache-hit"}
    <Monitor
      title="Cache Hits"
-      points={constructPoints($activeType)}
+      points={constructPoints(activeType)}
      min={0}
      max={1}
      type="%"
    />
  {:else}
    <Monitor
-      title={getTitle($activeType)}
-      points={constructPoints($activeType)}
+      title={getTitle(activeType)}
+      points={constructPoints(activeType)}
    />
  {/if}

@@ -198,116 +201,108 @@
      <label for="show-total">Show Average</label>
    </div>

-    {#if data.length !== 0}
-      <BarSplit
-        labels={["worker-transfer", "runtime", "update-geometries"]}
-        values={getSplitValues()}
-      />
+    <BarSplit
+      labels={["worker-transfer", "runtime", "update-geometries"]}
+      values={splitValues}
+    />

-      <h3>General</h3>
+    <h3>General</h3>

-      <table>
-        <tbody>
+    <table>
+      <tbody>
+        <tr>
+          <td>
+            {computedTotalDisplay}<span>ms</span>
+          </td>
+          <td
+            class:active={activeType === "total"}
+            onclick={() => (activeType = "total")}
+          >
+            total<span>({computedFps}fps)</span>
+          </td>
+        </tr>
+
+        {#each performanceData as [key, value]}
          <tr>
-            <td>
-              {round(getTotalPerformance(!showAverage))}<span>ms</span>
-            </td>
+            <td>{round(value)}<span>ms</span></td>
            <td
-              class:active={$activeType === "total"}
-              on:click={() => ($activeType = "total")}
+              class:active={activeType === key}
+              onclick={() => (activeType = key)}
            >
-              total<span
-                >({Math.floor(
-                  1000 / getTotalPerformance(showAverage),
-                )}fps)</span
-              >
+              {key}
            </td>
          </tr>
-          {#each getPerformanceData(!showAverage) as [key, value]}
-            <tr>
-              <td>
-                {round(value)}<span>ms</span>
-              </td>
-              <td
-                class:active={$activeType === key}
-                on:click={() => ($activeType = key)}
-              >
-                {key}
-              </td>
-            </tr>
-          {/each}
+        {/each}

+        <tr>
+          <td>{data.length}</td>
+          <td>Samples</td>
+        </tr>
+      </tbody>
+
+      <tbody>
+        <tr><td><h3>Nodes</h3></td></tr>
+      </tbody>
+
+      <tbody>
+        <tr>
+          <td
+            >{showAverage ? cacheRatio.average : cacheRatio.onlyLast}<span
+              >%</span
+            ></td
+          >
+          <td
+            class:active={activeType === "cache-hit"}
+            onclick={() => (activeType = "cache-hit")}
+          >
+            cache hits
+          </td>
+        </tr>
+
+        {#each nodePerformanceData as [key, value]}
          <tr>
-            <td>{data.length}</td>
-            <td>Samples</td>
-          </tr>
-        </tbody>
-        <tbody>
-          <tr>
-            <td>
-              <h3>Nodes</h3>
-            </td>
-          </tr>
-        </tbody>
-        <tbody>
-          <tr>
-            <td> {getCacheRatio(!showAverage)}<span>%</span> </td>
+            <td>{round(value)}<span>ms</span></td>
            <td
-              class:active={$activeType === "cache-hit"}
-              on:click={() => ($activeType = "cache-hit")}>cache hits</td
+              class:active={activeType === key}
+              onclick={() => (activeType = key)}
            >
-          </tr>
-          {#each getNodePerformanceData(!showAverage) as [key, value]}
-            <tr>
-              <td>
-                {round(value)}<span>ms</span>
-              </td>
-
-              <td
-                class:active={$activeType === key}
-                on:click={() => ($activeType = key)}
-              >
-                {key.split("/").slice(-1).join("/")}
-              </td>
-            </tr>
-          {/each}
-        </tbody>
-        <tbody>
-          <tr>
-            <td>
-              <h3>Viewer</h3>
+              {key.split("/").slice(-1).join("/")}
            </td>
          </tr>
-        </tbody>
-        <tbody>
+        {/each}
+      </tbody>
+
+      <tbody>
+        <tr><td><h3>Viewer</h3></td></tr>
+      </tbody>
+
+      <tbody>
+        <tr>
+          <td>{humanizeNumber(getLast("total-vertices"))}</td>
+          <td>Vertices</td>
+        </tr>
+        <tr>
+          <td>{humanizeNumber(getLast("total-faces"))}</td>
+          <td>Faces</td>
+        </tr>
+
+        {#each viewerPerformanceData as [key, value]}
          <tr>
-            <td>{humanizeNumber(getLast("total-vertices"))}</td>
-            <td>Vertices</td>
+            <td>{round(value)}<span>ms</span></td>
+            <td
+              class:active={activeType === key}
+              onclick={() => (activeType = key)}
+            >
+              {key.split("/").slice(-1).join("/")}
+            </td>
          </tr>
-          <tr>
-            <td>{humanizeNumber(getLast("total-faces"))}</td>
-            <td>Faces</td>
-          </tr>
-          {#each getViewerPerformanceData(!showAverage) as [key, value]}
-            <tr>
-              <td>
-                {round(value)}<span>ms</span>
-              </td>
-              <td
-                class:active={$activeType === key}
-                on:click={() => ($activeType = key)}
-              >
-                {key.split("/").slice(-1).join("/")}
-              </td>
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    {:else}
-      <p>No runs available</p>
-    {/if}
+        {/each}
+      </tbody>
+    </table>
  </div>
-{/key}
+{:else}
+  <p>No runs available</p>
+{/if}

 <style>
  h3 {
--- a/app/src/lib/performance/SmallGraph.svelte
+++ b/app/src/lib/performance/SmallGraph.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  export let points: number[];
+  const { points }: { points: number[] } = $props();

-  function constructPath() {
+  const path = $derived.by(() => {
    const max = Math.max(...points);
    const min = Math.min(...points);
    return points
@@ -11,13 +11,11 @@
        return `${x},${y}`;
      })
      .join(" ");
-  }
+  });
 </script>

 <svg preserveAspectRatio="none" viewBox="0 0 100 100">
-  {#key points}
-    <polyline vector-effect="non-scaling-stroke" points={constructPath()} />
-  {/key}
+  <polyline vector-effect="non-scaling-stroke" points={path} />
 </svg>

 <style>
--- a/app/src/lib/performance/SmallPerformanceViewer.svelte
+++ b/app/src/lib/performance/SmallPerformanceViewer.svelte
@@ -1,25 +1,23 @@
 <script lang="ts">
  import { humanizeDuration, humanizeNumber } from "$lib/helpers";
-  import localStore from "$lib/helpers/localStore";
+  import { localState } from "$lib/helpers/localState.svelte";
  import SmallGraph from "./SmallGraph.svelte";
  import type { PerformanceData, PerformanceStore } from "@nodarium/utils";

-  export let store: PerformanceStore;
+  const { store, fps }: { store: PerformanceStore; fps: number[] } = $props();

-  const open = localStore("node.performance.small.open", {
+  const open = localState("node.performance.small.open", {
    runtime: false,
    fps: false,
  });

-  $: vertices = $store?.at(-1)?.["total-vertices"]?.[0] || 0;
-  $: faces = $store?.at(-1)?.["total-faces"]?.[0] || 0;
-  $: runtime = $store?.at(-1)?.["runtime"]?.[0] || 0;
+  const vertices = $derived($store?.at(-1)?.["total-vertices"]?.[0] || 0);
+  const faces = $derived($store?.at(-1)?.["total-faces"]?.[0] || 0);
+  const runtime = $derived($store?.at(-1)?.["runtime"]?.[0] || 0);

  function getPoints(data: PerformanceData, key: string) {
    return data?.map((run) => run[key]?.[0] || 0) || [];
  }
-
-  export let fps: number[] = [];
 </script>

 <div class="wrapper">
@@ -27,12 +25,12 @@
    <tbody>
      <tr
        style="cursor:pointer;"
-        on:click={() => ($open.runtime = !$open.runtime)}
+        onclick={() => (open.value.runtime = !open.value.runtime)}
      >
-        <td>{$open.runtime ? "-" : "+"} runtime </td>
+        <td>{open.value.runtime ? "-" : "+"} runtime </td>
        <td>{humanizeDuration(runtime || 1000)}</td>
      </tr>
-      {#if $open.runtime}
+      {#if open.value.runtime}
        <tr>
          <td colspan="2">
            <SmallGraph points={getPoints($store, "runtime")} />
@@ -40,13 +38,16 @@
        </tr>
      {/if}

-      <tr style="cursor:pointer;" on:click={() => ($open.fps = !$open.fps)}>
-        <td>{$open.fps ? "-" : "+"} fps </td>
+      <tr
+        style="cursor:pointer;"
+        onclick={() => (open.value.fps = !open.value.fps)}
+      >
+        <td>{open.value.fps ? "-" : "+"} fps </td>
        <td>
          {Math.floor(fps[fps.length - 1])}fps
        </td>
      </tr>
-      {#if $open.fps}
+      {#if open.value.fps}
        <tr>
          <td colspan="2">
            <SmallGraph points={fps} />
--- a/app/src/lib/result-viewer/Scene.svelte
+++ b/app/src/lib/result-viewer/Scene.svelte
@@ -35,6 +35,9 @@
    scene = $bindable(),
  }: Props = $props();

+  let geometries = $state.raw<BufferGeometry[]>([]);
+  let center = $state(new Vector3(0, 4, 0));
+
  useTask(
    (delta) => {
      fps.push(1 / delta);
@@ -45,11 +48,13 @@

  export const invalidate = function () {
    if (scene) {
-      geometries = scene.children
-        .filter((child) => "geometry" in child && child.isObject3D)
-        .map((child) => {
-          return (child as Mesh).geometry;
-        });
+      const geos: BufferGeometry[] = [];
+      scene.traverse(function (child) {
+        if (isMesh(child)) {
+          geos.push(child.geometry);
+        }
+      });
+      geometries = geos;
    }

    if (geometries && scene && centerCamera) {
@@ -62,9 +67,6 @@
    _invalidate();
  };

-  let geometries = $state<BufferGeometry[]>();
-  let center = $state(new Vector3(0, 4, 0));
-
  function isMesh(child: Mesh | any): child is Mesh {
    return child.isObject3D && "material" in child;
  }
@@ -76,7 +78,7 @@
  $effect(() => {
    const wireframe = appSettings.value.debug.wireframe;
    scene.traverse(function (child) {
-      if (isMesh(child) && isMatCapMaterial(child.material)) {
+      if (isMesh(child) && isMatCapMaterial(child.material) && child.visible) {
        child.material.wireframe = wireframe;
      }
    });
@@ -90,6 +92,13 @@
      geo.attributes.position.array[i + 2],
    ] as Vector3Tuple;
  }
+
+  // $effect(() => {
+  //   console.log({
+  //     geometries: $state.snapshot(geometries),
+  //     indices: appSettings.value.debug.showIndices,
+  //   });
+  // });
 </script>

 <Camera {center} {centerCamera} />
--- a/app/src/lib/result-viewer/geometryPool.ts
+++ b/app/src/lib/result-viewer/geometryPool.ts
@@ -11,7 +11,7 @@ import {
 } from "three";

 function fastArrayHash(arr: Int32Array) {
-  const sampleDistance = Math.max(Math.floor(arr.length / 100), 1);
+  const sampleDistance = Math.max(Math.floor(arr.length / 1000), 1);
  const sampleCount = Math.floor(arr.length / sampleDistance);

  let hash = new Int32Array(sampleCount);
@@ -40,6 +40,9 @@ export function createGeometryPool(parentScene: Group, material: Material) {
    let hash = fastArrayHash(data);

    let geometry = existingMesh ? existingMesh.geometry : new BufferGeometry();
+    if (existingMesh) {
+      existingMesh.visible = true;
+    }

    // Extract data from the encoded array
    // const geometryType = encodedData[index++];
@@ -121,7 +124,6 @@ export function createGeometryPool(parentScene: Group, material: Material) {
          updateSingleGeometry(input, existingMesh || null);
        } else if (existingMesh) {
          existingMesh.visible = false;
-          scene.remove(existingMesh);
        }
      }
      return { totalVertices, totalFaces };
@@ -258,7 +260,6 @@ export function createInstancedGeometryPool(
          updateSingleInstance(input, existingMesh || null);
        } else if (existingMesh) {
          existingMesh.visible = false;
-          scene.remove(existingMesh);
        }
      }
      return { totalVertices, totalFaces };
--- a/app/src/lib/runtime/runtime-executor-cache.ts
+++ b/app/src/lib/runtime/runtime-executor-cache.ts
@@ -1,19 +1,33 @@
 import { type SyncCache } from "@nodarium/types";

 export class MemoryRuntimeCache implements SyncCache {
+  private map = new Map<string, unknown>();
+  size: number;

-  private cache: [string, unknown][] = [];
-  size = 50;
+  constructor(size = 50) {
+    this.size = size;
+  }

  get<T>(key: string): T | undefined {
-    return this.cache.find(([k]) => k === key)?.[1] as T;
-  }
-  set<T>(key: string, value: T): void {
-    this.cache.push([key, value]);
-    this.cache = this.cache.slice(-this.size);
-  }
-  clear(): void {
-    this.cache = [];
+    if (!this.map.has(key)) return undefined;
+    const value = this.map.get(key) as T;
+    this.map.delete(key);
+    this.map.set(key, value);
+    return value;
  }

+  set<T>(key: string, value: T): void {
+    if (this.map.has(key)) {
+      this.map.delete(key);
+    }
+    this.map.set(key, value);
+    while (this.map.size > this.size) {
+      const oldestKey = this.map.keys().next().value as string;
+      this.map.delete(oldestKey);
+    }
+  }
+
+  clear(): void {
+    this.map.clear();
+  }
 }
--- a/app/src/lib/runtime/worker-runtime-executor-backend.ts
+++ b/app/src/lib/runtime/worker-runtime-executor-backend.ts
@@ -2,11 +2,13 @@ import { MemoryRuntimeExecutor } from "./runtime-executor";
 import { RemoteNodeRegistry, IndexDBCache } from "@nodarium/registry";
 import type { Graph } from "@nodarium/types";
 import { createPerformanceStore } from "@nodarium/utils";
+import { MemoryRuntimeCache } from "./runtime-executor-cache";

 const indexDbCache = new IndexDBCache("node-registry");
 const nodeRegistry = new RemoteNodeRegistry("", indexDbCache);

-const executor = new MemoryRuntimeExecutor(nodeRegistry);
+const cache = new MemoryRuntimeCache()
+const executor = new MemoryRuntimeExecutor(nodeRegistry, cache);

 const performanceStore = createPerformanceStore();
 executor.perf = performanceStore;
--- a/app/src/lib/settings/NestedSettings.svelte
+++ b/app/src/lib/settings/NestedSettings.svelte
@@ -2,7 +2,7 @@
  import NestedSettings from "./NestedSettings.svelte";
  import { localState } from "$lib/helpers/localState.svelte";
  import type { NodeInput } from "@nodarium/types";
-  import Input from "@nodarium/ui";
+  import { Input } from "@nodarium/ui";

  type Button = { type: "button"; callback: () => void; label?: string };

--- a/app/src/lib/settings/app-settings.svelte.ts
+++ b/app/src/lib/settings/app-settings.svelte.ts
@@ -54,7 +54,7 @@ export const AppSettingTypes = {
    },
    useWorker: {
      type: "boolean",
-      label: "Execute runtime in worker",
+      label: "Execute in WebWorker",
      value: true,
    },
    showIndices: {
--- a/app/src/lib/sidebar/panels/ActiveNodeSelected.svelte
+++ b/app/src/lib/sidebar/panels/ActiveNodeSelected.svelte
@@ -64,6 +64,7 @@
    lastPropsHash = propsHash;

    if (needsUpdate) {
+      manager.save();
      manager.execute();
    }
  }
--- a/app/src/lib/sidebar/panels/ActiveNodeSettings.svelte
+++ b/app/src/lib/sidebar/panels/ActiveNodeSettings.svelte
@@ -8,17 +8,17 @@
    node: NodeInstance | undefined;
  };

-  const { manager, node }: Props = $props();
+  let { manager, node = $bindable() }: Props = $props();
 </script>

 {#if node}
  {#key node.id}
    {#if node}
-      <ActiveNodeSelected {manager} {node} />
+      <ActiveNodeSelected {manager} bind:node />
    {:else}
      <p class="mx-4">Active Node has no Settings</p>
    {/if}
  {/key}
 {:else}
-  <p class="mx-4">No active node</p>
+  <p class="mx-4">No node selected</p>
 {/if}
--- a/app/src/lib/sidebar/panels/BenchmarkPanel.svelte
+++ b/app/src/lib/sidebar/panels/BenchmarkPanel.svelte
@@ -1,9 +1,15 @@
+<script lang="ts" module>
+  let result:
+    | { stdev: number; avg: number; duration: number; samples: number[] }
+    | undefined = $state();
+</script>
+
 <script lang="ts">
-  import localStore from "$lib/helpers/localStore";
  import { Integer } from "@nodarium/ui";
  import { writable } from "svelte/store";
  import { humanizeDuration } from "$lib/helpers";
  import Monitor from "$lib/performance/Monitor.svelte";
+  import { localState } from "$lib/helpers/localState.svelte";

  function calculateStandardDeviation(array: number[]) {
    const n = array.length;
@@ -12,18 +18,18 @@
      array.map((x) => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n,
    );
  }
+  type Props = {
+    run: () => Promise<any>;
+  };

-  export let run: () => Promise<any>;
+  const { run }: Props = $props();

-  let isRunning = false;
-  let amount = localStore<number>("nodes.benchmark.samples", 500);
-  let samples = 0;
+  let isRunning = $state(false);
+  let amount = localState<number>("nodes.benchmark.samples", 500);
+  let samples = $state(0);
  let warmUp = writable(0);
  let warmUpAmount = 10;
-  let state = "";
-  let result:
-    | { stdev: number; avg: number; duration: number; samples: number[] }
-    | undefined;
+  let status = "";

  const copyContent = async (text?: string | number) => {
    if (!text) return;
@@ -56,7 +62,7 @@
    let results = [];

    // perform run
-    for (let i = 0; i < $amount; i++) {
+    for (let i = 0; i < amount.value; i++) {
      const a = performance.now();
      await run();
      samples = i;
@@ -73,55 +79,53 @@
  }
 </script>

-{state}
+{status}

 <div class="wrapper" class:running={isRunning}>
-  {#if isRunning}
-    {#if result}
-      <h3>Finished ({humanizeDuration(result.duration)})</h3>
-      <div class="monitor-wrapper">
-        <Monitor points={result.samples} />
-      </div>
-      <label for="bench-avg">Average </label>
-      <button
-        id="bench-avg"
-        on:keydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
-        on:click={() => copyContent(result?.avg)}
-        >{Math.floor(result.avg * 100) / 100}</button
-      >
-      <i
-        role="button"
-        tabindex="0"
-        on:keydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
-        on:click={() => copyContent(result?.avg)}>(click to copy)</i
-      >
-      <label for="bench-stdev">Standard Deviation σ</label>
-      <button id="bench-stdev" on:click={() => copyContent(result?.stdev)}
-        >{Math.floor(result.stdev * 100) / 100}</button
-      >
-      <i
-        role="button"
-        tabindex="0"
-        on:keydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
-        on:click={() => copyContent(result?.stdev + "")}>(click to copy)</i
-      >
-      <div>
-        <button on:click={() => (isRunning = false)}>reset</button>
-      </div>
-    {:else}
-      <p>WarmUp ({$warmUp}/{warmUpAmount})</p>
-      <progress value={$warmUp} max={warmUpAmount}
-        >{Math.floor(($warmUp / warmUpAmount) * 100)}%</progress
-      >
-      <p>Progress ({samples}/{$amount})</p>
-      <progress value={samples} max={$amount}
-        >{Math.floor((samples / $amount) * 100)}%</progress
-      >
-    {/if}
+  {#if result}
+    <h3>Finished ({humanizeDuration(result.duration)})</h3>
+    <div class="monitor-wrapper">
+      <Monitor points={result.samples} />
+    </div>
+    <label for="bench-avg">Average </label>
+    <button
+      id="bench-avg"
+      onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
+      onclick={() => copyContent(result?.avg)}
+      >{Math.floor(result.avg * 100) / 100}</button
+    >
+    <i
+      role="button"
+      tabindex="0"
+      onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
+      onclick={() => copyContent(result?.avg)}>(click to copy)</i
+    >
+    <label for="bench-stdev">Standard Deviation σ</label>
+    <button id="bench-stdev" onclick={() => copyContent(result?.stdev)}
+      >{Math.floor(result.stdev * 100) / 100}</button
+    >
+    <i
+      role="button"
+      tabindex="0"
+      onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
+      onclick={() => copyContent(result?.stdev + "")}>(click to copy)</i
+    >
+    <div>
+      <button onclick={() => (isRunning = false)}>reset</button>
+    </div>
+  {:else if isRunning}
+    <p>WarmUp ({$warmUp}/{warmUpAmount})</p>
+    <progress value={$warmUp} max={warmUpAmount}
+      >{Math.floor(($warmUp / warmUpAmount) * 100)}%</progress
+    >
+    <p>Progress ({samples}/{amount.value})</p>
+    <progress value={samples} max={amount.value}
+      >{Math.floor((samples / amount.value) * 100)}%</progress
+    >
  {:else}
    <label for="bench-samples">Samples</label>
-    <Integer id="bench-sample" bind:value={$amount} max={1000} />
-    <button on:click={benchmark} disabled={isRunning}> start </button>
+    <Integer id="bench-sample" bind:value={amount.value} max={1000} />
+    <button onclick={benchmark} disabled={isRunning}> start </button>
  {/if}
 </div>

--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -88,13 +88,10 @@
    randomSeed: { type: "boolean", value: false },
  });

-  let runIndex = 0;
-
  async function update(
    g: Graph,
    s: Record<string, any> = $state.snapshot(graphSettings),
  ) {
-    runIndex++;
    performanceStore.startRun();
    try {
      let a = performance.now();
@@ -257,7 +254,7 @@
          classes="text-blue-400"
          icon="i-tabler-adjustments"
        >
-          <ActiveNodeSettings {manager} node={activeNode} />
+          <ActiveNodeSettings {manager} bind:node={activeNode} />
        </Panel>
      </Sidebar>
    </Grid.Cell>
--- a/app/src/routes/dev/+page.svelte
+++ b/app/src/routes/dev/+page.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Grid from "$lib/grid";
+  import Panel from "$lib/sidebar/Panel.svelte";
+  import Sidebar from "$lib/sidebar/Sidebar.svelte";
+</script>
+
+<Grid.Row>
+  <Grid.Cell></Grid.Cell>
+  <Grid.Cell>
+    <Sidebar>
+      <Panel
+        id="node-store"
+        classes="text-green-400"
+        title="Node Store"
+        icon="i-tabler-database"
+      ></Panel>
+    </Sidebar>
+  </Grid.Cell>
+</Grid.Row>
+
+<style>
+  :global body {
+    height: 100vh;
+  }
+</style>
--- a/app/src/routes/nodes/[user].json/+server.ts
+++ b/app/src/routes/nodes/[user].json/+server.ts
@@ -14,9 +14,6 @@ export const entries: EntryGenerator = async () => {


 export const GET: RequestHandler = async function GET({ params }) {
-
  const namespaces = await registry.getUser(params.user)
-
  return json(namespaces);
-
 }
--- a/app/src/routes/nodes/[user]/[collection].json/+server.ts
+++ b/app/src/routes/nodes/[user]/[collection].json/+server.ts
@@ -14,9 +14,6 @@ export const entries: EntryGenerator = async () => {
 }

 export const GET: RequestHandler = async function GET({ params }) {
-
  const namespaces = await registry.getCollection(`${params.user}/${params.collection}`);
-
  return json(namespaces);
-
 }
--- a/app/src/routes/nodes/[user]/[collection]/[node].json/+server.ts
+++ b/app/src/routes/nodes/[user]/[collection]/[node].json/+server.ts
@@ -5,7 +5,6 @@ import * as registry from "$lib/node-registry";

 export const prerender = true;

-
 export const entries: EntryGenerator = async () => {
  const users = await registry.getUsers();
  return users.map(user => {
@@ -18,9 +17,7 @@ export const entries: EntryGenerator = async () => {
 }

 export const GET: RequestHandler = async function GET({ params }) {
-
  const nodeId = `${params.user}/${params.collection}/${params.node}` as const;
-
  try {
    const node = await getNode(nodeId);
    return json(node);
--- a/app/src/routes/nodes/users.json/+server.ts
+++ b/app/src/routes/nodes/users.json/+server.ts
@@ -6,9 +6,6 @@ import * as registry from "$lib/node-registry";
 export const prerender = true;

 export const GET: RequestHandler = async function GET() {
-
  const users = await registry.getUsers();
-
  return json(users);
-
 }
--- a/app/uno.config.ts
+++ b/app/uno.config.ts
@@ -1,8 +1,7 @@
 // uno.config.ts
 import { defineConfig } from 'unocss'
 import presetIcons from '@unocss/preset-icons'
-import { presetUno } from 'unocss'
-import fs from 'fs'
+import fs from 'node:fs'

 const icons = Object.fromEntries(fs.readdirSync('./src/lib/icons')
  .map(name => [name.replace(".svg", ""), fs.readFileSync(`./src/lib/icons/${name}`, 'utf-8')]))
@@ -10,7 +9,6 @@ const icons = Object.fromEntries(fs.readdirSync('./src/lib/icons')

 export default defineConfig({
  presets: [
-    presetUno(),
    presetIcons({
      collections: {
        custom: icons
--- a/packages/registry/src/node-registry-cache.ts
+++ b/packages/registry/src/node-registry-cache.ts
@@ -1,22 +1,22 @@
 import type { AsyncCache } from '@nodarium/types';
 import { openDB, type IDBPDatabase } from 'idb';

-export class IndexDBCache implements AsyncCache<ArrayBuffer> {
+export class IndexDBCache implements AsyncCache<unknown> {

  size: number = 100;

-  db: Promise<IDBPDatabase<ArrayBuffer>>;
-  private _cache = new Map<string, ArrayBuffer>();
+  db: Promise<IDBPDatabase<unknown>>;
+  private _cache = new Map<string, unknown>();

  constructor(id: string) {
-    this.db = openDB<ArrayBuffer>('cache/' + id, 1, {
+    this.db = openDB<unknown>('cache/' + id, 1, {
      upgrade(db) {
        db.createObjectStore('keyval');
      },
    });
  }

-  async get(key: string) {
+  async get<T>(key: string): Promise<T> {
    let res = this._cache.get(key);
    if (!res) {
      res = await (await this.db).get('keyval', key);
@@ -24,13 +24,33 @@ export class IndexDBCache implements AsyncCache<ArrayBuffer> {
    if (res) {
      this._cache.set(key, res);
    }
-    return res;
+    return res as T;
  }
-  async set(key: string, value: ArrayBuffer) {
+
+  async getArrayBuffer(key: string) {
+    const res = await this.get(key);
+    if (!res) return;
+    if (res instanceof ArrayBuffer) {
+      return res;
+    }
+    return
+  }
+
+  async getString(key: string) {
+    const res = await this.get(key);
+    if (!res) return;
+    if (typeof res === "string") {
+      return res;
+    }
+    return
+  }
+
+  async set(key: string, value: unknown) {
    this._cache.set(key, value);
    const db = await this.db;
    await db.put('keyval', value, key);
  }
+
  clear() {
    this.db.then(db => db.clear('keyval'));
  }
--- a/packages/registry/src/node-registry-client.ts
+++ b/packages/registry/src/node-registry-client.ts
@@ -13,32 +13,63 @@ export class RemoteNodeRegistry implements NodeRegistry {
  status: "loading" | "ready" | "error" = "loading";
  private nodes: Map<string, NodeDefinition> = new Map();

-  async fetchJson(url: string) {
-    const response = await fetch(`${this.url}/${url}`);
-
-    if (!response.ok) {
-      log.error(`Failed to load ${url}`, { response, url, host: this.url });
-      throw new Error(`Failed to load ${url}`);
-    }
-
-    return response.json();
-  }
-
-  async fetchArrayBuffer(url: string) {
-    const response = await fetch(`${this.url}/${url}`);
-    if (!response.ok) {
-      log.error(`Failed to load ${url}`, { response, url, host: this.url });
-      throw new Error(`Failed to load ${url}`);
-    }
-
-    return response.arrayBuffer();
-  }

  constructor(
    private url: string,
-    private cache?: AsyncCache<ArrayBuffer>,
+    private cache?: AsyncCache<ArrayBuffer | string>,
  ) { }

+  async fetchJson(url: string, skipCache = false) {
+
+    const finalUrl = `${this.url}/${url}`;
+
+    if (!skipCache && this.cache) {
+      const cachedValue = await this.cache?.get<string>(finalUrl);
+      if (cachedValue) {
+        // fetch again in the background, maybe implement that only refetch after a certain time
+        this.fetchJson(url, true)
+        return JSON.parse(cachedValue);
+      }
+    }
+
+    const response = await fetch(finalUrl);
+
+    if (!response.ok) {
+      log.error(`Failed to load ${url}`, { response, url, host: this.url });
+      throw new Error(`Failed to load ${url}`);
+    }
+
+    const result = await response.json();
+
+    this.cache?.set(finalUrl, JSON.stringify(result));
+
+    return result;
+  }
+
+  async fetchArrayBuffer(url: string, skipCache = false) {
+
+    const finalUrl = `${this.url}/${url}`;
+
+    if (!skipCache && this.cache) {
+      const cachedNode = await this.cache?.get<ArrayBuffer>(finalUrl);
+      if (cachedNode) {
+        // fetch again in the background, maybe implement that only refetch after a certain time
+        this.fetchArrayBuffer(url, true)
+        return cachedNode;
+      }
+    }
+
+    const response = await fetch(finalUrl);
+    if (!response.ok) {
+      log.error(`Failed to load ${url}`, { response, url, host: this.url });
+      throw new Error(`Failed to load ${url}`);
+    }
+
+    const buffer = await response.arrayBuffer();
+    this.cache?.set(finalUrl, buffer);
+    return buffer;
+  }
+
  async fetchUsers() {
    return this.fetchJson(`nodes/users.json`);
  }
@@ -48,7 +79,8 @@ export class RemoteNodeRegistry implements NodeRegistry {
  }

  async fetchCollection(userCollectionId: `${string}/${string}`) {
-    return this.fetchJson(`nodes/${userCollectionId}.json`);
+    const col = await this.fetchJson(`nodes/${userCollectionId}.json`);
+    return col
  }

  async fetchNodeDefinition(nodeId: `${string}/${string}/${string}`) {
@@ -56,10 +88,6 @@ export class RemoteNodeRegistry implements NodeRegistry {
  }

  private async fetchNodeWasm(nodeId: `${string}/${string}/${string}`) {
-    const cachedNode = await this.cache?.get(nodeId);
-    if (cachedNode) {
-      return cachedNode;
-    }

    const node = await this.fetchArrayBuffer(`nodes/${nodeId}.wasm`);
    if (!node) {
--- a/packages/store-client/package.json
+++ b/packages/store-client/package.json
@@ -10,10 +10,8 @@
  "keywords": [],
  "author": "",
  "license": "ISC",
-  "dependencies": {
-    "@hey-api/client-fetch": "^0.13.1"
-  },
+  "dependencies": {},
  "devDependencies": {
-    "@hey-api/openapi-ts": "^0.88.0"
+    "@hey-api/openapi-ts": "^0.90.4"
  }
 }
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -13,6 +13,6 @@
  "author": "",
  "license": "ISC",
  "dependencies": {
-    "zod": "^4.1.12"
+    "zod": "^4.3.5"
  }
 }
--- a/packages/types/src/components.ts
+++ b/packages/types/src/components.ts
@@ -83,7 +83,7 @@ export interface AsyncCache<T = unknown> {
   * @param key - The key to get the value for
   * @returns The value for the given key, or undefined if no such value exists
   */
-  get: (key: string) => Promise<T | undefined>;
+  get: <A = T>(key: string) => Promise<A | undefined>;
  /**
   * Set the value for the given key
   * @param key - The key to set the value for
--- a/packages/ui/.storybook/main.ts
+++ b/packages/ui/.storybook/main.ts
@@ -1,21 +0,0 @@
-import type { StorybookConfig } from '@storybook/sveltekit';
-
-const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.stories.@(js|ts|svelte)"
-  ],
-
-  "addons": [
-    "@storybook/addon-svelte-csf",
-    "@storybook/addon-essentials",
-    "@storybook/addon-themes",
-  ],
-
-  "framework": {
-    "name": "@storybook/sveltekit",
-    "options": {}
-  },
-
-  docs: {}
-};
-export default config;
--- a/packages/ui/.storybook/manager-head.html
+++ b/packages/ui/.storybook/manager-head.html
@@ -1,12 +0,0 @@
-<style>
-.sidebar-header {
-  display: none !important;
-}
-#downshift-0-label {
-  display: none !important;
-}
-
-#downshift-0-label ~ div {
-  margin-top: 0 !important;
-}
-</style>
--- a/packages/ui/.storybook/preview.ts
+++ b/packages/ui/.storybook/preview.ts
@@ -1,29 +0,0 @@
-import { withThemeByClassName } from "@storybook/addon-themes";
-import type { Preview } from '@storybook/svelte';
-
-import "../src/lib/app.css";
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-  decorators: [withThemeByClassName({
-    themes: {
-      dark: 'theme-dark',
-      light: 'theme-light',
-      catppuccin: 'theme-catppuccin',
-      solarized: 'theme-solarized',
-      high: 'theme-high-contrast',
-      nord: 'theme-nord',
-      dracula: 'theme-dracula',
-    },
-    defaultTheme: 'light',
-  })],
-};
-
-export default preview;
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -10,9 +10,7 @@
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
    "test": "vitest",
-    "lint": "eslint .",
-    "story:dev": "storybook dev -p 6006",
-    "story:build": "storybook build"
+    "lint": "eslint ."
  },
  "exports": {
    ".": {
@@ -30,36 +28,32 @@
    "svelte": "^4.0.0"
  },
  "devDependencies": {
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-svelte-csf": "5.0.10",
-    "@storybook/addon-themes": "^10.0.8",
-    "@storybook/svelte": "^10.0.8",
-    "@storybook/sveltekit": "^10.0.8",
+    "@nodarium/types": "link:../types",
    "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.49.0",
-    "@sveltejs/package": "^2.5.6",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@sveltejs/kit": "^2.50.0",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
    "@types/eslint": "^9.6.1",
-    "@typescript-eslint/eslint-plugin": "^8.47.0",
-    "@typescript-eslint/parser": "^8.47.0",
-    "eslint": "^9.39.1",
-    "eslint-plugin-storybook": "^10.0.8",
-    "eslint-plugin-svelte": "^3.13.0",
-    "publint": "^0.3.15",
-    "storybook": "^10.0.8",
-    "svelte": "^5.43.14",
-    "svelte-check": "^4.3.4",
+    "@types/three": "^0.182.0",
+    "@typescript-eslint/eslint-plugin": "^8.53.0",
+    "@typescript-eslint/parser": "^8.53.0",
+    "eslint": "^9.39.2",
+    "eslint-plugin-svelte": "^3.14.0",
+    "publint": "^0.3.16",
+    "svelte": "^5.46.4",
+    "svelte-check": "^4.3.5",
    "tslib": "^2.8.1",
    "typescript": "^5.9.3",
-    "vite": "^7.2.4",
-    "vitest": "^4.0.13",
-    "@nodarium/types": "link:../types"
+    "vite": "^7.3.1",
+    "vitest": "^4.0.17"
  },
  "svelte": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "type": "module",
  "dependencies": {
-    "@threlte/core": "^8.3.0",
-    "@threlte/extras": "^9.7.0"
+    "@tailwindcss/vite": "^4.1.18",
+    "@threlte/core": "^8.3.1",
+    "@threlte/extras": "^9.7.1",
+    "tailwindcss": "^4.1.18"
  }
 }
--- a/packages/ui/src/lib/Checkbox.svelte
+++ b/packages/ui/src/lib/Checkbox.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	interface Props {
+		value: boolean;
+	}
+
+	let { value = $bindable(false) }: Props = $props();
+
+	$effect(() => {
+		if (typeof value === 'string') {
+			value = value === 'true';
+		} else if (typeof value === 'number') {
+			value = value === 1;
+		} else if (!(typeof value === 'boolean')) {
+			value = !!value;
+		}
+	});
+</script>
+
+<label
+	class="relative inline-flex h-[22px] w-[22px] cursor-pointer items-center justify-center bg-[var(--layer-2)] rounded-[5px]"
+>
+	<input
+		type="checkbox"
+		bind:checked={value}
+		class="peer absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
+	/>
+	<span
+		class="absolute opacity-0 peer-checked:opacity-100 transition-opacity duration-100 flex w-full h-full items-center justify-center"
+	>
+		<svg
+			viewBox="0 0 19 14"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			class="h-[10px] w-[12px] text-[var(--text-color)]"
+		>
+			<path
+				d="M2 7L7 12L17 2"
+				stroke="currentColor"
+				stroke-width="3"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	</span>
+</label>
--- a/packages/ui/src/lib/Details.svelte
+++ b/packages/ui/src/lib/Details.svelte
@@ -1,37 +1,41 @@
 <script lang="ts">
-  interface Props {
-    title?: string;
-    transparent?: boolean;
-    children?: import('svelte').Snippet;
-    open?: boolean;
-  }
+	interface Props {
+		title?: string;
+		transparent?: boolean;
+		children?: import('svelte').Snippet;
+		open?: boolean;
+	}

-  let { title = "Details", transparent = false, children, open = $bindable(false) }: Props = $props();
+	let {
+		title = 'Details',
+		transparent = false,
+		children,
+		open = $bindable(false)
+	}: Props = $props();
 </script>

 <details class:transparent bind:open>
-  <summary>{title}</summary>
-  <div class="content">
-    {@render children?.()}
-  </div>
+	<summary>{title}</summary>
+	<div class="content">
+		{@render children?.()}
+	</div>
 </details>

 <style>
-  details {
-    padding: 1em;
-    color: var(--text-color);
-    padding-left: 20px;
-    background-color: #202020;
-    outline: solid 0.1px white;
-    border-radius: 2px;
-    font-weight: 300;
-    font-size: 0.9em;
-  }
-
-  details.transparent {
-    background-color: transparent;
-    padding: 0;
-    outline: none;
-  }
+	details {
+		padding: 1em;
+		color: var(--text-color);
+		padding-left: 20px;
+		background-color: #202020;
+		outline: solid 0.1px white;
+		border-radius: 2px;
+		font-weight: 300;
+		font-size: 0.9em;
+	}

+	details.transparent {
+		background-color: transparent;
+		padding: 0;
+		outline: none;
+	}
 </style>
--- a/packages/ui/src/lib/elements/Float.svelte
+++ b/packages/ui/src/lib/elements/Float.svelte
@@ -4,15 +4,13 @@
 		step?: number;
 		min?: number;
 		max?: number;
-		id?: string;
 	}

 	let {
 		value = $bindable(0.5),
 		step = 0.01,
 		min = $bindable(0),
-		max = $bindable(1),
-		id = ''
+		max = $bindable(1)
 	}: Props = $props();

 	if (min > max) {
@@ -55,6 +53,7 @@
 		window.addEventListener('mousemove', handleMouseMove);
 		window.addEventListener('mouseup', handleMouseUp);
 		document.body.style.cursor = 'ew-resize';
+		(ev.target as HTMLElement)?.blur();
 	}

 	function handleMouseUp() {
@@ -93,6 +92,7 @@
 		} else {
 			value = Math.max(Math.min(min + (max - min) * vx, max), min);
 		}
+		(ev.target as HTMLElement)?.blur();
 	}
 	$effect(() => {
 		if ((value || 0).toString().length > 5) {
@@ -110,7 +110,6 @@
 	<input
 		bind:value
 		bind:this={inputEl}
-		{id}
 		{step}
 		{max}
 		{min}
--- a/packages/ui/src/lib/Input.svelte
+++ b/packages/ui/src/lib/Input.svelte
@@ -1,29 +1,28 @@
 <script lang="ts">
-	import Checkbox from './elements/Checkbox.svelte';
-	import Float from './elements/Float.svelte';
-	import Integer from './elements/Integer.svelte';
-	import Select from './elements/Select.svelte';
+	import Checkbox from './Checkbox.svelte';
+	import Float from './Float.svelte';
+	import Integer from './Integer.svelte';
+	import Select from './Select.svelte';
+	import Vec3 from './Vec3.svelte';

 	import type { NodeInput } from '@nodarium/types';
-	import Vec3 from './elements/Vec3.svelte';

 	interface Props {
 		input: NodeInput;
 		value: any;
-		id: string;
 	}

-	let { input, value = $bindable(), id }: Props = $props();
+	let { input, value = $bindable() }: Props = $props();
 </script>

 {#if input.type === 'float'}
-	<Float {id} bind:value min={input?.min} max={input?.max} />
+	<Float bind:value min={input?.min} max={input?.max} />
 {:else if input.type === 'integer'}
-	<Integer {id} bind:value min={input?.min} max={input?.max} />
+	<Integer bind:value min={input?.min} max={input?.max} />
 {:else if input.type === 'boolean'}
-	<Checkbox {id} bind:value />
+	<Checkbox bind:value />
 {:else if input.type === 'select'}
-	<Select {id} bind:value options={input.options} />
+	<Select bind:value options={input.options} />
 {:else if input.type === 'vec3'}
-	<Vec3 {id} bind:value />
+	<Vec3 bind:value />
 {/if}
--- a/packages/ui/src/lib/elements/Integer.svelte
+++ b/packages/ui/src/lib/elements/Integer.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	const dispatch = createEventDispatcher();
-
 	interface Props {
 		min?: number | undefined;
 		max?: number | undefined;
 		step?: number;
 		value?: number;
-		id?: string;
+		onchange?: (value: number) => void;
 	}

 	let {
@@ -15,21 +12,21 @@
 		max = undefined,
 		step = 1,
 		value = $bindable(0),
-		id = ''
+		onchange
 	}: Props = $props();

 	if (!value) {
 		value = 0;
 	}

-	let inputEl: HTMLInputElement | undefined = $state();
-	let wrapper: HTMLDivElement | undefined = $state();
+	let inputEl = $state<HTMLInputElement>();
+	let wrapper = $state<HTMLDivElement>();

 	let prev = -1;
 	function update() {
 		if (prev === value) return;
 		prev = value;
-		dispatch('change', parseFloat(value + ''));
+		onchange?.(parseFloat(value + ''));
 	}

 	function handleChange(change: number) {
@@ -45,7 +42,7 @@

 		downV = value;
 		downX = ev.clientX;
-		rect = wrapper.getBoundingClientRect();
+		rect = wrapper?.getBoundingClientRect()!;

 		window.removeEventListener('mousemove', handleMouseMove);
 		window.addEventListener('mousemove', handleMouseMove);
@@ -55,9 +52,9 @@

 	function handleMouseUp() {
 		if (downV === value) {
-			inputEl.focus();
+			inputEl?.focus();
 		} else {
-			inputEl.blur();
+			inputEl?.blur();
 		}

 		document.body.style.cursor = 'unset';
@@ -100,7 +97,6 @@
 	<input
 		bind:value
 		bind:this={inputEl}
-		{id}
 		{step}
 		{max}
 		{min}
--- a/packages/ui/src/lib/elements/Select.svelte
+++ b/packages/ui/src/lib/elements/Select.svelte
@@ -2,13 +2,12 @@
 	interface Props {
 		options?: string[];
 		value?: number;
-		id?: string;
 	}

-	let { options = [], value = $bindable(0), id = '' }: Props = $props();
+	let { options = [], value = $bindable(0) }: Props = $props();
 </script>

-<select {id} bind:value>
+<select bind:value>
 	{#each options as label, i}
 		<option value={i}>{label}</option>
 	{/each}
--- a/packages/ui/src/lib/elements/Vec3.svelte
+++ b/packages/ui/src/lib/elements/Vec3.svelte
@@ -3,16 +3,15 @@

 	interface Props {
 		value?: any;
-		id?: string;
 	}

-	let { value = $bindable([0, 0, 0]), id = '' }: Props = $props();
+	let { value = $bindable([0, 0, 0]) }: Props = $props();
 </script>

 <div>
-	<Float id={`${id}-x`} bind:value={value[0]} />
-	<Float id={`${id}-y`} bind:value={value[1]} />
-	<Float id={`${id}-z`} bind:value={value[2]} />
+	<Float bind:value={value[0]} />
+	<Float bind:value={value[1]} />
+	<Float bind:value={value[2]} />
 </div>

 <style>
--- a/packages/ui/src/lib/app.css
+++ b/packages/ui/src/lib/app.css
@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 /* fira-code-300 - latin */
@font-face {
  font-display: swap;
@@ -63,9 +65,6 @@ html {
 }

 body {
-  overflow: hidden;
-
-
  color: var(--text-color);
  background-color: var(--layer-0);
 }
--- a/packages/ui/src/lib/elements/Checkbox.svelte
+++ b/packages/ui/src/lib/elements/Checkbox.svelte
@@ -1,100 +0,0 @@
-<script lang="ts">
-	interface Props {
-		value: boolean;
-		id?: string;
-	}
-
-	let { value = $bindable(false), id = '' }: Props = $props();
-	$effect(() => {
-		if (typeof value === 'string') {
-			value = value === 'true';
-		} else if (typeof value === 'number') {
-			value = value === 1;
-		}
-	});
-</script>
-
-<input {id} type="checkbox" bind:checked={value} />
-<label for={id}>
-	<svg viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<path
-			d="M2 7L7 12L17 2"
-			stroke="currentColor"
-			stroke-width="3"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-	</svg>
-</label>
-
-<style>
-	input[type='checkbox'] {
-		position: absolute;
-		overflow: hidden;
-		clip: rect(0 0 0 0);
-		height: 1px;
-		width: 1px;
-		margin: -1px;
-		padding: 0;
-		border: 0;
-	}
-	#inputPreview {
-		display: flex;
-		gap: 20px;
-		justify-content: center;
-	}
-	input + label {
-		position: relative;
-		font-size: 14px;
-		cursor: pointer;
-		display: inline-flex;
-		align-items: center;
-		height: 22px;
-		color: rgb(0, 0, 0);
-	}
-	input + label::before {
-		content: ' ';
-		display: inline;
-		vertical-align: middle;
-		margin-right: 3px;
-		width: 22px;
-		height: 22px;
-		background-color: var(--layer-2);
-		border-radius: 5px;
-		border: none;
-		box-shadow: none;
-	}
-	input:checked + label::after {
-		content: ' ';
-		background-repeat: no-repeat;
-		background-size: 12px 12px;
-		background-position: center center;
-		position: absolute;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		margin-left: 0px;
-		left: 0px;
-		top: 0px;
-		text-align: center;
-		background-color: transparent;
-		color: red;
-		font-size: 10px;
-		height: 22px;
-		width: 22px;
-	}
-
-	input + label > svg {
-		position: absolute;
-		display: none;
-		width: 12px;
-		height: 10px;
-		left: 5px;
-		color: var(--text-color);
-		top: 5.9px;
-	}
-
-	input:checked + label > svg {
-		display: block;
-	}
-</style>
--- a/packages/ui/src/lib/elements/Float.stories.svelte
+++ b/packages/ui/src/lib/elements/Float.stories.svelte
@@ -1,11 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import FloatComp from './Float.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Inputs/Float',
-		component: FloatComp
-	});
-</script>
-
-<Story name="Float" />
--- a/packages/ui/src/lib/elements/Integer.stories.svelte
+++ b/packages/ui/src/lib/elements/Integer.stories.svelte
@@ -1,11 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import IntegerComp from './Integer.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Inputs/Integer',
-		component: IntegerComp
-	});
-</script>
-
-<Story name="Integer" />
--- a/packages/ui/src/lib/elements/Select.stories.svelte
+++ b/packages/ui/src/lib/elements/Select.stories.svelte
@@ -1,23 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import SelectComp from '$lib/elements/Select.svelte';
-	const { Story } = defineMeta({
-		title: 'Inputs/Select',
-		component: SelectComp,
-
-		argTypes: {
-			options: {
-				control: {
-					type: 'select'
-				}
-			}
-		},
-		parameters: {
-			actions: {
-				handles: ['change']
-			}
-		}
-	});
-</script>
-
-<Story name="Select" args={{ options: ['strawberry', 'raspberry', 'chickpeas'] }} />
--- a/packages/ui/src/lib/elements/Vec3.stories.svelte
+++ b/packages/ui/src/lib/elements/Vec3.stories.svelte
@@ -1,10 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Vec3Comp from './Vec3.svelte';
-	const { Story } = defineMeta({
-		title: 'Inputs/Vec3',
-		component: Vec3Comp
-	});
-</script>
-
-<Story name="Vec3" />
--- a/packages/ui/src/lib/index.ts
+++ b/packages/ui/src/lib/index.ts
@@ -1,16 +1,8 @@
-// Reexport your entry components here
-import Input from './Input.svelte';
-
-import Float from "./elements/Float.svelte";
-import Integer from "./elements/Integer.svelte";
-import Select from "./elements/Select.svelte";
-import Checkbox from "./elements/Checkbox.svelte";
-import Details from "./Details.svelte";
-
-export const icons = import.meta.glob('./icons/*.svg?raw', { eager: true })
-
-export { Float, Integer, Select, Checkbox, Input, Details };
-
-export default Input;
-
+export { default as Input } from './Input.svelte';
+export { default as Float } from "./Float.svelte";
+export { default as Integer } from "./Integer.svelte";
+export { default as Vec3 } from "./Vec3.svelte";
+export { default as Select } from "./Select.svelte";
+export { default as Checkbox } from "./Checkbox.svelte";
+export { default as Details } from "./Details.svelte";
 export { default as ShortCut } from "./ShortCut.svelte";
--- a/packages/ui/src/routes/+page.svelte
+++ b/packages/ui/src/routes/+page.svelte
@@ -1,29 +1,51 @@
 <script lang="ts">
 	import '$lib/app.css';
-	import Float from '$lib/elements/Float.svelte';
-	import Integer from '$lib/elements/Integer.svelte';
-	import Vec3 from '$lib/elements/Vec3.svelte';
+	import { Checkbox, Details, Float, Integer, Select, ShortCut, Vec3 } from '$lib/index.js';
+	import Section from './Section.svelte';

 	let intValue = $state(0);
 	let floatValue = $state(0.2);
 	let vecValue = $state([0.2, 0.3, 0.4]);
+	const options = ['strawberry', 'raspberry', 'chickpeas'];
+	let selectValue = $state(0);
+	const d = $derived(options[selectValue]);
+
+	let checked = $state(false);
+	let detailsOpen = $state(false);
 </script>

-<main>
-	<section>
-		<h3>Integer {intValue}</h3>
+<main class="flex flex-col gap-8 py-8">
+	<h1 class="text-4xl">@nodarium/ui</h1>
+
+	<Section title="Integer" value={intValue}>
 		<Integer bind:value={intValue} />
-	</section>
+	</Section>

-	<section>
-		<h3>Float {floatValue}</h3>
+	<Section title="Float" value={floatValue}>
 		<Float bind:value={floatValue} />
-	</section>
+	</Section>

-	<section>
-		<h3>Vec3 {JSON.stringify(vecValue)}</h3>
+	<Section title="Vec3" value={JSON.stringify(vecValue)}>
 		<Vec3 bind:value={vecValue} />
-	</section>
+	</Section>
+
+	<Section title="Select" value={d}>
+		<Select bind:value={selectValue} {options} />
+	</Section>
+
+	<Section title="Checkbox" value={checked}>
+		<Checkbox bind:value={checked} />
+	</Section>
+
+	<Section title="Details" value={detailsOpen}>
+		<Details title="More Information" bind:open={detailsOpen}>
+			<p>Here is some more information that was previously hidden.</p>
+		</Details>
+	</Section>
+
+	<Section title="Shortcut">
+		<ShortCut ctrl key="S" />
+	</Section>
 </main>

 <style>
--- a/packages/ui/src/routes/Section.svelte
+++ b/packages/ui/src/routes/Section.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+	let { title, value, children } = $props<{
+		title?: string;
+		value?: unknown;
+		children?: Snippet;
+	}>();
+</script>
+
+<section class="border border-1/2 mb-4 p-4 flex flex-col gap-4">
+	<h3 class="flex gap-2 font-bold">
+		{title}
+		<p class="font-normal! opacity-50!">{value}</p>
+	</h3>
+	<div>
+		{@render children()}
+	</div>
+</section>
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -1,8 +1,9 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vitest/config';
+import tailwindcss from '@tailwindcss/vite'

 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [tailwindcss(), sveltekit()],
  test: {
    include: ['src/**/*.{test,spec}.{js,ts}']
  }
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -13,7 +13,7 @@
    "@nodarium/types": "link:../types"
  },
  "devDependencies": {
-    "vite": "^7.2.4",
-    "vitest": "^4.0.13"
+    "vite": "^7.3.1",
+    "vitest": "^4.0.17"
  }
 }
--- a/packages/utils/src/fastHash.test.ts
+++ b/packages/utils/src/fastHash.test.ts
@@ -1,5 +1,5 @@
 import { test, expect } from 'vitest';
-import { fastHashArray, fastHashString } from './fastHash';
+import { fastHashArrayBuffer, fastHashString } from './fastHash';

 test('fastHashString doesnt produce clashes', () => {
  const hashA = fastHashString('abcdef');
@@ -14,10 +14,10 @@ test("fastHashArray doesnt product collisions", () => {

  const a = new Int32Array(1000);

-  const hash_a = fastHashArray(a.buffer);
+  const hash_a = fastHashArrayBuffer(a);
  a[0] = 1;

-  const hash_b = fastHashArray(a.buffer);
+  const hash_b = fastHashArrayBuffer(a);

  expect(hash_a).not.toEqual(hash_b);

@@ -28,13 +28,13 @@ test('fastHashArray is fast(ish) < 20ms', () => {
  const a = new Int32Array(10_000);

  const t0 = performance.now();
-  fastHashArray(a.buffer);
+  fastHashArrayBuffer(a);

  const t1 = performance.now();

  a[0] = 1;

-  fastHashArray(a.buffer);
+  fastHashArrayBuffer(a);

  const t2 = performance.now();

@@ -48,7 +48,7 @@ test('fastHashArray is deterministic', () => {
  a[42] = 69;
  const b = new Int32Array(1000);
  b[42] = 69;
-  const hashA = fastHashArray(a.buffer);
-  const hashB = fastHashArray(b.buffer);
+  const hashA = fastHashArrayBuffer(a);
+  const hashB = fastHashArrayBuffer(b);
  expect(hashA).toEqual(hashB);
 });
--- a/packages/utils/src/fastHash.ts
+++ b/packages/utils/src/fastHash.ts
@@ -1,156 +1,45 @@
-// https://github.com/6502/sha256/blob/main/sha256.js
-function sha256(data?: string | Int32Array) {
-  let h0 = 0x6a09e667,
-    h1 = 0xbb67ae85,
-    h2 = 0x3c6ef372,
-    h3 = 0xa54ff53a,
-    h4 = 0x510e527f,
-    h5 = 0x9b05688c,
-    h6 = 0x1f83d9ab,
-    h7 = 0x5be0cd19,
-    tsz = 0,
-    bp = 0;
-  const k = [
-      0x428a2f98, 0x71374491, 0xb5c0fbcf, 0xe9b5dba5, 0x3956c25b, 0x59f111f1,
-      0x923f82a4, 0xab1c5ed5, 0xd807aa98, 0x12835b01, 0x243185be, 0x550c7dc3,
-      0x72be5d74, 0x80deb1fe, 0x9bdc06a7, 0xc19bf174, 0xe49b69c1, 0xefbe4786,
-      0x0fc19dc6, 0x240ca1cc, 0x2de92c6f, 0x4a7484aa, 0x5cb0a9dc, 0x76f988da,
-      0x983e5152, 0xa831c66d, 0xb00327c8, 0xbf597fc7, 0xc6e00bf3, 0xd5a79147,
-      0x06ca6351, 0x14292967, 0x27b70a85, 0x2e1b2138, 0x4d2c6dfc, 0x53380d13,
-      0x650a7354, 0x766a0abb, 0x81c2c92e, 0x92722c85, 0xa2bfe8a1, 0xa81a664b,
-      0xc24b8b70, 0xc76c51a3, 0xd192e819, 0xd6990624, 0xf40e3585, 0x106aa070,
-      0x19a4c116, 0x1e376c08, 0x2748774c, 0x34b0bcb5, 0x391c0cb3, 0x4ed8aa4a,
-      0x5b9cca4f, 0x682e6ff3, 0x748f82ee, 0x78a5636f, 0x84c87814, 0x8cc70208,
-      0x90befffa, 0xa4506ceb, 0xbef9a3f7, 0xc67178f2,
-    ],
-    rrot = (x: number, n: number) => (x >>> n) | (x << (32 - n)),
-    w = new Uint32Array(64),
-    buf = new Uint8Array(64),
-    process = () => {
-      for (let j = 0, r = 0; j < 16; j++, r += 4) {
-        w[j] =
-          (buf[r] << 24) | (buf[r + 1] << 16) | (buf[r + 2] << 8) | buf[r + 3];
-      }
-      for (let j = 16; j < 64; j++) {
-        let s0 = rrot(w[j - 15], 7) ^ rrot(w[j - 15], 18) ^ (w[j - 15] >>> 3);
-        let s1 = rrot(w[j - 2], 17) ^ rrot(w[j - 2], 19) ^ (w[j - 2] >>> 10);
-        w[j] = (w[j - 16] + s0 + w[j - 7] + s1) | 0;
-      }
-      let a = h0,
-        b = h1,
-        c = h2,
-        d = h3,
-        e = h4,
-        f = h5,
-        g = h6,
-        h = h7;
-      for (let j = 0; j < 64; j++) {
-        let S1 = rrot(e, 6) ^ rrot(e, 11) ^ rrot(e, 25),
-          ch = (e & f) ^ (~e & g),
-          t1 = (h + S1 + ch + k[j] + w[j]) | 0,
-          S0 = rrot(a, 2) ^ rrot(a, 13) ^ rrot(a, 22),
-          maj = (a & b) ^ (a & c) ^ (b & c),
-          t2 = (S0 + maj) | 0;
-        h = g;
-        g = f;
-        f = e;
-        e = (d + t1) | 0;
-        d = c;
-        c = b;
-        b = a;
-        a = (t1 + t2) | 0;
-      }
-      h0 = (h0 + a) | 0;
-      h1 = (h1 + b) | 0;
-      h2 = (h2 + c) | 0;
-      h3 = (h3 + d) | 0;
-      h4 = (h4 + e) | 0;
-      h5 = (h5 + f) | 0;
-      h6 = (h6 + g) | 0;
-      h7 = (h7 + h) | 0;
-      bp = 0;
-    },
-    add = (input: string | Int32Array) => {
-      const data =
-        typeof input === "string"
-          ? typeof TextEncoder === "undefined"
-            ? //@ts-ignore
-              Buffer.from(input)
-            : new TextEncoder().encode(input)
-          : input;
+export function fastHashArrayBuffer(input: string | Int32Array): string {
+  const mask = (1n << 64n) - 1n

-      for (let i = 0; i < data.length; i++) {
-        buf[bp++] = data[i];
-        if (bp === 64) process();
-      }
-      tsz += data.length;
-    },
-    digest = () => {
-      buf[bp++] = 0x80;
-      if (bp == 64) process();
-      if (bp + 8 > 64) {
-        while (bp < 64) buf[bp++] = 0x00;
-        process();
-      }
-      while (bp < 58) buf[bp++] = 0x00;
-      // Max number of bytes is 35,184,372,088,831
-      let L = tsz * 8;
-      buf[bp++] = (L / 1099511627776) & 255;
-      buf[bp++] = (L / 4294967296) & 255;
-      buf[bp++] = L >>> 24;
-      buf[bp++] = (L >>> 16) & 255;
-      buf[bp++] = (L >>> 8) & 255;
-      buf[bp++] = L & 255;
-      process();
-      let reply = new Uint8Array(32);
-      reply[0] = h0 >>> 24;
-      reply[1] = (h0 >>> 16) & 255;
-      reply[2] = (h0 >>> 8) & 255;
-      reply[3] = h0 & 255;
-      reply[4] = h1 >>> 24;
-      reply[5] = (h1 >>> 16) & 255;
-      reply[6] = (h1 >>> 8) & 255;
-      reply[7] = h1 & 255;
-      reply[8] = h2 >>> 24;
-      reply[9] = (h2 >>> 16) & 255;
-      reply[10] = (h2 >>> 8) & 255;
-      reply[11] = h2 & 255;
-      reply[12] = h3 >>> 24;
-      reply[13] = (h3 >>> 16) & 255;
-      reply[14] = (h3 >>> 8) & 255;
-      reply[15] = h3 & 255;
-      reply[16] = h4 >>> 24;
-      reply[17] = (h4 >>> 16) & 255;
-      reply[18] = (h4 >>> 8) & 255;
-      reply[19] = h4 & 255;
-      reply[20] = h5 >>> 24;
-      reply[21] = (h5 >>> 16) & 255;
-      reply[22] = (h5 >>> 8) & 255;
-      reply[23] = h5 & 255;
-      reply[24] = h6 >>> 24;
-      reply[25] = (h6 >>> 16) & 255;
-      reply[26] = (h6 >>> 8) & 255;
-      reply[27] = h6 & 255;
-      reply[28] = h7 >>> 24;
-      reply[29] = (h7 >>> 16) & 255;
-      reply[30] = (h7 >>> 8) & 255;
-      reply[31] = h7 & 255;
-      let res = "";
-      reply.forEach((x) => (res += ("0" + x.toString(16)).slice(-2)));
-      return res;
-    };
+  // FNV-1a 64-bit constants
+  let h = 0xcbf29ce484222325n // offset basis
+  const FNV_PRIME = 0x100000001b3n

-  if (data) add(data);
+  // get bytes for string or Int32Array
+  let bytes: Uint8Array
+  if (typeof input === "string") {
+    // utf-8 encoding
+    bytes = new TextEncoder().encode(input)
+  } else {
+    // Int32Array -> bytes (little-endian)
+    bytes = new Uint8Array(input.length * 4)
+    for (let i = 0; i < input.length; i++) {
+      const v = input[i] >>> 0 // ensure unsigned 32-bit
+      const base = i * 4
+      bytes[base] = v & 0xff
+      bytes[base + 1] = (v >>> 8) & 0xff
+      bytes[base + 2] = (v >>> 16) & 0xff
+      bytes[base + 3] = (v >>> 24) & 0xff
+    }
+  }

-  return { add, digest };
+  // FNV-1a byte-wise
+  for (let i = 0; i < bytes.length; i++) {
+    h = (h ^ BigInt(bytes[i])) & mask
+    h = (h * FNV_PRIME) & mask
+  }
+
+  // MurmurHash3's fmix64 finalizer (good avalanche)
+  h ^= h >> 33n
+  h = (h * 0xff51afd7ed558ccdn) & mask
+  h ^= h >> 33n
+  h = (h * 0xc4ceb9fe1a85ec53n) & mask
+  h ^= h >> 33n
+
+  // to 16-char hex
+  return h.toString(16).padStart(16, "0").slice(-16)
 }

-export function fastHashArrayBuffer(buffer: string | Int32Array): string {
-  return sha256(buffer).digest();
-}
-
-// Shamelessly copied from
-// https://stackoverflow.com/a/8831937
 export function fastHashString(input: string) {
  if (input.length === 0) return 0;

@@ -162,20 +51,3 @@ export function fastHashString(input: string) {

  return hash;
 }
-
-export function fastHash(input: (string | Int32Array | number)[]) {
-  const s = sha256();
-
-  for (let i = 0; i < input.length; i++) {
-    const v = input[i];
-    if (typeof v === "string") {
-      s.add(v);
-    } else if (v instanceof Int32Array) {
-      s.add(v);
-    } else {
-      s.add(v.toString());
-    }
-  }
-
-  return s.digest();
-}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
Author	SHA1	Message	Date
Max Richter	aea2cbceba	feat: updating some things All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 10m47s Details	2026-01-18 15:39:10 +01:00
Max Richter	cb89b16dd8	chore: cleanup some code	2026-01-18 15:18:11 +01:00
Max Richter	4217621574	feat(ui): remove storybook	2026-01-18 15:17:56 +01:00
Max Richter	22f285eaff	chore: pnpm update	2026-01-18 15:17:27 +01:00
Max Richter	d068828b68	refactor: rename state.svelte.ts to graph-state.svelte.ts All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 1m59s Details	2025-12-09 20:00:52 +01:00
Max Richter	3565a18364	feat: cache everything in node store not only wasm	2025-12-05 14:19:29 +01:00
Max Richter	73be4fdd73	feat: better handle node position updates	2025-12-05 14:19:11 +01:00
Max Richter	702c3ee6cf	feat: better handle camera positioning	2025-12-05 14:18:56 +01:00
Max Richter	98672eb702	fix: error that changes in active node panel did not get saved	2025-12-05 12:28:30 +01:00
Max Richter	3eafdc50b1	feat: keep benchmark result if panel is hidden	2025-12-05 11:49:10 +01:00
Max Richter	548e445eb7	fix: correctly show hide geometries in geometrypool All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 2m4s Details	2025-12-03 22:59:06 +01:00
max_richter	db77a4fd94	Merge pull request 'refactor: split ui/runtime/serialized node types' (#10 ) from refactor/split-node-runtime-types into main All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 2m3s Details Reviewed-on: #10	2025-12-03 19:19:17 +01:00