chore: format

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
+    <Button variant="ghost" size="sm" onclick={() => exitToGroup()}>Root</Button>
-      class="bg-layer-2 opacity-75 hover:opacity-100 cursor-pointer rounded-sm p-1 px-2"
-      onclick={() => exitToGroup()}
-    >
-      Root
-    </button>
 
     {#each intermediateGroups as entry (entry.id)}
       <span class="i-[tabler--arrow-right]"></span>
-      <button
+      <Button variant="ghost" size="sm" onclick={() => exitToGroup(entry.id)}>
-        class="bg-layer-2 opacity-75 hover:opacity-100 cursor-pointer rounded-sm p-1 px-2"
-        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

@@ -475,6 +475,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 +517,7 @@ export class GraphManager extends EventEmitter<{
               label: '',
               value: this.groups?.[0]?.id,
               internal: true,
-              options: this.groups.map((g) => ({
+              options
-                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);
-              })
             }
           },
           outputs: []
@@ -523,16 +543,7 @@ export class GraphManager extends EventEmitter<{
           label: '',
           value: node.props?.groupId,
           internal: true,
-          options: this.groups.map((g) => ({
+          options
-            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);
-          })
         },
         ...defaultInputs
       };
@@ -731,25 +742,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 from = instances.find((n) => n.id === idMap.get(edge[0]));
-      const to = nodes.find((n) => n.id === idMap.get(edge[2]));
+      const to = instances.find((n) => n.id === idMap.get(edge[2]));
 
       if (!from || !to) {
         throw new Error('Edge references non-existing node');
@@ -764,14 +776,15 @@ export class GraphManager extends EventEmitter<{
       return [from, edge[1], to, edge[3]] as Edge;
     });
 
-    for (const node of nodes) {
+    for (const node of instances) {
-      this.nodes.set(node.id, node);
+      const n = $state(node);
+      this.nodes.set(node.id, n);
     }
 
     this.edges.push(..._edges);
 
     this.save();
-    return nodes;
+    return instances;
   }
 
   getUnusedGroups() {

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 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() {
@@ -95,8 +100,8 @@ export class GraphState {
   cameraPosition: [number, number, number] = $state([140, 100, 3.5]);
 
   clipboard: null | {
-    nodes: NodeInstance[];
+    nodes: SerializedNode[];
-    edges: [number, number, number, string][];
+    edges: SerializedEdge[];
   } = null;
 
   cameraBounds = $derived([
@@ -190,12 +195,10 @@ export class GraphState {
     if (this.activeNodeId === -1 && !this.selectedNodes?.size) {
       return;
     }
-    let nodes = [
+    const ids = new SvelteSet([this.activeNodeId, ...(this.selectedNodes?.values() || [])]);
-      this.activeNodeId,
+    let nodes = [...ids]
-      ...(this.selectedNodes?.values() || [])
-    ]
       .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 +206,12 @@ export class GraphState {
       position: [
         this.mousePosition[0] - node.position[0],
         this.mousePosition[1] - node.position[1]
-      ],
+      ]
-      tmp: undefined
     }));
 
     this.clipboard = {
-      nodes: nodes,
+      nodes: nodes.map(n => serializeNode(n)),
-      edges: edges
+      edges: edges.map(e => serializeEdge(e))
     };
   }
 
@@ -255,13 +257,16 @@ export class GraphState {
   pasteNodes() {
     if (!this.clipboard) return;
 
-    const nodes = this.clipboard.nodes
+    // Create fresh node objects — never mutate clipboard so repeat pastes work correctly.
-      .map((node) => {
+    // State is also spread (with cleared parents/children) so createGraph's mutations
-        node.position[0] = this.mousePosition[0] - node.position[0];
+    // don't corrupt the clipboard's stored state references.
-        node.position[1] = this.mousePosition[1] - node.position[1];
+    const nodes = this.clipboard.nodes.map((node) => ({
-        return node;
+      ...node,
-      })
+      position: [
-      .filter(Boolean) as NodeInstance[];
+        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/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/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
+  <Button onclick={() => (showNewProject = !showNewProject)}>New</Button>
-    class="px-3 py-1 bg-layer-1 rounded"
-    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
+    <Button variant="primary" class="self-end" onclick={() => handleCreate()}>Create</Button>
-      class="cursor-pointer self-end px-3 py-1 bg-selected rounded"
-      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"
+              class="opacity-20 hover:opacity-70 transition-opacity cursor-pointer p-1 rounded text-red-400"
-              onclick={() => {
+              onclick={(e) => requestDelete(project.id!, e)}
-                projectManager.handleDeleteProject(project.id!);
+              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,7 +10,9 @@ 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();

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">
+<div class="p-4 flex gap-2">
-  <button onclick={exportObj}>export obj</button>
+  <Button onclick={exportObj}>export obj</Button>
-  <button onclick={exportGltf}>export gltf</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

@@ -29,6 +29,7 @@
   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';
 
@@ -69,6 +70,7 @@
 
   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 +103,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 +135,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 +259,7 @@
   <header></header>
   <Grid.Row>
     <Grid.Cell>
+      <div class="viewer-cell">
         <Viewer
           bind:scene
           bind:this={viewerComponent}
@@ -255,6 +267,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}
@@ -367,6 +385,8 @@
   </Grid.Row>
 </div>
 
+<Toast />
+
 <style>
   header {
     background-color: var(--color-layer-1);
@@ -399,6 +419,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

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,96 @@
+<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>
+
+<!-- svelte-ignore a11y_interactive_supports_focus -->
+<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/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,36 @@
+<script lang="ts">
+  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 gap-2 z-[9999] pointer-events-none"
+  role="status"
+  aria-live="polite"
+  aria-atomic="false"
+>
+  {#each toasts.value as item (item.id)}
+    <div
+      class="
+        bg-layer-2 text-text border border-outline rounded
+        px-3.5 py-2 text-sm min-w-[180px] max-w-xs
+        border-l-3 {typeClasses[item.type] ?? 'border-l-outline'}
+        animate-[slide-in_0.18s_ease]
+      "
+    >
+      {item.message}
+    </div>
+  {/each}
+</div>
+
+<style>
+  @keyframes slide-in {
+    from { opacity: 0; transform: translateX(12px); }
+    to   { opacity: 1; transform: translateX(0); }
+  }
+</style>

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;