fix: make eslint/typescript happy

When enabled (default), perturbs each segment's direction vector and
rescales to original length — bends the path without stretching it or
causing fold-back artifacts. When disabled, the original direct point
displacement is used.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Cargo.lock

@@ -66,6 +66,7 @@ checksum = "92ecc6618181def0457392ccd0ee51198e065e016d1d527a7ac1b6dc7c1f09d2"
 name = "leaf"
 version = "0.1.0"
 dependencies = [
+ "glam",
  "nodarium_macros",
  "nodarium_utils",
 ]
@@ -117,6 +118,7 @@ dependencies = [
 name = "noise"
 version = "0.1.0"
 dependencies = [
+ "glam",
  "nodarium_macros",
  "nodarium_utils",
  "noise 0.9.0",

app/src/lib/graph-interface/background/Background.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
   import { appSettings } from '$lib/settings/app-settings.svelte';
-  import { T } from '@threlte/core';
+  import { T, useThrelte } from '@threlte/core';
   import { colors } from '../graph/colors.svelte';
   import BackgroundFrag from './Background.frag';
   import BackgroundVert from './Background.vert';
 
+  const { invalidate } = useThrelte();
+
   type Props = {
     minZoom?: number;
     maxZoom?: number;
@@ -33,9 +35,16 @@
 
   let bw = $derived(width / cameraPosition[2]);
   let bh = $derived(height / cameraPosition[2]);
+
+  $effect(() => {
+    if (appSettings.value.theme) {
+      setTimeout(() => invalidate(), 10);
+    }
+  });
 </script>
 
 <T.Group
+  visible={!appSettings.value.theme.includes('contrast')}
   position.x={cameraPosition[0]}
   position.z={cameraPosition[1]}
   position.y={-1.0}

app/src/lib/graph-interface/components/AddMenu.svelte

@@ -185,6 +185,8 @@
         >
           {node.meta?.title ?? node.id.split('/').at(-1)}
         </div>
+      {:else}
+        <div class="no-results">No results for "{value}"</div>
       {/each}
     </div>
   </div>
@@ -241,4 +243,11 @@
     background: var(--color-layer-2);
     opacity: 1;
   }
+
+  .no-results {
+    padding: 1em 0.9em;
+    font-size: 0.85em;
+    opacity: 0.45;
+    font-style: italic;
+  }
 </style>

app/src/lib/graph-interface/components/GroupBreadcrumps.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { Button } from '@nodarium/ui';
   import { getGraphManager } from '../graph-state.svelte';
   const graph = getGraphManager();
 
@@ -23,27 +24,19 @@
 
 {#if graph.isInsideGroup}
   <div class="group-name flex gap-1 items-center">
-    <button
-      class="bg-layer-2 opacity-75 hover:opacity-100 cursor-pointer rounded-sm p-1 px-2"
-      onclick={() => exitToGroup()}
-    >
-      Root
-    </button>
+    <Button variant="ghost" size="sm" onclick={() => exitToGroup()}>Root</Button>
 
     {#each intermediateGroups as entry (entry.id)}
       <span class="i-[tabler--arrow-right]"></span>
-      <button
-        class="bg-layer-2 opacity-75 hover:opacity-100 cursor-pointer rounded-sm p-1 px-2"
-        onclick={() => exitToGroup(entry.id)}
-      >
+      <Button variant="ghost" size="sm" onclick={() => exitToGroup(entry.id)}>
         {getGroupName(entry.id)}
-      </button>
+      </Button>
     {/each}
 
     <span class="i-[tabler--arrow-right]"></span>
-    <button class="bg-layer-2 opacity-100 cursor-pointer rounded-sm p-1 px-2">
+    <Button variant="ghost" size="sm" class="opacity-100!">
       {getGroupName(graph.currentGroupId!)}
-    </button>
+    </Button>
   </div>
 {/if}
 

app/src/lib/graph-interface/graph-manager.svelte.ts

@@ -1,4 +1,4 @@
-import { clone } from '$lib/helpers';
+import { clone, debounce } from '$lib/helpers';
 import throttle from '$lib/helpers/throttle';
 import { RemoteNodeRegistry } from '$lib/node-registry/index';
 import type {
@@ -309,17 +309,18 @@ export class GraphManager extends EventEmitter<{
       this.nodes.set(n.id, n);
     }
 
-    this.edges = graph.edges.map((edge) => {
+    this.edges = graph.edges.flatMap((edge) => {
       const from = this.nodes.get(edge[0]);
       const to = this.nodes.get(edge[2]);
       if (!from || !to) {
-        throw new Error('Edge references non-existing node');
+        log.warn('Dropping orphaned edge', edge);
+        return [];
       }
       from.state.children = from.state.children || [];
       from.state.children.push(to);
       to.state.parents = to.state.parents || [];
       to.state.parents.push(from);
-      return [from, edge[1], to, edge[3]] as Edge;
+      return [[from, edge[1], to, edge[3]] as Edge];
     });
 
     this.execute();
@@ -475,6 +476,35 @@ export class GraphManager extends EventEmitter<{
     // Construct the group inputs on the fly
     if (node.type === '__internal/group/instance') {
       const groupId = node.props?.groupId as number;
+
+      let options = this.groups.map((g) => ({
+        value: g.id,
+        label: g.name || `Group#${g.id}`
+      })).filter((g) => {
+        const activeIds = new SvelteSet([
+          ...this.parentStack.filter(e => e.id !== this.id).map(e => e.id),
+          ...(this.currentGroupId !== null ? [this.currentGroupId] : [])
+        ]);
+        return !activeIds.has(g.value);
+      });
+
+      // Handle if multiple groups have the same name, by adding the groupid
+      const groupNames = new SvelteMap<string, number>();
+      for (const o of options) {
+        const value = groupNames.get(o.label) || 0;
+        groupNames.set(o.label, value + 1);
+      }
+      options = options.map(o => {
+        const amount = groupNames.get(o.label) || 0;
+        if (amount > 1) {
+          return {
+            label: `${o.label}#${o.value}`,
+            value: o.value
+          };
+        }
+        return o;
+      });
+
       if (!groupId) {
         return {
           ...node.state.type,
@@ -488,16 +518,7 @@ export class GraphManager extends EventEmitter<{
               label: '',
               value: this.groups?.[0]?.id,
               internal: true,
-              options: this.groups.map((g) => ({
-                value: g.id,
-                label: g.name || `Group#${g.id}`
-              })).filter((g) => {
-                const activeIds = new SvelteSet([
-                  ...this.parentStack.filter(e => e.id !== this.id).map(e => e.id),
-                  ...(this.currentGroupId !== null ? [this.currentGroupId] : [])
-                ]);
-                return !activeIds.has(g.value);
-              })
+              options
             }
           },
           outputs: []
@@ -523,16 +544,7 @@ export class GraphManager extends EventEmitter<{
           label: '',
           value: node.props?.groupId,
           internal: true,
-          options: this.groups.map((g) => ({
-            value: g.id,
-            label: g.name || `Group#${g.id}`
-          })).filter((g) => {
-            const activeIds = new SvelteSet([
-              ...this.parentStack.filter(e => e.id !== this.id).map(e => e.id),
-              ...(this.currentGroupId !== null ? [this.currentGroupId] : [])
-            ]);
-            return !activeIds.has(g.value);
-          })
+          options
         },
         ...defaultInputs
       };
@@ -646,9 +658,9 @@ export class GraphManager extends EventEmitter<{
     const inputs = Object.entries(to.state?.type?.inputs ?? {});
     const outputs = from.state?.type?.outputs ?? [];
     for (let i = 0; i < inputs.length; i++) {
-      const [inputName, input] = inputs[0];
+      const [inputName, input] = inputs[i];
       for (let o = 0; o < outputs.length; o++) {
-        const output = outputs[0];
+        const output = outputs[o];
         if (input.type === output) {
           return this.createEdge(from, o, to, inputName);
         }
@@ -731,25 +743,26 @@ export class GraphManager extends EventEmitter<{
     return id;
   }
 
-  createGraph(nodes: NodeInstance[], edges: [number, number, number, string][]) {
+  createGraph(nodes: SerializedNode[], edges: [number, number, number, string][]) {
     // map old ids to new ids
     const idMap = new SvelteMap<number, number>();
 
     let startId = this.createNodeId();
 
-    nodes = nodes.map((node) => {
+    const instances: NodeInstance[] = nodes.map((node) => {
       const id = startId++;
       idMap.set(node.id, id);
       const type = this.registry.getNode(node.type);
       if (!type && !node.type.startsWith('__internal/')) {
         throw new Error(`Node type not found: ${node.type}`);
       }
-      return { ...node, id, tmp: { type } };
+      const registryType = this.registry.getNode(node.type);
+      return { ...node, id, state: { type: registryType } };
     });
 
     const _edges = edges.map((edge) => {
-      const from = nodes.find((n) => n.id === idMap.get(edge[0]));
-      const to = nodes.find((n) => n.id === idMap.get(edge[2]));
+      const from = instances.find((n) => n.id === idMap.get(edge[0]));
+      const to = instances.find((n) => n.id === idMap.get(edge[2]));
 
       if (!from || !to) {
         throw new Error('Edge references non-existing node');
@@ -764,14 +777,15 @@ export class GraphManager extends EventEmitter<{
       return [from, edge[1], to, edge[3]] as Edge;
     });
 
-    for (const node of nodes) {
-      this.nodes.set(node.id, node);
+    for (const node of instances) {
+      const n = $state(node);
+      this.nodes.set(node.id, n);
     }
 
     this.edges.push(..._edges);
 
     this.save();
-    return nodes;
+    return instances;
   }
 
   getUnusedGroups() {
@@ -1226,20 +1240,18 @@ export class GraphManager extends EventEmitter<{
     this.save();
   }
 
+  private _emitSave = debounce(() => {
+    if (this.nodes.size === 0 && this.edges.length === 0) return;
+    const state = this.serialize();
+    this.emit('save', state);
+    log.log('saving graphs', state);
+  }, 300);
+
   save() {
     if (this.currentUndoGroup) return;
-    const state = this.serialize();
-    this.history.save(state);
-
-    // This is some stupid race condition where the graph-manager emits a save event
-    // when the graph is not fully loaded
-    if (this.nodes.size === 0 && this.edges.length === 0) {
-      return;
-    }
-
-    const fullState = this.serialize();
-    this.emit('save', fullState);
-    log.log('saving graphs', fullState);
+    // History snapshot is immediate; the IDB emit is debounced.
+    this.history.save(this.serialize());
+    this._emitSave();
   }
 
   getParentsOfNode(node: NodeInstance) {

app/src/lib/graph-interface/graph-state.svelte.ts

@@ -1,11 +1,16 @@
-import { animate, lerp } from '$lib/helpers';
-import type { NodeInstance, Socket } from '@nodarium/types';
+import { animate, debounce, lerp } from '$lib/helpers';
+import type { NodeInstance, SerializedEdge, SerializedNode, Socket } from '@nodarium/types';
 import { getContext, setContext } from 'svelte';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import type { OrthographicCamera, Vector3 } from 'three';
 import type { GraphManager } from './graph-manager.svelte';
 import { ColorGenerator } from './graph/colors';
-import { getNodeHeight, getParameterHeight } from './helpers/nodeHelpers';
+import {
+  getNodeHeight,
+  getParameterHeight,
+  serializeEdge,
+  serializeNode
+} from './helpers/nodeHelpers';
 
 const graphStateKey = Symbol('graph-state');
 export function getGraphState() {
@@ -57,12 +62,20 @@ export class GraphState {
   colors = new ColorGenerator(predefinedColors);
 
   constructor(private graph: GraphManager) {
-    $effect.root(() => {
-      $effect(() => {
+    const saveCameraPosition = debounce(() => {
       localStorage.setItem(
         'cameraPosition',
         `[${this.cameraPosition[0]},${this.cameraPosition[1]},${this.cameraPosition[2]}]`
       );
+    }, 500);
+
+    $effect.root(() => {
+      $effect(() => {
+        // Read values to subscribe to reactivity, then flush lazily.
+        void this.cameraPosition[0];
+        void this.cameraPosition[1];
+        void this.cameraPosition[2];
+        saveCameraPosition();
       });
     });
     const storedPosition = localStorage.getItem('cameraPosition');
@@ -95,8 +108,8 @@ export class GraphState {
   cameraPosition: [number, number, number] = $state([140, 100, 3.5]);
 
   clipboard: null | {
-    nodes: NodeInstance[];
-    edges: [number, number, number, string][];
+    nodes: SerializedNode[];
+    edges: SerializedEdge[];
   } = null;
 
   cameraBounds = $derived([
@@ -152,15 +165,11 @@ export class GraphState {
     this.edges.delete(edgeId);
   }
 
-  updateNodePosition(node: NodeInstance) {
-    if (
-      node.state.x === node.position[0]
-      && node.state.y === node.position[1]
-    ) {
-      delete node.state.x;
-      delete node.state.y;
-    }
+  private _dirtyPositions = new SvelteSet<NodeInstance>();
+  private _positionFlushPending = false;
 
+  private _flushPositions() {
+    for (const node of this._dirtyPositions) {
       if (node.state['x'] !== undefined && node.state['y'] !== undefined) {
         if (node.state.ref) {
           node.state.ref.style.setProperty('--nx', `${node.state.x * 10}px`);
@@ -173,6 +182,25 @@ export class GraphState {
         }
       }
     }
+    this._dirtyPositions.clear();
+    this._positionFlushPending = false;
+  }
+
+  updateNodePosition(node: NodeInstance) {
+    if (
+      node.state.x === node.position[0]
+      && node.state.y === node.position[1]
+    ) {
+      delete node.state.x;
+      delete node.state.y;
+    }
+
+    this._dirtyPositions.add(node);
+    if (!this._positionFlushPending) {
+      this._positionFlushPending = true;
+      requestAnimationFrame(() => this._flushPositions());
+    }
+  }
 
   getSnapLevel() {
     const z = this.cameraPosition[2];
@@ -190,12 +218,10 @@ export class GraphState {
     if (this.activeNodeId === -1 && !this.selectedNodes?.size) {
       return;
     }
-    let nodes = [
-      this.activeNodeId,
-      ...(this.selectedNodes?.values() || [])
-    ]
+    const ids = new SvelteSet([this.activeNodeId, ...(this.selectedNodes?.values() || [])]);
+    let nodes = [...ids]
       .map((id) => this.graph.getNode(id))
-      .filter(b => !!b);
+      .filter((b): b is NodeInstance => !!b);
 
     const edges = this.graph.getEdgesBetweenNodes(nodes);
     nodes = nodes.map((node) => ({
@@ -203,13 +229,12 @@ export class GraphState {
       position: [
         this.mousePosition[0] - node.position[0],
         this.mousePosition[1] - node.position[1]
-      ],
-      tmp: undefined
+      ]
     }));
 
     this.clipboard = {
-      nodes: nodes,
-      edges: edges
+      nodes: nodes.map(n => serializeNode(n)),
+      edges: edges.map(e => serializeEdge(e))
     };
   }
 
@@ -255,13 +280,16 @@ export class GraphState {
   pasteNodes() {
     if (!this.clipboard) return;
 
-    const nodes = this.clipboard.nodes
-      .map((node) => {
-        node.position[0] = this.mousePosition[0] - node.position[0];
-        node.position[1] = this.mousePosition[1] - node.position[1];
-        return node;
-      })
-      .filter(Boolean) as NodeInstance[];
+    // Create fresh node objects — never mutate clipboard so repeat pastes work correctly.
+    // State is also spread (with cleared parents/children) so createGraph's mutations
+    // don't corrupt the clipboard's stored state references.
+    const nodes = this.clipboard.nodes.map((node) => ({
+      ...node,
+      position: [
+        this.mousePosition[0] - node.position[0],
+        this.mousePosition[1] - node.position[1]
+      ] as [number, number]
+    }));
 
     const newNodes = this.graph.createGraph(nodes, this.clipboard.edges);
     this.selectedNodes.clear();

app/src/lib/graph-interface/graph/Graph.svelte

@@ -16,6 +16,7 @@
   import { maxZoom, minZoom } from './constants';
   import { FileDropEventManager } from './drop.events';
   import { MouseEventManager } from './mouse.events';
+  import ZoomIndicator from './ZoomIndicator.svelte';
 
   const {
     keymap,
@@ -227,7 +228,7 @@
           style:transform={`scale(${graphState.cameraPosition[2] * 0.1})`}
           class:hovering-sockets={graphState.activeSocket}
         >
-          {#each graph.nodeArray as node, index (node.id)}
+          {#each graph.nodeArray as node, index (node)}
             <NodeEl
               bind:node={graph.nodeArray[index]}
               inView={node ? graphState.isNodeInView(node) : false}
@@ -247,6 +248,8 @@
   <HelpView registry={graph.registry} />
 {/if}
 
+<ZoomIndicator {safePadding} />
+
 <style>
   .graph-wrapper {
     position: relative;

app/src/lib/graph-interface/graph/ZoomIndicator.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { getGraphState } from '../graph-state.svelte';
+
+  const { safePadding }: {
+    safePadding?: { left?: number; right?: number; bottom?: number; top?: number };
+  } = $props();
+
+  const graphState = getGraphState();
+</script>
+
+<div class="zoom-indicator" style:right="calc({safePadding?.right ?? 0}px + 10px)">
+  <button
+    class="fit-btn"
+    title="Fit to view (.)"
+    onclick={() => graphState.centerNode()}
+    aria-label="Fit nodes to view"
+  >
+    ⊡
+  </button>
+  <span>{Math.round(graphState.cameraPosition[2] * 10)}%</span>
+</div>
+
+<style>
+  .zoom-indicator {
+    position: absolute;
+    bottom: 10px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-family: var(--font-family);
+    font-size: 0.75em;
+    color: var(--color-text);
+    opacity: 0.35;
+    z-index: 10;
+    transition: opacity 0.15s, right 0.2s;
+    pointer-events: auto;
+  }
+
+  .zoom-indicator:hover {
+    opacity: 0.9;
+  }
+
+  .fit-btn {
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    font-size: 1.1em;
+    line-height: 1;
+    padding: 0;
+  }
+</style>

app/src/lib/graph-interface/graph/drop.events.ts

@@ -1,4 +1,5 @@
 import { GraphSchema, type NodeId } from '@nodarium/types';
+import { toast } from '@nodarium/ui';
 import type { GraphManager } from '../graph-manager.svelte';
 import type { GraphState } from '../graph-state.svelte';
 
@@ -41,6 +42,9 @@ export class FileDropEventManager {
           props,
           position: pos
         });
+      }).catch((e) => {
+        toast(`Failed to load node: ${nodeId}`, 'error');
+        console.error(e);
       });
     } else if (event.dataTransfer.files.length) {
       const file = event.dataTransfer.files[0];
@@ -65,8 +69,13 @@ export class FileDropEventManager {
         reader.onload = (e) => {
           const buffer = e.target?.result as ArrayBuffer;
           if (buffer) {
+            try {
               const state = GraphSchema.parse(JSON.parse(buffer.toString()));
               this.graph.load(state);
+            } catch (e) {
+              toast('Failed to load graph: invalid file', 'error');
+              console.error(e);
+            }
           }
         };
         reader.readAsText(file);

app/src/lib/graph-interface/graph/mouse.events.ts

@@ -9,6 +9,7 @@ import { EdgeInteractionManager } from './edge.events';
 
 export class MouseEventManager {
   edgeInteractionManager: EdgeInteractionManager;
+  private pendingSelectionFrame = false;
 
   constructor(
     private graph: GraphManager,
@@ -282,6 +283,11 @@ export class MouseEventManager {
     if (this.state.boxSelection) {
       event.preventDefault();
       event.stopPropagation();
+      if (!this.pendingSelectionFrame) {
+        this.pendingSelectionFrame = true;
+        requestAnimationFrame(() => {
+          this.pendingSelectionFrame = false;
+          if (!this.state.mouseDown) return;
           const mouseD = this.state.projectScreenToWorld(
             this.state.mouseDown[0],
             this.state.mouseDown[1]
@@ -301,6 +307,8 @@ export class MouseEventManager {
               this.state.selectedNodes?.delete(node.id);
             }
           }
+        });
+      }
       return;
     }
 

app/src/lib/graph-interface/helpers/nodeHelpers.ts

@@ -38,7 +38,7 @@ export function serializeNode(node: SerializedNode | NodeInstance): SerializedNo
     id: node.id,
     position: [...node.position],
     type: node.type,
-    props: node.props
+    props: node.props ? JSON.parse(JSON.stringify(node.props)) : undefined
   };
 }
 

app/src/lib/graph-interface/keymaps.ts

@@ -1,5 +1,6 @@
 import type { createKeyMap } from '$lib/helpers/createKeyMap';
 import { panelState } from '$lib/sidebar/PanelState.svelte';
+import { toast } from '@nodarium/ui';
 import FileSaver from 'file-saver';
 import type { GraphManager } from './graph-manager.svelte';
 import type { GraphState } from './graph-state.svelte';
@@ -146,6 +147,7 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
         type: 'application/json;charset=utf-8'
       });
       FileSaver.saveAs(blob, 'nodarium-graph.json');
+      toast('Graph downloaded', 'success', 1500);
     }
   });
 

app/src/lib/node-registry/node-registry-client.ts

@@ -136,12 +136,14 @@ export class RemoteNodeRegistry implements NodeRegistry {
   }
 
   async register(id: string, wasmBuffer: ArrayBuffer) {
-    let wrapper: ReturnType<typeof createWasmWrapper> = null!;
+    const wrapper = (() => {
       try {
-      wrapper = createWasmWrapper(wasmBuffer);
+        return createWasmWrapper(wasmBuffer);
       } catch (error) {
         console.error(`Failed to create node wrapper for node: ${id}`, error);
+        throw error;
       }
+    })();
 
     const rawDefinition = wrapper.get_definition();
     const definition = NodeDefinitionSchema.safeParse(rawDefinition);

app/src/lib/project-manager/ProjectManager.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { defaultPlant, lottaFaces, plant, simple } from '$lib/graph-templates';
   import type { Graph } from '$lib/types';
-  import { InputSelect } from '@nodarium/ui';
+  import { Button, ConfirmDialog, InputSelect, Spinner } from '@nodarium/ui';
   import type { ProjectManager } from './project-manager.svelte';
 
   const { projectManager } = $props<{ projectManager: ProjectManager }>();
@@ -31,16 +31,27 @@
     newProjectName = '';
     showNewProject = false;
   }
+
+  let pendingDeleteId = $state<number | null>(null);
+  let confirmOpen = $state(false);
+
+  function requestDelete(id: number, e: MouseEvent) {
+    e.stopPropagation();
+    pendingDeleteId = id;
+    confirmOpen = true;
+  }
+
+  function confirmDelete() {
+    if (pendingDeleteId !== null) {
+      projectManager.handleDeleteProject(pendingDeleteId);
+      pendingDeleteId = null;
+    }
+  }
 </script>
 
 <header class="flex justify-between px-4 h-[70px] border-b-1 border-outline items-center bg-layer-2">
   <h3>Project</h3>
-  <button
-    class="px-3 py-1 bg-layer-1 rounded"
-    onclick={() => (showNewProject = !showNewProject)}
-  >
-    New
-  </button>
+  <Button onclick={() => (showNewProject = !showNewProject)}>New</Button>
 </header>
 
 {#if showNewProject}
@@ -53,20 +64,11 @@
       onkeydown={(e) => e.key === 'Enter' && handleCreate()}
     />
     <InputSelect options={templates.map(t => t.name)} bind:value={selectedTemplateIndex} />
-    <button
-      class="cursor-pointer self-end px-3 py-1 bg-selected rounded"
-      onclick={() => handleCreate()}
-    >
-      Create
-    </button>
+    <Button variant="primary" class="self-end" onclick={() => handleCreate()}>Create</Button>
   </div>
 {/if}
 
 <div class="text-white min-h-screen">
-  {#if projectManager.loading}
-    <p>Loading...</p>
-  {/if}
-
   <ul>
     {#each projectManager.projects as project (project.id)}
       <li>
@@ -89,16 +91,35 @@
           <div class="flex justify-between items-center grow">
             <span>{project.meta?.title || 'Untitled'}</span>
             <button
-              class="text-layer-1! bg-red-500 w-7 text-xl rounded-sm cursor-pointer opacity-20 hover:opacity-80"
-              onclick={() => {
-                projectManager.handleDeleteProject(project.id!);
-              }}
+              class="opacity-20 hover:opacity-70 transition-opacity cursor-pointer p-1 rounded text-red-400"
+              onclick={(e) => requestDelete(project.id!, e)}
+              aria-label="Delete project"
             >
-              ×
+              <span class="i-[tabler--trash] w-4 h-4 block"></span>
             </button>
           </div>
         </div>
       </li>
+    {:else}
+      {#if projectManager.loading}
+        <div class="flex items-center gap-2 p-4">
+          <Spinner size={12} />
+          <p>Loading</p>
+        </div>
+      {:else}
+        <li class="px-4 py-8 text-center opacity-40 text-sm">
+          No projects yet.<br />Press <b>New</b> to create one.
+        </li>
+      {/if}
     {/each}
   </ul>
 </div>
+
+<ConfirmDialog
+  bind:open={confirmOpen}
+  title="Delete project?"
+  message="This cannot be undone. The project and all its data will be permanently removed."
+  confirmLabel="Delete"
+  cancelLabel="Cancel"
+  onconfirm={confirmDelete}
+/>

app/src/lib/project-manager/project-manager.svelte.ts

@@ -10,14 +10,16 @@ export class ProjectManager {
     'node.activeProjectId',
     undefined
   );
-  public readonly loading = $derived(this.graph?.id !== this.activeProjectId.value);
+  public readonly loading = $derived(
+    this.projects.length && this.graph?.id !== this.activeProjectId.value
+  );
 
   constructor() {
     this.init();
   }
 
   async saveGraph(g: Graph) {
-    db.saveGraph(g);
+    await db.saveGraph(g);
   }
 
   private async init() {

app/src/lib/result-viewer/debug.ts

@@ -32,7 +32,7 @@ function writePath(scene: Group, data: Int32Array): Vector3[] {
 
   // Instanced spheres at points
   if (positions.length > 0) {
-    const sphereGeometry = new SphereGeometry(0.05, 8, 8); // keep low-poly
+    const sphereGeometry = new SphereGeometry(0.02, 8, 8); // keep low-poly
     const sphereMaterial = new MeshBasicMaterial({
       color: 0xff0000,
       depthTest: false

app/src/lib/result-viewer/geometryPool.ts

@@ -207,6 +207,7 @@ export function createInstancedGeometryPool(
       existingInstance
       && instanceCount > existingInstance.geometry.userData.count
     ) {
+      existingInstance.geometry.dispose();
       scene.remove(existingInstance);
       instances.splice(instances.indexOf(existingInstance), 1);
       existingInstance = new InstancedMesh(geometry, material, instanceCount);

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

@@ -1,18 +0,0 @@
-import type { Graph, RuntimeExecutor } from '@nodarium/types';
-
-export class RemoteRuntimeExecutor implements RuntimeExecutor {
-  constructor(private url: string) {}
-
-  async execute(graph: Graph, settings: Record<string, unknown>): Promise<Int32Array> {
-    const res = await fetch(this.url, {
-      method: 'POST',
-      body: JSON.stringify({ graph, settings })
-    });
-
-    if (!res.ok) {
-      throw new Error(`Failed to execute graph`);
-    }
-
-    return new Int32Array(await res.arrayBuffer());
-  }
-}

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

@@ -134,6 +134,15 @@ function getValue(input: NodeInput, value?: unknown) {
     return encodeFloat(value as number);
   }
 
+  if (input.type === 'select' && typeof value !== 'number') {
+    const index = input.options?.indexOf(value as string);
+    if (index === undefined || index < 0) {
+      // Defaultl to the first option
+      return 0;
+    }
+    return index;
+  }
+
   if (Array.isArray(value)) {
     if (input.type === 'vec3' || input.type === 'shape') {
       return [
@@ -159,6 +168,8 @@ function getValue(input: NodeInput, value?: unknown) {
     return value;
   }
 
+  console.log({ input, value });
+
   throw new Error(`Unknown input type ${input.type}`);
 }
 
@@ -173,9 +184,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
   constructor(
     private registry: NodeRegistry,
     public cache?: SyncCache<Int32Array>
-  ) {
-    this.cache = undefined;
-  }
+  ) {}
 
   private async getNodeDefinitions(graph: Graph) {
     if (this.registry.status !== 'ready') {
@@ -399,7 +408,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
         log.groupEnd();
       } catch (e) {
         log.groupEnd();
-        log.error(`Error executing node ${node_type.id || node.id}`, e);
+        throw e;
       }
     }
 

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

@@ -2,6 +2,7 @@ import { debugNode } from '$lib/node-registry/debugNode';
 import { IndexDBCache, RemoteNodeRegistry } from '$lib/node-registry/index';
 import type { Graph } from '@nodarium/types';
 import { createPerformanceStore } from '@nodarium/utils';
+import * as Comlink from 'comlink';
 import { MemoryRuntimeExecutor } from './runtime-executor';
 import { MemoryRuntimeCache } from './runtime-executor-cache';
 
@@ -38,6 +39,9 @@ export async function executeGraph(
   performanceStore.startRun();
   const res = await executor.execute(graph, settings);
   performanceStore.stopRun();
+  if (res?.buffer) {
+    return Comlink.transfer(res, [res.buffer]);
+  }
   return res;
 }
 

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

@@ -12,8 +12,8 @@ export class WorkerRuntimeExecutor implements RuntimeExecutor {
   getPerformanceData() {
     return this.worker.getPerformanceData();
   }
-  getDebugData() {
-    return this.worker.getDebugData();
+  async getDebugData() {
+    return await this.worker.getDebugData();
   }
   set useRuntimeCache(useCache: boolean) {
     this.worker.setUseRuntimeCache(useCache);

app/src/lib/settings/NestedSettings.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { localState } from '$lib/helpers/localState.svelte';
   import type { NodeInput } from '@nodarium/types';
-  import Input from '@nodarium/ui';
+  import Input, { Button as UiButton } from '@nodarium/ui';
   import { onMount } from 'svelte';
   import NestedSettings from './NestedSettings.svelte';
 
@@ -126,9 +126,9 @@
   {@const inputType = type[key]}
   <div class="input input-{inputType.type}" class:first-level={depth === 1}>
     {#if inputType.type === 'button'}
-      <button onclick={() => onButtonClick?.(id)}>
+      <UiButton onclick={() => onButtonClick?.(id)}>
         {inputType.label || key}
-      </button>
+      </UiButton>
     {:else}
       {#if inputType.label !== ''}
         <label for={id}>{inputType.label || key}</label>
@@ -224,13 +224,6 @@
     gap: 10px;
   }
 
-  button {
-    cursor: pointer;
-    background: var(--color-layer-2);
-    padding-block: 5px;
-    border-radius: 4px;
-  }
-
   hr {
     margin: 0;
     left: 0;

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

@@ -8,7 +8,7 @@
   import { humanizeDuration } from '$lib/helpers';
   import { localState } from '$lib/helpers/localState.svelte';
   import Monitor from '$lib/performance/Monitor.svelte';
-  import { InputNumber } from '@nodarium/ui';
+  import { Button, InputNumber } from '@nodarium/ui';
   import { writable } from 'svelte/store';
 
   function calculateStandardDeviation(array: number[]) {
@@ -112,7 +112,7 @@
       onclick={() => copyContent(result?.stdev + '')}
     >(click to copy)</i>
     <div>
-      <button onclick={() => (isRunning = false)}>reset</button>
+      <Button onclick={() => (isRunning = false)}>reset</Button>
     </div>
   {:else if isRunning}
     <p>WarmUp ({$warmUp}/{warmUpAmount})</p>
@@ -126,7 +126,7 @@
   {:else}
     <label for="bench-samples">Samples</label>
     <InputNumber id="bench-sample" bind:value={amount.value} max={1000} step={1} />
-    <button onclick={benchmark} disabled={isRunning}>start</button>
+    <Button variant="primary" onclick={benchmark} disabled={isRunning}>start</Button>
   {/if}
 </div>
 

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { Button, toast } from '@nodarium/ui';
   import FileSaver from 'file-saver';
   import type { Group } from 'three';
   import type { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';
@@ -28,11 +29,12 @@
     exporter.parse(
       scene,
       (gltf) => {
-        // download .gltf file
         download(gltf as ArrayBuffer, 'plant', 'text/plain', 'gltf');
+        toast('Exported as GLTF', 'success');
       },
       (err) => {
-        console.log(err);
+        const msg = err instanceof Error ? err.message : String(err);
+        toast(`GLTF export failed: ${msg}`, 'error');
       }
     );
   }
@@ -45,13 +47,18 @@
         objExporter = new m.OBJExporter();
         return objExporter;
       }));
+    try {
       const result = exporter.parse(scene);
-    // download .obj file
       download(result, 'plant', 'text/plain', 'obj');
+      toast('Exported as OBJ', 'success');
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      toast(`OBJ export failed: ${msg}`, 'error');
+    }
   }
 </script>
 
-<div class="p-4">
-  <button onclick={exportObj}>export obj</button>
-  <button onclick={exportGltf}>export gltf</button>
+<div class="p-4 flex gap-2">
+  <Button onclick={exportObj}>export obj</Button>
+  <Button onclick={exportGltf}>export gltf</Button>
 </div>

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

@@ -8,7 +8,7 @@
     graph
       ? {
         ...graph,
-        nodes: graph.nodes.map((n: object) => ({ ...n, tmp: undefined, state: undefined }))
+        nodes: graph.nodes.map((n: object) => ({ ...n, state: undefined }))
       }
       : null
   );

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { GraphManager } from '$lib/graph-interface/graph-manager.svelte';
   import type { GroupDefinition } from '@nodarium/types';
+  import { Button } from '@nodarium/ui';
   import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 
   type Props = { manager: GraphManager };
@@ -51,9 +52,9 @@
   <div class="panel p-4">
     <div class="header">
       <span>Unused groups</span>
-      <button class="remove-all" onclick={() => manager.removeUnusedGroups()}>
+      <Button size="sm" variant="destructive" onclick={() => manager.removeUnusedGroups()}>
         Remove all
-      </button>
+      </Button>
     </div>
 
     <ul class="tree">
@@ -92,20 +93,6 @@
     opacity: 0.7;
   }
 
-  .remove-all {
-    background: none;
-    border: 1px solid var(--color-outline);
-    border-radius: 4px;
-    color: var(--color-text);
-    cursor: pointer;
-    font-family: var(--font-family);
-    font-size: 0.85em;
-    padding: 0.2em 0.5em;
-  }
-
-  .remove-all:hover {
-    border-color: var(--color-active);
-  }
 
   .tree {
     list-style: none;

app/src/routes/+page.svelte

@@ -7,7 +7,7 @@
   import { debugNode } from '$lib/node-registry/debugNode';
   import { groupNode } from '$lib/node-registry/groupNode.js';
   import { IndexDBCache, RemoteNodeRegistry } from '$lib/node-registry/index';
-  import NodeStore from '$lib/node-store/NodeStore.svelte';
+
   import PerformanceViewer from '$lib/performance/PerformanceViewer.svelte';
   import { ProjectManager } from '$lib/project-manager/project-manager.svelte';
   import ProjectManagerEl from '$lib/project-manager/ProjectManager.svelte';
@@ -29,11 +29,13 @@
   import { tutorialConfig } from '$lib/tutorial/tutorial-config';
   import { Planty } from '@nodarium/planty';
   import type { Graph, NodeInstance } from '@nodarium/types';
+  import { Spinner, Toast, toast } from '@nodarium/ui';
   import { createPerformanceStore } from '@nodarium/utils';
   import type { Group } from 'three';
 
   let performanceStore = createPerformanceStore();
   let planty = $state<ReturnType<typeof Planty>>();
+  let pendingSave = false;
 
   const { data } = $props();
 
@@ -51,8 +53,8 @@
   );
 
   $effect(() => {
-    workerRuntime.useRegistryCache = appSettings.value.debug.cache.useRuntimeCache;
-    workerRuntime.useRuntimeCache = appSettings.value.debug.cache.useRegistryCache;
+    workerRuntime.useRegistryCache = appSettings.value.debug.cache.useRegistryCache;
+    workerRuntime.useRuntimeCache = appSettings.value.debug.cache.useRuntimeCache;
 
     if (appSettings.value.debug.cache.useRegistryCache) {
       nodeRegistry.cache = registryCache;
@@ -67,8 +69,19 @@
     }
   });
 
+  $effect(() => {
+    const handler = (e: BeforeUnloadEvent) => {
+      if (pendingSave) {
+        e.preventDefault();
+      }
+    };
+    window.addEventListener('beforeunload', handler);
+    return () => window.removeEventListener('beforeunload', handler);
+  });
+
   let activeNode = $state<NodeInstance | undefined>(undefined);
   let scene = $state<Group>(null!);
+  let isExecuting = $state(false);
 
   let sidebarOpen = $state(false);
   let graphInterface = $state<ReturnType<typeof GraphInterface>>(null!);
@@ -101,10 +114,16 @@
     }
   });
 
+  let timeout: ReturnType<typeof setTimeout>;
+
   async function update(
     g: Graph,
     s: Record<string, unknown> = $state.snapshot(graphSettings)
   ) {
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      isExecuting = true;
+    }, 100);
     performanceStore.startRun();
     try {
       let a = performance.now();
@@ -127,8 +146,11 @@
       }
       viewerComponent?.update(graphResult);
     } catch (error) {
-      console.log('errors', error);
+      const msg = error instanceof Error ? error.message : String(error);
+      toast(`Execution failed: ${msg}`, 'error');
     } finally {
+      clearTimeout(timeout);
+      isExecuting = false;
       performanceStore.stopRun();
     }
   }
@@ -248,6 +270,7 @@
   <header></header>
   <Grid.Row>
     <Grid.Cell>
+      <div class="viewer-cell">
         <Viewer
           bind:scene
           bind:this={viewerComponent}
@@ -255,6 +278,12 @@
           debugData={debugData}
           centerCamera={appSettings.value.centerCamera}
         />
+        {#if isExecuting}
+          <div class="viewer-spinner" aria-label="Executing graph">
+            <Spinner size={28} />
+          </div>
+        {/if}
+      </div>
     </Grid.Cell>
     <Grid.Cell>
       {#if pm.graph}
@@ -270,7 +299,11 @@
             bind:showHelp={appSettings.value.nodeInterface.showHelp}
             bind:settings={graphSettings}
             bind:settingTypes={graphSettingTypes}
-            onsave={(g) => pm.saveGraph(g)}
+            onsave={async (g) => {
+              pendingSave = true;
+              await pm.saveGraph(g);
+              pendingSave = false;
+            }}
             onresult={(result) => handleUpdate(result as Graph)}
           />
         {/key}
@@ -299,15 +332,7 @@
         <Panel id="exports" title="Exporter" icon="i-[tabler--package-export]">
           <ExportSettings {scene} />
         </Panel>
-        {#if 0 > 1}
-          <Panel
-            id="node-store"
-            title="Node Store"
-            icon="i-[tabler--database] bg-green-400"
-          >
-            <NodeStore registry={nodeRegistry} />
-          </Panel>
-        {/if}
+
         <Panel
           id="performance"
           title="Performance"
@@ -367,6 +392,8 @@
   </Grid.Row>
 </div>
 
+<Toast />
+
 <style>
   header {
     background-color: var(--color-layer-1);
@@ -399,6 +426,20 @@
     grid-template-rows: 0px 1fr;
   }
 
+  .viewer-cell {
+    position: relative;
+    height: 100%;
+  }
+
+  .viewer-spinner {
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
+    color: var(--color-text, #cecece);
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
   .wrapper :global(canvas) {
     transition: opacity 0.3s ease;
     opacity: 1;

docs/UX.md

@@ -0,0 +1,645 @@
+# Comprehensive UX Practices for Web Applications
+
+## Introduction
+
+This document consolidates many of the most important practical UX principles for modern web applications.
+
+---
+
+# 1. Core UX Principles
+
+## 1.1 Visibility of System Status
+
+Users should always understand:
+
+- What the system is doing
+- Whether an action succeeded
+- Whether work is still in progress
+- Whether an error occurred
+
+### Good Practices
+
+- Show loading indicators immediately
+- Show success confirmations after important actions
+- Show inline validation messages
+- Display progress for long-running tasks
+- Use skeleton loading states instead of blank screens
+- Prevent silent failures
+- Avoid ambiguous UI states
+
+### Bad Practices
+
+- Buttons with no feedback after clicking
+- Infinite spinners without explanation
+- Hidden background operations
+- Saving without visible confirmation
+
+---
+
+## 1.2 Predictability and Consistency
+
+Users build mental models quickly.
+
+Breaking established expectations increases cognitive load and causes mistakes.
+
+### Good Practices
+
+- Use consistent layouts
+- Keep interaction patterns stable
+- Reuse common UI conventions
+- Keep naming and terminology consistent
+- Use standard keyboard shortcuts
+- Make similar components behave similarly
+
+### Bad Practices
+
+- Different button styles for identical actions
+- Inconsistent navigation behavior
+- Custom controls that ignore platform conventions
+- Unexpected modal behavior
+
+---
+
+## 1.3 Recognition Over Recall
+
+Interfaces should minimize memory requirements.
+
+Users should recognize options instead of remembering information.
+
+### Good Practices
+
+- Show recent searches
+- Use autocomplete
+- Display contextual hints
+- Preserve previously entered values
+- Use visible labels
+- Keep important actions visible
+
+### Bad Practices
+
+- Placeholder-only labels
+- Hidden functionality
+- Requiring users to remember previous state
+- Removing useful context during workflows
+
+---
+
+## 1.4 Error Prevention
+
+Preventing mistakes is better than handling mistakes.
+
+### Good Practices
+
+- Disable impossible actions
+- Validate input early
+- Warn before destructive operations
+- Use constrained input formats
+- Use safe defaults
+- Prefer undo over confirmation dialogs
+
+### Bad Practices
+
+- Destructive actions near common actions
+- Easy accidental deletion
+- Poor validation timing
+- Irreversible operations without recovery
+
+---
+
+# 2. Input and Form UX
+
+Forms are one of the most important and failure-prone areas in web applications.
+
+---
+
+## 2.1 Input Focus Behavior
+
+### Good Practices
+
+- Autofocus the primary field when appropriate
+- Preserve focus during rerenders
+- Preserve cursor position
+- Support keyboard-first workflows
+- Use logical tab ordering
+
+### Auto-Selecting Input Text
+
+Auto-selecting text on focus is context-dependent.
+
+### Good Use Cases
+
+- Quantity fields
+- Rename dialogs
+- Editable defaults
+- Quick replacement workflows
+- Temporary values users often replace entirely
+
+### Bad Use Cases
+
+- Long textareas
+- Complex text editing
+- Fields users commonly partially edit
+- Rich text editing
+
+### Principle
+
+Only auto-select when full replacement is more likely than partial editing.
+
+---
+
+## 2.2 Labels and Placeholders
+
+### Good Practices
+
+- Always use visible labels
+- Use placeholders only as supplementary examples
+- Keep labels visible after typing
+- Associate labels correctly for accessibility
+
+### Bad Practices
+
+- Placeholder-only forms
+- Ambiguous labels
+- Labels that disappear during editing
+
+---
+
+## 2.3 Validation
+
+### Recommended Validation Timing
+
+| Validation Type     | Timing    |
+| ------------------- | --------- |
+| Format validation   | Immediate |
+| Semantic validation | On blur   |
+| Server validation   | On submit |
+
+### Good Practices
+
+- Show errors near the relevant field
+- Explain how to fix issues
+- Preserve entered values after errors
+- Validate incrementally
+- Use clear language
+
+### Bad Practices
+
+- Generic “Invalid input” messages
+- Clearing form data after errors
+- Delayed validation surprises
+- Validation that interrupts typing
+
+---
+
+## 2.4 Input Types
+
+### Good Practices
+
+Use appropriate HTML input types:
+
+- `email`
+- `tel`
+- `number`
+- `date`
+- `password`
+- `search`
+
+### Benefits
+
+- Better mobile keyboards
+- Native validation
+- Improved accessibility
+- Better autofill support
+
+---
+
+## 2.5 Form Submission
+
+### Good Practices
+
+- Enter submits forms when expected
+- Escape cancels dialogs
+- Show loading states during submission
+- Prevent duplicate submissions
+- Preserve draft state
+- Allow keyboard submission
+
+### Bad Practices
+
+- Disabled submit buttons without explanation
+- Hidden validation failures
+- Silent submission failures
+
+---
+
+## 2.6 Dropdowns and Selection UX
+
+### Good Practices
+
+- Use radio buttons for small option sets
+- Use searchable selects for large datasets
+- Prefer autocomplete for many options
+- Show selected state clearly
+
+### Bad Practices
+
+- Massive unsearchable dropdowns
+- Nested dropdown hierarchies
+- Multi-select controls without search
+
+---
+
+# 3. Navigation UX
+
+---
+
+## 3.1 Orientation
+
+Users should always know:
+
+- Where they are
+- How they got there
+- What they can do next
+- How to go back
+
+### Good Practices
+
+- Highlight active navigation
+- Use breadcrumbs when helpful
+- Use meaningful page titles
+- Preserve navigation consistency
+
+---
+
+## 3.2 Navigation Structure
+
+### Good Practices
+
+- Keep hierarchy shallow
+- Group related actions
+- Use descriptive names
+- Keep primary actions stable
+
+### Bad Practices
+
+- Deep nesting
+- Ambiguous navigation labels
+- Constantly moving actions
+
+---
+
+## 3.3 URL Design
+
+### Good Practices
+
+- Use readable URLs
+- Make URLs shareable
+- Preserve app state in URLs when useful
+- Support browser history correctly
+
+### Bad Practices
+
+- Opaque generated URLs
+- Broken back button behavior
+- Losing state during navigation
+
+---
+
+# 4. Interaction Design
+
+---
+
+## 4.1 Click Targets
+
+### Good Practices
+
+- Large clickable areas
+- Adequate spacing between actions
+- Clear hover/focus states
+- Touch-friendly sizing
+
+### Bad Practices
+
+- Tiny clickable regions
+- Overlapping interactive elements
+- Hidden hit areas
+
+---
+
+## 4.2 Feedback
+
+Every interaction should produce feedback.
+
+### Good Practices
+
+- Hover states
+- Active states
+- Loading indicators
+- Success states
+- Error states
+- Optimistic updates when appropriate
+
+### Bad Practices
+
+- Dead-feeling interfaces
+- Invisible processing
+- Delayed reactions
+
+---
+
+## 4.3 Destructive Actions
+
+### Good Practices
+
+- Require confirmation for dangerous actions
+- Prefer undo systems
+- Visually distinguish destructive buttons
+- Separate destructive actions spatially
+
+### Bad Practices
+
+- Immediate irreversible deletion
+- Dangerous actions near common actions
+- Ambiguous destructive wording
+
+---
+
+## 4.4 Modal UX
+
+### Good Practices
+
+- Trap keyboard focus
+- Support Escape to close
+- Restore focus after closing
+- Prevent background interaction
+- Keep modal purpose focused
+
+### Bad Practices
+
+- Nested modals
+- Full workflows inside modals
+- Losing unsaved work accidentally
+
+---
+
+# 5. Performance UX
+
+Performance is a UX feature.
+
+Users interpret slowness as unreliability.
+
+---
+
+## 5.1 Perceived Performance
+
+### Good Practices
+
+- Show immediate visual response
+- Use optimistic UI updates
+- Preload likely next content
+- Stream content progressively
+- Use skeleton loaders
+
+### Bad Practices
+
+- Blank screens during loading
+- Long blocking operations
+- Frozen interfaces
+
+---
+
+## 5.2 Layout Stability
+
+### Good Practices
+
+- Prevent layout shift
+- Reserve image dimensions
+- Avoid moving buttons during loading
+- Keep skeletons aligned with final layout
+
+### Bad Practices
+
+- Jumping content
+- Shifting controls
+- Reflow-heavy rendering
+
+---
+
+## 5.3 Responsiveness
+
+### Good Practices
+
+- Keep UI interactive during async operations
+- Avoid blocking the main thread
+- Debounce expensive operations
+- Virtualize large lists
+
+### Bad Practices
+
+- UI freezes
+- Excessive rerenders
+- Laggy typing experiences
+
+---
+
+# 6. Accessibility
+
+Accessibility improves usability for everyone.
+
+---
+
+## 6.1 Keyboard Accessibility
+
+### Good Practices
+
+- Full keyboard navigation
+- Visible focus indicators
+- Logical tab order
+- Keyboard shortcuts for power users
+
+### Bad Practices
+
+- Mouse-only workflows
+- Hidden focus state
+- Keyboard traps
+
+---
+
+## 6.2 Semantic HTML
+
+### Good Practices
+
+- Use proper semantic elements
+- Use buttons for actions
+- Use links for navigation
+- Use headings correctly
+
+### Bad Practices
+
+- Clickable divs without accessibility support
+- Fake buttons
+- Missing semantic structure
+
+---
+
+## 6.3 Visual Accessibility
+
+### Good Practices
+
+- Sufficient color contrast
+- Support reduced motion
+- Avoid color-only communication
+- Use scalable typography
+
+### Bad Practices
+
+- Tiny text
+- Low contrast interfaces
+- Flashing animations
+
+---
+
+## 6.4 Screen Reader Support
+
+### Good Practices
+
+- Proper labels
+- Meaningful alt text
+- ARIA only when necessary
+- Correct live regions for updates
+
+### Bad Practices
+
+- Unlabeled controls
+- Excessive ARIA misuse
+- Non-announced state changes
+
+---
+
+# 7. Enterprise Application UX
+
+Enterprise UX differs significantly from marketing-oriented consumer interfaces.
+
+Power users often prioritize efficiency over visual minimalism.
+
+---
+
+## 7.1 Dense Information Design
+
+### Good Practices
+
+- Efficient data density
+- Resizable tables
+- Sticky headers
+- Multi-column layouts
+- High information throughput
+
+### Bad Practices
+
+- Excessive whitespace
+- Oversimplified dashboards
+- Hidden operational controls
+
+---
+
+## 7.2 Table UX
+
+### Good Practices
+
+- Sorting
+- Filtering
+- Column resizing
+- Pagination or virtualization
+- Keyboard navigation
+- Export functionality
+- Persistent user preferences
+
+### Bad Practices
+
+- Non-sortable enterprise tables
+- Horizontal scrolling nightmares
+- Missing filtering
+
+---
+
+## 7.3 Power User Workflows
+
+### Good Practices
+
+- Keyboard shortcuts
+- Bulk actions
+- Batch editing
+- Command palettes
+- State persistence
+- Fast navigation
+
+### Bad Practices
+
+- Forced wizard workflows
+- Excessive confirmations
+- Repetitive manual work
+
+---
+
+# 8. Mobile UX
+
+---
+
+## 8.1 Touch Design
+
+### Good Practices
+
+- Large touch targets
+- Thumb-friendly layouts
+- Avoid hover dependencies
+- Mobile-friendly spacing
+
+### Bad Practices
+
+- Tiny controls
+- Hover-only interactions
+- Precision-dependent gestures
+
+---
+
+## 8.2 Mobile Forms
+
+### Good Practices
+
+- Mobile keyboard optimization
+- Minimal typing
+- Autofill support
+- Step-by-step flows when necessary
+
+### Bad Practices
+
+- Long complex forms
+- Tiny input fields
+- Excessive required typing
+
+---
+
+# 9. Cognitive Psychology and UX
+
+---
+
+## 9.1 Hick’s Law
+
+More choices increase decision time.
+
+### Applications
+
+- Reduce unnecessary options
+- Group related actions
+- Prioritize primary actions
+
+---
+
+## 9.2 Fitts’s Law
+
+Closer and larger targets are easier to use.
+
+### Applications
+
+- Large primary buttons
+- Edge/corner placement for important actions

nodes/max/plantarium/branch/src/input.json

@@ -83,6 +83,14 @@
       "min": 0,
       "max": 360,
       "step": 0.01,
+      "value": 137.5
+    },
+    "angle": {
+      "type": "float",
+      "description": "Upward tilt of branches. 0 = horizontal, positive = upward, negative = drooping.",
+      "min": -90,
+      "max": 90,
+      "step": 1,
       "value": 0
     }
   }

nodes/max/plantarium/branch/src/lib.rs

@@ -78,7 +78,9 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
                 continue;
             }
 
-            let branch_direction = rotate_vector_by_angle(orthogonal, direction, rotation_angle);
+            let up_angle = evaluate_float(args[10]) * PI / 180.0;
+            let tilted = (orthogonal * up_angle.cos() + direction * up_angle.sin()).normalize();
+            let branch_direction = rotate_vector_by_angle(tilted, direction, rotation_angle);
 
             log!(
                 "BRANCH depth: {}, branch_origin: {:?}, direction_at: {:?}, branch_direction: {:?}",

nodes/max/plantarium/gravity/src/input.json

@@ -13,19 +13,28 @@
       "max": 1,
       "value": 1
     },
-    "curviness": {
-      "type": "float",
-      "hidden": true,
-      "min": 0,
-      "max": 1,
-      "value": 0.5
-    },
     "depth": {
       "type": "integer",
       "min": 1,
       "max": 10,
       "hidden": true,
       "value": 1
+    },
+    "elasticity": {
+      "type": "float",
+      "description": "How rigid the stem is. 0 = rope (uniform droop), 1 = stiff rod (only the tip bends).",
+      "min": 0,
+      "max": 1,
+      "step": 0.05,
+      "value": 0.3
+    },
+    "mode": {
+      "type": "select",
+      "internal": true,
+      "label": "Mode",
+      "options": ["closed-form", "chain"],
+      "hidden": true,
+      "description": "closed-form lerps each segment toward gravity; chain is a forward-kinematic cantilever where each segment rotates by an angle that grows along the stem."
     }
   }
 }

nodes/max/plantarium/gravity/src/lib.rs

@@ -20,7 +20,11 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
     let args = split_args(input);
 
     let plants = split_args(args[0]);
-    let depth = evaluate_int(args[3]);
+    let depth = evaluate_int(args[2]);
+    let elasticity = evaluate_float(args[3]).clamp(0.0, 1.0);
+    let mode = evaluate_int(args[4]); // 0 = closed-form, 1 = verlet
+    // 0 → sqrt (rope), 1 → ~4.5 (only the tip droops)
+    let bend_exponent = 0.5 + elasticity * 4.0;
 
     let mut max_depth = 0;
     for path_data in plants.iter() {
@@ -42,6 +46,77 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
             let mut output_data = path_data.clone();
             let output = wrap_path_mut(&mut output_data);
 
+            if mode == 1 {
+                // Forward-kinematic cantilever chain. Each segment rotates around
+                // an axis perpendicular to (rest_dir, gravity) by an angle that
+                // grows with alpha along the stem. Positions are built from the
+                // anchored base outward, so segment lengths are preserved by
+                // construction (no iteration, no rescaling, no oscillation).
+
+                let raw_strength = evaluate_float(args[1]);
+                let gravity_dir = Vec3::new(0.0, -1.0, 0.0);
+
+                // Tip bend angle in radians. PI/2 = horizontal tip at strength=1.
+                let max_angle = raw_strength * std::f32::consts::FRAC_PI_2;
+
+                let original: Vec<Vec3> = (0..path.length)
+                    .map(|i| {
+                        let s = i * 4;
+                        Vec3::from_slice(&path.points[s..s + 3])
+                    })
+                    .collect();
+
+                let seg_lens: Vec<f32> = (0..path.length - 1)
+                    .map(|i| (original[i + 1] - original[i]).length())
+                    .collect();
+                let rest_dirs: Vec<Vec3> = (0..path.length - 1)
+                    .map(|i| {
+                        let d = original[i + 1] - original[i];
+                        let l = d.length();
+                        if l > 0.0001 { d / l } else { Vec3::Y }
+                    })
+                    .collect();
+
+                let mut cur = vec![Vec3::ZERO; path.length];
+                cur[0] = original[0];
+
+                for i in 1..path.length {
+                    let seg_idx = i - 1;
+                    let alpha = if path.length > 2 {
+                        seg_idx as f32 / (path.length - 2) as f32
+                    } else {
+                        1.0
+                    };
+                    let bend_angle = max_angle * alpha.powf(bend_exponent);
+
+                    let rest_dir = rest_dirs[seg_idx];
+                    let mut bend_axis = rest_dir.cross(gravity_dir);
+                    let axis_len = bend_axis.length();
+                    bend_axis = if axis_len > 0.0001 {
+                        bend_axis / axis_len
+                    } else {
+                        // rest_dir parallel to gravity — pick an arbitrary
+                        // perpendicular axis to break symmetry.
+                        Vec3::X
+                    };
+
+                    // Rodrigues' rotation formula
+                    let (sin_a, cos_a) = bend_angle.sin_cos();
+                    let bent_dir = rest_dir * cos_a
+                        + bend_axis.cross(rest_dir) * sin_a
+                        + bend_axis * bend_axis.dot(rest_dir) * (1.0 - cos_a);
+
+                    cur[i] = cur[i - 1] + bent_dir * seg_lens[seg_idx];
+                }
+
+                for i in 0..path.length {
+                    let s = i * 4;
+                    output.points[s] = cur[i].x;
+                    output.points[s + 1] = cur[i].y;
+                    output.points[s + 2] = cur[i].z;
+                }
+            } else {
+                // Closed-form: per-segment lerp toward a downward vector
                 let mut offset_vec = Vec3::ZERO;
 
                 for i in 0..path.length - 1 {
@@ -49,15 +124,16 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
                     let start_index = i * 4;
 
                     let start_point = Vec3::from_slice(&path.points[start_index..start_index + 3]);
-                let end_point = Vec3::from_slice(&path.points[start_index + 4..start_index + 7]);
+                    let end_point =
+                        Vec3::from_slice(&path.points[start_index + 4..start_index + 7]);
 
                     let direction = end_point - start_point;
 
                     let length = direction.length();
 
-                let curviness = evaluate_float(args[2]);
-                let strength =
-                    evaluate_float(args[1]) / curviness.max(0.0001) * evaluate_float(args[1]);
+                    let curviness = elasticity.max(0.0001);
+                    let strength_arg = evaluate_float(args[1]) * 10.0;
+                    let strength = strength_arg / curviness * strength_arg;
 
                     log!(
                         "length: {}, curviness: {}, strength: {}",
@@ -68,7 +144,8 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
 
                     let down_point = Vec3::new(0.0, -length * strength, 0.0);
 
-                let mut mid_point = lerp_vec3(direction, down_point, curviness * alpha.sqrt());
+                    let mut mid_point =
+                        lerp_vec3(direction, down_point, curviness * alpha.powf(bend_exponent));
 
                     if mid_point[0] == 0.0 && mid_point[2] == 0.0 {
                         mid_point[0] += 0.0001;
@@ -87,6 +164,7 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
 
                     offset_vec += final_end_point - end_point;
                 }
+            }
             output_data
         })
         .collect();

nodes/max/plantarium/leaf/Cargo.toml

@@ -8,5 +8,6 @@ edition = "2018"
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
+glam = "0.30.10"
 nodarium_macros = { version = "0.1.0", path = "../../../../packages/macros" }
 nodarium_utils = { version = "0.1.0", path = "../../../../packages/utils" }

nodes/max/plantarium/leaf/src/input.json

@@ -19,6 +19,33 @@
       "max": 64,
       "value": 1,
       "hidden": true
+    },
+    "yCurve": {
+      "type": "float",
+      "description": "Curl the leaf upward along its length (radians). 0 = flat, ~1.57 = 90° tip curl.",
+      "min": -3.14,
+      "max": 3.14,
+      "step": 0.05,
+      "value": 0,
+      "hidden": true
+    },
+    "yTwist": {
+      "type": "float",
+      "description": "Twist around the leaf's spine. Combined with yCurve, produces a 3D spiral.",
+      "min": -6.28,
+      "max": 6.28,
+      "step": 0.05,
+      "value": 0,
+      "hidden": true
+    },
+    "xCurve": {
+      "type": "float",
+      "description": "Curl each cross-section into an arc, mirrored around the midrib. 0 = flat, ~1.57 = U-shape.",
+      "min": -3.14,
+      "max": 3.14,
+      "step": 0.05,
+      "value": 0,
+      "hidden": true
     }
   }
 }

nodes/max/plantarium/leaf/src/lib.rs

@@ -1,6 +1,7 @@
 use std::convert::TryInto;
 use std::f32::consts::PI;
 
+use glam::Vec3;
 use nodarium_macros::nodarium_definition_file;
 use nodarium_macros::nodarium_execute;
 use nodarium_utils::encode_float;
@@ -42,6 +43,9 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
     let input_path = split_args(args[0])[0];
     let size = evaluate_float(args[1]);
     let width_resolution = evaluate_int(args[2]).max(3) as usize;
+    let y_curve = evaluate_float(args[3]);
+    let y_twist = evaluate_float(args[4]);
+    let x_curve = evaluate_float(args[5]);
     let path_length = (input_path.len() - 4) / 2;
 
     let slice_count = path_length;
@@ -93,27 +97,97 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
 
     // Writing Positions
     let width = 50.0;
+    let leaf_length: f32 = 100.0;
     let mut positions = vec![[0.0f32; 3]; position_amount];
+
+    // Pre-compute a local frame (center, normal=local-Y, binormal=local-X) for
+    // each slice by walking the FK chain. At each step we bend around the
+    // current binormal (curls the leaf) and twist around the current tangent
+    // (rotates the bend plane → spiral).
+    let segs = (slice_count - 1).max(1) as f32;
+    let bend_per_step = y_curve / segs;
+    let twist_per_step = y_twist / segs;
+
+    let mut centers: Vec<Vec3> = Vec::with_capacity(slice_count);
+    let mut frame_n: Vec<Vec3> = Vec::with_capacity(slice_count);
+    let mut frame_b: Vec<Vec3> = Vec::with_capacity(slice_count);
+
+    let mut tangent = Vec3::new(0.0, 0.0, 1.0);
+    let mut normal = Vec3::new(0.0, 1.0, 0.0);
+    let mut binormal = Vec3::new(1.0, 0.0, 0.0);
+
+    let pz_first = decode_float(input_path[2 + 1]);
+    let mut center = Vec3::new(0.0, 0.0, pz_first - leaf_length);
+
     for i in 0..slice_count {
-        let ax = i as f32 / (slice_count -1) as f32;
+        centers.push(center);
+        frame_n.push(normal);
+        frame_b.push(binormal);
 
+        if i + 1 < slice_count {
+            let pz_curr = decode_float(input_path[2 + i * 2 + 1]);
+            let pz_next = decode_float(input_path[2 + (i + 1) * 2 + 1]);
+            let seg_len = pz_next - pz_curr;
+
+            center = center + tangent * seg_len;
+
+            // Bend around binormal — tilts tangent toward normal
+            let (sin_b, cos_b) = bend_per_step.sin_cos();
+            let new_t = tangent * cos_b + normal * sin_b;
+            let new_n = -tangent * sin_b + normal * cos_b;
+            tangent = new_t;
+            normal = new_n;
+
+            // Twist around tangent — rotates normal/binormal so the next bend
+            // happens in a rotated plane
+            let (sin_tw, cos_tw) = twist_per_step.sin_cos();
+            let new_n2 = normal * cos_tw + binormal * sin_tw;
+            let new_b = -normal * sin_tw + binormal * cos_tw;
+            normal = new_n2;
+            binormal = new_b;
+        }
+    }
+
+    for i in 0..slice_count {
+        let ax = i as f32 / segs;
         let px = decode_float(input_path[2 + i * 2 + 0]);
-        let pz = decode_float(input_path[2 + i * 2 + 1]);
+        let hw = width - px; // half-width at this slice
 
+        let c = centers[i];
+        let n = frame_n[i];
+        let b = frame_b[i];
 
         for j in 0..width_resolution {
             let alpha = j as f32 / (width_resolution - 1) as f32;
-            let x = 2.0 * (-px * (alpha - 0.5) + alpha * width);
-            let py = calculate_y(alpha-0.5)*5.0*(ax*PI).sin();
-            let pz_val = pz - 100.0;
+            // Signed cross-section parameter, -1 (left edge) → +1 (right edge)
+            let t = 2.0 * alpha - 1.0;
+            let py_local = calculate_y(alpha - 0.5) * 5.0 * (ax * PI).sin();
+
+            // X-curl: each cross-section traces a circular arc with curvature
+            // x_curve / hw. Because theta = x_curve * t is signed around the
+            // midrib, sin/cos give a mirrored arc (left and right edges curl
+            // the same direction).
+            let theta = x_curve * t;
+            let (sin_t, cos_t) = theta.sin_cos();
+            let (b_arc, n_arc) = if x_curve.abs() < 0.0001 {
+                (t * hw, 0.0)
+            } else {
+                let r = hw / x_curve;
+                (r * sin_t, r * (1.0 - cos_t))
+            };
+            // Cross-section bulge follows the rotated local frame
+            let b_total = b_arc - py_local * sin_t;
+            let n_total = n_arc + py_local * cos_t;
+
+            let world = c + b * b_total + n * n_total;
 
             let pos_idx = i * width_resolution + j;
-            positions[pos_idx] = [x - width, py, pz_val];
+            positions[pos_idx] = [world.x, world.y, world.z];
 
             let flat_idx = offset + pos_idx * 3;
-            out[flat_idx + 0] = encode_float((x - width) * size);
-            out[flat_idx + 1] = encode_float(py * size);
-            out[flat_idx + 2] = encode_float(pz_val * size);
+            out[flat_idx + 0] = encode_float(world.x * size);
+            out[flat_idx + 1] = encode_float(world.y * size);
+            out[flat_idx + 2] = encode_float(world.z * size);
         }
     }
 

nodes/max/plantarium/noise/Cargo.toml

@@ -8,6 +8,7 @@ edition = "2018"
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
+glam = "0.30.10"
 nodarium_macros = { version = "0.1.0", path = "../../../../packages/macros" }
 nodarium_utils = { version = "0.1.0", path = "../../../../packages/utils" }
 noise = "0.9.0"

nodes/max/plantarium/noise/src/input.json

@@ -15,9 +15,9 @@
     },
     "strength": {
       "type": "float",
-      "min": 0.1,
-      "max": 10,
-      "value": 2
+      "min": 0,
+      "max": 1,
+      "value": 0.5
     },
     "fixBottom": {
       "type": "float",
@@ -52,6 +52,12 @@
       "max": 5,
       "value": 1,
       "hidden": true
+    },
+    "preserveLength": {
+      "type": "boolean",
+      "label": "Preserve length",
+      "value": true,
+      "hidden": true
     }
   }
 }

nodes/max/plantarium/noise/src/lib.rs

@@ -1,3 +1,4 @@
+use glam::Vec3;
 use nodarium_macros::nodarium_definition_file;
 use nodarium_macros::nodarium_execute;
 use nodarium_utils::{
@@ -30,6 +31,7 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
     let depth = evaluate_int(args[6]);
 
     let octaves = evaluate_int(args[7]);
+    let preserve_length = evaluate_int(args[8]) != 0;
 
     let noise_x: HybridMulti<OpenSimplex> =
         HybridMulti::new(seed as u32 + 1).set_octaves(octaves as usize);
@@ -65,24 +67,82 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
 
             let length = path.get_length() as f64;
 
-            for i in 0..path.length {
-                let a = i as f64 / (path.length - 1) as f64;
+            if preserve_length {
+                // Snapshot original positions so we can derive each segment's original
+                // direction even after we've modified earlier points.
+                let orig: Vec<f32> = path.points[..path.length * 4].to_vec();
 
+                // Anchor the base (fix_bottom=1 → scale=0, no displacement at root)
+                let scale0 = lerp(1.0, 0.0, fix_bottom);
+                path.points[0] += noise_x.get([j as f64, 0.0]) as f32
+                    * directional_strength[0]
+                    * strength
+                    * scale0;
+                path.points[1] += noise_y.get([j as f64, 0.0]) as f32
+                    * directional_strength[1]
+                    * strength
+                    * scale0;
+                path.points[2] += noise_z.get([j as f64, 0.0]) as f32
+                    * directional_strength[2]
+                    * strength
+                    * scale0;
+                let mut prev = Vec3::new(path.points[0], path.points[1], path.points[2]);
+
+                for i in 1..path.length {
+                    let a = i as f64 / (path.length - 1) as f64;
                     let px = j as f64 + a * length * scale;
                     let py = a * scale as f64;
+                    let sf = lerp(1.0, a as f32, fix_bottom);
+
+                    let orig_dir = Vec3::new(
+                        orig[i * 4] - orig[(i - 1) * 4],
+                        orig[i * 4 + 1] - orig[(i - 1) * 4 + 1],
+                        orig[i * 4 + 2] - orig[(i - 1) * 4 + 2],
+                    );
+                    let orig_len = orig_dir.length();
+
+                    let perturb = Vec3::new(
+                        noise_x.get([px, py]) as f32 * directional_strength[0] * strength * sf,
+                        noise_y.get([px, py]) as f32 * directional_strength[1] * strength * sf,
+                        noise_z.get([px, py]) as f32 * directional_strength[2] * strength * sf,
+                    );
+
+                    // Perturb the original direction and rescale to original length.
+                    // Biasing toward orig_dir prevents the segment from folding back.
+                    let mut new_dir = orig_dir + perturb;
+                    let nd_len = new_dir.length();
+                    if nd_len > 0.0001 && orig_len > 0.0001 {
+                        new_dir *= orig_len / nd_len;
+                    } else {
+                        new_dir = orig_dir;
+                    }
+
+                    let cur = prev + new_dir;
+                    path.points[i * 4] = cur.x;
+                    path.points[i * 4 + 1] = cur.y;
+                    path.points[i * 4 + 2] = cur.z;
+                    prev = cur;
+                }
+            } else {
+                for i in 0..path.length {
+                    let a = i as f64 / (path.length - 1) as f64;
+                    let px = j as f64 + a * length * scale;
+                    let py = a * scale as f64;
+                    let sf = lerp(1.0, a as f32, fix_bottom);
 
                     path.points[i * 4] += noise_x.get([px, py]) as f32
                         * directional_strength[0]
                         * strength
-                    * lerp(1.0, a as f32, fix_bottom);
+                        * sf;
                     path.points[i * 4 + 1] += noise_y.get([px, py]) as f32
                         * directional_strength[1]
                         * strength
-                    * lerp(1.0, a as f32, fix_bottom);
+                        * sf;
                     path.points[i * 4 + 2] += noise_z.get([px, py]) as f32
                         * directional_strength[2]
                         * strength
-                    * lerp(1.0, a as f32, fix_bottom);
+                        * sf;
+                }
             }
             path_data
         })

nodes/max/plantarium/rotate/src/input.json

@@ -29,7 +29,7 @@
       "type": "boolean",
       "internal": true,
       "hidden": true,
-      "value": true,
+      "value": false,
       "description": "If multiple objects are connected, should we rotate them as one or spread them?"
     }
   }

packages/types/src/inputs.ts

@@ -105,7 +105,6 @@ export const NodeInputSchema = z.union([
   NodeInputIntegerSchema,
   NodeInputShapeSchema,
   NodeInputSelectSchema,
-  NodeInputSeedSchema,
   NodeInputVec3Schema,
   NodeInputGeometrySchema,
   NodeInputPathSchema,

packages/ui/src/lib/Button.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    variant?: 'default' | 'primary' | 'destructive' | 'ghost';
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    children?: Snippet;
+    type?: 'button' | 'submit' | 'reset';
+  }
+
+  let {
+    variant = 'default',
+    size = 'md',
+    disabled = false,
+    class: _class = '',
+    onclick,
+    children,
+    type = 'button'
+  }: Props = $props();
+
+  const variantClasses = {
+    default: 'bg-layer-2 border border-outline text-text hover:opacity-85',
+    primary: 'bg-selected text-white border border-transparent hover:opacity-88',
+    destructive: 'bg-red-600 text-white border border-transparent hover:opacity-88',
+    ghost: 'bg-layer-2 border border-transparent text-text opacity-75 hover:opacity-100'
+  };
+
+  const sizeClasses = {
+    sm: 'px-2 py-0.5 text-xs',
+    md: 'px-3 py-1 text-sm'
+  };
+</script>
+
+<button
+  {type}
+  {disabled}
+  class:py-1={size === 'sm'}
+  class:px-1={size === 'sm'}
+  class:py-2={size !== 'sm'}
+  class="
+    inline-flex items-center gap-1.5 rounded cursor-pointer
+    font-(--font-family) leading-none whitespace-nowrap
+    transition-opacity duration-100
+    disabled:opacity-40 disabled:cursor-not-allowed
+    {variantClasses[variant]}
+    {sizeClasses[size]}
+    {_class}
+  "
+  {onclick}
+>
+  {@render children?.()}
+</button>

packages/ui/src/lib/ConfirmDialog.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Button from './Button.svelte';
+
+  interface Props {
+    open?: boolean;
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onconfirm?: () => void;
+    oncancel?: () => void;
+    children?: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    title = 'Are you sure?',
+    message,
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    onconfirm,
+    oncancel,
+    children
+  }: Props = $props();
+
+  let dialogEl: HTMLDialogElement;
+
+  $effect(() => {
+    if (!dialogEl) return;
+    if (open) {
+      dialogEl.showModal();
+    } else {
+      dialogEl.close();
+    }
+  });
+
+  function confirm() {
+    open = false;
+    onconfirm?.();
+  }
+
+  function cancel() {
+    open = false;
+    oncancel?.();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      confirm();
+    }
+  }
+
+  function handleCancel(e: Event) {
+    e.preventDefault();
+    cancel();
+  }
+</script>
+
+<dialog
+  bind:this={dialogEl}
+  class="m-auto bg-layer-1 border border-outline rounded-md p-0 text-text max-w-md w-full backdrop:bg-black/50"
+  oncancel={handleCancel}
+  onkeydown={handleKeydown}
+  onclick={(e) => {
+    if (e.target === dialogEl) cancel();
+  }}
+>
+  <div class="px-6 py-5 flex flex-col gap-3">
+    <h3 class="m-0 text-sm font-semibold">{title}</h3>
+    {#if message}
+      <p class="m-0 text-xs opacity-75 leading-relaxed">{message}</p>
+    {/if}
+    {#if children}
+      <div class="text-xs">
+        {@render children()}
+      </div>
+    {/if}
+    <div class="flex justify-end gap-2 mt-1">
+      <Button onclick={cancel}>{cancelLabel}</Button>
+      <Button variant="primary" onclick={confirm}>{confirmLabel}</Button>
+    </div>
+  </div>
+</dialog>
+
+<style>
+  dialog {
+    font-family: var(--font-family);
+  }
+
+  dialog::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+  }
+</style>

packages/ui/src/lib/JsonViewer.svelte

@@ -33,6 +33,7 @@
 <script lang="ts">
   import { browser } from '$app/environment';
   import JsonViewer from './JsonViewer.svelte';
+  import { toast } from './toast.svelte';
 
   let {
     value,
@@ -70,6 +71,11 @@
   let prevJson = '';
   let flashTimeout: ReturnType<typeof setTimeout> | null = null;
 
+  function copyValue() {
+    navigator.clipboard.writeText(JSON.stringify(key ? { [key]: value } : value, null, 2));
+    toast('Value copied to clipboard', 'success');
+  }
+
   $effect(() => {
     const json = JSON.stringify(value);
     if (prevJson && json !== prevJson) {
@@ -92,7 +98,7 @@
     <button
       class="text-text hover:bg-layer-3 cursor-pointer"
       title="Copy value"
-      onclick={() => navigator.clipboard.writeText(JSON.stringify({ [key]: value }, null, 2))}
+      onclick={() => copyValue()}
     >
       {key}
     </button><span class="text-text/40">: </span>

packages/ui/src/lib/Spinner.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  interface Props {
+    size?: number;
+    class?: string;
+  }
+  let { size = 20, class: _class = '' }: Props = $props();
+</script>
+
+<svg
+  class="animate-spin text-text shrink-0 {_class}"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  aria-label="Loading"
+  role="status"
+>
+  <circle
+    cx="12"
+    cy="12"
+    r="10"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-dasharray="40 20"
+  />
+</svg>

packages/ui/src/lib/Toast.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { fly, slide } from 'svelte/transition';
+  import { toasts } from './toast.svelte';
+
+  const typeClasses: Record<string, string> = {
+    success: 'border-l-green-500',
+    error: 'border-l-red-500',
+    info: 'border-l-active'
+  };
+</script>
+
+<div
+  class="fixed bottom-4 right-4 flex flex-col items-end gap-2 z-9999 pointer-events-none"
+  role="status"
+  aria-live="polite"
+  aria-atomic="false"
+>
+  {#each toasts.value as item (item.id)}
+    <div
+      in:slide={{ duration: 250 }}
+      out:fly={{ x: 100, duration: 250 }}
+      class="
+        bg-layer-2 text-text border border-outline rounded
+        px-3.5 py-2 text-sm min-w-45 max-w-xs w-fit
+        border-l-3 {typeClasses[item.type] ?? 'border-l-outline'}
+      "
+    >
+      {item.message}
+    </div>
+  {/each}
+</div>

packages/ui/src/lib/index.ts

@@ -2,14 +2,20 @@ export { default as Input } from './Input.svelte';
 export { default as InputCheckbox } from './inputs/InputCheckbox.svelte';
 export { default as InputColor } from './inputs/InputColor.svelte';
 export { default as InputNumber } from './inputs/InputNumber.svelte';
+export { default as InputSearch } from './inputs/InputSearch.svelte';
 export { default as InputSelect } from './inputs/InputSelect.svelte';
 export { default as InputShape } from './inputs/InputShape.svelte';
 export { default as InputVec3 } from './inputs/InputVec3.svelte';
 export { default as SocketTable } from './inputs/SocketTable.svelte';
 
+export { default as Button } from './Button.svelte';
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
 export { default as Details } from './Details.svelte';
 export { default as JsonViewer } from './JsonViewer.svelte';
 export { default as ShortCut } from './ShortCut.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Toast } from './Toast.svelte';
+export { toast } from './toast.svelte';
 
 import Input from './Input.svelte';
 export default Input;

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

@@ -46,7 +46,7 @@
       class="h-full w-8 cursor-pointer appearance-none p-0"
     />
   </label>
-  <div class="flex items-center gap-1 px-2 py-1">
+  <div class="flex items-center gap-1 px-2 py-1 border-l border-outline">
     <span class="pointer-events-none text-text opacity-30">#</span>
     <input
       type="text"
@@ -64,5 +64,6 @@
     margin-top: -1px;
     margin-right: -1px;
     height: calc(100% + 2px);
+    width: calc(100% + 2px);
   }
 </style>

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

@@ -1 +1,99 @@
+<script lang="ts">
+  type SelectOption = string | { value: number; label: string };
 
+  interface Props {
+    options?: SelectOption[];
+    value?: number;
+    id?: string;
+    placeholder?: string;
+  }
+
+  let {
+    options = [],
+    value = $bindable(0),
+    id = '',
+    placeholder = 'Search…'
+  }: Props = $props();
+
+  const normalized = $derived(
+    options.map((opt, i) => typeof opt === 'string' ? { value: i, label: opt } : opt)
+  );
+
+  const selected = $derived(normalized.find((o) => o.value === value));
+
+  let query = $state('');
+  let open = $state(false);
+  let container: HTMLDivElement;
+
+  const filtered = $derived(
+    query === ''
+      ? normalized
+      : normalized.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
+  );
+
+  function select(val: number) {
+    value = val;
+    query = '';
+    open = false;
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      open = false;
+      query = '';
+    }
+    if (e.key === 'ArrowDown' && filtered.length) {
+      const idx = filtered.findIndex((o) => o.value === value);
+      value = filtered[(idx + 1) % filtered.length].value;
+    }
+    if (e.key === 'ArrowUp' && filtered.length) {
+      const idx = filtered.findIndex((o) => o.value === value);
+      value = filtered[(idx - 1 + filtered.length) % filtered.length].value;
+    }
+    if (e.key === 'Enter' && filtered.length) {
+      const match = filtered.find((o) => o.value === value) ?? filtered[0];
+      select(match.value);
+    }
+  }
+
+  function handleBlur(e: FocusEvent) {
+    if (!container.contains(e.relatedTarget as Node)) {
+      open = false;
+      query = '';
+    }
+  }
+</script>
+
+<div class="relative w-full" bind:this={container} onblur={handleBlur}>
+  <input
+    {id}
+    type="text"
+    class:rounded-b-none!={open}
+    class="w-full bg-layer-2 text-text outline outline-outline px-3 py-2 rounded-md border-none font-(--font-family) text-sm box-border focus:outline-2 focus:outline-active"
+    placeholder={open ? placeholder : (selected?.label ?? placeholder)}
+    bind:value={query}
+    onfocus={() => (open = true)}
+    onkeydown={handleKeydown}
+    autocomplete="off"
+  />
+  {#if open}
+    <div
+      class="absolute w-[calc(100%+2px)] -ml-px top-[calc(100%+2px)] left-0 right-0 bg-layer-1 border border-outline rounded-b-md max-h-50 overflow-y-auto z-100"
+      role="listbox"
+    >
+      {#each filtered as opt (opt.value)}
+        <div
+          class="px-3 py-2 text-sm text-text cursor-pointer font-(--font-family) {opt.value === value ? 'bg-layer-2' : 'hover:bg-layer-2'}"
+          role="option"
+          aria-selected={opt.value === value}
+          tabindex="-1"
+          onmousedown={() => select(opt.value)}
+        >
+          {opt.label}
+        </div>
+      {:else}
+        <div class="px-3 py-2 text-xs text-text opacity-45 italic">No results</div>
+      {/each}
+    </div>
+  {/if}
+</div>

packages/ui/src/lib/toast.svelte.ts

@@ -0,0 +1,24 @@
+export type ToastType = 'info' | 'success' | 'error';
+
+export type ToastItem = {
+  id: number;
+  message: string;
+  type: ToastType;
+};
+
+let _toasts = $state<ToastItem[]>([]);
+let _nextId = 0;
+
+export const toasts = {
+  get value() {
+    return _toasts;
+  }
+};
+
+export function toast(message: string, type: ToastType = 'info', duration = 3000) {
+  const id = _nextId++;
+  _toasts.push({ id, message, type });
+  setTimeout(() => {
+    _toasts = _toasts.filter((t) => t.id !== id);
+  }, duration);
+}

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

@@ -2,15 +2,21 @@
   import type { NodeInput } from '@nodarium/types';
   import '$lib/app.css';
   import {
+    Button,
+    ConfirmDialog,
     Details,
     InputCheckbox,
     InputColor,
     InputNumber,
+    InputSearch,
     InputSelect,
     InputShape,
     InputVec3,
     JsonViewer,
-    ShortCut
+    ShortCut,
+    Spinner,
+    Toast,
+    toast
   } from '$lib';
   import SocketTable from '$lib/inputs/SocketTable.svelte';
   import Section from './Section.svelte';
@@ -68,6 +74,7 @@
 
   let points = $state([]);
   let theme = $state('dark');
+  let confirmOpen = $state(false);
 </script>
 
 <main class="flex flex-col gap-8 py-8">
@@ -76,6 +83,17 @@
     <ThemeSelector bind:theme />
   </div>
 
+  <Section title="Button">
+    <div class="flex flex-wrap gap-3 items-center">
+      <Button>Default</Button>
+      <Button variant="primary">Primary</Button>
+      <Button variant="destructive">Destructive</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button disabled>Disabled</Button>
+      <Button size="sm">Small</Button>
+    </div>
+  </Section>
+
   <Section title="InputNumber">
     <Theme />
   </Section>
@@ -95,6 +113,13 @@
     <InputVec3 bind:value={vecValue} />
   </Section>
 
+  <Section title="InputSearch" value={options[selectValue]}>
+    <div class="flex flex-col gap-2">
+      <p>Searchable select — type to filter</p>
+      <InputSearch bind:value={selectValue} {options} />
+    </div>
+  </Section>
+
   <Section title="Select">
     <p>
       Select with simple values
@@ -148,12 +173,12 @@
 
   <Section title="JsonViewer">
     {#snippet header()}
-      <button
+      <Button
         onclick={() => randomlyUpdateJson()}
         class="-mt-1 bg-layer-2 p-1 px-2 rounded-sm cursor-pointer"
       >
         update
-      </button>
+      </Button>
     {/snippet}
     <div class="w-64 bg-layer-1 p-2 rounded">
       <JsonViewer
@@ -182,8 +207,46 @@
       <ShortCut alt ctrl key="delete" />
     </div>
   </Section>
+
+  <Section title="Spinner">
+    <div class="flex gap-6 items-center">
+      <Spinner size={16} />
+      <Spinner size={24} />
+      <Spinner size={36} />
+    </div>
+  </Section>
+
+  <Section title="Toast">
+    <div class="flex gap-3">
+      <Button onclick={() => toast('Project saved successfully', 'success')}>
+        Success toast
+      </Button>
+      <Button onclick={() => toast('Something went wrong', 'error')}>
+        Error toast
+      </Button>
+      <Button onclick={() => toast('Graph is executing…', 'info')}>
+        Info toast
+      </Button>
+    </div>
+  </Section>
+
+  <Section title="ConfirmDialog">
+    <Button onclick={() => (confirmOpen = true)}>
+      Open dialog
+    </Button>
+    <ConfirmDialog
+      bind:open={confirmOpen}
+      title="Delete project?"
+      message="This action cannot be undone. The project and all its data will be permanently removed."
+      confirmLabel="Delete"
+      cancelLabel="Cancel"
+      onconfirm={() => toast('Project deleted', 'error')}
+    />
+  </Section>
 </main>
 
+<Toast />
+
 <style>
   main {
     max-width: 800px;