feat: some updates

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

@@ -19,7 +19,7 @@ import EventEmitter from './helpers/EventEmitter';
 import { HistoryManager } from './history-manager';
 
 const logger = createLogger('graph-manager');
-logger.mute();
+// logger.mute();
 
 const remoteRegistry = new RemoteNodeRegistry('');
 
@@ -73,15 +73,21 @@ export class GraphManager extends EventEmitter<{
   id = $state(0);
 
   nodes = new SvelteMap<number, NodeInstance>();
+  nodeArray = $derived(Array.from(this.nodes.values()));
 
   edges = $state<Edge[]>([]);
 
+  // Plain array — NOT $state. rootGraph items are plain-serialized (safe for structuredClone).
+  // savedNodes/savedEdges hold live reactive references so reactivity is preserved on exit.
   graphStack: {
     rootGraph: Graph;
+    savedNodes: Map<number, NodeInstance>;
+    savedEdges: Edge[];
+    outerGraph: Graph;
     groupId: number;
     nodeId: number;
     cameraPosition: [number, number, number];
-  }[] = $state([]);
+  }[] = [];
 
   settingTypes: Record<string, NodeInput> = {};
   settings = $state<Record<string, unknown>>();
@@ -286,6 +292,28 @@ export class GraphManager extends EventEmitter<{
     });
   }
 
