ci: fix lockfile

remove warnings, migrate deprecated (dispatch to prop), include min max switch from float input, include esc/enter from float input, include precision, include partial styling from float input

.dprint.jsonc

@@ -0,0 +1,59 @@
+{
+  "$schema": "https://dprint.dev/schemas/v0.json",
+  "indentWidth": 2,
+  "typescript": {
+    // https://dprint.dev/plugins/typescript/config/
+    "quoteStyle": "preferSingle",
+    "trailingCommas": "never"
+  },
+  "json": {
+  },
+  "markdown": {
+  },
+  "toml": {
+  },
+  "dockerfile": {
+  },
+  "ruff": {
+  },
+  "jupyter": {
+  },
+  "malva": {
+  },
+  "markup": {
+  },
+  "yaml": {
+  },
+  "graphql": {
+  },
+  "exec": {
+    "cwd": "${configDir}",
+    "commands": [{
+      "command": "rustfmt --edition 2024",
+      "exts": ["rs"],
+      // add the config files for automatic cache invalidation when the rust version or rustfmt config changes
+      "cacheKeyFiles": [
+        "rustfmt.toml",
+        "rust-toolchain.toml"
+      ]
+    }]
+  },
+  "excludes": [
+    "**/node_modules",
+    "**/*-lock.json"
+  ],
+  "plugins": [
+    "https://plugins.dprint.dev/typescript-0.95.13.wasm",
+    "https://plugins.dprint.dev/json-0.21.1.wasm",
+    "https://plugins.dprint.dev/markdown-0.20.0.wasm",
+    "https://plugins.dprint.dev/toml-0.7.0.wasm",
+    "https://plugins.dprint.dev/dockerfile-0.3.3.wasm",
+    "https://plugins.dprint.dev/ruff-0.6.11.wasm",
+    "https://plugins.dprint.dev/jupyter-0.2.1.wasm",
+    "https://plugins.dprint.dev/g-plane/malva-v0.15.1.wasm",
+    "https://plugins.dprint.dev/g-plane/markup_fmt-v0.25.3.wasm",
+    "https://plugins.dprint.dev/g-plane/pretty_yaml-v0.5.1.wasm",
+    "https://plugins.dprint.dev/g-plane/pretty_graphql-v0.2.3.wasm",
+    "https://plugins.dprint.dev/exec-0.6.0.json@a054130d458f124f9b5c91484833828950723a5af3f8ff2bd1523bd47b83b364"
+  ]
+}

.envrc

@@ -0,0 +1 @@
+use flake

.gitignore

@@ -4,3 +4,4 @@ node_modules/
 # Added by cargo
 
 /target
+.direnv/

app/.env

@@ -0,0 +1 @@
+PUBLIC_ANALYTIC_SCRIPT=""

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",
+    "@sveltejs/kit": "^2.50.0",
-    "@threlte/core": "8.3.0",
+    "@tailwindcss/vite": "^4.1.18",
-    "@threlte/extras": "9.7.0",
+    "@threlte/core": "8.3.1",
-    "@types/three": "^0.181.0",
+    "@threlte/extras": "9.7.1",
-    "@unocss/reset": "^66.5.9",
     "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",
+    "@types/three": "^0.182.0",
-    "svelte": "^5.43.14",
+    "svelte": "^5.46.4",
-    "svelte-check": "^4.3.4",
+    "svelte-check": "^4.3.5",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "unocss": "^66.5.9",
+    "vite": "^7.3.1",
-    "vite": "^7.2.4",
     "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/app.html

@@ -5,7 +5,6 @@
   <meta charset="utf-8" />
   <link rel="icon" href="%sveltekit.assets%/svelte.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script defer src="https://umami.max-richter.dev/script.js" data-website-id="585c442b-0524-4874-8955-f9853b44b17e"></script>
   %sveltekit.head%
   <title>Nodes</title>
   <script>

app/src/lib/config.ts

@@ -0,0 +1,2 @@
+import { PUBLIC_ANALYTIC_SCRIPT } from "$env/static/public";
+export const ANALYTIC_SCRIPT = PUBLIC_ANALYTIC_SCRIPT;

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,28 +97,7 @@ 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) {
-        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]
@@ -109,13 +105,16 @@ export class GraphState {
       delete node.state.x;
       delete node.state.y;
     }
