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

@@ -1,13 +1,23 @@
+import type { Graph } from '@nodarium/types';
 import { describe, expect, it } from 'vitest';
 import { expandGroups } from './runtime-executor';
-import type { Graph } from '@nodarium/types';
 
 // Helpers to build minimal serialized nodes/edges
 function node(id: number, type: string, props?: Record<string, number>) {
-  return { id, type: type as Graph['nodes'][0]['type'], position: [0, 0] as [number, number], ...(props ? { props } : {}) };
+  return {
+    id,
+    type: type as Graph['nodes'][0]['type'],
+    position: [0, 0] as [number, number],
+    ...(props ? { props } : {})
+  };
 }
 
-function edge(from: number, fromSocket: number, to: number, toSocket: string): [number, number, number, string] {
+function edge(
+  from: number,
+  fromSocket: number,
+  to: number,
+  toSocket: string
+): [number, number, number, string] {
   return [from, fromSocket, to, toSocket];
 }
 

docs/LLM.md

@@ -47,6 +47,7 @@ User Interaction
 ```
 
 **Event flow:**
+
 1. User edits graph → GraphManager mutates state
 2. GraphManager emits `save` → ProjectManager persists to IndexDB
 3. GraphManager emits `result` → Runtime executes graph → Viewer updates
@@ -56,7 +57,7 @@ User Interaction
 ## Critical Files
 
 | File                                                   | Role                                                                  |
-|------|------|
+| ------------------------------------------------------ | --------------------------------------------------------------------- |
 | `app/src/routes/+page.svelte`                          | Wires all systems; creates GraphManager, runtime, registry            |
 | `app/src/lib/graph-interface/graph-manager.svelte.ts`  | Central graph logic: createNode, createEdge, serialize, load, history |
 | `app/src/lib/graph-interface/graph-state.svelte.ts`    | UI state: camera, selection, mouse, clipboard, groupSelectedNodes     |
@@ -83,54 +84,56 @@ User Interaction
 ```typescript
 // packages/types/src/types.ts
 
-type NodeId = `${string}/${string}/${string}` // e.g. "max/plantarium/stem"
+type NodeId = `${string}/${string}/${string}`; // e.g. "max/plantarium/stem"
 
 type NodeInstance = {
-  id: number
+  id: number;
-  type: NodeId
+  type: NodeId;
-  position: [number, number]
+  position: [number, number];
-  props?: Record<string, number | number[]>  // current parameter values
+  props?: Record<string, number | number[]>; // current parameter values
-  meta?: { title?: string; lastModified?: string }
+  meta?: { title?: string; lastModified?: string };
-  state: NodeRuntimeState   // runtime-only, NOT serialized
+  state: NodeRuntimeState; // runtime-only, NOT serialized
-}
+};
 
 type NodeRuntimeState = {
-  type?: NodeDefinition     // resolved definition
+  type?: NodeDefinition; // resolved definition
-  parents?: NodeInstance[]
+  parents?: NodeInstance[];
-  children?: NodeInstance[]
+  children?: NodeInstance[];
-  x?: number; y?: number    // interpolated position
+  x?: number;
-  mesh?: Mesh               // Three.js mesh reference
+  y?: number; // interpolated position
-  ref?: HTMLElement
+  mesh?: Mesh; // Three.js mesh reference
-}
+  ref?: HTMLElement;
+};
 
 type NodeDefinition = {
-  id: NodeId
+  id: NodeId;
-  inputs?: Record<string, NodeInput>
+  inputs?: Record<string, NodeInput>;
-  outputs?: string[]                      // output type names
+  outputs?: string[]; // output type names
-  meta?: { title?: string; description?: string }
+  meta?: { title?: string; description?: string };
-  execute(input: Int32Array): Int32Array  // WASM function
+  execute(input: Int32Array): Int32Array; // WASM function
-}
+};
 
 // Edge: [fromNode, outputIndex, toNode, inputSocketName]
