feat: clamp AddMenu to viewport

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

@@ -17,9 +17,11 @@
   import { MouseEventManager } from './mouse.events';
 
   const {
-    keymap
+    keymap,
+    addMenuPadding
   }: {
     keymap: ReturnType<typeof createKeyMap>;
+    addMenuPadding?: { left?: number; right?: number; bottom?: number; top?: number };
   } = $props();
 
   const graph = getGraphManager();
@@ -160,7 +162,13 @@
 
     {#if graph.status === 'idle'}
       {#if graphState.addMenuPosition}
-        <AddMenu onnode={handleNodeCreation} />
+        <AddMenu
+          onnode={handleNodeCreation}
+          paddingTop={addMenuPadding?.top}
+          paddingRight={addMenuPadding?.right}
+          paddingBottom={addMenuPadding?.bottom}
+          paddingLeft={addMenuPadding?.left}
+        />
       {/if}
 
       {#if graphState.activeSocket}

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

@@ -18,6 +18,8 @@
     showHelp?: boolean;
     settingTypes?: Record<string, unknown>;
 
+    addMenuPadding?: { left?: number; right?: number; bottom?: number; top?: number };
+
     onsave?: (save: Graph) => void;
     onresult?: (result: unknown) => void;
   };
@@ -25,6 +27,7 @@
   let {
     graph,
     registry,
+    addMenuPadding,
     settings = $bindable(),
     activeNode = $bindable(),
     backgroundType = $bindable('grid'),
@@ -83,4 +86,4 @@
   });
 </script>
 
-<GraphEl {keymap} />
+<GraphEl {keymap} {addMenuPadding} />