-        this.graph.edges = [...this.graph.edges];
+
+    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`);
+      }
     } 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.cameraPosition[0] = this.state.mousePosition[0] -
-      this.state.mousePosition[0] -
       (this.state.mousePosition[0] - this.state.cameraPosition[0]) /
-      zoomRatio,
+      zoomRatio;
-      this.state.mousePosition[1] -
+    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(
+        graphState.cameraPosition[0] = lerp(camX, average[0], ease(a));
-          lerp(camX, average[0], ease(a)),
+        graphState.cameraPosition[1] = lerp(camY, average[1], ease(a));
-          lerp(camY, average[1], ease(a)),
+        graphState.cameraPosition[2] = lerp(camZ, 2, ease(a))
-          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";
@@ -42,8 +42,8 @@
 </script>
 
 <T.Mesh
-  position.x={node.position[0] + 10}
+  position.x={(node.state.x ?? node.position[0]) + 10}
-  position.z={node.position[1] + height / 2}
+  position.z={(node.state.y ?? node.position[1]) + height / 2}
   position.y={0.8}
   rotation.x={-Math.PI / 2}
   bind:ref={meshRef}

app/src/lib/graph-interface/node/NodeHTML.svelte

@@ -2,7 +2,7 @@
   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;
 

app/src/lib/graph-interface/node/NodeHeader.svelte

@@ -1,5 +1,5 @@
 <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 } from "@nodarium/types";
 

app/src/lib/graph-interface/node/NodeParameter.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import type { NodeInput, NodeInstance } from "@nodarium/types";
-  import { createNodePath } from "../helpers/index.js";
+  import { createNodePath } from "../helpers";
   import NodeInputEl from "./NodeInput.svelte";
-  import { getGraphManager, getGraphState } from "../graph/state.svelte.js";
+  import { getGraphManager, getGraphState } from "../graph-state.svelte";
 
   type Props = {
     node: NodeInstance;
@@ -73,8 +73,14 @@
   {#key id && graphId}
     <div class="content" class:disabled={graph?.inputSockets?.has(socketId)}>
       {#if inputType.label !== ""}
-        <label for={elementId}>{input.label || id}</label>
+        <label for={elementId} title={input.description}
+          >{input.label || id}</label
+        >
       {/if}
+      <span
+        class="absolute i-[tabler--help-circle] size-4 block top-2 right-2 opacity-30"
+        title={JSON.stringify(input, null, 2)}
+      ></span>
       {#if inputType.external !== true}
         <NodeInputEl {graph} {elementId} bind:node {input} {id} />
       {/if}
@@ -181,9 +187,6 @@
   .content.disabled {
     opacity: 0.2;
   }
-  .content.disabled > * {
-    pointer-events: none;
-  }
 
   .disabled svg path {
     d: var(--hover-path-disabled) !important;

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) {
+  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)}
+  onmouseup={() => (mouseDown = false)}
-  on:mousemove={handleMouseMove}
+  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/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;
+  let activeStore = $state(0);
-  export let activeId: Writable<string>;
+  let { activeId }: { activeId: string } = $props();
-  $: [activeUser, activeCollection, activeNode] = $activeId.split(`/`);
+  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={() => {
+        onclick={() => {
-          $activeId = activeUser;
+          activeId = activeUser;
         }}
       >
         {activeUser}
       </button>
       {#if activeNode}
         <button
-          on:click={() => {
+          onclick={() => {
-            $activeId = `${activeUser}/${activeCollection}`;
+            activeId = `${activeUser}/${activeCollection}`;
           }}
         >
           {activeCollection}

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<
+  const [activeUser, activeCollection, activeNode] = $derived(
-  //   `${string}` | `${string}/${string}` | `${string}/${string}/${string}`
+    activeId.split(`/`),
-  // >("nodes.store.activeId", "");
+  );
-
-  $: [activeUser, activeCollection, activeNode] = $activeId.split(`/`);
 </script>
 
 {#if showBreadCrumbs}
@@ -27,8 +24,8 @@
     {:then users}
       {#each users as user}
         <button
-          on:click={() => {
+          onclick={() => {
-            $activeId = user.id;
+            activeId = user.id;
           }}>{user.id}</button
         >
       {/each}
@@ -41,8 +38,8 @@
     {:then user}
       {#each user.collections as collection}
         <button
-          on:click={() => {
+          onclick={() => {
-            $activeId = collection.id;
+            activeId = collection.id;
           }}
         >
           {collection.id.split(`/`)[1]}

app/src/lib/performance/BarSplit.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
-  export let labels: string[] = [];
+  type Props = {
-  export let values: number[] = [];
+    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>
@@ -10,7 +14,10 @@
 <div class="wrapper">
   <div class="bars">
     {#each values as value, i}
-      <div class="bar bg-{colors[i]}" style="width: {(value / total) * 100}%;">
+      <div
+        class="bar bg-{colors[i]}-400"
+        style="width: {(value / total) * 100}%;"
+      >
         {Math.round(value)}ms
       </div>
     {/each}
@@ -18,12 +25,11 @@
 
   <div class="labels mt-2">
     {#each values as _label, i}
-      <div class="text-{colors[i]}">{labels[i]}</div>
+      <div class="text-{colors[i]}-400">{labels[i]}</div>
     {/each}
   </div>
-
   <span
-    class="bg-red bg-green bg-yellow bg-blue text-red text-green text-yellow text-blue"
+    class="bg-red-400 bg-green-400 bg-blue-400 text-red-400 text-green-400 text-blue-400"
   ></span>
 </div>
 

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";
+  let {
-  export let title = "Performance";
+    points,
-  export let max: number | undefined = undefined;
+    type = "ms",
-  export let min: number | undefined = undefined;
+    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 (internalMax !== undefined) {
-      if (m < 1) {
+      if (internalMax < 1) {
-        return Math.floor(m * 100) / 100;
+        return Math.floor(internalMax * 100) / 100;
       }
-      if (m < 10) {
+      if (internalMax < 10) {
-        return Math.floor(m * 10) / 10;
+        return Math.floor(internalMax * 10) / 10;
       }
-      return Math.floor(m);
+      return Math.floor(internalMax);
     }
 
     return 1;
-  }
+  });
 
-  function constructPath() {
+  const path = $derived(
-    max = max !== undefined ? max : Math.max(...points);
+    points
-    min = min !== undefined ? min : Math.min(...points);
-    const mi = min as number;
-    const ma = max as number;
-    return 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="min">{Math.floor(internalMin || 0)}{type}</span>
-  <span class="max">{getMax(max)}{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={path} />
-      <polyline vector-effect="non-scaling-stroke" points={constructPath()} />
-    {/key}
   </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 activeType = $state("total");
-  let showAverage = true;
+  let showAverage = $state(true);
-
-  function getAverage(key: string) {
-    return (
-      data
-        .map((run) => run[key]?.[0])
-        .filter((v) => v !== undefined)
-        .reduce((acc, run) => acc + run, 0) / data.length
-    );
-  }
 
   function round(v: number) {
     if (v < 1) {
@@ -30,45 +20,15 @@
     return Math.floor(v);
   }
 
-  function getAverages() {
+  function getTitle(t: string) {
-    let lastRun = data.at(-1);
+    if (t.includes("/")) {
-    if (!lastRun) return {};
+      return `Node ${t.split("/").slice(-1).join("/")}`;
-    return Object.keys(lastRun).reduce(
-      (acc, key) => {
-        acc[key] = getAverage(key);
-        return acc;
-      },
-      {} as Record<string, number>,
-    );
     }
 
-  function getLast(key: string) {
+    return t
-    return data.at(-1)?.[key]?.[0] || 0;
+      .split("-")
-  }
+      .map((v) => v[0].toUpperCase() + v.slice(1))
-
+      .join(" ");
-  function getLasts() {
-    return data.at(-1) || {};
-  }
-
-  function getTotalPerformance(onlyLast = false) {
-    if (onlyLast) {
-      return (
-        getLast("runtime") +
-        getLast("update-geometries") +
-        getLast("worker-transfer")
-      );
-    }
-    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);
   }
 
   const viewerKeys = [
@@ -78,10 +38,53 @@
     "split-result",
   ];
 
-  function getPerformanceData(onlyLast: boolean = false) {
+  // --- Small helpers that query `data` directly ---
-    let data = onlyLast ? getLasts() : getAverages();
+  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) {
+  const nodePerformanceData = $derived.by(() => {
-    let data = onlyLast ? getLasts() : getAverages();
+    const source = showAverage ? averages : lasts;
-
+    return Object.entries(source)
-    return Object.entries(data)
       .filter(([key]) => key.startsWith("node/"))
       .sort((a, b) => b[1] - a[1]);
-  }
+  });
 
-  function getViewerPerformanceData(onlyLast: boolean = false) {
+  const viewerPerformanceData = $derived.by(() => {
-    let data = onlyLast ? getLasts() : getAverages();
+    const source = showAverage ? averages : lasts;
-    return Object.entries(data)
+    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["runtime"]?.reduce((acc, v) => acc + v, 0) || 0) +
-          run["update-geometries"].reduce((acc, v) => acc + v, 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["runtime"]?.[0] || 0) +
-        run["update-geometries"][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[] {
+  const computedTotalDisplay = $derived.by(() =>
-    if (showAverage) {
+    round(showAverage ? totalPerformance.average : totalPerformance.onlyLast),
-      return [
+  );
-        getAverage("worker-transfer"),
-        getAverage("runtime"),
-        getAverage("update-geometries"),
-      ];
-    }
 
-    return [
+  const computedFps = $derived.by(() =>
-      getLast("worker-transfer"),
+    Math.floor(
-      getLast("runtime"),
+      1000 /
-      getLast("update-geometries"),
+        (showAverage
-    ];
+          ? totalPerformance.average || 1
-  }
+          : totalPerformance.onlyLast || 1),
-
+    ),
-  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(" ");
-  }
 </script>
 
-{#key $activeType && data}
+{#if data.length !== 0}
-  {#if $activeType === "cache-hit"}
+  {#if activeType === "cache-hit"}
     <Monitor
       title="Cache Hits"
-      points={constructPoints($activeType)}
+      points={constructPoints(activeType)}
       min={0}
       max={1}
       type="%"
     />
   {:else}
     <Monitor
-      title={getTitle($activeType)}
+      title={getTitle(activeType)}
-      points={constructPoints($activeType)}
+      points={constructPoints(activeType)}
     />
   {/if}
 
@@ -198,10 +201,9 @@
       <label for="show-total">Show Average</label>
     </div>
 
-    {#if data.length !== 0}
     <BarSplit
       labels={["worker-transfer", "runtime", "update-geometries"]}
-        values={getSplitValues()}
+      values={splitValues}
     />
 
     <h3>General</h3>
@@ -210,27 +212,22 @@
       <tbody>
         <tr>
           <td>
-              {round(getTotalPerformance(!showAverage))}<span>ms</span>
+            {computedTotalDisplay}<span>ms</span>
           </td>
           <td
-              class:active={$activeType === "total"}
+            class:active={activeType === "total"}
-              on:click={() => ($activeType = "total")}
+            onclick={() => (activeType = "total")}
-            >
-              total<span
-                >({Math.floor(
-                  1000 / getTotalPerformance(showAverage),
-                )}fps)</span
           >
+            total<span>({computedFps}fps)</span>
           </td>
         </tr>
-          {#each getPerformanceData(!showAverage) as [key, value]}
+
+        {#each performanceData as [key, value]}
           <tr>
-              <td>
+            <td>{round(value)}<span>ms</span></td>
-                {round(value)}<span>ms</span>
-              </td>
             <td
-                class:active={$activeType === key}
+              class:active={activeType === key}
-                on:click={() => ($activeType = key)}
+              onclick={() => (activeType = key)}
             >
               {key}
             </td>
@@ -242,43 +239,43 @@
           <td>Samples</td>
         </tr>
       </tbody>
-        <tbody>
-          <tr>
-            <td>
-              <h3>Nodes</h3>
-            </td>
-          </tr>
-        </tbody>
-        <tbody>
-          <tr>
-            <td> {getCacheRatio(!showAverage)}<span>%</span> </td>
-            <td
-              class:active={$activeType === "cache-hit"}
-              on:click={() => ($activeType = "cache-hit")}>cache hits</td
-            >
-          </tr>
-          {#each getNodePerformanceData(!showAverage) as [key, value]}
-            <tr>
-              <td>
-                {round(value)}<span>ms</span>
-              </td>
 
+      <tbody>
+        <tr><td><h3>Nodes</h3></td></tr>
+      </tbody>
+
+      <tbody>
+        <tr>
           <td
-                class:active={$activeType === key}
+            >{showAverage ? cacheRatio.average : cacheRatio.onlyLast}<span
-                on:click={() => ($activeType = key)}
+              >%</span
+            ></td
+          >
+          <td
+            class:active={activeType === "cache-hit"}
+            onclick={() => (activeType = "cache-hit")}
+          >
+            cache hits
+          </td>
+        </tr>
+
+        {#each nodePerformanceData as [key, value]}
+          <tr>
+            <td>{round(value)}<span>ms</span></td>
+            <td
+              class:active={activeType === key}
+              onclick={() => (activeType = key)}
             >
               {key.split("/").slice(-1).join("/")}
             </td>
           </tr>
         {/each}
       </tbody>
+
       <tbody>
-          <tr>
+        <tr><td><h3>Viewer</h3></td></tr>
-            <td>
-              <h3>Viewer</h3>
-            </td>
-          </tr>
       </tbody>
+
       <tbody>
         <tr>
           <td>{humanizeNumber(getLast("total-vertices"))}</td>
@@ -288,14 +285,13 @@
           <td>{humanizeNumber(getLast("total-faces"))}</td>
           <td>Faces</td>
         </tr>
-          {#each getViewerPerformanceData(!showAverage) as [key, value]}
+
+        {#each viewerPerformanceData as [key, value]}
           <tr>
-              <td>
+            <td>{round(value)}<span>ms</span></td>
-                {round(value)}<span>ms</span>
-              </td>
             <td
-                class:active={$activeType === key}
+              class:active={activeType === key}
-                on:click={() => ($activeType = key)}
+              onclick={() => (activeType = key)}
             >
               {key.split("/").slice(-1).join("/")}
             </td>
@@ -303,11 +299,10 @@
         {/each}
       </tbody>
     </table>
-    {:else}
-      <p>No runs available</p>
-    {/if}
   </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={path} />
-    <polyline vector-effect="non-scaling-stroke" points={constructPath()} />
-  {/key}
 </svg>
 
 <style>

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
+      const geos: BufferGeometry[] = [];
-        .filter((child) => "geometry" in child && child.isObject3D)
+      scene.traverse(function (child) {
-        .map((child) => {
+        if (isMesh(child)) {
-          return (child as Mesh).geometry;
+          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/runtime/runtime-executor.ts

@@ -64,7 +64,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
 
   constructor(
     private registry: NodeRegistry,
-    private cache?: SyncCache<Int32Array>,
+    public cache?: SyncCache<Int32Array>,
   ) {
     this.cache = undefined;
   }

app/src/lib/runtime/worker-runtime-executor-backend.ts

@@ -13,6 +13,22 @@ const executor = new MemoryRuntimeExecutor(nodeRegistry, cache);
 const performanceStore = createPerformanceStore();
 executor.perf = performanceStore;
 
+export async function setUseRegistryCache(useCache: boolean) {
+  if (useCache) {
+    nodeRegistry.cache = indexDbCache;
+  } else {
+    nodeRegistry.cache = undefined;
+  }
+}
+
+export async function setUseRuntimeCache(useCache: boolean) {
+  if (useCache) {
+    executor.cache = cache;
+  } else {
+    executor.cache = undefined;
+  }
+}
+
 export async function executeGraph(
   graph: Graph,
   settings: Record<string, unknown>,

app/src/lib/runtime/worker-runtime-executor.ts

@@ -11,5 +11,11 @@ export class WorkerRuntimeExecutor implements RuntimeExecutor {
   async getPerformanceData() {
     return this.worker.getPerformanceData();
   }
+  set useRuntimeCache(useCache: boolean) {
+    this.worker.setUseRuntimeCache(useCache);
+  }
+  set useRegistryCache(useCache: boolean) {
+    this.worker.setUseRegistryCache(useCache);
+  }
 }
 

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: {
@@ -87,6 +87,19 @@ export const AppSettingTypes = {
       label: "Show Graph Source",
       value: false,
     },
+    cache: {
+      title: "Cache",
+      useRuntimeCache: {
+        type: "boolean",
+        label: "Node Results",
+        value: true,
+      },
+      useRegistryCache: {
+        type: "boolean",
+        label: "Node Source",
+        value: true,
+      },
+    },
     stressTest: {
       title: "Stress Test",
       amount: {

app/src/lib/sidebar/Panel.svelte

@@ -1,43 +1,46 @@
 <script lang="ts">
-  import { getContext } from "svelte";
+  import { getContext, type Snippet } from "svelte";
-  import type { Readable } from "svelte/store";
+  import type { PanelState } from "./PanelState.svelte";
 
-  export let id: string;
+  const {
-  export let icon: string = "";
+    id,
-  export let title = "";
+    icon = "",
-  export let classes = "";
+    title = "",
-  export let hidden: boolean | undefined = undefined;
+    classes = "",
+    hidden,
+    children,
+  } = $props<{
+    id: string;
+    icon?: string;
+    title?: string;
+    classes?: string;
+    hidden?: boolean;
+    children?: Snippet;
+  }>();
 
-  const setVisibility =
+  const panelState = getContext<PanelState>("panel-state");
-    getContext<(id: string, visible: boolean) => void>("setVisibility");
 
-  $: if (typeof hidden === "boolean") {
+  const panel = panelState.registerPanel(id, icon, classes, hidden);
-    setVisibility(id, !hidden);
+  $effect(() => {
-  }
+    panel.hidden = hidden;
-
+  });
-  const registerPanel =
-    getContext<
-      (id: string, icon: string, classes: string) => Readable<boolean>
-    >("registerPanel");
-
-  let visible = registerPanel(id, icon, classes);
 </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, type Snippet } from "svelte";
-  import { setContext } from "svelte";
+  import { PanelState } from "./PanelState.svelte";
-  import { derived } from "svelte/store";
 
-  let panels: Record<
+  const state = new PanelState();
-    string,
+  setContext("panel-state", state);
-    {
-      icon: string;
-      id: string;
-      classes: string;
-      visible?: boolean;
-    }
-  > = {};
 
-  const activePanel = localStore<keyof typeof panels | false>(
+  const { children } = $props<{ children?: Snippet }>();
-    "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;
-    }
-  }
 </script>
 
-<div class="wrapper" class:visible={$activePanel}>
+<div class="wrapper" class:visible={state.activePanel.value}>
   <div class="tabs">
-    <button
+    <button aria-label="Close" onclick={() => state.toggleOpen()}>
-      aria-label="Close"
+      <span class="icon-[tabler--settings]"></span>
-      on:click={() => {
+      <span class="absolute i-[tabler--chevron-left] w-6 h-6 block"></span>
-        setActivePanel($activePanel ? false : keys[0]);
-      }}
-    >
-      <span class="absolute i-tabler-chevron-left w-6 h-6 block"></span>
     </button>
-    {#each keys as panel (panels[panel].id)}
+    {#each state.keys as panelId (panelId)}
-      {#if panels[panel].visible !== false}
+      {#if !state.panels[panelId].hidden}
         <button
-          aria-label={panel}
+          aria-label={panelId}
-          class="tab {panels[panel].classes}"
+          class="tab {state.panels[panelId].classes}"
-          class:active={panel === $activePanel}
+          class:active={panelId === state.activePanel.value}
-          on:click={() => setActivePanel(panel)}
+          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 isRunning = $state(false);
-  let amount = localStore<number>("nodes.benchmark.samples", 500);
+  let amount = localState<number>("nodes.benchmark.samples", 500);
-  let samples = 0;
+  let samples = $state(0);
   let warmUp = writable(0);
   let warmUpAmount = 10;
-  let state = "";
+  let status = "";
-  let result:
-    | { stdev: number; avg: number; duration: number; samples: number[] }
-    | undefined;
 
   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,10 +79,9 @@
   }
 </script>
 
-{state}
+{status}
 
 <div class="wrapper" class:running={isRunning}>
-  {#if isRunning}
   {#if result}
     <h3>Finished ({humanizeDuration(result.duration)})</h3>
     <div class="monitor-wrapper">
@@ -85,43 +90,42 @@
     <label for="bench-avg">Average </label>
     <button
       id="bench-avg"
-        on:keydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
+      onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
-        on:click={() => copyContent(result?.avg)}
+      onclick={() => copyContent(result?.avg)}
       >{Math.floor(result.avg * 100) / 100}</button
     >
     <i
       role="button"
       tabindex="0"
-        on:keydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
+      onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
-        on:click={() => copyContent(result?.avg)}>(click to copy)</i
+      onclick={() => copyContent(result?.avg)}>(click to copy)</i
     >
     <label for="bench-stdev">Standard Deviation σ</label>
-      <button id="bench-stdev" on:click={() => copyContent(result?.stdev)}
+    <button id="bench-stdev" onclick={() => copyContent(result?.stdev)}
       >{Math.floor(result.stdev * 100) / 100}</button
     >
     <i
       role="button"
       tabindex="0"
-        on:keydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
+      onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
-        on:click={() => copyContent(result?.stdev + "")}>(click to copy)</i
+      onclick={() => copyContent(result?.stdev + "")}>(click to copy)</i
     >
     <div>
-        <button on:click={() => (isRunning = false)}>reset</button>
+      <button onclick={() => (isRunning = false)}>reset</button>
     </div>
-    {:else}
+  {:else if isRunning}
     <p>WarmUp ({$warmUp}/{warmUpAmount})</p>
     <progress value={$warmUp} max={warmUpAmount}
       >{Math.floor(($warmUp / warmUpAmount) * 100)}%</progress
     >
-      <p>Progress ({samples}/{$amount})</p>
+    <p>Progress ({samples}/{amount.value})</p>
-      <progress value={samples} max={$amount}
+    <progress value={samples} max={amount.value}
-        >{Math.floor((samples / $amount) * 100)}%</progress
+      >{Math.floor((samples / amount.value) * 100)}%</progress
     >
-    {/if}
   {:else}
     <label for="bench-samples">Samples</label>
-    <Integer id="bench-sample" bind:value={$amount} max={1000} />
+    <Integer id="bench-sample" bind:value={amount.value} max={1000} />
-    <button on:click={benchmark} disabled={isRunning}> start </button>
+    <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">
+<div class="p-4">
-  <button on:click={exportObj}> export obj </button>
+  <button onclick={exportObj}> export obj </button>
-  <button on:click={exportGltf}> export gltf </button>
+  <button onclick={exportGltf}> export gltf </button>
 </div>

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

@@ -13,7 +13,8 @@
   let { keymaps }: Props = $props();
 </script>
 
-<table class="wrapper">
+<div class="p-4">
+  <table class="wrapper">
     <tbody>
       {#each keymaps as keymap}
         <tr>
@@ -38,7 +39,8 @@
         {/each}
       {/each}
     </tbody>
-</table>
+  </table>
+</div>
 
 <style>
   .wrapper {

app/src/routes/+layout.svelte

@@ -1,7 +1,15 @@
 <script lang="ts">
   import "@nodarium/ui/app.css";
-  import "virtual:uno.css";
+  import "../app.css";
-  import "@unocss/reset/normalize.css";
+  import type { Snippet } from "svelte";
+  import * as config from "$lib/config";
+  const { children } = $props<{ children?: Snippet }>();
 </script>
 
-<slot />
+{@render children?.()}
+
+<svelte:head>
+  {#if config.ANALYTIC_SCRIPT}
+    {@html config.ANALYTIC_SCRIPT}
+  {/if}
+</svelte:head>

app/src/routes/+page.svelte

@@ -42,6 +42,25 @@
     appSettings.value.debug.useWorker ? workerRuntime : memoryRuntime,
   );
 
+  $effect(() => {
+    workerRuntime.useRegistryCache =
+      appSettings.value.debug.cache.useRuntimeCache;
+    workerRuntime.useRuntimeCache =
+      appSettings.value.debug.cache.useRegistryCache;
+
+    if (appSettings.value.debug.cache.useRegistryCache) {
+      nodeRegistry.cache = registryCache;
+    } else {
+      nodeRegistry.cache = undefined;
+    }
+
+    if (appSettings.value.debug.cache.useRuntimeCache) {
+      memoryRuntime.cache = runtimeCache;
+    } else {
+      memoryRuntime.cache = undefined;
+    }
+  });
+
   let activeNode = $state<NodeInstance | undefined>(undefined);
   let scene = $state<Group>(null!);
 
@@ -178,7 +197,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}
@@ -188,7 +207,7 @@
         <Panel
           id="shortcuts"
           title="Keyboard Shortcuts"
-          icon="i-tabler-keyboard"
+          icon="i-[tabler--keyboard]"
         >
           <Keymap
             keymaps={[
@@ -197,23 +216,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} />
@@ -223,24 +240,22 @@
           id="graph-source"
           title="Graph Source"
           hidden={!appSettings.value.debug.showGraphJson}
-          icon="i-tabler-code"
+          icon="i-[tabler--code]"
         >
-          <GraphSource {graph} />
+          <GraphSource graph={graph && manager.serialize()} />
         </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] bg-blue-400"
-          icon="i-custom-graph"
         >
           <NestedSettings
             id="graph-settings"
@@ -251,10 +266,9 @@
         <Panel
           id="active-node"
           title="Node Settings"
-          classes="text-blue-400"
+          icon="i-[tabler--adjustments] bg-blue-400"
-          icon="i-tabler-adjustments"
         >
-          <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()

docs/DEVELOPING_NODES.md

@@ -4,7 +4,7 @@ This guide will help you developing your first Nodarium Node written in Rust. As
 
 ## Prerequesites
 
-You need to have [Rust](https://www.rust-lang.org/tools/install) and [wasm-pack](https://rustwasm.github.io/wasm-pack/book/) installed. Rust is the language we are going to develop our node in and wasm-pack helps us compile our rust code into a webassembly file.
+You need to have [Rust](https://www.rust-lang.org/tools/install) and [wasm-pack](https://rustwasm.github.io/docs/wasm-pack/) installed. Rust is the language we are going to develop our node in and wasm-pack helps us compile our rust code into a webassembly file.
 
 ```bash
 # install rust