-type Edge = [NodeInstance, number, NodeInstance, string]
+type Edge = [NodeInstance, number, NodeInstance, string];
 
 type Graph = {
-  nodes: NodeInstance[]
+  nodes: NodeInstance[];
-  edges: [number, number, number, string][]  // serialized (IDs, not refs)
+  edges: [number, number, number, string][]; // serialized (IDs, not refs)
-  settings: Record<string, unknown>
+  settings: Record<string, unknown>;
-  groups: GroupDefinition[]
+  groups: GroupDefinition[];
-}
+};
 
 type GroupDefinition = {
-  id: number
+  id: number;
-  nodes: NodeInstance[]
+  nodes: NodeInstance[];
-  edges: Edge[]
+  edges: Edge[];
-  inputs?: Record<string, NodeInput>
+  inputs?: Record<string, NodeInput>;
-  outputs?: string[]
+  outputs?: string[];
-}
+};
 ```
 
 ### NodeInput socket types
+
 `float` | `integer` | `boolean` | `select` | `seed` | `vec3` | `geometry` | `path` | `shape` | `color` | `*` (wildcard)
 
 Each input can have: `value` (default), `label`, `hidden`, `external`, `setting` (link to graph setting), `accepts` (extra compatible types).
@@ -140,34 +143,43 @@ Each input can have: `value` (default), `label`, `hidden`, `external`, `setting`
 ## Patterns & Conventions
 
 ### Svelte 5 reactivity
+
 The codebase uses Svelte 5 runes throughout — `$state`, `$derived`, `$effect`. Collections use `SvelteMap<K,V>` and `SvelteSet<T>` (from `svelte/reactivity`) instead of plain Map/Set so that mutations trigger reactive updates.
 
 ### Context API
+
 `GraphManager` and `GraphState` are provided via Svelte context (`setContext` / `getContext`) inside `GraphInterface`. All child components (Node, Edge, etc.) consume them via context rather than props.
 
 ### Edge representation
+
 In memory, edges are `[NodeInstance, outputIndex, NodeInstance, inputSocketName]` — direct object references for fast traversal. On serialization (`Graph.edges`), they become `[nodeId, outputIndex, nodeId, inputSocketName]` (plain IDs).
 
 ### Socket compatibility
+
 ```typescript
 areSocketsCompatible(outputType: string, inputType: string | string[]): boolean
 // '*' wildcard matches any type; 'geometry' accepts ['geometry', 'instances']
 ```
 
 ### WASM execution interface
+
 Every node exposes a single function: `execute(input: Int32Array): Int32Array`.
 Data encoding (Plantarium):
+
 - `[0, stemDepth, ...x,y,z,thickness]` — path
 - `[1, vertexCount, faceCount, ...faces, ...vertices, ...normals]` — geometry
 - `[2, vertexCount, faceCount, instanceCount, stemDepth, ...]` — instances
 
 ### Event emitter
+
 `GraphManager extends EventEmitter<{ save, result, settings }>`. Subscribe with `manager.on('result', cb)`. Used to decouple the editor UI from runtime execution and persistence.
 
 ### History
+
 Every mutation goes through `HistoryManager`. Call `this.history.save(this.serialize())` before mutations; undo/redo replays jsondiffpatch deltas.
 
 ### Internal node IDs
+
 Built-in nodes use the `__internal/` namespace: `__internal/group/instance`, `__internal/node/debug`. Virtual boundary nodes use `__virtual/`: `__virtual/group/input`, `__virtual/group/output`.
 
 ---
@@ -179,7 +191,7 @@ Group selected nodes with **Ctrl+G**. A `GroupDefinition` is stored in `Graph.gr
 **Known gaps as of 2026-05-03:**
 
 | Issue                                                                                     | Location                                                           |
-|-------|----------|
+| ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
 | `createGroupNode()` called but not defined                                                | `graph-state.svelte.ts:334` → missing in `graph-manager.svelte.ts` |
 | Runtime expects `group.graph.nodes/edges`; schema has flat `nodes/edges`                  | `runtime-executor.ts` vs `types.ts`                                |
 | Runtime expects `group.inputs` as array; schema defines it as `Record<string, NodeInput>` | Same mismatch                                                      |

packages/ui/src/lib/JsonViewer.svelte

@@ -1,4 +1,4 @@
-<script module>
+<script module lang="ts">
   import { SvelteMap } from 'svelte/reactivity';
   const cache = new SvelteMap<string, Record<string, boolean>>();
 
@@ -60,7 +60,7 @@
     }
     return [] as [string, unknown][];
   });
-  const showKeys = $derived(!isArr || typeof items[0]?.[1] === "object")
+  const showKeys = $derived(!isArr || typeof items[0]?.[1] === 'object');
 
   function toggle(next: boolean) {
     open = next;
@@ -92,8 +92,10 @@
     <button
       class="text-text hover:bg-layer-3 cursor-pointer"
       title="Copy value"
-      onclick={() => navigator.clipboard.writeText(JSON.stringify({[key]: value}, null, 2))}
+      onclick={() => navigator.clipboard.writeText(JSON.stringify({ [key]: value }, null, 2))}
-    >{key}</button><span class="text-text/40">: </span>
+    >
+      {key}
+    </button><span class="text-text/40">: </span>
   {/if}
 
   {#if isExpandable}
@@ -111,7 +113,7 @@
           <div>
             <JsonViewer
               value={v}
-              key={showKeys ? k : undefined }
+              key={showKeys ? k : undefined}
               depth={depth + 1}
               path={path ? `${path}/${k}` : k}
             />{#if i < items.length - 1}<span class="text-text/20">,</span>{/if}

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

@@ -10,9 +10,7 @@
   let { options = [], value = $bindable(0), id = '' }: Props = $props();
 
   const normalized = $derived(
-    options.map((opt, i) =>
+    options.map((opt, i) => typeof opt === 'string' ? { value: i, label: opt } : opt)
-      typeof opt === 'string' ? { value: i, label: opt } : opt
-    )
   );
 </script>