add autogenerated ID to route and processors

Update npm to v12

package.json

@@ -26,7 +26,7 @@
     "dist"
   ],
   "license": "MIT",
-  "packageManager": "npm@11.19.0",
+  "packageManager": "npm@12.0.2",
   "dependencies": {
     "@angular/cdk": "22.1.2",
     "@angular/common": "22.1.2",
@@ -55,7 +55,7 @@
     "postcss": "8.5.26",
     "prettier": "3.9.6",
     "tailwindcss": "4.3.3",
-    "typescript": "7.0.2",
+    "typescript": "6.0.3",
     "vitest": "4.1.11"
   }
 }

src/app/components/route-list/route-list.html

@@ -17,7 +17,7 @@
     (cdkDropListDropped)="drop($event)"
     [cdkDropListData]="routes()"
   >
-    @for (route of routes(); track $index + (route.input || ''); let i = $index) {
+    @for (route of routes(); track route.id; let i = $index) {
       <div class="m-2" cdkDrag>
         <app-route
           [id]="listService.pathToId(`routes/${i}`)"

src/app/components/route/route.html

@@ -81,7 +81,7 @@
             (cdkDropListDropped)="drop($event)"
             [cdkDropListData]="route()?.processors"
           >
-            @for (processor of processors(); track $index + processor.type; let i = $index) {
+            @for (processor of processors(); track processor.id; let i = $index) {
               <div cdkDrag>
                 <app-processor
                   [path]="path() + '/processors/' + i"
@@ -237,7 +237,7 @@
               (cdkDropListDropped)="drop($event)"
               [cdkDropListData]="route()?.processors"
             >
-              @for (processor of processors(); track $index + processor.type; let i = $index) {
+              @for (processor of processors(); track processor.id; let i = $index) {
                 <div cdkDrag>
                   <app-processor
                     [path]="path() + '/processors/' + i"

src/app/models/config.ts

@@ -22,11 +22,13 @@ export type ModuleConfig = {
 };
 
 export type RouteConfig = {
+  id: string;
   input?: string;
   processors?: ProcessorConfig[];
 };
 
 export type ProcessorConfig = {
+  id: string;
   type: string;
   params?: Record<string, any>;
 };

src/app/services/schema.ts

@@ -139,12 +139,16 @@ export class SchemaService {
   }
 
   getSkeletonForRoute(): RouteConfig {
-    const template: RouteConfig = {};
+    const template: RouteConfig = {
+      id: crypto.randomUUID(),
+      processors: [],
+    };
     return template;
   }
 
   getSkeletonForProcessor(processorType: string): ProcessorConfig {
     const template: ProcessorConfig = {
+      id: crypto.randomUUID(),
       type: processorType,
     };
     const itemInfo = this.processorTypes.find((itemInfo) => itemInfo.type === processorType);