feat(rack-planner): implement port-to-port connections (patch cables) with dynamic SVG visualization layer

client/src/store/useRackStore.ts

@@ -19,6 +19,11 @@ interface RackState {
   removeModuleLocal: (moduleId: string) => void;
   // Selection
   setSelectedModule: (id: string | null) => void;
+  // Cabling
+  cablingFromPortId: string | null;
+  setCablingFromPortId: (id: string | null) => void;
+  createConnection: (fromPortId: string, toPortId: string) => Promise<void>;
+  deleteConnection: (id: string) => Promise<void>;
 }
 
 export const useRackStore = create<RackState>((set, get) => ({
@@ -106,4 +111,21 @@ export const useRackStore = create<RackState>((set, get) => ({
   },
 
   setSelectedModule: (id) => set({ selectedModuleId: id }),
+  
+  // Cabling
+  cablingFromPortId: null,
+  setCablingFromPortId: (id) => set({ cablingFromPortId: id }),
+  
+  createConnection: async (fromPortId, toPortId) => {
+    await apiClient.connections.create({ fromPortId, toPortId });
+    // Refresh racks to get updated nested connections
+    const racks = await apiClient.racks.list();
+    set({ racks });
+  },
+
+  deleteConnection: async (id) => {
+    await apiClient.connections.delete(id);
+    const racks = await apiClient.racks.list();
+    set({ racks });
+  },
 }));