+  tryConnectToDebugNode(nodeId: number) {
+    const node = this.nodes.get(nodeId);
+    if (!node) return;
+    if (node.type.endsWith('/debug')) return;
+    if (!node.state.type?.outputs?.length) return;
+    let debugNode = this.nodes.values().find(n => n.type.endsWith('/debug'));
+
+    if (!debugNode) {
+      debugNode = this.createNode({
+        type: '__internal/node/debug',
+        position: [node.position[0] + 30, node.position[1]],
+        props: {}
+      });
+    }
+
+    if (debugNode) {
+      this.createEdge(node, 0, debugNode, 'input');
+    }
+
+    return debugNode;
+  }
+
   getEdgesBetweenNodes(nodes: NodeInstance[]): [number, number, number, string][] {
     const edges = [];
     for (const node of nodes) {
@@ -313,7 +341,7 @@ export class GraphManager extends EventEmitter<{
   private _init(graph: Graph) {
     const nodes = new SvelteMap(
       graph.nodes.map((node) => {
-        const n = { ...node } as NodeInstance;
+        const n = node as NodeInstance;
         const registryType = this.registry.getNode(node.type);
         n.state = registryType ? { type: registryType } : {};
         const resolvedType = this.getNodeType(n);
@@ -457,6 +485,11 @@ export class GraphManager extends EventEmitter<{
   }
 
   getNodeType(node: NodeInstance) {
+    if (!node) {
+      console.trace('failed to get node type');
+      return;
+    }
+
     if (node.type === '__internal/group/input') {
       const groupId = this.graphStack.at(-1)?.groupId;
       const group = groupId !== undefined ? this.getGroup(groupId) : undefined;
@@ -475,7 +508,10 @@ export class GraphManager extends EventEmitter<{
       return {
         id: '__internal/group/output' as NodeId,
         inputs: Object.fromEntries(
-          (group.outputs ?? []).map((o, i) => [`out_${i}`, { type: o.type, label: o.label }])
+          (group.outputs ?? []).map((
+            o,
+            i
+          ) => [`out_${i}`, { type: o.type, label: o.label, external: true }])
         ),
         outputs: [],
         execute: (x: Int32Array) => x
@@ -492,15 +528,15 @@ export class GraphManager extends EventEmitter<{
       }
 
       const inputs = {
+        ...(node.state.type?.inputs || {}),
+        ...groupDefinition?.inputs,
         'groupId': {
           type: 'select',
           label: '',
           value: node.props?.groupId,
           internal: true,
           options: this.graph.groups.map(g => g.id)
-        },
-        ...(node.state.type?.inputs || {}),
-        ...groupDefinition?.inputs
+        }
       };
 
       const groupType = {
@@ -622,9 +658,7 @@ export class GraphManager extends EventEmitter<{
     return this.graph.groups.find(g => g.id === id);
   }
 
-  get isInsideGroup() {
-    return this.graphStack.length > 0;
-  }
+  isInsideGroup = $state(false);
 
   enterGroup(nodeId: number, cameraPosition: [number, number, number]): boolean {
     const groupNode = this.getNode(nodeId);
@@ -633,26 +667,45 @@ export class GraphManager extends EventEmitter<{
     const group = this.getGroup(groupId);
     if (!group) return false;
 
-    this.graphStack.push({ rootGraph: this.serialize(), groupId, nodeId, cameraPosition });
+    this.graphStack.push({
+      rootGraph: this.serialize(),
+      savedNodes: new Map(this.nodes),
+      savedEdges: [...this.edges],
+      outerGraph: this.graph,
+      groupId,
+      nodeId,
+      cameraPosition
+    });
     this.graph = { ...this.graph, nodes: group.nodes, edges: group.edges };
     this._init(this.graph);
     this.history.reset();
+    this.isInsideGroup = true;
     return true;
   }
 
   exitGroup(): { camera: [number, number, number]; nodeId: number } | false {
     if (!this.graphStack.length) return false;
-    const { rootGraph, groupId, nodeId, cameraPosition } = this.graphStack.pop()!;
+    const { savedNodes, savedEdges, outerGraph, groupId, nodeId, cameraPosition } = this.graphStack.pop()!;
     const internalState = this.serialize();
-    const updatedRoot = {
-      ...rootGraph,
-      groups: rootGraph.groups.map(g =>
+
+    // Restore live reactive nodes and edges so drag-reactivity is preserved
+    this.nodes.clear();
+    for (const [id, node] of savedNodes) {
+      this.nodes.set(id, node);
+    }
+    this.edges = savedEdges;
+
+    // Patch the group definition with the edited internal graph
+    this.graph = {
+      ...outerGraph,
+      groups: (outerGraph.groups ?? []).map(g =>
         g.id === groupId ? { ...g, nodes: internalState.nodes, edges: internalState.edges } : g
       )
     };
-    this.graph = updatedRoot;
-    this._init(updatedRoot);
+
     this.history.reset();
+    this.isInsideGroup = this.graphStack.length > 0;
+    this.execute();
     this.save();
     return { camera: cameraPosition, nodeId };
   }
@@ -664,6 +717,8 @@ export class GraphManager extends EventEmitter<{
       ...this.graph.groups.flatMap(g => g.nodes.map(n => n.id))
     ];
 
+    console.log('CREATE NODE ID', ids);
+
     let id = 0;
     while (ids.includes(id)) {
       id++;
@@ -804,7 +859,7 @@ export class GraphManager extends EventEmitter<{
         return [groupInputNode.id, 0, edge[2].id, edge[3]];
         // Going out to the group
       } else if (!ids.has(edge[2].id)) {
-        return [edge[0].id, edge[1], groupOutputNode.id, 'Out'];
+        return [edge[0].id, edge[1], groupOutputNode.id, 'out_0'];
       }
       return [edge[0].id, edge[1], edge[2].id, edge[3]];
     }) as [number, number, number, string][];

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

@@ -152,10 +152,6 @@ export class GraphState {
     this.edges.delete(edgeId);
   }
 
-  getEdgeData() {
-    return this.edges;
-  }
-
   updateNodePosition(node: NodeInstance) {
     if (
       node.state.x === node.position[0]
@@ -190,29 +186,6 @@ export class GraphState {
     return 1;
   }
 
-  tryConnectToDebugNode(nodeId: number) {
-    const node = this.graph.nodes.get(nodeId);
-    if (!node) return;
-    if (node.type.endsWith('/debug')) return;
-    if (!node.state.type?.outputs?.length) return;
-    for (const _node of this.graph.nodes.values()) {
-      if (_node.type.endsWith('/debug')) {
-        this.graph.createEdge(node, 0, _node, 'input');
-        return;
-      }
-    }
-
-    const debugNode = this.graph.createNode({
-      type: '__internal/node/debug',
-      position: [node.position[0] + 30, node.position[1]],
-      props: {}
-    });
-
-    if (debugNode) {
-      this.graph.createEdge(node, 0, debugNode, 'input');
-    }
-  }
-
   copyNodes() {
     if (this.activeNodeId === -1 && !this.selectedNodes?.size) {
       return;
@@ -362,7 +335,8 @@ export class GraphState {
         for (const node of this.graph.nodes.values()) {
           const x = node.position[0];
           const y = node.position[1];
-          const height = getNodeHeight(this.graph.getNodeType(node)!);
+          const nodeType = this.graph.getNodeType(node);
+          const height = nodeType ? getNodeHeight(nodeType) : 20;
           if (downX > x && downX < x + 20 && downY > y && downY < y + height) {
             clickedNodeId = node.id;
             break;
@@ -374,6 +348,7 @@ export class GraphState {
   }
 
   isNodeInView(node: NodeInstance) {
+    if (!node) return false;
     const height = getNodeHeight(this.graph.getNodeType(node)!);
     const width = 20;
     return node.position[0] > this.cameraBounds[0] - width

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

@@ -95,8 +95,9 @@
     graphState.addMenuPosition = null;
   }
 
-  function getSocketType(node: NodeInstance, index: number | string, e: unknown): string {
+  function getSocketType(node: NodeInstance, index: number | string): string {
     const nodeType = graph.getNodeType(node);
+    console.log({ nodeType, index });
     if (typeof index === 'string') {
       return nodeType?.inputs?.[index].type || 'unknown';
     }
@@ -171,7 +172,9 @@
     {#if graph.status === 'idle'}
       {#if graph.isInsideGroup}
         <HTML transform={false}>
-          <button class="exit-group" onclick={() => graphState.exitGroupNode()}>↑ Exit Group</button>
+          <button class="exit-group" onclick={() => graphState.exitGroupNode()}>
+            ↑ Exit Group
+          </button>
         </HTML>
       {/if}
 
@@ -188,8 +191,8 @@
       {#if graphState.activeSocket}
         <EdgeEl
           z={graphState.cameraPosition[2]}
-          inputType={getSocketType(graphState.activeSocket.node, graphState.activeSocket.index, 'c')}
-          outputType={getSocketType(graphState.activeSocket.node, graphState.activeSocket.index, 'd')}
+          inputType={getSocketType(graphState.activeSocket.node, graphState.activeSocket.index)}
+          outputType={getSocketType(graphState.activeSocket.node, graphState.activeSocket.index)}
           x1={graphState.activeSocket.position[0]}
           y1={graphState.activeSocket.position[1]}
           x2={graphState.edgeEndPosition?.[0] ?? graphState.mousePosition[0]}
@@ -202,8 +205,8 @@
         <EdgeEl
           id={graph.getEdgeId(edge)}
           z={graphState.cameraPosition[2]}
-          inputType={getSocketType(edge[0], edge[1], 'a')}
-          outputType={getSocketType(edge[2], edge[3], 'b')}
+          inputType={getSocketType(edge[0], edge[1])}
+          outputType={getSocketType(edge[2], edge[3])}
           {x1}
           {y1}
           {x2}
@@ -222,10 +225,10 @@
           style:transform={`scale(${graphState.cameraPosition[2] * 0.1})`}
           class:hovering-sockets={graphState.activeSocket}
         >
-          {#each graph.getAllNodes() as node (node.id)}
+          {#each graph.nodeArray as node, index (node.id)}
             <NodeEl
-              {node}
-              inView={graphState.isNodeInView(node)}
+              bind:node={graph.nodeArray[index]}
+              inView={node ? graphState.isNodeInView(node) : false}
             />
           {/each}
         </div>

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

@@ -190,7 +190,7 @@ export class MouseEventManager {
     // if we clicked on a node
     if (clickedNodeId !== -1) {
       if (event.ctrlKey && event.shiftKey) {
-        this.state.tryConnectToDebugNode(clickedNodeId);
+        this.graph.tryConnectToDebugNode(clickedNodeId);
         return;
       }
       if (this.state.activeNodeId === -1) {

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

@@ -25,15 +25,12 @@ export function getParameterHeight(node: NodeDefinition, inputKey: string) {
 
 const nodeHeightCache: Record<string, number> = {};
 export function getNodeHeight(node: NodeDefinition) {
-  if (!node) {
-    console.trace('Node is undefined', node);
+  if (!node || !('inputs' in node)) {
+    return 5;
   }
   if (node.id in nodeHeightCache) {
     return nodeHeightCache[node.id];
   }
-  if (!node?.inputs) {
-    return 5;
-  }
   let height = 5;
 
   for (const key in node.inputs) {

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

@@ -68,6 +68,7 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
 
   keymap.addShortcut({
     key: 'Tab',
+    preventDefault: true,
     description: 'Enter selected node group',
     callback: () => graphState.enterGroupNode()
   });

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

@@ -34,14 +34,14 @@
 
   const sectionHeights = $derived(
     Object
-      .keys(nodeType.inputs || {})
+      .keys(nodeType?.inputs || {})
       .map(key => getParameterHeight(nodeType, key) / 10)
       .filter(b => !!b)
   );
 
   let meshRef: Mesh | undefined = $state();
 
-  const height = $derived(getNodeHeight(nodeType));
+  const height = $derived(nodeType ? getNodeHeight(nodeType) : 20);
 
   const zoom = $derived(graphState.cameraPosition[2]);
 

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

@@ -19,7 +19,7 @@
 
   let { node = $bindable(), input, id, isLast }: Props = $props();
 
-  const nodeType = $derived(graph.getNodeType(node)!);
+  let nodeType = $derived(graph.getNodeType(node)!);
 
   const inputType = $derived(nodeType.inputs?.[id]);
 

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

@@ -159,7 +159,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
     // Only load non-virtual types (virtual nodes are resolved locally)
     const nonVirtualTypes = graph.nodes
       .map(node => node.type)
-      .filter(t => !t.startsWith('__virtual/'));
+      .filter(t => !t.startsWith('__internal/'));
     await this.registry.load(nonVirtualTypes as any);
 
     const typeMap = new Map<string, NodeDefinition>();