@@ -26,6 +26,7 @@ Now we create the definition file of the node.
 Here we define what kind of inputs our node will expect and what kind of output it produces. If you want to dive deeper into this topic, have a look at [NODE_DEFINITION.md](./NODE_DEFINITION.md).
 
 `src/definition.json`
+
 ```json
 {
   "id": "my-name/my-namespace/zylinder-node",
@@ -35,7 +36,7 @@ Here we define what kind of inputs our node will expect and what kind of output
   "inputs": {
     "height": {
       "type": "float",
-      "value": 2,
+      "value": 2
     },
     "radius": {
       "type": "float",
@@ -44,6 +45,7 @@ Here we define what kind of inputs our node will expect and what kind of output
   }
 }
 ```
+
 If we take a look at the `src/lib.rs` file we see that `src/definition.json` is included with the following line:
 
 ```rust

flake.lock

@@ -0,0 +1,27 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1768564909,
+        "narHash": "sha256-Kell/SpJYVkHWMvnhqJz/8DqQg2b6PguxVWOuadbHCc=",
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "e4bae1bd10c9c57b2cf517953ab70060a828ee6f",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nixos",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,41 @@
+{
+  inputs = {
+    nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
+  };
+
+  outputs = {nixpkgs, ...}: let
+    systems = ["aarch64-darwin" "x86_64-linux"];
+    eachSystem = function:
+      nixpkgs.lib.genAttrs systems (system:
+        function {
+          inherit system;
+          pkgs = nixpkgs.legacyPackages.${system};
+        });
+  in {
+    devShells = eachSystem ({pkgs, ...}: {
+      default = pkgs.mkShellNoCC {
+        packages = [
+          # general deps
+          pkgs.nodejs_24
+          pkgs.pnpm_10
+
+          # wasm/rust stuff
+          pkgs.rustc
+          pkgs.cargo
+          pkgs.rust-analyzer
+          pkgs.rustfmt
+          pkgs.wasm-bindgen-cli
+          pkgs.wasm-pack
+          pkgs.lld
+
+          # frontend
+          pkgs.vscode-langservers-extracted
+          pkgs.typescript-language-server
+          pkgs.prettier
+          pkgs.tailwindcss-language-server
+          pkgs.svelte-language-server
+        ];
+      };
+    });
+  };
+}

package.json

@@ -4,9 +4,10 @@
     "build:story": "pnpm -r --filter 'ui' story:build",
     "build:app": "BASE_PATH=/ui pnpm -r --filter 'ui' build && pnpm -r --filter 'app' build",
     "build:nodes": "pnpm -r --filter './nodes/**' build",
-    "dev:nodes": "pnpm -r --parallel  --filter './nodes/**' dev",
     "build:deploy": "pnpm build",
-    "dev": "pnpm -r --filter 'app' --filter './packages/node-registry' dev"
+    "dev:all": "pnpm -r dev",
+    "dev:nodes": "pnpm -r --parallel  --filter './nodes/**' dev",
+    "dev": "pnpm -r --filter 'app' --filter './packages/ui' dev"
   },
   "packageManager": "pnpm@10.24.0"
 }

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>>;
+  db: Promise<IDBPDatabase<unknown>>;
-  private _cache = new Map<string, ArrayBuffer>();
+  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 as T;
+  }
+
+  async getArrayBuffer(key: string) {
+    const res = await this.get(key);
+    if (!res) return;
+    if (res instanceof ArrayBuffer) {
       return res;
     }
-  async set(key: string, value: ArrayBuffer) {
+    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>,
+    public 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 { Client, Options as Options2, TDataShape } from './client';
-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 { 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 type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean> = Options2<TData, ThrowOnError> & {
-
+    /**
-export const getV1NodesByUserJson = <ThrowOnError extends boolean = false>(options: OptionsLegacyParser<GetV1NodesByUserJsonData, ThrowOnError>) => {
+     * You can provide a client instance returned by `createClient()` instead of
-    return (options?.client ?? client).get<GetV1NodesByUserJsonResponse, GetV1NodesByUserJsonError, ThrowOnError>({
+     * individual options. This might be also useful if you want to implement a
-        ...options,
+     * custom client.
-        url: '/v1/nodes/{user}.json'
+     */
-    });
+    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>) => {
+export const postNodes = <ThrowOnError extends boolean = false>(options?: Options<PostNodesData, ThrowOnError>) => (options?.client ?? client).post<PostNodesResponses, unknown, ThrowOnError>({ url: '/nodes', ...options });
-    return (options?.client ?? client).get<GetV1NodesByUserBySystemJsonResponse, GetV1NodesByUserBySystemJsonError, ThrowOnError>({
-        ...options,
-        url: '/v1/nodes/{user}/{system}.json'
-    });
-};
 
-export const getV1NodesByUserBySystemByNodeIdby-.+Json = <ThrowOnError extends boolean = false>(options: OptionsLegacyParser<GetV1NodesByUserBySystemByNodeIdby-.+jsonData, ThrowOnError>) => {
+export const getNodesByUserJson = <ThrowOnError extends boolean = false>(options?: Options<GetNodesByUserJsonData, ThrowOnError>) => (options?.client ?? client).get<GetNodesByUserJsonResponses, unknown, ThrowOnError>({ url: '/nodes/{user}.json', ...options });
-    return (options?.client ?? client).get<GetV1NodesByUserBySystemByNodeIdby-.+jsonResponse, GetV1NodesByUserBySystemByNodeIdby-.+jsonError, ThrowOnError>({
-        ...options,
-        url: '/v1/nodes/{user}/{system}/{nodeId}{.+\\.json}'
-    });
-};
 
-export const getV1NodesByUserBySystemByNodeIdby-.+Wasm = <ThrowOnError extends boolean = false>(options: OptionsLegacyParser<GetV1NodesByUserBySystemByNodeIdby-.+WasmData, ThrowOnError>) => {
+export const getNodesByUserBySystemJson = <ThrowOnError extends boolean = false>(options: Options<GetNodesByUserBySystemJsonData, ThrowOnError>) => (options.client ?? client).get<GetNodesByUserBySystemJsonResponses, unknown, ThrowOnError>({ url: '/nodes/{user}/{system}.json', ...options });
-    return (options?.client ?? client).get<GetV1NodesByUserBySystemByNodeIdby-.+WasmResponse, GetV1NodesByUserBySystemByNodeIdby-.+WasmError, ThrowOnError>({
-        ...options,
-        url: '/v1/nodes/{user}/{system}/{nodeId}{.+\\.wasm}'
-    });
-};
 
-export const postV1Nodes = <ThrowOnError extends boolean = false>(options?: OptionsLegacyParser<unknown, ThrowOnError>) => {
+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 });
-    return (options?.client ?? client).post<PostV1NodesResponse, PostV1NodesError, ThrowOnError>({
-        ...options,
-        url: '/v1/nodes'
-    });
-};
 
-export const getV1UsersUsersJson = <ThrowOnError extends boolean = false>(options?: OptionsLegacyParser<unknown, ThrowOnError>) => {
+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 });
-    return (options?.client ?? client).get<GetV1UsersUsersJsonResponse, GetV1UsersUsersJsonError, ThrowOnError>({
-        ...options,
-        url: '/v1/users/users.json'
-    });
-};
 
-export const getV1UsersByUserIdJson = <ThrowOnError extends boolean = false>(options?: OptionsLegacyParser<GetV1UsersByUserIdJsonData, ThrowOnError>) => {
+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 });
-    return (options?.client ?? client).get<GetV1UsersByUserIdJsonResponse, GetV1UsersByUserIdJsonError, ThrowOnError>({
+
-        ...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 });
-        url: '/v1/users/{userId}.json'
+
-    });
+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 = {
+export type ClientOptions = {
-    id: string;
+    baseUrl: `${string}://${string}` | (string & {});
-    inputs?: {
-        [key: string]: NodeInput;
-    };
-    outputs?: Array<(string)>;
-    meta?: {
-        description?: string;
-        title?: 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';
+    type: 'seed';
-    value?: Array<(number)>;
+    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 NodeDefinition = {
-
+    id: string;
-export type element = 'slider';
+    inputs?: {
+        [key: string]: NodeInput;
+    };
+    outputs?: Array<string>;
+    meta?: {
+        description?: string;
+        title?: string;
+    };
+};
 
 export type User = {
     id: string;
     name: string;
 };
 
-export type GetV1NodesByUserJsonData = {
+export type PostNodesData = {
-    path: {
+    body?: never;
-        user: string;
+    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

@@ -2,7 +2,7 @@
   "name": "@nodarium/ui",
   "version": "0.0.1",
   "scripts": {
-    "dev": "vite dev",
+    "dev": "chokidar './src/**' --initial -c 'pnpm build'",
     "build": "vite build && npm run package",
     "preview": "vite preview",
     "package": "svelte-kit sync && svelte-package && publint",
@@ -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 .",
+    "lint": "eslint ."
-    "story:dev": "storybook dev -p 6006",
-    "story:build": "storybook build"
   },
   "exports": {
     ".": {
@@ -30,36 +28,33 @@
     "svelte": "^4.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^8.6.14",
+    "@nodarium/types": "link:../types",
-    "@storybook/addon-svelte-csf": "5.0.10",
-    "@storybook/addon-themes": "^10.0.8",
-    "@storybook/svelte": "^10.0.8",
-    "@storybook/sveltekit": "^10.0.8",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.49.0",
+    "@sveltejs/kit": "^2.50.0",
-    "@sveltejs/package": "^2.5.6",
+    "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@types/eslint": "^9.6.1",
-    "@typescript-eslint/eslint-plugin": "^8.47.0",
+    "@types/three": "^0.182.0",
-    "@typescript-eslint/parser": "^8.47.0",
+    "@typescript-eslint/eslint-plugin": "^8.53.0",
-    "eslint": "^9.39.1",
+    "@typescript-eslint/parser": "^8.53.0",
-    "eslint-plugin-storybook": "^10.0.8",
+    "chokidar-cli": "^3.0.0",
-    "eslint-plugin-svelte": "^3.13.0",
+    "eslint": "^9.39.2",
-    "publint": "^0.3.15",
+    "eslint-plugin-svelte": "^3.14.0",
-    "storybook": "^10.0.8",
+    "publint": "^0.3.16",
-    "svelte": "^5.43.14",
+    "svelte": "^5.46.4",
-    "svelte-check": "^4.3.4",
+    "svelte-check": "^4.3.5",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "vite": "^7.2.4",
+    "vite": "^7.3.1",
-    "vitest": "^4.0.13",
+    "vitest": "^4.0.17"
-    "@nodarium/types": "link:../types"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "@threlte/core": "^8.3.0",
+    "@tailwindcss/vite": "^4.1.18",
-    "@threlte/extras": "^9.7.0"
+    "@threlte/core": "^8.3.1",
+    "@threlte/extras": "^9.7.1",
+    "tailwindcss": "^4.1.18"
   }
 }

packages/ui/src/lib/Input.svelte

@@ -1,29 +1,30 @@
 <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 type { NodeInput } from '@nodarium/types';
-	import Vec3 from './elements/Vec3.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 Vec3 from './inputs/Vec3.svelte';
+	// import Number from './inputs/Number.svelte';
 
 	interface Props {
 		input: NodeInput;
 		value: any;
-		id: string;
+		id?: string;
 	}
 
 	let { input, value = $bindable(), id }: 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 {id} />
 {:else if input.type === 'select'}
-	<Select {id} bind:value options={input.options} />
+	<Select bind:value options={input.options} {id} />
 {:else if input.type === 'vec3'}
-	<Vec3 {id} bind:value />
+	<Vec3 bind:value {id} />
 {/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
+export { default as Input } from "./Input.svelte"
-import Input from './Input.svelte';
+export { default as Float } from "./inputs/Float.svelte"
-
+export { default as Integer } from "./inputs/Integer.svelte"
-import Float from "./elements/Float.svelte";
+export { default as Select } from "./inputs/Select.svelte"
-import Integer from "./elements/Integer.svelte";
+export { default as Checkbox } from "./inputs/Checkbox.svelte"
-import Select from "./elements/Select.svelte";
+export { default as Vec3 } from "./inputs/Vec3.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 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,47 @@
+<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;
+		} 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)]"
+		{id}
+	/>
+	<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

@@ -12,7 +12,7 @@
 		step = 0.01,
 		min = $bindable(0),
 		max = $bindable(1),
-		id = ''
+		id
 	}: Props = $props();
 
 	if (min > max) {
@@ -55,6 +55,7 @@
 		window.addEventListener('mousemove', handleMouseMove);
 		window.addEventListener('mouseup', handleMouseUp);
 		document.body.style.cursor = 'ew-resize';
+		(ev.target as HTMLElement)?.blur();
 	}
 
 	function handleMouseUp() {
@@ -93,6 +94,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) {

packages/ui/src/lib/inputs/Integer.svelte

@@ -1,41 +1,48 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	const dispatch = createEventDispatcher();
-
 	interface Props {
+		value?: number;
+		step?: number;
 		min?: number | undefined;
 		max?: number | undefined;
-		step?: number;
-		value?: number;
 		id?: string;
+		change?: (arg: number) => void;
 	}
 
 	let {
-		min = undefined,
-		max = undefined,
-		step = 1,
 		value = $bindable(0),
-		id = ''
+		step = 1,
+		min = $bindable(0),
+		max = $bindable(1),
+		id,
+		change
 	}: Props = $props();
 
-	if (!value) {
+	if (min > max) {
-		value = 0;
+		[min, max] = [max, min];
+	}
+	if (value > max) {
+		max = value;
 	}
 
-	let inputEl: HTMLInputElement | undefined = $state();
+	function strip(input: number) {
-	let wrapper: HTMLDivElement | undefined = $state();
+		return +parseFloat(input + '').toPrecision(2);
+	}
+
+	let inputEl = $state() as HTMLInputElement;
+	let wrapper = $state() as HTMLDivElement;
 
 	let prev = -1;
 	function update() {
 		if (prev === value) return;
 		prev = value;
-		dispatch('change', parseFloat(value + ''));
+		change?.(value);
 	}
 
 	function handleChange(change: number) {
 		value = Math.max(min ?? -Infinity, Math.min(+value + change, max ?? Infinity));
 	}
 
+	let isMouseDown = $state(false);
 	let downX = 0;
 	let downV = 0;
 	let rect: DOMRect;
@@ -65,6 +72,13 @@
 		window.removeEventListener('mousemove', handleMouseMove);
 	}
 
+	function handleKeyDown(ev: KeyboardEvent) {
+		if (ev.key === 'Escape' || ev.key === 'Enter') {
+			handleMouseUp();
+			inputEl?.blur();
+		}
+	}
+
 	function handleMouseMove(ev: MouseEvent) {
 		if (!ev.ctrlKey && typeof min === 'number' && typeof max === 'number') {
 			const vx = (ev.clientX - rect.left) / rect.width;
@@ -76,8 +90,12 @@
 	}
 
 	$effect(() => {
+		if ((value || 0).toString().length > 5) {
+			value = strip(value || 0);
+		}
 		value !== undefined && update();
 	});
+
 	let width = $derived(
 		Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 30) + 'px' : '20px'
 	);
@@ -86,9 +104,11 @@
 <div
 	class="component-wrapper"
 	bind:this={wrapper}
+	class:is-down={isMouseDown}
 	role="slider"
 	tabindex="0"
 	aria-valuenow={value}
+	onkeydown={handleKeyDown}
 	onmousedown={handleMouseDown}
 	onmouseup={handleMouseUp}
 >
@@ -124,21 +144,32 @@
 		border-radius: var(--border-radius, 2px);
 	}
 
+	input[type='number']::-webkit-inner-spin-button,
+	input[type='number']::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+	}
+
 	input[type='number'] {
 		-webkit-appearance: textfield;
 		-moz-appearance: textfield;
 		appearance: textfield;
 		cursor: pointer;
-		font-size: 1em;
 		font-family: var(--font-family);
-		padding-top: 8px;
+		font-variant-numeric: tabular-nums;
+		color: var(--text-color);
+		background-color: transparent;
+		padding: var(--padding, 6px);
+		font-size: 1em;
+		padding-inline: 10px;
+		text-align: center;
+		border: none;
+		border-style: none;
 		flex: 1;
 		width: 72%;
 	}
 
