feat: update sidebar to svelte-5

Reviewed-on: #10

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",
+    "@tailwindcss/vite": "^4.1.18",
+    "@threlte/core": "8.3.1",
+    "@threlte/extras": "9.7.1",
     "comlink": "^4.4.2",
     "file-saver": "^2.0.5",
     "idb": "^8.0.3",
     "jsondiffpatch": "^0.7.3",
-    "three": "^0.181.2"
+    "tailwindcss": "^4.1.18",
+    "three": "^0.182.0"
   },
   "devDependencies": {
-    "@iconify-json/tabler": "^1.2.23",
+    "@iconify-json/tabler": "^1.2.26",
+    "@iconify/tailwind4": "^1.2.1",
     "@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",
+    "@types/three": "^0.182.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",
+    "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"
   }
 }

app/src/app.css

@@ -0,0 +1,6 @@
+@import "tailwindcss";
+@source "../../packages/ui/**/*.svelte";
+@plugin "@iconify/tailwind4" {
+  prefix: "i";
+  icon-sets: from-folder(custom, "./src/lib/icons")
+};

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;

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;
       }
     }
   }

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

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 = {

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;
   }
 
 }

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;
       });
     },

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} />

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) {

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({

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>
 

app/src/lib/grid/Cell.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
-  import { getContext } from "svelte";
+  import { getContext, type Snippet } from "svelte";
 
-  let index = -1;
+  let index = $state(-1);
   let wrapper: HTMLDivElement;
 
-  $: if (index === -1) {
-    index = getContext<() => number>("registerCell")();
-  }
+  const { children } = $props<{ children?: Snippet }>();
+
+  $effect(() => {
+    if (index === -1) {
+      index = getContext<() => number>("registerCell")();
+    }
+  });
 
   const sizes = getContext<{ value: string[] }>("sizes");
 
@@ -31,8 +35,8 @@
 </script>
 
 <svelte:window
-  on:mouseup={() => (mouseDown = false)}
-  on:mousemove={handleMouseMove}
+  onmouseup={() => (mouseDown = false)}
+  onmousemove={handleMouseMove}
 />
 
 {#if index > 0}
@@ -40,12 +44,12 @@
     class="seperator"
     role="button"
     tabindex="0"
-    on:mousedown={handleMouseDown}
+    onmousedown={handleMouseDown}
   ></div>
 {/if}
 
 <div class="cell" bind:this={wrapper}>
-  <slot />
+  {@render children?.()}
 </div>
 
 <style>

app/src/lib/grid/Grid.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { setContext } from "svelte";
+  import { setContext, type Snippet } from "svelte";
 
-  export let id = "grid-0";
+  const { children, id } = $props<{ children?: Snippet; id?: string }>();
 
   setContext("grid-id", id);
 </script>
 
-<slot {id} />
+{@render children({ id })}

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();

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"/> 

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}

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>
 

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]}

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>

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>
 

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 {

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>

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} />

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} />

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 };

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();
+  }
 }

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;

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: {

app/src/lib/sidebar/Panel.svelte

@@ -1,43 +1,46 @@
 <script lang="ts">
-  import { getContext } from "svelte";
-  import type { Readable } from "svelte/store";
+  import { getContext, type Snippet } from "svelte";
+  import type { PanelState } from "./PanelState.svelte";
 
-  export let id: string;
-  export let icon: string = "";
-  export let title = "";
-  export let classes = "";
-  export let hidden: boolean | undefined = undefined;
+  const {
+    id,
+    icon = "",
+    title = "",
+    classes = "",
+    hidden,
+    children,
+  } = $props<{
+    id: string;
+    icon?: string;
+    title?: string;
+    classes?: string;
+    hidden?: boolean;
+    children?: Snippet;
+  }>();
 
-  const setVisibility =
-    getContext<(id: string, visible: boolean) => void>("setVisibility");
+  const panelState = getContext<PanelState>("panel-state");
 
-  $: if (typeof hidden === "boolean") {
-    setVisibility(id, !hidden);
-  }
-
-  const registerPanel =
-    getContext<
-      (id: string, icon: string, classes: string) => Readable<boolean>
-    >("registerPanel");
-
-  let visible = registerPanel(id, icon, classes);
+  const panel = panelState.registerPanel(id, icon, classes, hidden);
+  $effect(() => {
+    panel.hidden = hidden;
+  });
 </script>
 
-{#if $visible}
+{#if panelState.activePanel.value === id}
   <div class="wrapper" class:hidden>
     {#if title}
       <header>
         <h3>{title}</h3>
       </header>
     {/if}
-    <slot />
+    {@render children?.()}
   </div>
 {/if}
 
 <style>
   header {
     border-bottom: solid thin var(--outline);
-    height: 69px;
+    height: 70px;
     display: flex;
     align-items: center;
     padding-left: 1em;

app/src/lib/sidebar/PanelState.svelte.ts

@@ -0,0 +1,35 @@
+import { localState } from "$lib/helpers/localState.svelte";
+
+type Panel = {
+  icon: string;
+  classes: string;
+  hidden?: boolean;
+}
+
+export class PanelState {
+
+  panels = $state<Record<string, Panel>>({});
+  activePanel = localState<string | boolean>("node.activePanel", "")
+
+  get keys() {
+    return Object.keys(this.panels);
+  }
+
+  public registerPanel(id: string, icon: string, classes: string, hidden: boolean): Panel {
+    const state = $state({
+      icon: icon,
+      classes: classes,
+      hidden: hidden,
+    });
+    this.panels[id] = state;
+    return state;
+  }
+
+  public toggleOpen() {
+    if (this.activePanel.value) {
+      this.activePanel.value = false;
+    } else {
+      this.activePanel.value = this.keys[0]
+    }
+  }
+}

app/src/lib/sidebar/Sidebar.svelte

@@ -1,77 +1,35 @@
 <script lang="ts">
-  import localStore from "$lib/helpers/localStore";
-  import { setContext } from "svelte";
-  import { derived } from "svelte/store";
+  import { setContext, type Snippet } from "svelte";
+  import { PanelState } from "./PanelState.svelte";
 
-  let panels: Record<
-    string,
-    {
-      icon: string;
-      id: string;
-      classes: string;
-      visible?: boolean;
-    }
-  > = {};
+  const state = new PanelState();
+  setContext("panel-state", state);
 
-  const activePanel = localStore<keyof typeof panels | false>(
-    "nodes.settings.activePanel",
-    false,
-  );
-
-  $: keys = panels
-    ? (Object.keys(panels) as unknown as (keyof typeof panels)[]).filter(
-        (key) => !!panels[key]?.id,
-      )
-    : [];
-
-  setContext("setVisibility", (id: string, visible: boolean) => {
-    panels[id].visible = visible;
-    panels = { ...panels };
-  });
-
-  setContext("registerPanel", (id: string, icon: string, classes: string) => {
-    panels[id] = { id, icon, classes };
-    return derived(activePanel, ($activePanel) => {
-      return $activePanel === id;
-    });
-  });
-
-  function setActivePanel(panel: keyof typeof panels | false) {
-    if (panel === $activePanel) {
-      $activePanel = false;
-    } else if (panel) {
-      $activePanel = panel;
-    } else {
-      $activePanel = false;
-    }
-  }
+  const { children } = $props<{ children?: Snippet }>();
 </script>
 
-<div class="wrapper" class:visible={$activePanel}>
+<div class="wrapper" class:visible={state.activePanel.value}>
   <div class="tabs">
-    <button
-      aria-label="Close"
-      on:click={() => {
-        setActivePanel($activePanel ? false : keys[0]);
-      }}
-    >
-      <span class="absolute i-tabler-chevron-left w-6 h-6 block"></span>
+    <button aria-label="Close" onclick={() => state.toggleOpen()}>
+      <span class="icon-[tabler--settings]"></span>
+      <span class="absolute i-[tabler--chevron-left] w-6 h-6 block"></span>
     </button>
-    {#each keys as panel (panels[panel].id)}
-      {#if panels[panel].visible !== false}
+    {#each state.keys as panelId (panelId)}
+      {#if !state.panels[panelId].hidden}
         <button
-          aria-label={panel}
-          class="tab {panels[panel].classes}"
-          class:active={panel === $activePanel}
-          on:click={() => setActivePanel(panel)}
+          aria-label={panelId}
+          class="tab {state.panels[panelId].classes}"
+          class:active={panelId === state.activePanel.value}
+          onclick={() => (state.activePanel.value = panelId)}
         >
-          <span class={`block w-6 h-6 ${panels[panel].icon}`}></span>
+          <span class={`block w-6 h-6 iconify ${state.panels[panelId].icon}`}
+          ></span>
         </button>
       {/if}
     {/each}
   </div>
   <div class="content">
-    <slot />
+    {@render children?.()}
   </div>
 </div>
 

app/src/lib/sidebar/panels/ActiveNodeSelected.svelte

@@ -64,6 +64,7 @@
     lastPropsHash = propsHash;
 
     if (needsUpdate) {
+      manager.save();
       manager.execute();
     }
   }

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}

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>
 

app/src/lib/sidebar/panels/ExportSettings.svelte

@@ -15,7 +15,7 @@
     FileSaver.saveAs(blob, name + "." + extension);
   };
 
-  export let scene: Group;
+  const { scene } = $props<{ scene: Group }>();
 
   let gltfExporter: GLTFExporter;
   async function exportGltf() {
@@ -53,7 +53,7 @@
   }
 </script>
 
-<div class="p-2">
-  <button on:click={exportObj}> export obj </button>
-  <button on:click={exportGltf}> export gltf </button>
+<div class="p-4">
+  <button onclick={exportObj}> export obj </button>
+  <button onclick={exportGltf}> export gltf </button>
 </div>

app/src/lib/sidebar/panels/Keymap.svelte

@@ -13,32 +13,34 @@
   let { keymaps }: Props = $props();
 </script>
 
-<table class="wrapper">
-  <tbody>
-    {#each keymaps as keymap}
-      <tr>
-        <td colspan="2">
-          <h3>{keymap.title}</h3>
-        </td>
-      </tr>
-      {#each get(keymap.keymap?.keys) as key}
+<div class="p-4">
+  <table class="wrapper">
+    <tbody>
+      {#each keymaps as keymap}
         <tr>
-          {#if key.description}
-            <td class="command-wrapper">
-              <ShortCut
-                alt={key.alt}
-                ctrl={key.ctrl}
-                shift={key.shift}
-                key={key.key}
-              />
-            </td>
-            <td>{key.description}</td>
-          {/if}
+          <td colspan="2">
+            <h3>{keymap.title}</h3>
+          </td>
         </tr>
+        {#each get(keymap.keymap?.keys) as key}
+          <tr>
+            {#if key.description}
+              <td class="command-wrapper">
+                <ShortCut
+                  alt={key.alt}
+                  ctrl={key.ctrl}
+                  shift={key.shift}
+                  key={key.key}
+                />
+              </td>
+              <td>{key.description}</td>
+            {/if}
+          </tr>
+        {/each}
       {/each}
-    {/each}
-  </tbody>
-</table>
+    </tbody>
+  </table>
+</div>
 
 <style>
   .wrapper {

app/src/routes/+layout.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import "@nodarium/ui/app.css";
-  import "virtual:uno.css";
-  import "@unocss/reset/normalize.css";
+  import "../app.css";
+  import type { Snippet } from "svelte";
+  const { children } = $props<{ children?: Snippet }>();
 </script>
 
-<slot />
+{@render children?.()}

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();
@@ -181,7 +178,7 @@
         onsave={(graph) => handleSave(graph)}
       />
       <Sidebar>
-        <Panel id="general" title="General" icon="i-tabler-settings">
+        <Panel id="general" title="General" icon="i-[tabler--settings]">
           <NestedSettings
             id="general"
             bind:value={appSettings.value}
@@ -191,7 +188,7 @@
         <Panel
           id="shortcuts"
           title="Keyboard Shortcuts"
-          icon="i-tabler-keyboard"
+          icon="i-[tabler--keyboard]"
         >
           <Keymap
             keymaps={[
@@ -200,23 +197,21 @@
             ]}
           />
         </Panel>
-        <Panel id="exports" title="Exporter" icon="i-tabler-package-export">
+        <Panel id="exports" title="Exporter" icon="i-[tabler--package-export]">
           <ExportSettings {scene} />
         </Panel>
         <Panel
           id="node-store"
-          classes="text-green-400"
           title="Node Store"
-          icon="i-tabler-database"
+          icon="i-[tabler--database] bg-green-400"
         >
           <NodeStore registry={nodeRegistry} />
         </Panel>
         <Panel
           id="performance"
           title="Performance"
-          classes="text-red-400"
           hidden={!appSettings.value.debug.showPerformancePanel}
-          icon="i-tabler-brand-speedtest"
+          icon="i-[tabler--brand-speedtest] bg-red-400"
         >
           {#if $performanceStore}
             <PerformanceViewer data={$performanceStore} />
@@ -226,24 +221,22 @@
           id="graph-source"
           title="Graph Source"
           hidden={!appSettings.value.debug.showGraphJson}
-          icon="i-tabler-code"
+          icon="i-[tabler--code]"
         >
           <GraphSource {graph} />
         </Panel>
         <Panel
           id="benchmark"
           title="Benchmark"
-          classes="text-red-400"
           hidden={!appSettings.value.debug.showBenchmarkPanel}
-          icon="i-tabler-graph"
+          icon="i-[tabler--graph] bg-red-400"
         >
           <BenchmarkPanel run={randomGenerate} />
         </Panel>
         <Panel
           id="graph-settings"
           title="Graph Settings"
-          classes="text-blue-400"
-          icon="i-custom-graph"
+          icon="i-[custom--graph] bg-blue-400"
         >
           <NestedSettings
             id="graph-settings"
@@ -254,10 +247,9 @@
         <Panel
           id="active-node"
           title="Node Settings"
-          classes="text-blue-400"
-          icon="i-tabler-adjustments"
+          icon="i-[tabler--adjustments] bg-blue-400"
         >
-          <ActiveNodeSettings {manager} node={activeNode} />
+          <ActiveNodeSettings {manager} bind:node={activeNode} />
         </Panel>
       </Sidebar>
     </Grid.Cell>

app/src/routes/dev/+page.svelte

@@ -0,0 +1,29 @@
+<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]"
+      >
+        <div class="p-4">
+          <input type="text" class="bg-red rounded-sm p-2" />
+        </div>
+      </Panel>
+    </Sidebar>
+  </Grid.Cell>
+</Grid.Row>
+
+<style>
+  :global body {
+    height: 100vh;
+  }
+</style>

app/uno.config.ts

@@ -1,20 +0,0 @@
-// uno.config.ts
-import { defineConfig } from 'unocss'
-import presetIcons from '@unocss/preset-icons'
-import { presetUno } from 'unocss'
-import fs from 'fs'
-
-const icons = Object.fromEntries(fs.readdirSync('./src/lib/icons')
-  .map(name => [name.replace(".svg", ""), fs.readFileSync(`./src/lib/icons/${name}`, 'utf-8')]))
-
-
-export default defineConfig({
-  presets: [
-    presetUno(),
-    presetIcons({
-      collections: {
-        custom: icons
-      }
-    }),
-  ]
-})

app/vite.config.ts

@@ -1,14 +1,14 @@
 import { sveltekit } from '@sveltejs/kit/vite';
-import UnoCSS from 'unocss/vite';
 import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite'
 import comlink from 'vite-plugin-comlink';
 import glsl from "vite-plugin-glsl";
 import wasm from "vite-plugin-wasm";
 
 export default defineConfig({
   plugins: [
+    tailwindcss(),
     comlink(),
-    UnoCSS(),
     sveltekit(),
     glsl(),
     wasm()

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'));
   }

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) {

packages/store-client/package.json

@@ -10,10 +10,7 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "dependencies": {
-    "@hey-api/client-fetch": "^0.13.1"
-  },
   "devDependencies": {
-    "@hey-api/openapi-ts": "^0.88.0"
+    "@hey-api/openapi-ts": "^0.90.4"
   }
 }

packages/store-client/src/client/client.gen.ts

@@ -0,0 +1,16 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import { type ClientOptions, type Config, createClient, createConfig } from './client';
+import type { ClientOptions as ClientOptions2 } from './types.gen';
+
+/**
+ * The `createClientConfig()` function will be called on client initialization
+ * and the returned object will become the client's initial configuration.
+ *
+ * You may want to initialize your client this way instead of calling
+ * `setConfig()`. This is useful for example if you're using Next.js
+ * to ensure your client always has the correct values.
+ */
+export type CreateClientConfig<T extends ClientOptions = ClientOptions2> = (override?: Config<ClientOptions & T>) => Config<Required<ClientOptions> & T>;
+
+export const client = createClient(createConfig<ClientOptions2>());

packages/store-client/src/client/client/client.gen.ts

@@ -0,0 +1,311 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import { createSseClient } from '../core/serverSentEvents.gen';
+import type { HttpMethod } from '../core/types.gen';
+import { getValidRequestBody } from '../core/utils.gen';
+import type {
+  Client,
+  Config,
+  RequestOptions,
+  ResolvedRequestOptions,
+} from './types.gen';
+import {
+  buildUrl,
+  createConfig,
+  createInterceptors,
+  getParseAs,
+  mergeConfigs,
+  mergeHeaders,
+  setAuthParams,
+} from './utils.gen';
+
+type ReqInit = Omit<RequestInit, 'body' | 'headers'> & {
+  body?: any;
+  headers: ReturnType<typeof mergeHeaders>;
+};
+
+export const createClient = (config: Config = {}): Client => {
+  let _config = mergeConfigs(createConfig(), config);
+
+  const getConfig = (): Config => ({ ..._config });
+
+  const setConfig = (config: Config): Config => {
+    _config = mergeConfigs(_config, config);
+    return getConfig();
+  };
+
+  const interceptors = createInterceptors<
+    Request,
+    Response,
+    unknown,
+    ResolvedRequestOptions
+  >();
+
+  const beforeRequest = async (options: RequestOptions) => {
+    const opts = {
+      ..._config,
+      ...options,
+      fetch: options.fetch ?? _config.fetch ?? globalThis.fetch,
+      headers: mergeHeaders(_config.headers, options.headers),
+      serializedBody: undefined,
+    };
+
+    if (opts.security) {
+      await setAuthParams({
+        ...opts,
+        security: opts.security,
+      });
+    }
+
+    if (opts.requestValidator) {
+      await opts.requestValidator(opts);
+    }
+
+    if (opts.body !== undefined && opts.bodySerializer) {
+      opts.serializedBody = opts.bodySerializer(opts.body);
+    }
+
+    // remove Content-Type header if body is empty to avoid sending invalid requests
+    if (opts.body === undefined || opts.serializedBody === '') {
+      opts.headers.delete('Content-Type');
+    }
+
+    const url = buildUrl(opts);
+
+    return { opts, url };
+  };
+
+  const request: Client['request'] = async (options) => {
+    // @ts-expect-error
+    const { opts, url } = await beforeRequest(options);
+    const requestInit: ReqInit = {
+      redirect: 'follow',
+      ...opts,
+      body: getValidRequestBody(opts),
+    };
+
+    let request = new Request(url, requestInit);
+
+    for (const fn of interceptors.request.fns) {
+      if (fn) {
+        request = await fn(request, opts);
+      }
+    }
+
+    // fetch must be assigned here, otherwise it would throw the error:
+    // TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation
+    const _fetch = opts.fetch!;
+    let response: Response;
+
+    try {
+      response = await _fetch(request);
+    } catch (error) {
+      // Handle fetch exceptions (AbortError, network errors, etc.)
+      let finalError = error;
+
+      for (const fn of interceptors.error.fns) {
+        if (fn) {
+          finalError = (await fn(
+            error,
+            undefined as any,
+            request,
+            opts,
+          )) as unknown;
+        }
+      }
+
+      finalError = finalError || ({} as unknown);
+
+      if (opts.throwOnError) {
+        throw finalError;
+      }
+
+      // Return error response
+      return opts.responseStyle === 'data'
+        ? undefined
+        : {
+            error: finalError,
+            request,
+            response: undefined as any,
+          };
+    }
+
+    for (const fn of interceptors.response.fns) {
+      if (fn) {
+        response = await fn(response, request, opts);
+      }
+    }
+
+    const result = {
+      request,
+      response,
+    };
+
+    if (response.ok) {
+      const parseAs =
+        (opts.parseAs === 'auto'
+          ? getParseAs(response.headers.get('Content-Type'))
+          : opts.parseAs) ?? 'json';
+
+      if (
+        response.status === 204 ||
+        response.headers.get('Content-Length') === '0'
+      ) {
+        let emptyData: any;
+        switch (parseAs) {
+          case 'arrayBuffer':
+          case 'blob':
+          case 'text':
+            emptyData = await response[parseAs]();
+            break;
+          case 'formData':
+            emptyData = new FormData();
+            break;
+          case 'stream':
+            emptyData = response.body;
+            break;
+          case 'json':
+          default:
+            emptyData = {};
+            break;
+        }
+        return opts.responseStyle === 'data'
+          ? emptyData
+          : {
+              data: emptyData,
+              ...result,
+            };
+      }
+
+      let data: any;
+      switch (parseAs) {
+        case 'arrayBuffer':
+        case 'blob':
+        case 'formData':
+        case 'text':
+          data = await response[parseAs]();
+          break;
+        case 'json': {
+          // Some servers return 200 with no Content-Length and empty body.
+          // response.json() would throw; read as text and parse if non-empty.
+          const text = await response.text();
+          data = text ? JSON.parse(text) : {};
+          break;
+        }
+        case 'stream':
+          return opts.responseStyle === 'data'
+            ? response.body
+            : {
+                data: response.body,
+                ...result,
+              };
+      }
+
+      if (parseAs === 'json') {
+        if (opts.responseValidator) {
+          await opts.responseValidator(data);
+        }
+
+        if (opts.responseTransformer) {
+          data = await opts.responseTransformer(data);
+        }
+      }
+
+      return opts.responseStyle === 'data'
+        ? data
+        : {
+            data,
+            ...result,
+          };
+    }
+
+    const textError = await response.text();
+    let jsonError: unknown;
+
+    try {
+      jsonError = JSON.parse(textError);
+    } catch {
+      // noop
+    }
+
+    const error = jsonError ?? textError;
+    let finalError = error;
+
+    for (const fn of interceptors.error.fns) {
+      if (fn) {
+        finalError = (await fn(error, response, request, opts)) as string;
+      }
+    }
+
+    finalError = finalError || ({} as string);
+
+    if (opts.throwOnError) {
+      throw finalError;
+    }
+
+    // TODO: we probably want to return error and improve types
+    return opts.responseStyle === 'data'
+      ? undefined
+      : {
+          error: finalError,
+          ...result,
+        };
+  };
+
+  const makeMethodFn =
+    (method: Uppercase<HttpMethod>) => (options: RequestOptions) =>
+      request({ ...options, method });
+
+  const makeSseFn =
+    (method: Uppercase<HttpMethod>) => async (options: RequestOptions) => {
+      const { opts, url } = await beforeRequest(options);
+      return createSseClient({
+        ...opts,
+        body: opts.body as BodyInit | null | undefined,
+        headers: opts.headers as unknown as Record<string, string>,
+        method,
+        onRequest: async (url, init) => {
+          let request = new Request(url, init);
+          for (const fn of interceptors.request.fns) {
+            if (fn) {
+              request = await fn(request, opts);
+            }
+          }
+          return request;
+        },
+        serializedBody: getValidRequestBody(opts) as
+          | BodyInit
+          | null
+          | undefined,
+        url,
+      });
+    };
+
+  return {
+    buildUrl,
+    connect: makeMethodFn('CONNECT'),
+    delete: makeMethodFn('DELETE'),
+    get: makeMethodFn('GET'),
+    getConfig,
+    head: makeMethodFn('HEAD'),
+    interceptors,
+    options: makeMethodFn('OPTIONS'),
+    patch: makeMethodFn('PATCH'),
+    post: makeMethodFn('POST'),
+    put: makeMethodFn('PUT'),
+    request,
+    setConfig,
+    sse: {
+      connect: makeSseFn('CONNECT'),
+      delete: makeSseFn('DELETE'),
+      get: makeSseFn('GET'),
+      head: makeSseFn('HEAD'),
+      options: makeSseFn('OPTIONS'),
+      patch: makeSseFn('PATCH'),
+      post: makeSseFn('POST'),
+      put: makeSseFn('PUT'),
+      trace: makeSseFn('TRACE'),
+    },
+    trace: makeMethodFn('TRACE'),
+  } as Client;
+};

packages/store-client/src/client/client/index.ts

@@ -0,0 +1,25 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+export type { Auth } from '../core/auth.gen';
+export type { QuerySerializerOptions } from '../core/bodySerializer.gen';
+export {
+  formDataBodySerializer,
+  jsonBodySerializer,
+  urlSearchParamsBodySerializer,
+} from '../core/bodySerializer.gen';
+export { buildClientParams } from '../core/params.gen';
+export { serializeQueryKeyValue } from '../core/queryKeySerializer.gen';
+export { createClient } from './client.gen';
+export type {
+  Client,
+  ClientOptions,
+  Config,
+  CreateClientConfig,
+  Options,
+  RequestOptions,
+  RequestResult,
+  ResolvedRequestOptions,
+  ResponseStyle,
+  TDataShape,
+} from './types.gen';
+export { createConfig, mergeHeaders } from './utils.gen';

packages/store-client/src/client/client/types.gen.ts

@@ -0,0 +1,241 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { Auth } from '../core/auth.gen';
+import type {
+  ServerSentEventsOptions,
+  ServerSentEventsResult,
+} from '../core/serverSentEvents.gen';
+import type {
+  Client as CoreClient,
+  Config as CoreConfig,
+} from '../core/types.gen';
+import type { Middleware } from './utils.gen';
+
+export type ResponseStyle = 'data' | 'fields';
+
+export interface Config<T extends ClientOptions = ClientOptions>
+  extends Omit<RequestInit, 'body' | 'headers' | 'method'>,
+    CoreConfig {
+  /**
+   * Base URL for all requests made by this client.
+   */
+  baseUrl?: T['baseUrl'];
+  /**
+   * Fetch API implementation. You can use this option to provide a custom
+   * fetch instance.
+   *
+   * @default globalThis.fetch
+   */
+  fetch?: typeof fetch;
+  /**
+   * Please don't use the Fetch client for Next.js applications. The `next`
+   * options won't have any effect.
+   *
+   * Install {@link https://www.npmjs.com/package/@hey-api/client-next `@hey-api/client-next`} instead.
+   */
+  next?: never;
+  /**
+   * Return the response data parsed in a specified format. By default, `auto`
+   * will infer the appropriate method from the `Content-Type` response header.
+   * You can override this behavior with any of the {@link Body} methods.
+   * Select `stream` if you don't want to parse response data at all.
+   *
+   * @default 'auto'
+   */
+  parseAs?:
+    | 'arrayBuffer'
+    | 'auto'
+    | 'blob'
+    | 'formData'
+    | 'json'
+    | 'stream'
+    | 'text';
+  /**
+   * Should we return only data or multiple fields (data, error, response, etc.)?
+   *
+   * @default 'fields'
+   */
+  responseStyle?: ResponseStyle;
+  /**
+   * Throw an error instead of returning it in the response?
+   *
+   * @default false
+   */
+  throwOnError?: T['throwOnError'];
+}
+
+export interface RequestOptions<
+  TData = unknown,
+  TResponseStyle extends ResponseStyle = 'fields',
+  ThrowOnError extends boolean = boolean,
+  Url extends string = string,
+> extends Config<{
+      responseStyle: TResponseStyle;
+      throwOnError: ThrowOnError;
+    }>,
+    Pick<
+      ServerSentEventsOptions<TData>,
+      | 'onSseError'
+      | 'onSseEvent'
+      | 'sseDefaultRetryDelay'
+      | 'sseMaxRetryAttempts'
+      | 'sseMaxRetryDelay'
+    > {
+  /**
+   * Any body that you want to add to your request.
+   *
+   * {@link https://developer.mozilla.org/docs/Web/API/fetch#body}
+   */
+  body?: unknown;
+  path?: Record<string, unknown>;
+  query?: Record<string, unknown>;
+  /**
+   * Security mechanism(s) to use for the request.
+   */
+  security?: ReadonlyArray<Auth>;
+  url: Url;
+}
+
+export interface ResolvedRequestOptions<
+  TResponseStyle extends ResponseStyle = 'fields',
+  ThrowOnError extends boolean = boolean,
+  Url extends string = string,
+> extends RequestOptions<unknown, TResponseStyle, ThrowOnError, Url> {
+  serializedBody?: string;
+}
+
+export type RequestResult<
+  TData = unknown,
+  TError = unknown,
+  ThrowOnError extends boolean = boolean,
+  TResponseStyle extends ResponseStyle = 'fields',
+> = ThrowOnError extends true
+  ? Promise<
+      TResponseStyle extends 'data'
+        ? TData extends Record<string, unknown>
+          ? TData[keyof TData]
+          : TData
+        : {
+            data: TData extends Record<string, unknown>
+              ? TData[keyof TData]
+              : TData;
+            request: Request;
+            response: Response;
+          }
+    >
+  : Promise<
+      TResponseStyle extends 'data'
+        ?
+            | (TData extends Record<string, unknown>
+                ? TData[keyof TData]
+                : TData)
+            | undefined
+        : (
+            | {
+                data: TData extends Record<string, unknown>
+                  ? TData[keyof TData]
+                  : TData;
+                error: undefined;
+              }
+            | {
+                data: undefined;
+                error: TError extends Record<string, unknown>
+                  ? TError[keyof TError]
+                  : TError;
+              }
+          ) & {
+            request: Request;
+            response: Response;
+          }
+    >;
+
+export interface ClientOptions {
+  baseUrl?: string;
+  responseStyle?: ResponseStyle;
+  throwOnError?: boolean;
+}
+
+type MethodFn = <
+  TData = unknown,
+  TError = unknown,
+  ThrowOnError extends boolean = false,
+  TResponseStyle extends ResponseStyle = 'fields',
+>(
+  options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, 'method'>,
+) => RequestResult<TData, TError, ThrowOnError, TResponseStyle>;
+
+type SseFn = <
+  TData = unknown,
+  TError = unknown,
+  ThrowOnError extends boolean = false,
+  TResponseStyle extends ResponseStyle = 'fields',
+>(
+  options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, 'method'>,
+) => Promise<ServerSentEventsResult<TData, TError>>;
+
+type RequestFn = <
+  TData = unknown,
+  TError = unknown,
+  ThrowOnError extends boolean = false,
+  TResponseStyle extends ResponseStyle = 'fields',
+>(
+  options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, 'method'> &
+    Pick<
+      Required<RequestOptions<TData, TResponseStyle, ThrowOnError>>,
+      'method'
+    >,
+) => RequestResult<TData, TError, ThrowOnError, TResponseStyle>;
+
+type BuildUrlFn = <
+  TData extends {
+    body?: unknown;
+    path?: Record<string, unknown>;
+    query?: Record<string, unknown>;
+    url: string;
+  },
+>(
+  options: TData & Options<TData>,
+) => string;
+
+export type Client = CoreClient<
+  RequestFn,
+  Config,
+  MethodFn,
+  BuildUrlFn,
+  SseFn
+> & {
+  interceptors: Middleware<Request, Response, unknown, ResolvedRequestOptions>;
+};
+
+/**
+ * The `createClientConfig()` function will be called on client initialization
+ * and the returned object will become the client's initial configuration.
+ *
+ * You may want to initialize your client this way instead of calling
+ * `setConfig()`. This is useful for example if you're using Next.js
+ * to ensure your client always has the correct values.
+ */
+export type CreateClientConfig<T extends ClientOptions = ClientOptions> = (
+  override?: Config<ClientOptions & T>,
+) => Config<Required<ClientOptions> & T>;
+
+export interface TDataShape {
+  body?: unknown;
+  headers?: unknown;
+  path?: unknown;
+  query?: unknown;
+  url: string;
+}
+
+type OmitKeys<T, K> = Pick<T, Exclude<keyof T, K>>;
+
+export type Options<
+  TData extends TDataShape = TDataShape,
+  ThrowOnError extends boolean = boolean,
+  TResponse = unknown,
+  TResponseStyle extends ResponseStyle = 'fields',
+> = OmitKeys<
+  RequestOptions<TResponse, TResponseStyle, ThrowOnError>,
+  'body' | 'path' | 'query' | 'url'
+> &
+  ([TData] extends [never] ? unknown : Omit<TData, 'url'>);

packages/store-client/src/client/client/utils.gen.ts

@@ -0,0 +1,332 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import { getAuthToken } from '../core/auth.gen';
+import type { QuerySerializerOptions } from '../core/bodySerializer.gen';
+import { jsonBodySerializer } from '../core/bodySerializer.gen';
+import {
+  serializeArrayParam,
+  serializeObjectParam,
+  serializePrimitiveParam,
+} from '../core/pathSerializer.gen';
+import { getUrl } from '../core/utils.gen';
+import type { Client, ClientOptions, Config, RequestOptions } from './types.gen';
+
+export const createQuerySerializer = <T = unknown>({
+  parameters = {},
+  ...args
+}: QuerySerializerOptions = {}) => {
+  const querySerializer = (queryParams: T) => {
+    const search: string[] = [];
+    if (queryParams && typeof queryParams === 'object') {
+      for (const name in queryParams) {
+        const value = queryParams[name];
+
+        if (value === undefined || value === null) {
+          continue;
+        }
+
+        const options = parameters[name] || args;
+
+        if (Array.isArray(value)) {
+          const serializedArray = serializeArrayParam({
+            allowReserved: options.allowReserved,
+            explode: true,
+            name,
+            style: 'form',
+            value,
+            ...options.array,
+          });
+          if (serializedArray) search.push(serializedArray);
+        } else if (typeof value === 'object') {
+          const serializedObject = serializeObjectParam({
+            allowReserved: options.allowReserved,
+            explode: true,
+            name,
+            style: 'deepObject',
+            value: value as Record<string, unknown>,
+            ...options.object,
+          });
+          if (serializedObject) search.push(serializedObject);
+        } else {
+          const serializedPrimitive = serializePrimitiveParam({
+            allowReserved: options.allowReserved,
+            name,
+            value: value as string,
+          });
+          if (serializedPrimitive) search.push(serializedPrimitive);
+        }
+      }
+    }
+    return search.join('&');
+  };
+  return querySerializer;
+};
+
+/**
+ * Infers parseAs value from provided Content-Type header.
+ */
+export const getParseAs = (
+  contentType: string | null,
+): Exclude<Config['parseAs'], 'auto'> => {
+  if (!contentType) {
+    // If no Content-Type header is provided, the best we can do is return the raw response body,
+    // which is effectively the same as the 'stream' option.
+    return 'stream';
+  }
+
+  const cleanContent = contentType.split(';')[0]?.trim();
+
+  if (!cleanContent) {
+    return;
+  }
+
+  if (
+    cleanContent.startsWith('application/json') ||
+    cleanContent.endsWith('+json')
+  ) {
+    return 'json';
+  }
+
+  if (cleanContent === 'multipart/form-data') {
+    return 'formData';
+  }
+
+  if (
+    ['application/', 'audio/', 'image/', 'video/'].some((type) =>
+      cleanContent.startsWith(type),
+    )
+  ) {
+    return 'blob';
+  }
+
+  if (cleanContent.startsWith('text/')) {
+    return 'text';
+  }
+
+  return;
+};
+
+const checkForExistence = (
+  options: Pick<RequestOptions, 'auth' | 'query'> & {
+    headers: Headers;
+  },
+  name?: string,
+): boolean => {
+  if (!name) {
+    return false;
+  }
+  if (
+    options.headers.has(name) ||
+    options.query?.[name] ||
+    options.headers.get('Cookie')?.includes(`${name}=`)
+  ) {
+    return true;
+  }
+  return false;
+};
+
+export const setAuthParams = async ({
+  security,
+  ...options
+}: Pick<Required<RequestOptions>, 'security'> &
+  Pick<RequestOptions, 'auth' | 'query'> & {
+    headers: Headers;
+  }) => {
+  for (const auth of security) {
+    if (checkForExistence(options, auth.name)) {
+      continue;
+    }
+
+    const token = await getAuthToken(auth, options.auth);
+
+    if (!token) {
+      continue;
+    }
+
+    const name = auth.name ?? 'Authorization';
+
+    switch (auth.in) {
+      case 'query':
+        if (!options.query) {
+          options.query = {};
+        }
+        options.query[name] = token;
+        break;
+      case 'cookie':
+        options.headers.append('Cookie', `${name}=${token}`);
+        break;
+      case 'header':
+      default:
+        options.headers.set(name, token);
+        break;
+    }
+  }
+};
+
+export const buildUrl: Client['buildUrl'] = (options) =>
+  getUrl({
+    baseUrl: options.baseUrl as string,
+    path: options.path,
+    query: options.query,
+    querySerializer:
+      typeof options.querySerializer === 'function'
+        ? options.querySerializer
+        : createQuerySerializer(options.querySerializer),
+    url: options.url,
+  });
+
+export const mergeConfigs = (a: Config, b: Config): Config => {
+  const config = { ...a, ...b };
+  if (config.baseUrl?.endsWith('/')) {
+    config.baseUrl = config.baseUrl.substring(0, config.baseUrl.length - 1);
+  }
+  config.headers = mergeHeaders(a.headers, b.headers);
+  return config;
+};
+
+const headersEntries = (headers: Headers): Array<[string, string]> => {
+  const entries: Array<[string, string]> = [];
+  headers.forEach((value, key) => {
+    entries.push([key, value]);
+  });
+  return entries;
+};
+
+export const mergeHeaders = (
+  ...headers: Array<Required<Config>['headers'] | undefined>
+): Headers => {
+  const mergedHeaders = new Headers();
+  for (const header of headers) {
+    if (!header) {
+      continue;
+    }
+
+    const iterator =
+      header instanceof Headers
+        ? headersEntries(header)
+        : Object.entries(header);
+
+    for (const [key, value] of iterator) {
+      if (value === null) {
+        mergedHeaders.delete(key);
+      } else if (Array.isArray(value)) {
+        for (const v of value) {
+          mergedHeaders.append(key, v as string);
+        }
+      } else if (value !== undefined) {
+        // assume object headers are meant to be JSON stringified, i.e. their
+        // content value in OpenAPI specification is 'application/json'
+        mergedHeaders.set(
+          key,
+          typeof value === 'object' ? JSON.stringify(value) : (value as string),
+        );
+      }
+    }
+  }
+  return mergedHeaders;
+};
+
+type ErrInterceptor<Err, Res, Req, Options> = (
+  error: Err,
+  response: Res,
+  request: Req,
+  options: Options,
+) => Err | Promise<Err>;
+
+type ReqInterceptor<Req, Options> = (
+  request: Req,
+  options: Options,
+) => Req | Promise<Req>;
+
+type ResInterceptor<Res, Req, Options> = (
+  response: Res,
+  request: Req,
+  options: Options,
+) => Res | Promise<Res>;
+
+class Interceptors<Interceptor> {
+  fns: Array<Interceptor | null> = [];
+
+  clear(): void {
+    this.fns = [];
+  }
+
+  eject(id: number | Interceptor): void {
+    const index = this.getInterceptorIndex(id);
+    if (this.fns[index]) {
+      this.fns[index] = null;
+    }
+  }
+
+  exists(id: number | Interceptor): boolean {
+    const index = this.getInterceptorIndex(id);
+    return Boolean(this.fns[index]);
+  }
+
+  getInterceptorIndex(id: number | Interceptor): number {
+    if (typeof id === 'number') {
+      return this.fns[id] ? id : -1;
+    }
+    return this.fns.indexOf(id);
+  }
+
+  update(
+    id: number | Interceptor,
+    fn: Interceptor,
+  ): number | Interceptor | false {
+    const index = this.getInterceptorIndex(id);
+    if (this.fns[index]) {
+      this.fns[index] = fn;
+      return id;
+    }
+    return false;
+  }
+
+  use(fn: Interceptor): number {
+    this.fns.push(fn);
+    return this.fns.length - 1;
+  }
+}
+
+export interface Middleware<Req, Res, Err, Options> {
+  error: Interceptors<ErrInterceptor<Err, Res, Req, Options>>;
+  request: Interceptors<ReqInterceptor<Req, Options>>;
+  response: Interceptors<ResInterceptor<Res, Req, Options>>;
+}
+
+export const createInterceptors = <Req, Res, Err, Options>(): Middleware<
+  Req,
+  Res,
+  Err,
+  Options
+> => ({
+  error: new Interceptors<ErrInterceptor<Err, Res, Req, Options>>(),
+  request: new Interceptors<ReqInterceptor<Req, Options>>(),
+  response: new Interceptors<ResInterceptor<Res, Req, Options>>(),
+});
+
+const defaultQuerySerializer = createQuerySerializer({
+  allowReserved: false,
+  array: {
+    explode: true,
+    style: 'form',
+  },
+  object: {
+    explode: true,
+    style: 'deepObject',
+  },
+});
+
+const defaultHeaders = {
+  'Content-Type': 'application/json',
+};
+
+export const createConfig = <T extends ClientOptions = ClientOptions>(
+  override: Config<Omit<ClientOptions, keyof T> & T> = {},
+): Config<Omit<ClientOptions, keyof T> & T> => ({
+  ...jsonBodySerializer,
+  headers: defaultHeaders,
+  parseAs: 'auto',
+  querySerializer: defaultQuerySerializer,
+  ...override,
+});

packages/store-client/src/client/core/auth.gen.ts

@@ -0,0 +1,42 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+export type AuthToken = string | undefined;
+
+export interface Auth {
+  /**
+   * Which part of the request do we use to send the auth?
+   *
+   * @default 'header'
+   */
+  in?: 'header' | 'query' | 'cookie';
+  /**
+   * Header or query parameter name.
+   *
+   * @default 'Authorization'
+   */
+  name?: string;
+  scheme?: 'basic' | 'bearer';
+  type: 'apiKey' | 'http';
+}
+
+export const getAuthToken = async (
+  auth: Auth,
+  callback: ((auth: Auth) => Promise<AuthToken> | AuthToken) | AuthToken,
+): Promise<string | undefined> => {
+  const token =
+    typeof callback === 'function' ? await callback(auth) : callback;
+
+  if (!token) {
+    return;
+  }
+
+  if (auth.scheme === 'bearer') {
+    return `Bearer ${token}`;
+  }
+
+  if (auth.scheme === 'basic') {
+    return `Basic ${btoa(token)}`;
+  }
+
+  return token;
+};

packages/store-client/src/client/core/bodySerializer.gen.ts

@@ -0,0 +1,100 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type {
+  ArrayStyle,
+  ObjectStyle,
+  SerializerOptions,
+} from './pathSerializer.gen';
+
+export type QuerySerializer = (query: Record<string, unknown>) => string;
+
+export type BodySerializer = (body: any) => any;
+
+type QuerySerializerOptionsObject = {
+  allowReserved?: boolean;
+  array?: Partial<SerializerOptions<ArrayStyle>>;
+  object?: Partial<SerializerOptions<ObjectStyle>>;
+};
+
+export type QuerySerializerOptions = QuerySerializerOptionsObject & {
+  /**
+   * Per-parameter serialization overrides. When provided, these settings
+   * override the global array/object settings for specific parameter names.
+   */
+  parameters?: Record<string, QuerySerializerOptionsObject>;
+};
+
+const serializeFormDataPair = (
+  data: FormData,
+  key: string,
+  value: unknown,
+): void => {
+  if (typeof value === 'string' || value instanceof Blob) {
+    data.append(key, value);
+  } else if (value instanceof Date) {
+    data.append(key, value.toISOString());
+  } else {
+    data.append(key, JSON.stringify(value));
+  }
+};
+
+const serializeUrlSearchParamsPair = (
+  data: URLSearchParams,
+  key: string,
+  value: unknown,
+): void => {
+  if (typeof value === 'string') {
+    data.append(key, value);
+  } else {
+    data.append(key, JSON.stringify(value));
+  }
+};
+
+export const formDataBodySerializer = {
+  bodySerializer: <T extends Record<string, any> | Array<Record<string, any>>>(
+    body: T,
+  ): FormData => {
+    const data = new FormData();
+
+    Object.entries(body).forEach(([key, value]) => {
+      if (value === undefined || value === null) {
+        return;
+      }
+      if (Array.isArray(value)) {
+        value.forEach((v) => serializeFormDataPair(data, key, v));
+      } else {
+        serializeFormDataPair(data, key, value);
+      }
+    });
+
+    return data;
+  },
+};
+
+export const jsonBodySerializer = {
+  bodySerializer: <T>(body: T): string =>
+    JSON.stringify(body, (_key, value) =>
+      typeof value === 'bigint' ? value.toString() : value,
+    ),
+};
+
+export const urlSearchParamsBodySerializer = {
+  bodySerializer: <T extends Record<string, any> | Array<Record<string, any>>>(
+    body: T,
+  ): string => {
+    const data = new URLSearchParams();
+
+    Object.entries(body).forEach(([key, value]) => {
+      if (value === undefined || value === null) {
+        return;
+      }
+      if (Array.isArray(value)) {
+        value.forEach((v) => serializeUrlSearchParamsPair(data, key, v));
+      } else {
+        serializeUrlSearchParamsPair(data, key, value);
+      }
+    });
+
+    return data.toString();
+  },
+};

packages/store-client/src/client/core/params.gen.ts

@@ -0,0 +1,176 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+type Slot = 'body' | 'headers' | 'path' | 'query';
+
+export type Field =
+  | {
+      in: Exclude<Slot, 'body'>;
+      /**
+       * Field name. This is the name we want the user to see and use.
+       */
+      key: string;
+      /**
+       * Field mapped name. This is the name we want to use in the request.
+       * If omitted, we use the same value as `key`.
+       */
+      map?: string;
+    }
+  | {
+      in: Extract<Slot, 'body'>;
+      /**
+       * Key isn't required for bodies.
+       */
+      key?: string;
+      map?: string;
+    }
+  | {
+      /**
+       * Field name. This is the name we want the user to see and use.
+       */
+      key: string;
+      /**
+       * Field mapped name. This is the name we want to use in the request.
+       * If `in` is omitted, `map` aliases `key` to the transport layer.
+       */
+      map: Slot;
+    };
+
+export interface Fields {
+  allowExtra?: Partial<Record<Slot, boolean>>;
+  args?: ReadonlyArray<Field>;
+}
+
+export type FieldsConfig = ReadonlyArray<Field | Fields>;
+
+const extraPrefixesMap: Record<string, Slot> = {
+  $body_: 'body',
+  $headers_: 'headers',
+  $path_: 'path',
+  $query_: 'query',
+};
+const extraPrefixes = Object.entries(extraPrefixesMap);
+
+type KeyMap = Map<
+  string,
+  | {
+      in: Slot;
+      map?: string;
+    }
+  | {
+      in?: never;
+      map: Slot;
+    }
+>;
+
+const buildKeyMap = (fields: FieldsConfig, map?: KeyMap): KeyMap => {
+  if (!map) {
+    map = new Map();
+  }
+
+  for (const config of fields) {
+    if ('in' in config) {
+      if (config.key) {
+        map.set(config.key, {
+          in: config.in,
+          map: config.map,
+        });
+      }
+    } else if ('key' in config) {
+      map.set(config.key, {
+        map: config.map,
+      });
+    } else if (config.args) {
+      buildKeyMap(config.args, map);
+    }
+  }
+
+  return map;
+};
+
+interface Params {
+  body: unknown;
+  headers: Record<string, unknown>;
+  path: Record<string, unknown>;
+  query: Record<string, unknown>;
+}
+
+const stripEmptySlots = (params: Params) => {
+  for (const [slot, value] of Object.entries(params)) {
+    if (value && typeof value === 'object' && !Object.keys(value).length) {
+      delete params[slot as Slot];
+    }
+  }
+};
+
+export const buildClientParams = (
+  args: ReadonlyArray<unknown>,
+  fields: FieldsConfig,
+) => {
+  const params: Params = {
+    body: {},
+    headers: {},
+    path: {},
+    query: {},
+  };
+
+  const map = buildKeyMap(fields);
+
+  let config: FieldsConfig[number] | undefined;
+
+  for (const [index, arg] of args.entries()) {
+    if (fields[index]) {
+      config = fields[index];
+    }
+
+    if (!config) {
+      continue;
+    }
+
+    if ('in' in config) {
+      if (config.key) {
+        const field = map.get(config.key)!;
+        const name = field.map || config.key;
+        if (field.in) {
+          (params[field.in] as Record<string, unknown>)[name] = arg;
+        }
+      } else {
+        params.body = arg;
+      }
+    } else {
+      for (const [key, value] of Object.entries(arg ?? {})) {
+        const field = map.get(key);
+
+        if (field) {
+          if (field.in) {
+            const name = field.map || key;
+            (params[field.in] as Record<string, unknown>)[name] = value;
+          } else {
+            params[field.map] = value;
+          }
+        } else {
+          const extra = extraPrefixes.find(([prefix]) =>
+            key.startsWith(prefix),
+          );
+
+          if (extra) {
+            const [prefix, slot] = extra;
+            (params[slot] as Record<string, unknown>)[
+              key.slice(prefix.length)
+            ] = value;
+          } else if ('allowExtra' in config && config.allowExtra) {
+            for (const [slot, allowed] of Object.entries(config.allowExtra)) {
+              if (allowed) {
+                (params[slot as Slot] as Record<string, unknown>)[key] = value;
+                break;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  stripEmptySlots(params);
+
+  return params;
+};

packages/store-client/src/client/core/pathSerializer.gen.ts

@@ -0,0 +1,181 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+interface SerializeOptions<T>
+  extends SerializePrimitiveOptions,
+    SerializerOptions<T> {}
+
+interface SerializePrimitiveOptions {
+  allowReserved?: boolean;
+  name: string;
+}
+
+export interface SerializerOptions<T> {
+  /**
+   * @default true
+   */
+  explode: boolean;
+  style: T;
+}
+
+export type ArrayStyle = 'form' | 'spaceDelimited' | 'pipeDelimited';
+export type ArraySeparatorStyle = ArrayStyle | MatrixStyle;
+type MatrixStyle = 'label' | 'matrix' | 'simple';
+export type ObjectStyle = 'form' | 'deepObject';
+type ObjectSeparatorStyle = ObjectStyle | MatrixStyle;
+
+interface SerializePrimitiveParam extends SerializePrimitiveOptions {
+  value: string;
+}
+
+export const separatorArrayExplode = (style: ArraySeparatorStyle) => {
+  switch (style) {
+    case 'label':
+      return '.';
+    case 'matrix':
+      return ';';
+    case 'simple':
+      return ',';
+    default:
+      return '&';
+  }
+};
+
+export const separatorArrayNoExplode = (style: ArraySeparatorStyle) => {
+  switch (style) {
+    case 'form':
+      return ',';
+    case 'pipeDelimited':
+      return '|';
+    case 'spaceDelimited':
+      return '%20';
+    default:
+      return ',';
+  }
+};
+
+export const separatorObjectExplode = (style: ObjectSeparatorStyle) => {
+  switch (style) {
+    case 'label':
+      return '.';
+    case 'matrix':
+      return ';';
+    case 'simple':
+      return ',';
+    default:
+      return '&';
+  }
+};
+
+export const serializeArrayParam = ({
+  allowReserved,
+  explode,
+  name,
+  style,
+  value,
+}: SerializeOptions<ArraySeparatorStyle> & {
+  value: unknown[];
+}) => {
+  if (!explode) {
+    const joinedValues = (
+      allowReserved ? value : value.map((v) => encodeURIComponent(v as string))
+    ).join(separatorArrayNoExplode(style));
+    switch (style) {
+      case 'label':
+        return `.${joinedValues}`;
+      case 'matrix':
+        return `;${name}=${joinedValues}`;
+      case 'simple':
+        return joinedValues;
+      default:
+        return `${name}=${joinedValues}`;
+    }
+  }
+
+  const separator = separatorArrayExplode(style);
+  const joinedValues = value
+    .map((v) => {
+      if (style === 'label' || style === 'simple') {
+        return allowReserved ? v : encodeURIComponent(v as string);
+      }
+
+      return serializePrimitiveParam({
+        allowReserved,
+        name,
+        value: v as string,
+      });
+    })
+    .join(separator);
+  return style === 'label' || style === 'matrix'
+    ? separator + joinedValues
+    : joinedValues;
+};
+
+export const serializePrimitiveParam = ({
+  allowReserved,
+  name,
+  value,
+}: SerializePrimitiveParam) => {
+  if (value === undefined || value === null) {
+    return '';
+  }
+
+  if (typeof value === 'object') {
+    throw new Error(
+      'Deeply-nested arrays/objects aren’t supported. Provide your own `querySerializer()` to handle these.',
+    );
+  }
+
+  return `${name}=${allowReserved ? value : encodeURIComponent(value)}`;
+};
+
+export const serializeObjectParam = ({
+  allowReserved,
+  explode,
+  name,
+  style,
+  value,
+  valueOnly,
+}: SerializeOptions<ObjectSeparatorStyle> & {
+  value: Record<string, unknown> | Date;
+  valueOnly?: boolean;
+}) => {
+  if (value instanceof Date) {
+    return valueOnly ? value.toISOString() : `${name}=${value.toISOString()}`;
+  }
+
+  if (style !== 'deepObject' && !explode) {
+    let values: string[] = [];
+    Object.entries(value).forEach(([key, v]) => {
+      values = [
+        ...values,
+        key,
+        allowReserved ? (v as string) : encodeURIComponent(v as string),
+      ];
+    });
+    const joinedValues = values.join(',');
+    switch (style) {
+      case 'form':
+        return `${name}=${joinedValues}`;
+      case 'label':
+        return `.${joinedValues}`;
+      case 'matrix':
+        return `;${name}=${joinedValues}`;
+      default:
+        return joinedValues;
+    }
+  }
+
+  const separator = separatorObjectExplode(style);
+  const joinedValues = Object.entries(value)
+    .map(([key, v]) =>
+      serializePrimitiveParam({
+        allowReserved,
+        name: style === 'deepObject' ? `${name}[${key}]` : key,
+        value: v as string,
+      }),
+    )
+    .join(separator);
+  return style === 'label' || style === 'matrix'
+    ? separator + joinedValues
+    : joinedValues;
+};

packages/store-client/src/client/core/queryKeySerializer.gen.ts

@@ -0,0 +1,136 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+/**
+ * JSON-friendly union that mirrors what Pinia Colada can hash.
+ */
+export type JsonValue =
+  | null
+  | string
+  | number
+  | boolean
+  | JsonValue[]
+  | { [key: string]: JsonValue };
+
+/**
+ * Replacer that converts non-JSON values (bigint, Date, etc.) to safe substitutes.
+ */
+export const queryKeyJsonReplacer = (_key: string, value: unknown) => {
+  if (
+    value === undefined ||
+    typeof value === 'function' ||
+    typeof value === 'symbol'
+  ) {
+    return undefined;
+  }
+  if (typeof value === 'bigint') {
+    return value.toString();
+  }
+  if (value instanceof Date) {
+    return value.toISOString();
+  }
+  return value;
+};
+
+/**
+ * Safely stringifies a value and parses it back into a JsonValue.
+ */
+export const stringifyToJsonValue = (input: unknown): JsonValue | undefined => {
+  try {
+    const json = JSON.stringify(input, queryKeyJsonReplacer);
+    if (json === undefined) {
+      return undefined;
+    }
+    return JSON.parse(json) as JsonValue;
+  } catch {
+    return undefined;
+  }
+};
+
+/**
+ * Detects plain objects (including objects with a null prototype).
+ */
+const isPlainObject = (value: unknown): value is Record<string, unknown> => {
+  if (value === null || typeof value !== 'object') {
+    return false;
+  }
+  const prototype = Object.getPrototypeOf(value as object);
+  return prototype === Object.prototype || prototype === null;
+};
+
+/**
+ * Turns URLSearchParams into a sorted JSON object for deterministic keys.
+ */
+const serializeSearchParams = (params: URLSearchParams): JsonValue => {
+  const entries = Array.from(params.entries()).sort(([a], [b]) =>
+    a.localeCompare(b),
+  );
+  const result: Record<string, JsonValue> = {};
+
+  for (const [key, value] of entries) {
+    const existing = result[key];
+    if (existing === undefined) {
+      result[key] = value;
+      continue;
+    }
+
+    if (Array.isArray(existing)) {
+      (existing as string[]).push(value);
+    } else {
+      result[key] = [existing, value];
+    }
+  }
+
+  return result;
+};
+
+/**
+ * Normalizes any accepted value into a JSON-friendly shape for query keys.
+ */
+export const serializeQueryKeyValue = (
+  value: unknown,
+): JsonValue | undefined => {
+  if (value === null) {
+    return null;
+  }
+
+  if (
+    typeof value === 'string' ||
+    typeof value === 'number' ||
+    typeof value === 'boolean'
+  ) {
+    return value;
+  }
+
+  if (
+    value === undefined ||
+    typeof value === 'function' ||
+    typeof value === 'symbol'
+  ) {
+    return undefined;
+  }
+
+  if (typeof value === 'bigint') {
+    return value.toString();
+  }
+
+  if (value instanceof Date) {
+    return value.toISOString();
+  }
+
+  if (Array.isArray(value)) {
+    return stringifyToJsonValue(value);
+  }
+
+  if (
+    typeof URLSearchParams !== 'undefined' &&
+    value instanceof URLSearchParams
+  ) {
+    return serializeSearchParams(value);
+  }
+
+  if (isPlainObject(value)) {
+    return stringifyToJsonValue(value);
+  }
+
+  return undefined;
+};

packages/store-client/src/client/core/serverSentEvents.gen.ts

@@ -0,0 +1,266 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { Config } from './types.gen';
+
+export type ServerSentEventsOptions<TData = unknown> = Omit<
+  RequestInit,
+  'method'
+> &
+  Pick<Config, 'method' | 'responseTransformer' | 'responseValidator'> & {
+    /**
+     * Fetch API implementation. You can use this option to provide a custom
+     * fetch instance.
+     *
+     * @default globalThis.fetch
+     */
+    fetch?: typeof fetch;
+    /**
+     * Implementing clients can call request interceptors inside this hook.
+     */
+    onRequest?: (url: string, init: RequestInit) => Promise<Request>;
+    /**
+     * Callback invoked when a network or parsing error occurs during streaming.
+     *
+     * This option applies only if the endpoint returns a stream of events.
+     *
+     * @param error The error that occurred.
+     */
+    onSseError?: (error: unknown) => void;
+    /**
+     * Callback invoked when an event is streamed from the server.
+     *
+     * This option applies only if the endpoint returns a stream of events.
+     *
+     * @param event Event streamed from the server.
+     * @returns Nothing (void).
+     */
+    onSseEvent?: (event: StreamEvent<TData>) => void;
+    serializedBody?: RequestInit['body'];
+    /**
+     * Default retry delay in milliseconds.
+     *
+     * This option applies only if the endpoint returns a stream of events.
+     *
+     * @default 3000
+     */
+    sseDefaultRetryDelay?: number;
+    /**
+     * Maximum number of retry attempts before giving up.
+     */
+    sseMaxRetryAttempts?: number;
+    /**
+     * Maximum retry delay in milliseconds.
+     *
+     * Applies only when exponential backoff is used.
+     *
+     * This option applies only if the endpoint returns a stream of events.
+     *
+     * @default 30000
+     */
+    sseMaxRetryDelay?: number;
+    /**
+     * Optional sleep function for retry backoff.
+     *
+     * Defaults to using `setTimeout`.
+     */
+    sseSleepFn?: (ms: number) => Promise<void>;
+    url: string;
+  };
+
+export interface StreamEvent<TData = unknown> {
+  data: TData;
+  event?: string;
+  id?: string;
+  retry?: number;
+}
+
+export type ServerSentEventsResult<
+  TData = unknown,
+  TReturn = void,
+  TNext = unknown,
+> = {
+  stream: AsyncGenerator<
+    TData extends Record<string, unknown> ? TData[keyof TData] : TData,
+    TReturn,
+    TNext
+  >;
+};
+
+export const createSseClient = <TData = unknown>({
+  onRequest,
+  onSseError,
+  onSseEvent,
+  responseTransformer,
+  responseValidator,
+  sseDefaultRetryDelay,
+  sseMaxRetryAttempts,
+  sseMaxRetryDelay,
+  sseSleepFn,
+  url,
+  ...options
+}: ServerSentEventsOptions): ServerSentEventsResult<TData> => {
+  let lastEventId: string | undefined;
+
+  const sleep =
+    sseSleepFn ??
+    ((ms: number) => new Promise((resolve) => setTimeout(resolve, ms)));
+
+  const createStream = async function* () {
+    let retryDelay: number = sseDefaultRetryDelay ?? 3000;
+    let attempt = 0;
+    const signal = options.signal ?? new AbortController().signal;
+
+    while (true) {
+      if (signal.aborted) break;
+
+      attempt++;
+
+      const headers =
+        options.headers instanceof Headers
+          ? options.headers
+          : new Headers(options.headers as Record<string, string> | undefined);
+
+      if (lastEventId !== undefined) {
+        headers.set('Last-Event-ID', lastEventId);
+      }
+
+      try {
+        const requestInit: RequestInit = {
+          redirect: 'follow',
+          ...options,
+          body: options.serializedBody,
+          headers,
+          signal,
+        };
+        let request = new Request(url, requestInit);
+        if (onRequest) {
+          request = await onRequest(url, requestInit);
+        }
+        // fetch must be assigned here, otherwise it would throw the error:
+        // TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation
+        const _fetch = options.fetch ?? globalThis.fetch;
+        const response = await _fetch(request);
+
+        if (!response.ok)
+          throw new Error(
+            `SSE failed: ${response.status} ${response.statusText}`,
+          );
+
+        if (!response.body) throw new Error('No body in SSE response');
+
+        const reader = response.body
+          .pipeThrough(new TextDecoderStream())
+          .getReader();
+
+        let buffer = '';
+
+        const abortHandler = () => {
+          try {
+            reader.cancel();
+          } catch {
+            // noop
+          }
+        };
+
+        signal.addEventListener('abort', abortHandler);
+
+        try {
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            buffer += value;
+            // Normalize line endings: CRLF -> LF, then CR -> LF
+            buffer = buffer.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+
+            const chunks = buffer.split('\n\n');
+            buffer = chunks.pop() ?? '';
+
+            for (const chunk of chunks) {
+              const lines = chunk.split('\n');
+              const dataLines: Array<string> = [];
+              let eventName: string | undefined;
+
+              for (const line of lines) {
+                if (line.startsWith('data:')) {
+                  dataLines.push(line.replace(/^data:\s*/, ''));
+                } else if (line.startsWith('event:')) {
+                  eventName = line.replace(/^event:\s*/, '');
+                } else if (line.startsWith('id:')) {
+                  lastEventId = line.replace(/^id:\s*/, '');
+                } else if (line.startsWith('retry:')) {
+                  const parsed = Number.parseInt(
+                    line.replace(/^retry:\s*/, ''),
+                    10,
+                  );
+                  if (!Number.isNaN(parsed)) {
+                    retryDelay = parsed;
+                  }
+                }
+              }
+
+              let data: unknown;
+              let parsedJson = false;
+
+              if (dataLines.length) {
+                const rawData = dataLines.join('\n');
+                try {
+                  data = JSON.parse(rawData);
+                  parsedJson = true;
+                } catch {
+                  data = rawData;
+                }
+              }
+
+              if (parsedJson) {
+                if (responseValidator) {
+                  await responseValidator(data);
+                }
+
+                if (responseTransformer) {
+                  data = await responseTransformer(data);
+                }
+              }
+
+              onSseEvent?.({
+                data,
+                event: eventName,
+                id: lastEventId,
+                retry: retryDelay,
+              });
+
+              if (dataLines.length) {
+                yield data as any;
+              }
+            }
+          }
+        } finally {
+          signal.removeEventListener('abort', abortHandler);
+          reader.releaseLock();
+        }
+
+        break; // exit loop on normal completion
+      } catch (error) {
+        // connection failed or aborted; retry after delay
+        onSseError?.(error);
+
+        if (
+          sseMaxRetryAttempts !== undefined &&
+          attempt >= sseMaxRetryAttempts
+        ) {
+          break; // stop after firing error
+        }
+
+        // exponential backoff: double retry each attempt, cap at 30s
+        const backoff = Math.min(
+          retryDelay * 2 ** (attempt - 1),
+          sseMaxRetryDelay ?? 30000,
+        );
+        await sleep(backoff);
+      }
+    }
+  };
+
+  const stream = createStream();
+
+  return { stream };
+};

packages/store-client/src/client/core/types.gen.ts

@@ -0,0 +1,118 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { Auth, AuthToken } from './auth.gen';
+import type {
+  BodySerializer,
+  QuerySerializer,
+  QuerySerializerOptions,
+} from './bodySerializer.gen';
+
+export type HttpMethod =
+  | 'connect'
+  | 'delete'
+  | 'get'
+  | 'head'
+  | 'options'
+  | 'patch'
+  | 'post'
+  | 'put'
+  | 'trace';
+
+export type Client<
+  RequestFn = never,
+  Config = unknown,
+  MethodFn = never,
+  BuildUrlFn = never,
+  SseFn = never,
+> = {
+  /**
+   * Returns the final request URL.
+   */
+  buildUrl: BuildUrlFn;
+  getConfig: () => Config;
+  request: RequestFn;
+  setConfig: (config: Config) => Config;
+} & {
+  [K in HttpMethod]: MethodFn;
+} & ([SseFn] extends [never]
+    ? { sse?: never }
+    : { sse: { [K in HttpMethod]: SseFn } });
+
+export interface Config {
+  /**
+   * Auth token or a function returning auth token. The resolved value will be
+   * added to the request payload as defined by its `security` array.
+   */
+  auth?: ((auth: Auth) => Promise<AuthToken> | AuthToken) | AuthToken;
+  /**
+   * A function for serializing request body parameter. By default,
+   * {@link JSON.stringify()} will be used.
+   */
+  bodySerializer?: BodySerializer | null;
+  /**
+   * An object containing any HTTP headers that you want to pre-populate your
+   * `Headers` object with.
+   *
+   * {@link https://developer.mozilla.org/docs/Web/API/Headers/Headers#init See more}
+   */
+  headers?:
+    | RequestInit['headers']
+    | Record<
+        string,
+        | string
+        | number
+        | boolean
+        | (string | number | boolean)[]
+        | null
+        | undefined
+        | unknown
+      >;
+  /**
+   * The request method.
+   *
+   * {@link https://developer.mozilla.org/docs/Web/API/fetch#method See more}
+   */
+  method?: Uppercase<HttpMethod>;
+  /**
+   * A function for serializing request query parameters. By default, arrays
+   * will be exploded in form style, objects will be exploded in deepObject
+   * style, and reserved characters are percent-encoded.
+   *
+   * This method will have no effect if the native `paramsSerializer()` Axios
+   * API function is used.
+   *
+   * {@link https://swagger.io/docs/specification/serialization/#query View examples}
+   */
+  querySerializer?: QuerySerializer | QuerySerializerOptions;
+  /**
+   * A function validating request data. This is useful if you want to ensure
+   * the request conforms to the desired shape, so it can be safely sent to
+   * the server.
+   */
+  requestValidator?: (data: unknown) => Promise<unknown>;
+  /**
+   * A function transforming response data before it's returned. This is useful
+   * for post-processing data, e.g. converting ISO strings into Date objects.
+   */
+  responseTransformer?: (data: unknown) => Promise<unknown>;
+  /**
+   * A function validating response data. This is useful if you want to ensure
+   * the response conforms to the desired shape, so it can be safely passed to
+   * the transformers and returned to the user.
+   */
+  responseValidator?: (data: unknown) => Promise<unknown>;
+}
+
+type IsExactlyNeverOrNeverUndefined<T> = [T] extends [never]
+  ? true
+  : [T] extends [never | undefined]
+    ? [undefined] extends [T]
+      ? false
+      : true
+    : false;
+
+export type OmitNever<T extends Record<string, unknown>> = {
+  [K in keyof T as IsExactlyNeverOrNeverUndefined<T[K]> extends true
+    ? never
+    : K]: T[K];
+};

packages/store-client/src/client/core/utils.gen.ts

@@ -0,0 +1,143 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { BodySerializer, QuerySerializer } from './bodySerializer.gen';
+import {
+  type ArraySeparatorStyle,
+  serializeArrayParam,
+  serializeObjectParam,
+  serializePrimitiveParam,
+} from './pathSerializer.gen';
+
+export interface PathSerializer {
+  path: Record<string, unknown>;
+  url: string;
+}
+
+export const PATH_PARAM_RE = /\{[^{}]+\}/g;
+
+export const defaultPathSerializer = ({ path, url: _url }: PathSerializer) => {
+  let url = _url;
+  const matches = _url.match(PATH_PARAM_RE);
+  if (matches) {
+    for (const match of matches) {
+      let explode = false;
+      let name = match.substring(1, match.length - 1);
+      let style: ArraySeparatorStyle = 'simple';
+
+      if (name.endsWith('*')) {
+        explode = true;
+        name = name.substring(0, name.length - 1);
+      }
+
+      if (name.startsWith('.')) {
+        name = name.substring(1);
+        style = 'label';
+      } else if (name.startsWith(';')) {
+        name = name.substring(1);
+        style = 'matrix';
+      }
+
+      const value = path[name];
+
+      if (value === undefined || value === null) {
+        continue;
+      }
+
+      if (Array.isArray(value)) {
+        url = url.replace(
+          match,
+          serializeArrayParam({ explode, name, style, value }),
+        );
+        continue;
+      }
+
+      if (typeof value === 'object') {
+        url = url.replace(
+          match,
+          serializeObjectParam({
+            explode,
+            name,
+            style,
+            value: value as Record<string, unknown>,
+            valueOnly: true,
+          }),
+        );
+        continue;
+      }
+
+      if (style === 'matrix') {
+        url = url.replace(
+          match,
+          `;${serializePrimitiveParam({
+            name,
+            value: value as string,
+          })}`,
+        );
+        continue;
+      }
+
+      const replaceValue = encodeURIComponent(
+        style === 'label' ? `.${value as string}` : (value as string),
+      );
+      url = url.replace(match, replaceValue);
+    }
+  }
+  return url;
+};
+
+export const getUrl = ({
+  baseUrl,
+  path,
+  query,
+  querySerializer,
+  url: _url,
+}: {
+  baseUrl?: string;
+  path?: Record<string, unknown>;
+  query?: Record<string, unknown>;
+  querySerializer: QuerySerializer;
+  url: string;
+}) => {
+  const pathUrl = _url.startsWith('/') ? _url : `/${_url}`;
+  let url = (baseUrl ?? '') + pathUrl;
+  if (path) {
+    url = defaultPathSerializer({ path, url });
+  }
+  let search = query ? querySerializer(query) : '';
+  if (search.startsWith('?')) {
+    search = search.substring(1);
+  }
+  if (search) {
+    url += `?${search}`;
+  }
+  return url;
+};
+
+export function getValidRequestBody(options: {
+  body?: unknown;
+  bodySerializer?: BodySerializer | null;
+  serializedBody?: unknown;
+}) {
+  const hasBody = options.body !== undefined;
+  const isSerializedBody = hasBody && options.bodySerializer;
+
+  if (isSerializedBody) {
+    if ('serializedBody' in options) {
+      const hasSerializedBody =
+        options.serializedBody !== undefined && options.serializedBody !== '';
+
+      return hasSerializedBody ? options.serializedBody : null;
+    }
+
+    // not all clients implement a serializedBody property (i.e. client-axios)
+    return options.body !== '' ? options.body : null;
+  }
+
+  // plain/text body
+  if (hasBody) {
+    return options.body;
+  }
+
+  // no body was provided
+  return undefined;
+}

packages/store-client/src/client/index.ts

@@ -1,3 +1,4 @@
 // This file is auto-generated by @hey-api/openapi-ts
-export * from './sdk.gen';
-export * from './types.gen';
+
+export { getNodesByUserBySystemByNodeId_byVersionJson, getNodesByUserBySystemByNodeId_byVersionWasm, getNodesByUserBySystemByNodeIdJson, getNodesByUserBySystemByNodeIdVersionsJson, getNodesByUserBySystemByNodeIdWasm, getNodesByUserBySystemJson, getNodesByUserJson, getUsersByUserIdJson, getUsersUsersJson, type Options, postNodes } from './sdk.gen';
+export type { ClientOptions, GetNodesByUserBySystemByNodeId_byVersionJsonData, GetNodesByUserBySystemByNodeId_byVersionJsonResponse, GetNodesByUserBySystemByNodeId_byVersionJsonResponses, GetNodesByUserBySystemByNodeId_byVersionWasmData, GetNodesByUserBySystemByNodeId_byVersionWasmResponses, GetNodesByUserBySystemByNodeIdJsonData, GetNodesByUserBySystemByNodeIdJsonResponse, GetNodesByUserBySystemByNodeIdJsonResponses, GetNodesByUserBySystemByNodeIdVersionsJsonData, GetNodesByUserBySystemByNodeIdVersionsJsonResponse, GetNodesByUserBySystemByNodeIdVersionsJsonResponses, GetNodesByUserBySystemByNodeIdWasmData, GetNodesByUserBySystemByNodeIdWasmResponses, GetNodesByUserBySystemJsonData, GetNodesByUserBySystemJsonResponse, GetNodesByUserBySystemJsonResponses, GetNodesByUserJsonData, GetNodesByUserJsonResponse, GetNodesByUserJsonResponses, GetUsersByUserIdJsonData, GetUsersByUserIdJsonResponse, GetUsersByUserIdJsonResponses, GetUsersUsersJsonData, GetUsersUsersJsonResponse, GetUsersUsersJsonResponses, NodeDefinition, NodeInput, PostNodesData, PostNodesResponse, PostNodesResponses, User } from './types.gen';

packages/store-client/src/client/sdk.gen.ts

@@ -1,55 +1,39 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
-import { createClient, createConfig, type OptionsLegacyParser } from '@hey-api/client-fetch';
-import type { GetV1NodesByUserJsonData, GetV1NodesByUserJsonError, GetV1NodesByUserJsonResponse, GetV1NodesByUserBySystemJsonData, GetV1NodesByUserBySystemJsonError, GetV1NodesByUserBySystemJsonResponse, GetV1NodesByUserBySystemByNodeIdby-.+jsonData, GetV1NodesByUserBySystemByNodeIdby-.+jsonError, GetV1NodesByUserBySystemByNodeIdby-.+jsonResponse, GetV1NodesByUserBySystemByNodeIdby-.+WasmData, GetV1NodesByUserBySystemByNodeIdby-.+WasmError, GetV1NodesByUserBySystemByNodeIdby-.+WasmResponse, PostV1NodesError, PostV1NodesResponse, GetV1UsersUsersJsonError, GetV1UsersUsersJsonResponse, GetV1UsersByUserIdJsonData, GetV1UsersByUserIdJsonError, GetV1UsersByUserIdJsonResponse } from './types.gen';
+import type { Client, Options as Options2, TDataShape } from './client';
+import { client } from './client.gen';
+import type { GetNodesByUserBySystemByNodeId_byVersionJsonData, GetNodesByUserBySystemByNodeId_byVersionJsonResponses, GetNodesByUserBySystemByNodeId_byVersionWasmData, GetNodesByUserBySystemByNodeId_byVersionWasmResponses, GetNodesByUserBySystemByNodeIdJsonData, GetNodesByUserBySystemByNodeIdJsonResponses, GetNodesByUserBySystemByNodeIdVersionsJsonData, GetNodesByUserBySystemByNodeIdVersionsJsonResponses, GetNodesByUserBySystemByNodeIdWasmData, GetNodesByUserBySystemByNodeIdWasmResponses, GetNodesByUserBySystemJsonData, GetNodesByUserBySystemJsonResponses, GetNodesByUserJsonData, GetNodesByUserJsonResponses, GetUsersByUserIdJsonData, GetUsersByUserIdJsonResponses, GetUsersUsersJsonData, GetUsersUsersJsonResponses, PostNodesData, PostNodesResponses } from './types.gen';
 
-export const client = createClient(createConfig());
-
-export const getV1NodesByUserJson = <ThrowOnError extends boolean = false>(options: OptionsLegacyParser<GetV1NodesByUserJsonData, ThrowOnError>) => {
-    return (options?.client ?? client).get<GetV1NodesByUserJsonResponse, GetV1NodesByUserJsonError, ThrowOnError>({
-        ...options,
-        url: '/v1/nodes/{user}.json'
-    });
+export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean> = Options2<TData, ThrowOnError> & {
+    /**
+     * You can provide a client instance returned by `createClient()` instead of
+     * individual options. This might be also useful if you want to implement a
+     * custom client.
+     */
+    client?: Client;
+    /**
+     * You can pass arbitrary values through the `meta` object. This can be
+     * used to access values that aren't defined as part of the SDK function.
+     */
+    meta?: Record<string, unknown>;
 };
 
-export const getV1NodesByUserBySystemJson = <ThrowOnError extends boolean = false>(options: OptionsLegacyParser<GetV1NodesByUserBySystemJsonData, ThrowOnError>) => {
-    return (options?.client ?? client).get<GetV1NodesByUserBySystemJsonResponse, GetV1NodesByUserBySystemJsonError, ThrowOnError>({
-        ...options,
-        url: '/v1/nodes/{user}/{system}.json'
-    });
-};
+export const postNodes = <ThrowOnError extends boolean = false>(options?: Options<PostNodesData, ThrowOnError>) => (options?.client ?? client).post<PostNodesResponses, unknown, ThrowOnError>({ url: '/nodes', ...options });
 
-export const getV1NodesByUserBySystemByNodeIdby-.+Json = <ThrowOnError extends boolean = false>(options: OptionsLegacyParser<GetV1NodesByUserBySystemByNodeIdby-.+jsonData, ThrowOnError>) => {
-    return (options?.client ?? client).get<GetV1NodesByUserBySystemByNodeIdby-.+jsonResponse, GetV1NodesByUserBySystemByNodeIdby-.+jsonError, ThrowOnError>({
-        ...options,
-        url: '/v1/nodes/{user}/{system}/{nodeId}{.+\\.json}'
-    });
-};
+export const getNodesByUserJson = <ThrowOnError extends boolean = false>(options?: Options<GetNodesByUserJsonData, ThrowOnError>) => (options?.client ?? client).get<GetNodesByUserJsonResponses, unknown, ThrowOnError>({ url: '/nodes/{user}.json', ...options });
 
-export const getV1NodesByUserBySystemByNodeIdby-.+Wasm = <ThrowOnError extends boolean = false>(options: OptionsLegacyParser<GetV1NodesByUserBySystemByNodeIdby-.+WasmData, ThrowOnError>) => {
-    return (options?.client ?? client).get<GetV1NodesByUserBySystemByNodeIdby-.+WasmResponse, GetV1NodesByUserBySystemByNodeIdby-.+WasmError, ThrowOnError>({
-        ...options,
-        url: '/v1/nodes/{user}/{system}/{nodeId}{.+\\.wasm}'
-    });
-};
+export const getNodesByUserBySystemJson = <ThrowOnError extends boolean = false>(options: Options<GetNodesByUserBySystemJsonData, ThrowOnError>) => (options.client ?? client).get<GetNodesByUserBySystemJsonResponses, unknown, ThrowOnError>({ url: '/nodes/{user}/{system}.json', ...options });
 
-export const postV1Nodes = <ThrowOnError extends boolean = false>(options?: OptionsLegacyParser<unknown, ThrowOnError>) => {
-    return (options?.client ?? client).post<PostV1NodesResponse, PostV1NodesError, ThrowOnError>({
-        ...options,
-        url: '/v1/nodes'
-    });
-};
+export const getNodesByUserBySystemByNodeIdJson = <ThrowOnError extends boolean = false>(options: Options<GetNodesByUserBySystemByNodeIdJsonData, ThrowOnError>) => (options.client ?? client).get<GetNodesByUserBySystemByNodeIdJsonResponses, unknown, ThrowOnError>({ url: '/nodes/{user}/{system}/{nodeId}.json', ...options });
 
-export const getV1UsersUsersJson = <ThrowOnError extends boolean = false>(options?: OptionsLegacyParser<unknown, ThrowOnError>) => {
-    return (options?.client ?? client).get<GetV1UsersUsersJsonResponse, GetV1UsersUsersJsonError, ThrowOnError>({
-        ...options,
-        url: '/v1/users/users.json'
-    });
-};
+export const getNodesByUserBySystemByNodeId_byVersionJson = <ThrowOnError extends boolean = false>(options: Options<GetNodesByUserBySystemByNodeId_byVersionJsonData, ThrowOnError>) => (options.client ?? client).get<GetNodesByUserBySystemByNodeId_byVersionJsonResponses, unknown, ThrowOnError>({ url: '/nodes/{user}/{system}/{nodeId}@{version}.json', ...options });
 
-export const getV1UsersByUserIdJson = <ThrowOnError extends boolean = false>(options?: OptionsLegacyParser<GetV1UsersByUserIdJsonData, ThrowOnError>) => {
-    return (options?.client ?? client).get<GetV1UsersByUserIdJsonResponse, GetV1UsersByUserIdJsonError, ThrowOnError>({
-        ...options,
-        url: '/v1/users/{userId}.json'
-    });
-};
+export const getNodesByUserBySystemByNodeIdVersionsJson = <ThrowOnError extends boolean = false>(options: Options<GetNodesByUserBySystemByNodeIdVersionsJsonData, ThrowOnError>) => (options.client ?? client).get<GetNodesByUserBySystemByNodeIdVersionsJsonResponses, unknown, ThrowOnError>({ url: '/nodes/{user}/{system}/{nodeId}/versions.json', ...options });
+
+export const getNodesByUserBySystemByNodeIdWasm = <ThrowOnError extends boolean = false>(options: Options<GetNodesByUserBySystemByNodeIdWasmData, ThrowOnError>) => (options.client ?? client).get<GetNodesByUserBySystemByNodeIdWasmResponses, unknown, ThrowOnError>({ url: '/nodes/{user}/{system}/{nodeId}.wasm', ...options });
+
+export const getNodesByUserBySystemByNodeId_byVersionWasm = <ThrowOnError extends boolean = false>(options: Options<GetNodesByUserBySystemByNodeId_byVersionWasmData, ThrowOnError>) => (options.client ?? client).get<GetNodesByUserBySystemByNodeId_byVersionWasmResponses, unknown, ThrowOnError>({ url: '/nodes/{user}/{system}/{nodeId}@{version}.wasm', ...options });
+
+export const getUsersUsersJson = <ThrowOnError extends boolean = false>(options?: Options<GetUsersUsersJsonData, ThrowOnError>) => (options?.client ?? client).get<GetUsersUsersJsonResponses, unknown, ThrowOnError>({ url: '/users/users.json', ...options });
+
+export const getUsersByUserIdJson = <ThrowOnError extends boolean = false>(options?: Options<GetUsersByUserIdJsonData, ThrowOnError>) => (options?.client ?? client).get<GetUsersByUserIdJsonResponses, unknown, ThrowOnError>({ url: '/users/{userId}.json', ...options });

packages/store-client/src/client/types.gen.ts

@@ -1,15 +1,7 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
-export type NodeDefinition = {
-    id: string;
-    inputs?: {
-        [key: string]: NodeInput;
-    };
-    outputs?: Array<(string)>;
-    meta?: {
-        description?: string;
-        title?: string;
-    };
+export type ClientOptions = {
+    baseUrl: `${string}://${string}` | (string & {});
 };
 
 export type NodeInput = {
@@ -18,7 +10,7 @@ export type NodeInput = {
     setting?: string;
     label?: string;
     description?: string;
-    accepts?: Array<(string)>;
+    accepts?: Array<string>;
     hidden?: boolean;
     type: 'seed';
     value?: number;
@@ -28,7 +20,7 @@ export type NodeInput = {
     setting?: string;
     label?: string;
     description?: string;
-    accepts?: Array<(string)>;
+    accepts?: Array<string>;
     hidden?: boolean;
     type: 'boolean';
     value?: boolean;
@@ -38,7 +30,7 @@ export type NodeInput = {
     setting?: string;
     label?: string;
     description?: string;
-    accepts?: Array<(string)>;
+    accepts?: Array<string>;
     hidden?: boolean;
     type: 'float';
     element?: 'slider';
@@ -52,7 +44,7 @@ export type NodeInput = {
     setting?: string;
     label?: string;
     description?: string;
-    accepts?: Array<(string)>;
+    accepts?: Array<string>;
     hidden?: boolean;
     type: 'integer';
     element?: 'slider';
@@ -65,10 +57,10 @@ export type NodeInput = {
     setting?: string;
     label?: string;
     description?: string;
-    accepts?: Array<(string)>;
+    accepts?: Array<string>;
     hidden?: boolean;
     type: 'select';
-    options?: Array<(string)>;
+    options?: Array<string>;
     value?: number;
 } | {
     internal?: boolean;
@@ -76,17 +68,27 @@ export type NodeInput = {
     setting?: string;
     label?: string;
     description?: string;
-    accepts?: Array<(string)>;
+    accepts?: Array<string>;
     hidden?: boolean;
-    type: 'vec3';
-    value?: Array<(number)>;
+    type: 'seed';
+    value?: number;
 } | {
     internal?: boolean;
     external?: boolean;
     setting?: string;
     label?: string;
     description?: string;
-    accepts?: Array<(string)>;
+    accepts?: Array<string>;
+    hidden?: boolean;
+    type: 'vec3';
+    value?: Array<number>;
+} | {
+    internal?: boolean;
+    external?: boolean;
+    setting?: string;
+    label?: string;
+    description?: string;
+    accepts?: Array<string>;
     hidden?: boolean;
     type: 'geometry';
 } | {
@@ -95,79 +97,209 @@ export type NodeInput = {
     setting?: string;
     label?: string;
     description?: string;
-    accepts?: Array<(string)>;
+    accepts?: Array<string>;
     hidden?: boolean;
     type: 'path';
 };
 
-export type type = 'seed';
-
-export type element = 'slider';
+export type NodeDefinition = {
+    id: string;
+    inputs?: {
+        [key: string]: NodeInput;
+    };
+    outputs?: Array<string>;
+    meta?: {
+        description?: string;
+        title?: string;
+    };
+};
 
 export type User = {
     id: string;
     name: string;
 };
 
-export type GetV1NodesByUserJsonData = {
-    path: {
-        user: string;
-    };
+export type PostNodesData = {
+    body?: never;
+    path?: never;
+    query?: never;
+    url: '/nodes';
 };
 
-export type GetV1NodesByUserJsonResponse = (Array<NodeDefinition>);
+export type PostNodesResponses = {
+    /**
+     * Create a single node
+     */
+    200: NodeDefinition;
+};
 
-export type GetV1NodesByUserJsonError = unknown;
+export type PostNodesResponse = PostNodesResponses[keyof PostNodesResponses];
 
-export type GetV1NodesByUserBySystemJsonData = {
+export type GetNodesByUserJsonData = {
+    body?: never;
+    path?: {
+        user?: string;
+    };
+    query?: never;
+    url: '/nodes/{user}.json';
+};
+
+export type GetNodesByUserJsonResponses = {
+    /**
+     * Retrieve nodes for a user
+     */
+    200: Array<NodeDefinition>;
+};
+
+export type GetNodesByUserJsonResponse = GetNodesByUserJsonResponses[keyof GetNodesByUserJsonResponses];
+
+export type GetNodesByUserBySystemJsonData = {
+    body?: never;
     path: {
+        user: string;
         system?: string;
-        user: string;
     };
+    query?: never;
+    url: '/nodes/{user}/{system}.json';
 };
 
-export type GetV1NodesByUserBySystemJsonResponse = (Array<NodeDefinition>);
+export type GetNodesByUserBySystemJsonResponses = {
+    /**
+     * Retrieve nodes for a system
+     */
+    200: Array<NodeDefinition>;
+};
 
-export type GetV1NodesByUserBySystemJsonError = unknown;
+export type GetNodesByUserBySystemJsonResponse = GetNodesByUserBySystemJsonResponses[keyof GetNodesByUserBySystemJsonResponses];
 
-export type GetV1NodesByUserBySystemByNodeIdby-.+jsonData = {
+export type GetNodesByUserBySystemByNodeIdJsonData = {
+    body?: never;
     path: {
-        nodeId: string;
-        system: string;
         user: string;
+        system: string;
+        nodeId?: string;
     };
+    query?: never;
+    url: '/nodes/{user}/{system}/{nodeId}.json';
 };
 
-export type GetV1NodesByUserBySystemByNodeIdby-.+jsonResponse = (NodeDefinition);
+export type GetNodesByUserBySystemByNodeIdJsonResponses = {
+    /**
+     * Retrieve a single node definition
+     */
+    200: NodeDefinition;
+};
 
-export type GetV1NodesByUserBySystemByNodeIdby-.+jsonError = unknown;
+export type GetNodesByUserBySystemByNodeIdJsonResponse = GetNodesByUserBySystemByNodeIdJsonResponses[keyof GetNodesByUserBySystemByNodeIdJsonResponses];
 
-export type GetV1NodesByUserBySystemByNodeIdby-.+WasmData = {
+export type GetNodesByUserBySystemByNodeId_byVersionJsonData = {
+    body?: never;
     path: {
-        nodeId: string;
-        system: string;
         user: string;
+        system: string;
+        nodeId: string;
+        version?: string;
     };
+    query?: never;
+    url: '/nodes/{user}/{system}/{nodeId}@{version}.json';
 };
 
-export type GetV1NodesByUserBySystemByNodeIdby-.+WasmResponse = (unknown);
+export type GetNodesByUserBySystemByNodeId_byVersionJsonResponses = {
+    /**
+     * Retrieve a single node definition
+     */
+    200: NodeDefinition;
+};
 
-export type GetV1NodesByUserBySystemByNodeIdby-.+WasmError = unknown;
+export type GetNodesByUserBySystemByNodeId_byVersionJsonResponse = GetNodesByUserBySystemByNodeId_byVersionJsonResponses[keyof GetNodesByUserBySystemByNodeId_byVersionJsonResponses];
 
-export type PostV1NodesResponse = (NodeDefinition);
+export type GetNodesByUserBySystemByNodeIdVersionsJsonData = {
+    body?: never;
+    path: {
+        user: string;
+        system: string;
+        nodeId: string;
+    };
+    query?: never;
+    url: '/nodes/{user}/{system}/{nodeId}/versions.json';
+};
 
-export type PostV1NodesError = unknown;
+export type GetNodesByUserBySystemByNodeIdVersionsJsonResponses = {
+    /**
+     * Retrieve a single node definition
+     */
+    200: Array<NodeDefinition>;
+};
 
-export type GetV1UsersUsersJsonResponse = (Array<User>);
+export type GetNodesByUserBySystemByNodeIdVersionsJsonResponse = GetNodesByUserBySystemByNodeIdVersionsJsonResponses[keyof GetNodesByUserBySystemByNodeIdVersionsJsonResponses];
 
-export type GetV1UsersUsersJsonError = unknown;
+export type GetNodesByUserBySystemByNodeIdWasmData = {
+    body?: never;
+    path: {
+        user: string;
+        system: string;
+        nodeId?: string;
+    };
+    query?: never;
+    url: '/nodes/{user}/{system}/{nodeId}.wasm';
+};
 
-export type GetV1UsersByUserIdJsonData = {
+export type GetNodesByUserBySystemByNodeIdWasmResponses = {
+    /**
+     * Retrieve a node's WASM file
+     */
+    200: unknown;
+};
+
+export type GetNodesByUserBySystemByNodeId_byVersionWasmData = {
+    body?: never;
+    path: {
+        user: string;
+        system: string;
+        nodeId: string;
+        version?: string;
+    };
+    query?: never;
+    url: '/nodes/{user}/{system}/{nodeId}@{version}.wasm';
+};
+
+export type GetNodesByUserBySystemByNodeId_byVersionWasmResponses = {
+    /**
+     * Retrieve a node's WASM file
+     */
+    200: unknown;
+};
+
+export type GetUsersUsersJsonData = {
+    body?: never;
+    path?: never;
+    query?: never;
+    url: '/users/users.json';
+};
+
+export type GetUsersUsersJsonResponses = {
+    /**
+     * Retrieve a single node definition
+     */
+    200: Array<User>;
+};
+
+export type GetUsersUsersJsonResponse = GetUsersUsersJsonResponses[keyof GetUsersUsersJsonResponses];
+
+export type GetUsersByUserIdJsonData = {
+    body?: never;
     path?: {
         userId?: string;
     };
+    query?: never;
+    url: '/users/{userId}.json';
 };
 
-export type GetV1UsersByUserIdJsonResponse = (User);
+export type GetUsersByUserIdJsonResponses = {
+    /**
+     * Retrieve a single node definition
+     */
+    200: User;
+};
 
-export type GetV1UsersByUserIdJsonError = unknown;
+export type GetUsersByUserIdJsonResponse = GetUsersByUserIdJsonResponses[keyof GetUsersByUserIdJsonResponses];

packages/types/package.json

@@ -13,6 +13,6 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "zod": "^4.1.12"
+    "zod": "^4.3.5"
   }
 }

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

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;

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>

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;

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"
   }
 }

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 './inputs/Checkbox.svelte';
+	import Float from './inputs/Float.svelte';
+	import Integer from './inputs/Integer.svelte';
+	import Select from './inputs/Select.svelte';
 
 	import type { NodeInput } from '@nodarium/types';
-	import Vec3 from './elements/Vec3.svelte';
+	import Vec3 from './inputs/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}

packages/ui/src/lib/app.css

@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 /* fira-code-300 - latin */
 @font-face {
   font-display: swap;
@@ -63,11 +65,9 @@ html {
 }
 
 body {
-  overflow: hidden;
-
-
   color: var(--text-color);
   background-color: var(--layer-0);
+  margin: 0;
 }
 
 body * {
@@ -140,10 +140,6 @@ html.theme-dracula {
   --connection: #6272A4;
 }
 
-body {
-  margin: 0;
-}
-
 button {
   background-color: var(--layer-2);
   border: 1px solid var(--outline);

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>

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" />

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" />

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'] }} />

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" />

packages/ui/src/lib/index.ts

@@ -1,16 +1,12 @@
-// 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 "./inputs/Float.svelte"
+export { default as Integer } from "./inputs/Integer.svelte"
+export { default as Select } from "./inputs/Select.svelte"
+export { default as Checkbox } from "./inputs/Checkbox.svelte"
+export { default as Vec3 } from "./inputs/Vec3.svelte";
 
+export { default as Details } from "./Details.svelte"
 export { default as ShortCut } from "./ShortCut.svelte";
+
+import Input from './Input.svelte';
+export default Input;

packages/ui/src/lib/inputs/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>

packages/ui/src/lib/inputs/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}

packages/ui/src/routes/+page.svelte

@@ -1,29 +1,64 @@
 <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);
+
+	const themes = ['light', 'solarized', 'catppuccin', 'high-contrast', 'nord', 'dracula'];
+	let themeIndex = $state(0);
+	$effect(() => {
+		const classList = document.documentElement.classList;
+		for (const c of classList) {
+			if (c.startsWith('theme-')) document.documentElement.classList.remove(c);
+		}
+		document.documentElement.classList.add(`theme-${themes[themeIndex]}`);
+	});
 </script>
 
-<main>
-	<section>
-		<h3>Integer {intValue}</h3>
+<main class="flex flex-col gap-8 py-8">
+	<div class="flex gap-4">
+		<h1 class="text-4xl">@nodarium/ui</h1>
+		<Select bind:value={themeIndex} options={themes}></Select>
+	</div>
+
+	<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>

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>

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}']
   }

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"
   }
 }

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);
 });

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();
-}