-	input[type='number']::-webkit-inner-spin-button,
+	.is-down > input {
-	input[type='number']::-webkit-outer-spin-button {
+		cursor: ew-resize !important;
-		-webkit-appearance: none;
 	}
 
 	.overlay {
@@ -151,6 +182,10 @@
 		pointer-events: none;
 	}
 
+	.is-down > .overlay {
+		transition: none !important;
+	}
+
 	button {
 		background-color: transparent;
 		border: none;

packages/ui/src/lib/inputs/Number.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+	interface Props {
+		value?: number;
+		step?: number;
+		min?: number;
+		max?: number;
+		id?: string;
+	}
+
+	let {
+		value = $bindable(1),
+		step = 1,
+		min = $bindable(0),
+		max = $bindable(1),
+		id
+	}: Props = $props();
+
+	if (min > max) {
+		[min, max] = [max, min];
+	}
+	if (value > max) {
+		max = value;
+	}
+
+	function strip(input: number) {
+		return +parseFloat(input + '').toPrecision(2);
+	}
+
+	let inputEl: HTMLInputElement | undefined = $state();
+
+	let prev = -1;
+	function update() {
+		if (prev === value) return;
+		if (value.toString().length > 5) {
+			value = strip(value);
+		}
+		prev = value;
+	}
+
+	function handleChange(change: number) {
+		value = Math.max(min ?? -Infinity, Math.min(+value + change, max ?? Infinity));
+	}
+
+	function handleKeyDown(ev: KeyboardEvent) {
+		if (ev.key === 'Escape' || ev.key === 'Enter') {
+			inputEl?.blur();
+		}
+	}
+
+	$effect(() => {
+		update();
+	});
+
+	let ratio = $derived(((value - min) / (max - min)) * 100);
+</script>
+
+<div>
+	<div class="component-wrapper">
+		<button onclick={() => handleChange(-step)}>-</button>
+		<input
+			bind:value
+			bind:this={inputEl}
+			{id}
+			{step}
+			{max}
+			{min}
+			type="number"
+			onkeydown={handleKeyDown}
+		/>
+		<button onclick={() => handleChange(+step)}>+</button>
+	</div>
+	<div class="slider">
+		<input
+			type="range"
+			bind:value
+			{min}
+			{max}
+			{step}
+			style={`background: linear-gradient(90deg, var(--text-color) ${ratio}%, var(--layer-2, #4b4b4b) ${ratio}%)`}
+		/>
+	</div>
+</div>
+
+<style>
+	.component-wrapper {
+		display: flex;
+		background-color: var(--layer-2, #4b4b4b);
+		user-select: none;
+		transition: box-shadow 0.3s ease;
+		border: solid 1px var(--outline);
+		overflow: hidden;
+		border-radius: 0 var(--border-radius, 2px); /* only top */
+	}
+
+	input[type='number']::-webkit-inner-spin-button,
+	input[type='number']::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+	}
+
+	input[type='number'] {
+		-webkit-appearance: textfield;
+		-moz-appearance: textfield;
+		appearance: textfield;
+		cursor: pointer;
+		font-family: var(--font-family);
+		font-variant-numeric: tabular-nums;
+		color: var(--text-color);
+		background-color: transparent;
+		padding: var(--padding, 6px);
+		font-size: 1em;
+		padding-inline: 10px;
+		text-align: center;
+		border: none;
+		border-style: none;
+		flex: 1;
+		width: 72%;
+	}
+
+	button {
+		background-color: transparent;
+		border: none;
+		cursor: pointer;
+		line-height: 0px;
+		margin: 0;
+		color: var(--text-color);
+		margin-inline: 6px;
+	}
+
+	div input[type='number'] {
+		color: var(--text-color);
+		background-color: transparent;
+		padding: var(--padding, 6px);
+		padding-inline: 0px;
+		text-align: center;
+		border: none;
+		border-style: none;
+	}
+
+	.slider {
+		position: relative;
+		margin-top: -1px; /* hide edge */
+	}
+
+	input[type='range'] {
+		position: absolute;
+		appearance: none;
+		width: 100%;
+		height: 3px;
+		background: var(--layer-2, #4b4b4b);
+		cursor: pointer;
+	}
+
+	/* Thumb: for Chrome, Safari, Edge */
+	input[type='range']::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 0px;
+		height: 0px;
+		box-shadow: none;
+	}
+
+	/* Thumb: for Firefox */
+	input[type='range']::-moz-range-thumb {
+		border: none;
+		width: 0px;
+		height: 0px;
+		box-shadow: none;
+	}
+</style>

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 { Checkbox, Details, Float, Integer, Select, ShortCut, Vec3 } from '$lib/index.js';
-	import Integer from '$lib/elements/Integer.svelte';
+	import Section from './Section.svelte';
-	import Vec3 from '$lib/elements/Vec3.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>
+<main class="flex flex-col gap-8 py-8">
-	<section>
+	<div class="flex gap-4">
-		<h3>Integer {intValue}</h3>
+		<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>
+	<Section title="Float" value={floatValue}>
-		<h3>Float {floatValue}</h3>
 		<Float bind:value={floatValue} />
-	</section>
+	</Section>
 
-	<section>
+	<Section title="Vec3" value={JSON.stringify(vecValue)}>
-		<h3>Vec3 {JSON.stringify(vecValue)}</h3>
 		<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",
+    "vite": "^7.3.1",
-    "vitest": "^4.0.13"
+    "vitest": "^4.0.17"
   }
 }